/* ============================================================================ Outfitter — SEMANTIC ROLE TOKENS (roles.css) ---------------------------------------------------------------------------- Sections/components declare their design INTENT via these role tokens; they never reference raw palette slots or literals. Each of the four skins defines every role as a hand-tuned, on-brand, WCAG-AA choice, so the same role can resolve very differently per skin yet always looks intentional and readable. Keyed on [data-variant] (the ACTIVE skin / colour axis) so a page repaints to the active skin's design language while its structure (data-pack) stays put. Own-skin values equal each demo's existing treatment → zero regression. ROLE GROUPS Surfaces (bg + on-ink + muted), in increasing emphasis: page the base ground raised cards / panels above the page sunken subtle alternate sections contrast a DELIBERATE high-contrast feature band (dark in every skin) accentband a band whose ground is a brand colour Accents / semantics: accent, kicker (page eyebrow), link, price, star, line Image scrims: a dark, AA-guaranteeing overlay for text over photos (hero + closing CTA + photo cards/tiles) — light ink in every skin. Contrast targets: body >= 4.5:1, large text/UI/icons >= 3:1. Verified with .wp-tools/contrast.php across all four skins. ============================================================================ */ /* ---- :root fallback = Demo 01 Blackwater Ridge (hunting · DARK) ----------- */ :root { --r-page-bg: var(--color-bg); --r-page-ink: var(--color-text); --r-page-muted: #b8ad90; --r-raised-bg: var(--color-surface); --r-raised-ink: var(--color-text); --r-raised-muted: #d4c8a8; --r-sunken-bg: var(--color-surface); --r-sunken-ink: var(--color-text); --r-sunken-muted: #b8ad90; --r-contrast-bg: var(--color-canvas); --r-contrast-ink: var(--color-text); --r-contrast-muted: #d4c8a8; --r-contrast-kicker: var(--color-accent); --r-accentband-bg: var(--color-secondary); --r-accentband-ink: var(--color-on-primary); --r-accent: var(--color-accent); --r-on-accent: var(--color-on-accent); --r-accent-hover: var(--color-accent-hover); --r-kicker: var(--color-accent); --r-link: var(--color-accent); --r-link-hover: var(--color-accent-hover); --r-price: var(--color-accent); --r-star: #c89b3c; --r-line: var(--color-line); --r-line-strong: rgba(232,223,201,.28); --r-scrim: linear-gradient(180deg, rgba(12,13,9,.12) 0%, rgba(12,13,9,.45) 52%, rgba(12,13,9,.95) 100%); --r-scrim-hero: linear-gradient(180deg, rgba(12,13,9,.55) 0%, rgba(12,13,9,.15) 28%, rgba(12,13,9,.35) 60%, rgba(12,13,9,.95) 100%); --r-scrim-ink: var(--color-on-primary); --r-scrim-muted: #d4c8a8; --r-scrim-kicker: var(--color-accent); --r-scrim-tag: rgba(12,13,9,.6); --r-page-tint-a: #1a1d12; --r-page-tint-b: #1a140e; /* page-ground texture blotches (per skin) */ --r-wordmark-stroke: rgba(232,223,201,.18); /* giant ghost wordmark outline */ --r-bignum-stroke: rgba(238,243,238,.5); /* big outline numerals (fishing trips) */ } /* ===== Demo 01 — Blackwater Ridge (hunting · DARK) ========================= */ [data-variant="hunting"] { --r-page-bg: #0c0d09; --r-page-ink: #e8dfc9; --r-page-muted: #b8ad90; --r-page-tint-a: #1a1d12; --r-page-tint-b: #1a140e; /* exact current values — zero regression */ --r-wordmark-stroke: rgba(232,223,201,.18); /* exact current ghost outline */ --r-bignum-stroke: rgba(232,223,201,.5); --r-raised-bg: #14160f; --r-raised-ink: #e8dfc9; --r-raised-muted: #d4c8a8; --r-sunken-bg: #14160f; --r-sunken-ink: #e8dfc9; --r-sunken-muted: #b8ad90; --r-contrast-bg: #1a2014; --r-contrast-ink: #e8dfc9; --r-contrast-muted: #d4c8a8; --r-contrast-kicker: #d96a2c; --r-accentband-bg: #3d4830; --r-accentband-ink: #e8dfc9; --r-accent: #d96a2c; --r-on-accent: #0c0d09; --r-accent-hover: #b3501e; --r-kicker: #d96a2c; --r-link: #d96a2c; --r-link-hover: #e9acca; --r-price: #d96a2c; --r-star: #c89b3c; --r-line: rgba(232,223,201,.15); --r-line-strong: rgba(232,223,201,.30); --r-scrim: linear-gradient(180deg, rgba(12,13,9,.12) 0%, rgba(12,13,9,.45) 52%, rgba(12,13,9,.95) 100%); --r-scrim-hero: linear-gradient(180deg, rgba(12,13,9,.55) 0%, rgba(12,13,9,.15) 28%, rgba(12,13,9,.35) 60%, rgba(12,13,9,.95) 100%); --r-scrim-ink: #e8dfc9; --r-scrim-muted: #d4c8a8; --r-scrim-kicker: #d96a2c; --r-scrim-tag: rgba(12,13,9,.6); } /* ===== Demo 02 — Tidewater / Fishing (fishing · DARK) ===================== */ [data-variant="fishing"] { --r-page-bg: #06161a; --r-page-ink: #eef3ee; --r-page-muted: #a9bdb8; --r-page-tint-a: #0b252c; --r-page-tint-b: #04141a; /* subtle teal depth on the dark water page */ --r-wordmark-stroke: rgba(238,243,238,.16); /* foam ghost on dark water */ --r-bignum-stroke: rgba(238,243,238,.5); /* exact current — zero regression */ --r-raised-bg: #0a2127; --r-raised-ink: #eef3ee; --r-raised-muted: #7f968f; --r-sunken-bg: #0a2127; --r-sunken-ink: #eef3ee; --r-sunken-muted: #a9bdb8; --r-contrast-bg: #0f2d34; --r-contrast-ink: #eef3ee; --r-contrast-muted: #a9bdb8; --r-contrast-kicker: #c9a24a; --r-accentband-bg: #143a43; --r-accentband-ink: #eef3ee; --r-accent: #c9a24a; --r-on-accent: #06161a; --r-accent-hover: #957029; --r-kicker: #c9a24a; --r-link: #c9a24a; --r-link-hover: #e2bd66; --r-price: #c9a24a; --r-star: #c9a24a; --r-line: rgba(238,243,238,.12); --r-line-strong: rgba(238,243,238,.22); --r-scrim: linear-gradient(180deg, rgba(6,22,26,.12) 0%, rgba(6,22,26,.45) 52%, rgba(6,22,26,.96) 100%); --r-scrim-hero: linear-gradient(180deg, rgba(6,22,26,.5) 0%, rgba(6,22,26,.06) 26%, rgba(6,22,26,.4) 56%, rgba(6,22,26,.97) 100%); --r-scrim-ink: #eef3ee; --r-scrim-muted: #d4e0db; --r-scrim-kicker: #c9a24a; --r-scrim-tag: rgba(6,22,26,.6); } /* ===== Demo 03 — Hearth & Pine / Camps & Cabins (experiences · LIGHT) ===== Light cream page, deliberate PINE contrast band, clay accent, ochre warmth. */ [data-variant="experiences"] { --r-page-bg: #efe6d3; --r-page-ink: #241f17; --r-page-muted: #5d534a; --r-page-tint-a: rgba(47,71,51,.10); --r-page-tint-b: rgba(158,72,40,.07); /* soft pine+clay warmth on cream */ --r-wordmark-stroke: rgba(42,36,27,.20); /* dark-ink ghost on cream (was invisible bone) */ --r-bignum-stroke: rgba(42,36,27,.42); /* dark-ink numerals on cream */ --r-raised-bg: #fbf6ea; --r-raised-ink: #241f17; --r-raised-muted: #5d534a; --r-sunken-bg: #e6dac2; --r-sunken-ink: #241f17; --r-sunken-muted: #5d534a; --r-contrast-bg: #2f4733; --r-contrast-ink: #efe6d3; --r-contrast-muted: rgba(239,230,211,.82); --r-contrast-kicker: #e0b765; --r-accentband-bg: #9e4828; --r-accentband-ink: #efe6d3; --r-accent: #9e4828; --r-on-accent: #efe6d3; --r-accent-hover: #84381e; --r-kicker: #84381e; --r-link: #2f4733; --r-link-hover: #9e4828; --r-price: #2f4733; --r-star: #8a6324; --r-line: rgba(42,36,27,.13); --r-line-strong: rgba(42,36,27,.22); --r-scrim: linear-gradient(180deg, rgba(34,52,31,.15) 0%, rgba(34,52,31,.5) 52%, rgba(34,52,31,.92) 100%); --r-scrim-hero: linear-gradient(180deg, rgba(28,42,26,.5) 0%, rgba(28,42,26,.12) 30%, rgba(28,42,26,.45) 62%, rgba(28,42,26,.95) 100%); --r-scrim-ink: #efe6d3; --r-scrim-muted: rgba(244,238,225,.85); --r-scrim-kicker: #e0b765; --r-scrim-tag: rgba(23,35,21,.85); } /* ===== Demo 04 — Field & Flint / Supply Co. (ecommerce · LIGHT) =========== Warm paper page, deliberate INK contrast band, oxblood accent, mustard warmth. */ [data-variant="ecommerce"] { --r-page-bg: #e8e1d0; --r-page-ink: #221d16; --r-page-muted: #574f41; --r-page-tint-a: rgba(83,88,54,.08); --r-page-tint-b: rgba(140,47,39,.05); /* soft olive+oxblood warmth on paper */ --r-wordmark-stroke: rgba(34,29,22,.18); /* dark-ink ghost on paper */ --r-bignum-stroke: rgba(34,29,22,.42); /* dark-ink numerals on paper */ --r-raised-bg: #f4efe3; --r-raised-ink: #221d16; --r-raised-muted: #574f41; --r-sunken-bg: #ddd3bd; --r-sunken-ink: #221d16; --r-sunken-muted: #574f41; --r-contrast-bg: #221d16; --r-contrast-ink: #f7f3ea; --r-contrast-muted: rgba(247,243,234,.8); --r-contrast-kicker: #d6a033; --r-accentband-bg: #535836; --r-accentband-ink: #f7f3ea; --r-accent: #8c2f27; --r-on-accent: #f7f3ea; --r-accent-hover: #6f201a; --r-kicker: #8c2f27; --r-link: #221d16; --r-link-hover: #8c2f27; --r-price: #221d16; --r-star: #9a6b18; --r-line: rgba(34,29,22,.14); --r-line-strong: rgba(34,29,22,.26); --r-scrim: linear-gradient(180deg, rgba(34,29,22,.1) 0%, rgba(34,29,22,.45) 52%, rgba(34,29,22,.92) 100%); --r-scrim-hero: linear-gradient(180deg, rgba(34,29,22,.5) 0%, rgba(34,29,22,.12) 30%, rgba(34,29,22,.45) 62%, rgba(34,29,22,.95) 100%); --r-scrim-ink: #f7f3ea; --r-scrim-muted: rgba(247,243,234,.82); --r-scrim-kicker: #d6a033; --r-scrim-tag: rgba(34,29,22,.6); } /* ---------------------------------------------------------------------------- Elementor global bridge — map Elementor's global colour + typography slots to the active skin so any Elementor widget set to a "Global" colour/font re-themes automatically per skin (matching the --wp--preset bridge in base). --------------------------------------------------------------------------- */ html[data-variant] { --e-global-color-primary: var(--color-heading); --e-global-color-secondary: var(--color-primary); --e-global-color-text: var(--color-text); --e-global-color-accent: var(--color-accent); /* Common extra global ids Elementor kits expose. */ --e-global-color-7b50ff7: var(--color-text); --e-global-typography-primary-font-family: var(--font-heading); --e-global-typography-secondary-font-family: var(--font-heading); --e-global-typography-text-font-family: var(--font-body); --e-global-typography-accent-font-family: var(--font-body); }