/* * tokens.css - the single design-token contract for rlj-theme. * * Section 4 of spec/00-BUILD-SPEC.md, emitted verbatim. Every value here was * MEASURED from the live site's computed styles, not read out of * generate_settings, because with use_dynamic_typography:true the flat legacy * option keys are lies (heading_1_font_size:76 would turn every h1 from 30px * into 76px sitewide). * * Rules for anyone editing this file: * - Change a value here, never in a package stylesheet. Package stylesheets * consume tokens; they do not redefine measurements. * - The seven GP palette names (--contrast .. --accent) keep their GP names on * purpose. Page content, the migrated Customizer CSS and WooCommerce markup * all reference them, so renaming them is a silent breakage. * - Do NOT set html{font-size}. `rem` appears in exactly two places on this * site (the category generated headings and loop category titles) and both * assume the browser default of 16px. */ :root { /* --------------------------------------------------------------- Palette. The seven GP names are a compatibility contract. --------------------------------------------------------------- */ --contrast: #222222; --contrast-2: #575760; --contrast-3: #b2b2be; --base: #f0f0f0; --base-2: #f7f8f9; --base-3: #ffffff; --accent: #1e73be; /* Core preset aliases, so block content keeps resolving its colours. */ --wp--preset--color--contrast: var(--contrast); --wp--preset--color--contrast-2: var(--contrast-2); --wp--preset--color--contrast-3: var(--contrast-3); --wp--preset--color--base: var(--base); --wp--preset--color--base-2: var(--base-2); --wp--preset--color--base-3: var(--base-3); --wp--preset--color--accent: var(--accent); /* --------------------------------------------------------------- text and surface */ --text: #161616; /* body copy, 1,579 nodes site-wide */ --page-bg: #ffffff; --link: #222222; --link-hover: #2140cc; /* essentially never seen; snippet 31 wins in prose */ --prose-link: #9a6a00; /* .entry-content only, owned by snippet 31 */ --prose-link-hover: #7d5600; /* raised from #b8860b: 3.25:1 -> 6.29:1 */ --gold: #b8860b; /* decorative only: CTA left border, rules */ --gold-on-cream: #8f6200; /* gold inside #faf6ea boxes: 4.38:1 -> 4.86:1 */ --cream: #faf6ea; --cream-border: #e8d9a8; --meta: #595959; --meta-hover: #1e73be; --rule-color: rgba(0, 0, 0, 0.1); /* hr, table and cell borders */ --wash: rgba(0, 0, 0, 0.05); /* blockquote rule, pre background */ --abbr-underline: #666666; /* the dotted underline under abbr[title] */ --muted: #555555; --breadcrumb: #767676; --free-shipping: #333333; /* --------------------------------------------------------------- chrome */ --header-bg: rgba(230, 231, 232, 0); /* transparent everywhere but the front page */ --header-bg-merged: rgba(255, 255, 255, 0.8); /* front page, >=769px */ --header-text: #3a3a3a; --site-title: #222222; --nav-bg: #ffffff; --nav-text: #121212; --nav-hover-bg: #ffffff; /* retained for reference; top-level hover no longer paints a panel */ --nav-hover-text: #9a6a00; /* brand gold, 4.73:1 on the header background */ --nav-current-bg: rgba(63, 63, 63, 0); /* * Sub-menu colours. The live stored values are link #515151 on #3f3f3f, * about 1.4:1, which is GP demo-content leftover rather than a design * decision. Every state here is set to >= 4.5:1 on the #3f3f3f panel. * WP2 owns open item O2b: measure resting / hover / focus / current with a * dropdown actually open at BOTH levels, then confirm or correct these four. */ --subnav-bg: #3f3f3f; --subnav-text: #e8e8e8; /* 9.6:1 on #3f3f3f */ --subnav-hover-bg: #4f4f4f; --subnav-hover-text: #ffffff; /* 7.9:1 on #4f4f4f */ --subnav-current-text: #ffffff; --slideout-bg: rgba(255, 255, 255, 0.95); --slideout-text: #121212; --slideout-active-bg: #b2b2be; --slideout-active-text: #ffffff; --slideout-overlay: rgba(0, 0, 0, 0.8); --modal-overlay: rgba(0, 0, 0, 0.2); /* * Rest state was rgba(0,0,0,0.4), which composites to rgb(153,153,153) on the * white page and left the white chevron at 2.32:1, i.e. legible only once you * hovered it. Inherited from GeneratePress, reported 2026-08-10. 0.6 composites * to rgb(102,102,102) and clears 4.5:1 at 5.74:1. */ --back-to-top-bg: rgba(0, 0, 0, 0.6); --back-to-top-bg-hover: rgba(0, 0, 0, 0.78); /* --------------------------------------------------------------- forms */ --form-text: #666666; --form-bg: #fafafa; --form-border: #cccccc; --form-bg-focus: #ffffff; --form-border-focus: #bfbfbf; /* --------------------------------------------------------------- buttons */ --btn-bg: #222222; --btn-text: #ffffff; --btn-bg-hover: #444444; /* --------------------------------------------------------------- commerce */ --price: #222222; --loop-link: #000000; --sale-bg: #222222; --sale-text: #ffffff; --notice-bg: #222222; --notice-text: #ffffff; --notice-error-bg: #e8626d; --star-filled: #ffa200; --star-empty: rgba(0, 0, 0, 0.4); --price-track: #dddddd; --cart-bubble-bg: rgba(0, 0, 0, 0.05); /* --------------------------------------------------------------- archives */ --archive-heading: #2a2a2a; --archive-rule: #cbbfa9; /* --------------------------------------------------------------- blogroll cards */ --card-border: #eeeeee; --card-thumb-bg: #f3f1ec; --card-cat: #9a6a00; /* was #b8860b: 3.25:1 -> 4.73:1, kills 120 axe nodes */ /* =============================================================== Type. Four families, all self-hosted by snippet 61 in phase 1. The theme enqueues ZERO font CSS (ruling C3); these names only have to match what snippet 61's @font-face rules declare. =============================================================== */ --font-body: "Catamaran", sans-serif; --font-heading: "Playfair Display", serif; --font-nav: "Lato", sans-serif; --font-title: "Tangerine", handwriting; --font-mono: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; /* * Live defect A: the currency symbol computes Times New Roman 700 while the * amount beside it computes Catamaran 700, so every price mixes two * typefaces mid-token. Fixed by pointing this at the body face. To restore * the old look, set this back to "Times New Roman", Georgia, "Noto Serif", serif. */ --font-currency: var(--font-body); --fs-body: 19px; --lh-body: 1.6; --fw-body: 300; --fs-h1: 30px; --lh-h1: 1.1; --fw-h1: 300; /* Playfair */ --fs-h2: 25px; --lh-h2: 1.2em; --fw-h2: 400; /* Playfair */ --fs-h3: 24px; --lh-h3: 1.2em; --fw-h3: 500; /* Catamaran, inherited. Not a bug */ --fs-h4: 20px; --lh-h4: 1.2; --fw-h4: 500; /* Catamaran */ --fs-h5: 20px; --fs-h6: 19px; --heading-margin-bottom: 20px; --paragraph-margin-bottom: 1.5em; /* = 28.5px. paragraph_margin:1.6 emits nothing */ --fs-title: 65px; --fs-title-mobile: 40px; --fw-title: 700; --fs-hero: 76px; --fs-hero-1024: 54px; --fs-hero-768: 36px; --fs-hero-home-768: 50px; /* Customizer beats --fs-hero-768 on the home page */ --fs-nav: 16px; --lh-nav: 60px; --lh-nav-mobile: 50px; --fs-subnav: 14px; --fs-slideout: 40px; --fs-slideout-mobile: 24px; --lh-slideout: 40px; --fs-button: 15px; --fw-button: 600; /* bare