/* ============================================================================ * V17 DESIGN SYSTEM — one brand, every page (priority 120, loads last) * ---------------------------------------------------------------------------- * Source of truth for color, type, spacing, radius, shadow. This sheet sits * ABOVE the entire legacy stack (which tops out at priority 116), so its * :root declarations win the cascade and every legacy color token is remapped * onto the six-color palette in one stroke. No sealed sheet is edited. * * Color doctrine (LA-TOXICA-V17-REDESIGN-PLAN.md S1): * rose #EC2C91 (primary accent) · jaune #F2B119 (secondary spark) * charcoal #1a1a1a (dark surface) · charcoal-soft #222 (dark cards) * cream #faf7f2 (light surface) · white #ffffff * 60-30-10 per section · AA contrast everywhere · dark-led, cream light bands. * ========================================================================== */ :root { /* ---- the only six colors allowed on public pages ---- */ --v17-rose: #EC2C91; --v17-jaune: #F2B119; --v17-charcoal: #1a1a1a; --v17-charcoal-soft: #222222; --v17-cream: #faf7f2; --v17-white: #ffffff; /* ---- derived, palette-internal (mixes of the six, AA-safe) ---- */ --v17-rose-hover: #f7549f; /* lighter rose for hover on dark */ --v17-rose-deep: #c81f78; /* darker rose, AA on cream for links */ --v17-jaune-deep: #d99c0f; /* darker jaune, AA text never on jaune */ --v17-cream-muted: #e9e2d6; /* hairlines/dividers on cream */ --v17-ink-70: rgba(26,26,26,0.72); /* body text on cream */ --v17-ink-55: rgba(26,26,26,0.58); /* meta text on cream (>= 4.5:1) */ --v17-cream-90: rgba(250,247,242,0.92); /* body text on charcoal */ --v17-cream-65: rgba(250,247,242,0.66); /* meta text on charcoal (>= 4.5:1) */ --v17-line-dark: rgba(250,247,242,0.14); /* hairlines on charcoal */ --v17-line-cream: rgba(26,26,26,0.12); /* hairlines on cream */ /* ---- focus ring (visible, AA, on either surface) ---- */ --v17-focus: var(--v17-rose); --v17-focus-ring: 0 0 0 3px rgba(236,44,145,0.45); /* ---- type families ---- */ --v17-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --v17-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --v17-font-script: 'Caveat', 'Brush Script MT', cursive; --v17-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- fluid type scale (one scale, every page) ---- */ --v17-fs-display: clamp(2.7rem, 6.2vw, 5.25rem); /* hero */ --v17-fs-h1: clamp(2.2rem, 4.6vw, 3.6rem); --v17-fs-h2: clamp(1.85rem, 3.6vw, 2.9rem); --v17-fs-h3: clamp(1.35rem, 2.3vw, 1.95rem); --v17-fs-h4: 1.25rem; --v17-fs-lead: clamp(1.075rem, 1.5vw, 1.25rem); --v17-fs-body: 1.0625rem; --v17-fs-small: 0.9375rem; --v17-fs-eyebrow: 0.72rem; /* ---- spacing scale ---- */ --v17-wrap: 1200px; --v17-wrap-wide: 1400px; --v17-gutter: clamp(1.25rem, 4vw, 3.5rem); --v17-section-y: clamp(3.75rem, 8vw, 6.75rem); --v17-section-y-tight: clamp(2.75rem, 5vw, 4.25rem); --v17-stack: clamp(1rem, 2vw, 1.6rem); /* ---- radius scale ---- */ --v17-r-pill: 999px; --v17-r-card: 18px; --v17-r-media: 14px; --v17-r-input: 12px; /* ---- shadow scale (tinted to charcoal/rose, never pure black) ---- */ --v17-shadow-sm: 0 2px 10px rgba(26,26,26,0.10); --v17-shadow-md: 0 12px 34px rgba(26,26,26,0.16); --v17-shadow-rose: 0 12px 30px rgba(236,44,145,0.28); --v17-shadow-card: 0 18px 48px rgba(26,26,26,0.14); /* ---- motion ---- */ --v17-ease: cubic-bezier(0.16, 1, 0.3, 1); --v17-dur: 0.45s; /* ===================================================================== * LEGACY TOKEN REMAP — snap every old color var onto the six. * These override the legacy :root declarations because this sheet loads * last. Any element painting via these vars now uses palette color. * ===================================================================== */ /* the rose family (V5 gold, V6 rose, V8 off-rose all collapse to rose) */ --latoxica-pink: var(--v17-rose); --or-cierge: var(--v17-rose); --brand-pink: var(--v17-rose); --v11-rose: var(--v17-rose); --latoxica-rose: var(--v17-rose); /* the jaune family */ --latoxica-jaune: var(--v17-jaune); --latoxica-gold: var(--v17-jaune); --v11-jaune: var(--v17-jaune); /* the cream / off-white family -> canonical cream */ --creme-tortilla: var(--v17-cream); --os-blanchi: var(--v17-cream); --latoxica-cream: var(--v17-cream); --v11-cream: var(--v17-cream); /* the dark family -> charcoal (kills near-black #0A0707) */ --noir-azabache: var(--v17-charcoal); --latoxica-charcoal: var(--v17-charcoal); --latoxica-noir: var(--v17-charcoal); --v11-charcoal: var(--v17-charcoal); --v11-charcoal-soft: var(--v17-charcoal-soft); --v11-white: var(--v17-white); /* font tokens unify too (V8 typography-lock used a different rose) */ --latoxica-font-display: var(--v17-font-display); --latoxica-font-sans: var(--v17-font-sans); --latoxica-font-script: var(--v17-font-script); --latoxica-font-mono: var(--v17-font-mono); } /* ============================================================================ * BASE TYPOGRAPHY (normalize headings/body to the one scale & families) * Scoped to the theme main so we never touch wp-admin / editor chrome. * ========================================================================== */ .latoxica-page-a, .latoxica-v11, main.site-main, .site-content main { font-family: var(--v17-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Inline inside any heading is the brand emphasis: Fraunces italic, rose, * with descender clearance so "y g j p q" never clip (taste-skill rule). */ .latoxica-page-a h1 em, .latoxica-page-a h2 em, .latoxica-page-a h3 em, .latoxica-v11 h1 em, .latoxica-v11 h2 em, .latoxica-v11 h3 em { font-family: var(--v17-font-display); font-style: italic; font-weight: 400; color: var(--v17-rose); line-height: 1.1; padding-bottom: 0.04em; } /* ============================================================================ * EYEBROW — ONE treatment everywhere (mono, uppercase, tracked, rose) * ========================================================================== */ .latoxica-eyebrow, .v17-eyebrow { display: inline-block; font-family: var(--v17-font-mono); font-size: var(--v17-fs-eyebrow); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; /* Surface-safe by inheriting the section's already-correct text colour * (charcoal on cream sections, cream on dark sections) at reduced emphasis. * No single rose can clear AA on BOTH surfaces, so the eyebrow label goes * neutral-muted (AA 7:1+ either way) and the rose accent is reserved for the * hero and reviews below. */ color: inherit !important; opacity: 0.82; margin: 0 0 1rem; } /* brand rose accent kept on the two prominent dark moments (AA 5.7:1 on charcoal) */ .latoxica-hero-a .latoxica-eyebrow, .v17-reviews .latoxica-eyebrow { color: var(--v17-rose-hover) !important; opacity: 1; } /* ============================================================================ * GLOBAL A11Y — visible focus, reduced motion * ========================================================================== */ .latoxica-page-a a:focus-visible, .latoxica-page-a button:focus-visible, .latoxica-v11 a:focus-visible, .latoxica-v11 button:focus-visible, .v17-faq__q:focus-visible, .v17-reviews button:focus-visible { outline: 2px solid var(--v17-rose); outline-offset: 2px; border-radius: 4px; } @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; } }