/* ============================================================ PAL RADIOS — DESIGN TOKENS Every color, font size, spacing value, radius and shadow used anywhere on the site lives here. style.css consumes these tokens only — it never hardcodes a raw value. ============================================================ */ :root { /* ---------- COLOR / SURFACES ---------- */ --color-bg: #0C0C0E; /* page base — near-black charcoal, never pure #000 */ --color-surface: #141417; /* elevated cards / panels */ --color-surface-2: #1A1A1F; /* second elevation step (inputs, hover fills) */ --color-border: #232328; /* hairline borders */ --color-border-strong: #2E2E35; /* slightly stronger border (hover / focus-within) */ --color-white: #FFFFFF; /* pure white — dealer-logo band, sits on brand-colored logos */ /* ---------- COLOR / TEXT ---------- */ --color-heading: #F4F1EC; /* warm off-white headings */ --color-body: #A6A6AE; /* muted gray body copy */ --color-muted: #71717A; /* captions, footer small print */ --color-ink: #0C0C0E; /* dark heading text for light-surface hover states */ --color-ink-muted: rgba(12, 12, 14, 0.68); /* dark body text for light-surface hover states */ /* ---------- COLOR / ACCENT ---------- */ --color-ember: #E5484D; /* deep ember red */ --color-orange: #F76B15; /* warm orange */ --gradient-accent: linear-gradient(135deg, var(--color-ember) 0%, var(--color-orange) 100%); --color-accent-text: #FF8A4C; /* accent used as flat text/underline color (links, hovers) */ --color-on-accent: #FFF7F2; /* text sitting on the gradient */ /* ---------- COLOR / STATES ---------- */ --color-success: #4CC38A; --color-error: #FF6369; /* ---------- COLOR / SELECTION ---------- */ --color-selection-bg: var(--color-orange); --color-selection-text: #000000; /* intentional pure black — max contrast against the orange highlight */ /* ---------- COLOR / BRAND (third-party, kept as-is for recognition) ---------- */ --color-whatsapp: #25D366; --color-whatsapp-dark: #1DA851; /* ---------- ALPHA / OVERLAYS (image scrims, glows, tints) ---------- */ --overlay-img: linear-gradient(180deg, rgba(12, 12, 14, 0.35) 0%, rgba(12, 12, 14, 0.88) 100%); --overlay-img-soft: linear-gradient(180deg, rgba(12, 12, 14, 0.25) 0%, rgba(12, 12, 14, 0.65) 100%); --tint-accent-faint: rgba(247, 107, 21, 0.07); /* faint warm tint for panels */ --tint-accent-border: rgba(247, 107, 21, 0.45); /* accent-tinted border on hover */ --tint-icon-bg: rgba(247, 107, 21, 0.12); /* soft orange disc behind pillar icons */ --tint-icon-bg-hover: rgba(247, 107, 21, 0.20); /* Dark "glass" card surface — a faint top-lit sheen over the charcoal base, plus a brighter hover variant for the subtle lift-and-glow interaction. */ --border-glass: rgba(255, 255, 255, 0.08); --border-glass-hover: rgba(255, 255, 255, 0.16); --surface-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 46%, rgba(255, 255, 255, 0) 100%), var(--color-surface); --surface-glass-hover: radial-gradient(120% 90% at 50% 0%, var(--tint-accent-faint), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0) 100%), var(--color-surface-2); --nav-bg-scrolled: rgba(12, 12, 14, 0.82); /* charcoal + blur nav background */ --scrim-menu: rgba(12, 12, 14, 0.98); /* mobile full-screen menu */ --color-nav-pill: rgba(0, 0, 0, 0.94); /* floating capsule nav fill — solid black glass; blur still reads faintly at the edges */ /* ---------- SHADOWS / GLOWS ---------- */ --glow-cta: 0 0 22px rgba(247, 107, 21, 0.35), 0 2px 10px rgba(229, 72, 77, 0.30); --glow-cta-hover: 0 0 32px rgba(247, 107, 21, 0.50), 0 4px 16px rgba(229, 72, 77, 0.40); --glow-whatsapp: 0 0 22px rgba(37, 211, 102, 0.35), 0 2px 10px rgba(29, 168, 81, 0.30); --glow-whatsapp-hover: 0 0 32px rgba(37, 211, 102, 0.50), 0 4px 16px rgba(29, 168, 81, 0.40); --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 14px 34px rgba(0, 0, 0, 0.50); /* ---------- TYPOGRAPHY ---------- */ --font-display: 'Anton', 'Archivo Black', Impact, sans-serif; /* headings only */ --weight-display: 400; /* Syne ExtraBold — matches the old Anton weight */ --font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --text-xs: 0.75rem; /* 12 — chips, small print */ --text-sm: 0.875rem; /* 14 — captions, nav links */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — leads, card titles */ --text-lg: 1.375rem; /* 22 — panel sub-heads */ /* Sized down from the old Anton scale — Syne's letterforms run wider than Anton's ultra-condensed ones, so the same rem values wrapped to extra lines. */ --text-h3: clamp(1.15rem, 1.2vw + 0.75rem, 1.45rem); --text-h2: clamp(1.6rem, 2vw + 0.9rem, 2.4rem); /* section titles */ --text-h1: clamp(2.1rem, 3.4vw + 1rem, 3.5rem); /* hero */ --text-stat: clamp(2rem, 2.4vw + 0.9rem, 2.8rem); /* review anchor stat */ --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.65; --tracking-display: -0.02em; /* tightened for Syne's wider-than-Anton letterforms */ --tracking-eyebrow: 0.18em; /* uppercase eyebrows / small labels */ /* ---------- SPACING SCALE ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-section: clamp(4rem, 9vw, 7.5rem); /* vertical rhythm between sections */ /* ---------- LAYOUT ---------- */ --container-max: 72.5rem; /* 1160px content width */ --container-pad: clamp(1.25rem, 4vw, 2.5rem); --nav-height: 4.5rem; /* 72px sticky nav */ /* ---------- RADII ---------- */ --radius-sm: 0.375rem; /* 6 — chips, inputs */ --radius-md: 0.75rem; /* 12 — buttons */ --radius-lg: 1rem; /* 16 — cards */ --radius-xl: 1.5rem; /* 24 — feature panels */ --radius-pill: 62.5rem; /* fully rounded */ /* ---------- BORDERS / RULES ---------- */ --hairline: 1px; /* hairline border width */ --rule-accent-h: 2px; /* thin decorative accent rule thickness */ --eyebrow-rule-w: 2.25rem; /* width of the small rule beside eyebrows */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur-med: 320ms; --dur-reveal: 700ms; --dur-marquee: 40s; /* one full marquee cycle */ /* ---------- COMPONENT SIZES ---------- */ --eq-bar-w: 3px; /* equalizer bar width */ --eq-bar-gap: 4px; --eq-height: 1.75rem; /* equalizer accent height */ --brand-logo-h: 2.75rem; /* 44px uniform brand-logo display height */ --nav-icon-btn: 2.75rem; /* mobile icon-only call button, 44px tap target */ --nav-blur: 140px; /* frosted-glass blur strength on the nav pill */ --marquee-item-gap: clamp(2.5rem, 6vw, 5rem); --focus-ring: 2px solid var(--color-orange); --focus-offset: 3px; /* ---------- MASKS (alpha-only gradients, used by the marquee) ---------- */ --mask-marquee: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 100%); }