/* Theme Name: DebAnanda — Hello Elementor Child Theme URI: https://lyvek.com Description: Child theme for DebAnanda. Holds the four things Elementor cannot own: the design tokens (single source of truth for recolouring), the skip link, the no-JS guard, and self-hosted typefaces. Everything here is tracked in git — never per-widget Custom CSS, which lives in the database and is neither reviewable nor reproducible. Author: Lyvek Template: hello-elementor Version: 0.1.0 Text Domain: debananda */ /* ───────────────────────────────────────────────────────────────────────────── DESIGN TOKENS Ported from assets/html/assets/css/styles.css :root, with two corrections that had to be made BEFORE the Elementor Kit import. A broken indirection imported into a Kit lives in the database, not in a file — it becomes permanent. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Palette — derived from the @ananda.174 logo and photo set. Unchanged. */ --cream: #F1EAE0; --cream-deep: #E9DFCF; --paper: #FBF8F2; --bone: #E3D5BE; --sage: #87977A; --sage-soft: #C6CFB7; --sage-deep: #41543A; --sage-mist: #ECEFE2; --clay: #AC7A4C; --clay-soft: #D9BC93; --clay-deep: #7A5230; --ink: #26201A; --ink-soft: #4C4237; --ink-mute: #695947; --ink-line: rgba(38, 32, 26, 0.12); /* Semantic layer */ --bg: var(--cream); --bg-alt: var(--paper); --bg-deep: var(--ink); --bg-mist: var(--sage-mist); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-mute: var(--ink-mute); --rule: var(--ink-line); --primary: var(--sage-deep); /* CORRECTION 1 (F29) — --accent was --clay, which fails WCAG AA as text on every light surface: 3.12:1 on cream, 3.49:1 on paper, 2.57:1 on bone, 2.21:1 on sage-deep. --clay-deep clears AA normal text on all five: bone 4.72, cream-deep 5.38, sage-mist 5.66, cream 5.71, paper 6.39. One swap closes 7 of 8 measured failures and the --bone band survives. --clay is kept below for decorative, non-text use only. */ --accent: var(--clay-deep); --accent-text: var(--clay-deep); /* anything that is read */ --accent-deco: var(--clay); /* rules, dots, ornament — never text */ /* CORRECTION 2 (F29) — --rule-strong measured 1.79:1, below 1.4.11's 3:1 for a form control border. The contact form does not exist yet, so this is fixed before it inherits the defect rather than after. */ --rule-strong: rgba(38, 32, 26, 0.55); /* Focus ring: --clay measured 2.57:1 on bone and 2.82:1 on cream-deep, under the 3:1 that 1.4.11 requires. Prior analysis only ever checked it on --cream. */ --focus-ring: var(--clay-deep); --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* CORRECTION 3 (F28) — the reference declared --bg-alt / --bg-deep / --bg-mist and then referenced them ZERO times, using raw --paper (23x), --cream (15x) and --ink (13x) instead. DESIGN.md §1 and §9.2 state the opposite rule. The aliases above are now the ones components consume, so recolouring stays a single edit — which is the property the Kit import is supposed to preserve. */ /* ───────────────────────────────────────────────────────────────────────────── SKIP LINK — a theme concern. Verified: `grep -rl "skip-link"` returns 0 files in Elementor core and 0 in Elementor Pro. Nothing in the builder emits one, so if the theme does not, the site does not have one. ───────────────────────────────────────────────────────────────────────────── */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem); background: var(--sage-deep); color: var(--paper); font: 600 1rem/1.2 var(--font-body); text-decoration: none; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* COLOUR CORRECTION, 2026-09-03 (B1) — MEASURED, and it was invisible. The Kit emits `.elementor-kit-5 a { color: var(--e-global-color-accent) }` (specificity 0,2,0) which outranks `.skip-link` (0,1,0) above, so the skip link rendered --clay-deep #7A5230 on its own --sage-deep #41543A ground: a contrast ratio of 1.20:1. Not "low contrast" — unreadable, on the single control that exists for keyboard users, on every page. `a.skip-link:focus` is 0,2,1 and outranks the Kit without reaching for !important. Measured after the fix: --paper on --sage-deep = 7.7:1. */ a.skip-link, a.skip-link:focus { color: var(--paper); } /* Visible focus everywhere. Elementor does not guarantee one and the reference's dead .field CSS actively set `outline: none`. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────────── NO-JS GUARD (F40) — Elementor sets `.elementor-invisible { visibility: hidden }` in frontend.css:184 and removes it ONLY from JavaScript (frontend.js:639,650). Core ships zero `no-js`/`noscript` escapes. So with JS off, every entrance-animated element is permanently INVISIBLE — not merely unanimated. The reference had the same defect via 26 `.reveal` elements at opacity:0; moving to Elementor reproduces it rather than fixing it. ───────────────────────────────────────────────────────────────────────────── */ .no-js .elementor-invisible { visibility: visible !important; } .no-js .elementor-invisible[class*="animated"] { animation: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Tap targets — the reference's burger measured 38 x 18px, failing WCAG 2.2 2.5.8 (24 x 24) on height. Nothing interactive ships under 44px here. */ .elementor-widget-button .elementor-button, .menu-toggle, .skip-link { min-height: 44px; } /* ═════════════════════════════════════════════════════════════════════════════ B1 · THEME BUILDER HEADER + FOOTER — custom CSS ledger Five rules. Every one is here because a native Elementor control cannot express it — not because it was quicker. Each is tracked in git rather than in `_elementor_data` or Kit Custom CSS, for the three reasons in docs/analysis/elementor-build-strategy.md §7 (not diffable, licence-gated, not reproducible on a clean install). Templates that consume these classes: tools/elementor/build-header-footer.php ═════════════════════════════════════════════════════════════════════════════ */ /* CSS-02 (extended) — the header ground. `backdrop-filter` exists ONLY in the atomic style schema (core/modules/atomic-widgets/styles/style-schema.php:312); the classic container exposes `css_filters`, which emits `filter:` — a different property with a different result. Verified: grep "backdrop-filter" over core/includes + core/core returns 0. The container therefore carries NO native background: one property, one owner, no specificity race against Elementor's 0,3,0 post CSS. The first declaration is the fallback for engines without color-mix() — they get the opaque token, which is the correct colour, just not translucent. */ .deb-header { background-color: var(--cream); background-color: color-mix(in srgb, var(--cream) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* 280ms = DESIGN.md §7 --dur-base. Killed by the reduced-motion block above. */ transition: background-color 280ms, box-shadow 280ms; } /* Sticky scrolled state. Elementor Pro's Sticky module adds `.elementor-sticky--effects` past the effects offset but exposes no style controls for that state, so there is no native path to a distinguishable scrolled header. COLOUR AND SHADOW ONLY — never padding, height or border-width — so the header box is byte-identical in both states and the transition contributes 0 to CLS. */ .deb-header.elementor-sticky--effects { background-color: var(--paper); background-color: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 4px 14px -4px rgba(38, 32, 26, 0.08); /* DESIGN.md §6 --shadow */ } /* Header brand hit area. MEASURED: the lockup link's box was 36x178px — over WCAG 2.2 2.5.8's 24x24 floor, but under the 44px this project holds interactive controls to. Visual size and target size are allowed to differ, and this is the standard way to separate them: the logo keeps its designed 36px height, the link gets a 44px box. Elementor's Image widget has no padding control that reaches the it generates. */ .deb-header .elementor-widget-image a, .deb-footer-logo a { display: flex; align-items: center; min-height: 44px; } /* The desktop nav must never wrap to a second line. MEASURED: it did, and the header grew from 72px to 113px at 1440. Elementor gives every child container `--width: 100%`, so the three header columns each ask for the full row and flexbox shrinks them proportionally. A flex item cannot shrink below its own min-content — which is what holds the row together here — but `.elementor-nav-menu` is `flex-wrap: wrap`, so the menu's min-content is ONE LINK WIDE and the floor collapsed. Disabling the wrap restores the floor. There is no native control for it: the