/* * Kuvani Premium — Base layer * Reset, CSS custom properties (design tokens), typography scale. * Color/font/layout values here are FALLBACKS; the authoritative values are * injected by inc/customizer.php (#kuvani-dynamic-css) so the Customizer * actually controls the site instead of these being the only source. */ :root { /* Colors (overridden by Customizer output in ) */ --kv-black: #000000; --kv-white: #ffffff; --kv-accent: #9D816C; --kv-bg: #000000; --kv-text: #ffffff; --kv-muted: #b3b3b3; --kv-border: rgba(255, 255, 255, 0.14); --kv-overlay: rgba(0, 0, 0, 0.45); /* Accent as TEXT color (links, price highlights, small labels): #9D816C is ~5.8:1 against black (passes WCAG AA) but only ~3.6:1 against white (fails AA's 4.5:1 for normal text) — so text usages read this darker variant instead of --kv-accent directly. Buttons/badges/borders keep using --kv-accent as-is; their pairings (black text on accent, or accent as a border/background) were checked separately and pass in both modes. */ --kv-accent-text: var(--kv-accent); /* Typography (overridden by Customizer output in ) */ --kv-font-heading: 'Big Shoulders Display', Georgia, serif; --kv-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --kv-container: 1400px; --kv-radius: 0px; --kv-gutter: clamp(1.25rem, 4vw, 3rem); --kv-section-space: clamp(3rem, 8vw, 7rem); --kv-transition: 320ms cubic-bezier(0.16, 1, 0.3, 1); /* Type scale */ --kv-h1: clamp(2.5rem, 6vw, 5.5rem); --kv-h2: clamp(2rem, 4.5vw, 3.5rem); --kv-h3: clamp(1.5rem, 3vw, 2.25rem); --kv-h4: clamp(1.15rem, 2vw, 1.5rem); --kv-body: clamp(0.95rem, 1vw, 1.05rem); --kv-small: 0.85rem; color-scheme: dark; } /* Light mode token remap. html[data-color-mode] is set synchronously by the inline no-FOUC script in header.php (see assets/js/theme-mode.js for the toggle) — that's the mechanism that actually prevents a flash of the wrong theme. body[data-color-mode] is also set (both by PHP as the no-JS/first-paint default, and mirrored by theme-mode.js on toggle) so the same rule matches either element. */ html[data-color-mode='light'], body[data-color-mode='light'] { --kv-bg: #ffffff; --kv-text: #000000; --kv-muted: #55504c; --kv-border: rgba(0, 0, 0, 0.12); --kv-overlay: rgba(255, 255, 255, 0.55); /* Darkened accent for text on the now-white background — see the --kv-accent-text definition in :root for the contrast math. */ --kv-accent-text: #766151; color-scheme: light; } /* Color-mode toggle icon swap: sun shown in dark mode (click for light), moon shown in light mode (click for dark). */ .kv-icon-moon { display: none; } html[data-color-mode='light'] .kv-icon-sun { display: none; } html[data-color-mode='light'] .kv-icon-moon { display: block; } #kv-color-mode-toggle { display: flex; align-items: center; justify-content: center; gap: 0; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--kv-bg); color: var(--kv-text); font-family: var(--kv-font-body); font-size: var(--kv-body); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--kv-font-heading); font-weight: 600; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; } h1 { font-size: var(--kv-h1); } h2 { font-size: var(--kv-h2); } h3 { font-size: var(--kv-h3); } h4 { font-size: var(--kv-h4); } p { margin: 0 0 1em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .kv-skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10000; background: var(--kv-accent); color: var(--kv-black); padding: 0.75rem 1.25rem; transition: top 200ms ease; } .kv-skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--kv-accent); outline-offset: 3px; } @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; } }