/* ========================================================================== TOKENS — Hale Custom Signs -------------------------------------------------------------------------- PALETTE PROVENANCE Every brand colour below was extracted programmatically from the client's own logo (https://www.halecustomsigns.com/site/logo2.png, 3047x1766 RGBA) by counting opaque pixels. Measured distribution: #E81830 crimson — 40.15% of opaque pixels (badge border + SIGNS band) #402890 purple — 28.62% (badge field) #F8F8F8 white — 13.12% (SIGNS lettering + keyline) #000000 black — 10.32% (letter shadows / outline) #F8C008 gold — 2.36% ("Hale" script + CUSTOM) #F8E0A0 gold-lt — 1.20% (script highlight bevel) The logo is a 1930s-style Art Deco sign badge: hexagonal field, chevron notches, speed-lines, gold script. That vocabulary — deco geometry, neon glow, gold leaf, dimensional letter shadow — drives the whole system. Nothing here is invented; the neutrals are the brand purple desaturated and darkened so the crimson/gold read as *illumination* against them. ========================================================================== */ :root { /* ---- Brand: straight from the logo ---- */ --brand-crimson: #e81830; --brand-purple: #402890; --brand-gold: #f8c008; --brand-gold-light: #f8e0a0; --brand-white: #f8f8f8; /* ---- Crimson scale ---- */ --crimson-700: #a30f20; --crimson-600: #c81328; --crimson-500: #e81830; --crimson-400: #ff3a52; --crimson-300: #ff6b7e; /* ---- Purple scale ---- */ --purple-800: #241550; --purple-700: #2f1c6b; --purple-600: #372280; --purple-500: #402890; --purple-400: #5836b8; --purple-300: #7a54e0; --purple-200: #a586f0; /* ---- Gold scale ---- */ --gold-600: #c89400; --gold-500: #f8c008; --gold-400: #ffd23f; --gold-300: #f8e0a0; --gold-100: #fff6dd; /* ---- Ink: brand purple driven to near-black. Signs glow against dark. ---- */ --ink-950: #06040d; --ink-900: #0a0614; --ink-850: #0e0920; --ink-800: #140c28; --ink-700: #1b1138; --ink-600: #241848; --ink-500: #32245e; /* ---- Metal: brushed aluminium, the substrate of the trade ---- */ --metal-100: #e8e6f0; --metal-300: #b8b3cc; --metal-500: #7d7794; --metal-700: #4a4560; /* ---- Text ---- */ --text-hi: #f7f4ff; --text-mid: #cfc6e8; --text-low: #9c92bd; --text-on-light: #0e0920; --text-on-light-mid: #443a63; /* ---- Surfaces ---- */ --bg: var(--ink-900); --surface: var(--ink-850); --surface-2: var(--ink-800); --border: rgba(165, 134, 240, 0.16); --border-strong: rgba(165, 134, 240, 0.32); /* ---- Glass ---- */ --glass-bg: rgba(20, 12, 40, 0.62); --glass-bg-strong: rgba(10, 6, 20, 0.86); --glass-border: rgba(248, 248, 248, 0.1); --glass-hi: rgba(248, 248, 248, 0.14); --glass-blur: 20px; /* ---- Typography ---- */ --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow Bold", sans-serif; --font-script: "Kaushan Script", "Segoe Script", cursive; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Fluid scale — 320px to 1600px viewport */ --fs-eyebrow: clamp(0.68rem, 0.62rem + 0.3vw, 0.8rem); --fs-body-sm: clamp(0.86rem, 0.83rem + 0.16vw, 0.95rem); --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); --fs-body-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem); --fs-h4: clamp(1.25rem, 1.12rem + 0.65vw, 1.75rem); --fs-h3: clamp(1.6rem, 1.35rem + 1.25vw, 2.6rem); --fs-h2: clamp(2.2rem, 1.6rem + 3vw, 4.5rem); --fs-h1: clamp(2.8rem, 1.7rem + 5.5vw, 7rem); --fs-mega: clamp(3.5rem, 1.5rem + 10vw, 11rem); --lh-tight: 0.92; --lh-snug: 1.15; --lh-body: 1.65; --lh-loose: 1.75; --tr-mega: -0.02em; --tr-display: 0.01em; --tr-eyebrow: 0.28em; --tr-label: 0.16em; --measure: 68ch; /* ---- Spacing: 4px base ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 12rem; --section-y: clamp(4rem, 2rem + 9vw, 9.5rem); --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem); --maxw: 1320px; --maxw-narrow: 900px; /* ---- Radii: deco is angular. Restraint here is deliberate. ---- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; --chamfer: 14px; /* deco corner cut, used via clip-path */ /* ---- Shadow stacks: contact -> mid -> ambient. Never a single flat shadow. ---- */ --sh-1: 0 1px 2px rgba(6, 4, 13, 0.5), 0 2px 6px rgba(6, 4, 13, 0.35); --sh-2: 0 1px 2px rgba(6, 4, 13, 0.55), 0 4px 10px rgba(6, 4, 13, 0.4), 0 10px 28px rgba(6, 4, 13, 0.32); --sh-3: 0 1px 2px rgba(6, 4, 13, 0.6), 0 6px 14px rgba(6, 4, 13, 0.45), 0 18px 44px rgba(6, 4, 13, 0.38), 0 36px 80px rgba(6, 4, 13, 0.3); --sh-4: 0 2px 4px rgba(6, 4, 13, 0.65), 0 10px 24px rgba(6, 4, 13, 0.5), 0 28px 64px rgba(6, 4, 13, 0.42), 0 56px 120px rgba(6, 4, 13, 0.35); /* Dimensional-letter shadow: letters stood off the wall, light from top-left */ --sh-letter: 0 1px 0 rgba(6, 4, 13, 0.9), 0 2px 0 rgba(6, 4, 13, 0.8), 0 3px 0 rgba(6, 4, 13, 0.7), 0 4px 1px rgba(6, 4, 13, 0.6), 0 8px 14px rgba(6, 4, 13, 0.55), 0 18px 36px rgba(6, 4, 13, 0.4); /* ---- Illumination: the core visual metaphor ---- */ --glow-gold: 0 0 6px rgba(248, 192, 8, 0.6), 0 0 18px rgba(248, 192, 8, 0.4), 0 0 44px rgba(248, 192, 8, 0.22); --glow-crimson: 0 0 6px rgba(232, 24, 48, 0.65), 0 0 20px rgba(232, 24, 48, 0.45), 0 0 52px rgba(232, 24, 48, 0.25); --glow-purple: 0 0 8px rgba(122, 84, 224, 0.6), 0 0 26px rgba(122, 84, 224, 0.42), 0 0 64px rgba(122, 84, 224, 0.24); --glow-text-gold: 0 0 8px rgba(248, 192, 8, 0.5), 0 0 24px rgba(248, 192, 8, 0.3); --glow-text-crimson: 0 0 8px rgba(232, 24, 48, 0.55), 0 0 26px rgba(232, 24, 48, 0.32); /* Inner bevel: routed/carved edge, echoing sandblasted + carved work */ --bevel-in: inset 0 1px 0 rgba(248, 248, 248, 0.12), inset 0 -1px 0 rgba(6, 4, 13, 0.6); /* ---- Gradients ---- */ --grad-gold: linear-gradient( 170deg, #fff6dd 0%, #f8e0a0 18%, #f8c008 48%, #c89400 72%, #f8e0a0 100% ); --grad-crimson: linear-gradient(150deg, #ff3a52 0%, #e81830 52%, #a30f20 100%); --grad-purple: linear-gradient(150deg, #7a54e0 0%, #402890 55%, #241550 100%); --grad-metal: linear-gradient( 100deg, #4a4560 0%, #b8b3cc 18%, #e8e6f0 30%, #7d7794 46%, #b8b3cc 62%, #4a4560 82%, #7d7794 100% ); --grad-neon-sweep: linear-gradient( 90deg, transparent 0%, rgba(248, 192, 8, 0.9) 45%, rgba(255, 246, 221, 1) 50%, rgba(248, 192, 8, 0.9) 55%, transparent 100% ); /* ---- Easing: custom curves only. No ease-in-out defaults. ---- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out — primary */ --e-out-soft: cubic-bezier(0.25, 0.8, 0.35, 1); --e-in-out: cubic-bezier(0.76, 0, 0.24, 1); --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */ --e-snap: cubic-bezier(0.2, 0, 0, 1); --d-fast: 150ms; --d-base: 260ms; --d-slow: 420ms; --d-slower: 700ms; --d-reveal: 900ms; /* ---- Z-index scale ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-header: 30; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-cursor: 70; } /* Motion kill-switch. Every animated rule below consults --motion. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-slower: 1ms; --d-reveal: 1ms; } }