/** Shopify CDN: Minification failed Line 52:0 All "@import" rules must come first **/ /* ========================================================================== WOOFCORE THEME — CRITICAL CSS Loaded on every page. Contains: reset, design tokens, fonts, base styles, utility classes, animations. ========================================================================== */ /* ----- RESET (Josh Comeau-inspired) ----- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { text-wrap: pretty; } button { background: none; border: none; padding: 0; cursor: pointer; color: inherit; } a { color: inherit; text-decoration: none; } /* ----- DESIGN TOKENS ----- */ :root { /* Colors */ --wc-black: #0d0d0d; --wc-near-black: #141414; --wc-deep: #1a1a1a; --wc-coal: #111111; --wc-ink: #161616; --wc-line: #1e1e1e; --wc-orange: #c85a1a; --wc-orange-light: #e06a22; --wc-cream: #f0e8d8; --wc-off-white: #f7f3ec; --wc-lime: #c8f53a; --wc-silver: #a8a8a8; --wc-muted: #555555; --wc-dim: #888888; /* Layout */ --max-w-content: 1280px; --header-h: 72px; --announcement-h: 36px; /* Type stack */ --font-display: "Bebas Neue", "Bebas", sans-serif; --font-mono: "DM Mono", ui-monospace, monospace; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ----- WEB FONTS (Google Fonts CDN, same as Next.js next/font setup) ----- */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,400;0,500;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap"); /* ----- BASE ----- */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--wc-black); color: var(--wc-off-white); scroll-behavior: smooth; /* overflow-x lives on (not ) so descendants with `position: sticky` (the header) anchor against the viewport correctly. body-level overflow-x:hidden silently neutralises sticky on Safari + Chrome. */ overflow-x: hidden; } body { font-family: var(--font-body); background: var(--wc-black); color: var(--wc-off-white); font-size: 15px; line-height: 1.7; min-height: 100svh; } ::selection { background: var(--wc-orange); color: #fff; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0b0b0b; } ::-webkit-scrollbar-thumb { background: #222; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--wc-orange); } /* ----- TYPOGRAPHY UTILITIES ----- */ .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .font-body { font-family: var(--font-body); } /* ----- LAYOUT WRAPPER ----- */ .wc-container { width: 100%; max-width: var(--max-w-content); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } @media (min-width: 768px) { .wc-container { padding-left: 40px; padding-right: 40px; } } /* ----- BUTTONS ----- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--wc-orange); color: #fff; padding: 16px 32px; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.18em; transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 300ms; box-shadow: 0 20px 40px -16px rgba(200, 90, 26, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn-primary:hover { background: var(--wc-orange-light); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); color: var(--wc-off-white); padding: 16px 32px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; transition: border-color 300ms, background-color 300ms; } .btn-ghost:hover { border-color: rgba(200, 90, 26, 0.5); background: rgba(255, 255, 255, 0.04); } /* ----- LABELS ----- */ .eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--wc-orange); } .label-data { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--wc-dim); } .eyebrow-line { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--wc-orange); } .eyebrow-line::before { content: ""; display: block; height: 1px; width: 36px; background: var(--wc-orange); } /* ----- BACKGROUND TEXTURES ----- */ .bg-topo { background-image: radial-gradient(1200px 600px at 10% 0%, rgba(200,90,26,0.07), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(200,245,58,0.03), transparent 65%), url("data:image/svg+xml;utf8,"); background-size: auto, auto, 600px 600px; background-repeat: no-repeat, no-repeat, repeat; } .bg-grain { position: relative; } .bg-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .divider-x { height: 1px; background: linear-gradient(to right, transparent, var(--wc-line) 20%, var(--wc-line) 80%, transparent); } .section-pad { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(72px, 10vw, 140px); } /* Default section breathing room — sections with `.wc-section` class inherit this so the PDP doesn't feel intertwined. Per-section overrides (e.g. the hero/details/expect blocks that set their own padding inline) still win thanks to CSS source order — the section's inline