/* ========================================================================== EXAFABS — "Signal in the dark" homepage styles Progressive enhancement contract: NOTHING in this file hides content by default. JS-only chrome (preloader, custom cursor) is hidden until JS opts in via classes on . If JS dies, html.js-fail force-restores every animated element. ========================================================================== */ /* ---- Fonts (self-hosted, CSP font-src 'self') ---- */ @font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Clash Display'; src: url('/assets/fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* ---- Tokens ---- */ :root { --ink: #06070A; --surface: #0C0E14; --line: rgba(255, 255, 255, 0.07); --signal: #3CF2B4; --signal-dim: rgba(60, 242, 180, 0.35); --amber: #FFB347; --t1: #F2F4F8; --t2: #9BA3B5; --t3: #767E90; /* 4.6:1 on --ink — AA for the mono micro-labels */ --t-dim: #5C6373; /* decorative, aria-hidden elements only */ --font-display: 'Clash Display', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; --container: 1320px; --pad: clamp(20px, 4vw, 48px); } /* Cross-document view transitions (completes when inner pages are restyled) */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ---- Reset / base ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; background: var(--ink); color: var(--t1); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(60, 242, 180, 0.28); color: #fff; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; } img, svg, canvas { display: block; max-width: 100%; } .mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; } .skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; padding: 12px 22px; background: var(--signal); color: #04110C; font: 500 14px/1 var(--font-body); border-radius: 0 0 8px 0; transition: top 0.25s ease; } .skip-link:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } section[id], #main { scroll-margin-top: 84px; } /* ---- Texture overlay: scanlines + noise (3%) ---- */ .grain { position: fixed; inset: 0; z-index: 140; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.05; } .grain::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px); opacity: 0.55; } /* ---- Nav ---- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px var(--pad); background: linear-gradient(to bottom, rgba(6, 7, 10, 0.85), rgba(6, 7, 10, 0)); border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease; } .site-nav.nav--solid { padding-top: 12px; padding-bottom: 12px; background: rgba(6, 7, 10, 0.94); border-bottom-color: var(--line); } .nav-brand { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--font-display); letter-spacing: 0.02em; color: var(--t1); } .nav-brand .brand-dot { width: 8px; height: 8px; background: var(--signal); border-radius: 1px; box-shadow: 0 0 12px var(--signal-dim); } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); list-style: none; } .nav-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t2); padding: 6px 2px; position: relative; transition: color 0.25s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--signal); transition: right 0.3s ease; } .nav-links a:hover { color: var(--t1); } .nav-links a:hover::after { right: 0; } .status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255, 179, 71, 0.28); border-radius: 999px; padding: 7px 13px; position: relative; overflow: hidden; } .status-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); animation: pill-blink 2.4s ease-in-out infinite; } .status-pill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 179, 71, 0.14), transparent); animation: pill-shimmer 8s linear infinite; } @keyframes pill-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes pill-shimmer { 0% { left: -45%; } 7% { left: 105%; } 100% { left: 105%; } } /* ---- Hero ---- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(1100px 540px at 70% 12%, rgba(60, 242, 180, 0.055), transparent 65%), radial-gradient(900px 700px at 12% 88%, rgba(60, 242, 180, 0.03), transparent 60%), var(--ink); } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } html.webgl-on .hero-canvas { opacity: 1; } /* ---- Phase 2: the network becomes a fixed field behind the whole page and morphs into each product's glyph on scroll. All scoped to html.morph-on, so with the feature flag off the homepage is byte-for-byte Phase 1. ---- */ html.morph-on .hero-canvas { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; transition: opacity 0.6s ease; } html.morph-on.morph-rest .hero-canvas { opacity: 0; } /* clean dark below the journey */ html.morph-on .hero { background: var(--ink); } /* drop hero glow; the field is the visual */ html.morph-on main > section:not(.hero), html.morph-on .marquee, html.morph-on .footer { position: relative; z-index: 1; } html.morph-on .footer { background: var(--ink); } /* translucent panels: readable, but the morphing glyph reads through them. Text gets a soft ink shadow so AA holds wherever a bright line passes behind. */ html.morph-on .card { background: rgba(9, 11, 17, 0.6); } html.morph-on .also-row, html.morph-on .power, html.morph-on .lrow, html.morph-on .built .lede, html.morph-on .contact-copy, html.morph-on .contact-form { background-color: rgba(8, 10, 16, 0.56); border-radius: 12px; } html.morph-on .built .lede, html.morph-on .contact-copy { padding: 18px 20px; } html.morph-on .lrow { padding-left: 18px; padding-right: 18px; } html.morph-on .card .tag, html.morph-on .card li, html.morph-on .card h3, html.morph-on .lrow .desc, html.morph-on .lrow h3, html.morph-on .power p, html.morph-on .built .lede, html.morph-on .contact-copy p { text-shadow: 0 1px 10px rgba(6, 7, 10, 0.95), 0 0 2px rgba(6, 7, 10, 0.9); } .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; } html.webgl-on .hero-fallback { display: none; } .hero-fallback .fb-pulse { animation: fb-pulse 3.2s ease-in-out infinite; transform-origin: center; } .hero-fallback .fb-pulse.p2 { animation-delay: 1.1s; } .hero-fallback .fb-pulse.p3 { animation-delay: 2.2s; } @keyframes fb-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } .hero::after { /* text-protection vignette over the particle field */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 62% 56% at 30% 46%, rgba(6, 7, 10, 0.6), transparent 72%); } .hero-grid { position: absolute; inset: 0; pointer-events: none; } .hero-grid span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: 0.5; transition: opacity 1.2s ease, box-shadow 1.2s ease; } .hero-grid span:nth-child(1) { left: 25%; } .hero-grid span:nth-child(2) { left: 50%; } .hero-grid span:nth-child(3) { left: 75%; } .hero-grid.glow span { opacity: 1; box-shadow: 0 0 18px rgba(60, 242, 180, 0.12); } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 120px var(--pad) 140px; } .micro { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t3); margin-bottom: 26px; } .micro .tick { color: var(--signal); } .hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.3rem, 9.6vw, 8.8rem); line-height: 0.99; letter-spacing: -0.035em; color: var(--t1); text-wrap: balance; } .hero-title .t-line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; } .hero-title .word { display: inline-block; will-change: transform; } .hero-title .accent { color: var(--signal); } .hero-sub { margin-top: 30px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t2); min-height: 1.5em; } .hero-sub .caret { display: inline-block; width: 0.55em; height: 1.05em; background: var(--signal); vertical-align: text-bottom; margin-left: 3px; animation: caret-blink 1.05s steps(1) infinite; } @keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; } .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 8px; font: 500 15px/1 var(--font-body); letter-spacing: 0.01em; /* no transform transition: GSAP eases the magnetic/entrance motion itself */ transition: box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease; will-change: transform; } .btn .arr { font-family: var(--font-mono); font-size: 13px; transition: transform 0.3s ease; } .btn--primary { background: var(--signal); color: #04110C; } .btn--primary:hover { box-shadow: 0 0 36px rgba(60, 242, 180, 0.35); } .btn--primary:hover .arr { transform: translateY(2px); } .btn--ghost { border: 1px solid rgba(255, 255, 255, 0.14); color: var(--t1); } .btn--ghost:hover { border-color: rgba(60, 242, 180, 0.55); color: var(--signal); } .btn--ghost:hover .arr { transform: translateX(3px); } .btn--sm { height: 42px; padding: 0 18px; font-size: 13.5px; border-radius: 7px; } .hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad) 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; } .scroll-cue .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--t-dim); text-transform: uppercase; } .scroll-cue .track { width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; } .scroll-cue .track::after { content: ''; position: absolute; left: 0; top: -30%; width: 1px; height: 30%; background: var(--signal); animation: cue-drop 2.2s ease-in-out infinite; } @keyframes cue-drop { 0% { top: -30%; } 70%, 100% { top: 110%; } } .hero-data { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t3); text-align: right; } .hero-data .sep { color: var(--signal); padding: 0 6px; } /* ---- Preloader (JS-gated; CSS failsafe self-destructs it) ---- */ .preloader { display: none; } html.preload .preloader { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 400; background: var(--ink); animation: pl-failsafe 0.5s ease 2.6s forwards; } html.js-fail .preloader { display: none !important; } html.preload.preload-done .preloader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } @keyframes pl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .pl-core { width: min(480px, 56vw); } .pl-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--signal); text-align: right; margin-bottom: 12px; } .pl-line { height: 1px; background: rgba(255, 255, 255, 0.1); overflow: visible; } .pl-fill { height: 1px; width: 100%; background: var(--signal); box-shadow: 0 0 14px var(--signal-dim); transform: scaleX(0); transform-origin: left center; } .pl-label { margin-top: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--t-dim); text-transform: uppercase; } /* ---- Custom cursor (desktop, JS-gated) ---- */ .cur-dot, .cur-ring { display: none; } @media (hover: hover) and (pointer: fine) { html.cursor-on { cursor: none; } html.cursor-on a, html.cursor-on button { cursor: none; } html.cursor-on .cur-dot { display: block; position: fixed; z-index: 500; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--signal); top: 0; left: 0; transform: translate(-100px, -100px); /* off-screen until first mousemove */ } html.cursor-on .cur-ring { display: block; position: fixed; z-index: 500; pointer-events: none; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid rgba(60, 242, 180, 0.45); top: 0; left: 0; transform: translate(-100px, -100px); transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease; } html.cursor-on .cur-ring.is-active { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(60, 242, 180, 0.85); } } /* ---- Marquee strip ---- */ .marquee { overflow: hidden; position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; } .marquee-track { display: flex; gap: 56px; width: max-content; will-change: transform; animation: marquee 30s linear infinite; } .marquee-track span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--t3); white-space: nowrap; } .marquee-track span i { font-style: normal; color: var(--signal); margin-right: 56px; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---- Section scaffolding ---- */ .sys { position: relative; max-width: var(--container); margin: 0 auto; padding: clamp(76px, 9vw, 120px) var(--pad) clamp(30px, 4vw, 50px); } .sys::before { /* faint vertical grid that brightens as the section enters */ content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: 25% 100%; opacity: 0.16; } .sys-line { position: relative; height: 1px; background: var(--line); margin-bottom: clamp(44px, 6vw, 72px); } .sys-line::after { content: ''; position: absolute; inset: 0; background: var(--signal); opacity: 0.75; transform: scaleX(0); transform-origin: left center; } .sys-head { position: relative; margin-bottom: clamp(34px, 5vw, 54px); } .sys-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.02; color: var(--t1); margin-top: 12px; } .sys-title .accent { color: var(--signal); } /* Scroll-driven entrances — compositor-only; content visible without support */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .rv { animation: rise both ease; animation-timeline: view(); animation-range: entry 0% entry 38%; } .sys-line::after { animation: line-draw both linear; animation-timeline: view(); animation-range: cover 0% cover 32%; } .sys::before { animation: grid-up both linear; animation-timeline: view(); animation-range: entry 0% entry 45%; } } } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes grid-up { from { opacity: 0.04; } to { opacity: 0.16; } } /* ---- Pills ---- */ .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line); white-space: nowrap; } .pill .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; } .pill--live { color: var(--signal); border-color: rgba(60, 242, 180, 0.3); } .pill--live .dot { background: var(--signal); box-shadow: 0 0 8px var(--signal-dim); } .pill--wip { color: var(--amber); border-color: rgba(255, 179, 71, 0.28); } .pill--wip .dot { background: var(--amber); animation: pill-blink 2.4s ease-in-out infinite; } /* ---- Product cards ---- Reveal (.rv) lives on a wrapper: a view() animation's transform fill would override the JS tilt transform if both sat on .card. */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cards > .rv { display: flex; } .card { position: relative; display: flex; flex: 1; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%); transform-style: preserve-3d; will-change: transform; transition: border-color 0.35s ease; } .card:hover { border-color: rgba(60, 242, 180, 0.35); } .card .glyph { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; color: var(--signal); opacity: 0.75; transition: opacity 0.35s ease, filter 0.35s ease; filter: drop-shadow(0 0 0 rgba(60, 242, 180, 0)); } .card:hover .glyph { opacity: 1; filter: drop-shadow(0 0 14px rgba(60, 242, 180, 0.65)); } .card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; letter-spacing: -0.01em; line-height: 1.1; margin: 20px 0 8px; padding-right: 56px; color: var(--t1); } .card .tag { color: var(--t2); font-size: 0.95rem; line-height: 1.55; } .card ul { list-style: none; margin: 20px 0 24px; display: grid; gap: 10px; } .card li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); padding-left: 16px; position: relative; line-height: 1.6; } .card li::before { content: '\25B8'; position: absolute; left: 0; color: var(--signal); } .card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } .metrics { display: flex; gap: 24px; margin: 18px 0 2px; } .metric .num { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--t1); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .metric .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t3); display: block; margin-top: 2px; } .also-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 22px; margin-top: 18px; } .also-row .mono-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2); } .also-row .mono-note .tick { color: var(--signal); } .also-row a { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); transition: opacity 0.25s ease; } .also-row a:hover { opacity: 0.75; } /* ---- List rows (games, blog) ---- */ .lrow { position: relative; display: flex; align-items: baseline; gap: 22px; padding: 24px 6px; border-top: 1px solid var(--line); transition: background 0.3s ease; } .lrow:last-child { border-bottom: 1px solid var(--line); } .lrow:hover { background: rgba(255, 255, 255, 0.02); } .lrow .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--signal); min-width: 86px; flex: none; } .lrow h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.3vw, 1.7rem); letter-spacing: -0.01em; color: var(--t1); min-width: 200px; } .lrow .desc { color: var(--t2); font-size: 0.92rem; line-height: 1.55; max-width: 48ch; } .lrow .pill { margin-left: auto; } .lrow .arr { font-family: var(--font-mono); font-size: 14px; color: var(--signal); margin-left: auto; transition: transform 0.3s ease; } .lrow .pill + .arr { margin-left: 0; } .lrow:hover .arr { transform: translateX(5px); } .lrow .row-link::after { content: ''; position: absolute; inset: 0; } /* ---- How it's built ---- */ .built { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 76px); } .built .lede { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--t1); text-wrap: balance; } .built .lede + p { margin-top: 18px; color: var(--t2); font-size: 1rem; max-width: 56ch; } .stack-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .stack-tags span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t2); border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px; } .powers { display: grid; align-content: start; } .power { padding: 18px 0; border-top: 1px solid var(--line); } .power:last-child { border-bottom: 1px solid var(--line); } .power h3 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; } .power p { color: var(--t2); font-size: 0.92rem; line-height: 1.6; } /* ---- Contact ---- */ .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 76px); } .contact-copy p { color: var(--t2); font-size: 1rem; max-width: 44ch; } .contact-copy .mail { display: inline-block; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid rgba(60, 242, 180, 0.4); padding-bottom: 3px; transition: opacity 0.25s ease; } .contact-copy .mail:hover { opacity: 0.75; } .contact-form .field { margin-bottom: 18px; } .contact-form label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t2); margin-bottom: 8px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: var(--t1); font: 400 15px/1.5 var(--font-body); transition: border-color 0.25s ease, background 0.25s ease; } .contact-form input:focus, .contact-form textarea:focus { border-color: rgba(60, 242, 180, 0.55); background: rgba(60, 242, 180, 0.035); } .contact-form textarea { min-height: 140px; resize: vertical; } .form-status { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t2); min-height: 1.4em; } .form-status[data-state="ok"] { color: var(--signal); } .form-status[data-state="err"] { color: var(--amber); } /* ---- Footer ---- */ .footer { border-top: 1px solid var(--line); margin-top: clamp(60px, 8vw, 110px); } .footer-cols { max-width: var(--container); margin: 0 auto; padding: 54px var(--pad) 42px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .fcol h3 { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); margin-bottom: 16px; } .fcol ul { list-style: none; } .fcol li { margin: 9px 0; } .fcol a { color: var(--t2); font-size: 0.9rem; transition: color 0.25s ease; } .fcol a:hover { color: var(--t1); } .site-foot { border-top: 1px solid var(--line); padding: 24px var(--pad); display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t3); } .site-foot .ok { color: var(--signal); } .site-foot .clock { font-variant-numeric: tabular-nums; } /* ---- JS-failure failsafe: force every animated element visible ---- */ html.js-fail .micro, html.js-fail .hero-title .word, html.js-fail .hero-sub, html.js-fail .hero-ctas, html.js-fail .hero-ctas .btn, html.js-fail .hero-foot, html.js-fail .site-nav, html.js-fail .hero-canvas, html.js-fail .rv, html.js-fail .card, html.js-fail .lrow { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* ---- Reduced motion: one global gate, zero movement ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .scroll-cue .track::after, .status-pill::after { display: none; } .marquee-track { animation: none; } } /* ---- Responsive ---- */ @media (max-width: 1080px) { .cards { grid-template-columns: 1fr; } .card h3 { padding-right: 60px; } } @media (max-width: 900px) { .built, .contact-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav-links a { font-size: 9.5px; letter-spacing: 0.12em; } .nav-links { gap: 12px; } .hero-inner { padding-top: 130px; padding-bottom: 150px; } .hero-sub { font-size: 11px; } .hero-data { display: none; } .lrow { flex-wrap: wrap; gap: 10px 16px; } .lrow .desc { flex-basis: 100%; max-width: none; } .lrow .idx { min-width: 56px; } .metrics { gap: 18px; } } @media (max-width: 560px) { .status-pill { display: none; } .btn { height: 48px; padding: 0 20px; font-size: 14px; } .btn--sm { height: 40px; padding: 0 14px; font-size: 12.5px; } .also-row a { margin-left: 0; } }