/* ============================================================ ACORN DEPTHS — launch site Palette + type ported from the game (actors.js / items.js): warm woods, cream UI ink, jewel-tone rarity gems. ============================================================ */ :root { /* surfaces */ --bg: #160f08; --bg-2: #1d150c; --panel: #251a0f; --panel-2: #2f2113; --panel-3: #3a2a18; --line: rgba(240, 216, 160, 0.13); --line-soft: rgba(240, 216, 160, 0.07); /* ink */ --ink: #f3e7cf; --ink-soft: #cdb78f; --ink-mute: #93805d; /* brand */ --accent: #f0c24a; /* tweakable */ --accent-deep: #c2861f; --rust: #c1694f; --leaf: #74af4c; /* rarity gems (exact from items.js RARITIES) */ --r-common: #cfcfcf; --r-sturdy: #6fdc6f; --r-fine: #5ab0ff; --r-heroic: #c478ff; --r-legendary: #ffc83d; --wood: #6b4226; --wood-2: #8a5a3c; --font-display: "Lilita One", system-ui, sans-serif; /* tweakable */ --font-body: "Fredoka", system-ui, sans-serif; --maxw: 1240px; /* --gutter is the page's left rail. Every band on this page is a `.wrap`, so this one value moves the header brand, the hero wordmark, every section heading, the badges and the footer together — one rail, nothing off it. That invariant is the design; see the hero note below. It used to be a flat 24px. That is right on a phone and hard-left on a laptop: between ~1160px and ~1290px the entire page hugged the window edge with a 24px margin while a wide empty band sat on the right. The ramp below holds 24px through phone widths and grows to ~8.5vw by laptop widths (a 1300px window lands the rail near 110px); past ~1500px --maxw takes over and centres the 1240px column exactly as before. */ --gutter: clamp(24px, 9.3vw - 11px, 132px); --radius: 18px; --ease: cubic-bezier(.22,.61,.36,1); } /* cozy / parchment theme */ body.theme-cozy { --bg: #efe0c2; --bg-2: #e7d6b4; --panel: #fbf3e2; --panel-2: #f3e7cd; --panel-3: #ecdcbd; --line: rgba(74, 48, 24, 0.18); --line-soft: rgba(74, 48, 24, 0.09); --ink: #3a2614; --ink-soft: #6b4e2e; --ink-mute: #9a7c52; --accent-deep: #b6791a; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"), radial-gradient(900px 600px at 78% -5%, rgba(240,194,74,0.16), transparent 60%), radial-gradient(700px 500px at 8% 12%, rgba(193,105,79,0.10), transparent 60%), radial-gradient(1000px 800px at 50% 110%, rgba(116,175,76,0.08), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg) 42%); background-attachment: fixed, fixed, fixed, fixed, fixed; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-size: 180px 180px, auto, auto, auto, auto; background-blend-mode: overlay, normal, normal, normal, normal; color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.theme-cozy { background-blend-mode: multiply, normal, normal, normal, normal; } .nav, main, .footer { position: relative; z-index: 1; } /* ambient kept as a no-op holder (background now lives on ) */ .ambient { display: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #1a1206; } /* ---------- layout helpers ---------- */ .wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; } section { position: relative; } .eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: .005em; } .section-head { max-width: 720px; margin-bottom: 48px; } .section-head h2 { font-size: clamp(34px, 5vw, 58px); margin: 16px 0 14px; text-wrap: balance; } .section-head p { color: var(--ink-soft); font-size: 18px; max-width: 60ch; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line-soft); } .nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand > span { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; } .brand .acorn-mark { width: 26px; height: 26px; } .brand small { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .18em; color: var(--ink-mute); text-transform: uppercase; } .nav-links { display: flex; gap: 28px; margin-left: auto; } .nav-links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 15px; transition: color .2s; } .nav-links a:hover { color: var(--ink); } .nav .btn { margin-left: 8px; } @media (max-width: 860px) { .nav-links { display: none; } } /* ---------- buttons ---------- */ .btn { --b: var(--accent); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: 14px; border: none; cursor: pointer; text-decoration: none; color: #1a1206; background: var(--b); white-space: nowrap; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -10px color-mix(in oklab, var(--accent) 70%, black); transition: transform .15s var(--ease), box-shadow .2s, filter .2s; position: relative; } .btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -12px color-mix(in oklab, var(--accent) 80%, black); } .btn:active { transform: translateY(0); } .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); } .btn.lg { padding: 18px 34px; font-size: 18px; border-radius: 16px; } /* ---------- hero ---------- */ .hero { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(20px, 3vw, 30px); } /* One LEFT-ALIGNED column, in this order: wordmark + hook → the live sqwirl → button + live count → the identity line. The sqwirl sits between the hook and the button on purpose: it is the only hero in the category that proves its own technical claim just by existing, so it earns the position where a trailer would normally go. The stage is a letterbox capped in vh so the hero still ends without a long scroll on a laptop or a phone. Every item starts on the page's left rail — the same x as the header acorn and as every section heading below it — so the wordmark reads as the top of one continuous column instead of a banner floating above the page. Where that rail sits is `--gutter` on `.wrap`, and it is the only knob for it: move the rail there and the whole page moves with the hero. This was centred, and the wordmark did not survive it. `.hero-copy` was capped at 46ch, a sensible reading measure for the hook, but the wordmark is `white-space: nowrap` and far wider than that at hero sizes: 652px of text in a 432px box. Overflow from a nowrap inline only ever runs one way — right — so `text-align: center` had nothing left to centre, and the wordmark sat ~110px right of true centre while every element under it was correctly centred. That is what read as "slightly right-justified", and it was a real offset, not an optical illusion. The measure therefore now lives on the elements that need one (.hero-lede, .hero-tail) and never on the wordmark's own box. If this is ever re-centred, do NOT put a max-width back on .hero-copy — cap the prose instead, or the same bug returns. */ .hero-grid { display: grid; grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 22px; } .hero-copy { max-width: none; } .hero-stage { width: 100%; max-width: 760px; } .hero-title { font-size: clamp(56px, 10.5vw, 132px); line-height: .9; letter-spacing: .01em; text-transform: uppercase; margin: 18px 0 0; text-wrap: balance; } .hero-title .l1 { display: block; color: var(--ink); } .hero-title.one { white-space: nowrap; letter-spacing: -.01em; } .hero-title.one .l1, .hero-title.one .l2 { display: inline; } .hero-title .l2 { display: block; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white) 0%, var(--accent) 45%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); } /* The hook. Short enough to sit big, and set in the body face rather than the display face so it reads as a spoken aside instead of shouting over the wordmark directly above it. */ .hero-lede { margin-top: 16px; font-size: clamp(22px, 2.9vw, 34px); font-weight: 600; line-height: 1.25; color: var(--ink); text-wrap: balance; max-width: 46ch; /* the reading measure, on the prose itself — never on .hero-copy above */ } .hero-lede b { color: var(--accent); font-weight: 600; } /* Everything below the sqwirl: button + live count, then the identity line, then the quiet "read more". The subtitle is a clarifier down here, not the lead, so it is sized like one. */ .hero-tail { max-width: 52ch; width: 100%; } .hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; align-items: center; } .hero-sub { margin-top: 16px; font-size: clamp(15px, 1.5vw, 16.5px); color: var(--ink-soft); } .hero-sub b { color: var(--ink); font-weight: 600; } /* Live player count, beside the primary CTA. Ships hidden and is only revealed on a true, non-zero number — see the script at the bottom of index.html. `.livecount[hidden]` has to re-assert display:none because the inline-flex above would otherwise beat the UA rule. */ .livecount { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); } .livecount[hidden] { display: none; } .livecount .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--leaf); box-shadow: 0 0 8px var(--leaf); animation: pulse 1.8s infinite; } /* the demoted "read more" — a quiet text link, never a co-equal card */ .hero-aside { margin-top: 16px; font-size: 14.5px; } .hero-aside a { color: var(--ink-mute); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; } .hero-aside a:hover { color: var(--accent); border-color: var(--accent); } /* ---------- instant-play badge row ---------- */ .badges-wrap { padding-bottom: clamp(24px, 4vw, 44px); } /* On the same left rail as the hero above it — these badges are the last beat of the above-the-fold block, so centring them here would leave them floating out of the column. */ .badge-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; } .badge-row li { list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; } .badge-row li::before { content: "✓"; color: var(--accent); font-weight: 700; font-size: 12px; } /* hero stage (3d) */ .stage { position: relative; aspect-ratio: 16 / 9; max-height: 34vh; width: 100%; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 90% at 50% 8%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%), radial-gradient(90% 90% at 50% 120%, rgba(0,0,0,.5), transparent 60%), linear-gradient(180deg, #20170d, #120c06); box-shadow: inset 0 0 0 1px var(--line), inset 0 -60px 120px -40px rgba(0,0,0,.7), 0 40px 80px -40px rgba(0,0,0,.7); } /* The stage is an to the game, so it needs to look like one you can press. The hover state swaps only the inner hairline for an accent ring — deliberately no transform, because the element is also a drag surface and a card-style lift under the cursor feels wrong mid-spin. */ a.stage { display: block; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: box-shadow .25s var(--ease); } a.stage:hover { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 60%, var(--line)), inset 0 -60px 120px -40px rgba(0,0,0,.7), 0 40px 80px -40px rgba(0,0,0,.7); } /* Ring on :focus FIRST, then withdrawn again for pointer focus where :focus-visible is understood. Written this way round so the keyboard ring is the default and the heuristic can only ever take it away — a browser that does not know :focus-visible still shows it, rather than leaving the control silently unfocusable-looking. Showing it after a mouse click costs nothing here, because a mouse click on this element navigates away. */ a.stage:focus { outline: 3px solid var(--accent); outline-offset: 4px; } a.stage:focus:not(:focus-visible) { outline: none; } a.stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } a.stage.is-dragging { cursor: grabbing; } .stage canvas { display: block; width: 100% !important; height: 100% !important; } .stage-badge { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: rgba(0,0,0,.4); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; backdrop-filter: blur(6px); } .stage-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 8px var(--leaf); animation: pulse 1.8s infinite; } .stage-hint { position: absolute; right: 16px; bottom: 16px; z-index: 3; font-size: 12px; color: var(--ink-mute); background: rgba(0,0,0,.35); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-soft); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .stage-fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: var(--ink-mute); padding: 30px; font-size: 15px; } .stage.no-webgl .stage-fallback { display: grid; } .stage.no-webgl canvas { display: none; } /* ---------- generic dividers / bands ---------- */ .divider { height: 1px; background: var(--line-soft); } .band { padding: 22px 0; border-block: 1px solid var(--line-soft); background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)); } .band-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .band-row .lead { font-family: var(--font-display); font-size: clamp(18px,2vw,24px); color: var(--ink); } .band-row .lead b { color: var(--accent); } .band-aside { display: flex; align-items: center; gap: 16px; } .band-note { color: var(--ink-soft); font-size: 14px; } .avatars { display: flex; } .avatars span { width: 38px; height: 38px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--bg); display: grid; place-items: center; font-size: 17px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.6); } /* ---------- section spacing ---------- */ .s-pad { padding: clamp(70px, 9vw, 130px) 0; } /* "What is SQWIRLD?" is one paragraph — it should not be given the same air as a section with a whole card grid under it, or it reads as a stray sentence floating in a field. */ #what-is-it { padding-block: clamp(52px, 6vw, 88px); } #what-is-it .section-head { margin-bottom: 0; } /* ---------- The Great Drey (feature split) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } } .feature-list { display: grid; gap: 18px; margin-top: 28px; } .feature-list li { list-style: none; display: flex; gap: 14px; align-items: flex-start; } .feature-list .ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--panel-2); border: 1px solid var(--line); } .feature-list h4 { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 2px; } .feature-list p { font-size: 14.5px; color: var(--ink-soft); } .drey-art { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); aspect-ratio: 4 / 3; } /* ---------- zones ---------- */ .zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .zone-grid .zone:first-child { grid-column: 1 / -1; } @media (max-width: 760px) { .zone-grid { grid-template-columns: 1fr; } .zone-grid .zone:first-child { grid-column: auto; } } .zone { --zc: var(--accent); position: relative; border-radius: var(--radius); overflow: hidden; /* The top padding reserves the strip the absolutely-positioned .lvl / .gen tags occupy. The card is bottom-aligned, so short cards are unaffected — but a three-line heading used to ride straight up over the level pill without it. */ padding: 62px 26px 26px; min-height: 230px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--zc) 16%, transparent), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; isolation: isolate; } .zone:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--zc) 60%, var(--line)); box-shadow: 0 24px 50px -30px color-mix(in oklab, var(--zc) 80%, black); } .zone .lvl { position: absolute; top: 20px; left: 26px; white-space: nowrap; font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; color: var(--zc); background: color-mix(in oklab, var(--zc) 16%, transparent); padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--zc) 40%, transparent); } .zone .gen { position: absolute; top: 20px; right: 26px; font-size: 12px; color: var(--ink-mute); letter-spacing: .05em; text-transform: lowercase; } .zone h3 { font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); margin-bottom: 6px; } .zone .desc { color: var(--ink-soft); font-size: 14.5px; max-width: 52ch; } .zone .boss { margin-top: 16px; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.5; } .zone .boss .skull { margin-right: 5px; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--zc) 70%, transparent)); } .zone .boss b { color: var(--zc); font-weight: 600; } .zone .glyph { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 150px; opacity: .07; z-index: -1; line-height: 1; } /* ---------- loot rarity ---------- */ .loot-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 860px) { .loot-rail { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .loot-rail { grid-template-columns: 1fr; } } .rarity { --rc: var(--r-common); position: relative; border-radius: 16px; padding: 26px 20px 22px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--rc) 12%, var(--panel)), var(--panel)); border: 1px solid color-mix(in oklab, var(--rc) 35%, var(--line)); overflow: hidden; } .rarity::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rc); box-shadow: 0 0 16px var(--rc); } .gem { width: 66px; height: 66px; margin: 6px auto 16px; display: block; filter: drop-shadow(0 0 16px color-mix(in oklab, var(--rc) 75%, transparent)); } .gem .face { fill: var(--rc); } .gem .hl { fill: rgba(255,255,255,.5); } .rarity h4 { font-family: var(--font-display); font-size: 19px; color: var(--rc); margin-bottom: 4px; } /* `.mult` (the ×1.0–×1.95 damage multipliers) is deleted, not hidden. A table of multipliers is a spec sheet; the example item name below is the part that actually sells anything. */ .rarity .ex { margin-top: 10px; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line-soft); padding-top: 12px; } /* ---------- scenes (the Caves of Qud move: concrete verbs, no lore prerequisite) ---------- */ .scenes { display: grid; gap: 15px; margin-top: 30px; max-width: 74ch; } /* NOT display:flex on the li — flex would make every inline run and every its own flex item and shatter the sentence into columns. A hanging indent with an absolutely-positioned marker keeps the text one continuous inline flow. */ .scenes li { list-style: none; position: relative; padding-left: 26px; color: var(--ink-soft); font-size: clamp(15.5px, 1.5vw, 17px); line-height: 1.6; } .scenes li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .scenes b { color: var(--ink); font-weight: 600; } #loot .scenes { margin-bottom: 44px; } .loot-note { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--ink-soft); font-size: 15px; } .loot-note .pill { font-size: 13px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; } /* ---------- generic cards (professions / customization) ---------- */ .card-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 800px) { .card-3 { grid-template-columns: 1fr; } } .card { border-radius: var(--radius); padding: 28px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); transition: transform .2s var(--ease), border-color .2s; } .card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); } .card .badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; font-size: 24px; background: var(--panel-3); border: 1px solid var(--line); margin-bottom: 18px; } .card h3 { font-size: 23px; color: var(--ink); margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: 15px; } .card .meta { margin-top: 16px; font-size: 13px; color: var(--accent); font-weight: 500; letter-spacing: .03em; } /* The "three ways in" card trio and the keybind table are BOTH deliberately gone, and their CSS with them so neither can be reintroduced by accident: · the trio ended in a disabled "Not yet" button — a dead end at peak intent, which no page in the competitor study ships. There is one dominant CTA now, and "read more" is a text link. · zero of twenty-two competitor pages publish a controls/keybind table. It is documentation, and the game already teaches its own controls and lets you rebind them. */ /* ---------- how to play ---------- */ .steps { display: grid; gap: 18px; } .steps-wide { max-width: 900px; grid-template-columns: 1fr 1fr; column-gap: 40px; } @media (max-width: 720px) { .steps-wide { grid-template-columns: 1fr; } } .steps li { list-style: none; display: flex; gap: 16px; align-items: flex-start; } .steps .num { font-family: var(--font-display); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); font-size: 18px; } .steps h4 { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--ink); } .steps p { font-size: 14.5px; color: var(--ink-soft); } /* ---------- final CTA ---------- */ .cta { text-align: center; border-radius: 30px; padding: clamp(50px, 8vw, 96px) 30px; background: radial-gradient(100% 140% at 50% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); position: relative; overflow: hidden; } .cta h2 { font-size: clamp(40px, 6.5vw, 84px); text-transform: uppercase; margin-bottom: 16px; } .cta p { color: var(--ink-soft); font-size: 19px; max-width: 46ch; margin: 0 auto 30px; } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line-soft); padding: 56px 0 40px; margin-top: 30px; } .footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer .brand { margin-bottom: 14px; } .footer p { color: var(--ink-mute); font-size: 14px; max-width: 34ch; } .footer .cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer .col h5 { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; } .footer .col a { display: block; color: var(--ink-soft); text-decoration: none; font-size: 14.5px; margin-bottom: 9px; transition: color .2s; } .footer .col a:hover { color: var(--accent); } .foot-tech { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .foot-tech span { font-size: 12px; color: var(--ink-mute); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; } .foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-mute); font-size: 13px; } /* ---------- entrance ---------- Resting state is fully visible — never gated on an animation/observer that some embedded/background contexts suspend. (.reveal kept as a hook only.) */ .reveal { opacity: 1; transform: none; } /* ---------- early-access page (/play) ---------- */ .ea-page { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 48px 24px; } .ea-brand { font-size: 26px; } .ea-brand .acorn-mark { width: 30px; height: 30px; } .ea-card { width: min(100%, 540px); border-radius: 26px; padding: clamp(28px, 4vw, 44px); background: radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); text-align: center; } .ea-title { font-size: clamp(34px, 6vw, 54px); text-transform: uppercase; line-height: .98; margin: 14px 0 16px; text-wrap: balance; } .ea-title .l2 { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, white) 0%, var(--accent) 45%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ea-sub { color: var(--ink-soft); font-size: 16.5px; max-width: 42ch; margin: 0 auto 28px; } .ea-form { display: grid; gap: 16px; text-align: left; } .field { display: grid; gap: 7px; } .field label { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: .01em; } .field label .opt { color: var(--ink-mute); font-weight: 400; } .input { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .18s var(--ease), box-shadow .18s; } .input::placeholder { color: var(--ink-mute); } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); } /* honeypot — kept off-screen, not display:none (some bots skip hidden fields) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ea-submit { width: 100%; justify-content: center; margin-top: 4px; } .ea-submit:disabled { opacity: .65; cursor: progress; transform: none; } .ea-note { color: var(--ink-mute); font-size: 13px; text-align: center; margin-top: 2px; } .form-status { margin-top: 18px; font-size: 16px; line-height: 1.5; text-wrap: balance; } .form-status.is-error { color: #ff9d7a; font-weight: 500; } .form-status.is-success { color: var(--ink); font-size: 18px; background: color-mix(in oklab, var(--leaf) 14%, transparent); border: 1px solid color-mix(in oklab, var(--leaf) 40%, var(--line)); border-radius: 14px; padding: 20px 22px; } .form-status.is-success b { color: var(--leaf); } .ea-back { display: inline-block; margin-top: 26px; color: var(--ink-mute); text-decoration: none; font-size: 14px; transition: color .2s; } .ea-back:hover { color: var(--accent); }