/* =============================================================
SmartCab Scooters — Design Tokens
Cloned foundation from bulletproofautomotive.com
Colors · Fonts · Typography
============================================================= */
/* ---------- FONTS ---------------------------------------------
Display/Headings: bebas-neue-pro (Adobe Fonts / Typekit)
Body/UI: Roboto (Google Fonts)
Accent: Oswald (Google Fonts)
FONT ROUTE — pick ONE for the display face:
(A) FREE — Bebas Neue (Google). Active by default below.
(B) EXACT — Adobe Typekit "bebas-neue-pro". Requires an Adobe
Fonts web project. To switch: add the kit in ,
then set --font-display to the Typekit line (commented).
------------------------------------------------------------- */
/* Google Fonts — Bebas Neue (free display), Roboto, Oswald */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;700&family=Roboto:wght@300;400;700&display=swap');
/* --- Adobe Typekit (EXACT clone) — uncomment and add your kit id in :
--- */
:root {
/* ---------- COLOR PALETTE ---------- */
/* Core */
--color-black: #000000; /* primary — bg, header, nav */
--color-white: #ffffff; /* base — page bg, text on dark */
/* Brand red (signature accent — CTAs, "SHOP NOW") */
--color-red: #df0001;
--color-red-bright: #ff090a; /* hover / bright variant */
/* Dark grays — cards, panels */
--color-dark-1: #0a0a0a;
--color-dark-2: #111317;
--color-dark-3: #272b31;
--color-dark-4: #292929;
/* Mid grays — secondary text */
--color-gray-1: #444444;
--color-gray-2: #5f5d5d;
--color-gray-3: #7d7d7d;
/* Light grays — muted text, borders */
--color-gray-4: #9ca3af;
--color-gray-5: #d3d3d3;
/* Off-whites — section backgrounds */
--color-offwhite-1: #f9f9f9;
--color-offwhite-2: #f5f5f5;
--color-offwhite-3: #f3f3f3;
/* Semantic roles */
--bg-page: var(--color-white);
--bg-header: var(--color-black);
--bg-section-alt: var(--color-offwhite-2);
--bg-card-dark: var(--color-dark-2);
--text-body: var(--color-black);
--text-muted: var(--color-gray-2);
--text-on-dark: var(--color-white);
--accent: var(--color-red);
--accent-hover: var(--color-red-bright);
--border-muted: var(--color-gray-5);
/* ---------- FONT FAMILIES ---------- */
/* Route A (FREE, active): Google 'Bebas Neue' — single weight (400) only.
Display weight MUST stay 400 or the browser faux-bolds it (heavier/wider).
To go pixel-exact later with licensed Bebas Neue Pro, change TWO lines:
--font-display: 'bebas-neue-pro', sans-serif;
--display-weight: 700;
(and load the Adobe kit / self-hosted @font-face) */
--font-display: 'Bebas Neue', 'bebas-neue-pro', sans-serif;
--font-body: 'Roboto', sans-serif;
--font-accent: 'Oswald', sans-serif;
--display-weight: 400; /* real weight of free Bebas Neue — do not faux-bold */
/* ---------- TYPOGRAPHY SCALE ----------
Headings: display face, UPPERCASE, weight 700 */
/* Hero H1 */
--h1-size: 60px; --h1-lh: 60px; --h1-ls: normal;
/* Section H2 */
--h2-size: 48px; --h2-lh: 48px; --h2-ls: normal;
/* Card H3 */
--h3-size: 30px; --h3-lh: 32px; --h3-ls: normal;
/* Sub-section H4 */
--h4-size: 24px; --h4-lh: 32px; --h4-ls: 0.6px;
/* Nav / category label */
--nav-size: 22px; --nav-lh: 25px; --nav-ls: 0.45px;
/* Eyebrow / kicker */
--eyebrow-size: 20px; --eyebrow-lh: 28px; --eyebrow-ls: 2px;
/* Small heading */
--hsm-size: 16px; --hsm-lh: 24px; --hsm-ls: normal;
/* Body (Roboto) */
--body-size: 16px; --body-lh: 24px; --body-weight: 400;
--small-size: 12px; --small-lh: 16px;
--btn-size: 14px; --btn-lh: 20px; --btn-weight: 700;
--weight-light: 300;
--weight-regular: 400;
--weight-bold: 700;
}
/* =============================================================
BASE TYPOGRAPHY
============================================================= */
body {
font-family: var(--font-body);
font-size: var(--body-size);
line-height: var(--body-lh);
font-weight: var(--body-weight);
color: var(--text-body);
background: var(--bg-page);
}
/* Display headings — shared traits */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display {
font-family: var(--font-display);
font-weight: var(--display-weight);
text-transform: uppercase;
margin: 0;
}
h1, .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
h2, .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
h3, .h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
h4, .h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); }
.nav-label {
font-family: var(--font-display);
font-weight: var(--display-weight);
font-size: var(--nav-size);
line-height: var(--nav-lh);
letter-spacing: var(--nav-ls);
text-transform: uppercase;
}
.eyebrow {
font-family: var(--font-display);
font-weight: var(--display-weight);
font-size: var(--eyebrow-size);
line-height: var(--eyebrow-lh);
letter-spacing: var(--eyebrow-ls);
text-transform: uppercase;
}
.heading-sm {
font-family: var(--font-display);
font-weight: var(--weight-regular);
font-size: var(--hsm-size);
line-height: var(--hsm-lh);
text-transform: uppercase;
}
p { margin: 0 0 1em; }
small, .text-small {
font-size: var(--small-size);
line-height: var(--small-lh);
}
a { color: inherit; text-decoration: none; }
/* =============================================================
BUTTONS (Roboto, UPPERCASE, weight 700)
============================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: var(--btn-size);
line-height: var(--btn-lh);
font-weight: var(--btn-weight);
text-transform: uppercase;
color: var(--text-on-dark);
background: var(--accent);
border: none;
padding: 12px 28px;
cursor: pointer;
transition: background .2s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn--dark { background: var(--color-black); }
.btn--dark:hover { background: var(--color-dark-3); }
.btn--outline {
background: transparent;
border: 1px solid var(--color-white);
color: var(--color-white);
}
.btn--outline:hover { background: var(--color-white); color: var(--color-black); }
/* Integrity fix: ustone sets body{letter-spacing:var(--theme-body-letter-spacing)} = -0.32px; the reference body letter-spacing is normal */
:root{--theme-body-letter-spacing:normal;}
body{letter-spacing:normal;}