/* ============================================================================ XTRAVIGOR — Design System Organization: 1) Design tokens 2) Reset/base 3) Typography 4) Layout 5) Components 6) Utilities 7) Motion/a11y Dark-first. Lime (#aded26) used with restraint. WCAG AA target. Phase 1 ships hand-authored CSS for full control; a Vite build can later fingerprint/minify this into /assets/dist without changing authoring. ============================================================================ */ /* ------------------------------------------------------------------ * * 1. DESIGN TOKENS * ------------------------------------------------------------------ */ :root { /* Brand colours (exact, from logo SVG) */ --x-lime: #aded26; --x-lime-stroke: #90E221; --x-lime-600: #97c91f; --x-lime-glow: rgba(173, 226, 38, 0.35); --x-black: #000000; --x-ink: #0a0a0a; --x-ink-2: #111111; --x-ink-3: #171717; --x-white: #fefefe; /* Neutrals */ --x-n-100: #e5e5e5; --x-n-300: #9a9a9a; --x-n-500: #6b6b6b; --x-n-700: #2a2a2a; --x-n-800: #1c1c1c; /* Semantic surfaces */ --bg: var(--x-black); --bg-elevated: var(--x-ink); --card: var(--x-ink-2); --card-border: rgba(255, 255, 255, 0.08); --card-border-hover: rgba(173, 226, 38, 0.45); --text: var(--x-white); --text-muted: var(--x-n-300); --text-dim: var(--x-n-500); --accent: var(--x-lime); --divider: rgba(255, 255, 255, 0.08); /* Typography */ --font-brand: "DarkNet", "Saira Condensed", "Arial Narrow", system-ui, sans-serif; /* statement display (uppercase) */ --font-heading: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; /* sporty UI: nav, buttons, sub-heads */ --font-display: var(--font-heading); --font-body: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Sora", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fluid type scale (clamp: min, preferred, max) */ --fs-100: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --fs-200: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --fs-300: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); --fs-400: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); --fs-500: clamp(1.35rem, 1.2rem + 0.75vw, 1.7rem); --fs-600: clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem); --fs-700: clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem); --fs-800: clamp(2.8rem, 1.9rem + 4.4vw, 5.5rem); --fs-900: clamp(3.4rem, 2rem + 6.6vw, 7rem); /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Layout */ --container: 1240px; --container-wide: 1440px; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 76px; --radius: 14px; --radius-lg: 22px; --radius-sm: 8px; /* Effects */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.75); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.18s; --dur: 0.35s; --dur-slow: 0.6s; color-scheme: dark; } /* ------------------------------------------------------------------ * * 2. RESET / BASE * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; /* Sideways-scroll guard. `overflow-x: hidden` on alone only propagates to the viewport, which mobile browsers honour inconsistently — one element a few px too wide and the whole page can be panned sideways, so the header and hero look chopped off on the left. Declared twice on purpose: old engines keep `hidden`, modern ones take `clip`, which clips WITHOUT turning the root into a scroll container (so position: sticky and Lenis keep working). */ overflow-x: hidden; overflow-x: clip; } /* scroll-behavior:smooth must NOT be on by default — it fights Lenis's own per-frame window.scrollTo() calls (each new call restarts the browser's smooth-scroll animation before it can move), which visually freezes scrolling. Only enable it as a fallback when the enhanced bundle (and therefore Lenis) never loaded — the existing prefers-reduced-motion rule below separately forces `auto` when Lenis is intentionally not created. */ html:not(.js-enhanced) { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-300); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; max-width: 100%; /* Long unbreakable strings (product codes, pasted URLs, spec values) must wrap rather than push the page wider than the phone. */ overflow-wrap: break-word; min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } p { text-wrap: pretty; } :where(h1, h2, h3, h4) { text-wrap: balance; } /* Accessible focus ring */ :focus-visible { outline: 2px solid var(--x-lime); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--x-lime); color: #000; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--x-black); } ::-webkit-scrollbar-thumb { background: var(--x-n-700); border-radius: 20px; border: 2px solid var(--x-black); } ::-webkit-scrollbar-thumb:hover { background: var(--x-n-500); } /* ------------------------------------------------------------------ * * 3. TYPOGRAPHY * ------------------------------------------------------------------ */ /* Statement display = real DarkNet Italic. Used uppercase (this face is an uppercase display font) so no glyphs fall back mid-word. */ .display, h1, .h1, h2, .h2 { font-family: var(--font-brand); font-style: italic; font-weight: 600; text-transform: uppercase; } .display { line-height: 0.98; letter-spacing: 0.005em; } h1, .h1 { font-size: var(--fs-800); line-height: 0.98; letter-spacing: 0.005em; } h2, .h2 { font-size: var(--fs-700); line-height: 1; letter-spacing: 0.008em; } h3, .h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-500); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; } /* Phone/tablet display scale. DarkNet is a very wide face — a capital "M" is 1.25em — so an uppercase 13-letter word like CRAFTSMANSHIP is 12.2em wide. At the desktop scale that word rendered 478px wide inside a 379px phone container (98px of overflow on h2, 230px on h1), which is what pushed the whole document wider than the screen and chopped the banners and headings off at the right edge. These sizes are measured to fit the longest word on the site down to a 320px screen. Desktop (>900px) is untouched. */ @media (max-width: 1100px) { h1, .h1 { font-size: clamp(1.3rem, -0.15rem + 7vw, 4.9rem); } h2, .h2 { font-size: clamp(1.35rem, 0.1rem + 5.4vw, 3.2rem); } } /* Structural backstop: a single word can never be wider than its column. This also drops the heading's min-content width to one character, so a long word can no longer stretch its grid/flex track and blow the page out sideways. */ :where(h1, h2, h3, h4, .h1, .h2, .h3, .display) { overflow-wrap: anywhere; } h4, .h4 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-400); letter-spacing: .01em; } .eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-200); letter-spacing: 0.28em; text-transform: uppercase; color: var(--x-lime); } .lead { font-size: var(--fs-400); color: var(--text-muted); } .muted { color: var(--text-muted); } .dim { color: var(--text-dim); } .text-lime { color: var(--x-lime); } mark, .hl { background: linear-gradient(transparent 60%, var(--x-lime-glow) 60%); color: inherit; padding: 0 .1em; } /* ------------------------------------------------------------------ * * 4. LAYOUT * ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-wide { max-width: var(--container-wide); } .section { padding-block: clamp(3.5rem, 8vw, 7rem); } .section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .stack > * + * { margin-top: var(--sp-4); } .grid { display: grid; gap: var(--gutter); } .flow > * + * { margin-top: 1em; } /* Auto-fit responsive grids */ .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } /* Products listing — owner picks 2 or 3 per row in CX-Panel. • 2 per row: the card at full size (unchanged original). • 3 per row: the SAME card, scaled down. Only the type/spacing step down (by fixed amounts, ~66% of the 2-up sizes) and ONLY on desktop where 3 columns actually apply — no container queries, no transforms, nothing that can throw the grid off. The image is aspect-ratio 1/1 so it scales with the column. Both collapse to 2 then 1 column on smaller screens (with normal type). */ .grid-products { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); } .grid-products--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 1.7vw, 1.4rem); } @media (min-width: 901px) { .grid-products--3 .pcard__body { padding: .78rem .9rem .9rem; gap: .38rem; } .grid-products--3 .pcard__title { font-size: .95rem; } .grid-products--3 .pcard__desc { font-size: .74rem; } .grid-products--3 .pcard__foot { padding-top: .5rem; } .grid-products--3 .pcard__price { font-size: .74rem; } .grid-products--3 .pcard__price b { font-size: .95rem; } .grid-products--3 .pcard__price i, .grid-products--3 .pcard__moq { font-size: .68rem; } .grid-products--3 .pcard__badges { top: .55rem; left: .55rem; } .grid-products--3 .badge { font-size: 8.5px; padding: 2px 6px; } } @media (max-width: 900px) { .grid-products--2, .grid-products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid-products--2, .grid-products--3 { grid-template-columns: 1fr; } } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } /* ------------------------------------------------------------------ * * 5. COMPONENTS * ------------------------------------------------------------------ */ /* --- Buttons --- */ .btn { --btn-bg: transparent; --btn-fg: var(--x-white); --btn-bd: rgba(255,255,255,.2); display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.7rem; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-200); letter-spacing: .08em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 999px; position: relative; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--x-lime); --btn-fg: #0a0a0a; --btn-bd: var(--x-lime); box-shadow: 0 6px 24px -6px var(--x-lime-glow); } .btn--primary:hover { --btn-bg: #b9ef2f; box-shadow: 0 10px 34px -6px var(--x-lime-glow); } .btn--ghost { --btn-bd: rgba(255,255,255,.25); } .btn--ghost:hover { --btn-bd: var(--x-lime); --btn-fg: var(--x-lime); } .btn--lg { padding: 1.05rem 2.1rem; font-size: var(--fs-300); } .btn--block { display: flex; width: 100%; justify-content: center; } .btn .btn__icon { width: 1.1em; height: 1.1em; } /* --- Chip / badge --- */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; font-size: var(--fs-100); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text-muted); background: rgba(255,255,255,.02); } .badge--lime { color: #0a0a0a; background: var(--x-lime); border-color: var(--x-lime); } .badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--x-lime); box-shadow: 0 0 8px var(--x-lime); } /* --- Header --- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background var(--dur) var(--ease-out), border-color var(--dur), backdrop-filter var(--dur); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(0,0,0,.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--divider); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; } .brand { display: inline-flex; align-items: center; } .brand__logo { height: 30px; width: auto; overflow: visible; transition: filter var(--dur) var(--ease-out); } .brand:hover .brand__logo { filter: drop-shadow(0 0 12px var(--x-lime-glow)); } .brand__notch { transition: fill var(--dur); } .footer-brand .brand__logo { height: 34px; } /* Primary nav */ .nav { display: flex; align-items: center; gap: clamp(.15rem, .85vw, .7rem); } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .45rem; white-space: nowrap; font-family: var(--font-heading); font-weight: 600; font-size: clamp(.78rem, .92vw, .9rem); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.05; transition: color var(--dur-fast); } .nav__link:hover, .nav__link.is-active { color: var(--x-white); } .nav__link::after { content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .05rem; height: 2px; width: 0; background: linear-gradient(90deg, var(--x-lime), transparent); transition: width var(--dur) var(--ease-out); } .nav__link:hover::after, .nav__link.is-active::after { width: calc(100% - .7rem); } .nav__caret { width: .68em; height: .68em; opacity: .55; transition: transform var(--dur) var(--ease-out); } .nav__item:hover .nav__caret { transform: rotate(180deg); color: var(--x-lime); } /* Invisible hover bridge over the gap so the dropdown doesn't close when the cursor travels from the nav link down to the sub-options. */ .nav__item:has(.nav__dropdown)::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; } /* Dropdown / mega panel */ .nav__dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px); padding: .6rem; border-radius: var(--radius-lg); /* Glassy translucent panel */ background: linear-gradient(180deg, rgba(20,20,20,.72), rgba(9,9,9,.66)); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 60px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(173, 226, 38,.05); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur); } .nav__dropdown::before { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, transparent, var(--x-lime), transparent); border-radius: 2px; filter: drop-shadow(0 0 6px rgba(173, 226, 38,.5)); } /* little pointer notch connecting to the trigger */ .nav__dropdown::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: rgba(20,20,20,.72); border-left: 1px solid rgba(255,255,255,.09); border-top: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .nav__dropdown--mega { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; min-width: 500px; } .nav__dropdown--mega::after { left: 50%; } .nav__dropdown:not(.nav__dropdown--mega) { min-width: 258px; } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav__dropdown a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .68rem .85rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--fs-200); letter-spacing: .02em; color: var(--text-muted); transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast); } .nav__dropdown a::after { content: "→"; opacity: 0; transform: translateX(-6px); color: var(--x-lime); transition: opacity var(--dur-fast), transform var(--dur-fast); } .nav__dropdown a:hover { background: linear-gradient(90deg, rgba(173, 226, 38,.16), rgba(173, 226, 38,.03)); color: var(--x-white); padding-left: 1.05rem; box-shadow: inset 2px 0 0 var(--x-lime); } .nav__dropdown a:hover::after { opacity: 1; transform: translateX(0); } .header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } /* Compact, refined "Get a Quote" so it sits cleanly in the bar */ .btn--quote { padding: .62rem 1.35rem; font-size: clamp(.78rem, .9vw, .88rem); letter-spacing: .05em; box-shadow: 0 4px 18px -6px var(--x-lime-glow); } .btn--quote:hover { box-shadow: 0 8px 26px -6px var(--x-lime-glow); } /* Collapse the desktop nav to the drawer before it gets cramped */ @media (max-width: 1160px) { .nav, .header-actions .btn--quote { display: none; } .nav-toggle { display: inline-flex; } } /* Mobile toggle + drawer */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--card-border); } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--x-white); position: relative; transition: background var(--dur-fast); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--x-white); transition: transform var(--dur) var(--ease-out); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); } .mobile-drawer { position: fixed; inset: 0; z-index: 90; padding: calc(var(--header-h) + 1rem) var(--gutter) max(1.25rem, env(safe-area-inset-bottom)); background: rgba(0,0,0,.98); display: flex; flex-direction: column; transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out); visibility: hidden; } body.nav-open .mobile-drawer { transform: translateY(0); visibility: visible; } /* The nav list is the ONLY scroll area; the CTA stays pinned below it. */ .mdrawer__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mdrawer__nav::-webkit-scrollbar { width: 8px; } .mdrawer__nav::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--x-lime), #8fc21f); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } .mdrawer__item { border-bottom: 1px solid var(--divider); } .mdrawer__row { display: flex; align-items: center; justify-content: space-between; } .mdrawer__link { flex: 1; display: block; padding: .85rem 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-400); } .mdrawer__toggle { flex: none; width: 46px; height: 46px; display: grid; place-items: center; color: var(--text-muted); } .mdrawer__toggle svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); } .mdrawer__item.is-open .mdrawer__toggle svg { transform: rotate(180deg); color: var(--x-lime); } .mdrawer__sub { padding: .2rem 0 .7rem; display: grid; gap: .1rem; } .mdrawer__sub[hidden] { display: none; } .mdrawer__sub a { display: block; padding: .55rem 0 .55rem 1rem; font-family: var(--font-body); font-style: normal; font-size: var(--fs-200); color: var(--text-muted); border-left: 2px solid var(--card-border); } .mdrawer__sub a:hover { color: var(--x-lime); border-left-color: var(--x-lime); } .mdrawer__cta { flex: none; margin-top: 1rem; } /* --- Hero --- */ .hero { position: relative; min-height: min(94vh, 960px); display: flex; align-items: center; overflow: hidden; padding-block: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) clamp(2rem, 5vh, 3.5rem); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg canvas { width: 100% !important; height: 100% !important; } .hero__fallback { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 78% 12%, rgba(173, 226, 38,.16), transparent 55%), radial-gradient(900px 500px at 10% 88%, rgba(173, 226, 38,.08), transparent 60%), linear-gradient(180deg, #000 0%, #060a02 55%, #000 100%); } .hero__grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 78%); } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.12) 100%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 32%); } /* Two-column layout: text + manufacturing visual */ .hero__layout { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero__inner { min-width: 0; max-width: 60ch; } /* DarkNet is a wide uppercase face → sized so subtitle + CTAs + stats stay in view */ .hero h1 { font-size: clamp(1.85rem, 1rem + 3.7vw, 3.5rem); line-height: 0.94; margin-block: .5rem .8rem; letter-spacing: .012em; } .hero h1 .stroke { -webkit-text-stroke: 1.4px var(--x-lime); color: transparent; } .hero .lead { max-width: 48ch; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: clamp(1.3rem, 3vh, 1.9rem); } .hero__meta { display: flex; flex-wrap: wrap; gap: .8rem clamp(1.3rem, 3vw, 2.3rem); margin-top: clamp(1.5rem, 3.4vh, 2.2rem); padding-top: clamp(1.1rem, 3vh, 1.7rem); border-top: 1px solid var(--divider); } .hero__meta div { min-width: 88px; } .hero__meta b { display: block; font-family: var(--font-brand); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1; color: var(--x-white); } .hero__meta span { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-100); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); } /* Manufacturing visual — looks premium even with no image */ .hero__visual { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 22px), radial-gradient(120% 120% at 70% 0%, rgba(173, 226, 38,.14), transparent 55%), linear-gradient(160deg, var(--x-ink-2), #050505); box-shadow: var(--shadow-lg); } .hero__visual::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 60% 30%, #000, transparent 75%); } .hero__visual img, .hero__visual video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__visual-ph { position: absolute; inset: 0; display: grid; place-items: center; } .hero__visual-ph svg { width: 38%; max-width: 140px; opacity: .5; } .hero__visual-ph::after { content: attr(data-label); position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: var(--fs-100); color: var(--text-dim); } .hero__visual-frame { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(173, 226, 38,.14); border-radius: var(--radius-lg); } .hero__visual-badge { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(10,10,10,.72); backdrop-filter: blur(8px); border: 1px solid var(--card-border); } .hero__visual-badge b { font-family: var(--font-brand); font-style: italic; font-size: var(--fs-500); color: var(--x-lime); line-height: 1; } .hero__visual-badge span { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-100); color: var(--text-muted); } .hero--minimal .hero__layout { grid-template-columns: 1fr; } .hero--minimal .hero__inner { max-width: 66ch; } /* Lift all hero content above the overlay (both layouts) */ .hero > .container { position: relative; z-index: 2; } /* Hero background media (image / video / youtube / slideshow) */ .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media--image { background-size: cover; background-position: center; } .hero__media--video { width: 100%; height: 100%; object-fit: cover; } .hero__media--yt { width: 100%; height: 100%; } .hero__media--yt iframe { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; } .hero__slideshow { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s var(--ease-in-out); } .hero__slide.is-active { opacity: 1; } .hero__slideshow[data-anim="kenburns"] .hero__slide.is-active { animation: kenburns var(--slide-dur, 8s) ease-out both; } @keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.16); } } body[data-motion="reduced"] .hero__slide { animation: none !important; } body[data-motion="reduced"] .hero__media--video { display: none; } /* --- Marquee capability strip --- */ .marquee { border-block: 1px solid var(--divider); padding-block: 1rem; overflow: hidden; background: var(--x-ink); } .marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 32s linear infinite; } .marquee__track span { font-family: var(--font-display); font-style: italic; font-size: var(--fs-500); color: var(--x-n-700); white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; } .marquee__track span::after { content: "◆"; color: var(--x-lime); font-size: .5em; } @keyframes marquee { to { transform: translateX(-50%); } } /* --- Section head --- */ .section-head { max-width: 62ch; margin-bottom: var(--sp-7); } .section-head .eyebrow { margin-bottom: .8rem; display: inline-block; } /* --- Cards (category tiles, 3D hover tilt) --- */ .card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--x-ink-2), var(--x-ink)); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--sp-6); overflow: hidden; transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); transform-style: preserve-3d; } .card:hover { border-color: var(--card-border-hover); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(173, 226, 38,.12), transparent 45%); transition: opacity var(--dur); } .card:hover::after { opacity: 1; } .card__index { font-family: var(--font-display); font-style: italic; font-size: var(--fs-200); color: var(--x-lime); letter-spacing: .1em; } .card__title { font-family: var(--font-display); font-style: italic; font-size: var(--fs-500); margin-top: auto; padding-top: var(--sp-6); } .card__blurb { color: var(--text-muted); font-size: var(--fs-200); margin-top: .6rem; } .card__arrow { margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: .5rem; color: var(--x-lime); font-weight: 700; font-size: var(--fs-200); } .card__arrow svg { transition: transform var(--dur) var(--ease-out); } .card:hover .card__arrow svg { transform: translateX(5px); } /* --- Product cards --- */ .pcard { display: flex; flex-direction: column; background: var(--x-ink-2); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur); } .pcard:hover { transform: translateY(-5px); border-color: var(--card-border-hover); box-shadow: var(--shadow-lg); } /* Square media, image fills edge-to-edge (product photos are square — no padding) */ .pcard__media { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(160deg, #141613, #0c0d0b); overflow: hidden; } .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .pcard:hover .pcard__media img { transform: scale(1.06); } .pcard__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(300px 200px at 70% 20%, rgba(173, 226, 38,.1), transparent 60%); } .pcard__placeholder svg { width: 74px; height: 74px; opacity: .8; } .pcard__placeholder span { position: absolute; font-family: var(--font-brand); font-style: italic; font-size: 3rem; color: rgba(255,255,255,.06); } .pcard__badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; } .pcard__badges .badge { font-size: 10px; padding: .25rem .5rem; } .pcard__body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .pcard__title { font-family: var(--font-display); font-style: italic; font-size: var(--fs-400); line-height: 1.15; } .pcard__desc { color: var(--text-muted); font-size: var(--fs-100); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--divider); } .pcard__price { font-size: var(--fs-200); color: var(--text-muted); } .pcard__price b { font-family: var(--font-brand); font-style: italic; color: var(--x-lime); font-size: var(--fs-400); } .pcard__price i { font-style: normal; color: var(--text-dim); font-size: var(--fs-100); } .pcard__price--quote { color: var(--x-lime); font-weight: 700; font-size: var(--fs-200); } .pcard__moq { font-size: var(--fs-100); color: var(--text-dim); white-space: nowrap; } /* --- Product detail --- */ .pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .pdp__gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); } .pdp__main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, #141613, #0c0d0b); display: grid; place-items: center; border: 1px solid var(--card-border); } .pdp__main img { width: 100%; height: 100%; object-fit: cover; } .pdp__ph { display: grid; place-items: center; } .pdp__ph svg { width: 40%; opacity: .8; } .pdp__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; } .pdp__thumb { position: relative; width: 74px; height: 74px; background: linear-gradient(160deg, #141613, #0c0d0b); border-radius: 10px; border: 1px solid var(--card-border); cursor: pointer; overflow: hidden; transition: border-color var(--dur-fast); } .pdp__thumb img, .pdp__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp__thumb:hover { border-color: var(--x-lime); } .pdp__thumb.is-active { border-color: var(--x-lime); box-shadow: 0 0 0 1px var(--x-lime); } .pdp__thumb-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; color: #fff; background: rgba(0,0,0,.35); pointer-events: none; } .pdp__main video { width: 100%; height: 100%; object-fit: cover; background: #0c0d0b; } /* Small "expand to original size" hint over a video in the square preview. */ .pdp__main .pdp__expand { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: #fff; font: 600 .72rem/1 var(--font-ui); letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(4px); transition: border-color var(--dur-fast), background var(--dur-fast); } .pdp__main .pdp__expand:hover { border-color: var(--x-lime); background: rgba(0,0,0,.72); } .pdp__main { position: relative; } /* Big centred play button over a video preview — clicking opens it at original size. */ .pdp__main .pdp__playbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 68px; height: 68px; border-radius: 999px; border: 0; cursor: pointer; display: grid; place-items: center; color: #0c0d0b; background: var(--x-lime); box-shadow: 0 10px 30px rgba(0,0,0,.45); padding-left: 3px; transition: transform var(--dur-fast), box-shadow var(--dur-fast); } .pdp__main .pdp__playbtn:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 40px rgba(0,0,0,.55); } /* Video lightbox — plays a product video at its ORIGINAL size (any aspect). */ .vlb { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3vmin; background: rgba(6,7,5,.92); backdrop-filter: blur(6px); } .vlb[hidden] { display: none; } .vlb__close { position: absolute; top: 2.2vmin; right: 2.6vmin; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.5); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color var(--dur-fast); } .vlb__close:hover { border-color: var(--x-lime); } .vlb__stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 96vw; } /* NOTE: no border-radius / box-shadow / filter on the playing video — those force the browser off the hardware video-overlay path onto slow software compositing, which makes playback stutter. Keep the surface plain; translateZ promotes it to its own GPU layer for smooth playback. */ .vlb__video { max-width: 96vw; max-height: 82vh; width: auto; height: auto; background: #000; display: block; transform: translateZ(0); } .vlb__bar { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; } /* Share product button + tiny share sheet. */ .pdp__share-wrap { position: relative; } .pdp__share-sheet { position: absolute; bottom: calc(100% + .5rem); left: 0; z-index: 20; min-width: 220px; padding: .5rem; background: var(--surface-1, #14161300); background: #16181400; border: 1px solid var(--card-border); border-radius: var(--radius-md); background-color: #17190f; box-shadow: 0 20px 50px rgba(0,0,0,.5); display: grid; gap: .15rem; } .pdp__share-sheet[hidden] { display: none; } .pdp__share-sheet button, .pdp__share-sheet a { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; background: transparent; color: var(--text); font: 500 .9rem/1 var(--font-ui); text-align: left; border-radius: 8px; cursor: pointer; text-decoration: none; } .pdp__share-sheet button:hover, .pdp__share-sheet a:hover { background: rgba(255,255,255,.06); color: var(--x-lime); } .pdp__share-copied { color: var(--x-lime); font: 600 .8rem/1 var(--font-ui); padding: .3rem .7rem; } /* Page gallery (images uploaded per page in CX-Panel → Appearance). */ .page-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin-top: 1.5rem; } .page-gallery__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--card-border); background: #0c0d0b; aspect-ratio: 4/3; } .page-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-med, .4s) ease; } .page-gallery__item:hover img { transform: scale(1.04); } /* Product code line — sits under the meta row, before pricing (additive). */ .pdp__code { display: flex; align-items: baseline; gap: .55rem; margin: .2rem 0 1.2rem; font: 700 1.02rem/1.2 "DarkNet", var(--font-ui); font-style: italic; letter-spacing: .06em; color: var(--x-lime); text-transform: uppercase; } .pdp__code span { font: 600 .68rem/1 var(--font-ui); font-style: normal; letter-spacing: .09em; color: var(--text-muted); text-transform: uppercase; } .pdp h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); margin: .5rem 0; } .pdp__lead { color: var(--text-muted); font-size: var(--fs-400); } .pdp__meta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; } .pdp__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--card-border); border-radius: 999px; font-size: var(--fs-100); color: var(--text-muted); } .pdp__pill b { color: var(--x-white); } .price-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; } .price-table th, .price-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--divider); font-size: var(--fs-200); } .price-table th { background: var(--x-ink); color: var(--text-dim); font-size: var(--fs-100); letter-spacing: .1em; text-transform: uppercase; } .price-table td b { font-family: var(--font-brand); font-style: italic; color: var(--x-lime); } .price-table tr:last-child td { border-bottom: none; } .pdp__quote-box { background: var(--x-ink); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.4rem; margin: 1rem 0; } .pdp__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; } .specs-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .specs-table th, .specs-table td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-200); vertical-align: top; } .specs-table th { color: var(--text-dim); font-weight: 600; width: 40%; } .qty-calc { display: flex; gap: .6rem; align-items: center; margin: .6rem 0; flex-wrap: wrap; } .qty-calc input { width: 130px; } .qty-calc__out { font-size: var(--fs-200); color: var(--text-muted); } .qty-calc__out b { font-family: var(--font-brand); font-style: italic; color: var(--x-lime); font-size: var(--fs-400); } .pdp__pill--sample b { color: var(--x-lime); } [data-tier-price].is-discounted, [data-sample-price].is-discounted { color: var(--x-lime); } [data-tier-price] s, [data-sample-price] s { color: var(--text-dim); text-decoration-thickness: 1px; margin-right: .3rem; font-weight: 400; } /* Promo / discount code */ .pdp__promo { margin: 1.2rem 0 .4rem; padding: 1rem 1.1rem; border: 1px dashed var(--card-border); border-radius: var(--radius); background: rgba(255,255,255,.02); } .pdp__promo.is-applied { border-style: solid; border-color: rgba(173, 226, 38,.4); background: rgba(173, 226, 38,.05); } .pdp__promo-label { display: block; font-family: var(--font-heading); font-size: var(--fs-100); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .5rem; } .pdp__promo-row { display: flex; gap: .6rem; flex-wrap: wrap; } .pdp__promo-row .input { flex: 1; min-width: 160px; text-transform: uppercase; letter-spacing: .08em; } .pdp__promo-msg { margin: .55rem 0 0; font-size: var(--fs-200); min-height: 1.2em; } .pdp__promo-msg.is-ok { color: var(--x-lime); } .pdp__promo-msg.is-err { color: #ff6b6b; } /* WhatsApp + Save buttons */ .btn--wa { --btn-bg: #25D366; --btn-fg: #04210f; --btn-bd: #25D366; box-shadow: 0 6px 24px -8px rgba(37,211,102,.6); } .btn--wa:hover { --btn-bg: #2ee06f; } /* Pagination */ /* Clean, minimal pagination: First · Back · 1 2 3 … · Next · Last, pipe-separated. */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: clamp(2rem, 5vw, 3rem); } .pagination__num, .pagination__step { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .5rem; border-radius: 8px; font-family: var(--font-heading); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: var(--fs-200); color: var(--text-muted); transition: color var(--dur-fast), background var(--dur-fast); } .pagination__num { min-width: 2rem; } .pagination__num:hover, .pagination__step:hover { color: var(--x-white); } .pagination__num.is-active { color: var(--x-lime); background: rgba(173, 226, 38,.1); } .pagination__step.is-disabled { opacity: .35; pointer-events: none; } .pagination__sep { color: var(--text-dim); opacity: .5; user-select: none; } .pagination__dots { color: var(--text-dim); padding: 0 .1rem; } /* Catalogues (flipbook) */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 1.8rem; } .cat-card { position: relative; border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, #141613, #0c0d0b); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--x-lime), transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .cat-card:hover { transform: translateY(-8px); border-color: rgba(173, 226, 38,.45); box-shadow: 0 26px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(173, 226, 38,.22); } .cat-card:hover::before { opacity: 1; } .cat-card__cover { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; cursor: pointer; border: 0; padding: 0; background: #0c0d0b; } .cat-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .cat-card:hover .cat-card__cover img { transform: scale(1.06); } .cat-card__ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; padding: 1.6rem; background: radial-gradient(120% 80% at 50% 0%, rgba(173, 226, 38,.14), transparent 62%), #0c0d0b; } .cat-card__ph .brand { justify-content: center; } .cat-card__ph .brand__logo { height: 58px; width: auto; transition: transform var(--dur) var(--ease-out); } .cat-card:hover .cat-card__ph .brand__logo { transform: translateY(-4px) scale(1.06); } .cat-card__ph span { display: block; width: 100%; text-align: center; font-family: var(--font-heading); font-size: var(--fs-400); text-transform: uppercase; letter-spacing: .05em; color: var(--x-white); } .cat-card__open { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem; font-family: var(--font-heading); font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; color: #0a0a0a; background: var(--x-lime); opacity: 0; transform: translateY(100%); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .cat-card:hover .cat-card__open, .cat-card__cover:focus-visible .cat-card__open { opacity: 1; transform: translateY(0); } .cat-card__body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .5rem; } .cat-card__body h3 { font-size: var(--fs-400); } .cat-card__body p { color: var(--text-muted); font-size: var(--fs-200); } .cat-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; } .flip-modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: flex; flex-direction: column; } .flip-modal[hidden] { display: none; } .flip-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--divider); } .flip-modal__title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .06em; } .flip-modal__actions { display: flex; align-items: center; gap: .6rem; } .flip-modal__close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--card-border); font-size: 1.1rem; color: var(--x-white); } .flip-modal__close:hover { border-color: var(--x-lime); color: var(--x-lime); } .flip-modal__stage { flex: 1; padding: 1rem; } .flip-modal__stage iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); background: #fff; } /* Manufacturing / factory gallery */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.2rem; } .gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); background: linear-gradient(160deg, #141613, #0c0d0b); margin: 0; } .gallery-item img, .gallery-item video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .gallery-item__dl { position: absolute; top: .7rem; right: .7rem; padding: .5rem .8rem; font-size: var(--fs-100); } .gallery-item figcaption { padding: .85rem 1rem; display: grid; gap: .2rem; } .gallery-item figcaption strong { font-family: var(--font-heading); font-size: var(--fs-300); } .gallery-item figcaption span { color: var(--text-muted); font-size: var(--fs-200); } .pdp__save { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; } .btn--save { --btn-bg: transparent; --btn-fg: var(--x-white); --btn-bd: rgba(255,255,255,.25); display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; font-size: var(--fs-200); } .btn--save:hover { --btn-bd: var(--x-lime); --btn-fg: var(--x-lime); } .pdp__save-hint { font-size: var(--fs-100); color: var(--text-dim); } @media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .pdp__gallery { position: static; } } /* Media frame — reusable image container that looks premium even when empty */ .media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); aspect-ratio: var(--mf-ratio, 4/3); background: radial-gradient(120% 120% at 30% 0%, rgba(173, 226, 38,.1), transparent 55%), linear-gradient(155deg, var(--x-ink-2), #050505); } .media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .media-frame:hover img { transform: scale(1.05); } .media-frame__ph { position: absolute; inset: 0; display: grid; place-items: center; } .media-frame__ph svg { width: 34%; max-width: 90px; opacity: .45; } .media-frame__badge { position: absolute; top: .85rem; left: .85rem; z-index: 2; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-100); font-weight: 700; color: #0a0a0a; background: var(--x-lime); padding: .3rem .65rem; border-radius: 999px; } .media-frame__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.1rem .95rem; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-200); } .media-frame__cap small { display: block; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); font-size: var(--fs-100); margin-top: .15rem; } /* Prose + tick list */ .prose h2 { margin-bottom: .2rem; } .prose p { color: var(--text-muted); } .tick-list { display: grid; gap: .7rem; list-style: none; padding: 0; margin: 0; } /* Flex layout so the tick badge and the text can never overlap, at any font size */ .tick-list li { position: relative; display: flex; align-items: flex-start; gap: .7rem; padding-left: 0; color: var(--text-muted); } .tick-list li::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; margin-top: .12em; border-radius: 6px; background: rgba(173, 226, 38,.14); border: 1px solid rgba(173, 226, 38,.3); } .tick-list li::after { content: ""; position: absolute; left: 7px; top: .5em; width: 8px; height: 4px; border-left: 2px solid var(--x-lime); border-bottom: 2px solid var(--x-lime); transform: rotate(-45deg); } /* Split banner (image + copy) */ .banner-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } /* Grid items default to min-width:auto, so a long heading would widen the whole track instead of wrapping. */ .banner-split > *, .section-head, .hero__inner { min-width: 0; } .banner-split .media-frame { --mf-ratio: 5/4; } @media (max-width: 820px) { .banner-split { grid-template-columns: 1fr; } } /* Feature / trust cards */ .feature { padding: var(--sp-6); border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--x-ink); } .feature__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(173, 226, 38,.1); color: var(--x-lime); margin-bottom: var(--sp-4); } .feature h3 { font-size: var(--fs-400); } .feature p { color: var(--text-muted); font-size: var(--fs-200); margin-top: .5rem; } /* --- Stats --- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--gutter); } .stat { text-align: left; padding: var(--sp-5) 0; border-top: 2px solid var(--x-lime); } .stat__value { font-family: var(--font-brand); font-style: italic; font-size: var(--fs-700); line-height: 1; color: var(--x-white); } .stat__label { color: var(--text-muted); font-size: var(--fs-200); margin-top: .5rem; } /* --- Process timeline --- */ .timeline { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); counter-reset: step; } .timeline__step { position: relative; padding: var(--sp-5); border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--x-ink); } .timeline__step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-style: italic; color: var(--x-lime); font-size: var(--fs-400); } .timeline__step h4 { margin-top: .5rem; } .timeline__step p { color: var(--text-muted); font-size: var(--fs-200); margin-top: .3rem; } /* --- CTA band --- */ .cta-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem); background: radial-gradient(700px 400px at 85% 20%, rgba(173, 226, 38,.16), transparent 60%), var(--x-ink-2); border: 1px solid var(--card-border); text-align: center; } .cta-band h2 { max-width: 22ch; margin-inline: auto; } .cta-band .hero__cta { justify-content: center; } /* --- FAQ (accordion) --- */ .faq { max-width: 820px; } .faq__item { border-bottom: 1px solid var(--divider); } .faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.3rem 0; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-400); } .faq__q .faq__plus { flex: none; width: 24px; height: 24px; position: relative; } .faq__q .faq__plus::before, .faq__q .faq__plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--x-lime); transition: transform var(--dur) var(--ease-out); } .faq__q .faq__plus::before { width: 14px; height: 2px; } .faq__q .faq__plus::after { width: 2px; height: 14px; } .faq__item[open] .faq__plus::after { transform: rotate(90deg); opacity: 0; } .faq__a { padding-bottom: 1.3rem; color: var(--text-muted); max-width: 68ch; } details.faq__item summary { list-style: none; cursor: pointer; } details.faq__item summary::-webkit-details-marker { display: none; } /* --- Catalog layout with left menu --- */ .catalog-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start; } .catalog-side { position: sticky; top: calc(var(--header-h) + 1rem); background: linear-gradient(180deg, #101110, var(--x-ink)); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px -30px rgba(0,0,0,.9); } /* sporty top accent bar */ .catalog-side::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--x-lime), transparent 70%); } .catalog-side__head { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.15rem; border-bottom: 1px solid var(--divider); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .16em; font-size: var(--fs-100); color: var(--text-dim); font-weight: 700; } .catalog-side__all { font-family: var(--font-heading); font-weight: 700; letter-spacing: .06em; color: var(--text-muted); padding: .2rem .6rem; border: 1px solid var(--card-border); border-radius: 999px; font-size: var(--fs-100); transition: all var(--dur-fast); } .catalog-side__all.is-active, .catalog-side__all:hover { color: #0a0a0a; background: var(--x-lime); border-color: var(--x-lime); } /* Always-visible, smooth-scrolling category list with a clear lime scrollbar. */ .catalog-side__nav { padding: .5rem .35rem .5rem .5rem; max-height: min(66vh, 720px); overflow-y: scroll; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--x-lime) rgba(255,255,255,.07); } .catalog-side__nav::-webkit-scrollbar { width: 10px; } .catalog-side__nav::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 20px; margin: 4px 0; } .catalog-side__nav::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--x-lime), var(--x-lime-600, #8fc21f)); border-radius: 20px; min-height: 44px; } .catalog-side__nav::-webkit-scrollbar-thumb:hover { background: var(--x-lime); } .catalog-cat { border-radius: var(--radius-sm); } .catalog-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem; border-radius: var(--radius-sm); } .catalog-cat > summary::-webkit-details-marker { display: none; } .catalog-cat__link { position: relative; flex: 1; padding: .68rem .8rem .68rem .9rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-200); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-fast), background var(--dur-fast), padding-left var(--dur-fast); } /* lime indicator bar */ .catalog-cat__link::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; border-radius: 2px; background: var(--x-lime); transition: transform var(--dur) var(--ease-out); } .catalog-cat__link:hover { color: var(--x-white); background: rgba(255,255,255,.04); padding-left: 1.05rem; } .catalog-cat__link:hover::before { transform: translateY(-50%) scaleY(1); } .catalog-cat__link.is-active { color: var(--x-lime); background: linear-gradient(90deg, rgba(173, 226, 38,.14), rgba(173, 226, 38,.02)); } .catalog-cat__link.is-active::before { transform: translateY(-50%) scaleY(1); } .catalog-cat__caret { width: 30px; height: 30px; flex: none; position: relative; } .catalog-cat__caret::before, .catalog-cat__caret::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 2px; background: var(--text-dim); transition: transform var(--dur), background var(--dur); } .catalog-cat__caret::before { transform: translate(-70%, -50%) rotate(45deg); } .catalog-cat__caret::after { transform: translate(-10%, -50%) rotate(-45deg); } .catalog-cat[open] .catalog-cat__caret::before, .catalog-cat[open] .catalog-cat__caret::after { background: var(--x-lime); } .catalog-cat[open] .catalog-cat__caret::before { transform: translate(-70%, -50%) rotate(-45deg); } .catalog-cat[open] .catalog-cat__caret::after { transform: translate(-10%, -50%) rotate(45deg); } .catalog-subs { padding: .1rem .3rem .6rem 1.1rem; border-left: 2px solid rgba(173, 226, 38,.18); margin-left: 1.05rem; } .catalog-subs a { position: relative; display: block; padding: .44rem .7rem; border-radius: var(--radius-sm); font-size: var(--fs-100); letter-spacing: .01em; color: var(--text-dim); transition: color var(--dur-fast), background var(--dur-fast), padding-left var(--dur-fast); } .catalog-subs a:hover { color: var(--x-white); background: rgba(255,255,255,.04); padding-left: 1rem; } .catalog-subs a.is-active { color: #0a0a0a; background: var(--x-lime); font-weight: 700; box-shadow: 0 4px 14px -6px var(--x-lime-glow); } .catalog-side__cta { padding: 1.1rem; border-top: 1px solid var(--divider); background: linear-gradient(180deg, transparent, rgba(173, 226, 38,.03)); } .catalog-side__cta p { font-size: var(--fs-100); color: var(--text-muted); margin-bottom: .7rem; } .catalog-main { min-width: 0; } .catalog-main__head { margin-bottom: var(--sp-5); } .catalog-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--divider); } .catalog-count { font-size: var(--fs-200); color: var(--text-muted); } @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-side { position: static; top: auto; max-height: none; } .catalog-side__nav { max-height: 320px; } } /* Chips */ .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--card-border); font-family: var(--font-heading); font-size: var(--fs-100); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); transition: all var(--dur-fast); } .chip:hover, .chip.is-active { color: #0a0a0a; background: var(--x-lime); border-color: var(--x-lime); } /* --- Breadcrumb --- */ .breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-100); color: var(--text-dim); padding-block: 1rem; } .breadcrumb a:hover { color: var(--x-lime); } .breadcrumb .sep { opacity: .5; } /* --- Forms --- */ .field { display: block; margin-bottom: var(--sp-4); } .field > label { display: block; font-size: var(--fs-200); font-weight: 600; margin-bottom: .4rem; color: var(--text-muted); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-row .field { margin-bottom: 0; } .form-row + .field, .form-row + .form-row { margin-top: var(--sp-4); } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; gap: 0; } .form-row .field { margin-bottom: var(--sp-4); } } .input--file { padding: .7rem 1rem; cursor: pointer; font-size: var(--fs-200); color: var(--text-muted); } .input--file::file-selector-button { margin-right: .8rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--card-border); background: rgba(173, 226, 38,.1); color: var(--x-lime); font-family: var(--font-heading); font-size: var(--fs-100); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .input--file::file-selector-button:hover { background: var(--x-lime); color: #0a0a0a; } /* Copy on the left, quote form on the right — ONE column on tablet/phone. This used to be an inline `grid-template-columns:1.1fr .9fr` with no media query, so on a phone the form column stayed beside the heading, could not shrink past its inputs, and shoved half the page off the right edge. */ .contact-layout { grid-template-columns: 1.1fr .9fr; align-items: start; gap: clamp(2rem, 5vw, 4rem); } .contact-layout > * { min-width: 0; } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .contact-pref { display: flex; flex-wrap: wrap; gap: .5rem; } .contact-pref__opt { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; padding: .5rem .9rem; border: 1px solid var(--card-border); border-radius: 999px; font-size: var(--fs-200); color: var(--text-muted); transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .contact-pref__opt:hover { border-color: var(--x-lime); color: var(--x-white); } .contact-pref__opt input { accent-color: var(--x-lime); } .contact-pref__opt:has(input:checked) { border-color: var(--x-lime); background: rgba(173, 226, 38,.1); color: var(--x-white); } .contact-map { margin-top: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); } .contact-map iframe { width: 100%; height: clamp(320px, 40vw, 460px); border: 0; display: block; filter: grayscale(.2) contrast(1.05); } .input, .textarea, .select { width: 100%; padding: .85rem 1rem; background: var(--x-ink); color: var(--x-white); border: 1px solid var(--card-border); border-radius: var(--radius-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--x-lime); box-shadow: 0 0 0 3px rgba(173, 226, 38,.18); } .textarea { min-height: 140px; resize: vertical; } /* --- Footer --- */ .site-footer { border-top: 1px solid var(--divider); background: var(--x-ink); padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-9); } .footer-news { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); border-bottom: 1px solid var(--divider); } .footer-news h3 { margin-top: .3rem; } .footer-news__form { display: flex; gap: .6rem; flex: 1; min-width: min(100%, 280px); max-width: 460px; } .footer-news__form .input { flex: 1; } @media (max-width: 560px) { .footer-news__form { flex-direction: column; } .footer-news__form .btn { width: 100%; } } .footer-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1.6fr 1.9fr 1fr 1fr 1fr; } /* Products column carries the full live category list — flow it into 2 sub-columns. */ .footer-col--cats { min-width: 0; } .footer-col--cats h5 { column-span: all; } .footer-col--cats > a { break-inside: avoid; } @supports (column-count: 2) { .footer-col--cats { column-count: 2; column-gap: 1.6rem; } } .footer-brand p { color: var(--text-muted); font-size: var(--fs-200); margin-top: var(--sp-4); max-width: 34ch; } .footer-col h5 { font-size: var(--fs-100); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--sp-4); } .footer-col a { display: block; padding: .35rem 0; color: var(--text-muted); font-size: var(--fs-200); transition: color var(--dur-fast); } .footer-col a:hover { color: var(--x-lime); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); align-items: center; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--divider); color: var(--text-dim); font-size: var(--fs-100); } .footer-credit { display: block; margin-top: .3rem; color: var(--text-dim); } .footer-credit a { color: var(--text-muted); font-weight: 600; letter-spacing: .04em; transition: color var(--dur-fast); } .footer-credit a:hover { color: var(--x-lime); } .socials { display: flex; gap: .55rem; flex-wrap: wrap; } .socials a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--card-border); color: var(--text-muted); transition: color var(--dur-fast), border-color var(--dur-fast); } .socials a:hover { color: var(--x-lime); border-color: var(--x-lime); } /* Contact row: phone + email on the left, social icons on the front-right. */ .footer-contact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--sp-4); } .footer-contact__nap { display: flex; flex-direction: column; gap: .25rem; } .socials--footer { margin-top: 0; } /* --- Social / media wall --- */ .social-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gutter); } .social-card { border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--x-ink); } .social-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--divider); } .social-card__embed { padding: .5rem; overflow-x: auto; } .social-card__embed iframe, .social-card__embed blockquote { max-width: 100% !important; } .social-card__link { display: grid; gap: 1rem; place-items: center; padding: 2.6rem 1rem; text-align: center; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); transition: color var(--dur-fast), background var(--dur-fast); } .social-card__link:hover { color: var(--x-lime); background: rgba(173, 226, 38,.04); } .social-card__ph svg { width: 46px; height: 46px; } /* --- WhatsApp float (brand-themed pill, expands on hover) --- */ .wa-float { position: fixed; right: clamp(16px, 3vw, 26px); bottom: clamp(16px, 3vw, 26px); z-index: 80; display: inline-flex; align-items: center; gap: 0; padding: 7px; border-radius: 999px; background: rgba(12,12,12,.82); border: 1px solid rgba(173, 226, 38,.35); color: var(--x-white); backdrop-filter: blur(10px); box-shadow: 0 14px 40px -12px rgba(0,0,0,.7), 0 0 0 4px rgba(173, 226, 38,.06); transition: gap var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-out); } .wa-float__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--x-lime); color: #0a0a0a; box-shadow: 0 0 18px -2px var(--x-lime-glow); } .wa-float__icon svg { width: 24px; height: 24px; } .wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-100); opacity: 0; transition: max-width var(--dur) var(--ease-out), opacity var(--dur), padding var(--dur); } .wa-float:hover { gap: 4px; border-color: var(--x-lime); transform: translateY(-2px); } .wa-float:hover .wa-float__label { max-width: 160px; opacity: 1; padding: 0 .8rem 0 .4rem; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(173, 226, 38,.4); animation: waPulse 2.6s var(--ease-out) infinite; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(173, 226, 38,.35); } 70%,100% { box-shadow: 0 0 0 16px rgba(173, 226, 38,0); } } body[data-motion="reduced"] .wa-float::before { animation: none; } /* Nudge WhatsApp up so the chatbot launcher sits below it */ .cbot ~ .wa-float, body:has(.cbot) .wa-float { bottom: calc(clamp(16px, 3vw, 26px) + 70px); } /* --- Ask XTRAVIGOR chatbot --- */ .cbot { position: fixed; right: clamp(16px, 3vw, 26px); bottom: clamp(16px, 3vw, 26px); z-index: 85; } .cbot__launch { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--x-lime); color: #0a0a0a; box-shadow: 0 14px 40px -12px rgba(0,0,0,.7), 0 0 22px -4px var(--x-lime-glow); transition: transform var(--dur) var(--ease-out); } .cbot__launch:hover { transform: translateY(-2px) scale(1.05); } .cbot__launch svg { width: 26px; height: 26px; } .cbot__launch-close { display: none; } .cbot.is-open .cbot__launch-open { display: none; } .cbot.is-open .cbot__launch-close { display: block; } .cbot__panel { position: absolute; bottom: 70px; right: 0; width: min(370px, calc(100vw - 32px)); height: min(560px, 70vh); display: flex; flex-direction: column; background: var(--x-ink-2); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: cbotIn .3s var(--ease-out); } @keyframes cbotIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .cbot__head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--divider); background: radial-gradient(200px 80px at 90% 0%, rgba(173, 226, 38,.12), transparent 70%); } .cbot__mark { width: 34px; height: 34px; border-radius: 9px; background: #0a0a0a; display: grid; place-items: center; flex: none; } .cbot__mark svg { width: 22px; height: 22px; } .cbot__head b { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-300); display: block; } .cbot__head small { color: var(--text-dim); font-size: var(--fs-100); } .cbot__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; } .cbot__msg { max-width: 85%; padding: .65rem .85rem; border-radius: 14px; font-size: var(--fs-200); line-height: 1.5; } .cbot__msg a { color: var(--x-lime); text-decoration: underline; } .cbot__msg--bot { align-self: flex-start; background: var(--x-ink-3); border: 1px solid var(--card-border); border-bottom-left-radius: 4px; } .cbot__msg--user { align-self: flex-end; background: var(--x-lime); color: #0a0a0a; border-bottom-right-radius: 4px; } .cbot__msg--typing { color: var(--text-dim); letter-spacing: .2em; } .cbot__suggest { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; } .cbot__suggest button { font-family: var(--font-heading); font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .04em; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text-muted); transition: all var(--dur-fast); } .cbot__suggest button:hover { border-color: var(--x-lime); color: var(--x-lime); } .cbot__form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--divider); } .cbot__form input { flex: 1; padding: .7rem .9rem; background: var(--x-ink); color: var(--x-white); border: 1px solid var(--card-border); border-radius: 999px; } .cbot__form input:focus { outline: none; border-color: var(--x-lime); } .cbot__form button { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--x-lime); color: #0a0a0a; display: grid; place-items: center; } .cbot__form button svg { width: 20px; height: 20px; } /* --- Preloader --- */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--x-black); transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow); } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__logo { width: 90px; animation: pulseGlow 1.4s var(--ease-in-out) infinite; } .preloader__bar { position: absolute; bottom: 22%; width: min(240px, 60vw); height: 2px; background: var(--x-n-800); overflow: hidden; border-radius: 2px; } .preloader__bar i { position: absolute; inset: 0; width: 40%; background: var(--x-lime); animation: load 1.1s var(--ease-in-out) infinite; } @keyframes load { 0% { left: -40%; } 100% { left: 100%; } } @keyframes pulseGlow { 0%,100% { filter: drop-shadow(0 0 0 var(--x-lime-glow)); transform: scale(1); } 50% { filter: drop-shadow(0 0 22px var(--x-lime-glow)); transform: scale(1.05); } } /* --- Custom sports cursor --- */ .x-cursor, .x-cursor-dot { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; mix-blend-mode: difference; } .x-cursor { width: 34px; height: 34px; margin: -17px 0 0 -17px; transition: transform .18s var(--ease-out), opacity .2s; } .x-cursor svg { width: 100%; height: 100%; } .x-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--x-lime); border-radius: 50%; } .x-cursor.is-hover { transform: scale(1.6); } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } /* ------------------------------------------------------------------ * * 6. UTILITIES * ------------------------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .hide-mobile { } .flash { padding: .9rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: .8rem; font-weight: 600; border: 1px solid; } .flash--ok { background: rgba(173, 226, 38,.1); border-color: rgba(173, 226, 38,.4); color: var(--x-lime); } .flash--err { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.4); color: #f87171; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--x-lime); color: #000; padding: .6rem 1rem; z-index: 200; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } [hidden] { display: none !important; } /* Reveal-on-scroll. - No-JS: content is always visible (only hidden when html.js is set). - Baseline fallback: JS adds .in → CSS transitions it in. - Enhanced: GSAP controls inline styles; .js-enhanced disables CSS transition so the two never fight. */ html.js .reveal { opacity: 0; transform: translateY(24px); } .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in[data-delay="1"] { transition-delay: .08s; } .reveal.in[data-delay="2"] { transition-delay: .16s; } .reveal.in[data-delay="3"] { transition-delay: .24s; } .reveal.in[data-delay="4"] { transition-delay: .32s; } .js-enhanced .reveal { transition: none !important; } /* 3D hero canvas (mounted by Three.js over the CSS fallback) */ .hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; } .hero__bg .hero__grid { z-index: 0; } /* Cursor pressed state */ .x-cursor.is-down { transform: scale(0.8); } .x-cursor.is-hover svg path { fill: rgba(173, 226, 38,0.22); } /* ------------------------------------------------------------------ * * 7. MOTION / ACCESSIBILITY / RESPONSIVE * ------------------------------------------------------------------ */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 980px) { .hero__layout { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); } .hero__visual { aspect-ratio: 16/10; max-height: 300px; order: 2; } .hero__inner { max-width: none; } } @media (max-width: 900px) { :root { --header-h: 66px; } .nav, .header-actions .btn--quote { display: none; } .nav-toggle { display: inline-flex; } .hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.8)); } .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 2.5rem; } } @media (max-width: 560px) { .hero__visual { display: none; } .hero__meta { gap: .8rem 1.4rem; } .hero__meta div { min-width: 74px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .hero { min-height: 88vh; } .btn { width: 100%; justify-content: center; } .hero__cta .btn { width: auto; } } /* Reduced motion + explicit motion toggle */ @media (prefers-reduced-motion: reduce) { /* !important: must outrank html:not(.js-enhanced) above, which is more specific and would otherwise win even under reduced motion. */ html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .marquee__track { animation: none; } .reveal { opacity: 1; transform: none; } } body[data-motion="reduced"] .marquee__track { animation: none; } body[data-motion="reduced"] .reveal { opacity: 1; transform: none; transition: none; } body[data-motion="reduced"] .hero__bg canvas { display: none; } /* Touch: no custom cursor */ @media (hover: none) { .x-cursor, .x-cursor-dot { display: none !important; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; } }