/* ===================================================================== BHAZAR — WebGL-FIRST FLIGHT · app.css Dark cosmic stage, one fixed canvas, DOM overlays per camera scene. Overlays are always legible (scrim + text-shadow); content is never black-on-arrival. Static .fallback shown only when WebGL/motion absent. ===================================================================== */ :root{ --bg:#05080E; --ink:#F2F6FF; --muted:#c4d2e6; --gold:#D4AF37; --gold-lt:#F4DD86; --tech:#00f0ff; --craft:#f59e0b; --merch:#10b981; --omni:#8b5cf6; --frith:#6366f1; --vict:#e8b04b; --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html,body{margin:0;padding:0} html{background:var(--bg);scroll-behavior:auto} body{ background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} /* ---- The persistent flight canvas (fixed behind everything) -------- */ .flight-canvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; pointer-events:none; opacity:0; transition:opacity .8s var(--ease); } .flight-canvas.is-ready{opacity:1} /* When WebGL is unavailable we never reveal the canvas; the fallback owns the screen. .no-webgl is removed by app.js once init succeeds. */ html.no-webgl .flight-canvas{display:none} /* ---- Flight track: a tall scroll container; scenes are pinned ------ */ .flight{position:relative; z-index:1} .scene{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; /* generous top padding clears the fixed .flight-chrome at every breakpoint; bottom padding keeps the last lines off the viewport edge. */ padding:clamp(6.5rem,13vh,9rem) clamp(1.25rem,5vw,4rem) clamp(3rem,7vh,5rem); } /* extra scroll length so each pinned scene has room to scrub through */ .scene--hero{min-height:100vh} .scene--founding,.scene--guilds,.scene--services{min-height:100vh} .scene--footer{min-height:100vh} /* Content-dense scenes top-align so tall card grids never clip under the fixed chrome (they're pinned, so they can't scroll internally). */ .scene--hero,.scene--founding,.scene--services,.scene--trust{align-items:flex-start} /* ---- Overlay copy (always readable) -------------------------------- */ .copy{ position:relative; z-index:2; width:100%; max-width:var(--maxw); /* a soft, feathered dark scrim keeps text crisply legible over the glowing, moving 3D scene. Transform/opacity only — NO blur (60fps). */ } /* ---- Flight-positioned overlays (camera-station driven) ------------ */ /* When the WebGL flight is live (app.js adds .copy--flight to every overlay), the copy is lifted OUT of in-flow scrolling and FIXED in the viewport centre. Its opacity is then cross-faded purely by how close the camera (flightT) is to that station — so whenever the camera is centred on a station, THAT station's copy is on-screen and readable. Exactly one scene's copy is prominent at a time (clean cross-fade, no graphics-only dead zones). Transform/opacity only — 60fps, no blur on these scroll-animated elements. */ /* body-level, NON-transformed layer holding all flight copy (see app.js) — its own positioning is irrelevant; what matters is it has NO transform so its position:fixed children are anchored to the VIEWPORT, not a pinned section. */ .flight-overlay-layer{ position:fixed; inset:0; z-index:2; pointer-events:none; } .copy--flight{ position:fixed; left:50%; top:50%; /* base centring; app.js adds a small parallax translate on top via a CSS var */ transform:translate3d(calc(-50% + var(--ov-tx,0px)),calc(-50% + var(--ov-ty,0px)),0) scale(var(--ov-sc,1)); width:min(100%,var(--maxw)); /* respect the same comfortable insets the in-flow .scene used so tall card grids (founding/services/trust) clear the fixed top chrome. */ max-height:calc(100vh - clamp(6.5rem,13vh,9rem) - clamp(3rem,7vh,5rem)); overflow:visible; padding-inline:clamp(1.25rem,5vw,4rem); /* opacity is owned by app.js (station proximity). Default hidden so nothing flashes before the first tick assigns a value. */ opacity:0; /* only the prominent overlay receives input; app.js toggles this class. */ pointer-events:none; z-index:2; } /* the single station the camera is currently centred on becomes interactive (claim buttons + guild legend popups + door cards all clickable). */ .copy--flight.is-active{pointer-events:auto} /* content-dense overlays top-align inside the fixed box so their card grids never clip vertically (mirrors the in-flow .scene--* align-items rule). */ .copy--flight.copy--top{ top:clamp(6.5rem,13vh,9rem); transform:translate3d(calc(-50% + var(--ov-tx,0px)),var(--ov-ty,0px),0) scale(var(--ov-sc,1)); } .copy::before{ content:""; position:absolute; inset:-10% -14%; background: radial-gradient(115% 95% at 50% 48%, rgba(4,6,12,.92) 0%, rgba(4,6,12,.82) 38%, rgba(4,6,12,.5) 66%, rgba(4,6,12,0) 90%), linear-gradient(180deg, rgba(4,6,12,.55) 0%, rgba(4,6,12,.35) 50%, rgba(4,6,12,.55) 100%); z-index:-1; pointer-events:none; border-radius:32px; opacity:var(--scrim,1); transition:opacity .3s linear; } .copy--center{text-align:center; margin-inline:auto} .copy--left{max-width:760px; margin-right:auto; text-align:left} .copy--wide{max-width:1080px} /* =================================================================== APPROACH A — CINEMATIC TEASER (skills showcase) ------------------------------------------------------------------- The 3D flight is a WOW reel that proves what we can build. So each beat shows ONLY its headline + one line (+ the key interaction: guild chips, claim CTA). The DETAIL (benefit bodies, door bodies, trust pillar lists) lives on the flying 3D panels — which already carry those names — and on the classic site, one toggle away. This stops the dense centred text slabs from fighting the 3D, so the 3D becomes the star. Flight-mode only — the classic site keeps it all. =================================================================== */ .copy--flight .benefits, .copy--flight .doors, .copy--flight .pillars, .copy--flight .founding-intro, .copy--flight .hero-badges:not(.hero-badges--center){ display:none !important; } /* trim the remaining lede to a short, single teaser line */ .copy--flight .lede, .copy--flight .lede--tight{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:54ch; margin-inline:auto; color:rgba(233,240,255,.86); } .copy--flight.copy--left .lede{ margin-inline:0; } /* vertical breathing room around the CTA stack (badges → button → fineprint → legal) so the big gold "Claim a Founding Seat" button never crowds the copy above or the fineprint/legal below — the footer stack was touching at 0 gap. */ .copy--flight .hero-badges{ margin-top:1.6rem; } .copy--flight .cta-row{ margin-top:1.8rem; margin-bottom:.4rem; } .copy--flight .fineprint{ margin-top:1.6rem; } .copy--flight .flight-footer{ margin-top:1.8rem; padding-top:1.4rem; } /* the headline carries each beat now — make it the hero of the frame */ .copy--flight .title{ font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.02em; } .copy--flight .display{ font-size:clamp(2.8rem,7.6vw,6rem); } /* the FOOTER headline stays smaller (it shares the frame with the seal-pool, the CTA, badges + legal links) — the big .display bump was crowding it and colliding with the 3D seal behind it. */ .copy--flight .display--sm{ font-size:clamp(2rem,4.4vw,3.5rem) !important; } .copy--flight .overline{ font-size:.82rem; letter-spacing:.36em; } /* LIGHTER, TIGHTER legibility pool so the gold gate, the flying panels and the particles READ THROUGH (they ARE the content now) instead of being hidden behind a dark slab. */ .copy--flight::before{ inset:-5% -7% !important; background: radial-gradient(78% 68% at 50% 46%, rgba(4,6,12,.72) 0%, rgba(4,6,12,.5) 44%, rgba(4,6,12,.18) 72%, rgba(4,6,12,0) 90%) !important; border-radius:44px; } .overline{ margin:0 0 1rem; font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-lt); font-weight:600; } .display{ margin:0 0 1.25rem; font-weight:800; line-height:1.02; font-size:clamp(2.4rem,7vw,5.2rem); letter-spacing:-.02em; background:linear-gradient(180deg,#fff 0%,#dfe7f5 55%,#b9c6de 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 40px rgba(8,14,28,.6); } .display--sm{font-size:clamp(2rem,5vw,3.6rem)} .title{ margin:0 0 1rem; font-weight:800; line-height:1.05; font-size:clamp(1.9rem,4.6vw,3.4rem); letter-spacing:-.015em; color:#fff; text-shadow:0 2px 30px rgba(8,14,28,.7); } .lede{ margin:0 auto 1.8rem; max-width:46ch; color:#dbe5f4; font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.6; text-shadow:0 1px 18px rgba(5,8,14,.9); } .lede--tight{margin-bottom:2.2rem} .gate-scale{ margin:.8rem auto 0; max-width:46ch; color:var(--gold-lt); font-size:.84rem; letter-spacing:.04em; opacity:1; text-shadow:0 1px 3px rgba(2,5,11,.95), 0 2px 16px rgba(5,8,14,.85); } /* In the cinematic flight the scale caption needs room: sit clearly below the lede and well clear of the CTA buttons. */ .copy--flight .gate-scale{ margin-top:1.2rem; margin-bottom:2.4rem; } /* The Classic↔Immersive toggle now lives INSIDE the flight-chrome header (not floating bottom-left). Override the shared .d3-toggle fixed positioning + the ≤1023px hide so it renders inline in the top bar at all gate widths. */ .flight-chrome .d3-toggle{ position:static; left:auto; bottom:auto; z-index:auto; display:inline-flex; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; } .cue{ margin:2.4rem 0 0; color:var(--gold-lt); font-size:.92rem; letter-spacing:.08em; opacity:.9; } /* ---- Buttons ------------------------------------------------------- */ .cta-row{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center} .copy--left .cta-row{justify-content:flex-start} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.7rem; border-radius:999px; font-weight:700; font-size:1rem; letter-spacing:.01em; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); will-change:transform; } .btn--gold{ color:#1a1407; background:linear-gradient(180deg,var(--gold-lt),var(--gold)); box-shadow:0 10px 32px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.4); } .btn--gold:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(212,175,55,.45)} .btn--ghost{ color:var(--ink); border:1px solid rgba(212,175,55,.5); background:rgba(255,255,255,.03); } .btn--ghost:hover{transform:translateY(-2px); border-color:var(--gold-lt); background:rgba(212,175,55,.08)} /* ---- Founding benefits -------------------------------------------- */ /* Founding: a clean two-column grid of benefit cards (left-aligned copy). */ .benefits{ list-style:none; margin:0; padding:0; max-width:none; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .benefits li{ display:flex; gap:1rem; align-items:flex-start; padding:1.15rem 1.3rem; border-radius:16px; background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(6,9,16,.78)); border:1px solid rgba(212,175,55,.3); box-shadow:0 14px 38px rgba(0,0,0,.4); /* NO backdrop-filter: this card scrolls/scrubs with the flight (60fps). */ } .benefits__no{ color:var(--gold-lt); font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; flex:0 0 auto; line-height:1.4; } .benefits strong{color:#fff} .benefits span:last-child{color:#dbe5f4; line-height:1.55; font-size:.96rem} /* ---- Guild legend: a clean grid of six guild cards ----------------- */ .guild-legend{ list-style:none; margin:1rem auto 0; padding:0; max-width:880px; display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .guild-legend__item{ display:flex; align-items:center; gap:.75rem; text-align:left; padding:.95rem 1.1rem; border-radius:16px; background:linear-gradient(180deg, color-mix(in srgb, var(--g) 12%, rgba(6,9,16,.82)), rgba(6,9,16,.82)); border:1px solid color-mix(in srgb, var(--g) 48%, transparent); box-shadow:0 12px 34px rgba(0,0,0,.4); font-size:.95rem; } .guild-legend__item .dot{ width:.85rem; height:.85rem; border-radius:50%; background:var(--g); box-shadow:0 0 16px var(--g); flex:0 0 auto; } .guild-legend__item .nm{font-weight:700; color:#fff; flex:0 0 auto; min-width:5.5rem} .guild-legend__item .st{color:#cdd9ec; font-size:.82rem; line-height:1.35} /* legend items are interactive triggers for the shared guild product overlay */ .guild-legend__item.guild-card-btn{cursor:pointer; transition:border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s var(--ease)} .guild-legend__item.guild-card-btn:hover, .guild-legend__item.guild-card-btn:focus-visible{ border-color:var(--g); background:linear-gradient(180deg, color-mix(in srgb, var(--g) 22%, rgba(6,9,16,.85)), rgba(6,9,16,.85)); transform:translateY(-2px); outline:none; box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--g) 30%, transparent); } /* ---- Service doors ------------------------------------------------- */ .doors{ display:grid; gap:1.1rem; margin-top:.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .door{ padding:1.4rem 1.3rem; border-radius:18px; text-align:left; background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(6,9,16,.8)); border:1px solid color-mix(in srgb, var(--accent,var(--gold)) 42%, transparent); box-shadow:0 18px 50px rgba(0,0,0,.42); /* NO backdrop-filter: door cards scrub with the flight (60fps). */ } .door h3{margin:0 0 .5rem; color:var(--gold-lt); font-size:1.2rem} .door p{margin:0; color:#dbe5f4; line-height:1.55; font-size:.96rem} /* doors are now real links into each service — keep card look, no underline */ a.door{display:block; text-decoration:none; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)} a.door:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent,var(--gold)) 70%, transparent); box-shadow:0 26px 64px rgba(0,0,0,.55)} /* ---- Trust pillars (Trust · Belonging · Ownership) ---------------- */ .pillars{ display:grid; gap:1.1rem; margin:.5rem 0 0; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); text-align:left; } .pillar{ padding:1.4rem 1.4rem; border-radius:18px; background:linear-gradient(180deg, rgba(212,175,55,.1), rgba(6,9,16,.8)); border:1px solid color-mix(in srgb, var(--accent,var(--gold)) 45%, transparent); box-shadow:0 18px 50px rgba(0,0,0,.42); } .pillar h3{ margin:0 0 .7rem; display:flex; align-items:center; gap:.6rem; font-size:1.15rem; color:color-mix(in srgb, var(--accent,var(--gold-lt)) 65%, #fff); } .pillar__num{ display:inline-flex; align-items:center; justify-content:center; min-width:1.9rem; height:1.9rem; padding:0 .35rem; border-radius:999px; font-size:.85rem; font-weight:800; color:#05080e; flex:0 0 auto; background:linear-gradient(180deg, color-mix(in srgb, var(--accent,var(--gold-lt)) 80%, #fff), var(--accent,var(--gold))); } .pillar > p{margin:0 0 .9rem; color:#dbe5f4; line-height:1.55; font-size:.96rem} .pillar ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem} .pillar li{ position:relative; padding-left:1.2rem; color:var(--ink); font-size:.9rem; line-height:1.45; } .pillar li::before{ content:""; position:absolute; left:0; top:.5em; width:.42rem; height:.42rem; border-radius:50%; background:var(--accent,var(--gold-lt)); box-shadow:0 0 8px var(--accent,var(--gold-lt)); } /* ---- Trust CTA band ----------------------------------------------- */ .trust-band{margin-top:clamp(1.6rem,4vh,2.6rem); text-align:center} .trust-band__line{ margin:0 auto 1.2rem; max-width:60ch; color:var(--muted); line-height:1.6; font-size:clamp(1rem,1.4vw,1.12rem); } .trust-band__line b{color:#EBDCB0} /* ---- Real footer region (legal links + copyright) ----------------- */ .flight-footer{ margin-top:clamp(1.8rem,5vh,3rem); padding-top:1.4rem; border-top:1px solid rgba(212,175,55,.18); display:flex; flex-direction:column; align-items:center; gap:.6rem; } .flight-footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:center; } .flight-footer__legal a{ color:var(--gold-lt); font-size:.88rem; letter-spacing:.02em; border-bottom:1px solid rgba(212,175,55,.35); transition:color .2s, border-color .2s; } .flight-footer__legal a:hover{color:#fff; border-color:var(--gold-lt)} .flight-footer__copy{margin:0; color:var(--muted); font-size:.84rem; letter-spacing:.03em} .flight-footer__copy i{font-style:normal; color:var(--gold-lt)} .flight-footer__hq{margin:0; color:var(--muted); font-size:.78rem; letter-spacing:.04em; opacity:.85} /* ---- Footer seal --------------------------------------------------- */ .seal{margin:0 auto 1.5rem; width:120px; height:auto; filter:drop-shadow(0 0 30px rgba(212,175,55,.5))} .fineprint{margin:1.4rem 0 0; color:var(--muted); font-size:.85rem; letter-spacing:.04em} /* ---- HUD scroll progress ------------------------------------------ */ .hud{ position:fixed; right:clamp(.9rem,2.5vw,2rem); top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:.6rem; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; } .hud.is-ready{opacity:1} html.no-webgl .hud{display:none} .hud__rail{ width:3px; height:38vh; max-height:340px; border-radius:3px; background:rgba(212,175,55,.16); overflow:hidden; position:relative; } .hud__fill{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scaleY(0); transform-origin:top; background:linear-gradient(180deg,var(--gold-lt),var(--gold)); box-shadow:0 0 14px rgba(212,175,55,.6); } .hud__pct{ font-size:.74rem; letter-spacing:.12em; color:var(--gold-lt); font-variant-numeric:tabular-nums; } /* ---- Back / classic link ------------------------------------------ */ .back-link{ position:fixed; left:clamp(.9rem,2.5vw,1.5rem); top:clamp(.9rem,2.5vw,1.5rem); z-index:6; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:.45rem .8rem; border-radius:999px; border:1px solid rgba(159,176,200,.25); background:rgba(5,8,14,.5); backdrop-filter:blur(6px); transition:color .25s, border-color .25s; } .back-link:hover{color:var(--gold-lt); border-color:rgba(212,175,55,.5)} .back-link{ position:fixed; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); border:0; padding:0; } .back-link:focus{ left:clamp(.9rem,2.5vw,1.5rem); top:clamp(.9rem,2.5vw,1.5rem); width:auto; height:auto; clip:auto; overflow:visible; padding:.45rem .8rem; border:1px solid rgba(212,175,55,.5); } /* ---- Static fallback ---------------------------------------------- */ .fallback{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background: radial-gradient(60% 50% at 50% 35%, rgba(212,175,55,.10), transparent 70%), var(--bg); padding:2rem; text-align:center; } .fallback[hidden]{display:none} .fallback__inner{max-width:540px} .fallback__inner img{margin:0 auto 1.5rem; width:140px; filter:drop-shadow(0 0 24px rgba(212,175,55,.45))} .fallback__inner h1{font-size:clamp(1.8rem,5vw,2.8rem); margin:0 0 .8rem; color:#fff} .fallback__inner p{color:var(--muted); margin:.4rem 0} .fallback__note{font-size:.9rem; margin:1.2rem 0 1.8rem !important} /* ---- Reduced motion: kill the flight, show readable static copy ---- */ @media (prefers-reduced-motion:reduce){ .flight-canvas{display:none !important} .hud{display:none !important} /* overlays revert to plain static stacked content, fully visible */ .scene{min-height:auto; padding:14vh clamp(1.25rem,5vw,4rem)} .copy{opacity:1 !important; transform:none !important} } /* ---- Brand accent on gradient/solid headings ---------------------- */ .em{ background:linear-gradient(180deg,var(--gold-lt),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; } .title .em{color:var(--gold-lt)} /* solid-fill titles keep a readable gold */ /* ---- Fixed flight chrome (brand · seats · EN/RO · claim) ---------- */ .flight-chrome{ position:fixed; top:0; left:0; right:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem clamp(.9rem,3vw,1.6rem); pointer-events:none; /* subtle top scrim so the brand / chip / lang / claim stay legible over the bright hero gate without overlapping scene copy (transform/opacity-safe, no blur). */ background:linear-gradient(180deg, rgba(4,6,12,.82) 0%, rgba(4,6,12,.5) 60%, rgba(4,6,12,0) 100%); } .flight-chrome > *{pointer-events:auto} .flight-chrome__brand{display:flex; align-items:center; gap:.55rem} .flight-chrome__brand img{width:30px; height:auto; filter:drop-shadow(0 0 12px rgba(212,175,55,.45))} .flight-chrome__brand .word{ font-family:"Sora",sans-serif; font-weight:700; letter-spacing:.18em; font-size:.95rem; color:#fff; } .flight-chrome__right{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; justify-content:flex-end} .flight-chrome .chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; letter-spacing:.04em; color:var(--muted); padding:.4rem .7rem; border-radius:999px; border:1px solid rgba(212,175,55,.25); background:rgba(5,8,14,.5); backdrop-filter:blur(6px); white-space:nowrap; } .flight-chrome .chip b{color:var(--gold-lt); font-variant-numeric:tabular-nums} .flight-chrome .chip .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--gold-lt); box-shadow:0 0 8px var(--gold-lt); } .flight-chrome .lang-toggle{ display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; letter-spacing:.08em; color:var(--muted); } .flight-chrome .lang-btn{ background:none; border:0; cursor:pointer; color:var(--muted); font:inherit; padding:.1rem .25rem; } .flight-chrome .lang-btn[aria-pressed="true"]{color:var(--gold-lt); font-weight:700} .flight-chrome .lang-sep{opacity:.4} .btn--sm{padding:.6rem 1.05rem; font-size:.86rem} .btn svg{width:1.05em; height:1.05em; margin-right:.45rem} /* ---- Hero / invitation badge row ---------------------------------- */ .founding-intro{margin:0 0 1.4rem; color:var(--muted); max-width:54ch; line-height:1.6} .copy--left .lede{margin-left:0; margin-right:auto; text-align:left} .hero-badges{ display:flex; flex-wrap:wrap; gap:.55rem; margin:.4rem 0 0; justify-content:center; } .hero-badges--center{justify-content:center} .copy--left .hero-badges{justify-content:flex-start} .hbadge{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem; border-radius:999px; font-size:.82rem; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid rgba(159,176,200,.22); } .hbadge .tick{ width:.85rem; height:.85rem; border-radius:50%; flex:0 0 auto; background:rgba(159,176,200,.3); position:relative; } .hbadge .tick::after{ content:""; position:absolute; left:.28rem; top:.16rem; width:.2rem; height:.4rem; border:solid #05080e; border-width:0 2px 2px 0; transform:rotate(45deg); } .hbadge--gold{ color:#1a1407; border-color:transparent; background:linear-gradient(180deg,var(--gold-lt),var(--gold)); } .hbadge--gold .tick{background:rgba(26,20,7,.35)} .hbadge--gold .tick::after{border-color:var(--gold-lt)} /* ---- Service doors: gold accent + per-door tint ------------------- */ .door h3{color:color-mix(in srgb, var(--accent,var(--gold-lt)) 70%, #fff)} .door--gold{border-color:rgba(212,175,55,.4); background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(5,8,14,.25))} .fineprint a{color:var(--gold-lt); border-bottom:1px solid rgba(212,175,55,.4)} /* ---- Mobile (<=900px) never gets the 3D flight (the inline redirect in sends it to the classic site). Belt-and-braces: hide the 3D-only mode toggle + classic back-link so nothing flashes before the redirect. -- */ @media (max-width:900px){ .back-link{display:none !important} } /* ---- Small screens: keep copy comfortably legible ----------------- */ @media (max-width:720px){ .copy--left{text-align:center; margin-inline:auto} .copy--left .cta-row{justify-content:center} .copy--left .hero-badges{justify-content:center} .copy--left .lede{text-align:center; margin-inline:auto} .benefits{margin-inline:auto} .hud{display:none} .flight-chrome{flex-direction:column; align-items:flex-start; gap:.5rem} .flight-chrome__brand .word{display:none} .pillars{text-align:center} .pillar{text-align:left} } @media (prefers-reduced-motion:reduce){ .flight-chrome{position:static} }