/* ========================================================================== Design Tokens — Kinexa Brand Kit THEMING MODEL ------------- :root = DARK theme (the brand default, unchanged). :root[data-theme="light"] = LIGHT theme overrides. The element carries data-theme. It is set before first paint by the inline script in inc/enqueue.php (kinexa_theme_no_flash_script), so there is no flash of the wrong theme. No attribute at all == dark. TOKEN LAYERS ------------ 1. Brand constants (--brand-*, --ink-*) — identical in BOTH themes. 2. Themed tokens (--color-*, --border-*, --shadow-*, --tint-*, …) — redefined per theme. 3. Semantic aliases (--bg-page, --text-primary, --accent, …) — preferred names for NEW code. NAMING CAVEAT: the --color-dark, --color-white and --color-gray names describe their DARK-theme appearance, not their role. They are kept because ~16 CSS files and several PHP templates already reference them. What is preserved across themes is the ROLE, not the literal lightness: --color-black = page background (#050508 dark / #FFFFFF light) --color-white = primary/heading text (#F2F6FF dark / #0A0E1A light) --color-gray-light = body paragraph text (always the more prominent of the two grays) --color-gray = muted/caption text (always the less prominent) Prefer the semantic aliases at the bottom of this file for anything new. ========================================================================== */ :root { /* ====================================================================== LAYER 1 — Brand constants (NEVER change between themes) ====================================================================== */ /* Core brand hues, always at full strength. Use for large fills and for any surface where the brand must read exactly as specified in the kit. */ --brand-cyan: #00E5FF; --brand-orange: #FF4D00; /* Third-party brand colors — must not be re-themed. */ --brand-whatsapp: #25D366; --brand-whatsapp-dark: #128C7E; /* Fixed inks. Pick by the LIGHTNESS OF THE FILL you are sitting on, not by the active theme. */ --ink-dark: #050508; /* on bright fills (brand cyan, white) */ --ink-light: #F2F6FF; /* on dark/saturated fills (orange, WhatsApp green) */ /* Media chrome — overlays and controls that sit ON PHOTOGRAPHS. Photos read best against dark chrome in either theme, so these are deliberately constant. */ --media-scrim: linear-gradient(to top, rgba(5, 5, 8, 0.8) 0%, transparent 50%); --media-scrim-strong: linear-gradient(to top, rgba(5, 5, 8, 0.9) 0%, rgba(5, 5, 8, 0.2) 40%, transparent 100%); --media-btn-bg: rgba(0, 0, 0, 0.5); /* ---- Fixed light surface -------------------------------------------- Sport cards and product tiles are pure white in BOTH themes, to match the white studio background baked into the product photos. Because the surface never changes, its ink must never change either — using the themed --color-white/--color-cyan here would put near-white text and 1.5:1 cyan on a white card in dark mode. Every value below is AA on #FFFFFF: text 19.3:1, muted 6.0:1, accent 6.2:1. */ --on-light-bg: #FFFFFF; --on-light-text: #0A0E1A; --on-light-muted: #5B6472; --on-light-accent: #006B80; --on-light-border: rgba(10, 14, 26, 0.12); --on-light-border-hover: rgba(0, 107, 128, 0.45); --on-light-tint: rgba(0, 107, 128, 0.05); --on-light-shadow: 0 10px 30px rgba(10, 14, 26, 0.18); --lightbox-bg: rgba(5, 5, 8, 0.95); --lightbox-btn-bg: rgba(255, 255, 255, 0.1); --lightbox-btn-bg-hover: rgba(255, 255, 255, 0.2); /* ====================================================================== LAYER 2 — Themed tokens : DARK (default) ====================================================================== */ /* Accent channels. Kept as raw "R, G, B" triplets so every tint, border and glow below can be derived from ONE place. Change the accent here and every wash follows automatically. */ --rgb-cyan: 0, 229, 255; --rgb-orange: 255, 77, 0; --rgb-contrast: 255, 255, 255; /* the channel that borders/dividers use */ /* Colors — Surfaces (ordered by distance from the page background) */ --color-black: #050508; /* page background */ --color-dark: #0D0D14; /* surface 1 — alternating sections */ --color-dark2: #141420; /* surface 2 — cards, inputs, dropdowns */ --color-dark3: #1C1C2E; /* surface 3 — hover / nested / deepest */ /* Colors — Accent */ --color-cyan: #00E5FF; --color-cyan-dim: #00B8D9; --color-cyan-dark: #008FA3; --color-orange: #FF4D00; --color-orange-dim: #CC3D00; --color-orange-dark: #993000; /* Colors — Text */ --color-white: #F2F6FF; /* headings, emphasis */ --color-gray-light: #9CA3AF; /* body paragraphs */ --color-gray: #6B7280; /* captions, meta, muted */ --color-gray-dark: #374151; /* disabled / lowest emphasis */ /* Ink to place ON a filled accent. Flips per theme because the accent itself flips from bright (dark theme) to deep (light theme). */ --ink-on-cyan: var(--ink-dark); --ink-on-orange: var(--ink-light); /* Colors — Functional */ --color-success: #10B981; --color-error: #EF4444; --color-warning: #F59E0B; --color-star: #FFB800; /* Borders */ --border-cyan: rgba(var(--rgb-cyan), 0.12); --border-cyan-hover: rgba(var(--rgb-cyan), 0.3); --border-subtle: rgba(var(--rgb-contrast), 0.06); --border-light: rgba(var(--rgb-contrast), 0.1); /* Accent washes */ --tint-cyan-faint: rgba(var(--rgb-cyan), 0.04); --tint-cyan-weak: rgba(var(--rgb-cyan), 0.05); --tint-cyan-soft: rgba(var(--rgb-cyan), 0.1); --tint-orange-soft: rgba(var(--rgb-orange), 0.1); --tint-orange-border: rgba(var(--rgb-orange), 0.2); --tint-success: rgba(16, 185, 129, 0.1); --tint-success-border: rgba(16, 185, 129, 0.3); --tint-error: rgba(239, 68, 68, 0.1); --tint-error-border: rgba(239, 68, 68, 0.3); /* Chrome */ --header-bg: rgba(5, 5, 8, 0.9); --header-bg-scrolled: rgba(5, 5, 8, 0.95); --scrim: rgba(0, 0, 0, 0.7); /* mobile-menu backdrop */ --focus-ring: 0 0 0 3px rgba(var(--rgb-cyan), 0.1); /* Embedded map — inverted so Google's light tiles match a dark page */ --map-filter: grayscale(1) invert(1) contrast(0.8) brightness(0.7); /* Dot-matrix world map (Global Reach). Sits on --color-dark2, so it needs its own value: --color-dark3 only reaches ~1.15:1 there and vanishes. */ --map-dot: #39415A; /* Select-menu chevron. The whole data URI is the token because the stroke color is baked into the SVG and must be swapped wholesale. */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Gradients */ --gradient-cyan-orange: linear-gradient(135deg, var(--color-cyan), var(--color-orange)); --gradient-dark: linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 100%); --gradient-card: linear-gradient(180deg, var(--color-dark2) 0%, var(--color-dark3) 100%); --gradient-hero-glow-cyan: radial-gradient(ellipse at 20% 50%, rgba(var(--rgb-cyan), 0.08) 0%, transparent 60%); --gradient-hero-glow-orange: radial-gradient(ellipse at 80% 50%, rgba(var(--rgb-orange), 0.06) 0%, transparent 60%); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-cyan: 0 0 20px rgba(var(--rgb-cyan), 0.15); --shadow-orange: 0 0 20px rgba(var(--rgb-orange), 0.15); /* ====================================================================== Typography — Families ====================================================================== */ --font-headline: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-label: 'Barlow Condensed', 'Barlow', sans-serif; /* Typography — Sizes */ --fs-hero: clamp(48px, 8vw, 72px); --fs-h1: clamp(36px, 5vw, 56px); --fs-h2: clamp(30px, 4vw, 44px); --fs-h3: clamp(24px, 3vw, 32px); --fs-h4: clamp(20px, 2.5vw, 24px); --fs-h5: clamp(18px, 2vw, 20px); --fs-body: 16px; --fs-body-lg: 18px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-label: 13px; --fs-eyebrow: 13px; /* Typography — Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Typography — Line Heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.75; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; /* Section Spacing */ --section-pad: clamp(64px, 10vw, 120px); --section-pad-sm: clamp(48px, 8vw, 80px); /* Layout */ --container-max: 1280px; --container-narrow: 960px; --container-wide: 1440px; --container-pad: clamp(16px, 4vw, 40px); /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Z-index Scale */ --z-base: 1; --z-dropdown: 100; --z-tooltip: 150; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-max: 999; /* Header */ --header-height: 80px; --header-height-scrolled: 64px; } /* ========================================================================== LAYER 2 — Themed tokens : LIGHT Every text/background pair below was checked against WCAG 2.1 AA (4.5:1) on all three surface levels. The accents are deepened because the brand cyan (#00E5FF) only reaches 1.54:1 on white and the brand orange (#FF4D00) only 3.34:1 — neither is legible as text on a light page. Full-strength brand hues remain available as --brand-cyan / --brand-orange. ========================================================================== */ :root[data-theme="light"] { /* Accent channels — everything derived below follows these. */ --rgb-cyan: 0, 107, 128; --rgb-orange: 188, 58, 0; --rgb-contrast: 10, 14, 26; /* Colors — Surfaces (page -> deepest, same ordering role as dark) */ --color-black: #FFFFFF; --color-dark: #F4F7FB; --color-dark2: #EBF0F7; --color-dark3: #E2E8F2; /* Colors — Accent (deepened for legibility on light surfaces) */ --color-cyan: #006B80; /* 6.15:1 on white */ --color-cyan-dim: #00566B; /* hover — goes DARKER in light mode */ --color-cyan-dark: #003D4D; --color-orange: #BC3A00; /* 5.61:1 on white */ --color-orange-dim: #9A2F00; --color-orange-dark: #7A2500; /* Colors — Text */ --color-white: #0A0E1A; /* headings — 19.25:1 on white */ --color-gray-light: #4A5566; /* body — 7.55:1 on white */ --color-gray: #5B6472; /* muted — 5.98:1 on white, 4.86:1 on surface 3 */ --color-gray-dark: #C4CDD9; /* disabled — lowest emphasis */ /* The accent is now deep, so accent fills need LIGHT ink. */ --ink-on-cyan: #FFFFFF; --ink-on-orange: #FFFFFF; /* Colors — Functional (darkened; the dark-theme values fail on white) */ --color-success: #047857; --color-error: #C62828; --color-warning: #B45309; --color-star: #C77800; /* Borders — need more alpha than dark mode to stay visible on white */ --border-cyan: rgba(var(--rgb-cyan), 0.25); --border-cyan-hover: rgba(var(--rgb-cyan), 0.5); --border-subtle: rgba(var(--rgb-contrast), 0.1); --border-light: rgba(var(--rgb-contrast), 0.18); /* Accent washes */ --tint-cyan-faint: rgba(var(--rgb-cyan), 0.05); --tint-cyan-weak: rgba(var(--rgb-cyan), 0.06); --tint-cyan-soft: rgba(var(--rgb-cyan), 0.1); --tint-orange-soft: rgba(var(--rgb-orange), 0.1); --tint-orange-border: rgba(var(--rgb-orange), 0.3); --tint-success: rgba(4, 120, 87, 0.08); --tint-success-border: rgba(4, 120, 87, 0.3); --tint-error: rgba(198, 40, 40, 0.08); --tint-error-border: rgba(198, 40, 40, 0.3); /* Chrome */ --header-bg: rgba(255, 255, 255, 0.9); --header-bg-scrolled: rgba(255, 255, 255, 0.95); --scrim: rgba(10, 14, 26, 0.5); --focus-ring: 0 0 0 3px rgba(var(--rgb-cyan), 0.18); /* Map tiles are already light — no inversion, just a light desaturation. */ --map-filter: grayscale(0.25) contrast(1.02); --map-dot: #A5B2C4; /* Chevron restroked to the body-text color (#4A5566). */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5566' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Hero glows need slightly more alpha to register against white. */ --gradient-hero-glow-cyan: radial-gradient(ellipse at 20% 50%, rgba(var(--rgb-cyan), 0.1) 0%, transparent 60%); --gradient-hero-glow-orange: radial-gradient(ellipse at 80% 50%, rgba(var(--rgb-orange), 0.07) 0%, transparent 60%); /* Shadows — tinted with the ink color and much softer. Heavy black shadows read as dirt on a light page. */ --shadow-sm: 0 1px 2px rgba(var(--rgb-contrast), 0.06); --shadow-md: 0 4px 12px rgba(var(--rgb-contrast), 0.08); --shadow-lg: 0 8px 28px rgba(var(--rgb-contrast), 0.1); --shadow-xl: 0 16px 48px rgba(var(--rgb-contrast), 0.12); --shadow-cyan: 0 0 20px rgba(var(--rgb-cyan), 0.18); --shadow-orange: 0 0 20px rgba(var(--rgb-orange), 0.18); } /* ========================================================================== LAYER 3 — Semantic aliases Use THESE in any new CSS. They resolve through the themed tokens above, so they are correct in both themes and they say what they mean. The --kx- prefix is NOT decoration. GeneratePress defines its own palette on :root (--accent, --contrast, --base, --base-2, --contrast-3). An unprefixed --accent here would silently overwrite the parent theme's accent, or be overwritten by it, depending on which stylesheet the cascade saw last. Prefix anything added to :root for the same reason. ========================================================================== */ :root { --kx-bg-page: var(--color-black); --kx-surface-1: var(--color-dark); --kx-surface-2: var(--color-dark2); --kx-surface-3: var(--color-dark3); --kx-text-primary: var(--color-white); --kx-text-body: var(--color-gray-light); --kx-text-muted: var(--color-gray); --kx-text-disabled: var(--color-gray-dark); --kx-accent: var(--color-cyan); --kx-accent-hover: var(--color-cyan-dim); --kx-accent-2: var(--color-orange); --kx-accent-2-hover: var(--color-orange-dim); } /* Smooth the swap. Only the properties that actually change theme are transitioned, so this costs nothing on normal interaction. */ body, .site-header, .card, .sport-card, .product-card, .post-card, .faq-question, .form-input, .form-select, .form-textarea { transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base); } /* Users who asked for less motion get an instant swap instead. */ @media (prefers-reduced-motion: reduce) { body, .site-header, .card, .sport-card, .product-card, .post-card, .faq-question, .form-input, .form-select, .form-textarea { transition: none; } }