/* ============================================================ NOX // chatapp — landing page Design language: cyberpunk technical brutalism Inspired by Cyberpunk 2077 UI / Edgerunners / vintage VHS HUDs ============================================================ */ /* -------- Tokens -------- */ :root { /* surfaces */ --bg: #050510; --bg-elev: #0a0a18; --panel: #0e0e22; --panel-hi: #161635; --border: #1f1f3a; --border-hi: #303060; /* text — nudged brighter 2026-06-02 for legibility. The mono labels and lead paragraphs were riding too dark against the near-black bg (muted #5a5a7a failed WCAG AA on body text); these still read as "dim / muted" but are comfortably readable. */ --text: #eef1ff; --text-dim: #a6a6cc; --text-muted: #76768f; /* accents — cyan + orange is the cinematic complementary pair (CP2077 chrome HUDs) */ --cyan: #00e5ff; --orange: #ff6600; /* pure pumpkin orange — zero pink, unambiguous */ --yellow: #fcee0a; /* the Cyberpunk 2077 yellow */ --danger: #ff3864; --green: #3ff971; /* Readable-on-dark accent for TEXT (links, headings, hover states). Pure --cyan #00e5ff is the right neon for borders/backgrounds/glows but reads as eye-straining electric blue when used as text — users complained they couldn't read it. This mint-cyan sits in the same family (keeps the brand identity) but desaturated enough to avoid the fatigue. Keep --cyan for surfaces/borders, use --accent-text anywhere the cyan lands on background as a character. */ --accent-text: #a6ffe8; /* glows */ --glow-cyan: 0 0 12px rgba(0, 229, 255, 0.45), 0 0 32px rgba(0, 229, 255, 0.15); --glow-yellow: 0 0 12px rgba(252, 238, 10, 0.45), 0 0 32px rgba(252, 238, 10, 0.15); --glow-orange: 0 0 12px rgba(255, 102, 0, 0.55), 0 0 32px rgba(255, 102, 0, 0.18); /* radii / spacing */ --r-sm: 2px; --r-md: 4px; /* clip-path for the signature angular corner cut */ --clip-corner: polygon( 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px) ); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Anchor jumps glide instead of teleporting. Browsers respect the reduced-motion preference automatically when this is set. */ /* overflow-x: clip on the ROOT, not just body. `body { overflow-x: hidden }` alone doesn't contain horizontal overflow when is the scroll container — so decorative orbs / the wide compare table still pushed the page to ~627px at mobile widths. In LTR that just added a stray horizontal scroll; in RTL the scroll origin anchors to the right edge, which shoved the centered hero off-screen (Arabic hero looked cut off). `clip` stops the page scroll without creating a scroll container (so it won't break position:sticky), and the compare table keeps its OWN .compare-wrap overflow-x:auto, so nothing becomes unreachable. */ html { scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Anchor offset so #compare / #faq / #download / #roadmap targets land BELOW the sticky nav (44px tall + breathing room) instead of getting clipped under it. Applied broadly so any in-page anchor benefits. */ section[id], h2[id], h3[id] { scroll-margin-top: 64px; } /* Visible focus ring for keyboard users. Default browser focus rings are nearly invisible against the neon palette on a near-black bg — keyboard-nav users couldn't see where they were on the page. Using :focus-visible (NOT :focus) means mouse clicks don't show the ring, only keyboard navigation does — matches user expectation and avoids adding visual noise for pointer users. WCAG 2.4.7 Focus Visible. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="option"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, details:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; box-shadow: var(--glow-cyan); } /* Self-hosted webfonts (woff2 only). Was a Google Fonts @import — that * cost a third-party DNS lookup, third-party TLS handshake, and a * render-blocking CSS request before any glyph painted, plus leaked * the visitor's IP to Google on every page load. NOX's own privacy * promise demanded self-hosting. * * Files copied from @fontsource/* node_modules into packages/site/fonts/ * at build time. Only the weights actually used in styles are bundled * (Orbitron 500/700/900, Rajdhani 400-700, JetBrains Mono 400/500/700, * Cairo 400/500/700/900 in Arabic subset). * * font-display: swap — text paints with the system fallback while the * woff2 downloads, then re-renders. No FOIT. */ @font-face { font-family: 'Orbitron'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/orbitron-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Orbitron'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/orbitron-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Orbitron'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/orbitron-latin-900-normal.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/rajdhani-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/rajdhani-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/rajdhani-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Rajdhani'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/rajdhani-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Cairo'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/cairo-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Cairo'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/cairo-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Cairo'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/cairo-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Cairo'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/cairo-arabic-900-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } body { background: var(--bg); color: var(--text); font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 500; /* Bumped from 17px → 19px for a 10% UI-scale pass alongside the app * (packages/web reads its own font-size via html { font-size: 110% }). * Most marketing-site headings use absolute px so they don't cascade, * but every paragraph + nav link inherits this — the legibility win * is concentrated where the text density is highest. */ font-size: 19px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; } ::selection { background: var(--yellow); color: var(--bg); } /* Cursor spotlight removed 2026-04-26 (operator request). The cyan * radial-gradient dot tracking the mouse via mix-blend-mode: screen * was washing out body text on lighter sections of the page. * Companion JS handler (setupMouseSpotlight) and --mx / --my root * variables removed too — no orphaned wiring. */ /* -------- Background ambience -------- */ /* Static base wash + slow-drifting color orbs (the Linear/Stripe trick) */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at center, rgba(252, 238, 10, 0.022), transparent 60%); pointer-events: none; } .ambient-orb { position: fixed; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: -2; /* Same scroll-dim as .mouse-glow — the orbs sit behind body content, * and their soft halos still reduce contrast even at z-index -2 because * everything painted on top inherits a hint of their colour. Dimming * them past the hero gives body paragraphs flat dark backdrop to read * against. */ opacity: var(--scroll-dim, 1); will-change: transform, opacity; } .ambient-orb.cyan { width: 540px; height: 540px; background: rgba(0, 229, 255, 0.13); top: -120px; left: -160px; animation: orbDriftA 38s ease-in-out infinite; } .ambient-orb.orange { width: 460px; height: 460px; background: rgba(255, 122, 26, 0.10); bottom: -140px; right: -120px; animation: orbDriftB 44s ease-in-out infinite; } .ambient-orb.violet { width: 380px; height: 380px; background: rgba(0, 229, 255, 0.07); top: 35%; right: 15%; animation: orbDriftC 52s ease-in-out infinite; } /* -------- Gutter chrome (≥1280px viewports only) -------- */ /* Two decorative wordmark stencils run floor-to-ceiling in the left and right gutters, plus a sticky telemetry HUD on the right. Below 1280px the central column eats the gutter and these are hidden completely. Everything fades out via --scroll-dim to match the orbs/spotlight, so they never compete with body text once you're reading. */ /* Gutter wordmark stencils removed 2026-04-26 (designer review). * They were decorative-only and ate prime gutter real estate without * communicating anything functional. The right-gutter telemetry HUD * stays; that one shows real data + a roadmap shortcut. */ .telemetry { display: none; /* default hidden — enabled in the @media below */ } /* -------- Telemetry HUD (right gutter, ≥1440px) -------- */ /* Raised from min-width: 1280px to 1440px — at 1280-1380px viewports * the HUD (right:96px, width:220px starts at ~964px) overlapped the * hero tagline (max-width:820px ending ~1050px). 1440px gives the * hero clear room AND the gutter to host the HUD comfortably. */ @media (min-width: 1440px) { .telemetry { display: flex; flex-direction: column; gap: 14px; position: fixed; top: 62%; right: 96px; transform: translateY(-50%); width: 220px; /* Inner clickable elements (the roadmap phase links) opt back in via * pointer-events: auto on .tel-phase. The wrapper itself stays * pass-through so cursor effects still work over the gutter. */ pointer-events: none; z-index: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.55; opacity: calc(0.95 * var(--scroll-dim, 1)); transition: opacity 240ms; } .tel-block { background: rgba(7, 7, 16, 0.55); border: 1px solid var(--border); border-left: 2px solid var(--cyan); padding: 12px 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .tel-row { display: flex; justify-content: space-between; color: var(--text-dim); letter-spacing: 0.06em; } .tel-row.tel-head { color: var(--cyan); text-shadow: 0 0 6px rgba(0, 229, 255, 0.45); font-weight: 700; margin-bottom: 6px; letter-spacing: 0.15em; } .tel-row .tel-key { color: var(--text-muted); text-transform: uppercase; } .tel-row .tel-val { color: var(--text); font-variant-numeric: tabular-nums; } .tel-head .tel-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 8px var(--green); animation: telPulse 2s ease-in-out infinite; vertical-align: middle; } @keyframes telPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Roadmap timeline inside the bottom HUD panel — vertical phase track * connecting filled/half/hollow phase markers. The track is a left * border on the second-and-third entries; the marker sits on top of * the seam so it reads as a unified line. Each phase is an so * users can click through to roadmap.html anchors. */ .tel-roadmap { padding-top: 10px; } .tel-roadmap .tel-head { margin-bottom: 10px; } .tel-phase { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; text-decoration: none; color: inherit; pointer-events: auto; position: relative; transition: transform 160ms ease, color 160ms ease; } .tel-phase + .tel-phase { margin-top: 2px; } /* Vertical track between markers — drawn as a 1px line behind each * non-first marker. Stops at the marker's top so the dot sits on it. */ .tel-phase + .tel-phase::before { content: ''; position: absolute; left: 5px; top: -6px; width: 1px; height: 10px; background: var(--border-hi); } .tel-phase:hover { transform: translateX(2px); } .tel-mark { flex-shrink: 0; width: 11px; text-align: center; line-height: 1.4; font-size: 13px; margin-top: 0; } .tel-phase-body { flex: 1; min-width: 0; } .tel-name { color: var(--text); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; line-height: 1.3; } .tel-when { color: var(--text-muted); font-size: 10px; letter-spacing: 0.04em; margin-top: 1px; } /* Phase status colors — done/active/future. */ .tel-phase.tel-done .tel-mark { color: var(--green); text-shadow: 0 0 6px rgba(63, 249, 113, 0.55); } .tel-phase.tel-active .tel-mark { color: var(--cyan); text-shadow: 0 0 6px rgba(0, 229, 255, 0.55); } .tel-phase.tel-future .tel-mark { color: var(--text-muted); } .tel-phase.tel-active .tel-name { color: var(--cyan); } .tel-phase.tel-future .tel-name { color: var(--text-dim); } .tel-phase:hover .tel-name { text-decoration: underline; } } /* Below 1280px we LOSE the gutter chrome cleanly — nothing reflows in the main column because both elements were position:fixed. */ @media (max-width: 1279px) { .telemetry { display: none !important; } } @media (prefers-reduced-motion: reduce) { .tel-head .tel-dot { animation: none; } .tel-feed li { animation: none; opacity: 1; transform: none; } } @keyframes orbDriftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28vw, 22vh); } } @keyframes orbDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-22vw, -28vh); } } @keyframes orbDriftC { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-15vw, 18vh); } } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } /* Scanlines + vignette overlay. Dialled way back 2026-06-02 — the old 0.4-opacity scanlines + 0.55 vignette read as a heavy "CRT filter" gimmick and hurt text contrast. Now they're a faint atmospheric texture: scanlines barely perceptible over the wider 4px pitch, vignette a soft edge-darken rather than a tunnel. The cyberpunk mood survives; the cheapness doesn't. */ html::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0, transparent 3px, rgba(0, 0, 0, 0.12) 3px, rgba(0, 0, 0, 0.12) 4px ); z-index: 9999; mix-blend-mode: multiply; opacity: 0.16; } html::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%); z-index: 9998; } /* -------- NAV -------- */ nav.top { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 32px; padding: 18px 40px; background: rgba(5, 5, 16, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: relative; } /* Yellow accent line under nav */ nav.top::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 80px; background: var(--yellow); box-shadow: var(--glow-yellow); } nav.top .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; position: relative; } nav.top .brand .logo { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 28px; letter-spacing: 0.14em; color: var(--text); text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); line-height: 1; } nav.top .brand .sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--yellow); text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--yellow); line-height: 1; } nav.top .links { margin-inline-start: auto; display: flex; gap: 28px; align-items: center; } nav.top .links a { color: var(--text-dim); text-decoration: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; transition: color 180ms, text-shadow 180ms; position: relative; padding: 4px 0; } nav.top .links a:hover { color: var(--accent-text); text-shadow: 0 0 12px rgba(166, 255, 232, 0.55); } nav.top .links a::before { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--cyan); transition: width 220ms ease-out; box-shadow: var(--glow-cyan); } nav.top .links a:hover::before { width: 100%; } /* Nav CTA — the one nav link that's a visible boxed button (Downloads). Filled orange with a persistent glow so it reads as the primary action in the nav. Scoped strong enough to override the shared underline-hover styles above so the underline doesn't render inside the box. */ nav.top .links a.nav-cta { color: var(--bg); background: var(--orange); border: 1px solid var(--orange); padding: 11px 22px; font-weight: 900; font-size: 13px; letter-spacing: 0.22em; clip-path: var(--clip-corner); transition: all 200ms; margin-inline-start: 8px; box-shadow: var(--glow-orange); text-shadow: none; } nav.top .links a.nav-cta:hover { background: var(--yellow); border-color: var(--yellow); color: var(--bg); box-shadow: 0 0 24px rgba(255, 205, 90, 0.7), 0 0 8px rgba(255, 205, 90, 0.9); transform: translateY(-1px); } /* Kill the generic link underline on the CTA box — it lives inside the border. */ nav.top .links a.nav-cta::before { display: none; } /* Android-beta status chip. Third iteration — the gradient-text pill was correct in concept but the gradient was washing out at nav-bar size, the borders felt too thin, and there were too many effects competing (pulse + gradient + glow + corner-clip). Stripped down: white-on-dark mono caps, sharp cyan accent edge, subtle frosted backdrop, single ambient halo. The pulsing green "live" dot stays — it's the load-bearing signal that the beta is actively recruiting. Hover layers a brighter cyan glow and a left-anchored sweep highlight that runs once. */ .beta-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; margin-inline-start: 4px; /* Frosted dark background that lets a hint of the ambient orbs show through. Backdrop-filter is widely supported now (incl. iOS 15+); the fallback (without blur) still looks fine. */ background: rgba(8, 10, 24, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(0, 229, 255, 0.55); /* Inset shadow draws an inner 1px line — gives the chip a subtle "double frame" depth without a second DOM node. */ box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.08), 0 0 14px rgba(0, 229, 255, 0.18); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; overflow: hidden; clip-path: var(--clip-corner); transition: color 180ms, border-color 220ms, box-shadow 240ms, background 220ms, transform 160ms; } .beta-chip:hover { border-color: var(--cyan); background: rgba(0, 229, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 22px rgba(0, 229, 255, 0.45), 0 0 36px rgba(0, 229, 255, 0.15); transform: translateY(-1px); } .beta-chip:focus-visible { outline: none; border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.3), 0 0 0 2px rgba(0, 229, 255, 0.55), 0 0 16px rgba(0, 229, 255, 0.45); } .beta-chip:active { transform: translateY(0); } /* Sweep highlight. A vertical cyan sheen rides across the chip left-to-right on a slow 6s loop — premium "this is alive" cue that doesn't compete with the green dot. Lives in ::before with skew so the sheen reads as a slash. Hidden when reduced motion. */ .beta-chip::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient( 100deg, transparent 0%, rgba(0, 229, 255, 0.18) 50%, transparent 100% ); transform: skewX(-18deg); pointer-events: none; animation: beta-chip-sweep 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .beta-chip::before { animation: none; opacity: 0; } } @keyframes beta-chip-sweep { /* Park the sheen off-canvas for most of the cycle so the chip reads as static, then make one swift pass — the "rhythm" is what makes it feel premium rather than gimmicky. */ 0%, 70%, 100% { left: -40%; opacity: 0; } 75% { opacity: 1; } 100% { left: 130%; opacity: 0; } } /* "Live / accepting" green indicator. Solid core with a small halo pulse so the chip visibly signals the beta is open right now. */ .beta-chip-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #5dffba; flex-shrink: 0; box-shadow: 0 0 6px rgba(93, 255, 186, 0.9), 0 0 12px rgba(93, 255, 186, 0.4); animation: beta-chip-pulse 1.6s ease-in-out infinite; } .beta-chip-label { position: relative; display: inline-flex; align-items: center; gap: 6px; /* Solid white — drops the previous gradient. At 11px the gradient was reading as fuzzy anti-aliasing rather than a colour treatment. */ color: #fff; text-shadow: 0 0 12px rgba(0, 229, 255, 0.35); } .beta-chip-sep { opacity: 0.5; margin: 0 2px; color: var(--cyan); } @keyframes beta-chip-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(93, 255, 186, 0.85), 0 0 12px rgba(93, 255, 186, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 10px rgba(93, 255, 186, 1), 0 0 22px rgba(93, 255, 186, 0.65); transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .beta-chip-dot { animation: none; } } /* Sticky-nav variant — only dot + "BETA" so the compact bar doesn't get crowded next to "Launch app →". Same visual treatment, smaller footprint. Hidden below 520px (the main top-nav chip still covers that case). */ .beta-chip.beta-chip--sticky { padding: 5px 10px 5px 9px; margin-inline-end: 8px; margin-inline-start: 0; font-size: 10px; letter-spacing: 0.22em; gap: 7px; } .beta-chip.beta-chip--sticky .beta-chip-dot { width: 7px; height: 7px; } @media (max-width: 520px) { .beta-chip.beta-chip--sticky { display: none; } } /* Language switcher — dropdown. * Was a 3-button row when only EN/FR/AR existed. Switched to a dropdown * 2026-05-07 once 5 more languages landed (es/pt/de/it/ru) — a row of * eight chips would have wrapped or pushed the brand off-screen. */ .lang-switcher { position: relative; margin-inline-start: 24px; } .lang-switcher .lang-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; padding: 8px 14px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all 180ms; text-transform: uppercase; line-height: 1; min-width: 64px; } .lang-switcher .lang-toggle:hover, .lang-switcher .lang-toggle[aria-expanded="true"] { color: var(--text); background: rgba(0, 229, 255, 0.08); border-color: var(--cyan, #00e5ff); } .lang-switcher .lang-caret { font-size: 10px; opacity: 0.7; transition: transform 180ms; } .lang-switcher .lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); } .lang-switcher .lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; margin: 0; padding: 4px; list-style: none; background: var(--bg, #050510); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.05); z-index: 1000; min-width: 180px; } .lang-switcher .lang-menu[hidden] { display: none; } .lang-switcher .lang-menu li { margin: 0; padding: 0; } .lang-switcher .lang-menu button { display: block; width: 100%; text-align: start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; padding: 10px 14px; background: transparent; border: 1px solid transparent; color: var(--text-dim); cursor: pointer; transition: all 140ms; line-height: 1.2; } .lang-switcher .lang-menu button:hover { color: var(--text); background: rgba(0, 229, 255, 0.08); } .lang-switcher .lang-menu button.active { color: var(--bg); background: var(--yellow); border-color: var(--yellow); box-shadow: var(--glow-yellow); } [dir="rtl"] .lang-switcher .lang-menu { inset-inline-end: auto; inset-inline-start: 0; } /* -------- HERO -------- */ .hero { padding: 96px 24px 80px; text-align: center; position: relative; overflow: hidden; /* Scroll-out variables, written by effects.js setupHeroScroll(). Defaults * here so the hero renders correctly even with JS disabled / before the * first rAF fires. */ --hero-y: 0px; --hero-opacity: 1; --hero-scale: 1; --hero-blur: 0px; --hero-letter-spread: 0em; transform: translateY(var(--hero-y)) scale(var(--hero-scale)); opacity: var(--hero-opacity); filter: blur(var(--hero-blur)); /* Hint the compositor — these props all change together every frame * during the scroll-out, so we want the hero on its own GPU layer. */ will-change: transform, opacity, filter; /* No CSS transition — we drive every frame from rAF, and a transition * would introduce a tracking lag between scroll position and visual. */ } .hero h1 { letter-spacing: var(--hero-letter-spread); /* Subtle; only kicks in once scroll passes 0. */ transition: none; } @media (prefers-reduced-motion: reduce) { .hero, .hero h1 { transform: none; opacity: 1; filter: none; letter-spacing: normal; } } /* Slow-traveling cyan scan line down the hero */ .hero .scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent 0%, rgba(0, 229, 255, 0.6) 50%, transparent 100%); filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5)); pointer-events: none; animation: scanlineDown 7s linear infinite; } @keyframes scanlineDown { 0% { top: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 25% 35%, rgba(0, 229, 255, 0.12), transparent 70%), radial-gradient(ellipse 60% 50% at 75% 65%, rgba(255, 102, 0, 0.10), transparent 70%), radial-gradient(ellipse 100% 50% at 50% 100%, rgba(252, 238, 10, 0.07), transparent 70%); z-index: -1; } /* Crosshair / reticle decorations */ .hero-corner { position: absolute; width: 24px; height: 24px; border: 1px solid var(--cyan); opacity: 0.5; } .hero-corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; } .hero-corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; } .hero-corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; } .hero-corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; } /* Top meta strip */ .hero-meta { display: inline-flex; align-items: center; gap: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 36px; padding: 6px 14px; border: 1px solid var(--border); background: rgba(5, 5, 16, 0.6); } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulseDot 1.6s ease-in-out infinite; } .hero-meta .divider { width: 1px; height: 12px; background: var(--border-hi); } .hero-meta .yellow { color: var(--yellow); } @keyframes pulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--green); } 50% { opacity: 0.6; box-shadow: 0 0 14px var(--green); } } .hero h1 { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; /* Scaled down 2026-06-02: was clamp(96px, 18vw, 220px), which hit the 220px cap on essentially every desktop and made the wordmark span edge-to-edge — the whole hero read as "zoomed in" and crowded the SECURE-COMMS sub-label. This keeps NOX a bold brand statement while leaving breathing room around it. */ font-size: clamp(72px, 12vw, 168px); margin: 0 auto; letter-spacing: 0.08em; line-height: 0.85; position: relative; /* Block-level + fit-content so the wordmark sits on its OWN centred line. It used to be inline-block, which made it share an inline run with the inline-flex .hero-meta / .hero-sub siblings; that run wrapped as a group and each wrapped line centred independently, pushing NOX hundreds of px off-axis once it no longer filled the row. fit-content keeps the box tight to the glyphs so the glitch ::before/::after layers still register. */ display: block; width: fit-content; max-width: 100%; text-shadow: 0 0 22px rgba(0, 229, 255, 0.42); } .hero h1::before, .hero h1::after { content: 'NOX'; position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* Chromatic-split layers. Softened 2026-06-02: the resting RGB offset dropped from 3px → 1.5px and the periodic "jump" magnitudes were halved, so the wordmark reads as a crisp NOX with a faint neon edge and an occasional subtle flicker — premium, not "broken signal". */ .hero h1::before { color: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(-1.5px, 0); text-shadow: 1px 0 var(--orange); mix-blend-mode: screen; opacity: 0.85; animation: glitchA 7s infinite steps(1); } .hero h1::after { color: var(--cyan); clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(1.5px, 0); text-shadow: -1px 0 var(--cyan); mix-blend-mode: screen; opacity: 0.85; animation: glitchB 7s infinite steps(1); } @keyframes glitchA { 0%, 94%, 100% { transform: translate(-1.5px, 0); } 95% { transform: translate(-4px, 0); } 97% { transform: translate(1px, -1px); } } @keyframes glitchB { 0%, 93%, 100% { transform: translate(1.5px, 0); } 94% { transform: translate(4px, 1px); } 96% { transform: translate(-1px, 0); } } .hero-sub { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-dim); } .hero-sub .bracket { color: var(--yellow); font-weight: 700; font-size: 18px; } .hero p.tagline { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); color: var(--text); max-width: 760px; margin: 36px auto 0; line-height: 1.5; } /* Sharper hero copy: a one-line headline (the .tagline) + a smaller * sub-line of feature pillars (.tagline-sub). The sharp headline gets * a touch more weight so it punches over the ambient background. */ .hero p.tagline-sharp { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.005em; margin-top: 32px; max-width: 820px; } .hero .tagline-sub { display: block; margin-top: 16px; font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 500; font-size: clamp(15px, 1.4vw, 18px); letter-spacing: 0.02em; color: var(--text-dim); line-height: 1.55; } /* Single primary CTA — bright cyan-filled button — flanked by quieter * inline links. Replaces the previous 3-equal-buttons layout that split * attention. The primary button now feels like THE action; downloads * + comparison are secondary text links so the eye lands on Launch. */ .hero .cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 36px; } .btn-hero-primary { font-size: 15px; padding: 18px 36px; letter-spacing: 0.22em; /* Bigger and louder than the regular .btn-primary so it reads as the * one action that matters above the fold. */ } .cta-secondary { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em; } .cta-link { color: var(--text-dim); text-decoration: none; border-bottom: 1px dashed transparent; padding-bottom: 1px; transition: color 200ms, border-color 200ms; } .cta-link:hover { color: var(--cyan); border-bottom-color: var(--cyan); } .cta-divider { color: var(--text-muted); user-select: none; } @media (max-width: 600px) { .cta-secondary { flex-direction: column; gap: 8px; } .cta-divider { display: none; } } /* -------- BUTTONS -------- */ .btn { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px; padding: 16px 28px; border: 1px solid; background: transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: all 180ms; position: relative; min-height: 50px; clip-path: var(--clip-corner); } .btn::after { content: '›'; font-size: 18px; font-weight: 900; transition: transform 200ms; } .btn:hover::after { transform: translateX(4px); } html[dir='rtl'] .btn::after { content: '‹'; } html[dir='rtl'] .btn:hover::after { transform: translateX(-4px); } .btn-primary { border-color: var(--yellow); color: var(--bg); background: var(--yellow); font-weight: 900; } .btn-primary:hover { background: var(--cyan); border-color: var(--cyan); box-shadow: var(--glow-cyan); } .btn-cyan { border-color: var(--cyan); color: var(--accent-text); } .btn-cyan:hover { background: var(--cyan); color: var(--bg); box-shadow: var(--glow-cyan); } .btn-orange { border-color: var(--orange); color: var(--orange); } .btn-orange:hover { background: var(--orange); color: var(--bg); box-shadow: var(--glow-orange); } .btn-ghost { border-color: var(--border-hi); color: var(--text-dim); } .btn-ghost:hover { border-color: var(--cyan); color: var(--text); } /* -------- THESIS BAND (replaces 0/0/1/6 specs strip 2026-04-26) -------- * One thesis sentence + a quiet line of pillar facts. Designer review * called the previous strip "clever but cryptic — takes a beat to * parse." This pass leads with a sentence anyone reads in 1s, follows * with the four privacy numbers as a lower-key reinforcement. */ .thesis { max-width: 1180px; margin: 0 auto; padding: 16px 24px 0; } .thesis-inner { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 56px 24px; text-align: center; position: relative; } .thesis-inner::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: var(--orange); box-shadow: var(--glow-orange); } .thesis-line { font-family: 'Rajdhani', system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0 auto; max-width: 920px; } .thesis-line em { font-style: normal; color: var(--cyan); text-shadow: 0 0 16px rgba(0, 229, 255, 0.4); } .thesis-pillars { margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; } .thesis-pillars b { color: var(--yellow); font-weight: 700; font-family: 'Orbitron', system-ui, sans-serif; font-size: 15px; margin-right: 4px; /* tabular-nums so the digits don't shift width when telemetry numbers update or the i18n layer swaps strings. */ font-variant-numeric: tabular-nums; } .thesis-dot { color: var(--text-muted); } @media (max-width: 600px) { .thesis-inner { padding: 40px 16px; } .thesis-pillars { font-size: 11px; gap: 8px 12px; } .thesis-pillars b { font-size: 13px; } .thesis-dot { display: none; } } /* -------- SHOWCASE (product screenshots, between specs + SEC.01) -------- * Wide bleed treatment so the screenshots have real estate. Two figures * tilt at small reciprocal angles to read as a stacked pair instead of * two thumbnails on a wall. Hover lifts both flat so a curious visitor * can study them. Cyan glow + corner brackets reinforce the cyberpunk * frame language without obscuring the actual UI. */ .showcase { padding: 80px 24px 40px; text-align: center; position: relative; } .showcase-inner { max-width: 1180px; margin: 0 auto; } .showcase-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.28em; color: var(--cyan); text-transform: uppercase; border: 1px solid var(--border-hi); padding: 6px 14px; margin-bottom: 22px; } .showcase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); } .showcase-h2 { font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.01em; margin: 0 0 14px; color: var(--text); } .showcase-lead { max-width: 640px; margin: 0 auto 48px; font-size: clamp(15px, 1.4vw, 17px); color: var(--text-dim); line-height: 1.6; } .showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .shot { margin: 0; /* Reciprocal tilt — left leans slightly counter-clockwise, right * clockwise — so the pair reads as overlapping despite being * grid-laid out. Hover removes the tilt for a closer look. */ transform: rotate(var(--shot-tilt, 0deg)) translateY(0); transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .shot-left { --shot-tilt: -1.5deg; transform-origin: bottom right; } .shot-right { --shot-tilt: 1.5deg; transform-origin: bottom left; } .shot:hover { transform: rotate(0deg) translateY(-6px); } .shot-frame { position: relative; border: 1px solid var(--border-hi); background: var(--panel); padding: 8px; /* Cyan glow that strengthens on hover. The neon halo is what makes * the screenshot feel like part of the cyberpunk site instead of a * pasted-in PNG. */ box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 229, 255, 0.06); transition: box-shadow 360ms; } .shot:hover .shot-frame { box-shadow: 0 0 0 1px var(--cyan), 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 229, 255, 0.18); } .shot-frame::before, .shot-frame::after { content: ''; position: absolute; width: 16px; height: 16px; border: 1px solid var(--cyan); pointer-events: none; } .shot-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .shot-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .shot-frame img { display: block; width: 100%; height: auto; /* Match the dark panel beneath if image has any transparency. */ background: #07070c; } .shot figcaption { margin-top: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } @media (max-width: 860px) { .showcase { padding: 56px 20px 32px; } .showcase-grid { grid-template-columns: 1fr; gap: 24px; } .shot, .shot-left, .shot-right { transform: none !important; } .shot:hover { transform: translateY(-4px) !important; } } @media (prefers-reduced-motion: reduce) { .shot, .shot-left, .shot-right { transform: none !important; transition: none; } .shot:hover { transform: none !important; } .shot-frame { transition: none; } } /* -------- MAIN / SECTIONS -------- */ main { max-width: 1180px; margin: 0 auto; padding: 0 24px; } section.block { padding: 100px 0 80px; position: relative; } section.block + .block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--border-hi), transparent); } .section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .section-header .index { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--bg); background: var(--yellow); padding: 4px 10px; font-weight: 700; line-height: 1; } .section-header .label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--text-dim); } .section-header .line { flex: 1; height: 1px; background: linear-gradient(to right, var(--border-hi), transparent); } html[dir='rtl'] .section-header .line { background: linear-gradient(to left, var(--border-hi), transparent); } section.block h2 { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: clamp(36px, 4.2vw, 56px); letter-spacing: 0.04em; margin: 0 0 20px; color: var(--text); line-height: 1.05; max-width: 900px; } section.block .lead { color: var(--text-dim); font-size: 19px; font-weight: 400; max-width: 760px; line-height: 1.65; } /* -------- FEATURE CARDS -------- */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 40px; } .feature { position: relative; background: linear-gradient(180deg, rgba(15, 15, 36, 0.95) 0%, rgba(8, 8, 22, 0.95) 100%); border: 1px solid var(--border); padding: 28px 24px 26px; transition: border-color 220ms, box-shadow 220ms, transform 280ms ease-out; clip-path: var(--clip-corner); overflow: hidden; transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(var(--lift, 0)); } .feature::before { content: attr(data-num); position: absolute; top: 14px; inset-inline-end: 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.3em; color: var(--text-muted); font-weight: 700; } .feature::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(to right, var(--cyan), var(--orange)); opacity: 0; transition: opacity 220ms; } .feature:hover { border-color: var(--cyan); --lift: -3px; box-shadow: 0 8px 30px rgba(0, 229, 255, 0.12); } .feature:hover::after { opacity: 1; } .feature h3 { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; color: var(--accent-text); line-height: 1.3; } .feature p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.65; font-weight: 400; } /* -------- INSTALL CARDS (slightly different feel) -------- */ .install-grid .feature h3 { color: var(--yellow); } .install-grid .feature .platform-meta { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-hi); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } /* Default anchors inside the meta row (e.g. "all downloads") used to fall through to the browser's blue. Route them through --accent-text so they match every other link surface on the site. */ .install-grid .feature .platform-meta a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .install-grid .feature .platform-meta a:hover { color: var(--yellow); } /* The "how to continue past the warning" link is the most important thing a first-time Windows user reads here — bump it up and colour it danger-red so it pops against the muted meta row. */ .install-grid .feature .platform-meta a.warn-link { color: var(--danger); font-size: 13px; font-weight: 600; } .install-grid .feature .platform-meta a.warn-link:hover { color: #ff6384; } .install-grid .feature .download-row { margin-top: 18px; } .install-grid .feature .download-row a.btn, .install-grid .feature .download-row button.btn { width: 100%; justify-content: center; /* Buttons inherit the .btn base styles but without the anchor's default text-decoration / colour cascade — restate so a