/* ======================================== Formeo13 Futuristic Theme (Dark/Light) ======================================== */ :root{ --brand: #5a66e7; /* light purple from logo */ --brand-2:#27306f; /* deep indigo/navy from logo */ --accent:#a9b1ff; /* Dark scheme */ --bg0-dark:#0c0f24; --bg2-dark:#161a3a; --text-dark:#eaf0ff; --muted-dark:#a9b5d8; --card-dark:rgba(255,255,255,.05); --border-dark:rgba(255,255,255,.14); /* Light scheme */ --bg0-light:#f6f7ff; --bg2-light:#e9ecff; --text-light:#111322; --muted-light:#4b4f6b; --card-light:rgba(0,0,0,.035); --border-light:rgba(0,0,0,.12); } /* Theme variables resolved by [data-theme] on */ html[data-theme="dark"]{ --bg0:var(--bg0-dark); --bg2:var(--bg2-dark); --text:var(--text-dark); --muted:var(--muted-dark); --card:var(--card-dark); --border:var(--border-dark); } html[data-theme="light"]{ --bg0:var(--bg0-light); --bg2:var(--bg2-light); --text:var(--text-light); --muted:var(--muted-light); --card:var(--card-light); --border:var(--border-light); } *{box-sizing:border-box} html, body{height:100%} body{ margin:0; color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif; /* Smooth, fixed, non-repeating layered gradient */ background: radial-gradient(1000px 700px at 10% 5%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 60%), radial-gradient(1000px 700px at 90% 0%, color-mix(in oklab, var(--brand-2) 26%, transparent), transparent 60%), linear-gradient(180deg, var(--bg0) 0%, var(--bg2) 100%); background-attachment: fixed, fixed, fixed; background-repeat: no-repeat; min-height: 100dvh; overflow-x: hidden; } a{color:var(--accent); text-decoration: none} a:hover{opacity:.9} .container{max-width:1200px; margin:0 auto; padding:24px} /* Header / Nav */ .header{ position:sticky; top:0; z-index:40; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05)); border-bottom:1px solid var(--border); } .nav{display:flex; align-items:center; gap:18px; padding:10px 24px} .nav img{height:40px} .nav .title{font-weight:800; letter-spacing:.5px} .nav ul{list-style:none; display:flex; gap:16px; margin-left:auto; padding:0} .nav a{ padding:10px 12px; border-radius:12px; border:1px solid transparent; color: #4855df; } .nav a.active, .nav a:hover{border-color:var(--border); background:var(--card)} .theme-toggle{ margin-left:12px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--text); cursor:pointer; } /* Hero */ .hero{position:relative; padding:96px 24px 64px} .hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center} .badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:var(--card); color:var(--muted); border:1px solid var(--border)} .badge .dot{width:8px; height:8px; border-radius:999px; background:var(--brand); box-shadow:0 0 12px var(--brand)} h1{font-size: clamp(30px, 5.5vw, 60px); margin:10px 0 8px; line-height:1.06} .lead{color:var(--muted); max-width:60ch; font-size: clamp(16px, 2vw, 19px)} .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(110,119,220,.22), rgba(39,48,111,.22)); color:var(--text); font-weight:700; letter-spacing:.2px; cursor:pointer } .btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))} /* Sections */ .section{padding:60px 24px} .card{ background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.25) } .features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px} .feature{padding:18px} .icon{width:42px; height:42px; border-radius:12px; background:linear-gradient(180deg, var(--brand), var(--brand-2))} /* Counters */ .counter-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:18px} .counter{padding:20px; text-align:center; position:relative; overflow:hidden} .counter h3{margin:0; font-size: clamp(30px, 4vw, 48px)} .counter p{margin:6px 0 0; color:var(--muted)} .counter::after{ content:""; position:absolute; inset:-1px; border-radius:20px; background: conic-gradient(from 0deg, var(--brand), var(--brand-2), var(--accent), var(--brand)); filter: blur(28px); opacity:.12; z-index:-1; } /* Grids */ .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px} .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px} .grid-1{display:grid; grid-template-columns:1fr; gap:18px} .training-card{padding:18px; display:flex; flex-direction:column; gap:10px} .training-card .tag{font-size:12px; color:var(--muted)} .training-card .actions{margin-top:auto; display:flex; gap:10px} /* About */ .split{display:grid; grid-template-columns:1.15fr .85fr; gap:24px} /* Contact form */ .input, textarea, select{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); } textarea{min-height:120px; resize:vertical} /* Footer */ .footer{padding:36px 24px; border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02))} .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px} .copy{padding:14px 24px; border-top:1px solid var(--border); color:var(--muted)} .footer .brand-row{display:flex; align-items:center; gap:12px} ul.clean{list-style:none; padding:0; margin:0; display:grid; gap:8px} /* Reveal animation */ .reveal{opacity:0; transform: translateY(12px); transition: all .6s ease} .reveal.visible{opacity:1; transform:translateY(0)} /* Responsive */ @media (max-width: 980px){ .hero .grid{grid-template-columns:1fr} .features{grid-template-columns:1fr} .counter-wrap{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .split{grid-template-columns:1fr} }