/* ========================================================== HAAIS HN SPACE AGENCY ---------------------------------------------------------- 1. Tokens 2. Reset & base 3. Backdrop (stars, nebula, meteors, dust, vignette) 4. Header & navigation 5. Hero (earth, rockets, flames, clock, scroll cue) 6. Particles (smoke, dust) 7. Buttons & shared UI 8. Sections (stats, missions, fleet, telemetry, timeline) 9. Contact & footer 10. Reveal animation system 11. Responsive 12. Reduced motion / print ========================================================== */ /* ========================================================== 1. TOKENS ========================================================== */ :root{ /* Palette */ --void:#03060d; --deep:#07111d; --ink:#010203; --cyan:#7bd4ff; --cyan-bright:#a9e6ff; --blue:#2b89ff; --violet:#8b6cff; --flame:#ff8a2b; --text:#e7f1ff; --text-dim:#9db0c8; --text-faint:#6b7f99; --line:rgba(123,212,255,.16); --line-strong:rgba(123,212,255,.34); --glass:rgba(8,18,34,.55); --glass-solid:rgba(8,18,34,.92); /* Type */ --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-display:'Space Grotesk','Inter',-apple-system,sans-serif; /* Rhythm */ --wrap:1180px; --gutter:clamp(20px,5vw,48px); --section-y:clamp(72px,11vw,140px); --radius:16px; --radius-sm:10px; /* Motion */ --ease-out:cubic-bezier(.16,.84,.32,1); --ease-in-out:cubic-bezier(.65,0,.35,1); /* Layers */ --z-backdrop:0; --z-smoke:6; --z-content:10; --z-header:80; } /* ========================================================== 2. RESET & BASE ========================================================== */ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; /* Anchored sections clear the fixed header. */ scroll-padding-top:96px; -webkit-text-size-adjust:100%; } body{ min-height:100%; font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--text); background:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* The gradient sits on a pseudo-element rather than the body so the camera-shake transform can move the scene without dragging the page background — and without turning into the containing block for every fixed layer. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; background: radial-gradient(circle at 50% 0%,#11224f 0%,#07111d 34%,#03060d 64%,#010203 100%); } img, svg, canvas{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button, input, textarea{ font:inherit; color:inherit; } ::selection{ background:rgba(123,212,255,.28); } :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); } .skip-link{ position:fixed; top:-100px; left:16px; z-index:999; padding:12px 20px; border-radius:var(--radius-sm); background:var(--cyan); color:var(--void); font-weight:700; transition:top .25s var(--ease-out); } .skip-link:focus{ top:16px; } /* ========================================================== 3. BACKDROP ========================================================== */ .backdrop{ position:fixed; inset:0; z-index:var(--z-backdrop); pointer-events:none; overflow:hidden; } #stars{ position:absolute; inset:0; width:100%; height:100%; } .nebula{ position:absolute; inset:-15%; background: radial-gradient(circle at 18% 22%,rgba(0,170,255,.16),transparent 36%), radial-gradient(circle at 82% 28%,rgba(120,70,255,.14),transparent 40%), radial-gradient(circle at 62% 74%,rgba(0,220,200,.07),transparent 38%), radial-gradient(circle at center,rgba(255,255,255,.03),transparent 60%); filter:blur(80px); /* Parallax is written to --px/--py so the stylesheet keeps ownership of each layer's own base transform. */ transform:translate3d(var(--px,0px),var(--py,0px),0); will-change:transform; } .vignette{ position:absolute; inset:0; box-shadow:inset 0 0 clamp(120px,22vw,300px) rgba(0,0,0,.78); transition:box-shadow 3s ease; } body.mission-ready .vignette{ box-shadow:inset 0 0 clamp(100px,18vw,230px) rgba(0,0,0,.6); } .fx-layer{ position:fixed; inset:0; pointer-events:none; overflow:hidden; } .fx-smoke{ z-index:var(--z-smoke); } /* --- Meteors ------------------------------------------------ */ .meteor{ position:absolute; width:clamp(90px,14vw,180px); height:2px; border-radius:2px; background:linear-gradient(to left, rgba(255,255,255,.95), rgba(140,215,255,.5), transparent); opacity:0; transform-origin:right center; animation-name:meteor-shoot; animation-timing-function:cubic-bezier(.2,.6,.4,1); animation-fill-mode:forwards; } @keyframes meteor-shoot{ 0% { opacity:0; transform:rotate(35deg) translateX(0) scaleX(.2); } 12% { opacity:1; } 100% { opacity:0; transform:rotate(35deg) translateX(70vw) scaleX(1); } } /* ========================================================== 4. HEADER & NAVIGATION ========================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-header); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gutter); padding-top:max(18px,env(safe-area-inset-top)); border-bottom:1px solid transparent; transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,padding .4s ease; } /* Set once the page has scrolled past the hero fold. */ .site-header.is-stuck{ background:rgba(3,6,13,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-block:12px; } .brand{ display:flex; align-items:center; gap:12px; color:var(--cyan); } .brand-mark{ width:38px; height:38px; flex:none; filter:drop-shadow(0 0 12px rgba(123,212,255,.5)); animation:brand-drift 12s var(--ease-in-out) infinite; } @keyframes brand-drift{ 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-4px) rotate(6deg); } } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-text strong{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:2px; color:var(--text); } .brand-text small{ font-size:9px; letter-spacing:3.4px; color:var(--text-faint); } .site-nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); } .site-nav > a:not(.btn){ position:relative; font-size:14px; font-weight:500; letter-spacing:.4px; color:var(--text-dim); padding:6px 0; transition:color .25s ease; } .site-nav > a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out); } .site-nav > a:not(.btn):hover, .site-nav > a.is-current{ color:var(--text); } .site-nav > a:not(.btn):hover::after, .site-nav > a.is-current::after{ transform:scaleX(1); transform-origin:left; } .nav-toggle{ display:none; width:44px; height:44px; flex:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; } .nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--cyan); transition:transform .3s var(--ease-out),opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ========================================================== 5. HERO ========================================================== */ .hero{ position:relative; z-index:var(--z-content); /* dvh tracks the collapsing mobile browser chrome; the vh line before it is the fallback for older engines. */ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px var(--gutter) 140px; overflow:hidden; } .hero-stage{ position:absolute; inset:0; pointer-events:none; } /* --- Earth -------------------------------------------------- */ /* The sphere is far wider than the viewport, then pushed down so only `--earth-visible` of its upper limb shows. Sizing it this way keeps the horizon curve gentle and the exposed height the same at every aspect ratio. */ .earth-container{ --earth-size:200vw; --earth-visible:26vh; position:absolute; bottom:calc(var(--earth-visible) - var(--earth-size)); left:50%; width:var(--earth-size); height:var(--earth-size); transform:translateX(-50%); } .earth{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 40% 30%, #2b89ff, #165bc5 35%, #0a285e 65%, #04142d 100%); box-shadow: 0 0 120px rgba(80,180,255,.45), 0 0 250px rgba(0,120,255,.20); } /* Surface: landmass and cloud blooms. This is the only layer that turns, so the sun highlight below stays put while it rotates. */ .earth::before{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 24% 30%,rgba(64,196,146,.50),transparent 11%), radial-gradient(circle at 39% 46%,rgba(46,168,124,.42),transparent 14%), radial-gradient(circle at 62% 32%,rgba(78,206,152,.38),transparent 10%), radial-gradient(circle at 74% 55%,rgba(52,178,132,.45),transparent 13%), radial-gradient(circle at 50% 72%,rgba(236,248,255,.30),transparent 16%), radial-gradient(circle at 15% 60%,rgba(228,244,255,.24),transparent 12%), radial-gradient(circle at 86% 40%,rgba(228,244,255,.20),transparent 10%); animation:earth-spin 300s linear infinite; } @keyframes earth-spin{ to{ transform:rotate(360deg); } } /* Lighting: sun highlight, night falloff, atmospheric rim. */ .earth::after{ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 42% 24%,rgba(255,255,255,.16),transparent 42%), linear-gradient(to bottom,transparent 34%,rgba(2,7,16,.55) 88%); box-shadow:inset 0 16px 45px rgba(150,225,255,.45); } /* The container's top edge sits on the horizon, so this band straddles it as atmospheric scatter. */ .earth-glow{ position:absolute; top:0; left:0; width:100%; height:26vh; border-radius:50%; background:radial-gradient(ellipse at center, rgba(90,190,255,.40), rgba(40,140,255,.18) 45%, transparent 68%); filter:blur(60px); transform:translateY(-48%) translate3d(var(--px,0px),var(--py,0px),0); will-change:transform; } .light-center{ position:absolute; left:50%; top:50%; width:min(600px,90vw); height:min(600px,90vw); margin:calc(min(600px,90vw) / -2) 0 0 calc(min(600px,90vw) / -2); border-radius:50%; background:radial-gradient(circle,rgba(120,220,255,.09),transparent 70%); filter:blur(100px); transition:opacity 3s ease,transform 3s ease; } body.mission-ready .light-center{ opacity:.4; transform:scale(1.25); } /* --- Rockets ------------------------------------------------ */ .rocket{ position:absolute; bottom:-250px; width:70px; height:220px; /* The launch keyframe owns `transform`, so any scaling has to ride the standalone `scale` property or it gets clobbered. */ scale:var(--rocket-scale,1); transform-origin:bottom center; will-change:transform; } .rocket-left { left:12%; } .rocket-right{ right:12%; } .rocket.launch{ animation:launch 9s cubic-bezier(.55,0,.85,.4) forwards; } @keyframes launch{ 0% { transform:translate3d(0,0,0); } 18% { transform:translate3d(0,-32vh,0); } 100% { transform:translate3d(0,-190vh,0); } } .rocket-body{ position:absolute; width:70px; height:160px; border-radius:40px 40px 15px 15px; background:linear-gradient(to right,#c9d2dc,#ffffff 42%,#a9b4c2); } /* Nose cone. */ .rocket-body::before{ content:""; position:absolute; top:-40px; left:15px; width:40px; height:50px; border-radius:50% 50% 0 0; background:linear-gradient(to right,#e6ebf1,#fff 45%,#c3ccd6); } .stripe{ position:absolute; left:0; right:0; top:96px; height:10px; background:linear-gradient(to right,rgba(255,66,66,.85),rgba(255,120,60,.85)); } .window{ position:absolute; left:50%; top:45px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#bdefff,#59c9ff 60%,#1f7dc0); transform:translateX(-50%); box-shadow:0 0 20px #59c9ff; } .fin{ position:absolute; bottom:5px; width:18px; height:55px; background:linear-gradient(to bottom,#ff5c5c,#c81f1f); } .fin-left{ left:-12px; transform:skewY(25deg); } .fin-right{ right:-12px; transform:skewY(-25deg); } .engine{ position:absolute; top:160px; left:50%; width:24px; height:20px; border-radius:4px; background:#3a4048; transform:translateX(-50%); animation:engine-glow .5s ease-in-out infinite alternate; } @keyframes engine-glow{ from{ box-shadow:0 0 30px rgba(255,140,0,.8); } to { box-shadow:0 0 70px rgba(255,170,40,.9); } } /* --- Flames ------------------------------------------------- */ .flame{ position:absolute; left:50%; border-radius:50%; filter:blur(2px); transform-origin:top center; animation-name:flicker; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; } @keyframes flicker{ from{ transform:translateX(-50%) scaleY(.8) scaleX(1); } to { transform:translateX(-50%) scaleY(1.45) scaleX(.9); } } .flame1{ width:20px; height:90px; top:15px; background:linear-gradient(orange,gold,white); animation-duration:.13s; } .flame2{ width:12px; height:65px; top:8px; background:linear-gradient(#4ecbff,white); animation-duration:.09s; } .flame3{ width:34px; height:110px; top:12px; background:linear-gradient(rgba(255,120,0,.7),transparent); animation-duration:.21s; } /* --- Hero content ------------------------------------------- */ .hero-content{ position:relative; z-index:2; text-align:center; max-width:900px; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(20px,3vw,32px); padding:7px 16px; border:1px solid var(--line); border-radius:999px; background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:clamp(9px,1.4vw,11px); font-weight:600; letter-spacing:clamp(1.5px,.4vw,2.6px); color:var(--cyan); /* Staged with the title lines below. */ opacity:0; animation:rise-in 1.1s var(--ease-out) .5s forwards; } .pulse-dot{ width:7px; height:7px; flex:none; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:pulse 2s ease-out infinite; } @keyframes pulse{ 0% { box-shadow:0 0 0 0 rgba(74,222,128,.7); } 70% { box-shadow:0 0 0 10px rgba(74,222,128,0); } 100% { box-shadow:0 0 0 0 rgba(74,222,128,0); } } .hero-title{ display:flex; flex-direction:column; gap:clamp(6px,1.2vw,12px); font-family:var(--font-display); } /* Each line arrives on its own beat — the eyebrow at .5s, then the three title lines, then the tagline and buttons. */ .hero-title span, .hero-tagline, .hero-actions{ opacity:0; animation:rise-in 1.2s var(--ease-out) forwards; } .hero-title .line-1{ animation-delay:.7s; } .hero-title .line-2{ animation-delay:.9s; } .hero-title .line-3{ animation-delay:1.1s; } .hero-tagline { animation-delay:1.35s; } .hero-actions { animation-delay:1.55s; } @keyframes rise-in{ from{ opacity:0; transform:translateY(38px) scale(.96); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } } .line-1{ font-size:clamp(11px,2.4vw,18px); font-weight:500; letter-spacing:clamp(5px,1.4vw,12px); color:var(--text-dim); } .line-2{ font-size:clamp(40px,10vw,96px); font-weight:700; line-height:1; letter-spacing:clamp(2px,.9vw,8px); background:linear-gradient(180deg,#ffffff 30%,#a9e6ff 75%,#4ea8ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; /* The gradient clips the paint, so the glow has to come from a filter rather than text-shadow. */ filter:drop-shadow(0 0 26px rgba(123,212,255,.45)); } .line-3{ font-size:clamp(18px,4.6vw,42px); font-weight:600; letter-spacing:clamp(4px,1.4vw,14px); color:var(--cyan); } .hero-tagline{ margin-top:clamp(22px,3.5vw,36px); font-size:clamp(13px,2.2vw,18px); letter-spacing:clamp(1.5px,.6vw,4px); color:var(--text-dim); } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(28px,4vw,44px); } /* --- Mission clock ------------------------------------------ */ .mission-clock{ position:absolute; top:calc(88px + env(safe-area-inset-top)); left:var(--gutter); z-index:3; display:flex; flex-direction:column; gap:3px; padding:11px 17px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-variant-numeric:tabular-nums; color:var(--cyan); opacity:0; animation:rise-in 1.2s var(--ease-out) 2.2s forwards; } .mission-clock-label{ font-size:9px; letter-spacing:2.6px; opacity:.7; } .mission-clock-time{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:1.5px; color:#eaf6ff; } /* --- Scroll cue --------------------------------------------- */ .scroll-cue{ position:absolute; left:50%; bottom:clamp(24px,5vh,48px); z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px; transform:translateX(-50%); color:var(--text-faint); opacity:0; animation:rise-in 1.2s var(--ease-out) 2.4s forwards; } .scroll-cue-track{ display:block; width:22px; height:36px; padding-top:7px; border:1px solid var(--line-strong); border-radius:12px; } .scroll-cue-dot{ display:block; width:3px; height:7px; margin-inline:auto; border-radius:2px; background:var(--cyan); animation:cue-fall 1.8s var(--ease-in-out) infinite; } @keyframes cue-fall{ 0%,100% { transform:translateY(0); opacity:1; } 60% { transform:translateY(12px); opacity:0; } 61% { transform:translateY(0); opacity:0; } } .scroll-cue-text{ font-size:8.5px; letter-spacing:3px; } /* --- Camera shake ------------------------------------------- Applied to the hero stage only. Shaking would make it the containing block for every fixed layer and drag the whole page with it. */ .hero-stage.shake{ animation:shake .7s ease-in-out; } @keyframes shake{ 0%,100%{ transform:translate3d(0,0,0); } 10%{ transform:translate3d(-4px,3px,0); } 20%{ transform:translate3d(5px,-3px,0); } 30%{ transform:translate3d(-6px,-2px,0); } 40%{ transform:translate3d(4px,4px,0); } 50%{ transform:translate3d(-3px,2px,0); } 60%{ transform:translate3d(5px,-4px,0); } 70%{ transform:translate3d(-4px,3px,0); } 80%{ transform:translate3d(3px,-2px,0); } 90%{ transform:translate3d(-2px,1px,0); } } /* ========================================================== 6. PARTICLES ========================================================== */ .smoke-particle{ position:absolute; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(255,252,245,.95), rgba(206,220,238,.55) 45%, transparent 72%); filter:blur(5px); opacity:0; will-change:transform,opacity; animation:smoke-rise 3s ease-out forwards; } @keyframes smoke-rise{ 0%{ opacity:.95; transform:translate(-50%,-50%) scale(.45); } 100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--drift,0px),90px) scale(2.6); } } .space-dust{ position:absolute; border-radius:50%; background:rgba(255,255,255,.7); box-shadow:0 0 6px rgba(160,220,255,.8); opacity:0; will-change:transform,opacity; animation:dust-float 6s linear forwards; } @keyframes dust-float{ 0% { opacity:0; transform:translateY(0); } 20% { opacity:.8; } 80% { opacity:.6; } 100% { opacity:0; transform:translateY(-120px); } } /* ========================================================== 7. BUTTONS & SHARED UI ========================================================== */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border:1px solid transparent; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.6px; white-space:nowrap; cursor:pointer; transition:transform .3s var(--ease-out), box-shadow .3s ease, background .3s ease, border-color .3s ease; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:linear-gradient(135deg,var(--cyan) 0%,#4ea8ff 100%); color:#04121f; box-shadow:0 6px 26px rgba(78,168,255,.32); } .btn-primary:hover{ box-shadow:0 10px 36px rgba(78,168,255,.5); } .btn-ghost{ border-color:var(--line-strong); background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--text); } .btn-ghost:hover{ border-color:var(--cyan); background:rgba(123,212,255,.1); } .kicker{ display:inline-block; margin-bottom:14px; font-size:11px; font-weight:600; letter-spacing:3.4px; color:var(--cyan); text-transform:uppercase; } .section{ position:relative; z-index:var(--z-content); padding-block:var(--section-y); } .section-head{ max-width:640px; margin-bottom:clamp(36px,5vw,58px); } .section-head h2{ font-family:var(--font-display); font-size:clamp(28px,5.2vw,50px); font-weight:700; line-height:1.1; letter-spacing:-.5px; } .section-sub{ margin-top:16px; font-size:clamp(14px,1.7vw,17px); color:var(--text-dim); } /* ========================================================== 8. SECTIONS ========================================================== */ /* --- Stats -------------------------------------------------- */ .stats-section{ padding-block:clamp(48px,7vw,80px); border-block:1px solid var(--line); background:rgba(4,10,20,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,36px); list-style:none; } .stat{ text-align:center; } .stat-value{ display:block; font-family:var(--font-display); font-size:clamp(28px,4.6vw,46px); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,#7bd4ff); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat-label{ display:block; margin-top:8px; font-size:clamp(10px,1.3vw,12px); letter-spacing:1.8px; text-transform:uppercase; color:var(--text-faint); } /* --- Cards -------------------------------------------------- */ .card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2.4vw,24px); } .card{ position:relative; padding:clamp(24px,3vw,32px); border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); overflow:hidden; transition:transform .45s var(--ease-out), border-color .35s ease, box-shadow .45s ease; } /* A soft light that tracks the pointer across the card; the coordinates come from JS as --mx/--my. */ .card::before{ content:""; position:absolute; inset:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(123,212,255,.13),transparent 65%); opacity:0; transition:opacity .4s ease; pointer-events:none; } .card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 20px 50px rgba(0,0,0,.45); } .card:hover::before{ opacity:1; } .card h3{ margin:14px 0 12px; font-family:var(--font-display); font-size:clamp(17px,2.2vw,21px); font-weight:700; letter-spacing:1.4px; } .card p{ font-size:14.5px; color:var(--text-dim); } .badge{ display:inline-block; padding:4px 11px; border:1px solid var(--line-strong); border-radius:999px; font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--cyan); } .badge-live{ border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.1); color:#7ef0a8; } .badge-prep{ border-color:rgba(255,180,60,.4); background:rgba(255,180,60,.1); color:#ffd08a; } .badge-crew{ border-color:rgba(180,140,255,.4); background:rgba(180,140,255,.1); color:#c9b2ff; } .card-meta{ display:flex; flex-wrap:wrap; gap:22px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); } .card-meta dt{ font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-faint); } .card-meta dd{ margin-top:4px; font-size:14px; font-weight:600; color:var(--text); } /* --- Fleet -------------------------------------------------- */ .fleet-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .fleet-tabs button{ padding:10px 20px; border:1px solid var(--line); border-radius:999px; background:var(--glass); font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:1.2px; color:var(--text-dim); cursor:pointer; transition:all .3s var(--ease-out); } .fleet-tabs button:hover{ border-color:var(--line-strong); color:var(--text); } .fleet-tabs button.is-active{ border-color:transparent; background:linear-gradient(135deg,var(--cyan),#4ea8ff); color:#04121f; box-shadow:0 6px 22px rgba(78,168,255,.3); } .fleet-panels{ position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); overflow:hidden; } .fleet-panel{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,48px); padding:clamp(26px,4vw,44px); } .fleet-panel[hidden]{ display:none; } .fleet-panel.is-active{ animation:panel-in .5s var(--ease-out); } @keyframes panel-in{ from{ opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .fleet-copy h3{ font-family:var(--font-display); font-size:clamp(22px,3.4vw,32px); font-weight:700; letter-spacing:1.6px; } .fleet-copy p{ margin:14px 0 24px; color:var(--text-dim); } .spec-list{ list-style:none; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; } .spec-list li{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:rgba(4,10,20,.8); } .spec-list span{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-faint); } .spec-list b{ font-family:var(--font-display); font-size:15px; color:var(--cyan-bright); } .fleet-gauges{ display:flex; flex-direction:column; gap:20px; justify-content:center; } .gauge{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; } .gauge span{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-faint); } .gauge b{ font-family:var(--font-display); font-size:13px; color:var(--cyan-bright); } /* The bar track spans both columns under the label row. */ .gauge i{ grid-column:1 / -1; position:relative; height:5px; border-radius:3px; background:rgba(123,212,255,.12); overflow:hidden; } .gauge i::after{ content:""; position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg,var(--cyan),#4ea8ff); box-shadow:0 0 14px rgba(123,212,255,.6); /* Width is driven by --fill, which JS sets when the panel becomes visible so the bars animate on reveal. */ transform:scaleX(var(--fill,0)); transform-origin:left; transition:transform 1.1s var(--ease-out); } /* --- Telemetry ---------------------------------------------- */ .telemetry-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(12px,2vw,18px); margin-bottom:22px; } .readout{ padding:20px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .readout-label{ display:block; font-size:10px; letter-spacing:2.2px; text-transform:uppercase; color:var(--text-faint); } .readout-value{ display:inline-block; margin-top:8px; font-family:var(--font-display); font-size:clamp(24px,3.4vw,34px); font-weight:700; font-variant-numeric:tabular-nums; color:var(--cyan-bright); } .readout-unit{ margin-left:5px; font-size:12px; color:var(--text-faint); } .trace{ padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(4,10,20,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } #trace-canvas{ width:100%; height:180px; } /* --- Timeline ----------------------------------------------- */ .timeline{ position:relative; list-style:none; padding-left:34px; } .timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); } .timeline li{ position:relative; padding-bottom:clamp(28px,4vw,42px); } .timeline li:last-child{ padding-bottom:0; } .timeline li::before{ content:""; position:absolute; left:-31px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(123,212,255,.14),0 0 16px rgba(123,212,255,.8); } .timeline-year{ display:block; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:2.6px; color:var(--cyan); } .timeline h3{ margin:6px 0 8px; font-size:clamp(17px,2.3vw,22px); font-weight:600; } .timeline p{ max-width:56ch; font-size:14.5px; color:var(--text-dim); } /* ========================================================== 9. CONTACT & FOOTER ========================================================== */ .cta-panel{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); padding:clamp(28px,5vw,60px); border:1px solid var(--line); border-radius:clamp(18px,3vw,26px); background: radial-gradient(700px circle at 12% 0%,rgba(123,212,255,.12),transparent 60%), var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .cta-copy h2{ font-family:var(--font-display); font-size:clamp(26px,4.4vw,42px); font-weight:700; line-height:1.12; } .cta-form{ display:flex; flex-direction:column; gap:16px; } .field{ display:flex; flex-direction:column; gap:7px; } .field label{ font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-faint); } .field input, .field textarea{ padding:12px 15px; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(2,7,14,.6); font-size:15px; resize:vertical; transition:border-color .25s ease,box-shadow .25s ease; } .field input:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(123,212,255,.14); } .field input:user-invalid, .field textarea:user-invalid{ border-color:rgba(255,110,110,.6); } .cta-form .btn{ align-self:flex-start; } .form-note{ font-size:12.5px; color:var(--text-faint); } .form-note.is-error{ color:#ff9a9a; } .site-footer{ position:relative; z-index:var(--z-content); padding-block:clamp(36px,5vw,56px); padding-bottom:max(clamp(36px,5vw,56px),env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(2,5,11,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; } .footer-brand{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:2.4px; } .footer-brand span{ color:var(--cyan); } .footer-note, .footer-legal{ font-size:12.5px; color:var(--text-faint); } /* ========================================================== 10. REVEAL ANIMATION SYSTEM ========================================================== */ /* Applied by JS only when IntersectionObserver is available, so without it every element simply stays visible. */ .js-reveal .reveal{ opacity:0; transform:translateY(30px); filter:blur(4px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms); } .js-reveal .reveal.is-visible{ opacity:1; transform:none; filter:blur(0); } /* ========================================================== 11. RESPONSIVE ========================================================== */ /* --- Tablet ------------------------------------------------- */ @media (max-width:900px){ .fleet-panel{ grid-template-columns:1fr; } .cta-panel{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); gap:28px 16px; } } /* --- Mobile nav --------------------------------------------- */ @media (max-width:820px){ .nav-toggle{ display:flex; } .site-nav{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); z-index:-1; flex-direction:column; align-items:stretch; justify-content:center; gap:6px; padding:88px 28px 40px; border-left:1px solid var(--line); background:var(--glass-solid); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transform:translateX(100%); visibility:hidden; transition:transform .45s var(--ease-out),visibility .45s; } .site-nav.is-open{ transform:translateX(0); visibility:visible; } .site-nav > a:not(.btn){ padding:14px 0; border-bottom:1px solid var(--line); font-size:17px; color:var(--text); } .site-nav > a:not(.btn)::after{ display:none; } .nav-cta{ margin-top:22px; justify-content:center; } /* Locks the page behind the open drawer. */ body.nav-open{ overflow:hidden; } } /* --- Phone -------------------------------------------------- */ @media (max-width:600px){ /* Blur is the most expensive thing on this page; halving the radii keeps mobile GPUs comfortably above 60fps. */ .nebula, .earth-glow{ filter:blur(45px); } .light-center{ filter:blur(60px); } .rocket{ --rocket-scale:.62; } .rocket-left { left:2%; } .rocket-right{ right:2%; } .mission-clock{ top:auto; bottom:calc(24px + env(safe-area-inset-bottom)); left:var(--gutter); right:var(--gutter); flex-direction:row; align-items:baseline; justify-content:space-between; padding:9px 14px; } .scroll-cue{ display:none; } .hero{ padding-bottom:120px; } .card-meta{ gap:16px; } .timeline{ padding-left:26px; } .timeline li::before{ left:-23px; } } @media (max-width:420px){ .stats{ grid-template-columns:1fr; gap:22px; } .btn{ width:100%; } .hero-actions{ flex-direction:column; } } /* --- Short landscape phones --------------------------------- */ @media (max-height:520px) and (orientation:landscape){ .hero{ padding-block:100px 80px; } .mission-clock, .scroll-cue{ display:none; } .earth-container{ --earth-visible:14vh; } } /* --- Large screens ------------------------------------------ */ @media (min-width:1600px){ :root{ --wrap:1320px; } .earth-container{ --earth-size:170vw; } } /* Coarse pointers get no hover-lift — it only ever fires as a sticky state after a tap. */ @media (hover:none){ .btn:hover, .card:hover{ transform:none; } } /* ========================================================== 12. REDUCED MOTION / PRINT ========================================================== */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } /* Everything that animates in must be given its end state explicitly, or it stays stuck at opacity:0. */ .hero-eyebrow, .hero-title span, .hero-tagline, .hero-actions, .mission-clock, .scroll-cue, .js-reveal .reveal{ opacity:1; transform:none; filter:none; } .rocket, .scroll-cue-dot{ display:none; } } @media print{ .backdrop, .hero-stage, .fx-layer, .site-header, .scroll-cue{ display:none !important; } body{ background:#fff; color:#000; } }