/* v2-perf-v20260508c.css -------------------------------------------------------------------------- Performance + accessibility surgical fixes for deskrune.com. Audited 2026-05-08 against /, /buy/, /quiz/which-kit/, /amazon/. Goals: - Fix WCAG AA color-contrast violations on hero/eyebrow/lede/AFM/lang-switcher. - Stabilize images (homepage covers) to prevent CLS. - Stabilize the sale-banner countdown (tabular-nums prevents horizontal jitter). - Add font-display:swap fallback for any in-flight Atkinson Hyperlegible request. - Honor reduced-motion users by softening dramatic-effects animations. Loaded LAST in so it overrides earlier sheets. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1) COLOR CONTRAST FIXES (WCAG 2.1 AA: 4.5:1 normal text, 3:1 large) -------------------------------------------------------------------------- Lighthouse flagged these in light mode against #F8F6F2 warm-white bg. Tokens: --ink-gray #1F2937, --navy #0F172A, --muted #64728A (FAIL ~3.4:1), --accent-dark #B0432A (PASS ~4.6:1). Strategy: shift muted/eyebrow/trust-line text to --ink-gray, shift accent text to --accent-dark variant on light bgs only. -------------------------------------------------------------------------- */ /* Eyebrow labels — were using --muted (#64728A) on warm-white = ~3.4:1 (FAIL). Bump to ink-gray for AA compliance. Visual weight stays via uppercase + tracking. */ .eyebrow, .hero-eyebrow, .section-eyebrow .label { color: var(--navy, #0F172A) !important; opacity: 0.85; } /* Lede paragraphs — same fix. */ .lede, .hero-lede, p.lede { color: var(--ink-gray, #1F2937) !important; } /* Hero trust line — small text, must be AAA-strict. On the buy/ checkout-hero, this sits on accent #E8735A — needs white. Elsewhere it sits on warm-white — needs ink-gray. */ .hero-trust-line, .hero-trust span { color: var(--ink-gray, #1F2937) !important; opacity: 0.92; } .hero.checkout-hero .hero-trust-line, .hero.checkout-hero .hero-trust span, section.hero[style*="accent"] .hero-trust-line { /* On accent #E8735A, even white text fails AA (2.98:1) at 14.62px. Wrap the trust copy in a dark translucent pill so it reads against the accent without us touching the brand color. White on rgba(0,0,0,0.55) blended over #E8735A computes to ~7.1:1 — clears AAA. */ color: #ffffff !important; background: rgba(20, 20, 30, 0.55); padding: 6px 12px; border-radius: 6px; display: inline-block; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 1; } /* Brand-strip etymology terms (dt) appear on dark navy background in dark mode AND in the light-mode "navy-on-light" hero strip. Orange (#c9613f) on dark navy lands at 4.44:1 — fail by 0.06. Lighten to #e8856a (~6.0:1) on dark. */ .brand-strip dl.etymology dt, section.brand-strip dt { color: #e8856a !important; font-weight: 700; } :root[data-theme="dark"] .brand-strip dl.etymology dt, :root[data-theme="dark"] section.brand-strip dt { color: #f0a085 !important; } /* Primary hero action — accent gradient sometimes lands at #E8735A which is ~3.1:1 against white text. Force darker accent for AA on the .primary CTA. */ .hero-action.primary { background-color: var(--accent-dark, #B0432A) !important; color: #ffffff !important; } .hero-action.primary:hover { background-color: #8E331E !important; } /* Today's-AFM card text on warm bg — was --muted. */ .todays-afm-tag, .todays-afm-hook, .todays-afm-cta, .afm-num, .afm-card .afm-title, .afm-card p { color: var(--ink-gray, #1F2937) !important; } .todays-afm-tag { /* Tag chip - keep contrast even when smaller. */ opacity: 0.92; } /* Active language switcher pill — was light text on warm bg. */ .deskrune-lang-switcher a.active, .deskrune-lang-switcher a[aria-current="page"] { color: var(--navy, #0F172A) !important; background-color: rgba(15, 23, 42, 0.08); } /* Dark theme — keep parity, never inherit the !important above into a dark surface that already meets contrast. v2-dark-parity-v20260508b.css already handles dark. */ :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .hero-eyebrow, :root[data-theme="dark"] .section-eyebrow .label, :root[data-theme="dark"] .lede, :root[data-theme="dark"] .hero-lede, :root[data-theme="dark"] p.lede, :root[data-theme="dark"] .hero-trust-line, :root[data-theme="dark"] .hero-trust span, :root[data-theme="dark"] .todays-afm-tag, :root[data-theme="dark"] .todays-afm-hook, :root[data-theme="dark"] .todays-afm-cta, :root[data-theme="dark"] .afm-num, :root[data-theme="dark"] .deskrune-lang-switcher a.active { color: var(--ds-ink, #f0e9dc) !important; opacity: 1; } :root[data-theme="dark"] .hero-action.primary { background-color: var(--accent, #E8735A) !important; color: #ffffff !important; } /* -------------------------------------------------------------------------- 2) CLS PREVENTION — image aspect-ratio stabilization -------------------------------------------------------------------------- Homepage book covers are 1280x720 (16:9). Without intrinsic sizing, the browser reflows when each PNG arrives. Apply aspect-ratio to the wrapper and contain layout to its computed box. -------------------------------------------------------------------------- */ .ai-ebook-card .img, .book-card .img, .cover-card .img { aspect-ratio: 16 / 9; overflow: hidden; } .ai-ebook-card .img img, .book-card .img img, .cover-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -------------------------------------------------------------------------- 3) COUNTDOWN STABILITY — sale banner tabular numerals -------------------------------------------------------------------------- The countdown ticks every second. Without tabular-nums, each digit change shifts surrounding text and forces layout reflow. Lighthouse "forced reflow" insight points here. -------------------------------------------------------------------------- */ .deskrune-countdown, [data-deskrune-countdown] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; display: inline-block; /* Reserve enough width for "Xd Hh Mm Ss" so banner never reflows. */ min-width: 8.5ch; text-align: left; contain: layout style; } /* -------------------------------------------------------------------------- 4) FONT-DISPLAY SAFETY NET -------------------------------------------------------------------------- The Google Fonts CSS we now already includes display=swap, but if any older cached version of style-v20260508a.css is in the wild and re-attaches an Atkinson @font-face, force swap so it never blocks paint. -------------------------------------------------------------------------- */ @font-face { font-family: 'Atkinson Hyperlegible'; font-display: swap; /* No src — this rule only patches font-display on existing @font-face entries. */ } /* -------------------------------------------------------------------------- 5) REDUCED-MOTION RESPECT -------------------------------------------------------------------------- The aurora/cinematic animations are decorative. Honor user preference; not strictly a Lighthouse audit but good a11y hygiene & avoids INP spikes from continuous transform repaints. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aurora-stage, .hero-anim-bg, .hero-cine-glyph, .brand-reveal-glyph, [data-aurora], [data-reveal-stagger], [data-reveal] { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 5b) SR-ONLY UTILITY (some pages don't load visual-pass which defines this) -------------------------------------------------------------------------- Used by the amazon/ az-grid-wrap visually-hidden section heading. -------------------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 6) FOCUS-VISIBLE for keyboard users on the cmdk trigger + theme toggle -------------------------------------------------------------------------- Lighthouse a11y audit doesn't strictly fail without these, but they're icon-only buttons so keyboard users need a clear ring. -------------------------------------------------------------------------- */ .cmdk-trigger:focus-visible, .theme-toggle:focus-visible, button[aria-label]:focus-visible { outline: 2px solid var(--accent, #E8735A); outline-offset: 2px; border-radius: 4px; }