/** * Red Orchid — Weekly Skin Engine ("Skin of the Week") * ============================================================ * Replaces the old per-pageload random restyle * (functions.php redorchid_theme_random(), retired 2026-07-13) with a * standardized, scheduled, whole-site reskin. * * HOW IT ROTATES (zero server cost, immune to Varnish): * A 1-line inline script (functions.php ro_skin_of_the_week_head()) * sets where N is derived from the DATE — the * same value for every visitor all week, flipping once every 7 days at * ~03:00 America/Edmonton. No cron, no option, no cache purge: the HTML is * Varnish-cached but the class is computed in the browser each load, so a * fully-cached page still shows the current week's skin. JS off / crawlers * => no class => the :root default (skin 0) shows. * * HOW IT REPAINTS: * Each skin re-points a small set of SEASONAL TOKENS (--ro-skin-*). Every * participating element consumes those tokens, so adding a new element to * the rotation is one line: make it read var(--ro-skin-lead) / * var(--ro-skin-comp) / rgb(var(--ro-skin-*-rgb) / a). COLOUR ONLY — never * layout/size/spacing, so zero CLS and no reflow site-wide. * * THE ROTATION CARRIES A TEXT AXIS AS WELL AS A HUE AXIS (R6, v3.99.0). * --ro-skin-lead/-comp are DECORATIVE hues and fail AA as small text. * A rotated consumer that carries TEXT reads --ro-skin-lead-text / * --ro-skin-comp-text, NEVER --ro-skin-lead / --ro-skin-comp. Both text * twins are var() references into the fixed --ro-*-text tier in * tokens.css, never literals, so the fixed and rotated tiers cannot drift. * * THE 3-WEEK CYCLE (cycle-next pairing — each week a LEAD + a COMPLEMENT): * skin 0 lead Pink / comp Teal (= the current live look) * skin 1 lead Teal / comp Orange * skin 2 lead Orange / comp Pink * LEAD = feature/brand surfaces (CTA band, eyebrows, bullets, "good for"). * COMP = utility/data surfaces (pricing, filters, "avoid if") for contrast. * * Consumes only design-system/tokens.css brand hues — never a raw hex. * Loaded after sections.css (enqueue dep 'ro-sections') so equal-specificity * re-points win on source order; hostile-Kit rules matched at their own * specificity per the (0,3,0) convention (see sections.css header). * * NOTE on the CTA band: pink (#F16B89) is dark enough for white heading text; * teal/orange base hues are NOT, so those skins use their -strong (deep) tone * as the band base to preserve legibility parity with the approved pink band. * Pink keeps its exact soft->strong gradient. */ /* ---- seasonal token sets ------------------------------------------------ */ :root, .ro-skin-0 { --ro-skin-lead: var(--ro-primary-strong); --ro-skin-lead-text: var(--ro-primary-text); --ro-skin-lead-rgb: var(--ro-rgb-primary); --ro-skin-comp: var(--ro-secondary-strong); --ro-skin-comp-rgb: var(--ro-rgb-secondary); --ro-skin-comp-text: var(--ro-secondary-text); --ro-skin-band-from: var(--ro-primary); --ro-skin-band-to: var(--ro-primary-strong); } .ro-skin-1 { --ro-skin-lead: var(--ro-secondary-strong); --ro-skin-lead-text: var(--ro-secondary-text); --ro-skin-lead-rgb: var(--ro-rgb-secondary); --ro-skin-comp: var(--ro-accent-strong); --ro-skin-comp-rgb: var(--ro-rgb-accent); --ro-skin-comp-text: var(--ro-accent-text); --ro-skin-band-from: var(--ro-secondary-strong); --ro-skin-band-to: var(--ro-secondary-strong); } .ro-skin-2 { --ro-skin-lead: var(--ro-accent-strong); --ro-skin-lead-text: var(--ro-accent-text); --ro-skin-lead-rgb: var(--ro-rgb-accent); --ro-skin-comp: var(--ro-primary-strong); --ro-skin-comp-rgb: var(--ro-rgb-primary); --ro-skin-comp-text: var(--ro-primary-text); --ro-skin-band-from: var(--ro-accent-strong); --ro-skin-band-to: var(--ro-accent-strong); } /* ---- LEAD consumers ----------------------------------------------------- */ /* Section eyebrows (but NOT the white one riding the pink/lead band) */ .hero-eyebrow:not(.qb__eyebrow) { color: var(--ro-skin-lead-text); } /* Italic emphasis accent in Values section titles */ h2.values-title em { color: var(--ro-skin-lead); } /* Values "what you get" check coins */ .check-coin { background: rgb(var(--ro-skin-lead-rgb) / 0.13); color: var(--ro-skin-lead); } /* Reading-content bullet markers (the list markers) */ .ro-prose li::marker { color: var(--ro-skin-lead); } /* ---- Quick Booking / CTA band (LEAD base + COMP glow) ------------------- */ /* (0,2,0) beats the base .qb background (0,1,0); we override background only, leaving .qb shadow/radius/border untouched. */ .ro-section-qb .qb { background: radial-gradient(120% 160% at 85% -20%, rgb(var(--ro-skin-comp-rgb) / .35) 0%, transparent 55%), radial-gradient(150% 140% at -10% 110%, rgb(var(--ro-skin-comp-rgb) / .30) 0%, transparent 50%), linear-gradient(135deg, var(--ro-skin-band-from) 0%, var(--ro-skin-band-to) 100%); } /* the inverted white-surface Book button takes the week's lead as its text colour; selectors mirror sections.css exactly so source order wins */ .ro-section-qb .ro-btn.ro-btn--primary, .ro-section-qb .ro-btn.ro-btn--primary:focus, .ro-section-qb .ro-btn.ro-btn--primary:active, .ro-section-qb .ro-btn.ro-btn--primary:hover, .ro-section-qb .ro-btn.ro-btn--primary:focus:hover, .ro-section-qb .ro-btn.ro-btn--primary:active:hover { color: var(--ro-skin-lead); } /* re-assert the band eyebrow white — skins.css loads after the .qb__eyebrow rule, and the .hero-eyebrow reskin above must not win here */ .ro-section-qb .qb__eyebrow { color: rgb(255 255 255 / 0.85); } /* ---- Heading flourish (single squiggle in the week's lead) -------------- */ /* CSS beats the inline stroke="var(--ro-...)" presentation attribute */ .ro-flourish path { stroke: var(--ro-skin-lead); } /* ...but the "avoid if" indications column flips it to comp, matching its comp arrows + border for a cohesive two-tone */ .indications__col--comp .ro-flourish path { stroke: var(--ro-skin-comp); } /* ---- Indications: two-tone (good = LEAD, avoid = COMP) ------------------ */ .indications__col--lead .indications__card { border-top-color: rgb(var(--ro-skin-lead-rgb) / 0.30); } .indications__col--lead .indications__card li::before { border-left-color: var(--ro-skin-lead); } .indications__col--comp .indications__card { border-top-color: rgb(var(--ro-skin-comp-rgb) / 0.30); } .indications__col--comp .indications__card li::before { border-left-color: var(--ro-skin-comp); } /* ---- Pricing table + filters (COMPLEMENT, for contrast) ---------------- */ /* the golden .pt-row:hover stays untouched — it is a locked design decision */ .pt-head { color: var(--ro-skin-comp); border-bottom-color: rgb(var(--ro-skin-comp-rgb) / 0.35); } .price-card--table { border-top-color: rgb(var(--ro-skin-comp-rgb) / 0.35); border-bottom-color: rgb(var(--ro-skin-comp-rgb) / 0.35); } .pt-row { border-bottom-color: rgb(var(--ro-skin-comp-rgb) / 0.22); } /* active chip + its shadow both take the complement (the brand --ro-shadow-btn is pink-tinted, which clashed under a teal/orange chip) */ /* The FILL moves to the text tier, not the label: a ratio is symmetric, so white-on-comp-text measures 5.04 where white-on-comp failed. The box-shadow keeps --ro-skin-comp-rgb -- a shadow is not a contrast surface. */ .price-filter--active { background: var(--ro-skin-comp-text); box-shadow: 0 2px 6px rgb(var(--ro-skin-comp-rgb) / 0.35), 0 8px 20px rgb(var(--ro-skin-comp-rgb) / 0.22); } .price-filter.price-filter--active:hover, .price-filter.price-filter--active:focus-visible { background: var(--ro-skin-comp-text); } /* Colour-only engine — nothing to disable under prefers-reduced-motion. */