/* ===================================================================== EAZYRIDE — GLOBAL THEME (single source of truth for design tokens) --------------------------------------------------------------------- Implements the official "Eazy Ride — Brand Guidelines & Design System" (v1.0): Premium • Minimal • Modern • EV Mobility. Change a token here and it cascades to every page, stylesheet and inline style on the site. NEVER hardcode a brand hex / font / radius — reference a token instead. ===================================================================== */ :root { /* ---- BRAND COLOURS ---------------------------------------------- */ --primary-color: #2563FF; /* Primary blue — buttons, links, highlights */ --primary-color-dark: #1D4ED8; /* Darker blue for hovers / pressed states */ --primary-light: #EEF4FF; /* Primary Light — tinted chips / fills */ --secondary-color: #4D82FF; /* Lighter blue accent (same family) */ /* RGB channels — use with rgba() for translucent brand tints: box-shadow: 0 14px 40px rgba(var(--primary-rgb), .12); */ --primary-rgb: 37, 99, 255; --secondary-rgb: 77, 130, 255; /* Brand gradient (monochrome blue — badges, pins, accents). Primary BUTTONS use solid --primary-color per the brand spec. */ --primary-gradient: linear-gradient(135deg, #4D82FF 0%, #2563FF 100%); /* ---- NEUTRALS / TEXT -------------------------------------------- */ --white: #FFFFFF; --black: #000000; --color-heading: #18181B; /* headings / hero titles (near-black) */ --color-text: #18181B; /* default body ink */ --color-primary-text: var(--primary-color); /* Primary Text token (blue) */ --color-muted: #545454; /* Secondary Text */ --color-muted-2: #CCCCCC; /* Disabled / optional */ --color-disabled: #CCCCCC; /* Disabled */ /* Legacy navy tokens (kept for dark sections that still reference them) */ --color-navy: #0B1220; --color-navy-2: #13204A; /* ---- STATE / FEEDBACK ------------------------------------------- */ --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #EF4444; /* ---- BRAND (3rd-party) ------------------------------------------ */ --color-whatsapp: #25D366; /* WhatsApp brand green — chat widget pill */ --color-whatsapp-dark: #1EBE5A; /* hover state */ /* ---- SURFACES & LINES ------------------------------------------- */ --page-bg: #F8FAFC; /* Background — site-wide page background */ --surface: #FFFFFF; /* Surface / Card */ --surface-soft: #F4F8FF; /* Surface Hover / secondary surface */ --surface-hover: #F4F8FF; /* explicit hover alias */ --surface-blue: #EEF4FF; /* Primary Light surface (icon chips, etc.) */ --border-color: #E7ECF5; /* Border — default hairline */ --border-color-soft: #EFF3FA; /* fainter divider */ /* ---- EYEBROW BADGE (white pill chip + dot) ---------------------- */ --eyebrow-bg: var(--white); /* white pill background */ --eyebrow-border: var(--border-color); /* #E7ECF5 hairline border */ --eyebrow-dot: var(--primary-color); /* #2563FF leading dot */ --eyebrow-text: var(--color-text); /* dark label ink */ /* ---- TYPOGRAPHY ------------------------------------------------- */ /* Primary font — Headlines, Hero Titles, CTA, Navigation, numbers. SF Pro renders natively on Apple devices; Inter (Google Fonts) is the cross-platform fallback so all visitors match. */ --font-family-base: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --font-family-heading: var(--font-family-base); /* Secondary font — body, descriptions, labels, inputs, helper text. */ --font-family-subtext: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-size-base: 16px; --line-height-base: 1.55; --line-height-heading: 1.1; /* 110% — hero / headings */ --line-height-body: 1.6; /* 160% — Albert Sans body copy */ --font-weight-regular: 400; --font-weight-medium: 500; /* Navigation */ --font-weight-semibold: 600; /* H2 / H3 / Buttons */ --font-weight-bold: 700; /* Hero / H1 */ --font-weight-extra: 800; /* Letter spacing — tighter as headings get longer (premium feel). */ --ls-short: -0.8px; --ls-medium: -1px; --ls-long: -1.2px; /* Responsive type scale — EXACT per-breakpoint sizes from the brand's responsive typography tables. Mobile-first base values here; the min-width overrides further down re-assign them at tablet / laptop / desktop. Headings/body that reference these tokens resize precisely. */ /* Mobile (<768px) */ --fs-hero: 36px; --fs-h1: 32px; --fs-h2: 28px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; /* ---- SPACING (8pt grid: 4·8·12·16·20·24·32·40·48·64·80·96) ------ */ /* Border Radius Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 30px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* semantic aliases (kept for existing code) */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ---- LAYOUT ----------------------------------------------------- */ --section-padding-y: 80px; /* canonical vertical rhythm for every
(top & bottom) */ --section-pb: 120px; /* SITE-WIDE section bottom padding: hero + every section below it (each non-hero section has top:0, so this is the gap between sections) */ --hero-pt: 80px; /* SITE-WIDE hero (first section) TOP padding — same on every page */ --container-max: 1360px; /* content width (drives .wrap + .tsb-container) */ --container-max-wide: 1440px; /* brand max content width */ --container-pad: 30px; /* container side padding (responsive below) */ --container-pad-30: 30px; /* ---- RADIUS — 4 canonical BOX buckets (single source of truth) -- Every box on the site rounds to exactly ONE of these four values. Do not introduce new radius numbers — reference a token below. Large boxes ........ 26px (hero panels, big cards, media, modals) Small boxes ........ 16px (standard cards, inputs, tiles) Medium-small boxes . 12px (compact cards, chips, small tiles) Icon boxes ......... 10px (icon chips / badges behind an icon) Buttons (14px) and pills (50px) are distinct components, not boxes. */ --corner-smoothing: superellipse(1.8); --radius-box-lg: 26px; /* Large boxes */ --radius-box-sm: 16px; /* Small boxes */ --radius-box-ms: 12px; /* Medium-small boxes */ --radius-box-icon: 10px; /* Icon boxes */ /* Legacy radius names — repointed onto the 4 buckets so existing code (var(--radius-badge/-sm/-md/-lg/…)) snaps to the scale automatically. 20px→16 (small) and 24px→26 (large) per the design decision. */ --radius-badge: var(--radius-box-icon); /* 10 — icon chip */ --radius-sm: var(--radius-box-ms); /* 12 — medium-small */ --radius-input: var(--radius-box-sm); /* 16 — small (inputs) */ --radius-nav: var(--radius-box-sm); /* 16 — was 18 → small */ --radius-md: var(--radius-box-sm); /* 16 — was 20 → small */ --radius-lg: var(--radius-box-lg); /* 26 — large */ --radius-xl: var(--radius-box-lg); /* 26 — large */ --radius-modal: var(--radius-box-lg); /* 26 — large (modal) */ --radius-btn: 14px; /* primary button (component, not a box) */ --radius-pill: 50px; /* pills / fully-rounded chips */ /* ---- ELEVATION / SHADOWS ---------------------------------------- */ --shadow-1: 0 4px 16px rgba(0,0,0,.04); /* Level 1 */ --shadow-2: 0 8px 30px rgba(0,0,0,.06); /* Level 2 */ --shadow-3: 0 14px 40px rgba(37,99,255,.12); /* Level 3 (hover) */ --shadow: var(--shadow-1); /* default alias */ --shadow-sm: var(--shadow-1); /* ---- MOTION (180–220ms · smooth · minimal · natural) ------------ */ --motion-duration: 200ms; --motion-fast: 180ms; --motion-ease: cubic-bezier(.4, 0, .2, 1); --transition-base: 180ms ease; --motion-hover-scale: 1.02; /* hover scale */ --motion-press-scale: 0.98; /* click / active scale */ --motion-hover-lift: -2px; /* hover translateY */ --motion-image-zoom: 1.06; /* media zoom on card hover */ --motion-expand: 460ms; /* expanding-panel width/reveal duration */ --motion-ease-smooth: cubic-bezier(.22, 1, .36, 1); /* gentle ease-out */ /* ---- BUTTONS (shared across the whole site) --------------------- */ --btn-font-family: var(--font-family-base); /* SF Pro */ --btn-font-size: 16px; --btn-font-weight: var(--font-weight-semibold); /* 600 */ --btn-height: 56px; --btn-padding-y: 8px; --btn-padding-x: 28px; --btn-radius: var(--radius-btn); /* 14px */ --btn-border-width: 1px; --btn-transition: var(--transition-base); /* 180ms ease */ /* primary button — SOLID brand blue per spec */ --btn-primary-bg: var(--primary-color); --btn-primary-bg-hover: var(--primary-color-dark); --btn-primary-color: var(--white); --btn-primary-shadow: 0 10px 26px -10px rgba(var(--primary-rgb), .6); --btn-primary-shadow-hover: 0 14px 32px -10px rgba(var(--primary-rgb), .75); /* secondary / ghost button — white, blue text, soft border */ --btn-ghost-bg: var(--white); --btn-ghost-bg-hover: var(--surface-hover); --btn-ghost-color: var(--primary-color); --btn-ghost-border: var(--border-color); /* ---- INPUTS ----------------------------------------------------- */ --input-height: 56px; --input-radius: var(--radius-input); /* 16px */ --input-bg: var(--white); --input-border: var(--border-color); --input-placeholder: var(--color-muted); /* #999999 */ --input-focus-border: var(--primary-color); --input-focus-glow: 0 0 0 4px rgba(var(--primary-rgb), .12); /* ---- CARDS ------------------------------------------------------ */ --card-bg: var(--surface); /* white */ --card-radius: var(--radius-lg); /* 26px — large box */ --card-padding: 24px; --card-border: var(--border-color); /* 1px #E7ECF5 */ --card-shadow: var(--shadow-1); --card-hover-bg: var(--surface-hover); /* #F4F8FF */ --card-hover-shadow: var(--shadow-3); /* soft blue lift */ --card-hover-lift: -4px; /* lift 4px on hover */ /* ---- HERO ------------------------------------------------------- */ --hero-heading-max: 700px; /* max width of hero headline */ --hero-desc-max: 620px; /* max width of hero description */ --hero-line-height: 1.1; /* 110% */ --hero-cta-gap: 16px; /* gap between primary & secondary CTA */ /* ---- ICONS ------------------------------------------------------ */ --icon-sm: 20px; --icon-md: 24px; --icon-lg: 32px; --icon-stroke: 2px; /* consistent 2px line weight */ /* Icon badge — solid rounded-square chip behind a card icon */ --icon-badge-size: 48px; --icon-badge-radius: var(--radius-sm); /* 12px */ --icon-badge-bg: var(--primary-color); /* solid brand accent fill */ --icon-badge-fg: var(--white); /* centered icon colour */ /* ---- CORNER SMOOTHING (Apple-style squircle) -------------------- */ /* Progressive enhancement only — see the .corner-smooth rule below. Plain border-radius can't do true squircles, so this is applied where the browser supports the `corner-shape` property. */ --corner-smoothing: superellipse(1.8); /* ---- SOLUTION DETAIL PAGES (shared sub-theme) ------------------- */ /* Canonical palette for the 6 solution pages (bike, campus, golf-cart, hotel-resort, moped, scooter). Each page's stylesheet maps its short, page-local token names (--blue/--ink/--bs/--sh1… or --br-*) onto these, so every value lives here. Change one to restyle all 6 pages. */ --sol-navy: var(--color-navy); --sol-navy-2: var(--color-navy-2); --sol-blue: var(--primary-color); --sol-cyan: var(--secondary-color); --sol-gradient: var(--primary-gradient); --sol-ink: #0F172A; --sol-muted: #6B7691; --sol-line: var(--border-color); --sol-surface: var(--surface-soft); --sol-surface-blue: var(--surface-blue); --sol-shadow-1: var(--shadow-1); --sol-shadow-2: var(--shadow-2); --sol-shadow-3: var(--shadow-3); /* ================================================================= LEGACY ALIASES ----------------------------------------------------------------- Older stylesheets (eazyride.css, header.css, page CSS) reference these short names. They now point at the semantic tokens above, so a single change up top still cascades everywhere. Prefer the semantic names in any new code. ================================================================= */ --navy: var(--color-navy); --navy-2: var(--color-navy-2); --ink: var(--color-text); --text-color: var(--color-text); /* alias — several page CSS use --text-color for body ink */ --background-color: var(--page-bg); /* alias — page CSS use --background-color for the page bg */ --muted: var(--color-muted); --muted-2: var(--color-muted-2); --blue: var(--primary-color); --blue-deep: var(--primary-color-dark); --cyan: var(--secondary-color); --grad: var(--primary-gradient); --bg: var(--surface); --bg-soft: var(--surface-soft); --bg-blue: var(--surface-blue); --line: var(--border-color); --line-soft: var(--border-color-soft); --green: var(--color-success); --amber: var(--color-warning); --red: var(--color-danger); --f: var(--font-family-base); --hf: var(--font-family-base); --wrap: var(--container-max); --r: var(--radius-lg); } html, body { background-color: var(--page-bg); } /* ===================================================================== RESPONSIVE SIDE PADDING (brand spec) --------------------------------------------------------------------- Mobile 16–20 · Tablet 32 · Laptop 64 · Desktop 80–96. Re-assigns the --container-pad token per breakpoint so any layout that references it (margin/padding: var(--container-pad)) follows automatically. Existing .wrap keeps its own padding tied to the 1160px max-width. ===================================================================== */ :root { --container-pad: 20px; } /* mobile */ @media (min-width: 768px) { :root { --container-pad: 32px; } } /* tablet */ @media (min-width: 1024px) { :root { --container-pad: 64px; } } /* laptop */ @media (min-width: 1440px) { :root { --container-pad: 30px; } } /* desktop */ /* CANONICAL MOBILE GUTTER — .wrap side padding = 15px on phones (≤767px). Per-page CSS files each redefine .wrap padding (mostly 0 var(--space-8) = 30px) and some are body-class-prefixed (.features-page .wrap, .compare .wrap, …) at specificity 0,2,0, loaded AFTER this file. !important on just the horizontal padding is the single-source way to enforce one consistent 15px gutter site-wide without editing ~20 page files. Desktop/tablet keep their existing padding — this only tightens phones. */ @media (max-width: 767px) { .wrap { padding-left: 15px !important; padding-right: 15px !important; } } /* ===================================================================== RESPONSIVE TYPOGRAPHY (brand spec — exact per-breakpoint sizes) --------------------------------------------------------------------- Re-assigns the --fs-* tokens at each breakpoint to the values in the brand's responsive type tables. Any heading/body that uses these tokens (the global h1–h6 / p rules, the .er-* components, and any page rule that references them) resizes precisely per device. Element Mobile Tablet Laptop Desktop Hero 36 44 56 64 H1 32 36 42 48 H2 28 30 36 40 H3 24 26 30 32 H4 20 22 22 24 Body Large 18 18 18 20 ===================================================================== */ @media (min-width: 768px) { /* Tablet 768–1023 */ :root { --fs-hero: 44px; --fs-h1: 36px; --fs-h2: 30px; --fs-h4: 22px; /* h3 pinned 24px */ --fs-body-lg: 18px; } } @media (min-width: 1024px) { /* Laptop 1024–1439 */ :root { --fs-hero: 56px; --fs-h1: 42px; --fs-h2: 36px; --fs-h4: 22px; /* h3 pinned 24px */ --fs-body-lg: 18px; } } @media (min-width: 1440px) { /* Desktop 1440+ */ :root { --fs-hero: 64px; --fs-h2: 46px; --fs-h4: 24px; /* h3 pinned 24px */ --fs-body-lg: 20px; } } /* ===================================================================== RESPONSIVE SECTION SPACING (brand spec) --------------------------------------------------------------------- The whole site's vertical rhythm rides on two tokens — --hero-pt (the hero/first-section top padding) and --section-pb (every section's bottom padding) — consumed by the .site-main section rules in eazyride.css. Their DESKTOP values (80 / 120) live in the base :root above and MUST stay untouched. These overrides only tighten tablet and mobile, and use max-width (not min-width) precisely so desktop (≥1025px) is never re-declared or affected. Breakpoint --hero-pt --section-pb Desktop ≥1025 80 120 (base :root — unchanged) Tablet 768–1024 60 100 Mobile ≤767 40 80 ===================================================================== */ @media (max-width: 1024px) { /* Tablet 768–1024 */ :root { --hero-pt: 60px; --section-pb: 100px; } } @media (max-width: 767px) { /* Mobile ≤767 */ :root { --hero-pt: 40px; --section-pb: 80px; } } /* ===================================================================== CORNER SMOOTHING (Apple-style squircle) — progressive enhancement --------------------------------------------------------------------- True squircle corners need the CSS `corner-shape` property (Chrome 139+). This is a no-op in browsers that don't support it (they keep the normal border-radius), so it's safe to apply broadly. Add `.corner-smooth` to any element, or it auto-applies to the shared button / input / card primitives below. ===================================================================== */ @supports (corner-shape: superellipse(1.8)) { .corner-smooth, .btn, .btn-p, .btn-g, .btn-primary, .btn-ghost, input, textarea, select, .card, .er-card, .bcard, .sol, .case, .tier { corner-shape: var(--corner-smoothing); } } /* The opt-in component library (.er-* classes — buttons, cards, sections, eyebrow, inputs, grid…) lives in assets/css/components.css. It is built entirely from the tokens above. Use those classes on new markup to stay on-brand without restyling existing pages. */ /* ===================================================================== SOLUTION DETAIL PAGES — single shared binding ===================================================================== */ body.eazyride-solution { --navy: var(--sol-navy); --n2: var(--sol-navy-2); --blue: var(--sol-blue); --cyan: var(--sol-cyan); --grad: var(--sol-gradient); --ink: var(--sol-ink); --mu: var(--sol-muted); --ln: var(--sol-line); --bs: var(--sol-surface); --bb: var(--sol-surface-blue); --sh1: var(--sol-shadow-1); --sh2: var(--sol-shadow-2); --sh3: var(--sol-shadow-3); --br-navy: var(--sol-navy); --br-n2: var(--sol-navy-2); --br-blue: var(--sol-blue); --br-cyan: var(--sol-cyan); --br-grad: var(--sol-gradient); --br-ink: var(--sol-ink); --br-mu: var(--sol-muted); --br-ln: var(--sol-line); --br-bs: var(--sol-surface); --br-bb: var(--sol-surface-blue); --br-sh1: var(--sol-shadow-1); --br-sh2: var(--sol-shadow-2); } /* ===================================================================== BODY COPY — Albert Sans for paragraphs & subtext (site-wide) --------------------------------------------------------------------- Applies the --font-family-subtext token (Albert Sans, loaded in header.php) to paragraphs and the various subtext / description / caption classes used across the site. Headings, nav and buttons stay on --font-family-base (SF Pro → Inter fallback). ===================================================================== */ p, .lead, .subtitle, .sublabel, .sub, .caption, .vehicle-description, [class*="desc"] { font-family: var(--font-family-subtext); line-height: var(--line-height-body); } /* Default paragraph rhythm/colour (page rules with higher specificity win). */ p { font-size: var(--fs-body); color: var(--color-text); }