/* Theme Name: REHVÉAL Theme URI: https://rehveal.com Description: Custom child theme for REHVÉAL™ — strategic advisory. Built to the REHVÉAL Website Build Brief v4.1 brand canon, on Hello Elementor so Elementor Pro's Theme Builder owns the header, footer and templates. The canon palette and type are mirrored into Elementor's Global Colors and Global Fonts, so the editor offers her brand and nothing else. Author: Luminos Agency Author URI: https://luminosagency.com Template: hello-elementor Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 License: Proprietary — © Luminos Agency for REHVEAL Holdings, LLC™ Text Domain: rehveal Tags: accessibility-ready */ /* ════════════════════════════════════════════════════════════════════════ This file loads AFTER assets/css/reference.css, which is generated from Régine's corrected reference build and must never be hand-edited. Every correction to her CSS belongs here, so re-importing her build stays safe. ════════════════════════════════════════════════════════════════════════ */ /* ── Web canon faces, self-hosted ────────────────────────────────────── Same families and latin subsets Google serves, from our own origin: no third-party connection, and no font swap part-way through an entrance. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('assets/fonts/dmsans-normal-300-700-latin.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/playfair-normal-400-700-latin.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('assets/fonts/playfair-italic-400-700-latin.woff2') format('woff2'); } /* ── Punch list B · reconcile the off-canon tokens ───────────────────── Build Brief §3 lists Gold Pale as #F8F2E6. The reference build declared #E8D49A, but never used it — verified: one occurrence, the declaration itself. Aligning it costs nothing and stops the wrong value spreading. --plum-mid #4A2260 is kept: it is a real gradient stop in #hero, #signal and #questions, which the audit explicitly allows. */ :root { --gold-pale: #F8F2E6; } /* ── Punch list A · finish the gold-on-cream contrast ────────────────── Gold #B8973A on cream is 2.65:1 and fails AA; on plum it is 5.2:1 and passes, so the fix is scoped by SECTION, never by class — the same eyebrow class stays gold wherever it sits on plum. Plum on cream is 13.8:1. Each selector below was derived from the rendered markup, not guessed: see tools/audit-contrast.py. */ #engages .engages-label, #engages .pillar-number, #about-rehveal .about-label, .signal-section .signal-attribution { color: var(--plum); } /* The one VISIBLE change beyond eyebrows, flagged for Régine: the second perspective line is a display quote in gold on cream. At clamp(1.6rem, 3.5vw, 2.6rem) it is large text, so it needs 3:1 — and 2.65:1 misses even that. It keeps its italic and its lighter weight, so it still reads as the answering half of the pair; only the colour moves to canon plum. */ #perspective .perspective-quote-2 { color: var(--plum); } /* ── Punch list D · accessibility finish ───────────────────────────────── */ /* Content must not depend on JavaScript to become visible. The reference build sets .fade-in { opacity: 0 } and only adds .visible from script, so a failed or blocked script hides the entire page. Invert it: visible by default, and only armed once the document advertises JS. */ .fade-in { opacity: 1; transform: none; } html.js .fade-in { opacity: 0; transform: translateY(24px); } html.js .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js .fade-in, html.js .fade-in.visible { opacity: 1; transform: none; transition: none; } .accordion-content { transition: none; } html { scroll-behavior: auto; } } /* A visible focus ring in canon gold, on a dark halo so it reads on both plum and cream. Browser default outlines belong to no design system. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; } .section-cream :focus-visible, #engages :focus-visible, #credibility :focus-visible, #perspective :focus-visible, #about-rehveal :focus-visible, #closing :focus-visible { outline-color: var(--plum); } /* Skip link — offscreen until focused. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--plum); color: var(--cream); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 24px; text-decoration: none; } .skip-link:focus { left: 24px; top: 16px; } /* The honeypot is for robots, not for people or screen readers. */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Browser surfaces the design still owns. */ ::selection { background: var(--gold); color: var(--plum); } :root { accent-color: var(--plum); color-scheme: light; } html { scroll-behavior: smooth; } /* ── Defects the staging build surfaced, 2026-09-19 ────────────────────── */ /* Footer nav was plum at opacity .6, which composites to #87708A on cream-warm — 3.93:1, under AA. 0.7 gives 5.31:1 and is the smallest change that keeps her muted treatment. (Canon Mid Gray would also pass at 5.89:1, but it drops the plum tint she chose.) */ .footer-nav a { opacity: 0.7; } /* The mark carries width/height attributes for CLS, and the height attribute is a presentational hint: with only `width: 100px` in CSS the height stayed at the intrinsic 1536px and the logo rendered stretched. */ .footer-mark { height: auto; } /* ── Site chrome the reference build did not have ──────────────────────── */ /* The reference nav carried two links. The launch sitemap carries six, so it needs to wrap gracefully and collapse on small screens. */ .nav-links { flex-wrap: wrap; row-gap: 12px; } @media (max-width: 1024px) { .nav-links { gap: 28px; } } .nav-toggle { display: none; background: none; border: 1px solid rgba(184,151,58,0.45); color: var(--gold); font-family: 'DM Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; } @media (max-width: 860px) { nav { flex-wrap: wrap; } .nav-toggle { display: block; } .nav-links { flex-basis: 100%; flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } nav.nav-open .nav-links { max-height: 420px; } .nav-links li { border-top: 1px solid rgba(184,151,58,0.18); } .nav-links a { display: block; padding: 18px 0; } } /* The nav is transparent until it scrolls, which works on the plum-gradient hero but leaves cream-topped pages with unreadable nav links against cream. Any view whose first section is cream carries the solid nav from the start. Seen on /field-journal/ 2026-09-19. */ body.field-journal #nav { background: rgba(61, 26, 75, 0.97); backdrop-filter: blur(12px); padding: 18px 60px; border-bottom: 1px solid rgba(184, 151, 58, 0.2); } @media (max-width: 860px) { body.field-journal #nav { padding: 16px 28px; } } /* `hidden` must win over a component's own display value — the axis panels and the theme chips are flex/block containers, and the attribute alone loses. */ [hidden] { display: none !important; } /* Current page in the nav. */ .nav-links .current-menu-item > a, .nav-links .current_page_parent > a { color: var(--gold); } /* ── Re-scoping her bare-tag rules ───────────────────────────────────── Her reference build was flat HTML where the only