/** * Walcott Radio — Customer-Facing Theme Standard * ============================================================================ * * THE standardized theme for all customer-facing pages: colors, typography, * and the site-wide PRICE treatment. Source of truth (human-readable spec): * admin/dashboard_v3/docs/STYLE_REFERENCE.md * Conformance status per page: * admin/dashboard_v3/docs/THEME_CONFORMANCE_AUDIT.md * * Relationship to design-tokens.css: * csr-includes/css/design-tokens.css (edited by the dashboard module * layout.design_tokens) is the LEGACY header/nav token system with the old * navy/amber palette. It stays in place for the header templates that * consume it. THIS file carries the 2026 redesign palette (`--wrt-*` * prefix, no collisions) and should be referenced by all NEW / redesigned * customer-facing surfaces. Long-term the legacy tokens migrate here. * * FONTS (load once per page — pages must include this Google Fonts link): * * - Body / UI copy: Inter (400–800) * - Prices, display numerals, headings: Barlow Semi Condensed (500–800) * - RETIRED for these roles: Bebas Neue, Open Sans price style, Segoe UI * system stack. Barlow is display-only — never body copy. * * PRICE OUTPUT — THE standard markup, use everywhere a price renders: * $599.95 * - single baseline, tabular figures, de-emphasized `$` (~0.68em / wt 500) * - NO superscript cents, ever * - sale/now price = .wr-price--sale (red); was price = .wr-price--was * - size by context: PDP hero clamp(44px,6vw,58px); tier/section 27–34px; * card/list 26–34px; add-on/line-item ~22px. The `.cur` em-ratio holds * at every size, so only font-size needs setting per context. * Page-scoped price classes (e.g. .pv3-price) may keep their own names but * MUST match these values — treat this file as the reference implementation. * * @version 1.2.0 * 1.2.0 (2026-09-29) FITMENT VERDICT BADGE (.wr-fit / --fits / --unknown / --no), * a three-state role added for the vehicle finder and needed unchanged by * the category page, which is why it lives here rather than page-scoped. * No new tokens: it composes the existing success, neutral and dark-panel * roles. The decision worth carrying is that "does not fit" is NOT red — * red belongs to the buy path and must stay the most prominent red on the * page, so the refusal takes the dark surface instead. * See docs/STYLE_REFERENCE.md § Fitment verdict states. * 1.1.0 (2026-08-25) DARK-SURFACE ROLES. The B2B landing page system needs * content sitting ON the dark bands (hero, capability band, footer), * a role the palette had tokens for the background of but not the * foreground. Adds --wrt-text-on-dark / --wrt-text-on-dark-dim / * --wrt-border-on-dark, plus --wrt-red-tint for the pale red chip * behind accent icons on light sections. No existing values changed — * these are additive, and the B2B pages consume the existing * --wrt-dark / --wrt-dark-panel surfaces rather than forking a second * near-black. See docs/STYLE_REFERENCE.md § Dark surfaces. * 1.0.0 (2026-07-24) — initial standard: 2026 palette tokens + * Barlow Semi Condensed price component (handoff: typography_and_price) */ :root { /* ------------------------------------------------------------------ 2026 CUSTOMER-FACING PALETTE (--wrt- = "walcott radio theme") ------------------------------------------------------------------ */ /* Action / buy funnel — red is THE single action color (Add to Cart, checkout, savings, urgency). Never use it as a big background band. */ --wrt-red: #CF1C3C; --wrt-red-hover: #B01730; /* Navigation / links / selection / promo bar — blue */ --wrt-blue: #3968BA; --wrt-blue-hover: #2F5AA0; --wrt-link-hover: #2B4F8E; /* Reward / ratings */ --wrt-gold: #FCB002; --wrt-gold-deep: #9A6B00; /* gold text on white (contrast-safe), labor/service labels */ /* Dark surfaces */ --wrt-dark: #0C0D0F; /* header band */ --wrt-dark-panel: #16181B; /* module headers, cart bar */ --wrt-ink: #191A1C; /* primary text */ --wrt-dark-hover: #2F3135; /* Text */ --wrt-text: #191A1C; --wrt-text-secondary: #55585E; --wrt-text-muted: #8A8E94; --wrt-text-faint: #9CA0A6; /* Text / borders ON the dark surfaces above. Dim is the dark-surface equivalent of --wrt-text-secondary: body copy that must recede without dropping below 4.5:1 on --wrt-dark. */ --wrt-text-on-dark: #FFFFFF; --wrt-text-on-dark-dim: #9B9DA8; --wrt-border-on-dark: rgba(255,255,255,.14); /* Pale red chip behind accent icons on light sections. Red as a *tint* is not the buy-path red — never use it for a CTA fill. */ --wrt-red-tint: #FDEAEE; /* Borders / surfaces */ --wrt-border: #E1E3E7; --wrt-border-soft: #E7E9ED; --wrt-surface: #F0F1F3; /* tiles, section header rows, qty buttons */ --wrt-surface-hover: #F7F8F9; --wrt-page-bg: #E9EBED; /* grey page — white cards float on it */ /* Success (in-stock, included, free-gift) */ --wrt-green: #1F8A5B; --wrt-green-text: #1F6B3B; --wrt-green-bg: #F0FAF3; --wrt-green-border: #DCF0E2; /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ --wrt-font-body: 'Inter', system-ui, sans-serif; --wrt-font-display: 'Barlow Semi Condensed', 'Inter', sans-serif; /* ------------------------------------------------------------------ SHAPE / ELEVATION ------------------------------------------------------------------ */ --wrt-radius-card: 16px; --wrt-radius-inner: 12px; --wrt-radius-thumb: 10px; --wrt-shadow-card: 0 1px 2px rgba(8,8,8,.04), 0 18px 40px -20px rgba(8,8,8,.18); } /* ========================================================================== PRICE COMPONENT — the reference implementation. $599.95 ========================================================================== */ .wr-price { font-family: var(--wrt-font-display); font-weight: 700; line-height: 1; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; color: var(--wrt-ink); } .wr-price .cur { font-size: .68em; font-weight: 500; vertical-align: .06em; margin-right: .03em; } .wr-price--sale { color: var(--wrt-red); } .wr-price--was { color: var(--wrt-text-muted); text-decoration: line-through; font-weight: 500; } /* ========================================================================== FITMENT VERDICT BADGE — vehicle fitment state on a product card or row. Fits your vehicle THREE STATES, NOT TWO, and that is the whole point of the component. Absence of fitment data is NOT a refusal, so "not confirmed" must read as neutral rather than negative — coverage is partial, and a neutral product outnumbers both other states in every category today. RED IS NOT USED FOR "DOES NOT FIT". Red belongs to the buy path (per the color-role model, it stays the single most prominent red on the page), and spending it on a negative state would put the loudest color in the palette on the products a customer should ignore. The dark surface carries the refusal instead: authoritative, legible, and unmistakably not a call to action. ========================================================================== */ .wr-fit { display: inline-block; font-family: var(--wrt-font-body); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; padding: 5px 9px; border-radius: 999px; border: 1px solid transparent; } /* Success role, shared with in-stock / included / free-gift. */ .wr-fit--fits { background: var(--wrt-green-bg); border-color: var(--wrt-green-border); color: var(--wrt-green-text); } /* Neutral. Deliberately quiet: this is the majority state, not a warning. */ .wr-fit--unknown { background: #F0F1F3; border-color: var(--wrt-border); color: var(--wrt-text-secondary); } /* Refusal. Dark, never red — see the note above. */ .wr-fit--no { background: var(--wrt-dark-panel); border-color: var(--wrt-dark-panel); color: var(--wrt-text-on-dark); }