/* ========================================================================= Stellary — welcome.stellary.cloud Palette, type and motion mirror the app (src/constants/cosmos.ts). Shared by index.html, privacy.html, terms.html, invite/, confirmed/. ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ---- Cosmos palette — 1:1 with src/constants/cosmos.ts ---- */ --bg-top: #0B0F17; --bg-bottom: #000916; --bg: #060A12; --surface: #171C28; --border: #262C3A; --gold: #D8B26A; --gold-hi: #E7C77E; --gold-lo: #B8924A; --cream: #F3ECDA; --muted: #A9A491; --faint: #838876; --star-blue: #BFD3F2; --haze: #9A90C4; --hairline: rgba(243, 236, 218, .08); --hairline-strong: rgba(243, 236, 218, .16); --gold-line: rgba(216, 178, 106, .35); --gold-tint: rgba(216, 178, 106, .12); /* ---- Surfaces (FrostedCard, from the app) ---- */ --frost: rgba(23, 28, 40, .5); --frost-light: rgba(243, 236, 218, .035); /* ---- Buttons: cream pill, navy label (app's glassPrimary) ---- */ --btn-bg: #FDFBF3; --btn-fg: #0B1424; --btn-radius: 999px; --radius: 18px; --radius-sm: 12px; /* ---- Type: one webfont (display serif) + the system sans, exactly like the app's Charter-display / SF-Pro-chrome split ---- */ --serif: "Cormorant Garamond", "Charter", "Iowan Old Style", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 8px 28px -10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 34px 70px -28px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .35); --nav-h: 78px; } html { scroll-behavior: smooth; background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; } /* No background on — the sky layers below it (body::before, .stars) sit at negative z-index, and a body background would paint straight over them. The base colour lives on , which paints beneath the whole stack. */ body { font-family: var(--sans); color: var(--cream); line-height: 1.6; /* `clip`, not `hidden` — `overflow-x: hidden` forces overflow-y to `auto`, which turns into a scroll container and breaks the sticky ignition stage. `clip` guards the same overflow without that side effect. */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The page sits on a single vertical wash — bgTop at the fold, bgBottom deep down. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 70% at 50% 0%, rgba(11, 15, 23, 0) 0%, rgba(0, 9, 22, .55) 60%, var(--bg-bottom) 100%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%); } img, video, canvas, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } [id] { scroll-margin-top: calc(var(--nav-h) + 20px); } ::selection { background: rgba(216, 178, 106, .3); color: #fff; } .serif { font-family: var(--serif); } .gold { color: var(--gold); } /* ------------------------------------------------------------------------- Static CSS starfield — the page-wide backdrop and the legal-page sky. ------------------------------------------------------------------------- */ /* Deliberately static. Being fixed, it already parallaxes against the scrolling page for free; animating it would mean a viewport-sized composited layer repainting for a drift nobody would notice under the canvas sky. */ .stars { position: fixed; inset: -60px; z-index: -1; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1px 1px at 60% 70%, rgba(191, 211, 242, .6), transparent 60%), radial-gradient(1.4px 1.4px at 80% 20%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 35% 85%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 90% 60%, rgba(191, 211, 242, .55), transparent 60%), radial-gradient(1.4px 1.4px at 10% 65%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 50% 10%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 75% 90%, rgba(255, 255, 255, .42), transparent 60%); background-repeat: repeat; background-size: 620px 620px; opacity: .55; } /* ------------------------------------------------------------------------- Layout primitives ------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); position: relative; z-index: 1; } .wrap-narrow { max-width: 880px; } section { position: relative; z-index: 1; } .section { padding: clamp(88px, 13vw, 168px) 0; } .eyebrow { display: inline-block; font-family: var(--sans); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 600; } .eyebrow::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--gold-line); vertical-align: middle; margin-right: 12px; transform: translateY(-1px); } /* The rule is a left-hand tick, so it only belongs on left-aligned eyebrows. */ .center .eyebrow::before, .hero .eyebrow::before, .cta .eyebrow::before, .band-content .eyebrow::before { display: none; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--cream); } h2 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); line-height: 1.1; letter-spacing: -.01em; } h2 em, h1 em { font-style: italic; color: var(--gold); } .lede { font-family: var(--sans); color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.11rem); max-width: 50ch; line-height: 1.68; } .section-head { max-width: 660px; margin-bottom: clamp(48px, 7vw, 84px); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head .lede { margin-top: 22px; } .section-head.center .lede { margin-inline: auto; } /* ------------------------------------------------------------------------- Reveal on scroll ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--rd, 0s); } .reveal.in-view { opacity: 1; transform: none; filter: none; } .reveal.d1 { --rd: .09s; } .reveal.d2 { --rd: .18s; } .reveal.d3 { --rd: .27s; } .reveal.d4 { --rd: .36s; } .reveal.d5 { --rd: .45s; } /* Headline words rise out of a mask — no JS, runs at first paint. The padding/negative-margin pair gives ascenders and italic descenders room inside the clip box without shifting the line: at this size a tight line-height would otherwise shear the tops off 'l' and the tails off 'y'. */ .rise { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em .06em .22em; margin: -.1em -.06em -.22em; } .rise > span { display: inline-block; transform: translateY(105%); animation: rise-in .95s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .085s + .15s); } @keyframes rise-in { to { transform: translateY(0); } } .fade-up { opacity: 0; transform: translateY(16px); animation: fade-up .9s var(--ease) forwards; animation-delay: var(--rd, 0s); } @keyframes fade-up { to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------------- Nav — dark glass bar with a gold scroll-progress hairline ------------------------------------------------------------------------- */ header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 16px 0; background: rgba(6, 10, 18, .5); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--hairline); transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease); } header.nav.scrolled { background: rgba(6, 10, 18, .84); box-shadow: 0 1px 24px rgba(0, 0, 0, .5); padding: 10px 0; } .nav-progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); opacity: .9; will-change: transform; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.42rem; letter-spacing: .02em; color: var(--cream); flex: 0 0 auto; } .brand-mark { width: 42px; height: 42px; object-fit: contain; transition: transform .5s var(--ease), filter .5s var(--ease); } .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(216, 178, 106, .45)); } .nav-links { display: flex; gap: clamp(18px, 2.6vw, 34px); font-family: var(--sans); font-size: .87rem; color: var(--muted); } .nav-links a { position: relative; padding: 4px 0; transition: color .3s; } .nav-links a:hover { color: var(--cream); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--gold); transition: width .38s var(--ease); } .nav-links a:hover::after { width: 100%; } .nav-cta { font-family: var(--sans); background: var(--btn-bg); color: var(--btn-fg); padding: 10px 21px; border-radius: var(--btn-radius); font-size: .84rem; font-weight: 600; white-space: nowrap; flex: 0 0 auto; transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); box-shadow: var(--shadow-sm); } .nav-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--shadow-md); } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: var(--btn-radius); font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1; transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 0 rgba(216, 178, 106, 0); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .7), 0 0 26px -6px rgba(216, 178, 106, .35); } .btn-primary:active { transform: translateY(0) scale(.985); } .btn-ghost { border: 1px solid var(--hairline-strong); color: var(--cream); background: rgba(243, 236, 218, .04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--gold-line); background: rgba(243, 236, 218, .08); transform: translateY(-2px); } .btn-ghost:active { transform: translateY(0) scale(.985); } /* ------------------------------------------------------------------------- Hero — the live canvas sky ------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--nav-h) + 40px) 0 120px; } #sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.6s var(--ease-soft); } #sky-canvas.lit { opacity: 1; } .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(75% 55% at 50% 46%, rgba(6, 10, 18, .74) 0%, rgba(6, 10, 18, .34) 55%, transparent 100%), linear-gradient(180deg, rgba(6, 10, 18, .55) 0%, transparent 22%, transparent 62%, var(--bg) 100%); } .hero-content { position: relative; z-index: 2; text-align: center; } .hero h1 { font-size: clamp(2.7rem, 7.4vw, 5.4rem); line-height: 1.06; letter-spacing: -.015em; /* Wide enough that the explicit
controls the break instead of the measure forcing a third line on desktop. */ max-width: 22ch; margin: 0 auto 26px; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .6); } .hero .lede { margin: 0 auto 40px; max-width: 52ch; } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 26px; font-size: .8rem; color: var(--faint); letter-spacing: .04em; } /* Fades in on its own keyframe — .fade-up would clobber the centring transform. */ .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--sans); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); opacity: 0; animation: cue-in .9s var(--ease) 1.35s forwards; } @keyframes cue-in { to { opacity: 1; } } .scroll-cue .line { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, var(--gold)); animation: cue 2.6s var(--ease-soft) infinite; transform-origin: 50% 0; } @keyframes cue { 0% { transform: scaleY(.2); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ------------------------------------------------------------------------- Ignition — the scroll-scrubbed nebula → star ------------------------------------------------------------------------- */ .ignite { position: relative; } .ignite-rail { height: 240vh; position: relative; } .ignite-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; } .ignite-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 80px); width: 100%; } #ignite-canvas { width: 100%; aspect-ratio: 1 / 1; max-height: 74vh; max-height: 74svh; margin-inline: auto; } .ignite-copy { position: relative; } .ignite-beats { position: relative; min-height: 290px; } .ignite-beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .ignite-beat.on { opacity: 1; transform: none; pointer-events: auto; } .ignite-beat h2 { margin-bottom: 18px; } .ignite-beat p { color: var(--muted); max-width: 42ch; font-size: 1.02rem; } .ignite-meter { margin-top: 26px; display: flex; align-items: center; gap: 13px; font-family: var(--serif); font-size: 1.05rem; color: var(--gold); } .ignite-meter .track { flex: 1 1 auto; max-width: 220px; height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; } .ignite-meter .fill { /* A bare is inline, so width/height would be ignored entirely. */ display: block; height: 100%; width: calc(var(--pp, 0) * 100%); background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); box-shadow: 0 0 12px rgba(216, 178, 106, .6); } .ignite-meter .val { font-variant-numeric: tabular-nums; min-width: 4ch; } .ignite-meter .cap { font-family: var(--sans); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .ignite-steps { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; } .ignite-steps i { width: 34px; height: 2px; background: var(--hairline-strong); border-radius: 2px; overflow: hidden; } /* Fills continuously with scroll — the reader always has something moving. */ .ignite-steps b { display: block; height: 100%; background: var(--gold); box-shadow: 0 0 10px rgba(216, 178, 106, .7); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; } /* ------------------------------------------------------------------------- Proof strip ------------------------------------------------------------------------- */ .proof { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(44px, 6vw, 68px) 0; background: rgba(11, 15, 23, .4); } .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; } .proof-stat { position: relative; } .proof-stat + .proof-stat::before { content: ""; position: absolute; left: -15px; top: 8%; width: 1px; height: 84%; background: linear-gradient(180deg, transparent, var(--hairline-strong), transparent); } .proof-stat .num { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3.1rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px rgba(216, 178, 106, .28); } .proof-stat .label { font-family: var(--sans); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; } /* ------------------------------------------------------------------------- Concept — copy beside a phone ------------------------------------------------------------------------- */ .concept-grid { display: flex; align-items: center; gap: clamp(40px, 7vw, 92px); } .concept-copy { flex: 1 1 54%; } .concept-copy p { font-family: var(--sans); color: var(--muted); margin-bottom: 18px; max-width: 52ch; } .concept-copy p strong { color: var(--cream); font-weight: 600; } .concept-visual { flex: 0 1 40%; margin-left: auto; max-width: 320px; } /* CSS device frame — no image weight, scales with the screenshot. */ .device { position: relative; border-radius: 40px; padding: 9px; background: linear-gradient(160deg, #2b3140 0%, #10141d 42%, #262c3a 100%); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(243, 236, 218, .1), 0 0 60px -20px rgba(216, 178, 106, .22); } /* No drawn notch — the screenshots already contain the status bar and the Dynamic Island, so the frame is bezel + glare only. */ .device img { width: 100%; border-radius: 32px; display: block; background: var(--surface); } .device-glare { position: absolute; inset: 9px; border-radius: 32px; z-index: 3; pointer-events: none; background: linear-gradient(150deg, rgba(255, 255, 255, .12) 0%, transparent 38%, transparent 100%); mix-blend-mode: screen; } /* ------------------------------------------------------------------------- Genre spectrum — a line of prose in real genre tints over a rail carrying all twenty-five, rather than a legend the reader has to parse. ------------------------------------------------------------------------- */ .spectrum-line { font-family: var(--serif); font-size: clamp(1.55rem, 3.6vw, 2.5rem); line-height: 1.32; text-align: center; max-width: 22ch; margin: 0 auto; color: var(--muted); text-wrap: balance; } .spectrum-line span { color: var(--c); font-style: italic; white-space: nowrap; text-shadow: 0 0 26px currentColor; } .spectrum-rail { height: 2px; max-width: 900px; margin: clamp(46px, 6vw, 74px) auto 0; border-radius: 2px; background: linear-gradient(90deg, #A85454, #C76A5A, #ED8345, #C9A886, #D79A52, #B08A5C, #D8B26A, #E9E2D2, #C7BFA6, #8FAF8A, #8FC79A, #6FBFAE, #4FB8B0, #6FC7C7, #4C7A9C, #8FA8C8, #CFD6E0, #7C8CE0, #B8A6E0, #A98BE0, #D879D8, #D580C0, #E0559C, #B0486B, #E0879F); box-shadow: 0 0 34px rgba(216, 178, 106, .2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .spectrum-note { text-align: center; margin: 30px auto 0; max-width: 46ch; font-size: .88rem; color: var(--faint); } /* ------------------------------------------------------------------------- The index — the four tabs set like a book's contents page. Deliberately no icons and no cards: the names carry it, and rules do the dividing. ------------------------------------------------------------------------- */ .index { list-style: none; } .index-row { position: relative; display: grid; grid-template-columns: 3.5rem minmax(150px, 1fr) minmax(0, 2.1fr); align-items: baseline; gap: clamp(16px, 3vw, 44px); padding: clamp(26px, 3.4vw, 38px) 0; border-top: 1px solid var(--hairline); } .index-row:last-child { border-bottom: 1px solid var(--hairline); } /* A gold rule draws itself across the row's top edge on hover. */ .index-row::after { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold), transparent); transition: width .6s var(--ease); } .index-row:hover::after { width: 100%; } .index-num { font-family: var(--serif); font-size: 1rem; color: var(--gold-lo); font-variant-numeric: tabular-nums; letter-spacing: .06em; } .index-row h3 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1; transition: color .4s var(--ease); } .index-row:hover h3 { color: var(--gold-hi); } .index-row p { font-family: var(--sans); color: var(--muted); font-size: .95rem; line-height: 1.7; max-width: 54ch; } /* ------------------------------------------------------------------------- Showcase — scroll-linked screenshot gallery ------------------------------------------------------------------------- */ .showcase-track { display: flex; gap: 26px; overflow-x: auto; padding: 14px clamp(20px, 5vw, 32px) 30px; margin: 0 calc(clamp(20px, 5vw, 32px) * -1); scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; perspective: 1400px; } .showcase-track.dragging { cursor: grabbing; scroll-snap-type: none; } .showcase-track::-webkit-scrollbar { display: none; } .showcase-item { flex: 0 0 auto; width: clamp(190px, 22vw, 244px); scroll-snap-align: center; transform: rotateY(calc(var(--t, 0) * -9deg)) translateZ(calc(var(--t, 0) * var(--t, 0) * -46px)); transform-style: preserve-3d; transition: transform .25s linear; } .showcase-item .device { transition: box-shadow .5s var(--ease); } /* Without this the browser's native image drag starts instead of the strip panning, and the reader ends up dragging a screenshot around the page. */ .showcase-track img { -webkit-user-drag: none; user-drag: none; } .showcase-item:hover .device { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(243, 236, 218, .16), 0 0 70px -14px rgba(216, 178, 106, .4); } .showcase-caption { margin-top: 18px; font-size: .84rem; color: var(--muted); text-align: center; } .showcase-caption strong { color: var(--cream); font-weight: 600; display: block; margin-bottom: 2px; font-size: .9rem; } .showcase-rail { height: 2px; background: var(--hairline); border-radius: 2px; max-width: 220px; margin: 6px auto 0; overflow: hidden; } .showcase-rail i { display: block; height: 100%; width: 34%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); border-radius: 2px; transform: translateX(calc(var(--sp, 0) * 194%)); transition: transform .15s linear; } .showcase-hint { text-align: center; margin-top: 16px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } /* ------------------------------------------------------------------------- Full-bleed video bands (both lazy, both below the fold) ------------------------------------------------------------------------- */ .band { position: relative; min-height: 86vh; min-height: 86svh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg); text-align: center; } .band-media { position: absolute; inset: 0; z-index: 0; background: var(--bg); } .band-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s var(--ease-soft); } .band-media video.shown { opacity: 1; } .band-media video.faded { opacity: 0; } .band-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 60% at 50% 50%, rgba(6, 10, 18, .72), transparent 75%), linear-gradient(180deg, var(--bg) 0%, rgba(6, 10, 18, .35) 26%, rgba(6, 10, 18, .45) 70%, var(--bg) 100%); } .band-content { position: relative; z-index: 2; } .band-content h2 { max-width: 22ch; margin: 0 auto 20px; text-wrap: balance; } .band-content .lede { margin: 0 auto; max-width: 54ch; } /* ------------------------------------------------------------------------- Details ------------------------------------------------------------------------- */ .details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 54px); } .detail { position: relative; padding-top: 26px; border-top: 1px solid var(--hairline); } .detail h3 { font-size: 1.02rem; margin-bottom: 12px; color: var(--gold); font-family: var(--sans); font-weight: 600; letter-spacing: .01em; } .detail p { font-family: var(--sans); color: var(--muted); font-size: .93rem; } /* ------------------------------------------------------------------------- Closing CTA ------------------------------------------------------------------------- */ .cta { padding: clamp(110px, 15vw, 190px) 0; text-align: center; position: relative; overflow: hidden; } .cta-aurora { position: absolute; top: -10%; left: 50%; width: 1100px; max-width: 160vw; height: 620px; transform: translateX(-50%); z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 45% at 42% 45%, rgba(216, 178, 106, .17), transparent 70%), radial-gradient(ellipse 46% 40% at 62% 55%, rgba(154, 144, 196, .13), transparent 70%); filter: blur(14px); animation: aurora 18s var(--ease-soft) infinite alternate; } @keyframes aurora { from { transform: translateX(-52%) scale(1); opacity: .8; } to { transform: translateX(-48%) scale(1.1); opacity: 1; } } .cta .wrap { z-index: 1; } .cta h2 { margin: 0 auto 20px; max-width: 17ch; text-wrap: balance; } .cta .lede { margin: 0 auto 40px; max-width: 56ch; } .cta-meta { margin-top: 26px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: .8rem; color: var(--faint); } .cta-meta span { display: inline-flex; align-items: center; gap: 7px; } .cta-meta svg { width: 14px; height: 14px; stroke: var(--gold-lo); fill: none; stroke-width: 1.6; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ footer { border-top: 1px solid var(--hairline); padding: 46px 0; position: relative; z-index: 1; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; } .footer-links { display: flex; gap: 26px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; } .footer-links a { transition: color .3s; } .footer-links a:hover { color: var(--gold); } .footer-copy { font-size: .79rem; color: var(--faint); } /* ------------------------------------------------------------------------- Legal pages (privacy.html, terms.html) ------------------------------------------------------------------------- */ .legal { padding: calc(var(--nav-h) + 70px) 0 110px; max-width: 780px; } .legal h1 { font-size: clamp(2rem, 5vw, 2.5rem); margin-bottom: 8px; } .legal .updated { color: var(--faint); font-size: .84rem; margin-bottom: 46px; } .legal h2 { font-size: 1.16rem; margin: 44px 0 14px; color: var(--gold); font-family: var(--sans); font-weight: 600; } .legal p, .legal li { color: var(--muted); font-size: .97rem; line-height: 1.75; margin-bottom: 14px; } .legal ul { padding-left: 22px; margin-bottom: 14px; } .legal strong { color: var(--cream); } .legal a.inline { color: var(--gold); border-bottom: 1px solid var(--gold-line); } .legal a.inline:hover { color: var(--gold-hi); } .legal table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: .87rem; } .legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); color: var(--muted); vertical-align: top; } .legal th { color: var(--cream); font-weight: 600; } .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 38px; color: var(--muted); font-size: .9rem; transition: color .3s; } .back-link:hover { color: var(--gold); } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 900px) { .nav-links { display: none; } .concept-grid { flex-direction: column; gap: 46px; } .concept-visual { margin: 0 auto; order: -1; } .ignite-grid { grid-template-columns: 1fr; gap: 22px; } .ignite-rail { height: 230vh; } #ignite-canvas { max-height: 34vh; max-height: 34svh; width: auto; height: 34vh; height: 34svh; aspect-ratio: 1/1; } .ignite-beats { min-height: 330px; } .ignite-copy { text-align: center; } .ignite-beat { align-items: center; } .ignite-beat p { margin-inline: auto; } /* Centred copy shouldn't carry the eyebrow's left-hand rule. */ .ignite-beat .eyebrow::before { display: none; } .ignite-meter { justify-content: center; max-width: 300px; margin-inline: auto; } .details-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .proof-grid { grid-template-columns: 1fr; gap: 34px; } .proof-stat + .proof-stat::before { left: 50%; top: -17px; width: 60px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent); } } @media (max-width: 760px) { .index-row { grid-template-columns: 2.6rem 1fr; row-gap: 12px; } .index-row p { grid-column: 2 / -1; } } @media (max-width: 620px) { .hero { padding-bottom: 92px; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .ignite-beat h2 { font-size: 1.85rem; } .band { min-height: 74vh; min-height: 74svh; } .footer-inner { flex-direction: column; text-align: center; } } @media (max-width: 400px) { .brand { font-size: 1.2rem; gap: 9px; } .brand-mark { width: 36px; height: 36px; } .nav-cta { padding: 9px 15px; font-size: .78rem; } } /* Coarse pointers get no hover affordances. */ @media (hover: none) { .index-row:hover::after { width: 0; } .index-row:hover h3 { color: var(--cream); } } /* ------------------------------------------------------------------------- Reduced motion — everything settles, nothing moves ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; filter: none; } .rise > span { transform: none; } .fade-up { opacity: 1; transform: none; } .cta-aurora { animation: none; } .showcase-item { transform: none; } .ignite-rail { height: auto; } .ignite-stage { position: static; height: auto; padding: 60px 0; } .ignite-beat { position: static; opacity: 1; transform: none; margin-bottom: 40px; } .ignite-beats { min-height: 0; } .ignite-meter, .ignite-steps { display: none; } } /* ------------------------------------------------------------------------- No JS — every progressive enhancement has to fall back to plain content. The class is removed by an inline script before first paint, so this only ever applies when scripting is genuinely unavailable. ------------------------------------------------------------------------- */ .no-js .reveal { opacity: 1; transform: none; filter: none; } .no-js #sky-canvas { display: none; } .no-js .ignite-rail { height: auto; } .no-js .ignite-stage { position: static; height: auto; padding: 60px 0; overflow: visible; } .no-js .ignite-beat { position: static; opacity: 1; transform: none; margin-bottom: 44px; pointer-events: auto; } .no-js .ignite-beats { min-height: 0; } .no-js .ignite-steps, .no-js .ignite-meter, .no-js #ignite-canvas { display: none; } .no-js .band-media { display: none; } .no-js .showcase-hint { display: none; }