/* Belmar look-16 tokens — the five files from prive/_ds/.../tokens concatenated in the order ds-base.js loaded them (fonts, colors, typography, spacing, base). Unchanged. The Google Fonts @import from fonts.css is replaced by tags in index.html. */ /* Belmar — Webfonts Display : Newsreader (headlines, wordmark, big scores) Body : Hanken Grotesk (interface, paragraphs, labels) Accent : Caveat (hand-drawn marker — captions & flourishes only) All three are served from Google Fonts. If you need fully offline binaries, download the .woff2 files and swap the src() lines below. */ /* ============================================================ Belmar — Color "A padel society with the joy of a tropical Riviera." THE MAINS: 1 · Sand & cream — the warm paper ground 2 · Marine navy — the brand: dark panels, primary actions, wordmark 3 · Warm plum-black ink — ALL display type: headlines, big scores (--text-strong = --ink-900). Near-black with a wine cast — this is where the purple quietly lives. 4 · Chartreuse — the single joy-pop ACCENT & ILLUSTRATION: · Deep wine — the QUIET accent: wine-tinted tags, italic asides, avatar tints — never headlines, never big surfaces (--wine-*) · Terracotta — the warm accent: script asides, top ranks, doodles (--terra-*) · Seaside green-blue — petrol / teal / olive: courts, botanicals, line-art only ALL-PURPLE VARIANT: set data-theme="aubergine" on any container (or ) and the marine brand ramp AND headline ink remap to the wine family — the original aubergine look. ============================================================ */ :root { /* ---- MAIN 1 · Neutrals : sand, linen, cream, ink ---- */ --cream-50: #F6EEE1; /* lightest paper / cards */ --cream-100: #F1E7D4; /* page background */ --sand-200: #E6D5BD; /* sand / quiet panels */ --sand-300: #D6C2A4; /* deeper sand / hairlines */ --sand-400: #C1A87E; /* muted wheat */ --ink-900: #2B2028; /* warm near-black (UI ink) */ /* ---- MAIN 2 · Marine navy : the Belmar brand ---- */ --marine-700: #0A2A3B; /* darkest brand / hover */ --marine-600: #123E54; /* PRIMARY brand / action */ --marine-400: #3E6C84; /* muted secondary */ --marine-300: #8AAEC1; /* soft */ --marine-200: #CBDCE6; /* tint background */ /* ---- ACCENT · Deep wine : the quiet accent (tags, asides) ---- */ --wine-700: #2E1A26; /* darkest plum */ --wine-600: #4A2A3C; /* wine accent / aubergine theme brand */ --wine-400: #7A5165; /* muted / italic asides */ --wine-300: #A98C9B; /* soft */ --wine-200: #DDCBD4; /* tint background (tags) */ /* ---- MAIN 4 · Chartreuse : the joy-pop ---- */ --lime-500: #AFD420; /* the pop : ball, dots, accents */ --lime-600: #7E9A14; /* readable lime for text */ --lime-300: #D2E882; --lime-200: #E9F1BE; /* ---- ACCENT · Terracotta : sun-warmed clay (script, ranks, doodles) ---- */ --terra-600: #9E5230; --terra-500: #B86A45; --terra-300: #DCB088; --terra-200: #ECD8C4; /* ---- ILLUSTRATION · Petrol : deep marine blue (courts) ---- */ --petrol-700: #103A50; --petrol-500: #2E6E8C; --petrol-300: #8FB4C6; --petrol-200: #C2D8E2; /* ---- ILLUSTRATION · Teal : seaside green-blue ---- */ --teal-600: #2F756E; --teal-500: #3C8981; --teal-300: #95C4BD; --teal-200: #C9E0DC; /* ---- ILLUSTRATION · Olive : deep leaf green (botanicals) ---- */ --olive-600: #5F6E37; --olive-500: #79883F; --olive-300: #B6C088; --olive-200: #DCE2C4; /* ============================================================ Legacy aliases — first-generation token names still resolve. NOTE: --navy-900/700/500 are the legacy "heading ink" names — they stay WINE (type), not marine. Prefer the names above. ============================================================ */ --linen-50: var(--cream-50); --linen-100: var(--cream-100); --linen-200: var(--sand-200); --linen-300: var(--sand-300); --linen-400: var(--sand-400); --navy-900: var(--ink-900); /* legacy heading ink = plum-black */ --navy-700: var(--ink-900); --navy-500: var(--wine-400); --red-600: var(--wine-600); --red-700: var(--wine-700); --red-300: var(--wine-300); --green-600: var(--olive-600); --green-500: var(--olive-500); --green-200: var(--olive-200); --teal-700: var(--petrol-700); --clay-600: var(--terra-600); --clay-500: var(--terra-500); --clay-200: var(--terra-200); --plum-600: var(--petrol-700); --plum-400: var(--petrol-500); --plum-200: var(--petrol-200); --gold-500: var(--lime-500); --gold-600: var(--lime-600); --gold-200: var(--lime-200); /* ============================================================ Semantic aliases — reach for these in components. ============================================================ */ --bg-page: var(--cream-100); --bg-page-warm: var(--cream-50); --surface-card: var(--cream-50); --surface-sunk: var(--sand-200); --surface-ink: var(--marine-600); /* dark panels = navy */ --text-strong: var(--ink-900); /* display, headlines: warm plum-black */ --text-body: #4A3A33; /* warm brown paragraph */ --text-muted: #8A7868; /* captions, meta */ --text-on-dark: var(--cream-50); --text-on-accent: var(--cream-50); --ink: var(--ink-900); --border-hair: var(--sand-300); --border-card: #D6C2A4; --accent-primary: var(--marine-600); /* main CTA = navy */ --accent-hover: var(--marine-700); --accent-pop: var(--lime-500); /* chartreuse joy-pop */ --accent-warm: var(--terra-600); /* script asides, top rank */ --accent-court: var(--teal-500); --accent-marine: var(--marine-600); --accent-clay: var(--terra-600); --accent-olive: var(--olive-600); --accent-ball: var(--lime-500); /* legacy name */ --accent-plum: var(--wine-600); /* legacy name */ --focus-ring: var(--marine-400); /* Status (kept on-brand) */ --ok: var(--teal-500); --warn: var(--terra-600); --error: #C0492E; --info: var(--marine-600); } /* ============================================================ ALL-PURPLE THEME · "Aubergine" Remaps the marine brand ramp onto the wine family — the original aubergine look, where the brand surfaces are purple too. Because every component reads the --marine-* / brand semantics, this swaps the brand everywhere with zero component changes. (The old data-theme="marine" is simply the default now.) Usage: or any wrapper element. ============================================================ */ [data-theme="aubergine"] { --marine-700: var(--wine-700); --marine-600: var(--wine-600); --marine-400: var(--wine-400); --marine-300: var(--wine-300); --marine-200: var(--wine-200); --text-strong: var(--wine-600); /* headlines go wine again */ --accent-marine: var(--petrol-700); /* keep links distinct */ --focus-ring: var(--petrol-500); } /* ============================================================ Belmar — Typography ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'Newsreader', 'Georgia', 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif; --font-script: 'Caveat', 'Segoe Script', cursive; /* ---- Display robustness (Bodoni hairline control) ---- Bodoni Moda's optical-size axis auto-drives opsz toward 96 at large sizes, collapsing its hairlines into unreadable wisps. · --display-opsz pins the axis LOW. It is applied globally via font-variation-settings on the root (tokens/base.css), so every Bodoni instance inherits it; Hanken Grotesk and Caveat have no opsz axis and ignore it. · --display-wght is a barely-heavier regular that sturdies up thin strokes. It CANNOT ride the global trick (it would thicken the sans too) — apply per display surface: headings, wordmark, .mp-display, or anything using --fvs-display. */ --display-opsz: 72; /* @kind font */ --display-wght: 430; /* @kind font */ --fvs-display: "opsz" var(--display-opsz), "wght" var(--display-wght); /* @kind font */ --fvs-display-fine: "opsz" 32, "wght" 480; /* small italic asides @kind font */ /* ---- Weights ---- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* ---- Display scale (Bodoni Moda) ---- */ --t-display-xl: 78px; /* hero wordmark / "Padel, with a side of summer" */ --t-display-lg: 56px; --t-display-md: 40px; --t-numeral: 140px; /* @kind spacing */ --t-display-sm: 30px; /* ---- Text scale (Hanken Grotesk) ---- */ --t-2xl: 24px; --t-xl: 20px; --t-lg: 18px; --t-md: 16px; /* base body */ --t-sm: 14px; /* min UI size */ --t-xs: 12.5px; /* labels / overline */ /* ---- Script (Caveat) ---- */ --t-script-lg: 38px; --t-script-md: 26px; /* ---- Line height ---- */ --lh-tight: 1.04; /* @kind font */ --lh-snug: 1.22; /* @kind font */ --lh-body: 1.55; /* @kind font */ --lh-relaxed:1.7; /* @kind font */ /* ---- Tracking ---- */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ --ls-overline:0.18em; /* @kind font */ } /* ============================================================ Belmar — Spacing, Radius, Shadow, Motion Generous rounded corners + soft, sun-warmed shadows. ============================================================ */ :root { /* ---- Spacing (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- Radius : rounded is core to the brand ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; /* buttons, inputs */ --radius-lg: 20px; /* cards */ --radius-xl: 28px; /* large panels, court */ --radius-2xl: 40px; --radius-pill: 999px; /* tags, pennants, avatars */ /* ---- Borders ---- */ --border-width: 1px; /* @kind other */ --border-width-bold: 2px; /* @kind other */ /* ---- Shadows : soft & warm, never harsh black ---- */ --shadow-xs: 0 1px 2px rgba(21,42,63,0.06); --shadow-sm: 0 2px 8px rgba(21,42,63,0.07); --shadow-md: 0 8px 24px rgba(21,42,63,0.09); --shadow-lg: 0 18px 44px rgba(21,42,63,0.12); --shadow-press: inset 0 2px 5px rgba(21,42,63,0.14); --shadow-court: 0 14px 30px rgba(20,50,40,0.22); /* ---- Motion : easy, slightly springy — never bouncy-cartoon ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring:cubic-bezier(0.34, 1.32, 0.64, 1);/* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 380ms; /* @kind other */ /* ---- Layout ---- */ --container: 1200px; /* @kind other */ --container-narrow: 760px; /* @kind other */ } /* ============================================================ Belmar — Base resets, textures & helpers ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { /* Pin Bodoni Moda's optical-size axis low EVERYWHERE, so the browser's auto behavior (opsz → 96 at display sizes) never collapses its hairlines. Inherited by every element; Hanken Grotesk and Caveat have no opsz axis and ignore it. */ font-variation-settings: "opsz" var(--display-opsz); } body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--t-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- A soft tropical wash (olive + petrol corners) — the only page texture. (The old .mp-waffle grid is retired: never reintroduce a grid/waffle background.) ---- */ .mp-linen { background: radial-gradient(120% 120% at 0% 0%, rgba(95,110,55,0.07), transparent 45%), radial-gradient(120% 120% at 100% 100%, rgba(16,58,80,0.06), transparent 45%), var(--bg-page); } /* ---- Display helper : opsz 10 + wght 470 (--fvs-display) so Bodoni stays sturdy + readable at any size. Use on any display-type element. ---- */ .mp-display { font-family: var(--font-display); font-optical-sizing: none; font-variation-settings: var(--fvs-display); } /* ---- Eyebrow / overline ---- */ .mp-overline { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--t-xs); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--accent-primary); } /* ---- Hand-drawn script flourish ---- */ .mp-script { font-family: var(--font-script); font-weight: 600; font-size: var(--t-script-lg); line-height: 1; color: var(--accent-warm); } ::selection { background: var(--lime-200); color: var(--wine-600); } a { color: var(--accent-marine); text-decoration-thickness: 1px; text-underline-offset: 2px; }