/* ========================================================================== KAILASH365 — DESIGN SYSTEM · kailash.css -------------------------------------------------------------------------- The shared foundation for every Kailash365 screen: tokens, base rules, components, utilities. Landing-page-specific composition lives at the bottom under "PAGE: LANDING" and may be split out later. Brand: Mount Kailash / Mount Meru — the axis mundi. Ceremonial, sacred, expensive, calm. Obsidian grounds, antique champagne gold, snow text. Ruby and lapis appear rarely, as the mountain's sacred faces do. CONTRAST (WCAG 2.1, computed against --k-void #0A0908): --k-snow #F4EFE3 → 17.3 : 1 (AAA, body text) --k-gold #3B41C9 → 8.2 : 1 (AAA normal text — safe for labels/odds) --k-stone #A99C82 → 7.3 : 1 (AA/AAA, secondary text) --k-void on --k-gold (CTA text on gold button) → 7.7 : 1 (AAA) Against --k-basalt #14110D: snow 15.5:1 · gold 7.75:1 · stone 6.9:1 Ruby/lapis are never used as text colors on dark grounds — accents only. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ /* ========================================================================== KAILASH365 — REDESIGN TOKEN SYSTEM · redesign-tokens.css -------------------------------------------------------------------------- Identity: "HIGH-ALTITUDE DAYLIGHT". Kailash is the cold, clear, light exchange terminal — the deliberate opposite of wynbook's dark gold/mint room and of the rejected obsidian/antique-gold ceremony. The system has three layers: · the FIELD — cold snow/firn surfaces where the odds data lives · the CHROME — deep indigo "ink" structural bands (app bar, competition headers, slip head, place-bet bar): the rock above the snowline · the ACCENT — gentian #3B41C9, the blue-violet of the Himalayan gentian flower. The ONLY brand color. Never gold, never mint. The Betfair back/lay pills (#74ACE6 / #E48AB0) are a FIXED cross-operator convention and are exempt from theming. Everything around them is ours; the pills themselves never restyle. CONTRAST (WCAG 2.1, computed): --kx-text #1A2233 on --kx-snow #FFFFFF → 15.9:1 (AAA body) --kx-text #1A2233 on --kx-firn #EEF1F6 → 14.1:1 (AAA body) --kx-slate #5A6478 on snow → 6.0:1 · on firn → 5.3:1 (AA small text) --kx-gentian #3B41C9 on snow → 7.5:1 · on firn → 6.7:1 (AAA) snow text on --kx-ink #141B2D → 15.9:1 (AAA) --bf-ink #16233A on back #74ACE6 → 6.6:1 · on lay #E48AB0 → 6.4:1 (AA+) --bf-ink on depth tints → 9.1–12.4:1 (AAA) white on --kx-gentian → 7.5:1 · white on --kx-live #D8323F → 4.7:1 --kx-mist (3.0:1) is decorative/disabled only — never running text. ========================================================================== */ :root { color-scheme: light; /* Kailash is light by identity — see REDESIGN-NOTES */ /* ------------------------------------------------------------------ 1 · COLOR — THE FIELD (snow surfaces) ------------------------------------------------------------------ */ --kx-firn: #EEF1F6; /* page ground — cold compacted snow, blue cast */ --kx-snow: #FFFFFF; /* card / panel / coupon surface */ --kx-drift: #F6F8FB; /* alt-row, hover wash, inset headers */ --kx-ice: #E3E9F1; /* input wells, empty cells, skeletons */ --kx-line: #DCE3EC; /* hairlines on snow */ --kx-line-2: #C9D3E0; /* strong hairlines, control borders */ /* ------------------------------------------------------------------ 2 · COLOR — THE CHROME (ink bands: rock above the snowline) ------------------------------------------------------------------ */ --kx-ink: #141B2D; /* app bar, comp headers, slip head, CTA band */ --kx-ink-2: #1D2740; /* raised / hover ink */ --kx-ink-3: #29344F; /* pressed ink, chips on ink */ --kx-ink-line: rgba(255, 255, 255, 0.10); /* hairlines on ink */ --kx-on-ink: #F4F7FB; /* primary text on ink */ --kx-on-ink-2: #97A1B8; /* secondary text on ink (5.6:1) */ /* ------------------------------------------------------------------ 3 · COLOR — TEXT ON THE FIELD ------------------------------------------------------------------ */ --kx-text: #1A2233; /* primary — indigo ink, not black */ --kx-slate: #5A6478; /* secondary — times, meta, labels */ --kx-mist: #8B94A8; /* tertiary/disabled — decorative only */ /* ------------------------------------------------------------------ 4 · COLOR — BRAND ACCENT (gentian, used sparingly) ------------------------------------------------------------------ */ --kx-gentian: #3B41C9; /* links, active states, primary CTA */ --kx-gentian-deep: #2A2F9E; /* pressed / text on tint */ --kx-gentian-bright: #545BE8; /* hover, focus ring */ --kx-gentian-tint: #ECEEFB; /* selected wash, active chip ground */ --kx-gentian-ice: #A9AEF8; /* accent ON INK chrome (wordmark "365", active tab underline, slip count) — gentian is too dark to sit on ink */ --kx-gentian-14: rgba(59, 65, 201, 0.14); --kx-gentian-28: rgba(59, 65, 201, 0.28); /* ------------------------------------------------------------------ 5 · COLOR — SIGNALS ------------------------------------------------------------------ */ --kx-live: #D8323F; /* live dot, live time, in-play chip (4.7:1) */ --kx-live-tint: #FBEBEC; --kx-rise: #177A4B; /* odds shortened flash (≈5:1 on snow) */ --kx-rise-tint: #D9F0E4; --kx-fall: #C43843; /* odds drifted flash */ --kx-fall-tint: #FADEE0; --kx-suspend: #9AA4B6; /* suspended price text */ --kx-suspend-bg: #EDF0F5; /* suspended cell ground */ --kx-suspend-veil: rgba(238, 241, 246, 0.66); /* row veil */ /* ------------------------------------------------------------------ 6 · COLOR — BETFAIR PILLS (FIXED · shared across all operators) Do NOT theme these. Depth tints follow the Betfair ladder convention: best price fully saturated, 2nd/3rd prices progressively lighter. ------------------------------------------------------------------ */ --bf-back: #74ACE6; /* back / yes — best price (MANDATED) */ --bf-back-hov: #5D9CDD; --bf-back-2: #A9CBF0; /* 2nd back depth */ --bf-back-3: #D6E6F8; /* 3rd back depth */ --bf-back-press: #4B8FD6; --bf-lay: #E48AB0; /* lay / no — best price (MANDATED) */ --bf-lay-hov: #DA71A0; --bf-lay-2: #F0B4CC; /* 2nd lay depth */ --bf-lay-3: #F8DCE8; /* 3rd lay depth */ --bf-lay-press: #D05C92; --bf-ink: #16233A; /* price text on any pill (6.4:1 minimum) */ --bf-ink-soft: rgba(22, 35, 58, 0.64); /* size / depth figures on pills */ /* ------------------------------------------------------------------ 7 · TYPE — IBM Plex Sans: an engineered, ledger-grade sans with true tabular figures. Condensed sibling for caps labels and comp headers. Weights: 400 body · 500 emphasis · 600 data/odds · 700 reserved for the wordmark and price emphasis only. No serif anywhere. ------------------------------------------------------------------ */ --kx-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --kx-cond: "IBM Plex Sans Condensed", "Arial Narrow", var(--kx-sans); /* type scale — dense data first */ --kx-fs-title: 1.25rem; /* 20px — page / event title */ --kx-fs-head: 1.0625rem; /* 17px — section heads */ --kx-fs-body: 0.875rem; /* 14px — prose, forms */ --kx-fs-data: 0.8125rem; /* 13px — odds prices, runner names */ --kx-fs-sub: 0.75rem; /* 12px — meta rows, nav items */ --kx-fs-micro: 0.6875rem; /* 11px — column labels, eyebrows */ --kx-fs-nano: 0.625rem; /* 10px — pill size figures, cell side-labels */ --kx-track-caps: 0.08em; /* caps always tracked; lowercase never */ --kx-track-wide: 0.14em; /* wordmark, eyebrow */ --kx-tnum: "tnum" 1, "lnum" 1; /* every price/figure sets this */ /* ------------------------------------------------------------------ 8 · RHYTHM & GEOMETRY ------------------------------------------------------------------ */ --kx-sp-1: 0.25rem; --kx-sp-2: 0.5rem; --kx-sp-3: 0.75rem; --kx-sp-4: 1rem; --kx-sp-5: 1.5rem; --kx-sp-6: 2rem; --kx-r-cell: 4px; /* odds pills — tight, functional */ --kx-r-card: 8px; /* panels, coupon groups, slip */ --kx-r-chip: 999px; /* filter chips, balance chip */ --kx-appbar-h: 52px; --kx-filter-h: 42px; --kx-cell-h: 38px; /* odds pill height */ --kx-cw: 62px; /* odds pill width, desktop */ --kx-gap: 3px; /* gap inside odds grids */ --kx-rail-w: 208px; /* left sports rail */ --kx-slip-w: 336px; /* betslip rail */ --kx-crest: 24px; /* coupon crest size */ --kx-crest-lg: 44px; /* event-header crest size */ /* ------------------------------------------------------------------ 9 · ELEVATION — light theme: cold, tight shadows, never glows ------------------------------------------------------------------ */ --kx-e1: 0 1px 2px rgba(20, 27, 45, 0.06), 0 0 0 1px var(--kx-line); --kx-e2: 0 2px 8px rgba(20, 27, 45, 0.10), 0 0 0 1px var(--kx-line); --kx-e3: 0 8px 24px rgba(20, 27, 45, 0.16); --kx-e-ink: 0 1px 0 rgba(255, 255, 255, 0.06) inset; /* ------------------------------------------------------------------ 10 · MOTION — quick and factual; price flashes are the only drama ------------------------------------------------------------------ */ --kx-dur: 0.14s; --kx-dur-flash: 0.9s; --kx-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* Layers */ --kx-z-nav: 100; --kx-z-slip: 110; --kx-z-veil: 5; } /* -------------------------------------------------------------------------- THEME NOTE — Kailash ships light-only by identity. If a night variant is ever commissioned, remap ONLY sections 1–3 and 9 under @media (prefers-color-scheme: dark); pills (6), signals (5) and geometry are invariant. Do not ship a dark remap without a full contrast pass. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- COMPAT REMAP — legacy token names still referenced by kx-app.css, kxa-account.css and kc-casino.css, pointed at the new system so the reskin is mechanical. Delete each alias as files migrate to kx- names. -------------------------------------------------------------------------- */ :root { /* old kailash.css grounds/metal/text → new field & accent */ --k-void: var(--kx-firn); --k-void-85: rgba(238, 241, 246, 0.85); --k-basalt: var(--kx-snow); --k-basalt-hi: var(--kx-drift); --k-gold: var(--kx-gentian); /* brand accent role */ --k-gold-high: var(--kx-gentian-bright); --k-gold-deep: var(--kx-gentian-deep); --k-gold-06: var(--kx-drift); --k-gold-12: var(--kx-gentian-tint); --k-gold-25: var(--kx-gentian-14); --k-gold-45: var(--kx-gentian-28); --k-snow: var(--kx-text); /* "primary text" role flips */ --k-stone: var(--kx-slate); --k-stone-dim: var(--kx-mist); --k-ruby: var(--kx-live); --k-ruby-hi: var(--kx-live); --k-lapis: var(--bf-back); --k-lapis-hi: var(--bf-back); --k-crystal: var(--kx-ice); --k-serif: var(--kx-sans); /* serif is retired entirely */ --k-sans: var(--kx-sans); /* old kx-app.css surfaces & odds grounds → pills and field */ --kx-panel: var(--kx-snow); --kx-panel-2: var(--kx-drift); --kx-inset: var(--kx-firn); --kx-line-strong: var(--kx-line-2); --kx-back: var(--bf-back); --kx-back-best: var(--bf-back); --kx-back-hov: var(--bf-back-hov); --kx-lay: var(--bf-lay); --kx-lay-best: var(--bf-lay); --kx-lay-hov: var(--bf-lay-hov); --kx-rise-bg: var(--kx-rise-tint); --kx-fall-bg: var(--kx-fall-tint); } /* Legacy structural scale retained for the no-build landing/app styles. */ :root { --k-fs-hero: clamp(1.9rem, 0.4rem + 7.2vw, 6rem); --k-fs-1: clamp(2.125rem, 1.3rem + 3.4vw, 3.5rem); --k-fs-2: clamp(1.625rem, 1.2rem + 1.9vw, 2.375rem); --k-fs-3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --k-fs-body: 1.0625rem; --k-fs-small: var(--kx-fs-body); --k-fs-micro: var(--kx-fs-sub); --k-track-caps: var(--kx-track-caps); --k-track-wide: var(--kx-track-wide); --k-sp-1: var(--kx-sp-1); --k-sp-2: var(--kx-sp-2); --k-sp-3: var(--kx-sp-3); --k-sp-4: var(--kx-sp-4); --k-sp-5: var(--kx-sp-5); --k-sp-6: var(--kx-sp-6); --k-sp-7: 3rem; --k-sect: clamp(5.5rem, 3rem + 9vw, 9.5rem); --k-radius: var(--kx-r-cell); --k-arch: 999px 999px var(--kx-r-cell) var(--kx-r-cell); --k-hairline: 1px; --k-container: 72rem; --k-prose: 34rem; --k-ease: var(--kx-ease); --k-dur: var(--kx-dur); --k-dur-slow: .7s; --k-z-nav: var(--kx-z-nav); --k-z-menu: 130; } /* -------------------------------------------------------------------------- 2 · BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--kx-firn); color: var(--kx-text); font-family: var(--kx-sans); font-size: var(--k-fs-body); line-height: 1.45; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } main { position: relative; z-index: 1; } img, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0; font-family: var(--kx-sans); font-weight: 500; line-height: 1.08; hyphens: none; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--kx-gentian); color: #fff; } :focus-visible { outline: 2px solid var(--kx-gentian-bright); outline-offset: 3px; border-radius: var(--k-radius); } /* -------------------------------------------------------------------------- 3 · TYPOGRAPHY COMPONENTS -------------------------------------------------------------------------- */ /* Eyebrow — small ceremonial label above headings. Caps, tracked, gold. */ .k-eyebrow { display: inline-flex; align-items: center; gap: 0.75em; font-family: var(--kx-cond); font-size: var(--k-fs-micro); font-weight: 600; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--kx-slate); } .k-eyebrow::before, .k-eyebrow::after { content: none; } /* Section title */ .k-title { font-size: var(--k-fs-1); color: var(--k-snow); letter-spacing: 0.005em; } /* Lede — the quiet explanatory line under a title */ .k-lede { max-width: var(--k-prose); color: var(--k-stone); font-size: var(--k-fs-body); line-height: 1.55; } /* Tracked caps utility (short strings only) */ .k-caps { font-size: var(--k-fs-micro); font-weight: 600; letter-spacing: var(--k-track-caps); text-transform: uppercase; } /* Figures — every number on the platform is tabular */ .k-fig { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .k-gold-text { color: var(--k-gold); } .k-stone-text { color: var(--k-stone); } /* -------------------------------------------------------------------------- 4 · STRUCTURE -------------------------------------------------------------------------- */ .k-container { width: 100%; max-width: var(--k-container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .k-container--wide { max-width: 86rem; } .k-section { padding-block: var(--k-sect); position: relative; } /* Centered section header stack */ .k-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-sp-4); margin-bottom: clamp(3rem, 6vw, 5rem); } /* Gold hairline — fades at both ends, like light on a blade */ .k-hairline { border: 0; height: var(--k-hairline); margin: 0; background: linear-gradient(90deg, transparent, var(--k-gold-45) 18%, var(--k-gold-45) 82%, transparent); } .k-hairline--dim { background: linear-gradient(90deg, transparent, var(--k-gold-25) 18%, var(--k-gold-25) 82%, transparent); } /* The axis — a vertical gold thread with a diamond node. This is the axis mundi: it marks every threshold on the page. */ .k-axis { display: flex; flex-direction: column; align-items: center; gap: 8px; } .k-axis__line { width: 1px; height: 64px; background: linear-gradient(180deg, transparent, var(--k-gold-45)); } .k-axis__node { width: 7px; height: 7px; border: 1px solid var(--k-gold); transform: rotate(45deg); } .k-axis--down .k-axis__line { order: 2; background: linear-gradient(180deg, var(--k-gold-45), transparent); } .k-axis--down .k-axis__node { order: 1; } /* -------------------------------------------------------------------------- 5 · CONTROLS -------------------------------------------------------------------------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0.85em 2em; border: 1px solid transparent; border-radius: var(--k-radius); font-family: var(--k-sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), filter var(--k-dur) var(--k-ease); } /* Primary — poured metal */ .k-btn--gold { color: var(--k-void); background: linear-gradient(180deg, #545BE8 0%, var(--k-gold) 52%, #2A2F9E 100%); border-color: rgba(169, 174, 248, 0.5); box-shadow: 0 1px 0 rgba(169, 174, 248, 0.35) inset, 0 12px 32px -14px rgba(59, 65, 201, 0.55); } .k-btn--gold:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(169, 174, 248, 0.45) inset, 0 18px 40px -14px rgba(59, 65, 201, 0.65); } .k-btn--gold:active { transform: translateY(0); filter: brightness(0.97); } /* Secondary — engraved outline */ .k-btn--ghost { color: var(--k-gold); background: transparent; border-color: var(--k-gold-45); } .k-btn--ghost:hover { border-color: var(--k-gold); background: var(--k-gold-06); color: var(--k-gold-high); } /* Quiet text link with hairline underline */ .k-link { color: var(--k-stone); transition: color var(--k-dur) var(--k-ease); } .k-link:hover { color: var(--k-gold-high); } /* Odds chip — the atomic unit of the sportsbook */ .k-odds { display: inline-flex; align-items: baseline; gap: 0.6em; padding: 0.55em 1em; border-radius: var(--k-radius); border: 1px solid var(--k-gold-25); background: var(--k-gold-06); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; transition: border-color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease); } .k-odds:hover { border-color: var(--k-gold-45); background: var(--k-gold-12); } .k-odds__side { font-size: 0.625rem; font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-stone); } .k-odds__price { font-size: 1.125rem; font-weight: 600; color: var(--k-gold); } .k-odds--lay { border-color: rgba(94, 127, 180, 0.3); background: rgba(34, 64, 107, 0.12); } .k-odds--lay:hover { border-color: rgba(94, 127, 180, 0.55); background: rgba(34, 64, 107, 0.22); } .k-odds--lay .k-odds__price { color: var(--k-lapis-hi); } /* Live marker — the ruby face at work */ .k-live { display: inline-flex; align-items: center; gap: 0.55em; font-size: var(--k-fs-micro); font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-ruby-hi); } .k-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-ruby-hi); box-shadow: 0 0 0 0 rgba(196, 82, 94, 0.5); } @media (prefers-reduced-motion: no-preference) { .k-live__dot { animation: k-pulse 2.4s var(--k-ease) infinite; } } @keyframes k-pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 82, 94, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(196, 82, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 82, 94, 0); } } /* -------------------------------------------------------------------------- 6 · NAVIGATION -------------------------------------------------------------------------- */ .k-nav { position: fixed; inset: 0 0 auto 0; z-index: var(--k-z-nav); transition: background-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease); } .k-nav.is-scrolled { background: var(--k-void-85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--k-gold-12); } .k-nav__inner { display: flex; align-items: center; gap: var(--k-sp-5); min-height: 72px; } .k-nav__brand { display: inline-flex; align-items: center; gap: 0.8rem; margin-right: auto; } .k-nav__mark { width: 34px; height: auto; } .k-wordmark { font-family: var(--k-serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: var(--k-track-caps); margin-right: calc(-1 * var(--k-track-caps)); text-transform: uppercase; color: var(--k-snow); font-variant-numeric: lining-nums; /* lining figures beside caps */ } .k-wordmark em { font-style: normal; color: var(--k-gold); } .k-nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); list-style: none; margin: 0; padding: 0; } .k-nav__link { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-stone); padding: 0.5rem 0.1rem; border-bottom: 1px solid transparent; transition: color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease); } .k-nav__link:hover { color: var(--k-gold-high); border-bottom-color: var(--k-gold-45); } .k-nav__cta { display: flex; align-items: center; gap: 0.9rem; } .k-nav__cta .k-btn { min-height: 42px; padding: 0.65em 1.5em; } /* inside the slim nav the poured-metal glow reads as a smear — keep it tight */ .k-nav__cta .k-btn--gold, .k-nav__cta .k-btn--gold:hover { box-shadow: 0 1px 0 rgba(169, 174, 248, 0.35) inset; } /* Burger — mobile only */ .k-burger { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--k-gold); } .k-burger svg { margin-inline: auto; } .k-burger__a, .k-burger__b { transition: transform var(--k-dur) var(--k-ease), opacity var(--k-dur) var(--k-ease); transform-origin: 12px 12px; } .k-burger[aria-expanded="true"] .k-burger__a { transform: translateY(4px) rotate(45deg); } .k-burger[aria-expanded="true"] .k-burger__b { transform: translateY(-4px) rotate(-45deg); } /* Mobile menu — a full obsidian veil */ .k-menu { position: fixed; inset: 0; z-index: var(--k-z-menu); display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--k-sp-4); background: rgba(10, 9, 8, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .k-menu.is-open { display: flex; } .k-menu__link { font-family: var(--k-serif); font-size: clamp(1.75rem, 7vw, 2.5rem); color: var(--k-snow); letter-spacing: 0.04em; padding: 0.35rem 1rem; } .k-menu__link:hover { color: var(--k-gold-high); } .k-menu__close { position: absolute; top: 12px; right: clamp(1.25rem, 5vw, 3rem); } .k-menu .k-btn { margin-top: var(--k-sp-3); } .k-menu__rule { width: 96px; } @media (max-width: 860px) { .k-nav__links, .k-nav__cta .k-btn--ghost { display: none; } .k-burger { display: block; } .k-nav__inner { gap: var(--k-sp-3); min-height: 62px; } .k-nav__cta { gap: 0.25rem; } .k-nav__mark { width: 28px; } .k-wordmark { font-size: 0.9375rem; } } /* Skip link */ .k-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1.25rem; background: var(--k-gold); color: var(--k-void); font-weight: 700; } .k-skip:focus-visible { left: 0; } /* -------------------------------------------------------------------------- 7 · MOTION — reveals gated on JS + motion preference. Without JS, or with reduced motion, everything is simply visible. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js .k-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--k-ease), transform 0.8s var(--k-ease); transition-delay: var(--k-reveal-delay, 0s); } .js .k-reveal.is-in { opacity: 1; transform: none; } /* Hero entrance liturgy */ .js .hero__seal { animation: k-seal-in 2s var(--k-ease) both; } .js .hero__eyebrow { animation: k-rise 0.9s var(--k-ease) 0.5s both; } .js .hero__wordmark { animation: k-rise 1.1s var(--k-ease) 0.7s both; } .js .hero__tagline { animation: k-rise 1.1s var(--k-ease) 0.95s both; } .js .hero__cta { animation: k-rise 1.1s var(--k-ease) 1.15s both; } .js .hero__foot { animation: k-fade 1.4s var(--k-ease) 1.6s both; } .ring365__ticks { animation: k-turn 240s linear infinite; transform-origin: 50% 50%; } } @keyframes k-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes k-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes k-seal-in { from { opacity: 0; transform: scale(0.955); } to { opacity: var(--k-seal-o, 0.55); transform: scale(1); } } @keyframes k-turn { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 8 · UTILITIES -------------------------------------------------------------------------- */ .k-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .k-center { text-align: center; } /* ========================================================================== PAGE: LANDING ========================================================================== */ /* -------------------------------------------------------------------------- L1 · HERO — the summit at dawn -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding-block: 8rem 5rem; overflow: clip; } .hero__bg { position: absolute; inset: 0; background-image: url("../assets/hero-bg.png"); /* relative to css/ */ background-size: cover; background-position: center 68%; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 70% at 50% 42%, transparent 30%, var(--k-void) 100%), linear-gradient(180deg, rgba(10, 9, 8, 0.74) 0%, rgba(10, 9, 8, 0.42) 34%, rgba(10, 9, 8, 0.48) 62%, var(--k-void) 96%); } .hero__seal { position: absolute; top: 50%; left: 50%; width: min(78vh, 92vw, 680px); /* centre with the `translate` property so the entrance animation's `transform: scale()` composes with it instead of replacing it */ translate: -50% -54%; mix-blend-mode: screen; /* seal is on black — screen lifts it clean */ opacity: var(--k-seal-o, 0.55); pointer-events: none; } .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-sp-4); } .hero__eyebrow { color: var(--k-gold-high); text-shadow: 0 1px 4px rgba(10, 9, 8, 0.95), 0 1px 18px rgba(10, 9, 8, 0.9); } .hero__wordmark { font-family: var(--k-serif); font-weight: 600; font-size: var(--k-fs-hero); line-height: 1; letter-spacing: 0.16em; margin-right: -0.16em; /* re-centres tracked caps */ text-transform: uppercase; color: var(--k-snow); text-shadow: 0 2px 30px rgba(10, 9, 8, 0.85); font-variant-numeric: lining-nums; } .hero__wordmark em { font-style: normal; color: var(--k-gold); } .hero__tagline { font-family: var(--k-serif); font-style: italic; font-weight: 500; font-size: var(--k-fs-3); color: var(--k-snow); text-shadow: 0 1px 16px rgba(10, 9, 8, 0.9); } .hero__rule { width: min(320px, 60vw); } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-sp-3); margin-top: var(--k-sp-2); } .hero__foot { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); z-index: 2; } @media (max-width: 760px) { /* taller crop exposes the artwork's lower band — deepen the ground fade */ .hero__bg::after { background: radial-gradient(ellipse 130% 62% at 50% 38%, transparent 30%, var(--k-void) 100%), linear-gradient(180deg, rgba(10, 9, 8, 0.74) 0%, rgba(10, 9, 8, 0.42) 32%, rgba(10, 9, 8, 0.62) 58%, var(--k-void) 86%); } } /* -------------------------------------------------------------------------- L2 · FOUR FACES — a cardinal cross around the compass seal. DOM order runs clockwise (N → E → S → W), the direction of the kora. -------------------------------------------------------------------------- */ .faces__cross { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". n ." "w c e" ". s ."; gap: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 4vw, 4rem); align-items: center; justify-items: center; } .face { max-width: 21rem; } .face--n { grid-area: n; text-align: center; } .face--s { grid-area: s; text-align: center; } .face--e { grid-area: e; text-align: left; justify-self: start; } .face--w { grid-area: w; text-align: right; justify-self: end; } .face__dir { display: inline-flex; align-items: baseline; gap: 0.7em; font-size: var(--k-fs-micro); font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-stone); } .face__dir b { font-weight: 700; color: var(--k-gold); } .face__gem { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg) translateY(-1px); background: var(--face-tint, var(--k-gold)); } .face__icon { color: var(--k-gold); margin-block: 0.9rem 0.8rem; } .face--n .face__icon, .face--s .face__icon { margin-inline: auto; } .face--w .face__icon { margin-left: auto; } .face__name { font-size: var(--k-fs-3); font-weight: 600; color: var(--k-snow); } .face__copy { margin-top: 0.5rem; font-size: var(--k-fs-small); line-height: 1.55; color: var(--k-stone); } .faces__hub { grid-area: c; color: var(--k-gold); } @media (max-width: 760px) { .faces__cross { grid-template-columns: 1fr; grid-template-areas: "c" "n" "e" "s" "w"; /* hub first, then clockwise */ } .face--e, .face--w { text-align: center; justify-self: center; } .face--w .face__icon, .face--e .face__icon { margin-inline: auto; } .faces__hub svg { width: 96px; height: 96px; } } /* -------------------------------------------------------------------------- L3 · ORDER OF PLAY — the sports ledger, alternating across the axis -------------------------------------------------------------------------- */ .ledger { border-top: var(--k-hairline) solid transparent; } .sport { position: relative; display: grid; grid-template-columns: 1fr clamp(2.5rem, 7vw, 6rem) 1fr; align-items: center; padding-block: clamp(2.25rem, 4.5vw, 3.5rem); } .sport + .sport::before { content: ""; position: absolute; inset: 0 8% auto 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--k-gold-25) 30%, var(--k-gold-25) 70%, transparent); } /* the axis thread through the ledger */ .sport__axis { position: relative; height: 100%; min-height: 72px; } .sport__axis::before { content: ""; position: absolute; left: 50%; top: -1.5rem; bottom: -1.5rem; width: 1px; background: var(--k-gold-25); } .sport__axis::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--k-gold); background: var(--k-void); } .sport__name-cell { text-align: right; } .sport__detail-cell { text-align: left; } .sport--flip .sport__name-cell { order: 3; text-align: left; } .sport--flip .sport__detail-cell { order: 1; text-align: right; } .sport--flip .sport__axis { order: 2; } .sport__name { font-family: var(--k-serif); font-size: clamp(1.875rem, 4.2vw, 3.125rem); font-weight: 500; color: var(--k-snow); line-height: 1; transition: color var(--k-dur) var(--k-ease); } .sport:hover .sport__name { color: var(--k-gold-high); } .sport--lead .sport__name { font-size: clamp(2.375rem, 5.5vw, 4.125rem); } .sport__note { margin-top: 0.6rem; font-family: var(--k-serif); font-style: italic; font-size: var(--k-fs-small); color: var(--k-stone); } .sport__leagues { font-size: var(--k-fs-micro); font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-gold); } .sport__copy { margin-top: 0.6rem; max-width: 26rem; font-size: var(--k-fs-small); line-height: 1.55; color: var(--k-stone); } .sport--flip .sport__copy { margin-left: auto; } .sport__market { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.1rem; } .sport--flip .sport__market { justify-content: flex-end; } .sport__runner { font-size: var(--k-fs-small); font-weight: 600; color: var(--k-snow); } @media (max-width: 760px) { .sport { grid-template-columns: 1fr; gap: 1.1rem; padding-left: 1.5rem; } .sport::after { /* axis moves to the left rail */ content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg); border: 1px solid var(--k-gold); background: var(--k-void); } .ledger { position: relative; } .ledger::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--k-gold-25); } .sport__axis { display: none; } .sport__name-cell, .sport__detail-cell, .sport--flip .sport__name-cell, .sport--flip .sport__detail-cell { order: initial; text-align: left; } .sport--flip .sport__market { justify-content: flex-start; } .sport--flip .sport__copy { margin-left: 0; } .sport + .sport::before { inset: 0 0 auto 1.5rem; } } /* -------------------------------------------------------------------------- L4 · THE INNER SANCTUM — casino colonnade of arch niches -------------------------------------------------------------------------- */ .colonnade { display: flex; gap: clamp(0.9rem, 1.6vw, 1.4rem); overflow-x: auto; scroll-snap-type: x proximity; padding: 0.5rem 0.25rem 1.75rem; scrollbar-width: thin; scrollbar-color: var(--k-gold-25) transparent; } .niche { flex: 1 0 218px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 372px; padding: 3.4rem 1.4rem 2rem; border: 1px solid var(--k-gold-12); border-radius: var(--k-arch); background: linear-gradient(180deg, #17130E 0%, #100D0A 78%); transition: transform var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease); } .niche:hover { transform: translateY(-6px); border-color: var(--k-gold-45); box-shadow: 0 0 0 1px var(--k-gold-12) inset, 0 0 56px -18px rgba(59, 65, 201, 0.35), 0 26px 44px -30px rgba(0, 0, 0, 0.9); } .niche:focus-visible { transform: translateY(-6px); border-color: var(--k-gold); } .niche__icon { color: var(--k-gold); margin-bottom: 1.4rem; transition: color var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease); } .niche:hover .niche__icon { color: var(--k-gold-high); transform: translateY(-3px); } .niche__name { font-size: 1.5rem; font-weight: 600; color: var(--k-snow); } .niche__kind { margin-top: 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-gold); } .niche__copy { margin-top: 0.9rem; font-size: var(--k-fs-small); line-height: 1.55; color: var(--k-stone); flex-grow: 1; } .niche__spec { margin-top: 1.2rem; padding-top: 1rem; width: 100%; border-top: 1px solid var(--k-gold-12); font-size: var(--k-fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-stone); font-variant-numeric: tabular-nums lining-nums; } /* -------------------------------------------------------------------------- L5 · ETERNAL — the 365 ring (one tick per day, turned like a prayer wheel) -------------------------------------------------------------------------- */ .eternal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-sp-4); } .ring365 { position: relative; width: min(66vw, 380px); aspect-ratio: 1; margin-bottom: var(--k-sp-3); } .ring365 svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ring365__core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; } .ring365__num { font-family: var(--k-serif); font-size: clamp(4rem, 16vw, 7rem); font-weight: 500; line-height: 0.9; color: var(--k-gold); font-variant-numeric: lining-nums; } .ring365__cap { color: var(--k-stone); } .eternal__title { font-size: var(--k-fs-2); } .eternal__copy { max-width: var(--k-prose); color: var(--k-stone); line-height: 1.55; } /* -------------------------------------------------------------------------- L6 · FOOTER -------------------------------------------------------------------------- */ .k-footer { position: relative; z-index: 1; background: #0C0A08; padding-block: var(--k-sp-7) var(--k-sp-5); } .k-footer__frieze { width: min(640px, 86%); margin: 0 auto var(--k-sp-7); color: var(--k-gold-deep); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .k-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, 1fr)); gap: var(--k-sp-6) var(--k-sp-5); } .k-footer__brand { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .k-footer__mark { width: 44px; } .k-footer__tag { font-family: var(--k-serif); font-style: italic; color: var(--k-stone); font-size: var(--k-fs-small); } .k-footer__h { font-family: var(--k-sans); font-size: var(--k-fs-micro); font-weight: 700; letter-spacing: var(--k-track-caps); text-transform: uppercase; color: var(--k-gold); margin-bottom: 1.1rem; } .k-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .k-footer__list a { font-size: var(--k-fs-small); } .k-footer__legal { margin-top: var(--k-sp-7); padding-top: var(--k-sp-4); border-top: 1px solid var(--k-gold-12); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; color: var(--k-stone); font-size: 0.8125rem; line-height: 1.55; } .k-footer__legal p { max-width: 56ch; } .k-18 { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--k-gold-45); border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: var(--k-gold); font-variant-numeric: lining-nums; } .k-footer__fine { margin-left: auto; color: var(--k-stone-dim); } @media (max-width: 960px) { .k-footer__grid { grid-template-columns: repeat(2, 1fr); } .k-footer__brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .k-footer__grid { grid-template-columns: 1fr; } .k-footer__fine { margin-left: 0; } }