/* ========================================================================== Crash Galaxy — publisher showcase Corporate light system: neutral ground, one blue accent, flat surfaces. Game art carries the colour; the page chrome stays out of its way. ========================================================================== */ :root { color-scheme: light; /* Ground */ --paper: #ffffff; --paper-blur: rgba(255, 255, 255, 0.92); /* sticky masthead over content */ --paper-solid: rgba(255, 255, 255, 0.98); /* consent bar over content */ --surface: #f8fafc; --surface-2: #f1f5f9; --line: #e2e8f0; --line-2: #cbd5e1; /* Ink */ --ink: #0f172a; --ink-2: #334155; --muted: #64748b; /* The one brand colour */ --brand: #1d4ed8; --brand-dark: #1e3a8a; --brand-soft: #eff6ff; --on-brand: #ffffff; /* text on a brand-filled surface */ --link-underline: rgba(29, 78, 216, 0.35); /* Status semantics */ --live: #047857; --review: #b45309; /* The footer is dark on both themes — its ink does not flip with the page. */ --foot-bg: #0f172a; --foot-ink: #cbd5e1; --foot-ink-soft: #94a3b8; --foot-ink-strong: #ffffff; --foot-link: #e2e8f0; --foot-link-underline: rgba(226, 232, 240, 0.4); /* Per-game identity, re-declared on each article. Used in small doses only. */ --accent: var(--brand); --shell: min(1240px, 92vw); --radius: 8px; --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px -16px rgba(15, 23, 42, 0.18); --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.06), 0 24px 48px -28px rgba(15, 23, 42, 0.28); --f-display: "Inter", "Helvetica Neue", Arial, sans-serif; --f-body: "Inter", "Helvetica Neue", Arial, sans-serif; --f-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* --------------------------------------------------------------- dark mode With no stored preference the page follows the OS; assets/theme.js stamps data-theme on when the visitor picks a side, and that pin wins in both directions. The two blocks below carry the same palette because CSS has no way to share one — edit them together. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Ground */ --paper: #0b1220; --paper-blur: rgba(11, 18, 32, 0.92); --paper-solid: rgba(11, 18, 32, 0.97); --surface: #101a2e; --surface-2: #16223a; --line: #1e2b45; --line-2: #33415c; /* Ink */ --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; /* The brand blue lightens so it clears AA on the dark ground; text sitting on a brand fill flips to the dark ground colour for the same reason. */ --brand: #60a5fa; --brand-dark: #93c5fd; --brand-soft: rgba(96, 165, 250, 0.14); --on-brand: #0b1220; --link-underline: rgba(96, 165, 250, 0.45); /* Status semantics */ --live: #34d399; --review: #fbbf24; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.7); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -28px rgba(0, 0, 0, 0.8); } } :root[data-theme="dark"] { color-scheme: dark; /* Ground */ --paper: #0b1220; --paper-blur: rgba(11, 18, 32, 0.92); --paper-solid: rgba(11, 18, 32, 0.97); --surface: #101a2e; --surface-2: #16223a; --line: #1e2b45; --line-2: #33415c; /* Ink */ --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; /* The brand blue lightens so it clears AA on the dark ground; text sitting on a brand fill flips to the dark ground colour for the same reason. */ --brand: #60a5fa; --brand-dark: #93c5fd; --brand-soft: rgba(96, 165, 250, 0.14); --on-brand: #0b1220; --link-underline: rgba(96, 165, 250, 0.45); /* Status semantics */ --live: #34d399; --review: #fbbf24; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.7); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 48px -28px rgba(0, 0, 0, 0.8); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand); text-decoration-color: var(--link-underline); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--brand); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; margin: 0; } .shell { width: var(--shell); margin-inline: auto; } .eyebrow { font-family: var(--f-data); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; padding: 12px 18px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* Programmatic focus targets (skip-link landing, post-banner focus) get no ring. */ [tabindex="-1"]:focus { outline: none; } /* ------------------------------------------------------------------ brand */ /* Two flavours of one traced lockup: brand slate for light grounds, white for the dark footer. Vector, so it stays crisp at any size. */ .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { height: 26px; width: auto; } /* Two lockup files, one per ground: slate-and-blue on light, white on dark. The media query covers the pre-JS paint; the data-theme rules come after it so an explicit pick beats the OS in both directions. */ .brand__logo--dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo--light { display: none; } :root:not([data-theme="light"]) .brand__logo--dark { display: block; } } :root[data-theme="light"] .brand__logo--light { display: block; } :root[data-theme="light"] .brand__logo--dark { display: none; } :root[data-theme="dark"] .brand__logo--light { display: none; } :root[data-theme="dark"] .brand__logo--dark { display: block; } @media (max-width: 720px) { .brand img { height: 22px; } } /* --------------------------------------------------------------- masthead */ .masthead { position: sticky; top: 0; z-index: 40; background: var(--paper-blur); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .masthead__inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; gap: 28px; padding: 12px 0; } .masthead nav { margin-left: auto; display: flex; align-items: center; gap: 24px; } .masthead nav a { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); text-decoration: none; } .masthead nav a:hover { color: var(--brand); } /* The nav's own link colour is more specific than .cta's — restate it. */ .masthead nav a.cta { color: var(--on-brand); } .masthead nav a.cta:hover { color: var(--on-brand); } /* ------------------------------------------------------------ games menu */ /* A disclosure, not a menubar: the panel holds ordinary links so they keep native behaviour. assets/nav.js owns the open/closed state. */ .games { position: relative; display: inline-flex; } .games__button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; } .games__button:hover { color: var(--brand); } .games__chev { transition: transform 140ms ease; } .games__button[aria-expanded="true"] .games__chev { transform: rotate(180deg); } .games__panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 50; min-width: 208px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-lg); } .games__panel[hidden] { display: none; } .games__panel a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: 0.9rem; font-weight: 500; text-decoration: none; } .games__panel a:hover { background: var(--surface-2); color: var(--brand); } .games__panel a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); } .games__all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .games__all a { color: var(--muted); font-size: 0.84rem; } /* ----------------------------------------------------------- theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .theme-toggle:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); } .theme-toggle__icon { display: block; } /* Show the ground you would switch TO: a moon on light, a sun on dark. */ .theme-toggle__icon--sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; } :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; } } :root[data-theme="light"] .theme-toggle__icon--sun { display: none; } :root[data-theme="light"] .theme-toggle__icon--moon { display: block; } :root[data-theme="dark"] .theme-toggle__icon--sun { display: block; } :root[data-theme="dark"] .theme-toggle__icon--moon { display: none; } @media (max-width: 720px) { .masthead__inner { gap: 14px; padding: 10px 0; } .masthead nav { gap: 14px; } .masthead nav a.is-secondary { display: none; } /* The menu is how you reach the games on a phone, so it stays. */ .games__panel { left: auto; right: 0; transform: none; } } /* ------------------------------------------------------------------- cta */ .cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0; text-decoration: none; box-shadow: var(--shadow-sm); white-space: nowrap; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .cta--ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); } .cta--ghost:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .cta--sm { padding: 8px 14px; font-size: 0.84rem; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); } .hero__inner { position: relative; z-index: 1; width: var(--shell); margin-inline: auto; padding: 84px 0 68px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; } .hero__copy { display: grid; gap: 22px; justify-items: start; } /* The lineup itself is the hero image: a desktop plate with a phone in front. */ .hero__plates { position: relative; display: none; } .hero__plate { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--paper); } .hero__plate--desk { width: 100%; } .hero__plate--phone { position: absolute; right: -4%; bottom: -14%; width: 26%; border-radius: var(--radius); } @media (min-width: 1080px) { .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .hero__plates { display: block; } } .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); max-width: 18ch; letter-spacing: -0.03em; } .hero h1 em { font-style: normal; color: var(--brand); } .hero p.lede { max-width: 62ch; font-size: 1.08rem; color: var(--ink-2); margin: 0; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Studio numbers: four facts, mono, tabular. */ .studio-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: var(--shell); margin: 0 auto; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .studio-strip div { background: var(--paper); padding: 18px 22px; } .studio-strip dt { font-family: var(--f-data); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .studio-strip dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); } @media (max-width: 800px) { .studio-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero__inner { padding: 56px 0 44px; } } /* --------------------------------------------------------------- sections */ .section { padding: 72px 0; border-bottom: 1px solid var(--line); } .section--tight { padding: 44px 0; border-bottom: 0; } .section--muted { background: var(--surface); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .section__head h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); } .section__head p { margin: 8px 0 0; color: var(--muted); max-width: 58ch; } /* ------------------------------------------------------------ lineup grid */ /* Compact index cards: art, name, two figures, and an explicit jump to the game's own section further down the page. */ .lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* Auto-fit alone packs as many 220px columns as the shell holds — five at desktop width, which left the sixth game stranded on a row of its own once Piggy Farm landed. Pin three columns from the width where that starts happening so the lineup always reads as full rows; below it, auto-fit's two-then-one collapse is already balanced for an even count. */ @media (min-width: 900px) { .lineup { grid-template-columns: repeat(3, 1fr); } } .tile { --accent: var(--brand); position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color 140ms ease, box-shadow 140ms ease; } .tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); } .tile:hover .tile__go { color: var(--brand); } .tile__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); } .tile__art img { width: 100%; height: 100%; object-fit: cover; } /* The one place a game's own colour is allowed on the chrome. */ .tile__art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); } .tile__body { padding: 12px 14px 14px; display: grid; gap: 8px; } .tile__title { font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--ink); } .tile__meta { font-family: var(--f-data); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 12px; } .tile__meta b { color: var(--ink); font-weight: 500; } .tile__meta > span { white-space: nowrap; } .tile__go { font-size: 0.8rem; font-weight: 500; color: var(--muted); transition: color 140ms ease; } /* ------------------------------------------------------------ status pill */ .pill { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; background: var(--paper); font-family: var(--f-data); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--live { color: var(--live); } .pill--review { color: var(--review); } /* --------------------------------------------------------------- game bay */ .game { --accent: var(--brand); padding: 64px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 68px; position: relative; } .game:nth-of-type(even) { background: var(--surface); } .game:nth-of-type(even) .gamecard, .game:nth-of-type(even) .statgrid div, .game:nth-of-type(even) .pill { background: var(--paper); } /* ------------------------------------------------------------- game card */ /* Every game leads with the same small summary card — identity, status and the four figures a reader compares across titles — before any detail. */ .gamecard { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 14px 18px; margin-bottom: 26px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); } .gamecard__art { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--surface-2); } .gamecard__art img { width: 100%; height: 100%; object-fit: cover; } .gamecard__id { display: grid; gap: 4px; align-content: center; } .gamecard__name { font-size: 1.15rem; margin: 0; } .gamecard__tag { margin: 0; color: var(--muted); font-size: 0.88rem; } .gamecard__facts { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; margin: 0; } .gamecard__facts div { display: grid; gap: 1px; } .gamecard__facts dt { font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .gamecard__facts dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 0.98rem; font-variant-numeric: tabular-nums; color: var(--ink); } .gamecard__aside { display: grid; gap: 8px; justify-items: end; align-content: center; } @media (max-width: 1080px) { .gamecard { grid-template-columns: 96px minmax(0, 1fr) auto; } .gamecard__facts { grid-column: 1 / -1; } } @media (max-width: 720px) { .gamecard { grid-template-columns: 88px minmax(0, 1fr); } .gamecard__aside { grid-column: 1 / -1; justify-items: start; } } @media (max-width: 560px) { .gamecard { grid-template-columns: minmax(0, 1fr); } .gamecard__art { max-width: 200px; } } .game__top { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; margin-bottom: 22px; } .game__tag { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink); letter-spacing: -0.02em; margin: 12px 0 0; } .game__blurb { color: var(--ink-2); max-width: 68ch; margin: 10px 0 0; } .game__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; } @media (max-width: 940px) { .game__grid { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- gallery */ .shots { display: grid; gap: 12px; align-content: start; } @media (min-width: 941px) { /* Feature lists run longer than the plate; let it track the reader instead of leaving a hole under the screenshot. */ .shots { position: sticky; top: 86px; } } .shots__stage { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); } .shots__stage img { width: 100%; height: auto; } .shots__stage img[hidden] { display: none; } /* A portrait phone capture is 720x1561. At the full column width that renders more than twice as tall as the 1920x1200 desktop plate beside it, which reads as "the mobile build is enormous" rather than "here is the mobile build". Half width, centred on the stage, puts it at roughly the size a phone actually is next to a monitor. */ .shots__stage:has(img[data-orient="portrait"]:not([hidden])) { display: flex; justify-content: center; background: var(--surface-2); } .shots__stage img[data-orient="portrait"] { width: 50%; } @media (max-width: 720px) { /* Stacked on a phone, half of a narrow column is too small to read the HUD; the desktop comparison the 50% exists to make is gone at this width anyway. */ .shots__stage img[data-orient="portrait"] { width: 66%; } } .shots__tabs { display: flex; gap: 8px; flex-wrap: wrap; } .shots__tabs button { font-family: var(--f-body); font-size: 0.82rem; font-weight: 500; padding: 7px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; } .shots__tabs button:hover { color: var(--ink); border-color: var(--line-2); } /* Selection is not signalled by hue alone: the chosen chip is filled and bolder. */ .shots__tabs button[aria-pressed="true"] { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-soft); font-weight: 600; } .shots__caption { font-family: var(--f-data); font-size: 0.72rem; color: var(--muted); margin: 0; } /* ------------------------------------------------------------- stat block */ /* An odd number of figures used to leave a bare cell in the bottom-right, which reads as a missing stat rather than as the end of the list. The last one spans instead. */ .statgrid div:last-child:nth-child(odd) { grid-column: 1 / -1; } .statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 18px; } .statgrid div { background: var(--paper); padding: 13px 15px; } .statgrid dt { font-family: var(--f-data); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .statgrid dd { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); } .statgrid dd small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 0.76rem; color: var(--muted); letter-spacing: 0; } .features { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .features li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.94rem; } .features li::before { content: ""; position: absolute; left: 2px; top: 0.58em; width: 8px; height: 8px; border: 1.5px solid var(--brand); border-radius: 2px; } .game__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; } /* -------------------------------------------------------- math dossier */ details.dossier { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; } details.dossier > summary { cursor: pointer; padding: 14px 18px; font-family: var(--f-body); font-size: 0.88rem; font-weight: 500; color: var(--ink-2); list-style: none; display: flex; justify-content: space-between; gap: 16px; } details.dossier > summary::-webkit-details-marker { display: none; } details.dossier > summary::after { content: "+"; color: var(--brand); font-size: 1rem; line-height: 1.4; } details.dossier[open] > summary::after { content: "\2212"; } details.dossier > summary:hover { color: var(--ink); } /* details.dossier clips at its padding box, so an outset ring would be invisible. */ details.dossier > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; } .dossier__body { padding: 0 18px 18px; overflow-x: auto; } .dossier__body:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } table.math { width: 100%; border-collapse: collapse; font-family: var(--f-data); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; } table.math caption { text-align: left; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 0 8px; } table.math th, table.math td { padding: 8px 14px 8px 0; text-align: left; border-bottom: 1px solid var(--line); } table.math thead th { color: var(--muted); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; } table.math td { color: var(--ink-2); } table.math tbody th { color: var(--ink); font-weight: 500; } /* ------------------------------------------------------------ studio band */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .pillar { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--paper); box-shadow: var(--shadow-sm); } .pillar h3 { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); } .pillar p { margin: 0; color: var(--ink-2); font-size: 0.92rem; } /* --------------------------------------------------------------- play band */ .playband { border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; background: var(--brand-soft); display: grid; gap: 16px; justify-items: start; } .playband h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); } .playband p { margin: 0; color: var(--ink-2); max-width: 60ch; } .playband__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* The ghost CTA sits on --brand-soft here, not on the page ground. */ .playband .cta--ghost { background: var(--paper); } /* ------------------------------------------------------------------ foot */ /* The one dark surface on the site: it closes the page and carries the compliance small print without competing with the game art above. */ .foot { background: var(--foot-bg); color: var(--foot-ink); padding: 46px 0 56px; font-size: 0.86rem; } .foot__grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; } .foot a { color: var(--foot-link); text-decoration-color: var(--foot-link-underline); } .foot a:hover { color: var(--foot-ink-strong); text-decoration-color: var(--foot-ink-strong); } .foot strong { color: var(--foot-ink-strong); font-weight: 600; } .foot ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .foot .fine { max-width: 72ch; margin-top: 18px; font-size: 0.78rem; line-height: 1.65; color: var(--foot-ink-soft); } .foot .fine strong { color: var(--foot-link); } .foot :focus-visible { outline-color: var(--foot-ink-strong); } /* Disclosure sits with the button it describes, not only in the footer. */ .disclosure { margin: 0; max-width: 56ch; font-size: 0.76rem; line-height: 1.55; color: var(--muted); } /* ------------------------------------------------------------ prose pages */ .doc { padding: 56px 0 48px; } .doc__head { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; } .doc__head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 12px; } .doc__head p { margin: 0; color: var(--muted); } /* Material-change notice at the head of a policy. Called out with the brand rule rather than a hue, so it reads the same to anyone. */ .doc__change { margin: 16px 0 0 !important; max-width: 68ch; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: 0 6px 6px 0; color: var(--ink-2) !important; font-size: 0.94rem; line-height: 1.55; } .doc__body { max-width: 68ch; display: grid; gap: 28px; } .doc__body h2 { font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .doc__body h3 { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 8px; } .doc__body p { margin: 0 0 12px; color: var(--ink-2); } .doc__body p:last-child { margin-bottom: 0; } .doc__body ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 8px; } .doc__body li::marker { color: var(--brand); } .doc__body code { font-family: var(--f-data); font-size: 0.86em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } .doc__note { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--surface); } /* Analytics switch on the privacy page — a real control, not a description. */ .optout { display: grid; gap: 12px; justify-items: start; } .optout__state { font-family: var(--f-data); font-size: 0.78rem; color: var(--muted); margin: 0; } .optout__state b { color: var(--ink); font-weight: 500; } button.cta { cursor: pointer; font: inherit; font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; } /* [hidden] must win over component display rules (e.g. .cta's inline-flex). */ [hidden] { display: none !important; } /* ------------------------------------------------------------ consent bar */ .consent { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; width: min(720px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper-solid); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); } .consent__text { margin: 0; flex: 1 1 320px; font-size: 0.88rem; color: var(--ink-2); } .consent__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ------------------------------------------------------- game page chrome */ /* Breadcrumb above the game, and the walk to the next one below it. Both are page-only furniture; the home page has neither. */ .crumbs { padding: 20px 0 0; font-size: 0.84rem; color: var(--muted); } .crumbs .shell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .crumbs a { color: var(--muted); text-decoration-color: rgba(100, 116, 139, 0.35); } .crumbs a:hover { color: var(--brand); } .crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; } .game--page { padding-top: 18px; } .gamenav { padding: 8px 0 56px; } .gamenav .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); } .gamenav__link { display: grid; gap: 2px; font-family: var(--f-display); font-weight: 600; color: var(--ink); text-decoration: none; } .gamenav__link span { font-family: var(--f-data); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .gamenav__link:hover { color: var(--brand); } .gamenav__link--next { text-align: right; } .gamenav__all { font-size: 0.88rem; color: var(--muted); } .gamenav__all:hover { color: var(--brand); } @media (max-width: 560px) { .gamenav .shell { justify-content: space-between; } .gamenav__all { order: 3; width: 100%; text-align: center; } } /* ====================================================== phone ergonomics === Audited by tools/audit-mobile.mjs at 375, 390 and 430px. Two rules, applied only where a finger is the pointer: - every control a thumb has to hit is at least 44px in both directions, the size below which mis-taps stop being the user's fault - no text under 12px, which is where small print stops being readable on a phone held at arm's length Both are deliberately scoped to coarse pointers and narrow viewports: on a desktop with a mouse the tighter chrome is correct, and growing it there would only cost information density. ========================================================================== */ @media (max-width: 720px) { /* --- tap targets --- */ .masthead nav a, .games__button, .gamenav__link, .gamenav__all { display: inline-flex; align-items: center; min-height: 44px; } .brand { display: inline-flex; align-items: center; min-height: 44px; } .theme-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* The small CTA is 40px by design on desktop, where it sits beside body copy and a cursor. On a phone it is the primary action of the card. */ .cta--sm { min-height: 44px; } .foot ul a { display: inline-flex; align-items: center; min-height: 44px; } /* --- readable small print --- */ /* These all sit at 0.70-0.72rem, which is 11.2-11.5px. The floor is 12px. */ .eyebrow, .shots__caption, .statgrid dt, .gamecard__facts dt, .gamenav__link span { font-size: 0.75rem; } .statgrid dd small, .fine, .crumbs { font-size: 0.78rem; } /* The dossier tables and the status pills carry the smallest type on the site — 10.2px on the pill, 10.6px in a table head. Both are read, not skimmed, so both come up to the floor. */ .pill { font-size: 0.75rem; } /* These need the same shape as the desktop rules they override — `table.math thead th` is more specific than `.math th`, so the short selector silently lost. */ table.math thead th, table.math tbody th, table.math td { font-size: 0.78rem; } table.math caption { font-size: 0.78rem; } /* A inside a cell takes 0.8em OF the cell, landing back under the floor the cell rule just lifted it over. */ table.math small { font-size: inherit; } .studio-strip dt { font-size: 0.75rem; } .tile__meta { font-size: 0.78rem; } /* Chip rows: the screenshot tabs and anything else built as a small button need a thumb-sized hit box, not a mouse-sized one. */ .shots__tabs button { min-height: 44px; } } /* ========================================================================== Stake site picker One button and one panel in place of four near-identical play buttons. The panel names each site by REGION, because "which country are you in" is a question a visitor can answer and "which of our four licences applies to you" is not. Built by assets/stake-picker.js; with JS off the four links are simply there, unstyled by any of this. ========================================================================== */ .stakepick { position: relative; display: inline-block; } .stakepick__button { display: inline-flex; align-items: center; gap: 8px; } .stakepick__chev { font-size: 0.7em; line-height: 1; opacity: 0.75; } .stakepick__panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: min(320px, 86vw); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: left; } .stakepick__panel[hidden] { display: none; } /* Set by stake-picker.js when a left-anchored panel would run off the right of the window, which is the normal case for the picker in a right-aligned column. */ .stakepick__panel--right { left: auto; right: 0; } /* Opens above the button instead of below it. Set by stake-picker.js when the panel would fall outside whatever is clipping it — inside the out-of-credit overlay that is the stage, which hides its overflow. */ .stakepick__panel--up { top: auto; bottom: calc(100% + 8px); } /* Near the right edge of a narrow screen a left-anchored panel runs off it. */ @media (max-width: 560px) { .stakepick { position: static; } .stakepick__panel { left: 0; right: 0; min-width: 0; } } .stakepick__heading { margin: 0 0 8px; font-family: var(--f-data); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .stakepick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .stakepick__site { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 9px 10px; min-height: 44px; /* thumb-sized, same floor as the rest */ border-radius: var(--radius-sm); border: 1px solid transparent; text-decoration: none; color: var(--ink); align-content: center; } .stakepick__site:hover, .stakepick__site:focus-visible { border-color: var(--line-2); background: var(--paper); } .stakepick__name { font-weight: 600; font-size: 0.9rem; } .stakepick__region { font-family: var(--f-data); font-size: 0.7rem; color: var(--brand-dark); text-align: right; align-self: center; } .stakepick__note { grid-column: 1 / -1; font-size: 0.74rem; line-height: 1.4; color: var(--muted); } .stakepick__fine { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); font-size: 0.7rem; line-height: 1.45; color: var(--muted); } /* A blocked link never reaches the panel with an href; if one ever does, it must not look pressable. */ .stakepick__site[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* On the out-of-credit panel the surface behind this is near-black. */ .sandbox__spent .stakepick__panel { background: #0d1220; border-color: rgba(255, 255, 255, 0.18); } .sandbox__spent .stakepick__site { color: #fff; } .sandbox__spent .stakepick__site:hover, .sandbox__spent .stakepick__site:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); } .sandbox__spent .stakepick__region { color: #9fc7ff; } .sandbox__spent .stakepick__note, .sandbox__spent .stakepick__heading, .sandbox__spent .stakepick__fine { color: rgba(255, 255, 255, 0.66); } .sandbox__spent .stakepick__fine { border-top-color: rgba(255, 255, 255, 0.18); } /* The phone small-print floor, for the picker. It lives here rather than in the phone-ergonomics block above because the picker's own rules are declared after that block; at equal specificity the later declaration wins, so an override written earlier in the file did nothing at all. See tools/audit-mobile.mjs, which catches exactly this. */ @media (max-width: 720px) { .stakepick__region { font-size: 0.78rem; } .stakepick__note, .stakepick__fine, .stakepick__heading { font-size: 0.79rem; } .stakepick__chev { font-size: 0.8rem; } }