/* Bricolage Grotesque, self-hosted (SIL OFL 1.1, see /fonts/OFL.txt): one variable font, weights 400-800. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== Toybox Atlas tokens (docs/visual-design.md §2). Night Flight names stay as aliases, so CSS that is not restyled yet keeps working. ========================================================================== */ :root { color-scheme: light; /* ink and paper */ --ink: #24170f; /* text on every light surface: 16.2:1 on cream */ --ink-2: #6b5444; /* muted text on cream: 6.6:1 */ --cream: #fff6e4; /* default page background */ --clay: #f3d9b1; /* raised light surface: inputs, rows, chips */ --clay-2: #e8c793; /* hover / pressed light surface */ /* section blocks (ink text on all of them) */ --lemon: #ffc53d; --tangerine: #ff8a3d; --tangerine-ink: #b84a0c; /* tangerine as text on cream: 4.9:1 (the logo accent) */ --leaf: #5cc46a; --sky: #8fd4ff; /* dusk (round screen, dialogs over the round) */ --cocoa: #2e2018; --cocoa-2: #3d2b20; --cocoa-3: #4f3a2c; --sand: #d9c4a8; /* signals */ --go: #1f5a2a; --go-bright: #7ee081; --stop: #b23a22; --stop-bright: #ff7a59; --warn: #ff8a3d; /* toy depth: the solid moulded edge under buttons and cards */ --edge-ink: color-mix(in srgb, var(--ink) 85%, transparent); --toy-1: 0 3px 0 var(--edge-ink); --toy-2: 0 5px 0 var(--edge-ink), 0 12px 24px -10px rgba(36, 23, 15, .35); --toy-3: 0 7px 0 var(--edge-ink), 0 22px 40px -14px rgba(36, 23, 15, .45); --outline: 0 0 0 2.5px var(--ink); /* surfaces next to the panorama (never over it) */ --glass: #2e2018; /* opaque: no backdrop-filter anywhere on the round screen */ --veil: rgba(36, 23, 15, .78); --veil-solid: #2e2018; /* lead veil over the panorama: opaque by rule */ /* type (§2.2) */ --font: 'Bricolage Grotesque', system-ui, sans-serif; --fs-hero: clamp(3.2rem, 8.5vw, 6.8rem); --fs-display: clamp(2rem, 4.4vw, 3.2rem); --fs-h2: 1.5rem; --fs-h3: 1.15rem; --fs-body: 1rem; --fs-small: .85rem; --fs-tag: .78rem; /* radius, spacing, layers (§2.3) */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --radius: var(--r-md); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px; --z-stage: 2; --z-hud: 6; --z-dock: 7; --z-playdock: 8; --z-intro: 20; --z-react: 30; --z-countdown: 40; --z-scrim: 50; --z-toast: 3000; /* motion (§2.4) */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.55, 0, 1, .45); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-bounce: var(--ease-spring); --ease-flap: cubic-bezier(.5, 0, .75, 0); --t-instant: 90ms; --t-quick: 160ms; --t-base: 240ms; --t-slow: 420ms; --t-epic: 900ms; --stagger: 70ms; /* aliases (§2) */ --bg: var(--cream); --panel: #ffffff; --panel-2: var(--clay); --text: var(--ink); --muted: var(--ink-2); --accent: var(--lemon); --good: var(--go); --bad: var(--stop); /* Night Flight aliases, mapped onto the daylight palette (to be removed when every page is restyled) */ --ink-0: var(--ink); --ink-1: var(--cream); --ink-3: var(--clay); --ink-4: var(--clay-2); --line: rgba(36, 23, 15, .14); --line-strong: rgba(36, 23, 15, .3); --dim: var(--ink-2); --sodium: var(--lemon); --sodium-hot: #ffd76e; --sodium-ink: var(--ink); --ember: var(--tangerine); --signal: var(--stop); --aurora: var(--go); --skyline: #1d5d99; --paper: var(--cream); --glow-sodium: var(--outline); --glow-player: 0 0 0 2.5px var(--c, var(--ink)); --edge: inset 0 0 0 1.5px var(--line-strong); --d1: var(--toy-1); --d2: var(--toy-2); --d3: var(--toy-3); --d-float: var(--toy-3); --fs-eyebrow: var(--fs-tag); } @supports (transition-timing-function: linear(0, 1)) { :root { --ease-bounce: linear(0, .36 18%, .9 36%, 1.06 48%, .98 62%, 1.01 78%, 1); } } /* Dusk surface: the round screen, dialogs over the round, the TV round. */ .dusk { color-scheme: dark; --bg: var(--cocoa); --panel: var(--cocoa-2); --panel-2: var(--cocoa-3); --text: var(--cream); --muted: var(--sand); --good: var(--go-bright); --bad: var(--stop-bright); --dim: var(--sand); --line: rgba(255, 246, 228, .14); --line-strong: rgba(255, 246, 228, .28); --ink-1: var(--cocoa); --ink-3: var(--cocoa-2); --ink-4: var(--cocoa-3); --skyline: var(--sky); } /* ---------- base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } html { scrollbar-gutter: stable; } /* same viewport width with or without a scrollbar: cross-document View Transitions abort when it changes */ body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.45; -webkit-font-smoothing: antialiased; } /* faint paper grain on daylight surfaces only (§2.3) */ body:not(.dusk) { background: url(/art/grain.svg) 0 0 / 220px 220px, var(--bg); } body.dusk, body.lite { background: var(--bg); } ::selection { background: color-mix(in srgb, var(--lemon) 60%, transparent); color: var(--ink); } /* Primary button (§3): lemon, ink outline, a solid moulded edge; it presses into the table. Hover/press use the individual `translate` property, so it composes with page transforms. The :where() parts keep specificity at the element level: any class rule (chips, tools) wins. */ button, .btn { font: inherit; border: 0; border-radius: var(--r-pill); padding: .8em 1.6em; background: var(--lemon); color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: var(--outline), var(--toy-2); transition: translate var(--t-instant) var(--ease-out), box-shadow var(--t-instant) var(--ease-out), background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; } button:where(:hover:not(:disabled)), .btn:where(:hover:not([aria-disabled='true'])) { translate: 0 -2px; box-shadow: var(--outline), var(--toy-3); } button:where(:active:not(:disabled)), .btn:where(:active:not([aria-disabled='true'])) { translate: 0 3px; box-shadow: var(--outline), var(--toy-1); } button:where(:disabled), .btn:where([aria-disabled='true']) { background: var(--clay); color: var(--ink-2); box-shadow: 0 0 0 2.5px var(--ink-2); translate: none; cursor: default; } /* Secondary: cream fill, ink outline, small edge. `.ghost` is also a player state on chips and energy bars, so it is scoped to buttons. */ button.ghost, .btn.ghost { background: var(--cream); color: var(--ink); box-shadow: var(--outline), var(--toy-1); } button.ghost:not(:disabled):hover, .btn.ghost:hover { background: #fff; box-shadow: var(--outline), var(--toy-2); } button.ghost:not(:disabled):active, .btn.ghost:active { box-shadow: var(--outline); translate: 0 3px; } button.ghost:disabled { color: var(--ink-2); } .dusk button.ghost, .dusk .btn.ghost { background: var(--cocoa-2); color: var(--cream); box-shadow: 0 0 0 2.5px var(--cream), 0 3px 0 rgba(0, 0, 0, .6); } /* Big CTA: 64 px, a tiny figure glyph on the left that hops on hover. Tangerine on lemon blocks. */ button.big, .btn.big { --figure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6' r='4.2'/%3E%3Cpath d='M6.5 21v-6.2A5.5 5.5 0 0 1 12 9.3a5.5 5.5 0 0 1 5.5 5.5V21z'/%3E%3C/svg%3E"); min-height: 64px; font-size: var(--fs-h2); padding: .45em 1.4em .45em 1.1em; gap: .45em; } button.big, .btn.big { display: inline-flex; align-items: center; justify-content: center; } /* the glyph is centred on the label's capitals (a box centred on the line sits high next to them) */ button.big::before, .btn.big::before { content: ''; display: inline-block; width: .95em; height: .95em; flex: none; position: relative; top: .07em; background: currentColor; -webkit-mask: var(--figure) center / contain no-repeat; mask: var(--figure) center / contain no-repeat; transition: translate var(--t-quick) var(--ease-spring); } button.big:not(:disabled):hover::before, .btn.big:hover::before { translate: 0 -4px; } .block[data-c='lemon'] :is(button.big, .btn.big) { background: var(--tangerine); } /* text fields fill their row; selects size to their options (the lobby's .fields and .league-pick) */ input:not([type='checkbox'], [type='radio']), textarea { width: 100%; } input, select, textarea { font: inherit; padding: .8em 1em; border-radius: var(--r-sm); border: 0; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); transition: box-shadow var(--t-quick) var(--ease-out); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--lemon); } input::placeholder { color: var(--ink-2); } .dusk :is(input, select, textarea) { background: var(--cocoa-3); color: var(--cream); box-shadow: 0 0 0 2px var(--sand); } .hidden { display: none !important; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .dusk :focus-visible { outline-color: var(--lemon); } h1[tabindex='-1']:focus, h2[tabindex='-1']:focus { outline: none; } /* focus moved here for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Language switch (i18n.js mountLangSwitch into any [data-lang-switch]): EN | DE toggle buttons. It takes the text colour of where it sits (footer, header), so it works on cream and on dusk. */ .lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px currentColor; vertical-align: middle; } .lang-switch button { font: inherit; font-size: .82em; font-weight: 800; letter-spacing: .04em; line-height: 1; min-width: 40px; min-height: 30px; padding: .35em .75em; border-radius: var(--r-pill); background: transparent; color: inherit; box-shadow: none; translate: none; } .lang-switch button:hover:not([aria-pressed='true']) { translate: none; box-shadow: none; background: color-mix(in srgb, currentColor 14%, transparent); } .lang-switch button:active { translate: none; box-shadow: none; } .lang-switch button[aria-pressed='true'] { background: var(--lemon); color: var(--ink); } .legal-links .lang-switch { margin-left: .5em; } .muted { color: var(--muted); } .logo { font-weight: 800; letter-spacing: -.02em; } .logo span { color: var(--tangerine-ink, #b84a0c); } /* tangerine darkened for text: 4.9:1 on cream (plain tangerine is 2.2:1) */ .dusk .logo span { color: var(--lemon); } .error { color: var(--bad); min-height: 1.4em; } /* ---------- type helpers (§2.2) ---------- */ .eyebrow { font-size: var(--fs-tag); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--muted); } .display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; } .count { font-weight: 800; font-variant-numeric: tabular-nums; } svg.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.25em; flex: none; } /* Sticker headline: upright, 800, a solid offset shadow. Never italic, slanted or all caps. */ .sticker { font-weight: 800; color: var(--ink); line-height: 1.02; text-wrap: balance; text-shadow: 0 .06em 0 rgba(255, 255, 255, .55); } .block[data-c='tangerine'] .sticker, .block[data-c='cocoa'] .sticker, .dusk .sticker, .sticker.on-dark { color: var(--cream); text-shadow: 0 .07em 0 var(--ink); } .sticker.hero { font-size: var(--fs-hero); letter-spacing: -.035em; } .sticker.display { font-size: var(--fs-display); letter-spacing: -.03em; } /* ---------- layout and surfaces ---------- */ .stack { display: grid; gap: var(--gap, var(--sp-5)); align-content: start; } .card { background: var(--panel); color: var(--text); border-radius: var(--r-lg); box-shadow: var(--outline), var(--toy-2); padding: var(--sp-5); } :is(a, button).card { transition: translate var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out); } :is(a, button).card:hover { translate: 0 -3px; box-shadow: var(--outline), var(--toy-3); } /* Section divider: kept for pages not restyled yet; a hairline in ink. */ /* Section block (§3, §2.3): full-bleed colour with a wavy top edge cut out of the previous block. */ .block { --block: var(--lemon); position: relative; background: var(--block); color: var(--ink); padding-block: var(--sp-9); padding-inline: 16px; } .block[data-c='lemon'] { --block: var(--lemon); } .block[data-c='tangerine'] { --block: var(--tangerine); } .block[data-c='leaf'] { --block: var(--leaf); } .block[data-c='sky'] { --block: var(--sky); } .block[data-c='cocoa'] { --block: var(--cocoa); color: var(--cream); } .block::before { content: ''; position: absolute; left: 0; right: 0; top: -27px; height: 28px; pointer-events: none; background: var(--block); -webkit-mask: url(/art/wave.svg) left top / 120px 28px repeat-x; mask: url(/art/wave.svg) left top / 120px 28px repeat-x; } /* Choice tile (§3): card + diorama window or icon, title, 2 lines, a coloured tab on the top edge. Selected via aria-pressed / aria-checked / aria-selected = "true" or .is-selected. */ .tile { --tab: var(--lemon); position: relative; display: grid; gap: var(--sp-2); align-content: start; text-align: left; padding: var(--sp-4); border-radius: var(--r-lg); background: #fff; color: var(--ink); font-weight: 400; box-shadow: var(--outline), var(--toy-2); transition: translate var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out); } .tile::before { content: ''; position: absolute; left: var(--sp-5); top: -9px; width: 44px; height: 12px; border-radius: 6px 6px 0 0; background: var(--tab); box-shadow: 0 0 0 2.5px var(--ink); clip-path: inset(-4px -4px 2.5px -4px); } .tile[data-tab='sky'] { --tab: var(--sky); } .tile[data-tab='tangerine'] { --tab: var(--tangerine); } .tile[data-tab='leaf'] { --tab: var(--leaf); } .tile[data-tab='clay'] { --tab: var(--clay); } .tile:where(:hover:not(:disabled, [aria-disabled='true'])) { translate: 0 -3px; box-shadow: var(--outline), var(--toy-3); } .tile-title { font-size: var(--fs-h3); font-weight: 700; margin: 0; } .tile-text { font-size: var(--fs-small); color: var(--ink-2); margin: 0; } .tile-window { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--sky); box-shadow: inset 0 0 0 2px var(--ink); } .tile:is([aria-pressed='true'], [aria-checked='true'], [aria-selected='true'], .is-selected) { background: var(--lemon); translate: 0 3px; box-shadow: var(--outline), var(--toy-1); } .tile:is([aria-pressed='true'], [aria-checked='true'], [aria-selected='true'], .is-selected)::after { content: ''; position: absolute; right: -8px; top: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324170f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 0 0 2.5px var(--ink); rotate: 8deg; animation: gp-pop var(--t-base) var(--ease-spring) both; } @keyframes gp-pop { from { scale: 0; } } /* Puck token (§3): the 2D fallback figure. --c = pin colour, --size optional. */ .puck { --size: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); border-radius: 50%; background: var(--c, var(--lemon)); color: var(--ink); font: 800 calc(var(--size) * .36)/1 var(--font); letter-spacing: -.02em; box-shadow: 0 0 0 2.5px var(--ink), inset 0 -6px 0 rgba(0, 0, 0, .18); overflow: hidden; } .puck img { width: 100%; height: 100%; object-fit: cover; } /* Chip / segmented control (§3): clay track, lemon thumb with an ink outline. Works with a group of buttons (aria-pressed) or radio labels. */ .seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--clay); box-shadow: inset 0 0 0 2px var(--ink); } .seg > button, .seg > label > span { display: inline-block; padding: .45em 1em; border-radius: var(--r-pill); background: transparent; color: var(--ink); font-weight: 700; box-shadow: none; translate: none; transition: background-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out); } .seg > button[aria-pressed='true'], .seg > label > input:checked + span { background: var(--lemon); box-shadow: 0 0 0 2px var(--ink); } .seg > label { position: relative; } /* keeps the hidden radio inside its label (no off-screen overflow) */ .seg > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; } .dusk .seg { background: var(--cocoa-3); box-shadow: inset 0 0 0 2px var(--sand); } .dusk .seg > button, .dusk .seg > label > span { color: var(--cream); } .dusk .seg > button[aria-pressed='true'], .dusk .seg > label > input:checked + span { color: var(--ink); } /* Tag / sticker (§3): a small rotated pill with an outline; colour per meaning. */ .sticker-tag { --tag: var(--lemon); --rot: -2deg; display: inline-block; padding: .3em .75em; border-radius: var(--r-pill); background: var(--tag); color: var(--ink); font-size: var(--fs-tag); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 var(--ink); rotate: var(--rot); } .sticker-tag.pop { animation: gp-pop var(--t-base) var(--ease-spring) both; } .sticker-tag.good { --tag: var(--leaf); } .sticker-tag.bad { --tag: var(--stop-bright); } .sticker-tag.info { --tag: var(--sky); } .sticker-tag.player { --tag: var(--c); } /* Dialog (§3). :where() keeps it overridable by page CSS (game.css styles dialog.sheet too). */ :where(dialog.sheet) { border: 0; padding: var(--sp-5); border-radius: var(--r-xl); background: #fff; color: var(--ink); box-shadow: var(--outline), var(--toy-3); max-width: min(92vw, 520px); } :where(dialog.sheet)::backdrop { background: var(--veil); } :where(dialog.sheet[open]) { animation: gp-sheet-in var(--t-base) var(--ease-spring) both; } @keyframes gp-sheet-in { from { opacity: 0; scale: .94; } } /* ---------- 3D views (public/avatar, §4.6) ----------
posters / pucks
The stage adds a ; .is-live once its first frame is drawn. Give the view a size (aspect-ratio or height) so there is no layout shift. */ .stage-view { position: relative; overflow: hidden; isolation: isolate; contain: layout paint; } .stage-fallback { position: absolute; inset: 0; display: grid; place-items: center; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity var(--t-base) var(--ease-out); } .stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--t-base) var(--ease-out); pointer-events: none; } .stage-view.is-live > .stage-canvas { opacity: 1; } .stage-view.is-live:not(.show-poster) > .stage-fallback, .stage-view.is-live > .stage-fallback:not([data-poster]) { opacity: 0; } /* the governor's minimal step shows posters under the figures */ .stage-canvas[hidden] { display: none; } /* Depth behind the transparent canvas (docs/3d-lighting-research.md L5): a soft spotlight where the figures stand, the block colour darkening towards the rim, and a light vignette over the picture. Overlays only, so they work on any block colour the page gives the view; 0 GPU. */ .stage-view::before, .stage-view::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .stage-view::before { background: radial-gradient(120% 92% at 50% 40%, rgb(255 255 255 / .34) 0%, rgb(255 255 255 / .1) 34%, rgb(255 255 255 / 0) 56%, rgb(36 23 15 / .16) 100%); } .stage-view::after { background: radial-gradient(130% 110% at 50% 44%, rgb(36 23 15 / 0) 62%, rgb(36 23 15 / .14) 100%); } .stage-view.is-fallback::after { display: none; } /* A one-row strip that scrolls sideways with snap (§5.5 phone reveal):
round a .stage-view mounted with { row: true }. The stage adds .is-row, sets --n (figures) and appends a .stage-snap row of snap points; each figure gets one --cell of width. Without .is-row it is a plain wrapper. */ .stage-scroll { position: relative; flex: none; min-width: 0; --cell: 96px; } .stage-scroll.is-row { overflow: auto hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-lg); box-shadow: var(--outline), var(--toy-1); } .stage-scroll.is-row::-webkit-scrollbar { display: none; } .stage-scroll.is-row > :is(.stage-view, .stage-snap) { width: max(100%, calc(var(--n, 1) * var(--cell))); } .stage-scroll.is-row > .stage-view { border-radius: 0; box-shadow: none; } .stage-snap { display: none; } .stage-scroll.is-row > .stage-snap { position: absolute; inset: 0 auto 0 0; display: flex; pointer-events: none; } .stage-snap > i { flex: 1 1 0; scroll-snap-align: center; } /* ---------- pre-rendered backdrops (public/backdrop.js, §4.9) ---------- host > .bd-back (sky, far, mist, mid) · the host's own children (.bd-stage, e.g. a transparent 'lineup' .stage-view) · .bd-front (fore, front mist, particles). Parallax moves layers by transform only; the mist bands are a shared greyscale texture used as a luminance mask over the backdrop's mist colour, drifting in opposite directions (motion 'full' and 'mist'). */ .bd-host { position: relative; overflow: hidden; isolation: isolate; background: var(--bd-bg, #e9dcc4); } .bd-back, .bd-front { position: absolute; inset: 0; pointer-events: none; } .bd-back { z-index: 0; } .bd-host > .bd-stage { position: absolute; inset: 0; z-index: 1; background: transparent !important; box-shadow: none; border-radius: 0; } .bd-front { z-index: 2; } .bd-layer { position: absolute; inset: -24px; will-change: transform; } /* bleed: parallax never shows an edge */ .bd-layer > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; user-select: none; } .bd-soft .bd-far, .bd-soft .bd-mist { filter: blur(1.5px); } .bd-soft .bd-mid { filter: blur(0.8px); } .bd-mist { inset: -24px 0; overflow: hidden; } .bd-mist-band { position: absolute; left: 0; width: 200%; height: 26%; top: calc(var(--bd-mist-at, 42%) - 13%); background: var(--bd-mist, #fff6e4); opacity: var(--bd-mist-o, .4); mask: url(/art/backdrops/v1/mist-a.webp) 0 0 / 50% 100% repeat-x luminance; animation: bd-drift 110s linear infinite; } .bd-mist-b { top: calc(var(--bd-mist-at, 42%) - 8%); height: 20%; opacity: calc(var(--bd-mist-o, .4) * .7); mask-image: url(/art/backdrops/v1/mist-b.webp); animation-duration: 170s; animation-direction: reverse; } .bd-mist-front .bd-mist-band { top: auto; bottom: -6%; height: 24%; opacity: calc(var(--bd-mist-o, .4) * .35); animation-duration: 80s; } @keyframes bd-drift { to { transform: translateX(-50%); } } .bd-particles { position: absolute; inset: 0; width: 100%; height: 100%; } .bd-front::after { /* the vignette over the whole picture, live figures included */ content: ''; position: absolute; inset: 0; background: radial-gradient(125% 105% at 50% 46%, rgb(36 23 15 / 0) 58%, rgb(36 23 15 / .22) 100%); } .bd-host > .bd-stage::before, .bd-host > .bd-stage::after { display: none; } .bd-host > .bd-stage > .stage-fallback { place-items: end center; padding-bottom: 14%; } /* 2D pucks stand on the painted ground */ /* A 3D view that is its own backdrop host (stage.mount: every scene stands in a backdrop unless { backdrop: 'none' }): its canvas and fallback are the .bd-stage between the layers; the backdrop brings its own light and vignette, so the view's CSS spotlight is off. */ .stage-view.bd-host::before, .stage-view.bd-host::after { display: none; } .bd-host > .stage-fallback.bd-stage { place-items: end center; align-content: end; padding-bottom: 14%; } .bd-host[data-bd-motion="static"] .bd-mist-band { animation: none; } /* ---------- tilt (fx.js tilt()): CSS vars --rx --ry --mx --my, written on pointer move ---------- */ .tilt-item { position: relative; transition: transform var(--t-base) var(--ease-out); } .tilt-item.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: var(--t-instant); } .tilt-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 197, 61, 0.1), transparent 60%); opacity: 0; transition: opacity var(--t-base) var(--ease-out); } .tilt-item.is-tilting::after { opacity: 1; } /* ---------- split-flap (fx.js flap()) ---------- ; flap(el, 'ABCD') builds one .flap-cell per character. Size it with font-size. */ .flap { display: inline-flex; gap: 0.1em; vertical-align: middle; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1; } .flap-cell { --flap-bg: var(--cocoa); position: relative; display: inline-block; min-width: 0.95em; height: 1.3em; padding: 0 0.1em; line-height: 1.3em; text-align: center; color: var(--cream); background: var(--flap-bg); border-radius: var(--r-xs); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--line); perspective: 4em; } .flap-cell::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; z-index: 3; pointer-events: none; background: rgba(0, 0, 0, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); } .flap-ch { display: block; } .flap-cell > span:not(.flap-ch) { position: absolute; inset: 0; display: block; padding: inherit; border-radius: inherit; background: var(--flap-bg); backface-visibility: hidden; will-change: transform; } .flap-cell.flipping > .flap-ch, .flap-fold { clip-path: inset(0 0 50% 0); } .flap-bottom, .flap-unfold { clip-path: inset(50% 0 0 0); } .flap-fold, .flap-unfold { z-index: 2; } .flap.lit .flap-cell { color: var(--lemon); } /* ---------- stamp (fx.js stamp()): the landing animation (stamp-pending → stamp-in) ---------- */ .stamp-pending { opacity: 0; } .stamp-in { animation: gp-stamp-in 280ms var(--ease-spring) both; } .stamp-in::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--stamp) 35%, transparent); opacity: 0; animation: gp-stamp-ink 120ms linear 260ms both; } @keyframes gp-stamp-in { from { opacity: 0; transform: scale(1.35) rotate(calc(var(--rot) - 6deg)); } to { opacity: 1; transform: scale(1) rotate(var(--rot)); } } @keyframes gp-stamp-ink { 50% { opacity: 1; } } /* ---------- seat token ---------- */ @keyframes gp-land { from { opacity: 0; transform: translateY(-40px) scale(0.7); } } @keyframes gp-ring { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } } .avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--c, var(--ink-3)); color: var(--ink-0); font-weight: 800; box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 3px color-mix(in srgb, var(--c, var(--ink-4)) 50%, transparent); transition: box-shadow var(--t-quick) var(--ease-out); } /* ---------- maps and their markers (Google Maps, public/gmap.js) ---------- */ .gp-pin { display: block; width: 26px; height: 26px; background: var(--c); border: 3px solid var(--ink-0); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); filter: drop-shadow(0 0 6px var(--c)); } .gp-pin.drop { animation: gp-pin-drop 380ms var(--ease-spring) both; } @keyframes gp-pin-drop { 0% { transform: translateY(-28px) rotate(-45deg); opacity: 0; } 60% { opacity: 1; } 88% { transform: translateY(0) rotate(-45deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } 100% { transform: rotate(-45deg); } } /* Beacon: centred in its divIcon box whatever the icon size (inset 0 + margin auto). Text inside = a number. */ .gp-target { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--sodium); color: var(--sodium-ink); font: 800 0.7rem/1 var(--font); box-shadow: 0 0 0 2px var(--paper), 0 0 14px rgba(255, 197, 61, 0.6); } .gp-target:not(:empty) { width: 22px; height: 22px; } .gp-target::before, .gp-target::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sodium); pointer-events: none; opacity: 0; animation: gp-beacon 1.1s var(--ease-out) 2 both; } .gp-target::after { animation-delay: 0.35s; } @keyframes gp-beacon { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(2.4); } } .gp-dot { display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); } /* The map box (the warm style itself is gmap.js STYLE). A failed load or a rejected key: the reason in the middle. */ .gp-map { background: #a9d3df; font-family: var(--font); } .gp-map[data-error] { display: grid; place-items: center; } .gp-map[data-error]::after { content: attr(data-error); max-width: 80%; padding: .6em 1em; border-radius: var(--r-md); text-align: center; background: var(--cream); color: var(--ink); font: 700 .9rem/1.3 var(--font); box-shadow: var(--outline); } /* HTML markers: .gp-mk sits on the spot, .gp-icon is the marker box (size and anchor from gmap.js). */ .gp-mk { position: absolute; width: 0; height: 0; } .gp-mk:hover, .gp-mk.dragging { z-index: 2000 !important; } .gp-icon { position: absolute; left: 0; top: 0; } .gp-mk.drag .gp-icon { cursor: grab; touch-action: none; } .gp-mk.dragging .gp-icon { cursor: grabbing; } .gp-tip { position: absolute; left: 0; translate: -50% 0; display: none; white-space: nowrap; pointer-events: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font: 700 .8rem/1.2 var(--font); box-shadow: 0 0 0 2px var(--ink), 0 2px 0 rgba(36, 23, 15, .35); } .gp-tip.above { bottom: var(--off); } .gp-tip.below { top: var(--off); } .gp-mk:hover .gp-tip, .gp-tip.on { display: block; } /* our + and − (gmap.js), top left, in the game's look */ .gp-zoom { display: grid; margin: 10px; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--outline), var(--toy-1); } .gp-zoom button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; box-shadow: none; translate: none; background: var(--cream); color: var(--ink); font: 800 18px/30px var(--font); cursor: pointer; } .gp-zoom button + button { border-top: 1px solid var(--line-strong); } .gp-zoom button:hover, .gp-zoom button:focus-visible { background: var(--clay); } /* Low tier (fx.js perfTier()): no soft filters. */ body.lite .gp-pin { filter: none; } /* ---------- page enter (§5.1) ---------- */ /* The cross-document opt-in (@view-transition) is an inline