/* ============================================================ base.css — reset, typography, layout primitives, prose ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Two faint pools of warm light so the near-black never reads as flat. Fixed + non-painting so it costs nothing on scroll. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 78% -8%, rgba(217,180,74,.10), transparent 62%), radial-gradient(760px 500px at 4% 12%, rgba(110,168,254,.06), transparent 60%); } /* `clip` contains the hero bleed without turning into a scroll container, which would break the sticky navbar. */ @supports (overflow-x: clip) { body { overflow-x: clip; } } img, picture, svg, video { max-width: 100%; display: block; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; width: 100%; } /* ── Headings ── Sora is a variable-weight face, so headings carry real weight instead of relying on a single-weight display font. */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.028em; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: -0.024em; } h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; font-weight: 700; } h4 { font-size: var(--t-lg); line-height: var(--lh-snug); letter-spacing: -0.012em; font-weight: 700; } /* The accent word inside a heading is struck in gold leaf */ h1 span, h2 span, h3 span { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } strong, b { font-weight: 700; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-style: solid; color: var(--gold-hi); } /* ── Focus ── */ :focus { outline: none; } :focus-visible { outline: var(--bw-thick) solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); } ::selection { background: var(--accent); color: var(--accent-on); } /* Slim dark scrollbars to match the shell */ * { scrollbar-width: thin; scrollbar-color: var(--slate-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--slate-3); border-radius: var(--r-pill); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--slate-2); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-progress); background: var(--accent); color: var(--accent-on); padding: var(--s-3) var(--s-5); font-weight: 700; border-radius: var(--r-1); } .skip-link:focus-visible { left: var(--s-4); top: var(--s-4); } /* ── Layout ── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); } /* Alternating page bands + the seam that separates them */ .band { padding-block: var(--band); background: var(--bg); } .band-alt { padding-block: var(--band); background: var(--bg-alt); } .band-tight { padding-block: clamp(28px, 4vw, 52px); } /* A single hairline that fades out at both ends */ .rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent); opacity: .9; } /* ── Section headings ── */ .section-title { letter-spacing: -0.024em; margin-bottom: var(--s-3); } .section-sub { color: var(--fg-soft); font-size: var(--t-md); max-width: 62ch; margin-bottom: var(--s-6); } .section-title + .section-sub { margin-top: calc(var(--s-3) * -1 + var(--s-4)); } .u-center .section-sub, .center-head .section-sub { margin-inline: auto; } .center-head { text-align: center; } /* Gold filament above section titles */ .section-title::before { content: ""; display: block; width: 52px; height: 3px; border-radius: var(--r-pill); background: var(--grad-gold); box-shadow: 0 0 18px -2px rgba(217,180,74,.65); margin-bottom: var(--s-4); } .center-head .section-title::before { margin-inline: auto; } /* ── Numeric chips: tabular monospace ── */ .num, .stat-value, .fstrip-val, .timer-num, .rtp-value, .games-stat-val, .sm-stat-num, .cat-count, .hl-num, .em-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.03em; } /* ── Prose / long-form ── */ .prose { max-width: var(--measure); } .prose > * + * { margin-top: var(--s-4); } .prose h2 { margin-top: var(--s-7); } .prose h3 { margin-top: var(--s-6); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { color: var(--fg-soft); } .prose strong { color: var(--fg); } .prose ul, .prose ol { padding-left: 1.15em; color: var(--fg-soft); } .prose li + li { margin-top: var(--s-2); } .prose li::marker { color: var(--accent); font-weight: 700; } .prose a { font-weight: 600; } /* ── Utilities (these replace every former inline style) ── Marked !important so a utility always wins over the component rule it is there to override (base.css loads before components.css). ── */ .u-center { text-align: center !important; } .u-row { display: flex !important; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .u-row-center { justify-content: center !important; } .u-row-start { justify-content: flex-start !important; } .u-row-lg { gap: var(--s-4); } .u-static { position: static !important; } .u-m0 { margin: 0 !important; } .u-mt-2 { margin-top: var(--s-2) !important; } .u-mt-3 { margin-top: var(--s-3) !important; } .u-mt-4 { margin-top: var(--s-4) !important; } .u-mt-5 { margin-top: var(--s-5) !important; } .u-mt-6 { margin-top: var(--s-6) !important; } .u-mt-7 { margin-top: var(--s-7) !important; } .u-mb-2 { margin-bottom: var(--s-2) !important; } .u-mb-4 { margin-bottom: var(--s-4) !important; } .u-mb-5 { margin-bottom: var(--s-5) !important; } .u-mb-6 { margin-bottom: var(--s-6) !important; } .u-note { font-size: var(--t-sm); color: var(--fg-soft); } .u-money { color: var(--money); } .u-strong-link { color: var(--accent); font-weight: 700; } .u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .u-hide { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }