/* Fonts are loaded with + stylesheet in each page . Keeping them out of an @import avoids a render-blocking CSS -> font waterfall. */ :root { --bg: #070b14; --bg-deep: #0a0f1f; --surface: #101827; --surface-2: #182333; --line: rgba(148, 178, 225, 0.14); --text: #eaf2ff; --muted: #8d9bb2; --blue: #0066ff; --cyan: #00d1ff; --radius: 22px; --radius-sm: 14px; --shadow: 0 24px 80px rgba(0, 0, 0, 0.34); --container: 1160px; /* Spacing scale — use these instead of one-off pixel values. */ --space-1: 8px; --space-2: 14px; --space-3: 22px; --space-4: 34px; --space-5: 52px; --space-6: 72px; --space-7: 104px; --gutter: 20px; /* Type scale — descending by page importance: home hero > page hero > product title > section heading. */ --step-hero: clamp(2.9rem, 6.4vw, 5.6rem); --step-page: clamp(2.4rem, 4.8vw, 3.9rem); --step-product: clamp(2.1rem, 3.6vw, 3.1rem); --step-h2: clamp(1.9rem, 3.2vw, 2.9rem); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); background: radial-gradient(circle at 74% 5%, rgba(0, 102, 255, 0.11), transparent 27rem), radial-gradient(circle at 14% 28%, rgba(0, 209, 255, 0.055), transparent 23rem), var(--bg); font-family: "Inter", system-ui, sans-serif; line-height: 1.6; min-height: 100vh; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.16; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 75%); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button { color: inherit; } code { color: #b7ddff; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 7px; padding: .1rem .35rem; } .container { width: min(calc(100% - (var(--gutter) * 2)), var(--container)); margin-inline: auto; } .section { padding: var(--space-7) 0; } .section--tight { padding: var(--space-6) 0; } h1, h2, h3 { font-family: "Montserrat", system-ui, sans-serif; line-height: 1.08; letter-spacing: -0.035em; margin: 0; } h1 { font-size: var(--step-hero); } h2 { font-size: var(--step-h2); } h3 { font-size: 1.25rem; } p { margin: 0; } .lead { color: #aab7ca; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 690px; } .muted { color: var(--muted); } .eyebrow { color: #78caff; text-transform: uppercase; letter-spacing: .19em; font-size: .73rem; font-weight: 700; } /* End stop stays light enough to stay legible on the dark background even when the phrase is long and the tail lands at 100%. */ .gradient-text { background: linear-gradient(100deg, #fff 8%, #9ee6ff 46%, #4da2ff 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(7,11,20,.78); backdrop-filter: blur(18px); } .navbar { min-height: 76px; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: -.03em; } .brand img { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(0, 209, 255, .14); } .brand strong span { color: #1885ff; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; } .nav-links > a:not(.button) { position: relative; color: #a8b4c7; font-size: .92rem; transition: color .2s ease; } .nav-links > a:hover { color: white; } /* Active page marker — a short cyan underline under the current link. */ .nav-links > a[aria-current="page"] { color: #fff; } .nav-links > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); } .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .nav-toggle:hover { border-color: rgba(0, 209, 255, .3); } .button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: .92rem; /* Buttons share the row via flex:1 on mobile; without this the trailing arrow wraps onto its own line and the button looks broken. */ white-space: nowrap; border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } .button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .button:hover { transform: translateY(-2px); } .button--primary { background: linear-gradient(135deg, var(--blue), #0f8dff); border-color: rgba(0, 157, 255, .62); box-shadow: 0 14px 34px rgba(0, 102, 255, .22); } .button--primary:hover { box-shadow: 0 18px 42px rgba(0, 102, 255, .3); } .button--secondary { background: rgba(255,255,255,.035); } .button--secondary:hover { border-color: rgba(0,209,255,.35); } .hero { min-height: 680px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: var(--space-5); padding: var(--space-6) 0 var(--space-7); } .hero-copy { position: relative; z-index: 2; } .hero h1 { max-width: 820px; } .hero .lead { margin-top: var(--space-3); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); } .hero-proof { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); color: #8190a6; font-size: .84rem; } .hero-proof span::before { content: "✦"; color: var(--cyan); margin-right: 8px; } .hero-art { position: relative; display: grid; place-items: center; } .hero-art::before { content: ""; position: absolute; width: min(560px, 96%); aspect-ratio: 1 / .82; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,102,255,.24), rgba(0,209,255,.07) 40%, transparent 72%); filter: blur(16px); } /* The emblem PNG is a 1254x1254 opaque square: a pure-black ground, the emblem on rows 179-788, and the wordmark + tagline baked in from row 840 down. Three things happen here. 1. object-fit crops to rows 55-818, so the wordmark is not repeated under the header wordmark and the hero eyebrow. 2. mix-blend-mode: screen cancels the black ground against the page background, so no square plate shows. 3. The artwork's ambient glow never returns to pure black at the top and bottom of the crop, which leaves a faint horizontal seam once screened. The mask feathers those two edges out. The 16%/95% stops sit just outside the emblem, so no artwork is clipped. Do not put opacity, transform or `isolation` on an ancestor: those create a stacking context, which isolates the blend group and brings the black plate back. */ .hero-logo { position: relative; z-index: 1; width: min(560px, 100%); height: auto; aspect-ratio: 1254 / 763; object-fit: cover; object-position: 50% 11%; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 95%, transparent 100%); } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .section-heading p { max-width: 560px; color: var(--muted); } /* Optically settle the supporting text onto the heading's baseline instead of its box edge, which drifts once the text wraps. */ .section-heading > p, .section-heading > .text-link { padding-bottom: .35rem; } .category-grid, .benefit-grid, .product-grid { display: grid; gap: var(--space-2); } .category-grid, .benefit-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .product-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .panel, .category-card, .benefit-card, .product-card, .info-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,28,45,.78), rgba(10,15,31,.82)); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } .category-card, .benefit-card { padding: var(--space-3); min-height: 190px; } .category-icon, .benefit-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; margin-bottom: var(--space-4); background: rgba(0,102,255,.11); border: 1px solid rgba(0,209,255,.16); color: #8ce7ff; } .category-card p, .benefit-card p { color: var(--muted); margin-top: var(--space-1); font-size: .94rem; } /* The whole card is the link, so the hit area is the card on touch, not just the small "View product" text. */ .product-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .product-card:hover { transform: translateY(-5px); border-color: rgba(0,209,255,.22); box-shadow: 0 26px 70px rgba(0,0,0,.2); } .product-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .product-visual { height: 190px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, rgba(0,102,255,.22), transparent 28%), linear-gradient(145deg, rgba(0,209,255,.035), rgba(0,102,255,.055)), #090f1b; border-bottom: 1px solid var(--line); } .product-visual::before { content: ""; position: absolute; width: 270px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,209,255,.6), transparent); transform: rotate(-22deg); box-shadow: 0 0 18px rgba(0,209,255,.5); } .product-orbit { width: 115px; height: 115px; position: absolute; border: 1px solid rgba(0,209,255,.25); border-radius: 50%; box-shadow: 0 0 40px rgba(0,102,255,.13); } .product-orbit::after { content: ""; position: absolute; inset: 48% -32%; border: 2px solid rgba(0,122,255,.55); border-radius: 50%; transform: rotate(-17deg); } .product-glyph { z-index: 2; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 2.1rem; color: white; text-shadow: 0 0 24px rgba(0,209,255,.5); } .product-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; } .product-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); font-size: .78rem; } .badge { display: inline-flex; width: fit-content; padding: 6px 10px; color: #8fe9ff; border: 1px solid rgba(0,209,255,.17); background: rgba(0,209,255,.055); border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; font-weight: 800; } .product-card h3 { font-size: 1.28rem; } .product-card p { color: var(--muted); margin-top: var(--space-1); font-size: .92rem; } /* margin-top:auto pins the price row to the bottom of every card, so the price line stays level across a row whatever the description length. */ .product-card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); } .product-card:hover .text-link { color: #fff; } .price { font-family: "Montserrat", sans-serif; font-size: 1.2rem; font-weight: 800; } .price small { color: var(--muted); font: 500 .72rem "Inter", sans-serif; margin-left: 3px; } .text-link { color: #8ddfff; font-size: .84rem; font-weight: 700; transition: color .2s ease; } a.text-link:hover { color: #fff; } .band { border-block: 1px solid var(--line); background: rgba(9,14,26,.58); } .faq-list { max-width: 820px; margin: var(--space-4) auto 0; } .faq-item { border-bottom: 1px solid var(--line); } .faq-question { width: 100%; padding: var(--space-3) 0; display: flex; gap: var(--space-3); justify-content: space-between; text-align: left; background: none; border: 0; font-weight: 700; cursor: pointer; transition: color .2s ease; } .faq-question:hover { color: #fff; } .faq-question span:last-child { color: var(--cyan); transition: transform .2s ease; } /* 0fr -> 1fr animates to the answer's real height, so long answers are never silently clipped the way a fixed max-height clips them. */ .faq-answer { display: grid; grid-template-rows: 0fr; color: var(--muted); transition: grid-template-rows .28s ease; } .faq-answer > * { overflow: hidden; min-height: 0; /* Collapsed answers stay out of the Tab order: their links would otherwise be focusable while invisible. The delay keeps the text visible until the closing animation finishes. */ visibility: hidden; transition: visibility 0s linear .28s; } /* Padding only while open — on a collapsed 0fr row it would still take up its own height and leave a gap under every closed question. */ .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } .faq-item.is-open .faq-answer > * { padding-bottom: var(--space-3); visibility: visible; transition-delay: 0s; } .faq-item.is-open .faq-question span:last-child { transform: rotate(45deg); } .cta-panel { min-height: 320px; position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; padding: var(--space-5) var(--space-3); } .cta-panel::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(0,102,255,.2), transparent 68%); top: -300px; left: 50%; transform: translateX(-50%); } .cta-panel > div { position: relative; z-index: 1; } .cta-panel p { color: var(--muted); margin: var(--space-2) auto var(--space-3); } .site-footer { border-top: 1px solid var(--line); padding: var(--space-5) 0; color: var(--muted); } .footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: .86rem; } .footer-links a { transition: color .2s ease; } .footer-links a:hover { color: #fff; } .footer-tagline { font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; } .page-hero { padding: var(--space-6) 0 var(--space-4); } /* The page hero already provides the separation; a full section pad on top of it opens a ~100px hole above the filter bar. */ .page-hero + .section--tight { padding-top: var(--space-3); } .page-hero h1 { font-size: var(--step-page); margin-top: var(--space-1); } .page-hero .lead { margin-top: var(--space-2); } .filter-bar { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); } .filter-button { cursor: pointer; color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 999px; padding: 9px 16px; transition: color .2s ease, background .2s ease, border-color .2s ease; } .filter-button:hover { color: #fff; border-color: rgba(0,209,255,.28); } .filter-button.is-active { color: white; background: rgba(0,102,255,.16); border-color: rgba(0,126,255,.36); } .filter-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .product-page { padding: var(--space-6) 0 var(--space-7); } .product-page__top { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-6); align-items: center; } .product-copy { display: flex; flex-direction: column; align-items: flex-start; } .product-copy .badge { margin: var(--space-3) 0 var(--space-2); } /* A product title sits below the home and shop headlines in the hierarchy — it is a detail page, not a marketing hero. */ .product-copy h1 { font-size: var(--step-product); } .product-copy .lead { margin-top: var(--space-3); } .back-link { display: inline-flex; transition: color .2s ease; } .back-link:hover { color: white; } .purchase-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .price--large { font-size: 1.8rem; } .checkout-note { margin-top: var(--space-2); color: #69778d; font-size: .78rem; } .product-showcase { min-height: 500px; position: relative; display: grid; place-items: center; border-radius: 32px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(circle, rgba(0,102,255,.17), transparent 32%), #090f1b; } .product-showcase::before { content:""; position:absolute; width:90%; height:1px; background:linear-gradient(90deg,transparent,rgba(0,209,255,.55),transparent); transform:rotate(-22deg); box-shadow:0 0 28px rgba(0,209,255,.4); } .product-showcase__glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(0,102,255,.16); filter: blur(50px); } .product-showcase__ring { position: absolute; width: 240px; height: 110px; border: 3px solid rgba(0,124,255,.45); border-radius: 50%; transform: rotate(-18deg); } .product-showcase__icon { z-index: 2; width: 150px; height: 150px; border-radius: 38px; display: grid; place-items: center; font: 800 3.4rem "Montserrat", sans-serif; background: linear-gradient(145deg, rgba(0,102,255,.24), rgba(0,209,255,.06)); border: 1px solid rgba(0,209,255,.22); box-shadow: 0 30px 80px rgba(0,75,255,.18); } .product-info-grid { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); } .info-card { padding: var(--space-3); } .info-card h2 { font-size: 1.35rem; margin: var(--space-1) 0 var(--space-3); } .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; color: var(--muted); font-size: .9rem; } .check-list li::before { content: "✓"; color: var(--cyan); margin-right: 10px; } .changelog { margin-top: var(--space-2); padding: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .changelog h2 { font-size: 1.3rem; margin-top: 7px; } .changelog p { color: var(--muted); max-width: 620px; } /* The hidden state is scoped to .js, which an inline script in each sets. If scripts are blocked or fail, nothing is ever hidden — without this, a broken main.js leaves half the storefront permanently invisible. */ .reveal { transition: opacity .6s ease, transform .6s ease; /* --i is set per card so a row fades in as a short sequence, not a block. */ transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal { opacity: 0; transform: translateY(14px); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .js .reveal { opacity: 1; transform: none; } } /* Tablet band: two columns, and a trailing odd card fills the row so a three-item catalog does not end on a lonely half-width card. */ @media (min-width: 621px) and (max-width: 1023px) { .category-grid, .benefit-grid, .product-grid, .product-info-grid { grid-template-columns: repeat(2, 1fr); } .category-grid > :last-child:nth-child(odd), .benefit-grid > :last-child:nth-child(odd), .product-grid > :last-child:nth-child(odd), .product-info-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 900px) { .nav-toggle { display: grid; place-items: center; } .nav-links { display: none; position: absolute; top: 76px; left: var(--gutter); right: var(--gutter); padding: var(--space-3); gap: var(--space-3); flex-direction: column; align-items: stretch; background: rgba(10,15,31,.97); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } .nav-links.is-open { display: flex; } .nav-links .button { width: 100%; } /* The underline marker does not read in a stacked menu. */ .nav-links > a[aria-current="page"]::after { display: none; } .nav-links > a[aria-current="page"] { color: var(--cyan); } /* Stop the page scrolling behind the open menu. */ body.nav-open { overflow: hidden; } .hero { grid-template-columns: 1fr; padding: var(--space-4) 0 var(--space-6); min-height: auto; gap: var(--space-4); } /* Emblem stays above the headline, but small enough that the headline and both buttons still land in the first screen. */ .hero-art { order: -1; } .hero-logo { width: min(420px, 82vw); } .product-page__top { grid-template-columns: 1fr; gap: var(--space-4); } .product-showcase { min-height: 410px; } } @media (max-width: 620px) { :root { --gutter: 16px; } .section { padding: var(--space-6) 0; } .section--tight { padding: var(--space-5) 0; } .navbar { min-height: 68px; } .nav-links { top: 68px; } .brand strong { font-size: .92rem; } .brand img { width: 38px; height: 38px; } .hero { padding-top: var(--space-3); } /* No 110%/max-width:none here — that overflowed the viewport and gave the whole site a few pixels of horizontal scroll on a phone. */ .hero-logo { width: min(340px, 78vw); } .hero-proof { gap: var(--space-1) var(--space-3); } .hero-actions .button { flex: 1; } .page-hero { padding: var(--space-5) 0 var(--space-3); } .section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .section-heading > p, .section-heading > .text-link { padding-bottom: 0; } .category-grid, .benefit-grid, .product-grid, .product-info-grid { grid-template-columns: 1fr; } .changelog { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .footer-row { flex-direction: column; align-items: flex-start; } .purchase-row { align-items: stretch; flex-direction: column; gap: var(--space-2); } .purchase-row .button { width: 100%; } .product-page { padding: var(--space-5) 0 var(--space-6); } .product-showcase { min-height: 330px; } } /* Terms / Privacy — a narrow long-form reading layout. */ .legal-page { padding: var(--space-6) 0 var(--space-7); } .legal { max-width: 760px; } .legal h1 { font-size: var(--step-page); margin-top: var(--space-2); } .legal .lead { margin-top: var(--space-2); } .legal-meta { margin-top: var(--space-2); color: var(--muted); font-size: .84rem; } .legal-body { margin-top: var(--space-5); display: grid; gap: var(--space-4); } .legal-body section { padding-top: var(--space-4); border-top: 1px solid var(--line); scroll-margin-top: 96px; /* keeps #anchors clear of the sticky header */ } .legal-body h2 { font-size: 1.3rem; letter-spacing: -.02em; } .legal-body p, .legal-body li { color: #aab7ca; font-size: .96rem; } .legal-body p { margin-top: var(--space-2); } .legal-body ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; display: grid; gap: 6px; } .legal-body strong { color: var(--text); } .legal-body a, .faq-answer a { color: #8ddfff; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; } .legal-body a:hover, .faq-answer a:hover { color: #fff; } @media (max-width: 620px) { .legal-page { padding: var(--space-5) 0 var(--space-6); } } /* Let `hidden` win over component display rules (e.g. .filter-bar is flex), so main.js can hide empty filters and sections with the attribute. */ [hidden] { display: none !important; } /* Shop or featured grid with no products (yet). */ .empty-state { grid-column: 1 / -1; padding: var(--space-5) var(--space-3); text-align: center; } .empty-state h3 { margin-top: var(--space-1); } .empty-state p { max-width: 520px; margin: var(--space-1) auto 0; color: var(--muted); } /* "Coming soon" stands in for "Buy now" until a product has a checkoutUrl. */ .button.is-disabled { cursor: default; color: var(--muted); } .button.is-disabled:hover { transform: none; border-color: var(--line); } /* The product-not-found page has no badge to space the heading. */ .product-copy .back-link + h1 { margin-top: var(--space-3); } /* Lists mistakes in js/products.js. Rendered only in a local preview — main.js never adds it on the live site — so it is deliberately loud. */ .dev-notice { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px dashed #f5b544; border-radius: var(--radius-sm); background: rgba(245, 181, 68, .08); color: #fde3b0; font-size: .9rem; } .dev-notice ul { margin: var(--space-1) 0; padding-left: 1.2rem; } .dev-notice code { color: #fde3b0; }