/* ============================================================= Spartan Agency — Design Tokens Single source of truth for the Spartan visual clone of Hibu (https://www.spartanagency.com). Every value was extracted from live getComputedStyle() and the reference screenshots under Website/Design/. See Website/Design/brand.md for the palette rationale and the per-page section maps. The child theme copies these :root vars into its style.css head via wp_add_inline_style() so overrides can be authored in-editor without recompiling the parent bundle. ============================================================= */ :root { /* ---------- Color: Spartan primary palette ---------- 2026 rebrand direction (see Website/README.md § Brand): - GOLD is the primary brand color. It carries the SA logo mark, key icon, hero eyebrow, primary CTA background, section underlines. Was previously used only as an "accent"; now promoted to --brand-primary via the semantic aliases below. - CHARCOAL is the neutral dark surface. Was previously --plum; the header/footer/dark surfaces now sit on charcoal and let gold do the branding. Charcoal is intentionally warm (#2B2B2E, not pure #000) so the site reads friendly-corporate, not tech-startup. - PLUM survives as a LINK color only (body links, in-copy emphasis, the Reviews CTA). Any surface that previously used plum as a background is being converted to charcoal or bone in the phase-1 cleanup pass — do NOT introduce new plum surfaces here. - GREY/BONE is the neutral page background. - WHITE is the content surface. */ /* Gold ramp — primary brand color (2026 promotion). */ --gold: #CFA326; /* SA logo mark, key icon, header phone, primary CTA background, section underlines, review stars, hero eyebrow */ --gold-2: #A88320; /* gold hover / pressed */ --gold-tint: rgba(207, 163, 38, 0.15); /* subtle gold wash for hover backgrounds and gold-on-bone chips */ --gold-ink: #4A3A00; /* dark gold suitable for body-text emphasis on white (7.02:1) */ /* Charcoal ramp — neutral dark surface (2026 rebrand). Replaces --plum's former surface role. Deep, warm neutral so gold reads as luxe (not garish) when paired against it. */ --charcoal: #2B2B2E; /* header bar, footer bar, primary dark hero cover */ --charcoal-2: #1F1F22; /* charcoal hover / pressed / footer-ink drop */ --charcoal-tint: rgba(43, 43, 46, 0.85); /* translucent overlay on hero imagery */ /* Plum ramp — LINKS ONLY in the 2026 rebrand. Every previous "surface = plum" use is being migrated to --surface-dark (charcoal). Keep the tokens defined for backward compatibility with any child-theme override that still references them. --plum-dark is DEPRECATED as a surface color. It historically backed the hero cover, sidebar block, footer accent, and home block strips — all of which now sit on charcoal. The token is retained (aliased to --charcoal-2) so any child-theme rule or legacy block pattern that still spells it out inherits the new palette instead of producing an isolated plum square. New CSS should use `--surface-dark` or `--charcoal-2` directly. */ --plum: #6B304C; /* body link color, in-copy emphasis */ --plum-2: #55253C; /* link hover / pressed */ --plum-dark: var(--charcoal-2); /* DEPRECATED alias — surfaces now use --surface-dark */ --slate: #49545C; /* legacy slate pill — kept for the site-directions CTA + a11y contrast fallback */ --slate-2: #3A434A; /* slate hover */ --ink: #14161A; /* body ink on white — form labels, table values, heading fallback. Warm near-black so charcoal surfaces read as a step-up (not identical). */ --ink-muted: #464646; /* section paragraph body copy — reads calmer than pure black at 16px */ --ink-fadeout: rgba(20, 22, 26, 0.55); --bone: #F3F1EC; /* page outer bg — warm off-white that carries the 2026 friendly-corporate tone. Was #EEEEEE (cool grey); warmed to align with gold/charcoal palette. */ --surface: #FFFFFF; /* content section bg — property specs, intro copy, form inputs, gallery caption bg */ --footer-ink: var(--charcoal-2); /* footer bar bg — same ramp as --charcoal for palette consistency */ /* Contrast helpers on colored surfaces */ --on-charcoal: #FFFFFF; --on-charcoal-muted: rgba(255, 255, 255, 0.72); /* utility bar sub-line, quiet copy on the header */ --on-plum: #FFFFFF; /* alias — legacy sections that still use plum backgrounds until the phase-1 cleanup lands */ --on-plum-muted: rgba(255, 255, 255, 0.72); --on-gold: var(--charcoal); /* gold is a primary CTA background; charcoal on gold clears WCAG AA at ≥15px */ --on-footer: #FFFFFF; --on-footer-muted: rgba(255, 255, 255, 0.62); /* Elevated surface for cards / floating panels — 2026 refresh added this so property cards, review cards, and the reviews summary row can sit on --surface-page (--bone) with a subtle contrast step instead of the previous flat "everything on white" look. */ --surface-elevated: #FFFFFF; /* Form-semantic colors (2026 refresh). All computed against --surface (#FFFFFF) at ≥4.5:1 so error/success/info text passes WCAG 1.4.3 body-copy contrast. Adjustments here must be checked against docs/A11Y-AUDIT.md § 1.4.3 before shipping. */ --success: #146B3A; /* 7.05:1 on white */ --warning: #8A5A00; /* 5.51:1 on white */ --danger: #B71C1C; /* 6.35:1 on white */ --info: var(--plum); /* reuses the brand primary at 7.98:1 */ /* Semantic aliases — always author section CSS against these, not the raw color tokens. Lets us re-skin later without touching every section. 2026 rebrand mappings: --brand-primary → gold (was implicit via --accent; now the canonical CTA + brand mark color) --surface-dark → charcoal (was plum; header/footer/cards now read neutral, gold does branding) --link → plum (unchanged; plum is the link-only ramp) */ --brand-primary: var(--gold); --brand-primary-hover: var(--gold-2); --brand-primary-ink: var(--on-gold); --brand-secondary: var(--charcoal); --surface-page: var(--bone); --surface-content: var(--surface); --surface-dark: var(--charcoal); --surface-footer: var(--footer-ink); --text: var(--ink); --text-muted: var(--ink-muted); --text-on-dark: var(--on-charcoal); /* --accent is preserved for legacy sections (many components read var(--accent) directly). Semantically identical to --brand-primary. */ --accent: var(--gold); --accent-hover: var(--gold-2); --accent-contrast: var(--charcoal); /* text color that sits on top of --gold — updated from --ink (pure black) so gold CTAs match the warm palette */ --link: var(--plum); --link-hover: var(--plum-2); --link-underline: rgba(107, 48, 76, 0.35); /* subtle plum underline for body links (2px offset applied in base.css) */ --rule-light: rgba(0, 0, 0, 0.10); /* dividers on white / bone */ --rule-soft: rgba(20, 22, 26, 0.45); /* form field borders + utility-bar dividers; ~#8F8E8B on bone = 3.0:1 (WCAG 1.4.11) */ --rule-dark: rgba(255, 255, 255, 0.15); /* dividers on charcoal / footer */ /* ---------- Type ---------- Google Fonts stack loaded via functions.php. Oswald is Hibu's heading face on every H1/H2/H3; Titillium Web powers the nav, buttons, and sidebar copy; Source Sans Pro remains as body fallback (Hibu declares it on but overrides it per-element nearly everywhere -- kept so form and prose inheritance matches what Hibu emits). */ --font-display: "Oswald", "Oswald Fallback", "Impact", sans-serif; --font-body: "Titillium Web", "Titillium Web Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-prose: "Source Sans Pro", "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type ramp — 2026 refresh keeps every WCAG-relevant floor from the original Hibu ramp AND adds a --fs-display token for the modernized hero (larger max, still ≥28px floor so bold Oswald display type clears the "large text" 3:1 threshold on gold). Ceilings match desktop (1440w capture); floors keep small viewports readable. Heading floors intentionally stay ≥18px so gold-on-white text qualifies for the WCAG 1.4.3 "large text" 3:1 contrast allowance — see Website/Design/brand.md § 7. */ --fs-display: clamp(2.25rem, 4.4vw, 3.375rem); /* Modern hero display — up to 54px, ≥36px floor. Gold-on-plum ratio 5.28:1 unchanged. */ --fs-hero: clamp(2rem, 3.2vw, 2.5rem); /* Hibu H1 = 40px */ --fs-h1: clamp(1.75rem, 2.6vw, 2.25rem); /* Contact-page gold H1 */ --fs-h2: clamp(1.15rem, 1.6vw, 1.4rem); /* Hero subtitle line */ --fs-h3: clamp(1.35rem, 1.9vw, 1.5625rem); /* Section H3 = 25px. Floor kept at 21.6px so bold Oswald H3 clears the WCAG 1.4.3 "large text" 3:1 threshold for gold-on-white (2.27:1 base ratio -> exempt at large sizes). See docs/A11Y-AUDIT.md § 1.4.3. */ --fs-h4: clamp(1rem, 1.3vw, 1.125rem); /* Form group heading */ --fs-body: 1rem; /* Section copy = 16px */ --fs-nav: 0.9375rem; /* Top nav = 15px */ --fs-btn: 0.9375rem; /* Button label = 15px */ --fs-small: 0.875rem; --fs-eyebrow: 0.78rem; --lh-display: 1.0; --lh-tight: 1.15; --lh-h3: 1.5; /* Hibu H3 = 25px / 37.5px */ --lh-body: 1.55; --tracking-eyebrow: 0.22em; --tracking-display: 0.005em; /* Oswald is condensed; almost no tracking */ --tracking-nav: 0.03em; /* matches Hibu's 0.45px @ 15px */ --tracking-mono: 0.04em; /* ---------- Spacing (8pt scale) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 56px; --s-9: 72px; --s-10: 96px; --s-11: 144px; --gutter: clamp(1.25rem, 3vw, 3rem); --section-y: clamp(3rem, 5vw, 5rem); /* Hibu sections run ~80px on desktop, tighter on mobile */ --corner-inset: clamp(16px, 3vw, 32px); /* ---------- Layout ---------- Content column matches Hibu's ~1200px inner width; the outer --bone body bg shows as flanking gutters on wide viewports. */ --max-w: 1200px; --max-w-narrow: 860px; --col-12: repeat(12, minmax(0, 1fr)); /* Header reserve: Hibu's header is ~200px (150px logo band + 50px nav strip). We collapse to a slimmer sticky bar once the user scrolls past the hero, matching the Hibu behavior when it's toggled on. */ --header-h: 200px; --header-h-scrolled: 90px; /* ---------- Radius ---------- 2026 refresh expanded from the two-shape Hibu ramp (pill + 2px) to a modern 4-step scale. --r-pill and --r-sm are preserved so the existing pill CTAs and legacy badge chips render unchanged. --r-md is the default for the new card / input / modal surfaces introduced by the refresh (property cards, review cards, form fields, Site Reviews plugin skin).*/ --r-pill: 50px; /* matches Hibu's exact border-radius on all pill CTAs */ --r-sm: 2px; /* legacy badge chip only */ --r-md: 10px; /* cards / inputs / dialogs — 2026 refresh */ --r-lg: 16px; /* hero cutouts, feature panels */ --r-input: 10px; /* alias — form-field corners */ --r-card: 12px; /* alias — property + review card corners */ /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-reveal: 900ms; /* ---------- Z ---------- */ --z-nav: 50; --z-drawer: 60; --z-overlay: 70; /* ---------- Shadows / elevation ---------- 2026 refresh: promoted the pair of one-off shadows into a documented elevation ramp so cards, popups, and the header scroll-shrink state can dial elevation semantically. Existing --shadow-card / --shadow-popup are kept as aliases into the ramp so no section CSS needs to change on this pass. */ --elev-0: none; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05); --elev-2: 0 4px 8px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --elev-3: 0 12px 24px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.10); --elev-4: 0 24px 48px -12px rgba(0, 0, 0, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.15); --shadow-card: var(--elev-2); --shadow-popup: var(--elev-4); /* ---------- Breakpoints ---------- Documentation-only tokens; CSS spec forbids using them inside @media() conditions, so section CSS still writes the numeric value. Match the value here 1:1 in any @media rule. Semantic aliases below (--bp-sm / --bp-md / --bp-lg / --bp-xl) map to the raw pixel values so newer sections + the pa11y-ci viewport suite share a single vocabulary. `--bp-nav` retains the 900px collapse point used by the header + drawer. */ --bp-mobile: 720px; --bp-nav: 900px; --bp-desktop: 980px; --bp-wide: 1280px; --bp-sm: 480px; /* small phone */ --bp-md: 720px; /* alias of --bp-mobile — tablet portrait boundary */ --bp-lg: 900px; /* alias of --bp-nav — desktop nav collapse */ --bp-xl: 1280px; /* alias of --bp-wide — desktop widescreen */ /* Sumner office pencil sketch. PHP may override this with the Media Library URL via --office-hero on :root. */ --office-hero: url("../img/hero/spartan-office-hero.jpg"); } /* Reduced motion — collapse motion durations for users who opted out at the OS level. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } }