/* * Wilder Labs Studio - design tokens for the site (wls-tokens.css) * Mirrors the Divi 5 variables in wls-divi5-variables-starter-v1.json, for shortcode output and opt-in utility classes. * Fixed Responsive values step on the Divi 5 breakpoints, written as max-width bands under desktop * and min-width bands above it (check the media-query direction Divi generates on staging). * * Divi variable IDs in the starter export (Divi may re-key them on import; re-check in the Variable Manager): * --wls-klein WLS Klein gcid-4bgpnbexaj * --wls-midnight WLS Midnight gcid-y96xql075s * --wls-white WLS White gcid-thyar4q6j9 * --wls-volt WLS Volt gcid-4xmju0tnqn * --wls-klein-tint WLS Klein Tint gcid-cmivu4krtw * --wls-ink-text WLS Ink Text gcid-pggffiq3k3 * --wls-muted WLS Muted gcid-89k7q0an3d * --wls-klein-deep WLS Klein Deep gcid-qq058mqgh0 * --wls-shadow-light WLS Shadow Light gcid-8emafsfste * --wls-shadow-tint WLS Shadow Tint gcid-icc0jleqlr * --wls-shadow-midnight WLS Shadow Midnight gcid-eso36ujchj * --wls-white-80 WLS White 80 gcid-9p0fe8rgrn * --wls-hairline-light WLS Hairline Light gcid-iilom4ua5o * --wls-hairline-dark WLS Hairline Dark gcid-t5ite675ae * --wls-scrim-midnight WLS Scrim Midnight gcid-pre7g0o9xa * --wls-scrim-klein WLS Scrim Klein gcid-0oxoy6uvwf * --wls-size-display WLS Size Display gvid-y4a62yunyg * --wls-size-h1 WLS Size H1 gvid-njhb41m9p5 * --wls-size-h2 WLS Size H2 gvid-flfsj40ihp * --wls-size-h3 WLS Size H3 gvid-o83zhsqga0 * --wls-size-h4 WLS Size H4 gvid-irjtrig2pu * --wls-size-lead WLS Size Lead gvid-fob23dgcib * --wls-size-body WLS Size Body gvid-73w482377p * --wls-size-small WLS Size Small gvid-zvyp84hx04 * --wls-size-eyebrow WLS Size Eyebrow gvid-xlcfzyn02s * --wls-space-2xs WLS Space 2XS gvid-a1uxa0md2b * --wls-space-xs WLS Space XS gvid-y6vb7g08be * --wls-space-sm WLS Space SM gvid-16p3q88d3k * --wls-space-md WLS Space MD gvid-l0rpclz7wk * --wls-space-lg WLS Space LG gvid-d6a0whdtp7 * --wls-space-xl WLS Space XL gvid-rz0jlmk2d0 * --wls-space-2xl WLS Space 2XL gvid-lzl41ozgqd * --wls-space-3xl WLS Space 3XL gvid-n0tlcwe27k * --wls-space-section WLS Space Section gvid-6rzg833eyf * --wls-space-gutter WLS Space Gutter gvid-it118admtq * --wls-container WLS Container gvid-c5xn61r5e5 * --wls-narrow WLS Narrow gvid-r7j0grm681 * --wls-radius-none WLS Radius None gvid-hlb1lpj6s7 * --wls-radius-sm WLS Radius SM gvid-vgqma056ss * --wls-radius-pill WLS Radius Pill gvid-muym709bo3 * --wls-shadow-offset WLS Shadow Offset gvid-82x5hcv512 * --wls-hero-height-medium WLS Hero Height Medium gvid-ec9wwctiiu * --wls-hero-height-tall WLS Hero Height Tall gvid-2n57lx7r9s * --wls-header-height WLS Header Height gvid-2y4pej009s * --wls-logo-height-header WLS Logo Height Header gvid-1ggkbbhwsr * --wls-font-mono WLS Mono gvid-947u89l173 */ :root { --wls-klein: #4100F5; --wls-midnight: #120A2E; --wls-white: #FFFFFF; --wls-volt: #C2FF01; --wls-klein-tint: #EFEBFF; --wls-ink-text: #14102A; --wls-muted: #55536A; --wls-klein-deep: #3300C4; --wls-shadow-light: #D9D1FF; --wls-shadow-tint: #D6CCFF; --wls-shadow-midnight: #07031A; --wls-white-80: rgba(255,255,255,0.8); --wls-hairline-light: rgba(18,10,46,0.12); --wls-hairline-dark: rgba(255,255,255,0.16); --wls-scrim-midnight: rgba(18,10,46,0.85); --wls-scrim-klein: rgba(65,0,245,0.85); --wls-shadow-on-white: var(--wls-shadow-light); --wls-shadow-on-tint: var(--wls-shadow-tint); --wls-shadow-on-klein: var(--wls-klein-deep); --wls-shadow-on-midnight: var(--wls-shadow-midnight); --wls-shadow-rule-on-klein: #2800A6; --wls-font-sans: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif; --wls-font-mono: "Space Mono", "Space Mono Fallback", "Courier New", monospace; --wls-size-display: clamp(2.75rem, 1.6667rem + 4.8148vw, 6rem); --wls-size-h1: clamp(2.375rem, 1.6667rem + 3.1481vw, 4.5rem); --wls-size-h2: clamp(1.875rem, 1.4167rem + 2.0370vw, 3.25rem); --wls-size-h3: clamp(1.5rem, 1.2083rem + 1.2963vw, 2.375rem); --wls-size-h4: clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem); --wls-size-lead: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem); --wls-size-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); --wls-size-small: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem); --wls-size-eyebrow: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem); --wls-space-2xs: 8px; --wls-space-xs: 12px; --wls-space-sm: 16px; --wls-space-md: 24px; --wls-space-lg: 32px; --wls-space-xl: 48px; --wls-space-2xl: 64px; --wls-space-3xl: 96px; --wls-space-section: clamp(3.5rem, 2rem + 6.6667vw, 8rem); --wls-space-gutter: clamp(1rem, 4.4444vw, 4rem); --wls-container: 1280px; --wls-narrow: 720px; --wls-radius-none: 0px; --wls-radius-sm: 4px; --wls-radius-pill: 999px; --wls-shadow-offset: 6px; --wls-hero-height-medium: 520px; --wls-hero-height-tall: 680px; --wls-header-height: 88px; --wls-logo-height-header: 44px; --wls-lh-tight: 1.05; --wls-lh-body: 1.6; --wls-track-display: -0.02em; --wls-track-mono-caps: 0.14em; --wls-track-studio: 0.24em; --wls-rule-1: 2px; --wls-rule-2: 4px; --wls-rule-3: 8px; --wls-rule-4: 14px; --wls-rule-gap: 6px; --wls-rule-short: 42%; } @media (min-width: 1280px) { :root { --wls-hero-height-medium: 560px; --wls-hero-height-tall: 760px; } } @media (min-width: 1440px) { :root { --wls-hero-height-medium: 720px; --wls-hero-height-tall: 1080px; } } @media (max-width: 1024px) { :root { --wls-shadow-offset: 4px; --wls-hero-height-medium: 480px; --wls-hero-height-tall: 640px; --wls-header-height: 64px; } } @media (max-width: 980px) { :root { --wls-hero-height-tall: 720px; --wls-rule-2: 3px; --wls-rule-3: 6px; --wls-rule-4: 10px; --wls-rule-gap: 5px; } } @media (max-width: 860px) { :root { --wls-shadow-offset: 3px; --wls-hero-height-medium: 460px; } } @media (max-width: 767px) { :root { --wls-hero-height-medium: 400px; --wls-hero-height-tall: 640px; --wls-rule-2: 3px; --wls-rule-3: 5px; --wls-rule-4: 8px; --wls-rule-gap: 4px; } }