/* =========================================================== ProductLab — consumer-first homepage Design tokens + base styles =========================================================== */ :root { /* Brand blue — ProductLab #137cde (themeable via .theme-* on ) */ --green-900: #0a1f38; --green-800: #0c2c52; --green-700: #0d4f96; --green-600: #1068c4; --green-500: #137cde; /* primary brand */ --green-400: #3f97ea; --green-300: #8ec3f3; --green-200: #c5e0fa; --green-100: #e9f3fd; --brand: var(--green-500); --brand-deep: var(--green-700); --brand-ink: var(--green-900); --brand-soft: var(--green-100); --brand-soft-2: var(--green-200); /* Cool off-white canvas, blue-tinted */ --cream: #f1f5fb; --cream-2: #e8eef8; --paper: #ffffff; /* Ink (deep navy-black) */ --ink: #0e1a28; --ink-2: #2b3a4d; --ink-3: #5a6b7e; --ink-4: #8a97a8; --line: #dde4ee; --line-2: #ccd6e4; /* Coin gold highlight — used sparingly */ --gold: #ffce3f; --gold-deep: #e8a900; /* Dark business section (navy) */ --dark-bg: #07111f; --dark-bg-2: #0c1d33; --dark-line: #18304f; --dark-ink: #d3deea; --dark-ink-2: #8294a8; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(8,30,20,.06), 0 2px 8px rgba(8,30,20,.05); --shadow-md: 0 4px 14px rgba(8,30,20,.08), 0 12px 34px rgba(8,30,20,.07); --shadow-lg: 0 10px 30px rgba(8,30,20,.10), 0 30px 70px rgba(8,30,20,.12); --shadow-green: 0 10px 24px rgba(19,124,222,.28), 0 2px 6px rgba(19,124,222,.20); --maxw: 1200px; --ease: cubic-bezier(.2, .7, .2, 1); --font-display: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; } /* ----- Theme variants (set on ) ----- */ body.theme-green { --green-900:#04261a; --green-800:#063d2a; --green-700:#0a6a45; --green-600:#0a9d63; --green-500:#06c167; --green-400:#34d986; --green-300:#7eeeb3; --green-200:#c3f7dc; --green-100:#e6fbf0; --gold:#ffce3f; } body.theme-grape { --green-900:#26083b; --green-800:#380c50; --green-700:#5e1d96; --green-600:#7a2cc0; --green-500:#9340e0; --green-400:#ad6cf0; --green-300:#cfa6f7; --green-200:#e6cffb; --green-100:#f3e9fe; --gold:#ffce3f; } body.theme-sunset { --green-900:#3b1306; --green-800:#50200c; --green-700:#963a1d; --green-600:#c0532c; --green-500:#e86a34; --green-400:#f08f5f; --green-300:#f7bfa6; --green-200:#fbdccf; --green-100:#feefe9; --gold:#ffce3f; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 92px; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } } body { margin: 0; font-family: var(--font-body); background: var(--cream); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; line-height: 1.02; letter-spacing: -.02em; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); font-weight: 700; } .muted { color: var(--ink-3); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 9px; border: none; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: 16px; padding: 14px 24px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); white-space: nowrap; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-green); } body.theme-green .btn-primary { color: #04231a; } .btn-primary:hover { transform: translateY(-2px); background: var(--green-400); } .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { transform: translateY(-2px); background: #1d2c23; } .btn-lg { font-size: 17px; padding: 17px 30px; } /* reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal { opacity:1 !important; transform:none !important; } } .section { padding: 96px 0; } @media (max-width: 760px){ .section { padding: 64px 0; } .wrap { padding: 0 20px; } }