/* ========================================================== AIR REALM — Design Tokens Palette sampled from brand mark: matte navy-black + steel blue + metallic gold. ========================================================== */ :root{ --bg: #0a0b12; --bg-1: #0d0f1a; --surface: #11141f; --surface-2: #161a29; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --blue-900: #131a30; --blue-700: #223058; --blue-500: #3e5c94; --blue-400: #5b7fc4; --blue-300: #8fa8dd; --gold-700: #8a6a22; --gold-500: #c9a227; --gold-400: #d9b64a; --gold-300: #eccf7c; --text-0: #f3f4f8; --text-1: #c7cbdb; --text-2: #8990a8; --text-3: #5b6178; --font-head: "Space Grotesk", "Inter", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(.22,.85,.32,1); --nav-scrim: rgba(10,11,18,.78); --nav-scrim-solid: rgba(10,11,18,.98); } /* ========================================================== LIGHT THEME — same brand hues, re-weighted for a light page. Activated via [data-theme="light"] on , set by an inline script in and toggled/persisted by main.js. ========================================================== */ :root[data-theme="light"]{ /* A light, perceptible blend of matte navy into the white/cream canvas — not a heavy wash, just enough that the page doesn't read as neutral gray. Navy shows up more directly in icons, buttons, and accent bars. */ --bg: #eef1f8; --bg-1: #e5eaf5; --surface: #ffffff; --surface-2: #e9edf6; --border: rgba(34,48,88,.13); --border-strong: rgba(34,48,88,.22); --text-0: #0a0b12; --text-1: #3b4054; --text-2: #6b7182; --text-3: #8990a8; /* Re-weight accents toward their darker end so text/icons keep contrast on a light background — same hues, not new colors. */ --gold-400: #8a6a22; --gold-500: #96751f; --blue-300: #3e5c94; --blue-400: #2d4570; --nav-scrim: rgba(238,241,248,.85); --nav-scrim-solid: rgba(238,241,248,.98); } /* Mock "dashboard" windows (leaderboard / terminal / SOC feed) simulate an always-dark terminal in both site themes — pin their tokens back to the original dark-mode values so the light theme's re-weighted accents don't wash them out against their permanently dark background. */ .mock-window, .mock-window *{ --gold-400: #d9b64a; --gold-500: #c9a227; --blue-300: #8fa8dd; --blue-400: #5b7fc4; --text-2: #8990a8; --text-3: #5b6178; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text-1); font-family:var(--font-body); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .4s var(--ease), color .4s var(--ease); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-head); color:var(--text-0); font-weight:600; letter-spacing:-.02em; } ::selection{ background:var(--gold-500); color:#0a0b12; } /* subtle film grain overlay for the "matte" feel */ .grain{ position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .gold-text{ background:linear-gradient(100deg,var(--gold-300),var(--gold-500) 60%,var(--gold-700)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stroke-text{ /* Solid (not transparent) fill — an outline-only letter would otherwise let anything positioned behind it (e.g. the floating logo) show straight through the hollow interior. */ color:var(--bg); -webkit-text-stroke:1.5px var(--blue-300); } /* ---------- reveal-on-scroll ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.5em; justify-content:center; padding:.85em 1.6em; border-radius:999px; font-weight:600; font-size:.92rem; border:1px solid transparent; white-space:nowrap; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .btn span{ transition:transform .3s var(--ease); } .btn:hover span{ transform:translateX(3px); } .btn-gold{ background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:#191204; box-shadow:0 8px 30px -8px rgba(201,162,39,.55); } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(201,162,39,.7); } /* Light theme only: primary buttons match the icon treatment — dark matte navy fill, gold outline — with the label itself staying gold (using the brighter, unweighted gold-300 since the fill behind it is now dark). */ :root[data-theme="light"] .btn-gold{ background:linear-gradient(135deg,var(--blue-700),var(--blue-900)); border:2px solid var(--gold-500); color:var(--gold-300); box-shadow:0 8px 30px -8px rgba(19,26,48,.4); } :root[data-theme="light"] .btn-gold:hover{ box-shadow:0 14px 34px -8px rgba(19,26,48,.55); } .btn-outline{ border-color:var(--border-strong); color:var(--text-0); background:rgba(255,255,255,.02); } .btn-outline:hover{ border-color:var(--blue-300); background:rgba(91,127,196,.08); transform:translateY(-2px); } .btn-ghost{ color:var(--text-1); padding:.85em 1.1em; } .btn-ghost:hover{ color:var(--text-0); } .btn-lg{ padding:1em 1.9em; font-size:1rem; } .btn-block{ width:100%; } .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color:var(--blue-300); text-transform:uppercase; margin-bottom:1rem; display:inline-block; } .tag-live{ color:var(--gold-400); } .tag-soon{ color:var(--text-2); } /* ========================================================== NAV ========================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:500; border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); } .nav.scrolled{ background:var(--nav-scrim); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--border); } .nav-inner{ max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); height:76px; display:flex; align-items:center; gap:2rem; } .brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; } .brand-mark{ height:34px; width:auto; border-radius:6px; } .brand-word{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; letter-spacing:.04em; color:var(--text-0); } .brand-word em{ font-style:normal; color:var(--gold-400); } .nav-menu{ display:flex; align-items:center; gap:2rem; } .nav-links{ display:flex; gap:1.9rem; } .nav-links a{ font-size:.9rem; color:var(--text-1); position:relative; padding:.3rem 0; transition:color .25s; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-400); transition:width .3s var(--ease); } .nav-links a:hover{ color:var(--text-0); } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:.5rem; } .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; } .nav-toggle span{ width:22px; height:2px; background:var(--text-0); border-radius:2px; transition:transform .3s, opacity .3s; } /* ========================================================== HERO ========================================================== */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 1.5rem 80px; overflow:hidden; isolation:isolate; background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(62,92,148,.28), transparent 60%), radial-gradient(ellipse 60% 40% at 85% 90%, rgba(201,162,39,.10), transparent 60%), var(--bg); } #hero-canvas{ position:absolute; inset:0; z-index:0; opacity:.4; } .hero-glow{ position:absolute; top:-20%; left:50%; translate:-50% 0; width:900px; height:900px; z-index:0; background:radial-gradient(circle,rgba(62,92,148,.18),transparent 65%); pointer-events:none; } /* Floating brand mark — the hero's primary visual signature. Always shown; three layers of defense against it colliding with the headline: 1) it scales down on narrower viewports, so there's more often a real gap beside the centered text column; 2) z-index keeps it strictly behind the text (hero-content is above it); 3) low opacity means any residual overlap reads as a faint watermark, not a collision — and .stroke-text has a solid fill (see above) so it can never show through a hollow letter regardless. */ .hero-triangle{ position:absolute; right:3%; top:10%; z-index:0; opacity:.32; width:clamp(220px,22vw,520px); animation:float 8s ease-in-out infinite; } .hero-triangle img{ width:100%; height:auto; filter:drop-shadow(0 0 60px rgba(201,162,39,.35)) drop-shadow(0 0 110px rgba(62,92,148,.25)); } @keyframes float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-20px) rotate(1.5deg); } } .hero-content{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; } .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--blue-300); margin-bottom:1.6rem; text-transform:uppercase; } .hero-title{ font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.06; letter-spacing:-.03em; margin-bottom:1.6rem; } .hero-sub{ font-size:clamp(1rem,1.6vw,1.18rem); color:var(--text-1); max-width:620px; margin:0 auto 2.4rem; } .hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.4rem; } .hero-stats{ display:flex; gap:clamp(1.6rem,5vw,3.6rem); justify-content:center; flex-wrap:wrap; padding-top:2.2rem; border-top:1px solid var(--border); } .stat{ display:flex; flex-direction:column; align-items:center; gap:.35rem; } .stat-num{ font-family:var(--font-head); font-size:1.6rem; font-weight:700; color:var(--gold-400); } .stat-label{ font-size:.78rem; color:var(--text-2); letter-spacing:.03em; } .scroll-cue{ position:absolute; bottom:28px; left:50%; translate:-50% 0; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em; color:var(--text-3); } .scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--gold-400),transparent); animation:scrollcue 1.8s ease-in-out infinite; } @keyframes scrollcue{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top; } 40%{ opacity:1; transform:scaleY(1); transform-origin:top;} 100%{ opacity:0; transform:scaleY(1); transform-origin:bottom; } } /* ========================================================== MARQUEE ========================================================== */ .marquee-wrap{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-1); overflow:hidden; padding:1.1rem 0; } .marquee-track{ display:flex; gap:3rem; width:max-content; white-space:nowrap; animation:marquee 32s linear infinite; } .marquee-track span{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em; color:var(--text-3); } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ========================================================== SECTIONS (generic) ========================================================== */ .section{ padding:clamp(4.5rem,9vw,7.5rem) clamp(1.25rem,4vw,2.5rem); max-width:1280px; margin:0 auto; } .section-alt{ max-width:none; background:var(--bg-1); } .section-alt > *{ max-width:1280px; margin-left:auto; margin-right:auto; } .section-head{ max-width:680px; margin:0 auto 3.4rem; text-align:center; } .section-head h2{ font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:.9rem; } .section-sub{ color:var(--text-2); font-size:1.02rem; } .grid{ display:grid; gap:1.6rem; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } /* ---------- cards ---------- */ .card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2.1rem 1.9rem; overflow:hidden; transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); } .card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(201,162,39,0),rgba(201,162,39,0)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:background .45s var(--ease); pointer-events:none; } .card:hover{ transform:translateY(-6px); border-color:transparent; background:var(--surface-2); box-shadow:0 24px 50px -20px rgba(0,0,0,.55); } .card:hover::before{ background:linear-gradient(135deg,var(--gold-500),var(--blue-500)); } .card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; } .card-icon{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--surface-2); color:var(--blue-300); border:1px solid var(--border); } .card-icon svg{ width:26px; height:26px; } .icon-red{ color:var(--gold-400); } .icon-blue{ color:var(--blue-300); } .card h3{ font-size:1.25rem; margin-bottom:.7rem; } .card p{ color:var(--text-2); font-size:.94rem; margin-bottom:1.1rem; } .badge{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; padding:.32em .7em; border-radius:999px; } .badge-live{ background:rgba(201,162,39,.15); color:var(--gold-400); border:1px solid rgba(201,162,39,.35); } .card-list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; } .card-list li{ font-size:.85rem; color:var(--text-2); padding-left:1.1rem; position:relative; } .card-list li::before{ content:"▸"; position:absolute; left:0; color:var(--blue-400); } .card-link{ display:inline-flex; align-items:center; gap:.4em; font-size:.88rem; font-weight:600; color:var(--gold-400); } .card-link span{ transition:transform .3s var(--ease); } .card-link:hover span{ transform:translateX(4px); } .badge-active{ background:rgba(201,162,39,.15); color:var(--gold-400); border:1px solid rgba(201,162,39,.35); } .price-tag{ font-family:var(--font-mono); font-size:1.05rem; font-weight:600; color:var(--gold-400); margin-bottom:.2rem; } .price-note{ font-size:.8rem; color:var(--text-3); margin-bottom:1.2rem; } /* ---------- service cards: premium treatment over the base .card ---------- */ .service-card, .vm-card{ position:relative; padding-top:2.4rem; } .service-card::after, .vm-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; background:linear-gradient(90deg,var(--gold-300),var(--gold-500) 55%,var(--blue-500)); opacity:.85; } .service-card .card-icon, .vm-card .card-icon{ background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:#191204; border:none; box-shadow:0 10px 24px -10px rgba(201,162,39,.5); } /* Light theme only: icons flip to majority dark-matte-navy with a gold outline ring — dark theme keeps the gold-majority badge above untouched. */ :root[data-theme="light"] .service-card .card-icon, :root[data-theme="light"] .vm-card .card-icon{ background:linear-gradient(135deg,var(--blue-700),var(--blue-900)); border:2px solid var(--gold-500); color:#f3f4f8; box-shadow:0 10px 24px -10px rgba(19,26,48,.5); } .service-card::before, .vm-card::before{ background:radial-gradient(circle at 85% 0%, rgba(201,162,39,.14), transparent 60%); opacity:0; transition:opacity .45s var(--ease); mask:none; -webkit-mask:none; padding:0; } /* Equal specificity to, and later than, .card:hover::before — wins the background tie-break so the radial glow replaces the generic border trick. */ .service-card:hover::before, .vm-card:hover::before{ background:radial-gradient(circle at 85% 0%, rgba(201,162,39,.22), transparent 60%); opacity:1; } /* ========================================================== PLATFORM ROWS (detail left / live-mock visual right) ========================================================== */ .platform-rows{ display:flex; flex-direction:column; gap:clamp(3rem,7vw,5rem); } .platform-row{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; } .platform-detail .badge{ margin-bottom:1rem; } .platform-detail h3{ font-size:clamp(1.5rem,2.6vw,1.9rem); margin-bottom:.9rem; } .platform-detail p{ color:var(--text-2); font-size:1rem; margin-bottom:1.3rem; } .platform-detail .card-list{ margin-bottom:1.7rem; } .platform-detail .card-list li{ font-size:.92rem; } .platform-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; } .mock-window{ background:#07080d; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transition:transform .5s var(--ease), box-shadow .5s var(--ease); } .platform-row:hover .mock-window{ transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(0,0,0,.8); } .mock-bar{ display:flex; align-items:center; gap:.4rem; padding:.8rem 1rem; background:var(--surface); border-bottom:1px solid var(--border); } .dot{ width:9px; height:9px; border-radius:50%; } .dot-red{ background:#e05a5a; } .dot-gold{ background:var(--gold-400); } .dot-green{ background:#57c785; } .mock-url{ margin-left:.6rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); background:var(--bg-1); padding:.25em .7em; border-radius:5px; border:1px solid var(--border); } .mock-body{ padding:1.4rem; min-height:300px; } .mock-leaderboard{ display:flex; flex-direction:column; } .mock-lb-head{ display:grid; grid-template-columns:2.4rem 1fr auto; gap:.6rem; padding:0 .5rem .8rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--text-3); text-transform:uppercase; border-bottom:1px solid var(--border); margin-bottom:.8rem; } .lb-list{ display:flex; flex-direction:column; gap:.55rem; } .lb-item{ display:grid; grid-template-columns:2.4rem 1fr auto; gap:.6rem; align-items:center; padding:.6rem .5rem; border-radius:8px; background:var(--surface); border:1px solid var(--border); transition:transform .4s var(--ease); } .lb-rank{ font-family:var(--font-head); font-weight:700; color:var(--gold-400); font-size:.95rem; } .lb-item:nth-child(1) .lb-rank{ color:var(--gold-300); } .lb-team{ font-size:.88rem; color:var(--text-0); } .lb-score{ font-family:var(--font-mono); font-size:.82rem; color:var(--blue-300); } .terminal-text{ font-family:var(--font-mono); font-size:.82rem; line-height:1.75; color:var(--blue-300); white-space:pre-wrap; word-break:break-word; } .terminal-text .ln-out{ color:var(--text-2); } .terminal-text .ln-ok{ color:var(--gold-400); } .cursor-blink{ font-family:var(--font-mono); color:var(--gold-400); animation:blink 1s step-start infinite; } @keyframes blink{ 50%{ opacity:0; } } .feed-list{ display:flex; flex-direction:column; gap:.7rem; } .feed-item{ display:flex; align-items:flex-start; gap:.7rem; font-size:.82rem; padding:.7rem .8rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; animation:feedIn .5s var(--ease); } @keyframes feedIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:translateX(0); } } .feed-sev{ font-family:var(--font-mono); font-size:.62rem; padding:.2em .55em; border-radius:5px; flex-shrink:0; margin-top:.1rem; } .sev-crit{ background:rgba(224,90,90,.15); color:#f08484; } .sev-high{ background:rgba(217,182,74,.15); color:var(--gold-400); } .sev-med{ background:rgba(91,127,196,.18); color:var(--blue-300); } .feed-body strong{ color:var(--text-0); display:block; font-size:.83rem; margin-bottom:.15rem; } .feed-body span{ color:var(--text-3); font-family:var(--font-mono); font-size:.72rem; } /* ---------- Training Platform mock: course/module list ---------- */ .mock-course-list{ display:flex; flex-direction:column; gap:.7rem; } .mock-course-item{ display:flex; align-items:center; gap:.9rem; padding:.8rem .9rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; } .mock-course-check{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-family:var(--font-mono); border:1.5px solid var(--border-strong); color:var(--text-3); } .mock-course-item.is-done .mock-course-check{ background:var(--gold-500); border-color:var(--gold-500); color:#191204; } .mock-course-item.is-active .mock-course-check{ border-color:var(--blue-400); color:var(--blue-300); } .mock-course-body{ flex:1; min-width:0; } .mock-course-body strong{ display:block; font-size:.86rem; color:var(--text-0); margin-bottom:.35rem; } .mock-progress{ height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .mock-progress-bar{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); } .mock-course-tag{ flex-shrink:0; font-family:var(--font-mono); font-size:.62rem; color:var(--text-3); } /* ---------- OT Security mock: asset status grid ---------- */ .mock-ot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; } .mock-ot-tile{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.1rem .6rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; } .mock-ot-dot{ width:10px; height:10px; border-radius:50%; } .mock-ot-dot.ok{ background:#57c785; box-shadow:0 0 0 4px rgba(87,199,133,.18); animation:otPulse 2.4s ease-in-out infinite; } .mock-ot-dot.warn{ background:var(--gold-400); box-shadow:0 0 0 4px rgba(217,182,74,.18); animation:otPulse 2.4s ease-in-out infinite; } @keyframes otPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } .mock-ot-label{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-1); } .mock-ot-sub{ font-size:.66rem; color:var(--text-3); } /* ---------- Research & Innovation mock: activity list ---------- */ .mock-research-list{ display:flex; flex-direction:column; gap:.7rem; } .mock-research-item{ display:flex; align-items:flex-start; gap:.7rem; font-size:.82rem; padding:.7rem .8rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; } .mock-research-tag{ font-family:var(--font-mono); font-size:.6rem; padding:.2em .55em; border-radius:5px; flex-shrink:0; margin-top:.1rem; background:rgba(91,127,196,.18); color:var(--blue-300); white-space:nowrap; } /* ========================================================== ENTERPRISE TOOLING GRID ========================================================== */ .tools-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; max-width:1100px; margin:0 auto; } .tool-chip{ display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1.4rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .tool-chip:hover{ transform:translateY(-4px); border-color:var(--gold-500); background:var(--surface-2); } .tool-chip img{ width:44px; height:44px; object-fit:contain; border-radius:9px; } .tool-chip span{ font-size:.74rem; color:var(--text-2); text-align:center; letter-spacing:.01em; } /* ========================================================== WHY GRID ========================================================== */ .why-card{ background:var(--surface); border:1.5px solid var(--blue-500); border-radius:var(--radius); padding:2rem 1.8rem; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .why-card:hover{ transform:translateY(-4px); border-color:var(--gold-500); box-shadow:0 20px 44px -26px rgba(19,26,48,.5); } .why-num{ font-family:var(--font-mono); color:var(--gold-500); font-size:.85rem; letter-spacing:.05em; } .why-card h3{ font-size:1.1rem; margin:.8rem 0 .6rem; } .why-card p{ color:var(--text-2); font-size:.9rem; } /* ========================================================== TIMELINE / ROADMAP ========================================================== */ .timeline{ max-width:760px; margin:0 auto; position:relative; padding-left:2.2rem; } .timeline::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:linear-gradient(var(--gold-500),var(--blue-500) 60%,var(--border)); } .tl-item{ position:relative; padding-bottom:2.6rem; } .tl-item:last-child{ padding-bottom:0; } .tl-dot{ position:absolute; left:-2.2rem; top:4px; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--blue-400); } .tl-done .tl-dot{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 5px rgba(201,162,39,.15); } .tl-phase{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--text-3); text-transform:uppercase; } .tl-done .tl-phase{ color:var(--gold-400); } .tl-content h3{ font-size:1.15rem; margin:.4rem 0 .4rem; } .tl-content p{ color:var(--text-2); font-size:.92rem; } /* ========================================================== CTA BANNER ========================================================== */ .cta-banner{ margin:0 clamp(1rem,3vw,2rem); border-radius:24px; padding:clamp(3.5rem,8vw,5.5rem) 2rem; text-align:center; position:relative; overflow:hidden; background: radial-gradient(ellipse 70% 100% at 20% 0%, rgba(201,162,39,.16), transparent 60%), radial-gradient(ellipse 70% 100% at 80% 100%, rgba(62,92,148,.28), transparent 60%), var(--surface); border:1px solid var(--border); } .cta-banner-inner{ max-width:640px; margin:0 auto; position:relative; z-index:1; } .cta-banner h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:1rem; } .cta-banner p{ color:var(--text-2); margin-bottom:2.2rem; } .cta-banner .hero-actions{ margin-bottom:0; } /* ========================================================== CONTACT ========================================================== */ .section-contact{ padding-top:clamp(4.5rem,9vw,6rem); } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; } .contact-info h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1rem; } .contact-detail{ margin-top:1.6rem; } .contact-detail span{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--text-3); text-transform:uppercase; margin-bottom:.4rem; } .contact-detail a{ color:var(--gold-400); font-size:1.05rem; font-weight:600; } .social-row{ display:flex; gap:1.2rem; } .social-row a{ color:var(--text-1); font-size:.92rem; border-bottom:1px solid var(--border); padding-bottom:2px; transition:color .25s,border-color .25s; } .social-row a:hover{ color:var(--gold-400); border-color:var(--gold-400); } .contact-form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; } .form-row{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.45rem; } .form-row label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--text-3); text-transform:uppercase; } .form-row input, .form-row select, .form-row textarea{ background:var(--bg-1); border:1px solid var(--border); border-radius:8px; padding:.8em .9em; color:var(--text-0); font-family:var(--font-body); font-size:.92rem; resize:vertical; transition:border-color .25s, box-shadow .25s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,39,.14); } .form-note{ margin-top:.9rem; font-size:.85rem; color:var(--gold-400); min-height:1.2em; } /* ========================================================== FOOTER ========================================================== */ .footer{ border-top:1px solid var(--border); padding:4rem clamp(1.25rem,4vw,2.5rem) 2rem; max-width:1280px; margin:0 auto; } .footer-top{ margin-bottom:2.6rem; max-width:420px; } .footer-top .brand{ margin-bottom:.8rem; } .footer-top p{ color:var(--text-3); font-size:.9rem; } .footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding-bottom:2.6rem; border-bottom:1px solid var(--border); max-width:640px; } .footer-col h4{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:1rem; font-family:var(--font-mono); font-weight:500; } .footer-col h4 a{ display:inline; color:inherit; margin-bottom:0; font-size:inherit; font-family:inherit; letter-spacing:inherit; text-transform:inherit; } .footer-col h4 a:hover{ color:var(--gold-400); } .footer-col a{ display:block; color:var(--text-2); font-size:.9rem; margin-bottom:.7rem; transition:color .25s; } .footer-col a:hover{ color:var(--gold-400); } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top:1.6rem; font-size:.8rem; color:var(--text-3); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:980px){ .nav-menu{ display:none; } .nav-toggle{ display:flex; } .nav.open .nav-menu{ display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--nav-scrim-solid); backdrop-filter:blur(14px); padding:1.5rem clamp(1.25rem,4vw,2.5rem) 2rem; border-bottom:1px solid var(--border); gap:1.5rem; } .nav.open .nav-links{ flex-direction:column; gap:1.1rem; } .nav.open .nav-cta{ flex-direction:column; } .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .platform-row{ grid-template-columns:1fr; } .platform-row .platform-visual{ order:2; } .tools-grid{ grid-template-columns:repeat(4,1fr); } .contact-grid{ grid-template-columns:1fr; } .footer-cols{ grid-template-columns:1fr 1fr; max-width:none; } } @media (max-width:560px){ .hero-stats{ gap:1.6rem; } .footer-cols{ grid-template-columns:1fr; } .tools-grid{ grid-template-columns:repeat(3,1fr); } } /* ========================================================== THEME TOGGLE ========================================================== */ .theme-toggle{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(120,140,190,.06); color:var(--text-1); transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .theme-toggle:hover{ border-color:var(--gold-500); color:var(--text-0); transform:translateY(-1px); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; } /* ========================================================== PAGE HERO (about / services / blog / news / 404) ========================================================== */ .page-hero{ padding-top:clamp(7.5rem,14vw,10rem); text-align:center; } .page-hero .section-head{ margin-bottom:0; } .page-hero.blog-post{ max-width:820px; text-align:left; } .page-hero.blog-post .section-head{ text-align:left; margin:0 auto 2rem; } .page-hero.not-found{ padding-bottom:clamp(5rem,10vw,7rem); } /* ========================================================== SERVICE DETAIL ========================================================== */ .service-detail-icon{ width:56px; height:56px; margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--surface-2); color:var(--blue-300); border:1px solid var(--border); } .service-detail-icon svg{ width:28px; height:28px; } .service-detail-content{ color:var(--text-1); font-size:1.02rem; } .service-detail-content h3{ margin:2rem 0 .9rem; font-size:1.3rem; } .service-detail-content ul{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; } .service-detail-content li{ padding-left:1.2rem; position:relative; } .service-detail-content li::before{ content:"▸"; position:absolute; left:0; color:var(--blue-400); } .service-detail-content p{ margin-bottom:1rem; } .service-detail-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.4rem; } /* ========================================================== BLOG — marquee preview, list, post ========================================================== */ .blog-marquee-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .blog-marquee-track{ display:flex; gap:1.4rem; width:max-content; animation:blogMarquee 26s linear infinite; } .blog-marquee-wrap:hover .blog-marquee-track{ animation-play-state:paused; } @keyframes blogMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .blog-card{ display:flex; flex-direction:column; width:300px; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .4s var(--ease), border-color .4s var(--ease); } .blog-card:hover{ transform:translateY(-5px); border-color:var(--border-strong); } .blog-card-img, .blog-list-img{ width:100%; height:160px; object-fit:cover; background:var(--surface-2); } .blog-card-img-fallback{ background:linear-gradient(135deg,var(--blue-900),var(--surface-2)); } .blog-card-body{ padding:1.3rem 1.4rem; } .blog-card-body h3{ font-size:1.05rem; margin-bottom:.5rem; } .blog-card-body p{ color:var(--text-2); font-size:.86rem; } .section-cta{ text-align:center; margin-top:2.2rem; } .blog-list-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding-bottom:1.6rem; transition:transform .4s var(--ease), border-color .4s var(--ease); } .blog-list-card:hover{ transform:translateY(-5px); border-color:var(--border-strong); } .blog-list-img{ height:180px; margin-bottom:1.2rem; } .blog-list-card h3{ font-size:1.15rem; margin:0 1.6rem .6rem; } .blog-list-card p{ color:var(--text-2); font-size:.9rem; margin:0 1.6rem 1rem; } .blog-list-card .card-link{ margin:0 1.6rem; } .blog-post-cover{ width:100%; max-height:420px; object-fit:cover; border-radius:var(--radius); margin-bottom:2.4rem; } .blog-post-content{ color:var(--text-1); font-size:1.02rem; max-width:760px; } .blog-post-content p{ margin-bottom:1.1rem; } .blog-post-content h3{ margin:2rem 0 .9rem; font-size:1.25rem; } /* ========================================================== CYBER NEWS ========================================================== */ .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .news-item{ display:flex; flex-direction:column; background:var(--surface); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); transition:transform .35s var(--ease), border-color .35s var(--ease); } .news-item:hover{ transform:translateY(-4px); border-color:var(--gold-500); } .news-item-img{ width:100%; height:150px; object-fit:cover; background:var(--surface-2); display:block; } .news-item-body{ display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.4rem; flex:1; } .news-source{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--gold-400); text-transform:uppercase; } .news-item h3{ font-size:1rem; line-height:1.4; } .news-item p{ color:var(--text-2); font-size:.86rem; } .news-date{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); margin-top:auto; } /* ---------- homepage news preview: moving strip, same mechanic as blog ---------- */ .news-marquee-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .news-marquee-track{ display:flex; gap:1.4rem; width:max-content; animation:blogMarquee 32s linear infinite; } .news-marquee-wrap:hover .news-marquee-track{ animation-play-state:paused; } .news-marquee-track .news-item{ width:320px; flex-shrink:0; } /* ========================================================== ABOUT / TEAM ========================================================== */ .who-we-are .section-sub{ max-width:760px; } .about-stats{ display:flex; gap:clamp(1.8rem,6vw,4rem); justify-content:center; flex-wrap:wrap; margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--border); } /* ---------- vision / mission cards ---------- Same treatment as service cards (see above) — both cards match, rather than one being all-gold and the other all-blue. */ .vm-card .card-icon{ width:60px; height:60px; } .vm-card .card-icon svg{ width:30px; height:30px; } .vm-card h3{ font-size:1.4rem; margin-bottom:.9rem; } .vm-card p{ font-size:1rem; color:var(--text-1); } .team-section{ padding-top:0; } .team-grid{ margin-bottom:1rem; } .team-card{ text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem 1.6rem 2rem; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .team-card:hover{ transform:translateY(-6px); border-color:var(--gold-500); box-shadow:0 24px 50px -24px rgba(0,0,0,.5); } .team-photo{ width:132px; height:132px; margin:0 auto 1.3rem; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); border:1px solid var(--border-strong); } .team-photo img{ width:100%; height:100%; object-fit:cover; } .team-photo-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:2.2rem; color:var(--gold-400); background:linear-gradient(135deg,var(--blue-900),var(--surface-2)); } .team-card h3{ font-size:1.15rem; margin-bottom:.3rem; } .team-title{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; color:var(--gold-400); text-transform:uppercase; margin-bottom:.9rem; } .team-bio{ color:var(--text-2); font-size:.88rem; } .form-note-success{ color:#57c785; } .form-note-error{ color:#f08484; } /* ========================================================== ADMIN ========================================================== */ .admin-body{ background:var(--bg); } .admin-topbar{ display:flex; align-items:center; gap:2rem; padding:1rem clamp(1.25rem,4vw,2.5rem); border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; } .admin-pill{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--gold-400); border:1px solid var(--border-strong); border-radius:999px; padding:.2em .6em; margin-left:.6rem; } .admin-nav-links{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-right:auto; } .admin-nav-links a{ font-size:.88rem; color:var(--text-2); transition:color .25s; } .admin-nav-links a:hover{ color:var(--text-0); } .admin-logout-form{ margin:0; } .admin-content{ max-width:1100px; margin:0 auto; padding:2.4rem clamp(1.25rem,4vw,2.5rem) 4rem; } .admin-content h1{ font-size:1.6rem; margin-bottom:1.6rem; } .admin-content-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; flex-wrap:wrap; gap:1rem; } .admin-content-head h1{ margin-bottom:0; } .admin-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.2rem; margin-bottom:1.6rem; } .admin-stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.4rem; } .admin-stat-card-highlight{ border-color:var(--gold-500); } .admin-stat-num{ font-family:var(--font-head); font-size:1.8rem; font-weight:700; color:var(--gold-400); } .admin-stat-label{ font-size:.78rem; color:var(--text-2); } .admin-note{ color:var(--text-3); font-size:.85rem; } .admin-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .admin-table th, .admin-table td{ padding:.9rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); font-size:.9rem; } .admin-table th{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); } .admin-table tr:last-child td{ border-bottom:none; } .admin-row-unread{ background:rgba(201,162,39,.05); } .admin-table-actions{ display:flex; gap:.9rem; align-items:center; } .admin-table-actions form{ margin:0; } .admin-table-actions a{ color:var(--blue-300); } .admin-link-danger{ background:none; border:none; padding:0; color:#e05a5a; font-size:.88rem; cursor:pointer; } .admin-badge{ font-family:var(--font-mono); font-size:.68rem; padding:.25em .7em; border-radius:999px; letter-spacing:.05em; } .admin-badge-draft{ background:rgba(137,144,168,.15); color:var(--text-2); } .admin-badge-published{ background:rgba(201,162,39,.15); color:var(--gold-400); } .admin-form{ max-width:640px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; } .admin-current-photo{ width:64px; height:64px; object-fit:cover; border-radius:8px; margin-top:.6rem; } .admin-error-list{ background:rgba(224,90,90,.1); border:1px solid rgba(224,90,90,.3); color:#f08484; border-radius:var(--radius-sm); padding:1rem 1.4rem; margin-bottom:1.4rem; } .admin-error-list li{ font-size:.88rem; } .admin-login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; } .admin-login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2.4rem; } .admin-login-brand{ margin-bottom:1.6rem; } .admin-login-card h1{ font-size:1.3rem; margin-bottom:1.6rem; } @media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } .admin-topbar{ flex-direction:column; align-items:flex-start; } }