/* ============================================================================= J'BEZ — DESIGN TOKENS Every colour, type step, space step, radius, and motion value lives here. Nothing downstream hard codes a value. Change it once, it changes everywhere. Source of truth: J'Bez Brand Guidelines, Version Two, 2026. ============================================================================= */ /* ----------------------------------------------------------------------------- TYPEFACES Shipping now: Outfit for display, Inter for text. Both are the free fallbacks named in the brand book, section 04, and both are self hosted so no third party request blocks first paint. TO SWAP IN THE LICENSED FACES: Roc Grotesk (display) and Aktiv Grotesk Extended (text) are Adobe Fonts. 1. Create a Web Project in Adobe Fonts containing both families. 2. Add the Adobe kit to src/partials/head.html. 3. Change --font-display and --font-text below to put the licensed family first. The fallbacks stay behind it, so nothing breaks if the kit fails. No other file needs to change. ----------------------------------------------------------------------------- */ /* Both families are variable fonts. Google serves one file per family covering the whole weight axis, so the site ships one file each and declares a weight range rather than downloading identical bytes three times over. That took the font payload from 157KB to 80KB. Only the latin subset is shipped, which is all this site sets. */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'InterVar'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --------------------------------------------------------------------------- RAW PALETTE. The six official colours, nothing else. Retired Version One colours are banned and the build fails if one appears. --------------------------------------------------------------------------- */ --jet-black: #0D0D0D; /* primary */ --off-white: #F7F4EE; /* primary */ --deep-blue: #1C3555; /* accent, interaction only */ --warm-sand: #C8A876; /* accent, never type on light */ --rich-walnut: #4B2E22; /* accent, material and grounding */ --heritage-cream: #F1E7D6; /* soft neutral */ /* --------------------------------------------------------------------------- SEMANTIC COLOUR. Components reference these, never the raw palette. The 70 / 20 / 10 split lives here: base and text are Jet Black and Off White, secondary surfaces are Heritage Cream, and a single accent carries the last ten percent. --------------------------------------------------------------------------- */ --surface: var(--off-white); --surface-soft: var(--heritage-cream); --surface-inverse: var(--jet-black); --surface-ground: var(--rich-walnut); --text: var(--jet-black); --text-muted: rgba(13, 13, 13, 0.66); /* 0.60 is the lightest this can go and still clear 4.5 to 1 against both Off White (4.96) and Heritage Cream (4.79). These tokens carry small tracked labels, so they are held to the normal text threshold, not the large text one. Do not lighten. */ --text-faint: rgba(13, 13, 13, 0.60); --text-inverse: var(--off-white); --text-inverse-muted: rgba(247, 244, 238, 0.68); /* Interaction. Deep Blue is used here and nowhere else. */ --action: var(--deep-blue); --action-hover: #142743; --action-text: var(--off-white); /* On a Jet Black ground, Deep Blue still owns interaction. The button keeps the Deep Blue fill and gains an Off White hairline so its edge is visible, rather than swapping to a different colour and breaking the signal. Off White is a primary, so the hairline costs nothing from the accent budget. Text links on black step to Heritage Cream, because Deep Blue text on Jet Black is around 1.5 to 1 and simply cannot be read. Heritage Cream is the soft neutral, not a third accent. */ --action-edge-inverse: rgba(247, 244, 238, 0.38); --link-inverse: var(--heritage-cream); /* The live warm accent. Overridden per location mood below. */ --accent-warm: var(--warm-sand); /* THE TWO ACCENT BUDGET The brand book allows two accent colours per application, one being the stronger choice. Every screen on this site spends them the same way: 1. Deep Blue everything a client can act on. Links, buttons, and booking. Never decorative. 2. --accent-warm the single warm accent, used for rules, dividers, icon accents, and small tracked labels. --accent-warm changes per location mood, and only one warm accent is ever live at a time, so no screen ever shows three. On the warm mood it is Rich Walnut, on everything else Warm Sand. Warm Sand is never set as type on a light ground, which is why the warm mood swaps it out for labels rather than tinting them. Off White, Jet Black, and Heritage Cream are primaries and a soft neutral, not accents, so they do not spend from this budget. */ /* Rules and dividers, drawn in the live warm accent. Graphic elements, never type. Brand book section 03, hard rules. */ --rule: color-mix(in srgb, var(--accent-warm) 42%, transparent); --rule-strong: color-mix(in srgb, var(--accent-warm) 72%, transparent); /* Rules on Jet Black are drawn in Off White at low alpha, not in an accent. A hardcoded Warm Sand here put a second warm accent on the Riverside page, which runs on Rich Walnut, and took that screen to three accents. Off White is a primary, so it costs nothing from the budget and stays visible under either mood. */ --rule-inverse: rgba(247, 244, 238, 0.22); --rule-hairline: rgba(13, 13, 13, 0.12); --focus: var(--deep-blue); --focus-inverse: var(--heritage-cream); /* --------------------------------------------------------------------------- TYPE --------------------------------------------------------------------------- */ --font-display: 'roc-grotesk-extrawide', 'Outfit', system-ui, sans-serif; --font-heading: 'roc-grotesk-wide', 'Outfit', system-ui, sans-serif; --font-text: 'aktiv-grotesk-extended', 'InterVar', system-ui, sans-serif; /* Fluid scale. Mobile first: the small end is the phone value. */ --step-display: clamp(2.75rem, 1.45rem + 5.6vw, 5.75rem); --step-h1: clamp(2.25rem, 1.42rem + 3.6vw, 4.25rem); --step-h2: clamp(1.75rem, 1.28rem + 2.05vw, 3rem); --step-h3: clamp(1.3125rem, 1.14rem + 0.74vw, 1.75rem); --step-lede: clamp(1.125rem, 1.05rem + 0.33vw, 1.375rem); --step-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem); --step-small: 0.9375rem; --step-label: 0.66rem; /* 8pt cap per brand type rules */ /* Line heights. Body sits at 1.6, above the 1.55 floor in the brand book. */ --leading-display: 1.02; --leading-heading: 1.1; --leading-lede: 1.55; --leading-body: 1.6; /* Tracking. Headlines tighten slightly, labels track to .15em exactly. */ --tracking-display: -0.025em; --tracking-heading: -0.015em; --tracking-body: 0; --tracking-label: 0.15em; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; /* --------------------------------------------------------------------------- SPACE. A single scale. Sections breathe, which is most of the premium feel. --------------------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* Vertical rhythm between major sections, fluid. */ --section-y: clamp(4rem, 2.4rem + 6.6vw, 9rem); --section-y-tight: clamp(3rem, 2rem + 4vw, 6rem); /* --------------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------------- */ --measure: 68ch; /* readable line length */ --measure-tight: 46ch; --container: 75rem; /* 1200px */ --container-narrow: 46rem; --gutter: clamp(1.25rem, 0.85rem + 1.9vw, 2.5rem); /* Tall enough to hold the logo plus its required clear space: 42px icon plus 21px above and below on small screens, 50px lockup plus 25px above and below from the point the lockup appears. */ --header-h: 5.5rem; /* --------------------------------------------------------------------------- RADIUS. Restrained. Sharp corners read expensive, soft corners read app. --------------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-s: 3px; --radius-pill: 999px; /* --------------------------------------------------------------------------- ELEVATION. Almost none. Depth comes from the palette, not from shadow. --------------------------------------------------------------------------- */ --shadow-s: 0 1px 2px rgba(13, 13, 13, 0.04); --shadow-m: 0 2px 14px rgba(13, 13, 13, 0.06); --shadow-l: 0 18px 48px rgba(13, 13, 13, 0.10); /* --------------------------------------------------------------------------- MOTION. Composed, never eager. Nothing bounces. --------------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --z-header: 100; --z-menu: 200; --z-notice: 300; } @media (min-width: 62em) { :root { --header-h: 6.25rem; } } /* ----------------------------------------------------------------------------- LOCATION MOODS Same components, same palette, two moods. Brand book section 06 and 07. Riverside runs warmer and denser. Newport Beach runs cooler and quieter. These override tokens only. No component knows which shop it is on. ----------------------------------------------------------------------------- */ .mood-warm { /* Riverside. Rich Walnut is the warm accent here, which keeps the page at two accents: Deep Blue for action, Rich Walnut for labels and rules. */ --accent-warm: var(--rich-walnut); --mood-ground: var(--rich-walnut); --mood-rule: color-mix(in srgb, var(--rich-walnut) 34%, transparent); --mood-label: var(--rich-walnut); /* Warmer image grading, applied to photography only. */ --mood-grade: saturate(1.06) contrast(1.03) sepia(0.06); --mood-section-y: var(--section-y-tight); } .mood-cool { /* Newport Beach. Deep Blue for action and labels, Warm Sand for rules and icon accents. Two accents, and the restraint the shop is known for. */ --accent-warm: var(--warm-sand); --mood-ground: var(--jet-black); --mood-rule: rgba(13, 13, 13, 0.14); --mood-label: var(--deep-blue); /* Cooler and cleaner, still inside the same warm neutral family. */ --mood-grade: saturate(0.94) contrast(1.05) brightness(1.02); --mood-section-y: var(--section-y); } /* Shared pages, the homepage and everything that is not a shop page. Deep Blue for action and labels, Warm Sand for rules and icon accents. */ :root { --accent-warm: var(--warm-sand); --mood-ground: var(--rich-walnut); --mood-rule: var(--rule); --mood-label: var(--deep-blue); --mood-grade: none; --mood-section-y: var(--section-y); }