/* ========================================================================= The Product Bus — Colors & Type Tokens ------------------------------------------------------------------------- Brand: warm, confident, founder-friendly. Yellow school-bus motif paired with crisp black wordmark, generous white space, and hand-drawn accents. ========================================================================= */ /* --- Webfonts ----------------------------------------------------------- The site uses a bold, geometric-but-friendly sans (a close Montserrat cousin). We use Montserrat as the primary — it matches the THE PRODUCT BUS. wordmark almost exactly. Nunito is used for warmer body copy in places on the site; we keep Montserrat for everything by default with Nunito available as an alt. (Both are on Google Fonts — see README.md "Fonts" section for substitution notes.) ----------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;700&display=swap'); :root { /* ============================================================ COLOR — Brand ============================================================ */ /* Primary yellow — the school-bus yellow and the "." in the logo. Sampled from PB-Logo-Banner-Large.png. */ --pb-yellow: #FCD535; /* core brand yellow */ --pb-yellow-600: #E8BE1F; /* hover / pressed */ --pb-yellow-300: #FFE680; /* tinted bg */ --pb-yellow-100: #FFF6CC; /* soft bg / highlight wash */ /* Ink — the wordmark & body text. Not pure black; very slightly warm. */ --pb-ink: #0B0B0B; /* wordmark black */ --pb-ink-2: #1F1F1F; /* body text */ --pb-ink-3: #4A4A4A; /* secondary text */ --pb-ink-4: #7A7A7A; /* tertiary / caption */ /* Paper — backgrounds. Slightly off-white for warmth. */ --pb-paper: #FFFFFF; --pb-paper-2: #FAF7F0; /* warm off-white page bg */ --pb-paper-3: #F2ECDD; /* card bg / dividers */ /* Line — borders, hairlines. */ --pb-line: #E8E0CC; --pb-line-strong: #0B0B0B; /* Semantic accents (used sparingly — the brand leans black + yellow). Pulled to harmonize warmly with the yellow. */ --pb-go: #2EA06B; /* GO / positive */ --pb-pivot: #E87722; /* PIVOT / caution */ --pb-stop: #D63B3B; /* STOP / negative */ --pb-info: #2D6AE0; /* info / link */ /* ============================================================ COLOR — Semantic (for apps / UIs) ============================================================ */ --fg-1: var(--pb-ink); --fg-2: var(--pb-ink-2); --fg-3: var(--pb-ink-3); --fg-4: var(--pb-ink-4); --fg-on-yellow: var(--pb-ink); /* text on yellow stays black */ --fg-on-ink: var(--pb-paper); --bg-1: var(--pb-paper); --bg-2: var(--pb-paper-2); --bg-3: var(--pb-paper-3); --bg-inverse: var(--pb-ink); --bg-accent: var(--pb-yellow); --bg-accent-soft: var(--pb-yellow-100); --border-1: var(--pb-line); --border-strong: var(--pb-line-strong); --link: var(--pb-ink); --link-hover: var(--pb-yellow-600); /* ============================================================ TYPE — Families ============================================================ */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Nunito', 'Montserrat', system-ui, sans-serif; --font-ui: 'Montserrat', system-ui, sans-serif; --font-hand: 'Caveat', 'Segoe Script', cursive; /* for hand-drawn accents */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ============================================================ TYPE — Scale Display is HEAVY and tightly tracked. All caps display uses slightly wider tracking. Body stays regular/semibold. ============================================================ */ --fs-display-xl: clamp(3.25rem, 6vw + 1rem, 5.5rem); /* 52–88 */ --fs-display-l: clamp(2.5rem, 4.5vw + 1rem, 4rem); /* 40–64 */ --fs-h1: clamp(2rem, 3vw + 1rem, 3rem); /* 32–48 */ --fs-h2: clamp(1.5rem, 1.8vw + 1rem, 2.25rem);/* 24–36 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.25rem; /* 20 */ --fs-body-l: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-body-s: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 caps */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* for eyebrows / all caps */ /* ============================================================ SHAPE — Radii, shadow, spacing ============================================================ */ --radius-xs: 4px; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-xl: 32px; --radius-pill: 999px; /* The brand is LOW on shadows — most surfaces rely on line + color. These are for menus / modals. */ --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06); --shadow-2: 0 6px 20px -6px rgba(11, 11, 11, 0.12); --shadow-3: 0 18px 40px -12px rgba(11, 11, 11, 0.18); --shadow-press: inset 0 2px 0 rgba(11, 11, 11, 0.12); /* Signature "chunky border" used on buttons & cards */ --border-chunk: 2px solid var(--pb-ink); /* Spacing — 4px base */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* =========================================================================== SEMANTIC ELEMENT STYLES Opt in by wrapping content in .pb or by applying directly to elements. =========================================================================== */ .pb, .pb * { box-sizing: border-box; } .pb { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); background: var(--bg-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .pb h1, .pb .h1, .pb h2, .pb .h2, .pb h3, .pb .h3, .pb h4, .pb .h4 { font-family: var(--font-display); color: var(--fg-1); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0 0 var(--sp-4); } .pb h1, .pb .h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); } .pb h2, .pb .h2 { font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-snug); } .pb h3, .pb .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); } .pb h4, .pb .h4 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); } .pb .display-xl { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-xl); line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase; color: var(--fg-1); } .pb .display-l { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .pb p { margin: 0 0 var(--sp-4); } .pb .lead { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); color: var(--fg-2); } .pb .caption { font-size: var(--fs-caption); color: var(--fg-4); } .pb .eyebrow { font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); } .pb code, .pb .code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-3); padding: 0.12em 0.4em; border-radius: var(--radius-xs); } /* Hand-drawn accent — the wavy yellow underline used on the site hero */ .pb .hand { font-family: var(--font-hand); font-weight: 700; color: var(--fg-1); } /* The signature Accent-Underline: place inside a span to underline a word with a hand-drawn yellow squiggle. */ .pb .accent-under { position: relative; display: inline-block; } .pb .accent-under::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -6px; height: 10px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }