/* ============================================================ Hopscotch Play — Fonts Poppins → primary UI/body/heading face (Google Fonts). BN Chubb → rounded display face used in the "play" logo lockup and the oversized decorative quote mark. Shipped as a project webfont (assets/fonts). ============================================================ */ /* Poppins 400/500/700 load via a in each page's (with preconnect), not an @import here — an @import inside CSS is render-blocking and slower. NOTE (privacy/HIPAA): Google Fonts sends the visitor IP to Google. Consider self-hosting all Poppins weights as woff2 to remove the third-party request. */ /* Locally-shipped Poppins SemiBold (weight 600). woff2 preferred, ttf fallback. */ @font-face { font-family: "Poppins"; src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2"), url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../assets/fonts/Poppins-SemiBoldItalic.woff2") format("woff2"), url("../assets/fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "BN Chubb"; src: url("../assets/fonts/BN-Chubb.woff2") format("woff2"), url("../assets/fonts/BN-Chubb.otf") format("opentype"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Rounded display — logo "play", oversized quote marks */ --font-display: "BN Chubb", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ============================================================ Hopscotch Play — Color tokens Exact values transcribed from the website Figma. ============================================================ */ :root { /* ---- Brand core ---- */ --hp-blue: #3968ff; /* primary — rgb(57,104,255) */ --hp-blue-ink: #1c346b; /* navy, on-yellow button text */ --hp-blue-link: #1748e9; /* deep link blue */ --hp-coral: #f66646; /* primary CTA — rgb(246,102,70) */ --hp-coral-alt: #ff6f61; /* secondary coral */ --hp-yellow: #ffef00; /* accent / highlight */ --hp-yellow-bright: #fad604; /* logo spark */ --hp-lime: #eefb8d; /* soft chartreuse accent */ --hp-yellow-pale: #fffaab; /* pale card wash */ --hp-cyan: #bcf5ff; /* sky accent */ --hp-pink: #ffa4fa; /* pink accent */ --hp-green: #70dda9; /* mint accent */ --hp-teal: #1f707b; /* deep teal */ --hp-teal-ink: #06515a; /* teal text on lime */ /* ---- Ink & text ---- */ --hp-ink: #3f3f42; /* headings / darkest text — rgb(63,63,66) */ --hp-body: #494949; /* body copy — rgb(73,73,73) */ --hp-muted: #6b6b70; /* captions / muted */ --hp-sand-ink: #b9a99a; /* warm muted */ /* ---- Surfaces ---- */ --hp-white: #ffffff; --hp-black: #000000; --hp-sand: #fbf3e9; /* cream section background */ --hp-cream: #fff7ee; /* lighter cream section wash (.s-cream) */ --hp-nav-pink: #ffe5ff; /* sticky nav / mobile drawer surface */ --hp-surface-card: #ffffff; /* ---- Lines ---- */ --hp-hairline: rgba(63, 63, 66, 0.1); /* card/border hairline */ --hp-hairline-onblue: rgba(255, 255, 255, 0.18); --hp-hairline-footer: rgba(255, 255, 255, 0.08); /* ---- On-blue text opacities ---- */ --hp-on-blue: #ffffff; --hp-on-blue-80: rgba(255, 255, 255, 0.8); --hp-on-blue-70: rgba(255, 255, 255, 0.7); --hp-on-blue-60: rgba(255, 255, 255, 0.6); --hp-on-blue-85: rgba(255, 255, 255, 0.85); /* ---- Semantic aliases ---- */ --color-bg: var(--hp-white); --color-bg-alt: var(--hp-sand); --color-bg-invert: var(--hp-blue); --color-surface: var(--hp-surface-card); --color-text: var(--hp-body); --color-heading: var(--hp-ink); --color-primary: var(--hp-blue); --color-cta: var(--hp-coral); --color-accent: var(--hp-yellow); --color-link: var(--hp-blue); --color-border: var(--hp-hairline); --color-footer-bg: var(--hp-ink); } /* ============================================================ Hopscotch Play — Typography scale Exact sizes / line-heights / tracking from the website Figma. All faces are Poppins unless noted (--font-display = rounded). ============================================================ */ :root { /* Font sizes */ /* Headings are FLUID: clamp(phone size, slope, Figma desktop size). The desktop value is reached at ~1300px, the floor at ~400px, so a 1440px screen renders exactly the Figma sizes and a phone gets a heading that fits its width without per-breakpoint overrides. */ --fs-display: clamp(30px, 2.6vw + 18px, 52px); /* page H1 (.display) */ --fs-hero: clamp(30px, 2.4vw + 17px, 48px); /* homepage H1, section H2 (semibold variant), guide H1 */ --fs-h2: clamp(30px, 2.2vw + 16px, 44px); /* section headings (bold, tight) */ --fs-h2-lg: clamp(30px, 2.4vw + 17px, 48px); /* large section headings */ --fs-cta-title: clamp(30px, 1.5vw + 26px, 40px); /* final CTA heading */ --fs-stat: clamp(28px, 3vw + 17px, 56px); /* display-face statistics ("THOUSANDS") */ --fs-page-title: clamp(28px, 1.2vw + 22px, 34px);/* legal / contact page titles */ --fs-doc-h2: clamp(22px, 0.8vw + 18px, 26px); /* legal document section headings */ --fs-price: 44px; /* pricing numerals */ --fs-quote: 26px; /* blockquote */ --fs-h3: 20px; /* card titles */ --fs-logo-word: 20px; /* "hopscotch" wordmark */ --fs-logo-play: 22px; /* "play" display lockup */ --fs-lead: 18px; /* lead / large body */ --fs-faq-q: 17px; /* FAQ question / CTA subhead */ --fs-trust: 24px; /* hero trust chips */ --fs-body: 14px; /* default body */ --fs-nav: 14px; /* nav links (medium) */ --fs-sm: 13px; /* small body / links */ --fs-caption: 12px; /* captions, eyebrow, tier label */ --fs-badge: 12.5px; /* GIF-card captions */ --fs-micro: 12px; /* pill labels, tags, table heads — the smallest text on the site (was 10–11.5px in 30 rules) */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heading: 600; /* headings use Poppins SemiBold */ /* Line heights (px, matching Figma) */ --lh-hero: 1.25; /* unitless: the fluid sizes above need a ratio, not px (60/48) */ --lh-h2: 1.1; /* 48.4/44 */ --lh-cta-title: 1.15; /* 46/40 */ --lh-price: 44px; --lh-quote: 36.4px; --lh-h3: 32px; --lh-lead: 28.8px; --lh-faq-q: 27.2px; --lh-body: 22.4px; --lh-body-relaxed: 23.8px; --lh-sm: 20.8px; --lh-caption: 19.2px; /* Letter spacing */ --ls-hero: 1px; --ls-tight: -1px; /* section H2 + prices */ --ls-eyebrow: 2px; /* uppercase eyebrows */ --ls-label: 1px; /* tier labels */ --ls-word: -0.4px; /* "hopscotch" wordmark */ --ls-quote: -0.3px; --ls-button: 0.2px; } /* ---- Convenience type classes (optional) ---- */ .hp-hero { font-family: var(--font-sans); font-weight: var(--fw-heading); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--hp-ink); } .hp-h2 { font-family: var(--font-sans); font-weight: var(--fw-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--hp-ink); } .hp-h2--soft { font-weight: var(--fw-semibold); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); } .hp-h3 { font-family: var(--font-sans); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--hp-ink); } .hp-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } .hp-lead { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--hp-body); } .hp-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--hp-body); } .hp-quote { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-quote); line-height: var(--lh-quote); letter-spacing: var(--ls-quote); } /* ============================================================ Hopscotch Play — Spacing & layout Section rhythm, container widths and gaps observed in the website Figma (1501px-wide artboard, 1180px content max). ============================================================ */ :root { /* Spacing scale (px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 14px; --sp-5: 18px; --sp-6: 20px; --sp-7: 22px; --sp-8: 28px; --sp-9: 32px; --sp-10: 36px; --sp-11: 48px; --sp-12: 56px; --sp-14: 65px; --sp-16: 80px; --sp-18: 96px; /* standard section vertical padding */ --sp-20: 110px; /* generous section padding */ /* Layout */ --container-max: 1180px; /* inner content width */ --page-max: 1501px; /* full artboard */ --section-pad-y: 96px; /* top/bottom of most sections */ --section-gap: 48px; /* heading block → content */ --card-gap: 18px; /* between persona cards */ --card-gap-lg: 22px; /* between feature cards */ } /* ============================================================ Hopscotch Play — Effects Radii, shadows and hairlines transcribed from the Figma. The system mixes friendly-round radii (30–36 pills, 22–24 cards) with a soft, low, blue-tinted elevation. ============================================================ */ :root { /* Corner radii */ --r-xs: 3px; --r-sm: 8px; /* nav "Start free trial" button */ --r-md: 17px; /* hero coral button */ --r-card-sm: 18px;/* trust strip card */ --r-card: 22px; /* pricing / persona cards */ --r-card-lg: 24px;/* feature cards, hero art panel */ --r-block: 32px; /* anchor-story panel */ --r-cta: 36px; /* final-CTA panel + log-in pill */ --r-pill: 30px; /* pill buttons + GIF badges */ --r-full: 999px; /* circular */ /* Elevation */ --shadow-card: inset 0 0 0 1px rgba(63, 63, 66, 0.1), 0px 2px 6px 0px rgba(28, 52, 107, 0.06); /* white cards */ --shadow-blue-glow: 0px 12px 40px 0px rgba(57, 104, 255, 0.25); /* featured pricing */ --shadow-coral: 0px 4px 12px 0px rgba(246, 102, 70, 0.28); /* coral CTA */ --shadow-coral-lg: 0px 8px 30px 0px rgba(246, 102, 70, 0.45); /* play button */ --shadow-pill: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); /* small floating pill */ /* Ring / inset borders (used as box-shadow) */ --ring-hairline: inset 0 0 0 1px rgba(63, 63, 66, 0.1); --ring-blue: inset 0 0 0 1px #3968ff; /* outline buttons */ --ring-onblue: inset 0 0 0 1px rgba(255, 255, 255, 0.18); --frame-ink: inset 0 0 0 7px #3f3f42; /* thick "device" frame on GIF cards */ /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; }