/* ========================================================================== BAKER'S TOWING & RECOVERY — MASTER DESIGN TOKENS (CAR TOWING ONLY) Target: https://bakerstowingrecovery.com/ Aesthetic: Studio-Lit 3D Billboard Hero + High-Contrast Industrial Clean ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ------------------------------------------------------------------------ 1. BRAND & SURFACE COLOR PALETTE ------------------------------------------------------------------------ */ /* Core Surfaces */ --color-studio-white: #FFFFFF; /* Hero floor, Vehicle Strip, Active Row 01, Trust Bar */ --color-row-inactive: #F5F6F8; /* Default background for Switcher Rows 02, 03, 04 */ --color-surface-subtle: #EEF0F4; /* Secondary section dividers & hover states */ --color-asphalt-dark: #111317; /* Footer, dark badges & primary ink */ --color-asphalt-elevated: #1A1D24; /* Dark cards inside footer/corridor sections */ /* Hero Sky-to-Studio-Floor Atmospheric Gradient */ --color-sky-top: #3F4A5A; /* Top header storm slate (0%) */ --color-sky-upper: #5E697AA6; /* Cloud diffusion layer */ --color-sky-mid: #8E98A6; /* Mid-sky detrás de "EMERGENCY" (38%) */ --color-sky-horizon: #D9DEE5; /* Horizon mist behind "TOWING EXPERTS" (62%) */ --bg-hero-studio: linear-gradient( 180deg, #3E4856 0%, #5A6575 22%, #8F99A7 44%, #D6DCE3 66%, #F5F7F9 78%, #FFFFFF 88%, #FFFFFF 100% ); /* Safety Amber / Tow Gold Accents (Calibrated to TOWIS Reference) */ --color-amber-primary: #F5BE18; /* Main Phone Pill, Row 01-04 Circle Badges, Vehicle Lines */ --color-amber-hover: #E0AB0B; /* Hover/Active state for yellow CTAs */ --color-amber-glow: rgba(245, 190, 24, 0.28); --color-star-gold: #F59E0B; /* 4.9 Google Review Stars */ --color-status-live: #22C55E; /* 24/7 Live Dispatch pulsing dot */ /* Typography Ink Colors */ --text-primary-dark: #111317; /* Headings, Vehicle titles, Row 01-04 titles */ --text-secondary-muted: #646C79; /* 4-Pillar Trust Bar descriptions & body text */ --text-index-number: #111317; /* "01", "02", "03", "04" index labels */ --text-on-sky: #FFFFFF; /* Hero H1 "EMERGENCY TOWING EXPERTS" & Nav links */ --text-on-amber-pill: #FFFFFF; /* White phone number inside Hero yellow pill */ --icon-on-amber-circle: #111317; /* Black ↗ arrow inside Service Switcher yellow circle */ /* Borders & Hairlines */ --border-row-active: #E1E4E8; /* 1px border on active/hovered Switcher Row (Row 01) */ --border-row-inactive: transparent; /* 0px/transparent border on inactive rows (02-04) */ --border-vehicle-accent: #F5BE18; /* Thin horizontal yellow line under each vehicle */ --border-glass-pill: rgba(255, 255, 255, 0.24); --border-subtle-divider: #E5E8EC; /* ------------------------------------------------------------------------ 2. TYPOGRAPHY & FLUID SCALES ------------------------------------------------------------------------ */ --font-display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Hero Billboard H1 ("EMERGENCY / TOWING EXPERTS") */ --text-hero-billboard: clamp(3.75rem, 11.2vw, 9.6rem); --lh-hero-billboard: 0.86; --ls-hero-billboard: -0.015em; --fw-hero-billboard: 800; /* Hero Phone Pill Number ("(423) 693-6276") */ --text-hero-phone: clamp(1.35rem, 2.2vw, 1.85rem); --fw-hero-phone: 800; --ls-hero-phone: 0.02em; /* Section H2 Header ("24/7 CAR TOWING, WINCH RECOVERY...") */ --text-section-h2: clamp(1.85rem, 3.6vw, 2.85rem); --lh-section-h2: 1.06; --ls-section-h2: -0.01em; --fw-section-h2: 800; /* 4-Vehicle Strip Titles ("SEDANS & COUPES", etc.) */ --text-vehicle-title: clamp(1.25rem, 1.6vw, 1.5rem); --lh-vehicle-title: 1.15; --fw-vehicle-title: 800; --text-vehicle-sub: 0.9375rem; /* 15px bold capability subline */ --fw-vehicle-sub: 700; /* Interactive Service Switcher Rows (01 - 04) */ --text-switcher-index: 0.8125rem; /* 13px bold "01", "02" */ --text-switcher-title: 1.0625rem; /* 17px bold service title */ --fw-switcher-title: 700; /* 4-Pillar Trust Bar Titles & Copy */ --text-trust-title: 1.0625rem; /* 17px condensed uppercase bold */ --text-trust-desc: 0.8125rem; /* 13px crisp 2-line muted copy */ --lh-trust-desc: 1.55; /* Top Navigation Links */ --text-nav-link: 0.875rem; /* 14px uppercase condensed */ --ls-nav-link: 0.04em; --fw-nav-link: 700; /* ------------------------------------------------------------------------ 3. 3D HERO Z-INDEX STACKING & OVERLAP GEOMETRY ------------------------------------------------------------------------ */ --z-hero-sky-bg: 0; --z-hero-billboard-text: 1; /* Giant white H1 sits BEHIND truck cab roof */ --z-hero-truck-cutout: 2; /* Cutout truck + car sits IN FRONT of lower H1 */ --z-hero-cta-and-proof: 3; /* Phone pill & 4.9★ Google badge sit on top */ --z-navbar: 50; --z-sticky-mobile-bar: 100; /* Negative vertical pull so the truck cab overlaps the bottom 18% of H1 */ --hero-truck-overlap-margin: clamp(-2.2rem, -5.2vw, -5.5rem); --hero-max-truck-width: 1220px; /* ------------------------------------------------------------------------ 4. COMPONENT-SPECIFIC DIMENSIONS & SHADOWS ------------------------------------------------------------------------ */ /* Layout Containers */ --container-max-width: 1240px; --container-wide-width: 1380px; --container-padding-x: clamp(1.25rem, 4vw, 2.5rem); --section-spacing-y: clamp(4rem, 7vw, 6.5rem); /* Hero Phone Pill (`1-800-505-911` style) */ --pill-height: 54px; --pill-padding: 6px 26px 6px 6px; --pill-icon-circle-size: 42px; /* White circle inside left of yellow pill */ --radius-pill: 9999px; --shadow-hero-pill: 0 10px 25px -5px rgba(17, 19, 23, 0.22); /* Local SEO & 4.9★ Google Review Proof Pill (Above Hero CTA) */ --bg-proof-glass: rgba(17, 19, 23, 0.38); --backdrop-proof-blur: blur(10px); /* Studio Floor Contact Shadows (Under Tow Truck & 4 Vehicle Cutouts) */ --shadow-truck-floor: 0 26px 38px -14px rgba(17, 19, 23, 0.42); --shadow-vehicle-card-floor: 0 14px 20px -10px rgba(17, 19, 23, 0.35); /* 4-Vehicle Strip Dimensions */ --vehicle-grid-gap: clamp(1.5rem, 3vw, 2.75rem); --vehicle-img-height: 125px; --vehicle-line-thickness: 2px; --vehicle-line-margin-y: 1.125rem; /* 01-04 Interactive Service Switcher */ --switcher-grid-gap: clamp(1.5rem, 3vw, 2.5rem); --switcher-row-height: 84px; --switcher-row-gap: 14px; --switcher-row-padding-x: 1.75rem; --switcher-row-radius: 2px; /* Crisp architectural corners per reference */ --switcher-arrow-circle-size: 36px; /* Yellow circle on right of each row */ --switcher-stage-height: 378px; /* Matches total height of 4 stacked rows (4*84 + 3*14) */ --shadow-switcher-active: 0 8px 24px -6px rgba(17, 19, 23, 0.06); /* 4-Pillar Trust Bar */ --trust-grid-gap: clamp(1.5rem, 3vw, 2.5rem); --trust-icon-size: 46px; --trust-col-max-width: 240px; /* Transitions & Micro-Interactions */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1); --transition-image-swap: 280ms cubic-bezier(0.16, 1, 0.3, 1); /* Services hub (services.html) — viewport picker + offer rails */ --text-svc-hero: clamp(2.5rem, 5.4vw, 4.35rem); --lh-svc-hero: 0.88; --text-svc-display: clamp(3.15rem, 6.2vw, 5.5rem); --lh-svc-display: 0.88; --ls-svc-display: -0.02em; --fw-svc-display: 800; --radius-svc-card: 1.85rem; --radius-svc-pick: 1.55rem; --svc-card-width: 236px; --svc-card-height: 324px; --svc-arrow-size: 48px; --svc-arrow-inset: 10px; --svc-rail-gap: 0.9rem; --svc-pick-gap: 0.8rem; --svc-track-size: 2px; --shadow-svc-pick: 0 22px 44px -18px rgba(17, 19, 23, 0.34); --shadow-svc-card: 0 16px 28px -16px rgba(17, 19, 23, 0.38); }