/* =========================================================================== Tokens — the ONLY file in this theme where a raw value may appear. Everything else references these custom properties. Brand ramps live in theme.json (as --wp--preset--*). This file adds the semantic layer components actually consume, so a component never has to know whether "the border colour" is a shade of driftwood. Every colour below is derived from the logo, then measured. Hue and saturation come from sampling the logo files; lightness is solved for the contrast each role has to meet: wordmark ink #00151A hsl(192, 100%, 5%) -> the river ramp's floor logo mark field #163A4A hsl(198, 54%, 19%) -> river-700, used unchanged the fly mark #4D2A00 / #6B3B00 / #C49D6E -> the bronze ramp, hue 33 logo ground #F3EEE5 -> cream, used unchanged The logo contains no green, so the sage ramp the previous palette invented is gone. What used sage now uses bronze-700 (quiet headings) or mist, a pale tint of the logo's own teal (accent surfaces). Ratios are against the page surface (cream #F3EEE5) unless noted. =========================================================================== */ :root { /* --- surfaces ------------------------------------------------------- */ --surface-page: var(--wp--preset--color--cream, #F3EEE5); --surface-raised: var(--wp--preset--color--white, #FFFFFF); --surface-sunken: var(--wp--preset--color--cream-dark, #EBE5DB); --surface-inverse: var(--wp--preset--color--river-800, #082530); --surface-accent: var(--wp--preset--color--mist, #E2EBEE); --surface-warm: var(--wp--preset--color--bronze-100, #F1E7DA); /* --- text ------------------------------------------------------------ Ink is tinted toward the wordmark's hue rather than neutral grey, so body copy sits in the same family as the logo instead of beside it. strong 15.4:1 default 13.3:1 muted 5.2:1 inverse on inverse 13.7:1 */ --text-strong: var(--wp--preset--color--ink-900, #14181A); --text-default: var(--wp--preset--color--ink-700, #1F2628); --text-muted: var(--wp--preset--color--ink-500, #57656A); --text-inverse: var(--wp--preset--color--cream, #F3EEE5); --text-heading: var(--wp--preset--color--river-700, #163A4A); /* 10.45:1 */ --text-link: var(--wp--preset--color--river-600, #19556B); /* 7.07:1 */ --text-accent: var(--wp--preset--color--bronze-600, #A15800); /* 4.64:1 */ --text-quiet-heading: var(--wp--preset--color--bronze-700, #6B3B00); /* 8.07:1 */ /* --- borders --------------------------------------------------------- WCAG 1.4.11 wants 3:1 for anything that conveys a control's extent, so inputs and buttons use --border-control (3.55:1). Decorative hairlines convey nothing and may stay quiet. */ --border-control: var(--wp--preset--color--rule-strong, #A07F56); /* 3.22:1 */ --border-subtle: var(--wp--preset--color--rule-subtle, #E5DED2); --border-strong: var(--wp--preset--color--river-700, #163A4A); --border-inverse: rgb(255 255 255 / 0.22); /* --- actions --------------------------------------------------------- Both retailer buttons deliberately share one treatment. They are two halves of the same decision; making one louder than the other tells the visitor something untrue about where to buy. */ --action-primary-bg: var(--wp--preset--color--river-700, #163A4A); --action-primary-bg-hover: var(--wp--preset--color--river-800, #082530); --action-primary-text: var(--wp--preset--color--cream, #F3EEE5); --action-accent-bg: var(--wp--preset--color--bronze-600, #A15800); --action-accent-bg-hover: var(--wp--preset--color--bronze-700, #6B3B00); --action-accent-text: var(--wp--preset--color--cream, #F3EEE5); --action-quiet-text: var(--wp--preset--color--river-700, #163A4A); --action-disabled-bg: var(--wp--preset--color--cream-dark, #EBE5DB); --action-disabled-text: var(--wp--preset--color--ink-500, #57656A); /* --- feedback (all >= 5:1 on page, white and their own surface) ------ */ --state-success: var(--wp--preset--color--success, #2E6B45); --state-success-surface: var(--wp--preset--color--success-bg, #E3EFE7); --state-danger: var(--wp--preset--color--danger, #A33325); --state-danger-surface: var(--wp--preset--color--danger-bg, #F6E4E1); --state-warning: var(--wp--preset--color--warning, #8A5A12); --state-warning-surface: var(--wp--preset--color--warning-bg, #F5EBD8); --state-info: var(--wp--preset--color--info, #19556B); --state-info-surface: var(--wp--preset--color--info-bg, #E2EEF3); /* --- decorative ------------------------------------------------------ Driftwood is 2.16:1 on cream, so it never carries text on the page. It is for rules, the waterline mark, and eyebrows on dark grounds, where it measures 6.35:1 on the inverse section and 5.58:1 on a dark panel. */ --decor-warm: var(--wp--preset--color--bronze-300, #C49D6E); --decor-deep: var(--wp--preset--color--bronze-800, #4D2A00); /* Article cover ramps. Journal cards have no photograph of their own — every image in the library is a fly on white, so a photo there would read as another product card. These four give an article a designed cover instead, picked by post ID so a given article always looks the same. */ --artcover-river: linear-gradient(135deg, #163A4A, #00151A); --artcover-deep: linear-gradient(135deg, #19556B, #082530); --artcover-drift: linear-gradient(135deg, #6B3B00, #2A1500); --artcover-charcoal: linear-gradient(135deg, #1F2628, #0B0E0F); /* --- typography ------------------------------------------------------ */ --font-display: var(--wp--preset--font-family--display); --font-ui: var(--wp--preset--font-family--ui); /* Every preset carries a fallback. WordPress silently DROPS any preset slug beginning with a digit, so "3xl" produced no custom property at all and h1 quietly collapsed to body size — invisible to axe, caught only by reading the computed value. Slugs are now xxs/xxl/xxxl, and the fallbacks mean a missing preset can never silently flatten the scale again. */ --text-2xs: var(--wp--preset--font-size--xxs, 0.75rem); --text-xs: var(--wp--preset--font-size--xs, 0.8125rem); --text-sm: var(--wp--preset--font-size--sm, 0.9375rem); --text-base: var(--wp--preset--font-size--base, clamp(1rem, 0.98rem + 0.1vw, 1.0625rem)); --text-md: var(--wp--preset--font-size--md, clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem)); --text-lg: var(--wp--preset--font-size--lg, clamp(1.3rem, 1.23rem + 0.35vw, 1.5rem)); --text-xl: var(--wp--preset--font-size--xl, clamp(1.6rem, 1.46rem + 0.69vw, 2rem)); --text-2xl: var(--wp--preset--font-size--xxl, clamp(2rem, 1.74rem + 1.29vw, 2.75rem)); --text-3xl: var(--wp--preset--font-size--xxxl, clamp(2.4rem, 1.93rem + 2.33vw, 3.75rem)); --leading-tight: 1.14; --leading-snug: 1.3; --leading-normal: 1.65; /* 64ch measured 623px, which under a breakout hero on a 1440 screen read as a narrow strip in a lot of empty page. 72ch is still inside the 45-75ch readability range and gives the article column real presence. */ --measure: 72ch; /* The journal sets larger than the interface around it, and a bigger face needs more room to hold the same number of characters on a line. Declared in rem rather than ch because it is also used to size the grid track and the hero, where `ch` would resolve against the parent's smaller type and quietly clamp the column narrower than the text inside it. */ --measure-article: 50rem; /* Set explicitly rather than from --text-md: that token resolves through --wp--preset--font-size--md, which theme.json defines larger than the fallback, and it landed article copy at 22.8px - display size, not reading size. 17px on a phone rising to 19px on a desktop is a real step up from the 17px interface without shouting. */ --text-article: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem); /* --- space ----------------------------------------------------------- */ --space-3xs: var(--wp--preset--spacing--xxxs, 0.25rem); --space-2xs: var(--wp--preset--spacing--xxs, 0.5rem); --space-xs: var(--wp--preset--spacing--xs, 0.75rem); --space-sm: var(--wp--preset--spacing--sm, 1rem); --space-md: var(--wp--preset--spacing--md, 1.5rem); --space-lg: var(--wp--preset--spacing--lg, 2.5rem); --space-xl: var(--wp--preset--spacing--xl, 4rem); --space-2xl: var(--wp--preset--spacing--xxl, clamp(4rem, 8vw, 7rem)); /* --- shape ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; --shadow-raised: 0 1px 2px rgb(27 30 31 / 0.05), 0 8px 24px -12px rgb(15 42 54 / 0.18); --shadow-lifted: 0 2px 4px rgb(27 30 31 / 0.06), 0 18px 40px -16px rgb(15 42 54 / 0.28); /* --- glass ----------------------------------------------------------- Glassmorphism, with the one discipline that keeps it usable: a glass surface may only ever be translucent over a ground this theme controls, so the composite is known rather than hoped for. Light glass is white-dominant, so over any of our light grounds it composites LIGHTER than the ground and text contrast goes up, not down: white 58% over cream #F3EEE5 -> #FAF8F4 ink-700 on it = 14.5:1 white 58% over mist #E2EBEE -> #F3F7F8 ink-700 on it = 14.2:1 Dark glass is only used over photography, and never without the hero scrim beneath it. Worst case there is a pure-white photograph: river-900 55% over #FFF -> #74797B, then river-700 58% -> #3D5761 cream text on that = 6.67:1 Those two rules are why this can be glass and still pass AA. */ --glass-tint: rgb(255 255 255 / 0.58); --glass-tint-strong: rgb(255 255 255 / 0.76); --glass-tint-warm: rgb(255 251 244 / 0.62); --glass-tint-sunken: rgb(235 229 219 / 0.58); /* cream-dark */ /* HERO ONLY. 58% dark glass is calibrated for the scrimmed photograph behind it. Over a LIGHT ground the same tint composites to #6F7D80 — mid-grey, not dark — and cream text on it is 3.74:1. Measured, not guessed: axe caught exactly this on the page asides. */ --glass-tint-dark: rgb(22 58 74 / 0.58); /* river-700 */ --glass-tint-dark-strong: rgb(0 21 26 / 0.74); /* river-900 */ /* Dark glass for panels sitting on the cream page. Alpha is the value that keeps the panel readable rather than the value that looks most like glass: river-900 88% over cream -> #1D2F32 cream text 12.06:1 driftwood eyebrow 5.58:1 both AA Still 12% see-through, still blurred, still sheened. */ --glass-tint-dark-panel: rgb(0 21 26 / 0.88); /* river-900 */ /* Overlay surfaces — the header, the shop bar and the sticky buy bar. These are the ONLY glass in the theme with arbitrary content behind them: product photography scrolls underneath, and a photo can be any colour. Their alpha is therefore set by the worst case, not by taste. Against a pure black photograph: header 72% -> #B8B8B8, nav link #1F2628 on it = 9.0:1 bar 92% -> #EBEBEB, muted 15px text on it = 5.4:1 At the 76% used for ordinary panels the bar figure is 3.6:1 and fails. */ --glass-tint-header: rgb(255 255 255 / 0.72); --glass-tint-bar: rgb(255 255 255 / 0.92); --glass-border: rgb(255 255 255 / 0.65); --glass-border-dark: rgb(255 255 255 / 0.20); /* The top-edge sheen. This is the detail that reads as a pane of glass rather than as a washed-out box. */ --glass-sheen: inset 0 1px 0 rgb(255 255 255 / 0.72); --glass-sheen-dark: inset 0 1px 0 rgb(255 255 255 / 0.16); --glass-blur: blur(14px) saturate(150%); --glass-blur-strong: blur(22px) saturate(165%); --glass-shadow: 0 1px 2px rgb(27 30 31 / 0.04), 0 12px 32px -14px rgb(15 42 54 / 0.26); --glass-shadow-lifted: 0 2px 6px rgb(27 30 31 / 0.06), 0 26px 54px -18px rgb(15 42 54 / 0.36); /* Ambient blooms. Glass over a flat ground is invisible — there is nothing to refract. These give the page something to be glass *over*. Alpha is capped so the palest bloom still leaves body text at 10.5:1. */ /* The hero scrim. Not decoration: it is what gives the glass card over an arbitrary photograph a computable worst case. */ --scrim-hero: linear-gradient(to right, rgb(0 21 26 / 0.72), rgb(0 21 26 / 0.42) 55%, rgb(0 21 26 / 0.30)), linear-gradient(to top, rgb(0 21 26 / 0.55), transparent 60%); --scrim-video: linear-gradient(to top, rgb(0 21 26 / 0.58), rgb(0 21 26 / 0.14)); --shadow-video-label: 0 1px 12px rgb(0 21 26 / 0.65); --bloom-footer: radial-gradient(40rem 30rem at 10% 0%, rgb(69 148 176 / 0.22), transparent 60%), radial-gradient(34rem 26rem at 88% 100%, rgb(196 157 110 / 0.18), transparent 62%); --bloom-river: rgb(42 108 132 / 0.15); /* river-500 */ --bloom-deep: rgb(25 85 107 / 0.13); /* river-600 */ --bloom-bronze: rgb(196 157 110 / 0.18); /* driftwood */ /* Opaque stand-ins, used where backdrop-filter is unsupported or the visitor has asked for reduced transparency. Same hues, no blur. */ --glass-solid: #FAF8F4; --glass-solid-sunken: #F2EDE5; --glass-solid-dark: #1D2F32; /* --- motion ---------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.6, 0.3, 1); --duration-fast: 120ms; --duration: 180ms; /* --- focus ---------------------------------------------------------- One ring, everywhere, on the accent so it never reads as decoration. */ --focus-ring: 2px solid var(--action-accent-bg); --focus-offset: 3px; /* --- print ----------------------------------------------------------- Paper is a different medium, not a different brand. Ink is black because the page is white and toner is expensive, and rules are grey because a printed hairline in brand teal costs colour for nothing. */ --print-ink: #000; --print-rule: #999; /* --- layout ---------------------------------------------------------- Three breakpoints, used as literals in @media because custom properties are not valid there: sm 600px, md 900px, lg 1200px. md is the one that matters — every tablet layout decision happens there together, so no width can produce a half-mobile, half-desktop page the way the previous theme did between 768px and 992px. */ --wrap: 78rem; --wrap-narrow: 52rem; --gutter: clamp(1.15rem, 4vw, 2.5rem); --section: clamp(3.5rem, 8vw, 6.5rem); --section-tight: clamp(2.5rem, 5vw, 4rem); --section-hero: clamp(4rem, 12vw, 9rem); --section-cover: clamp(2.5rem, 7vw, 5rem); --header-height: 4.5rem; }