/* ============================================================ BINKIS — Colors & Type E-commerce for Marvel collection toys. Soft lavender brand, chunky rounded display type, square full-bleed containers, playful kid energy. ============================================================ */ /* ----- Fonts (Google Fonts CDN) ----- Display & Accent: Bebas Neue — tall condensed uppercase, matches the "JUST BEING KIDS!" slogan lockup Body : Inter — modern neutral sans, pairs with Bebas Mono : JetBrains Mono — SKUs, order numbers, receipts */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- Brand colors ---------- */ --binkis-purple: #9F8EC3; /* primary lavender — logo color */ --binkis-purple-soft: #C6B9DE; /* tint for backgrounds, cards */ --binkis-purple-mist: #EDE7F6; /* lightest fill */ --binkis-purple-deep: #6B549A; /* hover / pressed */ --binkis-purple-ink: #2E1F5A; /* deep brand tone (headings) */ --binkis-night: #1A0F2E; /* near-black for body text */ /* ---------- Neutrals ---------- */ --paper: #FAF7FF; /* off-white page background */ --paper-warm: #FFFFFF; /* pure white card / surface */ --ash-100: #F1EEF7; --ash-200: #E2DDEC; --ash-300: #C9C1D8; --ash-500: #8E84A3; --ash-700: #4F4860; --ash-900: #221C30; /* ---------- Semantic ---------- */ --fg-1: var(--binkis-night); /* primary text */ --fg-2: var(--ash-700); /* secondary text */ --fg-3: var(--ash-500); /* tertiary, meta */ --fg-inverse: #FFFFFF; --fg-brand: var(--binkis-purple-ink); --bg-page: var(--paper); --bg-surface: var(--paper-warm); --bg-sunken: var(--ash-100); --bg-brand: var(--binkis-purple); --bg-brand-soft: var(--binkis-purple-mist); --bg-ink: var(--binkis-night); --border-1: var(--ash-200); --border-2: var(--ash-300); --border-brand: var(--binkis-purple); /* ---------- Status (within brand palette only) ---------- We do not use rainbow accents. Status is communicated via tone (ink vs. mist) and small text labels, never by introducing a new hue. */ --status-fg: var(--binkis-purple-ink); --status-bg: var(--binkis-purple-mist); --status-strong-fg: #FFFFFF; --status-strong-bg: var(--binkis-night); /* ---------- Type families ---------- */ --font-display: 'Bebas Neue', 'Oswald', 'Anton', sans-serif; --font-accent: 'Bebas Neue', 'Oswald', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---------- Type scale ---------- */ --fs-display: clamp(48px, 7vw, 96px); --fs-h1: clamp(36px, 5vw, 64px); --fs-h2: clamp(28px, 3.5vw, 44px); --fs-h3: 24px; --fs-h4: 20px; --fs-body: 16px; --fs-body-lg: 18px; --fs-small: 14px; --fs-tiny: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ---------- Spacing (4px base) ---------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- Radii — Binkis is square-first ---------- */ --r-0: 0; /* default container — squares, full-sized */ --r-1: 4px; /* tiny radius for chips / pills only */ --r-pill: 999px; /* status pills, tags */ /* ---------- Shadows — soft and lavender-tinted ---------- */ --shadow-1: 0 1px 2px rgba(46, 31, 90, 0.06); --shadow-2: 0 4px 14px rgba(46, 31, 90, 0.10); --shadow-3: 0 12px 32px rgba(46, 31, 90, 0.14); --shadow-pop: 6px 6px 0 var(--binkis-night); /* signature "block" shadow */ /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ Base ============================================================ */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } /* ============================================================ Semantic typography roles ============================================================ */ .display, h1.display { font-family: var(--font-display); font-weight: 400; /* Bebas Neue ships at 400 only */ font-size: var(--fs-display); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--binkis-purple-ink); } h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--binkis-purple-ink); margin: 0; } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.0; letter-spacing: 0.005em; text-transform: uppercase; color: var(--binkis-purple-ink); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg-1); margin: 0; } h4, .h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; } .slogan { font-family: var(--font-accent); font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--fg-1); } .eyebrow { font-family: var(--font-accent); text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.12em; color: var(--binkis-purple-deep); font-weight: 400; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); margin: 0; } .body-lg { font-size: var(--fs-body-lg); } .small { font-size: var(--fs-small); color: var(--fg-2); } .meta { font-size: var(--fs-tiny); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; } code, .mono { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--binkis-purple-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--binkis-purple-ink); }