/* ========================================================================== BLACK PEARL POKER RUN — DESIGN TOKENS The single source of truth. Site, registration, email previews, flyers and social renders all import this file. Never hardcode a hex outside it. Palette sampled from the approved Canva deck (DAG-U8uI-eo, 16pg). Typography derived from the PDF's embedded fonts — see DESIGN.md. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND COLOR — the raw palette. Do not use these directly in components; use the semantic tokens in section 2. --------------------------------------------------------------------- */ --bp-navy: #002357; /* Pearl Navy — the primary field */ --bp-navy-deep: #001638; /* Harbor Night — deepest ground */ --bp-navy-card: #0a2a57; /* raised card on navy */ --bp-navy-line: #001c44; /* rules, bars, nav */ --bp-navy-mid: #123363; /* unlit structure: timeline track, dots */ /* --------------------------------------------------------------------- THE GOLD LADDER — the brand's metal, in eight steps. Gold is a MATERIAL here, never a flat fill. Two rules govern every value below, and breaking either is what makes gold read as brass or olive: 1. Hue stays inside 34-46 degrees. Above ~47 the eye reads olive/green. 2. As gold DARKENS it drifts toward AMBER (hue falls), never upward. Real gold shadows go red-brown; a shadow that holds or raises its hue is what makes a gradient look green in the middle. Verified: hue runs 45.0 -> 34.4 monotonically down the ladder, with saturation climbing 11 -> 83. Contrast on navy checked — sheen through rich all pass AA for body text; amber is large-text only; bronze and deep are ornament only and must never carry type. --------------------------------------------------------------------- */ --gold-sheen: #fff8e3; /* hue 45.0 — the catch of light */ --gold-champagne: #f7e3b0; /* hue 43.1 */ --gold-light: #efce86; /* hue 41.1 */ --gold-core: #dfb35b; /* hue 40.0 — the anchor tone */ --gold-rich: #c9963c; /* hue 38.3 */ --gold-amber: #ae7a28; /* hue 36.7 */ --gold-bronze: #8c5e1b; /* hue 35.6 — ornament only */ --gold-deep: #6b4512; /* hue 34.4 — ornament only */ /* Named brand roles, mapped onto the ladder so there is one gold family. */ --bp-gold: var(--gold-core); /* Rally Gold — primary accent */ --bp-gold-bright: var(--gold-light); /* highlights, numerals, hover */ --bp-gold-deep: var(--gold-amber); /* the shadow end */ --bp-gold-speed: var(--gold-core); /* Speed Gold — the tagline face (was #c5ab3a at hue 48.8 — measurably green-leaning, and the reason labels read olive. Retired.) */ --bp-white: #ffffff; /* Chophouse White */ --bp-foam: #f2f6fb; /* off-white body copy on navy */ --bp-mist: #8fa3bd; /* secondary / muted copy on navy */ --bp-red: #c8102e; /* NPBA Red — the producer badge ONLY. Never used as a UI accent. */ /* --------------------------------------------------------------------- THE GOLD SURFACE — an applied material, not a two-stop ramp. `--gold-leaf` runs the full ladder up to a travelling sheen and back down, on DELIBERATELY IRREGULAR stops. Even spacing is what produces a visible "gradient point"; uneven spacing reads as a hand-laid surface. Twelve stops mean no two adjacent colours are far enough apart to band. `--gold-drift` is a second, softer layer on a different geometry that breaks the linearity — the way light actually pools on a curved metal surface rather than sweeping evenly across it. Apply them together via `--gold-surface`, ALWAYS with one of the scale tokens below. See "THE SCALE" for why the scale is not optional. --------------------------------------------------------------------- */ --gold-leaf: linear-gradient(112deg, var(--gold-amber) 0%, var(--gold-rich) 7%, var(--gold-core) 17%, var(--gold-light) 27%, var(--gold-champagne) 34%, var(--gold-sheen) 41%, var(--gold-champagne) 47%, var(--gold-light) 55%, var(--gold-core) 64%, var(--gold-rich) 74%, var(--gold-amber) 85%, var(--gold-bronze) 100%); --gold-drift: radial-gradient(118% 150% at 22% 6%, rgba(255, 248, 227, 0.34) 0%, rgba(255, 248, 227, 0) 46%), radial-gradient(96% 132% at 81% 94%, rgba(107, 69, 18, 0.44) 0%, rgba(107, 69, 18, 0) 54%); --gold-surface: var(--gold-drift), var(--gold-leaf); /* --------------------------------------------------------------------- THE SCALE — the token that makes gold look painted rather than printed. A gradient sized to its own element shows the WHOLE ramp inside a button or a rule, so every stop lands in view and the transitions read as hard points. Sizing it far larger than the element means only a SLICE of the ladder crosses it: colour shifts gently, no stop is ever fully visible, and two elements of different sizes still look cut from one sheet of leaf. Pick by element size — smaller element, larger scale. tight small marks and icons where some travel should still be visible soft buttons, pills, badges <- the default wide cards, bands, panels vast full-width surfaces, long rules, big type --------------------------------------------------------------------- */ Scale trades hardness for richness, so it has a ceiling. Past roughly 600% the visible slice is too narrow to contain any tonal travel and the gold flattens to pale cream — soft, but no longer metal. These four values were tuned against a render: every one still carries core-through-sheen travel. --------------------------------------------------------------------- */ --gold-scale-tight: 150% 150%; --gold-scale-soft: 230% 230%; --gold-scale-wide: 340% 340%; --gold-scale-vast: 520% 520%; /* Where the visible slice sits on the ladder. Tuned so the slice spans core -> light -> sheen: rich enough to read as gold, with the highlight travelling through rather than sitting dead centre. Sampling earlier (~28%) lands in champagne and washes out; later lands in bronze. */ --gold-origin: 44% 48%; /* Back-compat alias. Everything already referencing --bp-gold-metal now gets the organic surface. Prefer the .gold-surface utility, which also applies the scale — a bare background:var(--bp-gold-metal) fits the whole ramp inside the element and reintroduces the hard stops. */ --bp-gold-metal: var(--gold-leaf); --bp-gold-rule: linear-gradient(90deg, transparent 0%, var(--gold-amber) 12%, var(--gold-core) 28%, var(--gold-sheen) 50%, var(--gold-core) 72%, var(--gold-amber) 88%, transparent 100%); /* Paper set — print, letterhead, and light-ground collateral only. The web experience is navy-grounded; this is not a light theme. */ --bp-paper: #fbfaf7; --bp-paper-ink: #101a2c; --bp-paper-rule: #d8cfc0; /* --------------------------------------------------------------------- 2. SEMANTIC COLOR — what components actually reference. --------------------------------------------------------------------- */ --surface-0: var(--bp-navy-deep); /* page ground */ --surface-1: var(--bp-navy); /* section / panel */ --surface-2: var(--bp-navy-card); /* card */ --surface-bar: var(--bp-navy-line); /* nav, countdown, footer */ --text-primary: var(--bp-white); --text-body: var(--bp-foam); --text-secondary: #b9c6da; /* between foam and mist — lead paragraphs, captions that must stay readable (9.6:1) */ --text-muted: var(--bp-mist); --text-accent: var(--bp-gold-bright); --text-label: var(--bp-gold-speed); /* tracked-out caps labels */ --border-subtle: rgba(143, 163, 189, 0.18); --border-gold: rgba(213, 174, 89, 0.28); --border-gold-strong: rgba(213, 174, 89, 0.55); --focus-ring: var(--bp-gold-bright); /* States — derived so forms never invent their own colors. */ --state-error: #ff6b6b; --state-error-bg: rgba(255, 107, 107, 0.10); --state-success: #4ec9a0; --state-success-bg: rgba(78, 201, 160, 0.10); --state-warn: var(--bp-gold-bright); /* --------------------------------------------------------------------- 3. TYPOGRAPHY The deck's real faces (from pdffonts) are ITC New Baskerville Pro, Helvetica LT Pro and Canva Sans. Canva Sans is proprietary and Helvetica LT Pro is licensed, so the web system substitutes: display ITC New Baskerville -> Baskervville (large, delicate) serif ITC New Baskerville -> Libre Baskerville (small, sturdy) sans Helvetica LT Pro + Canva Sans -> Inter (both roles) Two Baskervilles is deliberate, not an accident — see DESIGN.md "Why two serifs". --------------------------------------------------------------------- */ --font-display: 'Baskervville', 'Libre Baskerville', 'Baskerville', 'Hoefler Text', Georgia, 'Times New Roman', serif; --font-serif: 'Libre Baskerville', 'Baskerville', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive; --font-mono: ui-monospace, 'SF Mono', 'Fira Code', Menlo, monospace; /* Type scale — 1.25 major third off a 16px base, clamped for fluidity. */ --fs-hero: clamp(2.75rem, 1.60rem + 5.75vw, 7.00rem); /* 44 -> 112 */ --fs-display: clamp(2.00rem, 1.35rem + 3.25vw, 4.00rem); /* 32 -> 64 */ --fs-h2: clamp(1.75rem, 1.30rem + 2.25vw, 3.00rem); /* 28 -> 48 */ --fs-h3: clamp(1.35rem, 1.15rem + 1.00vw, 1.75rem); /* 22 -> 28 */ --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); /* 17 -> 20 */ --fs-body: 1.0625rem; /* 17 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-label: 0.6875rem; /* 11 (caps) */ --fs-micro: 0.625rem; /* 10 (caps) */ --lh-tight: 1.05; /* hero / display */ --lh-snug: 1.25; /* headings */ --lh-normal: 1.6; /* UI */ --lh-relaxed: 1.75; /* long-form body */ /* Tracking. The brand's signature move is wide letterspaced caps — every label, tagline and eyebrow uses one of these, never an ad-hoc value. */ --tr-hero: 0.06em; --tr-display: 0.04em; --tr-wordmark: 0.30em; /* "SEAFOOD CHOPHOUSE" under the wordmark */ --tr-tagline: 0.26em; /* "SPEED · STYLE · SOUND" */ --tr-label: 0.22em; /* section eyebrows, table headers, buttons */ --tr-micro: 0.34em; /* countdown caption, footer */ --tr-body: 0; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------------- 4. SPACE — 4px base, geometric. Sections use the --sp-section pair. --------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ --sp-section: clamp(3.5rem, 2rem + 6vw, 7.5rem); /* vertical rhythm */ --sp-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); /* --------------------------------------------------------------------- 5. LAYOUT --------------------------------------------------------------------- */ --max-page: 1240px; --max-content: 1080px; --max-prose: 68ch; /* never let body copy run wider than this */ --max-narrow: 640px; /* forms, single-column flows */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* This brand is architectural, not friendly. Default to square corners; --radius-md is the maximum for interactive controls. Never pill. */ --radius-control: var(--radius-sm); /* --------------------------------------------------------------------- 6. ELEVATION & EFFECTS On a navy ground, shadows read as mud. Elevation is expressed with a lifted surface + a gold hairline, not a drop shadow. --------------------------------------------------------------------- */ --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.85); --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.9); --shadow-gold: 0 0 0 1px rgba(213, 174, 89, 0.35), 0 12px 40px -18px rgba(213, 174, 89, 0.30); --glow-hero: radial-gradient(ellipse at 50% 118%, #0a3a7a 0%, var(--bp-navy) 42%, var(--bp-navy-deep) 100%); /* The deck's recurring texture: fine gold dust over the navy field. */ --texture-dust: radial-gradient(circle at 20% 30%, rgba(232,204,132,0.05) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(232,204,132,0.04) 0 1px, transparent 1px), radial-gradient(circle at 45% 85%, rgba(232,204,132,0.03) 0 1px, transparent 1px); --texture-dust-size: 180px 180px, 240px 240px, 300px 300px; /* --------------------------------------------------------------------- 7. MOTION — restrained. Premium reads as calm, not bouncy. No spring easings, no overshoot, nothing over 600ms. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 600ms; /* --------------------------------------------------------------------- 8. COMPONENT CONSTANTS --------------------------------------------------------------------- */ --control-height: 52px; /* buttons + inputs share one height */ --control-pad-x: var(--sp-6); --field-height: 52px; --hairline: 1px; --rule-gold: 1px; --z-nav: 50; --z-modal: 100; } /* ========================================================================== THE GOLD SURFACE UTILITY The one sanctioned way to put gold on something. Never hand-roll a linear-gradient in a component — you will pick even stops and a default scale, and it will band. … a gold panel or button

$10,000

gold type Size modifiers: .gold--tight | .gold--soft (default) | .gold--wide | .gold--vast ========================================================================== */ .gold-surface { background-image: var(--gold-surface); background-size: var(--gold-scale-soft), var(--gold-scale-soft); background-position: var(--gold-origin), var(--gold-origin); background-repeat: no-repeat; color: var(--bp-navy-deep); } /* Gold TYPE. Clips the same material through the glyphs, so a headline is cut from the same sheet as the button beside it. Falls back to a flat core gold in engines without background-clip, which stays AA on navy (7.8:1). */ .gold-text { color: var(--gold-core); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .gold-text { background-image: var(--gold-surface); /* Display type is a LARGE element, so by the smaller-element-larger-scale rule it takes a modest scale — enough travel to read as metal across the glyphs without flattening to cream. */ background-size: var(--gold-scale-wide), var(--gold-scale-wide); background-position: var(--gold-origin), var(--gold-origin); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } .gold--tight { background-size: var(--gold-scale-tight), var(--gold-scale-tight); } .gold--soft { background-size: var(--gold-scale-soft), var(--gold-scale-soft); } .gold--wide { background-size: var(--gold-scale-wide), var(--gold-scale-wide); } .gold--vast { background-size: var(--gold-scale-vast), var(--gold-scale-vast); } /* The MARK, cut from the same sheet. brand/logo_boat_mask*.png is a pure alpha silhouette of the boat mark (dust field removed, edges tapered — see bin/make_logo_mask.py); this paints the gold material through it, so the logo is the same metal as every button and headline beside it. The raster logo PNGs bake their own (weaker) gold — use them only where CSS masks can't reach (favicons, email, social cards). and in the PAGE's own