:root { --ink: #0a0e0e; --ink-2: #0c1111; --ink-3: #121212; --navy: #0a1118; --navy-2: #0d1721; --edge: #0d2f56; --rule: #463923; --rule-dim: #2a2318; --gold: #e4a812; --gold-lt:#ffeb4e; --gold-dim: #8a6a1c; --blue: #1d579b; --blue-lt:#73baf2; --green: #75c399; --green-dim: #4d7d64; --text: #edeeeb; --dim: #8b939c; --faint: #5c646d; --amber: #d9922b; --red: #c65b4e; --q-uncommon: #1eff00; --q-rare: #0070dd; --q-epic: #a335ee; --q-quest: #ffd100; --serif: Georgia, "Times New Roman", serif; --sans: "Segoe UI", system-ui, -apple-system, sans-serif; --mono: Consolas, "Courier New", monospace; } :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(1100px 640px at 12% -14%, #10243c 0%, transparent 60%), radial-gradient(760px 500px at 94% 2%, #1a1608 0%, transparent 58%), #05080a; color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* clip, not hidden: `overflow-x: hidden` makes compute to `hidden auto` and become a scroll container. `clip` stays `clip visible`. */ overflow-x: clip; } img { max-width: 100%; } a { color: var(--blue-lt); text-decoration: none; } a:hover { color: var(--gold-lt); } button:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } h1, h2, h3, h4 { text-wrap: balance; } .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-lt); font-weight: 700; margin: 0 0 12px; } code, .mono { font-family: var(--mono); } kbd { font-size: 11.5px; font-weight: 700; color: var(--gold); background: var(--ink-3); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 2px; padding: 3px 7px; font-family: var(--mono); } .rule-orn { width: 100%; max-width: 260px; height: 10px; position: relative; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--gold-dim) 50%, var(--rule) 80%, transparent) center/100% 1px no-repeat; } .rule-orn::after { content: "◆"; position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: var(--gold); font-size: 8px; background: #05080a; padding: 0 6px; } button { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 2px; cursor: pointer; color: var(--text); background: var(--ink-3); border: 1px solid var(--rule); transition: border-color .12s, color .12s, background .12s; } button:hover { border-color: var(--gold-dim); color: var(--gold-lt); } .btn-primary, a.btn-primary { display: inline-flex; align-items: center; gap: 8px; border-color: var(--gold-dim); color: var(--ink); background: linear-gradient(180deg, var(--gold-lt), var(--gold)); font-weight: 700; padding: 12px 24px; border-radius: 2px; font-size: 14px; box-shadow: 0 0 0 1px rgba(228,168,18,.16), 0 8px 24px rgba(228,168,18,.14); } .btn-primary:hover, a.btn-primary:hover { color: var(--ink); filter: brightness(1.08); } .btn-secondary, a.btn-secondary { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); color: var(--text); background: rgba(5,8,10,.32); padding: 12px 22px; border-radius: 2px; font-size: 13.5px; font-weight: 600; } .btn-secondary:hover, a.btn-secondary:hover { color: var(--gold-lt); border-color: var(--gold-dim); } /* ---------------- nav ---------------- */ .site-nav { position: sticky; top: 0; z-index: 40; background: rgba(6,9,10,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-dim); } .site-nav .inner { max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 22px; } .brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 16px; color: var(--gold); font-weight: 700; margin-right: auto; } .brand-mark { width: 22px; height: 22px; flex: none; } .site-nav .links { display: flex; align-items: center; gap: 20px; } .site-nav .links a { color: var(--dim); font-size: 13.5px; font-weight: 600; } .site-nav .links a:hover { color: var(--text); } .site-nav .btn-primary { padding: 8px 16px; font-size: 13px; } .nav-toggle { display: none; } /* ---------------- sections generic ---------------- */ /* v4 rhythm: one visual moment per screen. 72px of breathing room, not 110, and the ornament rule costs ZERO vertical space (see .orn-band) so the gap between two sections is 144px flat instead of 110+10+110+margins. */ section { padding: 64px 0; } .sec-head { max-width: 640px; margin: 0 0 28px; } h2.sec-title { font-family: var(--serif); font-size: clamp(24px, 3vw, 30px); color: var(--gold); margin: 0; font-weight: 700; } .sec-note { color: var(--dim); font-size: 15px; margin: 10px 0 0; } section[id] { scroll-margin-top: 76px; } /* The divider sits IN the gap the sections already own: zero-height flex band, ornament pulled onto the centre line. No dead corridor of its own. */ .orn-band { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 0; display: flex; justify-content: center; pointer-events: none; } .orn-band .rule-orn { position: relative; top: -5px; } /* ---------------- scroll reveal ---------------- */ /* Base state is applied ONLY under .reveal-ready, which JS adds at init — so a no-JS render (or a reduced-motion render, where JS bails early) shows every element at full opacity with no transform. */ .reveal { transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .reveal-ready .reveal { opacity: 0; transform: translateY(18px); } .reveal-ready .reveal.in-view { opacity: 1; transform: none; } /* ---------------- hero region + backdrop ---------------- */ #hero { position: relative; padding: 60px 0 34px; } /* The hero's own fade already does the closing work — the first section must not add a second empty corridor underneath it. */ #features { padding-top: 40px; } .hero-backdrop { position: absolute; left: 0; right: 0; top: -68px; bottom: 0; overflow: hidden; z-index: 0; pointer-events: none; /* single anchor for the moon + its halo, so both move together */ } .bd-plate { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,10,.30) 0%, rgba(5,8,10,.42) 55%, rgba(5,8,10,.86) 88%, #05080a 100%), url("hero-bg.webp") center top / cover no-repeat; } /* soft banded cloud, screened over the sky — this is what stops the backdrop reading as a flat wash. Blurred so no gradient edges show. */ /* a cloud bank drifting across the lower half of the moon — the single thing that stops it reading as a flat sticker pasted on the sky */ #emberCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* The viewBox carries ~450 units of empty sky above the silhouettes so that "slice" crops sky, never towers, at any aspect ratio the hero can take. */ .bd-vignette { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(3,5,6,.60) 0%, rgba(3,5,6,.30) 42%, transparent 68%), radial-gradient(ellipse 62% 52% at 26% 54%, rgba(0,0,0,.28), transparent 70%), radial-gradient(ellipse 120% 60% at 50% -10%, rgba(0,0,0,.34), transparent 62%); } .bd-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent 0%, rgba(5,8,10,.5) 46%, rgba(5,8,10,.88) 78%, #05080a 100%); } /* Optional garnish: the plate drifts a touch as the hero scrolls away. Scroll-driven animations only — no JS, no scroll listener. Browsers without animation-timeline simply get the static plate. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .bd-plate { animation: plate-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes plate-drift { from { transform: translateY(-1.8%) scale(1.05); } to { transform: translateY(2.6%) scale(1.05); } } } } /* ---------------- hero content ---------------- */ /* Fixed panel column: the headline's gold line must never be squeezed into a third line, so the copy column takes whatever is left. */ .hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) min(420px, 34vw); gap: 56px; align-items: center; min-height: 486px; } .hero-copy h1 { font-family: var(--serif); font-size: clamp(36px, 4.05vw, 60px); line-height: 1.08; margin: 0 0 18px; font-weight: 700; text-wrap: balance; } .hero-copy h1 .hl-white { color: var(--text); text-shadow: 0 2px 18px rgba(0,0,0,.5); } .hero-copy h1 .hl-gold { color: var(--gold); text-shadow: 0 2px 20px rgba(228,168,18,.28); } .standfirst { color: var(--dim); font-size: 17px; margin: 0 0 28px; max-width: 50ch; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; } .trust-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--dim); font-size: 13px; margin: 0 0 22px; } .trust-item { display: inline-flex; align-items: center; gap: 7px; color: var(--dim); } .trust-item .ic { width: 16px; height: 16px; flex: none; } .trust-item .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .trust-sep { width: 1px; height: 14px; background: var(--rule-dim); flex: none; } .hero-sub { color: var(--dim); font-size: 13px; margin: 0 0 22px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .status-chip { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--gold-dim); border-radius: 2px; padding: 3px 7px; background: rgba(228,168,18,.05); flex: none; } .hero-keys { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 13px; } .cta-status { color: var(--dim); font-size: 12.5px; margin: 14px 0 0; } /* ---------------- demo panel ---------------- */ .demo-stage { display: flex; justify-content: center; } .win { background: var(--ink); border: 1px solid var(--edge); border-radius: 5px; box-shadow: 0 0 0 1px rgba(228,168,18,.16), 0 0 26px rgba(13,47,86,.55), 0 30px 70px rgba(0,0,0,.75); overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 388px; } .titlebar { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, #101820, var(--ink)); } .titlebar .glyph { color: var(--gold-lt); font-size: 13px; } .titlebar .name { font-family: var(--serif); font-size: 14px; color: var(--gold); font-weight: 700; } .titlebar .spacer { flex: 1; } .titlebar .dotled { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(117,195,153,.7); } .titlebar .status-txt { font-size: 11.5px; color: var(--green); font-weight: 600; } .titlebar .ico { color: var(--faint); font-size: 12px; } .ctx { padding: 8px 13px; border-bottom: 1px solid var(--rule-dim); background: var(--ink-2); } .ctx .lbl { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .ctx .val { font-size: 12.5px; color: var(--text); font-weight: 600; margin-top: 1px; } .convo { padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; } .turn { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; } .avatar { width: 22px; height: 22px; flex: none; border-radius: 2px; border: 1px solid var(--rule); background: #14100a; display: grid; place-items: center; font-size: 11px; color: var(--gold); } .avatar.bot { border-color: var(--green-dim); color: var(--green); background: #0b1410; } .turn .body { flex: 1; min-width: 0; } .speaker { font-weight: 700; font-size: 12.5px; } .speaker.you { color: var(--text); } .speaker.bot { color: var(--green); } .turn p { margin: 3px 0 0; color: var(--text); font-size: 13px; line-height: 1.55; } .turn p:first-of-type { margin-top: 4px; } .item-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; border: 1px solid currentColor; border-radius: 2px; padding: 4px 9px; font-size: 12.5px; font-weight: 600; background: rgba(237,238,235,.05); } .item-chip .coin { color: var(--gold-lt); font-size: 11px; } .q-uncommon { color: var(--q-uncommon); } .q-rare { color: var(--q-rare); } .q-epic { color: var(--q-epic); } .q-quest { color: var(--q-quest); } .item-name { font-weight: 700; } .price { font-family: var(--mono); color: var(--gold-lt); font-weight: 600; } .thinking { display: flex; align-items: center; gap: 4px; padding-top: 5px; height: 14px; } .thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--green-dim); animation: think-bounce 1.1s infinite ease-in-out; } .thinking span:nth-child(2) { animation-delay: .15s; } .thinking span:nth-child(3) { animation-delay: .3s; } @keyframes think-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .composer { padding: 10px 13px; border-top: 1px solid var(--rule-dim); display: flex; gap: 8px; } .composer .fake-input { flex: 1; font-family: var(--sans); font-size: 13px; color: var(--text); background: #0c0e10; border: 1px solid #2b2e33; border-radius: 2px; padding: 8px 10px; min-height: 18px; display: flex; align-items: center; } .composer .fake-input .caret { display: inline-block; width: 1px; height: 14px; background: var(--gold-lt); margin-left: 1px; animation: caret-blink 1s step-end infinite; } .composer .fake-input .placeholder { color: var(--faint); } @keyframes caret-blink { 50% { opacity: 0; } } .composer .send-btn { border-color: var(--gold-dim); color: var(--gold); background: #16130a; font-size: 13px; padding: 8px 16px; } /* ---------------- feature cards ("what it knows") ---------------- */ /* Image-first: the emblem plate is the card's subject, the caption is a footnote under it. Sized to be the frame tomorrow's raster art drops into. */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .feature-card { border: 1px solid #23262b; border-radius: 3px; background: #0c1012; padding: 22px 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .feature-icon { width: 96px; height: 96px; border: 1.5px solid var(--gold-dim); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--gold); background: radial-gradient(ellipse 70% 62% at 50% 38%, rgba(228,168,18,.14), transparent 72%), linear-gradient(165deg, #16130b, #0b0d0e 70%); box-shadow: inset 0 0 24px rgba(228,168,18,.06); } .feature-icon svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .feature-card h3 { font-family: var(--serif); font-size: 17px; color: var(--gold); margin: 0; font-weight: 700; } .feature-card p { margin: -2px 0 0; color: var(--faint); font-size: 12.5px; } .grounding-note { margin: 26px 0 0; color: var(--dim); font-size: 13.5px; text-align: center; } .grounding-note strong { color: var(--text); } /* ---------------- version / expansion cards ---------------- */ /* Image-area-first. .vcard-art is the poster frame; tomorrow's raster art replaces the CSS-art gradient + crest inside it without touching layout. */ .version-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .vcard { border: 1px solid #23262b; border-radius: 3px; background: #0c1012; display: flex; flex-direction: column; overflow: hidden; } .vcard.live { border-color: var(--gold-dim); background: #10120c; box-shadow: 0 0 0 1px rgba(228,168,18,.16); } .vcard.dim { opacity: .88; } /* .vcard.dim (0,2,0) collides with the reveal rules at both ends: its .88 was winning on source order BEFORE reveal — so the two unavailable cards skipped the fade and slid up already visible — and losing to .reveal.in-view (0,3,0) AFTER it, so the .88 dimming never actually landed. Pin both states. */ .reveal-ready .vcard.dim.reveal:not(.in-view) { opacity: 0; } .reveal-ready .vcard.dim.reveal.in-view { opacity: .88; } .vcard-art { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #23262b; background: linear-gradient(165deg, #0e1518, #0a1014 60%, #070a0c); } .vcard.live .vcard-art { background: radial-gradient(ellipse 58% 62% at 50% 46%, rgba(117,195,153,.16), transparent 70%), linear-gradient(165deg, #101a16, #0a1210 60%, #070a09); border-bottom-color: var(--rule-dim); } .vcard-crest { width: 44%; max-width: 128px; aspect-ratio: 1; opacity: .9; } .vcard-crest svg { width: 100%; height: 100%; } .vcard .status-pill { position: absolute; left: 12px; top: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Real scene art. The raster lives on ::before so the dim treatment for unavailable expansions can desaturate the picture WITHOUT dimming the status pill sitting on top of it. ::after is the scrim that keeps the pill legible and lands the bottom edge on the page's near-black ground. Cards without art keep the gradient + crest placeholder untouched. */ .vcard .vcard-art.has-art { background: #05080a; } .vcard .vcard-art.has-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: cover; background-position: center; background-repeat: no-repeat; } .vcard .vcard-art.has-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,8,10,.46) 0%, rgba(5,8,10,.05) 34%, rgba(5,8,10,.16) 64%, rgba(5,8,10,.66) 100%); } .vcard .vcard-art.has-art .vcard-crest { display: none; } .vcard .vcard-art.has-art .status-pill { z-index: 1; } /* unavailable expansions keep their art, but sit clearly behind the live one */ .vcard.dim .vcard-art.has-art::before { filter: saturate(.4) brightness(.6) contrast(.96); } .vcard.dim .vcard-art.has-art::after { background: linear-gradient(180deg, rgba(5,8,10,.6) 0%, rgba(5,8,10,.34) 40%, rgba(5,8,10,.76) 100%); } .vcard .vcard-art.art-tbc::before { background-image: url("a3-tbc.webp"); } .vcard .vcard-art.art-era::before { background-image: url("a3-era.webp"); } .vcard .vcard-art.art-mop::before { background-image: url("a3-mop.webp"); } .vcard-foot { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; } .vcard h3 { font-family: var(--serif); font-size: 19px; color: var(--text); margin: 0; font-weight: 700; } .vcard.live h3 { color: var(--gold); } .vcard.dim h3 { color: var(--dim); } .vcard .meta { color: var(--faint); font-size: 12.5px; margin: 0; } .status-pill { align-self: flex-start; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; border: 1px solid; } .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; box-shadow: 0 0 6px rgba(117,195,153,.7); flex: none; } .status-pill.avail { color: var(--green); border-color: rgba(117,195,153,.35); background: rgba(117,195,153,.1); } .status-pill.soon { color: var(--dim); border-color: #2b2e33; background: rgba(139,147,156,.06); } /* ---------------- how it works ---------------- */ /* Centred columns: left-aligned text in a 380px column left two thirds of each step empty, which read as void rather than rhythm. */ .steps-strip { display: flex; align-items: flex-start; gap: 0; } .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 12px; } .step-num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; font-family: var(--serif); color: var(--gold); font-size: 12.5px; font-weight: 700; background: rgba(228,168,18,.06); } .step-icon { width: 84px; height: 84px; color: var(--blue-lt); margin-top: 2px; padding: 20px; border: 1px solid var(--rule-dim); border-radius: 3px; background: radial-gradient(ellipse 70% 62% at 50% 40%, rgba(115,186,242,.10), transparent 72%), linear-gradient(165deg, #0b131b, #080c0f 72%); } .step-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .step h3 { font-family: var(--serif); font-size: 16px; color: var(--gold); margin: 4px 0 0; font-weight: 700; } .step p { margin: -2px 0 0; color: var(--faint); font-size: 12.5px; } .step-arrow { color: var(--rule); font-size: 20px; padding-top: 62px; flex: none; } /* ---------------- see it in action (video tiles) ---------------- */ /* Two big tiles per row instead of four small ones: the posters are the section, the label strip underneath is a caption. */ .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .video-tile { display: flex; flex-direction: column; gap: 9px; } .video-poster { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; border: 1px solid #23262b; display: flex; align-items: center; justify-content: center; } .video-poster.has-art .poster-motif { display: none; } .video-poster.poster-overview.has-art { background: #05080a url("a4-overview.webp") center/cover no-repeat; } .video-poster.poster-item.has-art { background: #05080a url("a4-item.webp") center/cover no-repeat; } .video-poster.poster-dungeon.has-art { background: #05080a url("a4-dungeon.webp") center/cover no-repeat; } .video-poster.poster-auction.has-art { background: #05080a url("a4-auction.webp") center/cover no-repeat; } .poster-title { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--text); text-shadow: 0 1px 8px rgba(0,0,0,.85); } .video-poster::after { content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(3,5,7,.78)); } .video-poster .duration-chip, .video-poster .production-tag, .video-poster .play-ring { z-index: 1; } .poster-overview { background: linear-gradient(160deg, #0a1420, #122236 55%, #0a1118); } .poster-item { background: linear-gradient(160deg, #141008, #1d1608 55%, #0c0a06); } .poster-dungeon { background: linear-gradient(160deg, #0d0f0a, #151a10 55%, #090b07); } .poster-auction { background: linear-gradient(160deg, #14110a, #221a0c 55%, #0c0a05); } .poster-motif { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .22; } .poster-motif svg { width: 56%; height: 56%; } .play-ring { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(237,238,235,.55); background: rgba(5,8,10,.35); display: flex; align-items: center; justify-content: center; color: var(--text); } .play-ring svg { width: 16px; height: 16px; } .duration-chip { position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-size: 11px; color: var(--text); background: rgba(5,8,10,.72); padding: 2px 6px; border-radius: 2px; } .production-tag { position: absolute; left: 8px; top: 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: rgba(5,8,10,.6); border: 1px solid rgba(139,147,156,.3); padding: 3px 6px; border-radius: 2px; font-weight: 700; } /* ---------------- slash strip ---------------- */ .slash-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .slash-chip { display: flex; flex-direction: column; gap: 4px; border: 1px solid #23262b; border-radius: 3px; background: #0c1012; padding: 12px 14px; min-width: 0; } .slash-chip kbd { align-self: flex-start; } .slash-chip p { margin: 0; color: var(--dim); font-size: 12.5px; } /* ---------------- pricing ---------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pcard { border: 1px solid #23262b; border-radius: 3px; background: #0c1012; padding: 22px; display: flex; flex-direction: column; gap: 10px; } .pcard.rec { border-color: var(--gold-dim); background: #10120c; box-shadow: 0 0 0 1px rgba(228,168,18,.16); } .pcard h3 { font-family: var(--serif); font-size: 17px; color: var(--gold); margin: 0; font-weight: 700; } .pcard .big { font-size: 22px; font-weight: 700; color: var(--text); font-family: var(--mono); } .pcard p { margin: 0; color: var(--dim); font-size: 13.5px; } .pcard ul { margin: 4px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .pcard li { font-size: 13px; color: var(--dim); display: flex; justify-content: space-between; gap: 10px; } .pcard li .m { font-family: var(--mono); color: var(--gold-lt); } .pcard li .rec-tag { color: var(--gold); font-weight: 700; } /* ---------------- FAQ ---------------- */ .faq-list { display: flex; flex-direction: column; gap: 2px; max-width: 760px; } .faq-list details { border-bottom: 1px solid var(--rule-dim); padding: 13px 0; } .faq-list summary { cursor: pointer; font-size: 15.5px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 10px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::before { content: "+"; color: var(--gold); font-size: 16px; font-weight: 700; width: 16px; flex: none; } .faq-list details[open] summary::before { content: "–"; } .faq-list .a { color: var(--dim); font-size: 14px; margin: 10px 0 0 26px; max-width: 66ch; } /* ---------------- final CTA ---------------- */ .cta-band { text-align: center; padding: 46px 40px; border: 1px solid var(--rule-dim); border-radius: 4px; background: linear-gradient(180deg, rgba(228,168,18,.05), transparent); } .cta-band h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 32px); color: var(--gold); margin: 0 0 22px; font-weight: 700; } .cta-band .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* ---------------- footer ---------------- */ footer { padding: 40px 0 56px; border-top: 1px solid var(--rule-dim); } footer .brand { margin-bottom: 14px; } footer .flinks { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } footer .flinks a { color: var(--dim); font-size: 13px; } footer .flinks a:hover { color: var(--gold-lt); } footer .legal { color: var(--dim); font-size: 12.5px; line-height: 1.7; max-width: 74ch; margin: 0; } /* ---------------- responsive ---------------- */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: 0; } /* stacked layout: the headline now runs the full width, so the moon has to sit above it rather than beside it */ .version-grid, .pricing-grid { grid-template-columns: 1fr; } .feature-grid, .video-grid, .slash-strip { grid-template-columns: repeat(2, 1fr); } .steps-strip { flex-direction: column; gap: 20px; } .step { padding-right: 0; } .step-arrow { display: none; } section { padding: 46px 0; } #hero { padding: 40px 0 24px; } #features { padding-top: 32px; } .site-nav .links { display: none; } } @media (max-width: 480px) { .hero-cta { flex-direction: column; align-items: flex-start; } .cta-band { padding: 36px 20px; } .feature-grid, .video-grid, .slash-strip { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } /* Belt-and-braces: JS already refuses to add .reveal-ready under reduced motion, but if the class ever lands, nothing may stay invisible. */ .reveal-ready .reveal { opacity: 1 !important; transform: none !important; } } .hero-mobile-hint { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--faint); } @media (max-width: 640px) { .hero-mobile-hint { display: block; } }