/* ============================================================ Longboard marketing site — shared design system Brand tokens, base reset, hover-state classes (converted from the prototype's `style-hover` attrs), header/footer chrome, and a responsive layer that retrofits the desktop-first, inline-styled prototype markup for tablet/mobile. ============================================================ */ /* ---------- base (from prototype ) ---------- */ * { box-sizing: border-box; } html, body { margin: 0; } html { overflow-x: hidden; } body { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; background: #f6f0e5; color: #51636b; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; } h1, h2, h3, p { text-wrap: pretty; } @keyframes lbbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } } /* ---------- form inputs (About + early access) ---------- */ .lbinput { width: 100%; height: 46px; border: 1px solid #d8cfba; background: #fff; border-radius: 11px; padding: 0 14px; font-family: inherit; font-size: 14.5px; color: #16384a; outline: none; } .lbinput:focus { border-color: #16384a; box-shadow: 0 0 0 3px rgba(22,56,74,.12); } textarea.lbinput { height: auto; padding: 12px 14px; resize: vertical; } .lbinput::placeholder { color: #a7b0b6; } /* ---------- hover-state utility classes ---------- Direct 1:1 map of the prototype's `style-hover="…"` values. */ .hv-white:hover { color: #fff; } .hv-navy:hover { color: #16384a; } .hv-b6:hover { filter: brightness(1.06); } .hv-b7:hover { filter: brightness(1.07); } .hv-b8:hover { filter: brightness(1.08); } .hv-cream:hover { background: #fbf7ee; } .hv-cream2:hover { background: #faf6ec; } /* ============================================================ HEADER (canonical — identical markup pasted on every page) ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(246,240,229,.82); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid #ece3d2; } .header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand-mark { height: 34px; width: auto; } .brand-word { font-size: 20px; font-weight: 700; color: #16384a; letter-spacing: -.02em; } .site-nav { display: flex; align-items: center; gap: 30px; } .nav-link { color: #3f5560; font-size: 14.5px; font-weight: 500; text-decoration: none; } .nav-link:hover { color: #16384a; } .nav-cta { background: #ed7d24; color: #fff; font-size: 14.5px; font-weight: 600; padding: 11px 20px; border-radius: 11px; text-decoration: none; box-shadow: 0 6px 16px rgba(237,125,36,.3); white-space: nowrap; } .nav-cta:hover { filter: brightness(1.06); } /* current-page highlight (driven by ) */ body.page-home .nav-home, body.page-how .nav-how, body.page-compare .nav-compare, body.page-about .nav-about { color: #16384a; font-weight: 600; } /* hamburger — hidden on desktop (real