/* ============================================================================ SaraPath Diagnostics — DESIGN TOKENS Single source of truth. Maps 1:1 to theme.json / CSS vars in the WP theme. THE SOURCE IS THE BUILDING -------------------------- 2001 Webber Street is Sarasota-modern: flat white cement planes, a deep cantilevered parapet, horizontal brise-soleil fins on brackets, blue-green glass in a thin white mullion grid, hard-edged shadows, no curves anywhere. The interface is built the same way — every token below is either sampled from assets/images/SPBuilding-2X.tif or derived from the brand marks. Consequences you must not undo: · radius is 0. The building has no rounded corners. · shadows have NO blur. A fin casts a hard edge on stucco; so do we. · light comes from the upper left, so shadows fall down-right. · panels meet at reveal lines (1px), not at borders or gradients. BRAND colours are sampled from the vector logo (two opaque colours only: #00235D and #BA9764) and round to the client's Pantone spec — 2767 / #00245D and 875 / #BA9765. See assets/BRAND.md. ============================================================================ */ :root { /* ---------------------------------------------------------------- brand */ --c-brand-navy: #00245D; /* Pantone 2767 */ --c-brand-gold: #BA9765; /* Pantone 875 */ /* ------------------------------------------- cement (white structure) -- The stucco planes, parapet, fins and curbs. Warm-neutral, never pure. */ --c-cement-0: #FFFFFF; /* fin blade, sunlit edge */ --c-cement-1: #F4F6F7; /* lit stucco plane */ --c-cement-2: #E8EBEE; /* plane in half light */ --c-cement-3: #D6DBE1; /* plane in shade */ --c-cement-4: #C0C7D0; /* deep shade / reveal line */ --c-soffit: #3E4650; /* underside of a cantilever */ --c-lit-edge: #FFFFFF; /* the leading edge of a fin in direct sun */ --c-mount: #A9B2BC; /* the square bracket blocks under a fin */ /* ---------------------------------------------- glass (blue apertures) -- Sampled pane by pane off the window grid. Real glass is not one flat colour: each pane sits at its own angle, so the bays step from sky-lit down to near-black interior, and reflections cut across several at once. */ --c-glass-sky: #5A8AC4; /* pane square on the sky */ --c-glass-1: #416AAF; /* lit bay */ --c-glass-2: #2E4C82; /* standard bay */ --c-glass-3: #1F3565; /* shaded bay */ --c-glass-4: #16233F; /* deep bay */ --c-glass-5: #0C1526; /* interior through the glass */ --c-mullion: #1A2436; /* dark window frame (glazing bar) */ --c-mullion-alu: #C9CFD8; /* aluminium / painted frame */ --c-specular: rgba(255,255,255,.42); /* Pane geometry — the glazing grid every glass surface is divided on. */ --pane-w: 132px; --pane-h: 116px; --pane-bar: 3px; /* ------------------------------------------------------------- brick --- The east wing: running-bond face brick, warm mauve-brown, tight mortar. */ --c-brick-1: #7E5C55; --c-brick-2: #6B4C46; --c-brick-3: #5A3E3A; --c-brick-mortar: #8E736C; /* -------------------------------------------------------------- sky ---- */ --c-sky-1: #6E9BD6; --c-sky-2: #2E6BC4; --c-sky-3: #1E4FA0; /* ------------------------------------------------------------ green ---- */ /* Payment action only. Sits with the navy rather than against it. */ --c-green-1: #2E7D5B; --c-green-2: #24654A; --c-green-3: #1B4E39; /* ------------------------------------------------------------- gold ---- */ --c-gold-1: #E3CDA8; --c-gold-2: #CBAA79; --c-gold-3: #BA9765; /* = brand */ --c-gold-4: #846641; /* text gold: 4.85:1+ on every ground (WCAG 1.4.3, 2026-09-25) */ --c-gold-5: #6E5836; --c-gold-wash: #FAF6EF; /* ---------------------------------------------------------- neutrals --- */ --c-ink: #10192A; --c-ink-soft: #33404F; --c-muted: #5F6E80; --c-white: #FFFFFF; /* --------------------------------------------------- semantic aliases -- */ --c-page: var(--c-cement-1); --c-surface: var(--c-white); --c-surface-sunk: var(--c-cement-2); --c-text: var(--c-ink); --c-text-muted: var(--c-muted); --c-heading: var(--c-brand-navy); --c-link: var(--c-glass-3); --c-link-hover: var(--c-gold-4); --c-eyebrow: var(--c-gold-4); --c-eyebrow-on-dark: var(--c-gold-2); --c-focus-ring: var(--c-brand-navy); /* 14:1 on white; gold was 2.6:1 (WCAG 1.4.11) */ --c-reveal: var(--c-cement-4); /* the 1px joint between planes */ --c-hairline: var(--c-cement-3); /* ---------------------------------------------------------- typography - */ /* The logo wordmark is a Book Antiqua italic serif — headings echo it. Body/labels are Figtree, set tight and architectural. */ --font-display: "Book Antiqua", "Palatino Linotype", Palatino, Georgia, serif; --font-body: "Figtree", Arial, Helvetica, sans-serif; --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --fs-hero: clamp(3rem, 1.6rem + 6vw, 5.5rem); --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4rem); --fs-h2: clamp(2.125rem, 1.6rem + 2.3vw, 3.125rem); --fs-h3: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem); --fs-h4: clamp(1.4375rem, 1.3rem + 0.6vw, 1.75rem); --fs-lead: clamp(1.1875rem, 1.08rem + 0.55vw, 1.4375rem); --fs-body: 1.1875rem; /* 19px — the practice reads at arm's length */ --fs-sm: 1.0625rem; --fs-xs: 0.9375rem; --fs-2xs: 0.875rem; --fs-label: 0.8125rem; --lh-tight: 1.02; --lh-head: 1.12; --lh-body: 1.6; --ls-hero: -0.025em; --ls-head: -0.015em; --ls-label: 0.22em; /* labels are wide and engraved, like signage */ --ls-nav: 0.1em; /* -------------------------------------------------------------- spacing */ /* An 8px structural module — the building is on a bay grid, so are we. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px; --layout-max: 1200px; --layout-gutter: clamp(20px, 3vw, 40px); --section-y: clamp(56px, 6.5vw, 104px); --measure: 62ch; --frame-max: 1200px; /* nothing but the hero photograph exceeds this */ /* --------------------------------------------------------------- form -- Zero radius. This is not negotiable: the building is squared off. */ --radius: 0; /* ----------------------------------------------------- structural lines */ --line-hair: 1px; --line-mullion: 1px; --line-fin: 3px; /* a brise-soleil blade */ --line-parapet: 5px; /* the cantilevered cap */ /* ------------------------------------------------------------- shadows -- Layered and soft. A real shadow has a contact edge, a body and a long ambient falloff — three stops, not one hard offset. Light still comes from the upper left, so everything falls down and slightly right. */ --cast-1: 0 1px 1px rgba(16, 25, 42, .07), 0 2px 4px -1px rgba(16, 25, 42, .09); --cast-2: 0 1px 1px rgba(16, 25, 42, .06), 0 4px 8px -2px rgba(16, 25, 42, .11), 0 8px 18px -6px rgba(16, 25, 42, .10); --cast-3: 0 1px 2px rgba(16, 25, 42, .06), 0 8px 16px -4px rgba(16, 25, 42, .13), 0 20px 38px -12px rgba(16, 25, 42, .16); --cast-4: 0 2px 3px rgba(16, 25, 42, .06), 0 14px 26px -6px rgba(16, 25, 42, .15), 0 34px 60px -20px rgba(16, 25, 42, .22); --cast-glass-2: 0 2px 4px rgba(6, 14, 30, .18), 0 8px 20px -6px rgba(6, 14, 30, .28); --cast-glass-3: 0 3px 6px rgba(6, 14, 30, .20), 0 16px 34px -10px rgba(6, 14, 30, .34), 0 40px 70px -28px rgba(6, 14, 30, .40); --soffit-shadow: 0 14px 34px -12px rgba(16, 25, 42, .40), 0 3px 8px -2px rgba(16, 25, 42, .16); /* -------------------------------------------------------------- bevel -- An edge you can see the thickness of. Every raised surface carries a lit top arris and a shaded bottom one, in the material's own colour — white cement takes a white highlight, gold takes a warm one, navy a cool one. These are inset shadows, so they compose with a cast in one property. */ --bevel-cement: inset 0 2px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -2px 0 rgba(16,25,42,.10); --bevel-gold: inset 0 2px 0 rgba(255,247,232,.50), inset 0 -2px 0 rgba(88,64,30,.42); --bevel-navy: inset 0 2px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,10,30,.60); --bevel-glass: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,10,30,.45); /* ------------------------------------------------------------- stucco -- A cement face at close range. Not a two-stop ramp — real stucco takes the light in from one corner, holds it across the upper third, and falls away to the sill, and there is a soft specular band lying across it where the surface is smoothest. Four layers, no hard steps. `--specular-band` is sized 200% and slid on hover, so the light travels across the face rather than the panel simply getting brighter. It is a BACKGROUND layer on purpose — as a pseudo-element it would wash over the label. */ --stucco: radial-gradient(140% 100% at 18% -18%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 58%), linear-gradient(178deg, #FFFFFF 0%, #FDFEFE 32%, #F7F9FB 64%, #ECF0F4 100%); --specular-band: linear-gradient(104deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.70) 45%, rgba(255,255,255,0) 64%); /* the same band, tinted to the material it crosses */ --specular-warm: linear-gradient(104deg, rgba(255,248,235,0) 26%, rgba(255,248,235,.42) 45%, rgba(255,248,235,0) 64%); --specular-cool: linear-gradient(104deg, rgba(190,225,255,0) 26%, rgba(190,225,255,.34) 45%, rgba(190,225,255,0) 64%); /* --------------------------------------------------------- fine edging -- An edge read as a change in light rather than as a drawn border: white along the head, a hint of ink along the sill, and a graded ring holding the whole shape. Replaces `border: 1px solid` on anything that should feel like a surface instead of a box. */ --edge-fine: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -1px 0 rgba(16,25,42,.09), inset 0 -16px 20px -18px rgba(16,25,42,.18), 0 0 0 1px rgba(16,25,42,.055); /* contact, body, ambient — three stops, all of them light */ --cast-fine: 0 1px 1px rgba(16,25,42,.05), 0 3px 6px -2px rgba(16,25,42,.07), 0 12px 26px -10px rgba(16,25,42,.16); --cast-fine-lift: 0 1px 1px rgba(16,25,42,.05), 0 6px 12px -4px rgba(16,25,42,.09), 0 22px 40px -14px rgba(16,25,42,.22); /* ---------------------------------------------------------- double line -- A hairline, a gap, then a second hairline — the reveal a real frame leaves around a panel. Drawn as spread-only shadows so it needs no extra element and no border. Two versions: one for a panel standing on glass, one for a panel standing on cement. */ --frame-on-glass: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 9px rgba(255,255,255,.05), 0 0 0 10px rgba(255,255,255,.20); --frame-on-cement: 0 0 0 1px var(--c-cement-4), 0 0 0 9px rgba(255,255,255,0), 0 0 0 10px var(--c-cement-3); /* --------------------------------------------------------------- sheen -- The light that sits ON a surface. Used on plates and glass so nothing reads as a flat fill. */ --sheen-light: linear-gradient(178deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 20%), linear-gradient(178deg, rgba(16,25,42,0) 80%, rgba(16,25,42,.035) 100%); --sheen-glass: radial-gradient(130% 90% at 20% -14%, rgba(226,240,255,.34), rgba(226,240,255,0) 62%), linear-gradient(178deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 24%); --sheen-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(16,25,42,.05); --sheen-edge-glass: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.12); /* -------------------------------------------------------------- motion - Buildings do not bounce. Movement is a shift along an axis, linear-ish. */ --dur-press: .09s; --dur-hover: .14s; /* A surface changing state. Long enough to read as a fade rather than a switch, short enough that the pointer has not moved on. Everything that lights up on approach uses this ONE duration and this one curve — mixed timings on the same element is what reads as a jerk. */ --dur-glaze: .26s; --ease-glaze: cubic-bezier(.33, 0, .2, 1); --dur-slide: .42s; --ease: cubic-bezier(.2, .0, .2, 1); --rail-h: 48px; /* utility rail height — the sticky offset uses it */ /* -------------------------------------------------------------- bevel -- An edge you can see the thickness of. Every raised surface carries a lit top arris and a shaded bottom one, in the material's own colour — white cement takes a white highlight, gold takes a warm one, navy a cool one. These are inset shadows, so they compose with a cast in one property. */ --bevel-cement: inset 0 2px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -2px 0 rgba(16,25,42,.10); --bevel-gold: inset 0 2px 0 rgba(255,247,232,.50), inset 0 -2px 0 rgba(88,64,30,.42); --bevel-navy: inset 0 2px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,10,30,.60); --bevel-glass: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,10,30,.45); /* ------------------------------------------------------------- stucco -- A cement face at close range. Not a two-stop ramp — real stucco takes the light in from one corner, holds it across the upper third, and falls away to the sill, and there is a soft specular band lying across it where the surface is smoothest. Four layers, no hard steps. `--specular-band` is sized 200% and slid on hover, so the light travels across the face rather than the panel simply getting brighter. It is a BACKGROUND layer on purpose — as a pseudo-element it would wash over the label. */ --stucco: radial-gradient(140% 100% at 18% -18%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 58%), linear-gradient(178deg, #FFFFFF 0%, #FDFEFE 32%, #F7F9FB 64%, #ECF0F4 100%); --specular-band: linear-gradient(104deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.70) 45%, rgba(255,255,255,0) 64%); /* the same band, tinted to the material it crosses */ --specular-warm: linear-gradient(104deg, rgba(255,248,235,0) 26%, rgba(255,248,235,.42) 45%, rgba(255,248,235,0) 64%); --specular-cool: linear-gradient(104deg, rgba(190,225,255,0) 26%, rgba(190,225,255,.34) 45%, rgba(190,225,255,0) 64%); /* --------------------------------------------------------- fine edging -- An edge read as a change in light rather than as a drawn border: white along the head, a hint of ink along the sill, and a graded ring holding the whole shape. Replaces `border: 1px solid` on anything that should feel like a surface instead of a box. */ --edge-fine: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -1px 0 rgba(16,25,42,.09), inset 0 -16px 20px -18px rgba(16,25,42,.18), 0 0 0 1px rgba(16,25,42,.055); /* contact, body, ambient — three stops, all of them light */ --cast-fine: 0 1px 1px rgba(16,25,42,.05), 0 3px 6px -2px rgba(16,25,42,.07), 0 12px 26px -10px rgba(16,25,42,.16); --cast-fine-lift: 0 1px 1px rgba(16,25,42,.05), 0 6px 12px -4px rgba(16,25,42,.09), 0 22px 40px -14px rgba(16,25,42,.22); /* ---------------------------------------------------------- double line -- A hairline, a gap, then a second hairline — the reveal a real frame leaves around a panel. Drawn as spread-only shadows so it needs no extra element and no border. Two versions: one for a panel standing on glass, one for a panel standing on cement. */ --frame-on-glass: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 9px rgba(255,255,255,.05), 0 0 0 10px rgba(255,255,255,.20); --frame-on-cement: 0 0 0 1px var(--c-cement-4), 0 0 0 9px rgba(255,255,255,0), 0 0 0 10px var(--c-cement-3); /* --------------------------------------------------------------- sheen -- The light that sits ON a surface. Used on plates and glass so nothing reads as a flat fill. */ --sheen-light: linear-gradient(178deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 20%), linear-gradient(178deg, rgba(16,25,42,0) 80%, rgba(16,25,42,.035) 100%); --sheen-glass: radial-gradient(130% 90% at 20% -14%, rgba(226,240,255,.34), rgba(226,240,255,0) 62%), linear-gradient(178deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 24%); --sheen-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(16,25,42,.05); --sheen-edge-glass: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.12); /* -------------------------------------------------------------- motion - Buildings do not bounce. Movement is a shift along an axis, linear-ish. */ --dur-press: .09s; --dur-hover: .14s; /* A surface changing state. Long enough to read as a fade rather than a switch, short enough that the pointer has not moved on. Everything that lights up on approach uses this ONE duration and this one curve — mixed timings on the same element is what reads as a jerk. */ --dur-glaze: .26s; --ease-glaze: cubic-bezier(.33, 0, .2, 1); --dur-slide: .42s; --ease: cubic-bezier(.2, .0, .2, 1); --rail-h: 48px; /* utility rail height — the sticky offset uses it */ /* The phone masthead, pinned to a known height so the hero can be exactly the rest of the screen. Overridden at the phone breakpoint in responsive.css; the value here keeps `calc(100svh - var(--masthead-h))` valid at every width. */ --masthead-h: 136px; --z-header: 50; } @media (prefers-reduced-motion: reduce) { :root { --dur-press: .01ms; --dur-hover: .01ms; --dur-glaze: .01ms; --dur-slide: .18s; } }