/* ericville26: the Libre Baskerville / Newsreader / Inter @import that used to * sit here is gone. Those three families are dropped by the restyle, and an * @import inside a stylesheet blocks rendering until it resolves. The two * replacement families are enqueued properly in inc/headers/asset-loader.php. * * The tokens below are superseded by css/v26.css + css/v26-compat.css, which * load immediately after this file and re-point each one. This file is deleted * in Stage 11 once no component reads from it. */ :root { /* * * Design Tokens * - Colors, spacing, radius, typography, layout * */ /* #1484: --header-fonts / --base-fonts deleted here. They named Libre Baskerville and Inter, neither of which has been LOADED since the @import came out of this file, and neither of which ever painted a pixel -- v26-compat.css redeclares both on :root at identical specificity and loads afterwards, so it always won (measured across 11 pages, plan/design/1482-typography-proposal.md 1a). They are the reason a four-family leak was suspected at all. The live definitions are v26-compat.css's --header-fonts:var(--serif) / --base-fonts:var(--sans). */ --system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;; --bg-brushed-metal: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E"); --bg-noise-intense: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.75'/%3E%3C/svg%3E"); --bg-noise-medium: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E"); --bg-noise-soft: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"); --bg-effect-light: var(--bg-noise-medium); --bg-effect-dark: var(--bg-noise-soft); --bg-effect-blend-light: multiply; --bg-effect-blend-dark: screen; --bg-size: 200px; /* Brand color scales (per section, 200 = light, 500 = base, 900 = dark) */ --brand-lab-200: #7ab493; --brand-lab-500: #0c7e58; --brand-lab-900: #070907; --brand-ux-200: #6FAADE; --brand-ux-500: #0F299B; --brand-ux-900: #131323; --brand-art-200: #C49F9D; --brand-art-500: #AF2A25; --brand-art-900: #140C0C; /* Core colors */ --color-bg: #fcfbf8; --color-surface: #ffffff; /* surface cards, panels */ --color-text: #444444; /* default body text */ --color-borders: #E1E0D5; /* rules and dividers */ /* Neutral scale used across UI */ --color-gray-100: #eee; --color-gray-200: #ddd; --color-gray-300: #ccc; --color-gray-600: #999; --color-gray-800: #333; --color-gray-900: #111; --color-black: #000; /* Accent colors */ --color-accent: var(--color-gray-800); --color-accent-dark: var(--color-gray-900); --color-accent-light: var(--color-gray-200); /* Contextual colors */ --color-price: #0a8115; /* Woo prices */ --color-special: #cb9400; /* Special CTA highlight */ /* Spacing scale */ --space-2xs: 4px; --space-xs: 5px; --space-s: 10px; --space-m: 20px; --space-lg: 40px; --space-xl: 50px; --space-2xl: 70px; --space-3xl: 100px; /* Radius scale */ --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-l: 10px; /* Motion */ --motion-fast: 200ms; --motion-medium: 300ms; --motion-steady: 600ms; --motino-slow: 800ms; /* Shadows & Glows */ --shadow-heavy: 0 1px 3px #0006, 0 3px 10px #0003; --shadow-heavy-elevated: 0 1px 10px #000, 0 3px 20px #000; --shadow-medium: 0 2px 2px -1px #29415b5e, 0 3px 10px #29415b57; --shadow-medium-elevated: 0 1px 5px #29415b91, 0 3px 20px #29415b57; --shadow-soft: 0 1px 1px #0001, 0 3px 10px #00000006; --shadow-glass-medium: 0 0 100px #b7cdcd, 0 2px 4px #355e6973; --inner-glow: inset 0 0 1px 1px #fff2; /* Shadows (Old) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.10); --shadow-md-2: 0 2px 5px rgba(0, 0, 0, 0.10); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-xl: 0 0 10px rgba(0, 0, 0, 0.12); /* Layout helpers */ --container-max: 900px; --container-max-with-gutter: 940px; /* calc(900px + (page gutters)) */ --container-wide: 1280px; --page-gutter-s: var(--space-m); --page-gutter-l: var(--space-xl); /* Legacy aliases for page gutters */ --page-margin-s: var(--page-gutter-s); --page-margin-l: var(--page-gutter-l); /* Common component sizes */ --thumbnail-size: 120px; --icon-size-xs: 12px; --icon-size-s: 16px; --icon-size-m: 24px; /* Typography scale — #1484: RE-POINTED AT THE LADDER, not re-tuned. * * This was a seven-rung rem scale (48 / 38.4 / 22.4 / 17.6 / 14.4 / 12.8 / * 11.2px) running in parallel with the v26 pixel scale, which is a third * of the audit's 32 distinct sizes on its own. Its consumers are the * ericville25 files this ticket does NOT own — basetags, forms, metadata, * comments, subnavigation, typesetting, page-ux — so re-pointing the * tokens is how those files land on the ladder without being edited. * * Two rungs collapse into one on purpose: -s (14.4) and -xs (12.8) were * 1.6px apart and both used for the same job (a caption, a comment's * meta, a subnav item), which is precisely the drift this pass exists to * remove. -xl and -xxl likewise: both only ever reached basetags' h1/h2, * which v26-base.css overrides at the same specificity from a later file, * so they are dead in the render and are kept only so the file parses. */ --font-size-xxl: var(--t-max); /* 48 -> 40 */ --font-size-xl: var(--t-max); /* 38.4 -> 40 */ --font-size-l: var(--t-title); /* 22.4 -> 23 */ --font-size-m: var(--t-body); /* 17.6 -> 16 */ --font-size-s: var(--t-meta); /* 14.4 -> 13.5 */ --font-size-xs: var(--t-meta); /* 12.8 -> 13.5 */ --font-size-2xs: var(--t-label); /* 11.2 -> 11 */ /* Breakpoints */ --breakpoint-l: var(--container-max); --breakpoint-l-with-gutter: var(--container-max-with-gutter); --breakpoint-m: 700px; --breakpoint-s: 550px; } /* * * Page-Specific Accent Overrides * - Sets logical accent tokens per content type * */ body.page-template-page-art { --color-accent: var(--brand-art-500); --color-accent-dark: var(--brand-art-900); --color-accent-light: var(--brand-art-200); } /* body.page-template-page-ux, .casestudies-page, .casestudy-page { */ body.nav-ux, body.page-template-page-ux { --color-accent: var(--brand-ux-500); --color-accent-dark: var(--brand-ux-900); --color-accent-light: var(--brand-ux-200); } /* body.page-template-page-lab, body.single-post { */ body.nav-lab, body.page-template-page-lab { --color-accent: var(--brand-lab-500); --color-accent-dark: var(--brand-lab-900); --color-accent-light: var(--brand-lab-200); } .woocommerce, .woocommerce-page { --color-accent: #186982; --color-accent-dark: #041419; --color-accent-light: #5da1b6; }