/* ============================================================ BitVibe Labs · bitvibelabs.com Locked palette (v23 dark canonical) - no Tailwind defaults ============================================================ */ :root { --bvl-src: "(c) 2026 BitVibe Labs - bitvibelabs.com - all rights reserved - 7F3A9C2E"; --bit: #1FB8FF; --vibe: #FF4520; --labs: #EFECE6; /* soft warm-white - harmonizes with Bit cyan + Vibe scarlet without harsh full white */ --win: #18E69B; --bg: #0A0A0A; --bg-2: #0E0E10; --fg: #F5F5F4; --fg-muted: #B0A29A; --fg-dim: #6F6661; --border: rgba(245, 245, 244, 0.08); --border-strong: rgba(245, 245, 244, 0.18); --glass: rgba(20, 18, 17, 0.55); --glass-strong: rgba(28, 26, 25, 0.72); --font-wm: 'Fraunces', 'Times New Roman', serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; --maxw: 1320px; --gutter: clamp(20px, 4vw, 56px); --density: 1; /* tweaked: 0.7 (dense) .. 1.3 (airy) */ --motion: 1; /* tweaked: 0 (calm) .. 1.4 (chaotic) */ --accent: var(--vibe); /* tweaked: bit / vibe / labs / win */ --accent-soft: rgba(255, 69, 32, 0.22); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--fg); } /* Lock horizontal pan at the root too — body alone isn't enough on iOS Safari, where is the scroll container. */ html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; cursor: none; /* custom cursor */ min-height: 100vh; } @media (pointer: coarse), (hover: none) { body { cursor: auto; } /* restore on touch */ } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: none; } @media (pointer: coarse), (hover: none) { button { cursor: pointer; } } ::selection { background: var(--accent); color: var(--bg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ Background canvas - WebGL shader sits behind everything ============================================================ */ #bgcanvas { position: fixed; inset: 0; width: 100%; height: 100%; /* was 100vw/100vh - 100vw over-counts on mobile and triggers horizontal pan */ z-index: 0; pointer-events: none; opacity: 0.85; transition: opacity 600ms var(--ease-out); } body[data-bg="plain"] #bgcanvas { opacity: 0; } body[data-bg="grid"] #bgcanvas { opacity: 0.15; } body[data-bg="particles"] #bgcanvas { opacity: 0.40; } /* Engineering grid overlay (always on, intensity per bg style) */ .bg-grid { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(245,245,244,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245,245,244,0.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%); opacity: 0.5; transition: opacity 600ms var(--ease-out); } body[data-bg="grid"] .bg-grid { opacity: 1.2; } body[data-bg="plain"] .bg-grid { opacity: 0.3; } body[data-bg="particles"] .bg-grid { opacity: 0.4; } /* Particle canvas (commit-graph flow) - overlay above shader */ #particles { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; /* was 100vw/100vh - prevent mobile horizontal pan */ pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out); } body[data-bg="particles"] #particles { opacity: 1; } /* Noise + vignette */ body::before { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(10,10,10,0.0) 35%, rgba(10,10,10,0.85) 100%), radial-gradient(ellipse at 50% 0%, rgba(10,10,10,0.0) 35%, rgba(10,10,10,0.6) 100%); } /* Mobile (iOS Safari 26): the bottom toolbar "chin" is tinted purely from CSS background-COLOR (it ignores the WebGL canvas, background-image AND theme-color — verified via konfarm.gr's prior fix + /fix+ investigation). So the chin is always a flat colour. Instead of fighting it, we make the chin pure black AND fade the page bottom to pure black, so the seam reads as an intentional, seamless fade. */ @media (max-width: 720px) { /* Chin samples body -> html bg-color: force both pure black to match the fade below (Safari 26 derivation order). */ html, body { background-color: #000; } /* body::before stays the top vignette only (no bottom darkening). */ body::before { background: radial-gradient(ellipse at 50% 100%, rgba(10,10,10,0.0) 42%, rgba(10,10,10,0.72) 100%); } /* Deliberate fade: background -> pure black over the bottom strip so the empty hero bottom blends invisibly into the flat black Safari chin. */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 32vh; z-index: 4; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.85) 80%, #000 100%); } } /* ============================================================ Custom cursor ============================================================ */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; will-change: transform; mix-blend-mode: difference; } .cursor-dot { width: 6px; height: 6px; background: var(--fg); transform: translate3d(-50%, -50%, 0); transition: width 200ms var(--ease-out), height 200ms var(--ease-out), background 200ms var(--ease-out); } .cursor-ring { width: 36px; height: 36px; border: 1px solid var(--fg); transform: translate3d(-50%, -50%, 0); transition: width 280ms var(--ease-out), height 280ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out); } body.cursor-hover .cursor-dot { width: 0; height: 0; } body.cursor-hover .cursor-ring { width: 64px; height: 64px; background: rgba(245,245,244,0.06); } body.cursor-pressed .cursor-ring { width: 24px; height: 24px; } @media (pointer: coarse), (hover: none) { .cursor-dot, .cursor-ring { display: none; } } /* ============================================================ Layout primitives ============================================================ */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 10; } section { position: relative; padding: calc(120px * var(--density)) 0; z-index: 10; } .section-tag { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 28px; } .section-tag::before { content: ""; width: 28px; height: 1px; background: var(--accent); transform: translateY(-3px); } .section-title { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: clamp(36px, 5.6vw, 80px); letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; margin-bottom: 28px; } .section-sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--fg-muted); max-width: 60ch; line-height: 1.55; text-wrap: pretty; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px var(--gutter); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0) 100%); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .nav-brand { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 22px; letter-spacing: -0.025em; line-height: 1; display: flex; align-items: center; gap: 12px; } .nav-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--win); box-shadow: 0 0 12px var(--win), 0 0 4px var(--win); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .nav-links { display: flex; gap: 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .nav-links a { position: relative; transition: color 200ms var(--ease-out); } .nav-links a:hover { color: var(--fg); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease-out); } .nav-links a:hover::after { transform: scaleX(1); } .nav-cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .nav-cta:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 24px -8px var(--accent), inset 0 0 0 1px var(--accent); } @media (max-width: 720px) { .nav-links { display: none; } /* Mobile: stack the hero as a column so the scroll cue flows right under the CTAs (see .scroll-cue mobile rule) instead of floating at the bottom. Hero stays full-screen; the empty space below fades to pure black (body::after) to blend seamlessly into Safari 26's flat bottom chin. */ .hero { padding-top: 76px; padding-bottom: 16vh; align-items: center; flex-direction: column; justify-content: flex-end; } .hero-grid { gap: 32px; } } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100vh; display: flex; align-items: center; /* Reserve ~144px of bottom clearance for .scroll-cue (now 2× taller). Label 18px + 8px gap + 64px line + 0 gap + 18px chevron + padding. */ padding-top: 120px; padding-bottom: 144px; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; width: 100%; } body[data-layout="split"] .hero-grid { grid-template-columns: 1.2fr 1fr; align-items: center; } body[data-layout="asymmetric"] .hero-grid { grid-template-columns: 1fr; padding-left: 0; } body[data-layout="asymmetric"] .hero-inner { padding-left: 6vw; border-left: 1px solid var(--border); } body[data-layout="centered"] .hero-inner { text-align: center; margin-inline: auto; } body[data-layout="centered"] .hero-meta-row, body[data-layout="centered"] .hero-ctas { justify-content: center; } .hero-meta-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .hero-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--glass); border: 1px solid var(--border-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); animation: pulse 2.2s ease-in-out infinite; } .hero-status .latlng { color: var(--fg-dim); } .hero-wordmark { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: clamp(64px, 12vw, 180px); letter-spacing: -0.045em; line-height: 0.88; text-wrap: balance; margin: 0 0 28px; position: relative; /* Perspective is applied INSIDE the transform on .wm-3d (see app.js) rather than here, so the vanishing point is the wordmark's own centre. Setting it on this full-width block put the vanishing point off to the right of the left-anchored text, which skewed the tilt diagonally. */ transform-style: preserve-3d; touch-action: none; /* claim touch so we can drive tilt on mobile */ cursor: none; will-change: transform; } @media (pointer: coarse), (hover: none) { .hero-wordmark { cursor: pointer; } } .hero-wordmark .hint-3d { position: absolute; left: 0; bottom: -22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); opacity: 0.7; pointer-events: none; transition: opacity 240ms var(--ease-out); } .hero-wordmark.engaged .hint-3d { opacity: 0; } /* Per-word face colour + a darker --ext (extrusion side) colour used by the stacked text-shadow below to give each glyph real thickness. */ .hero-wordmark .bit { color: var(--bit); --ext: #0B4E70; } .hero-wordmark .vibe { color: var(--vibe); --ext: #8A1E0C; } .hero-wordmark .labs { color: var(--labs); --ext: #8C857A; } .hero-wordmark { --ext: #5a5550; } /* fallback for the spacer word */ /* Extruded thickness — 13 stacked shadows form the downward "side" of each letter so the wordmark reads as a solid 3D object. Each layer's offset is multiplied by --xd (0..1, set by JS from the live tilt), so at rest the logo is FLAT (like before) and the depth only appears as it tilts on scroll/interaction. The last layer is an ambient cast shadow. */ .hero-wordmark .word, .hero-wordmark .ch { /* 9 extrude layers + 1 ambient (was 18+1). Halving the per-char layer count cuts the per-frame paint cost of the --xd-driven extrude, which is what overwhelmed the compositor on fast pointer moves (12 chars x 19 layers = 228 text-shadow repaints/frame -> wordmark layer dropped/mis-scaled = strobe). */ text-shadow: 0 calc(0.04em * var(--xd, 0)) 0 var(--ext), 0 calc(0.08em * var(--xd, 0)) 0 var(--ext), 0 calc(0.12em * var(--xd, 0)) 0 var(--ext), 0 calc(0.16em * var(--xd, 0)) 0 var(--ext), 0 calc(0.20em * var(--xd, 0)) 0 var(--ext), 0 calc(0.24em * var(--xd, 0)) 0 var(--ext), 0 calc(0.28em * var(--xd, 0)) 0 var(--ext), 0 calc(0.32em * var(--xd, 0)) 0 var(--ext), 0 calc(0.38em * var(--xd, 0)) 0 var(--ext), 0 calc(0.46em * var(--xd, 0)) calc(0.5em * var(--xd, 0)) rgba(0, 0, 0, 0.6); } /* 3D scene wrapper - the element we rotate. Sits inside the wordmark so the tilt origin (perspective) is on the wordmark and the scene is a child. */ .hero-wordmark .wm-3d { display: inline-block; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); /* No CSS transition here — the rAF loop in app.js (initWordmark/init3DTilt) is the sole animator and does its own easing. A transition on transform fights the per-frame updates and swallows the scroll-driven tilt. */ will-change: transform; } /* NO transition on .wm-3d transform. The rAF loop (app.js init3DTilt) rewrites this transform every frame and already eases it (lerp 0.12). A CSS transition here fights those per-frame writes and STROBES on fast pointer movement — the bug was that it was applied only while .engaged, so it strobed on hover. */ .hero-wordmark .word { display: inline-block; transform-style: preserve-3d; } .hero-wordmark .ch { display: inline-block; opacity: 0; transform: translate3d(0, 0.4em, 0); animation: chIn 700ms var(--ease-out) forwards; transform-style: preserve-3d; /* Per-letter parallax depth, set by JS via --depth on each .ch */ --depth: 0; will-change: transform; } @keyframes chIn { to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Once the intro has played (JS adds .lit after it finishes), the per-letter chIn animation is permanently off and each letter rests in its JS-controlled depth state. This is keyed on .lit (NOT .engaged): keying it on .engaged made chIn RE-FIRE every time the mouse left the logo (the .engaged class dropped → the base `.ch { animation: chIn }` re-applied → all letters re-animated) = the choppy/strobing reset on fast mouse-leave. The hover lift still works via --depth-scale, which JS eases up on engage and back down on leave (smooth). */ .hero-wordmark.lit .ch { animation: none; opacity: 1; transform: translate3d(0, 0, calc(var(--depth) * 1px * var(--depth-scale, 1))); } /* Soft glow shadow that intensifies on engagement (the 3D lift feeling). */ /* 2026-05-26 — wordmark glow removed. A blurred element inside the preserve-3d scene gets clipped to a hard rectangle by the browser's flattening, which showed as a seam breaking the seamless background on hover. The per-character depth + scroll/pointer tilt carry the effect without it. */ .hero-lede { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: var(--fg); margin-bottom: 18px; max-width: 58ch; text-wrap: pretty; letter-spacing: -0.01em; } .hero-lede em { font-family: var(--font-wm); font-style: italic; font-weight: 500; color: var(--labs); } .hero-sub { font-size: 15.5px; color: var(--fg-muted); margin-bottom: 36px; max-width: 56ch; line-height: 1.6; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; border: 1px solid var(--border-strong); background: var(--glass); color: var(--fg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 240ms var(--ease-out); overflow: hidden; } .btn::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 60%); opacity: 0; transition: opacity 200ms var(--ease-out); } .btn:hover::before { opacity: 1; } .btn:hover { border-color: var(--accent); box-shadow: 0 0 32px -10px var(--accent); transform: translateY(-1px); } .btn > * { position: relative; z-index: 1; } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 32px -6px var(--accent); } .btn-primary:hover { background: var(--accent); filter: brightness(1.1); box-shadow: 0 0 48px -4px var(--accent); } .btn-ghost { background: transparent; } .btn .arrow { transition: transform 220ms var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } /* Magnetic hover targets get smoothed positioning via JS */ .magnet { will-change: transform; transition: transform 260ms var(--ease-out); } /* ============================================================ Scroll cue — compact, never crosses content ------------------------------------------------------------ 2026-05-26 redesign: shrunk from 200px → 32px line so the element never overlaps the hero CTAs or sub-copy at any viewport. Bottom-centered in the dedicated 96px clearance reserved by .hero { padding-bottom: 96px }. Total height ≈ 70px (label + gap + line + gap + chevron). Same colorway + spark/flash motion, just proportionate. ============================================================ */ .scroll-cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); /* gap:0 between line and chevron so the chevron's tail visually connects directly to the bottom of the line. */ display: inline-flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fg-muted); text-decoration: none; z-index: 12; padding: 6px 12px; border-radius: 6px; min-height: 44px; /* WCAG AA touch target */ /* Opacity is driven per-frame by JS (synced to the logo's scroll fade), so no opacity transition here — it would fight the per-frame writes. */ transition: color 200ms var(--ease-out); } .scroll-cue:hover { color: var(--fg); } .scroll-cue:focus-visible { outline: 2px solid var(--bit); outline-offset: 3px; } .scroll-cue__label { font-size: 18px; letter-spacing: 0.32em; opacity: 0.65; /* Sit just above the line with a small breathing gap. */ margin-bottom: 10px; } /* Line: cyan→scarlet gradient, 64px (2× the 32px starter size) */ .scroll-cue .line { position: relative; width: 1.5px; height: 64px; background: linear-gradient(180deg, var(--bit) 0%, var(--vibe) 100%); border-radius: 2px; box-shadow: 0 0 10px -3px var(--vibe); overflow: hidden; } /* The "charge" — bright spark travels down the line into the chevron */ .scroll-cue .line::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -55%; height: 55%; background: linear-gradient(180deg, transparent 0%, rgba(31, 184, 255, 0.55) 40%, rgba(255, 69, 32, 1) 85%, rgba(255, 255, 255, 0.9) 100%); filter: blur(1.5px); animation: cueCharge 2.2s cubic-bezier(0.55, 0.08, 0.85, 0.45) infinite; } @keyframes cueCharge { 0% { top: -55%; opacity: 0; } 12% { opacity: 0.7; } 85% { top: 100%; opacity: 1; } 92% { opacity: 0; } 100% { top: -55%; opacity: 0; } } /* 3D chevron: two filled facets meeting at a central spine produce a chiseled, folded-metal look. The CSS layer adds the cast-shadow halo (composed of a soft scarlet drop-shadow) plus the synced flash. The highlight rim is part of the SVG. */ .scroll-cue .cue-arrow { width: 26px; height: 22px; /* Pull the chevron up so its tail meets the line endpoint. */ margin-top: -2px; overflow: visible; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(255, 69, 32, 0.35)); animation: cueArrowPulse 2.2s cubic-bezier(0.55, 0.08, 0.85, 0.45) infinite; } .scroll-cue .cue-arrow__rim { /* The rim highlight pulses brighter on each cycle so the apex catches the spark. */ animation: cueArrowRim 2.2s cubic-bezier(0.55, 0.08, 0.85, 0.45) infinite; } @keyframes cueArrowPulse { 0%, 70% { transform: translateY(0); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(255, 69, 32, 0.35)); } 84% { transform: translateY(2px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 69, 32, 0.85)) drop-shadow(0 0 28px rgba(255, 69, 32, 0.45)); } 100% { transform: translateY(0); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(255, 69, 32, 0.35)); } } @keyframes cueArrowRim { 0%, 70% { stroke: rgba(255, 238, 228, 0.55); } 84% { stroke: rgba(255, 255, 250, 1); } 100% { stroke: rgba(255, 238, 228, 0.55); } } /* Narrow viewports: keep visible (was previously hidden), scale down */ @media (max-width: 720px) { /* In normal flow on mobile (hero is a column) so it sits right under the "Hire the studio" button instead of floating low. static + transform:none cancels the absolute bottom-centering. */ .scroll-cue { position: static; bottom: auto; transform: none; margin: 28px auto 0; padding: 4px 10px; font-size: 15px; } .scroll-cue__label { font-size: 15px; margin-bottom: 8px; } .scroll-cue .line { height: 48px; } .scroll-cue .cue-arrow { width: 22px; height: 18px; } } @media (max-width: 380px) { .scroll-cue__label { font-size: 13px; margin-bottom: 6px; } .scroll-cue .line { height: 40px; } .scroll-cue .cue-arrow { width: 20px; height: 17px; } } @media (prefers-reduced-motion: reduce) { .scroll-cue .line::after, .scroll-cue .cue-arrow, .scroll-cue .cue-arrow__rim { animation: none; } } /* ============================================================ HERO · variant: 3D cluster ============================================================ */ .hero-cluster { position: relative; width: 100%; aspect-ratio: 1; max-width: 560px; margin-inline: auto; perspective: 1200px; display: none; } body[data-hero="cluster"] .hero-text { display: none; } body[data-hero="cluster"] .hero-cluster { display: block; } body[data-hero="cluster"] .hero-grid { grid-template-columns: 1fr; place-items: center; } .cluster-scene { position: absolute; inset: 0; transform-style: preserve-3d; animation: clusterSpin calc(40s / var(--motion, 1)) linear infinite; } @keyframes clusterSpin { from { transform: rotateY(0deg) rotateX(8deg); } to { transform: rotateY(360deg) rotateX(8deg); } } .cluster-node { position: absolute; top: 50%; left: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; transition: border-color 200ms var(--ease-out), box-shadow 220ms var(--ease-out); transform-style: preserve-3d; } .cluster-node:hover { border-color: var(--accent); box-shadow: 0 0 36px -8px var(--accent); } .cluster-node svg { width: 56px; height: 56px; } .cluster-node .lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--fg-muted); white-space: nowrap; opacity: 0; transition: opacity 200ms var(--ease-out); } .cluster-node:hover .lbl { opacity: 1; } .cluster-center { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, var(--vibe) 0%, transparent 70%); filter: blur(20px); animation: clusterCore 4s ease-in-out infinite; } @keyframes clusterCore { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; } } /* ============================================================ HERO · variant: terminal ============================================================ */ .hero-terminal { display: none; max-width: 760px; background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04); margin-bottom: 32px; } body[data-hero="terminal"] .hero-text { display: none; } body[data-hero="terminal"] .hero-terminal { display: block; } body[data-hero="terminal"] .hero-grid { grid-template-columns: 1fr; } .term-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(20,18,17,0.55); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim); } .term-chrome .dots { display: flex; gap: 6px; margin-right: 12px; } .term-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; } .term-chrome .dots span:nth-child(1) { background: #FF5F57; } .term-chrome .dots span:nth-child(2) { background: #FEBC2E; } .term-chrome .dots span:nth-child(3) { background: #28C840; } .term-chrome .path { flex: 1; text-align: center; } .term-body { padding: 28px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; min-height: 360px; } .term-line { display: flex; gap: 10px; } .term-line .prompt { color: var(--win); flex-shrink: 0; } .term-line .cmd { color: var(--fg); } .term-line .arg { color: var(--bit); } .term-line .flag { color: var(--labs); } .term-out { color: var(--fg-muted); padding-left: 22px; } .term-out .ok { color: var(--win); } .term-out .err { color: var(--vibe); } .term-out .acc { color: var(--accent); } .term-cursor { display: inline-block; width: 8px; height: 1em; background: var(--fg); vertical-align: -2px; animation: termCursor 900ms steps(2) infinite; } @keyframes termCursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ============================================================ Marquee ticker ============================================================ */ .ticker { position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(10,10,10,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; z-index: 10; } .ticker-track { display: flex; gap: 56px; padding: 18px 0; width: max-content; animation: tickerScroll calc(60s / var(--motion, 1)) linear infinite; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 14px; color: var(--fg-muted); } .ticker-item .sym { color: var(--accent); } .ticker-item .ok { color: var(--win); } .ticker-item .warn { color: var(--vibe); } .ticker-item strong { color: var(--fg); font-weight: 500; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ Stats strip ============================================================ */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats-strip .stat { padding: 36px 24px; border-right: 1px solid var(--border); position: relative; overflow: hidden; } .stats-strip .stat:last-child { border-right: 0; } .stats-strip .stat .n { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.04em; line-height: 1; color: var(--fg); display: flex; align-items: baseline; gap: 6px; } .stats-strip .stat .n .unit { font-size: 0.5em; color: var(--accent); } .stats-strip .stat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-top: 12px; } @media (max-width: 800px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } .stats-strip .stat:nth-child(2) { border-right: 0; } .stats-strip .stat:nth-child(1), .stats-strip .stat:nth-child(2) { border-bottom: 1px solid var(--border); } } /* ============================================================ Products section - multiple treatments ============================================================ */ .products-header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 56px; flex-wrap: wrap; } .products-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } .products-legend .leg { display: inline-flex; align-items: center; gap: 8px; } .products-legend .leg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; } .leg.live::before { background: var(--win); box-shadow: 0 0 8px var(--win); } .leg.preview::before { background: var(--bit); box-shadow: 0 0 8px var(--bit); } .leg.pending::before { background: var(--vibe); } .leg.future::before { background: var(--labs); } /* GRID variant (default) */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } } .product-card { position: relative; padding: 28px; background: var(--glass); border: 1px solid var(--border-strong); border-radius: 18px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); overflow: hidden; transition: border-color 240ms var(--ease-out), transform 260ms var(--ease-out), box-shadow 320ms var(--ease-out), background 240ms var(--ease-out); display: flex; flex-direction: column; gap: 18px; min-height: 240px; cursor: none; } @media (pointer: coarse), (hover: none) { .product-card { cursor: pointer; } } .product-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), var(--hero-color, var(--accent)) 0%, transparent 50%); opacity: 0; transition: opacity 320ms var(--ease-out); mix-blend-mode: screen; filter: blur(20px); } .product-card:hover::before { opacity: 0.25; } .product-card:hover { border-color: var(--hero-color, var(--accent)); transform: translateY(-2px); box-shadow: 0 30px 60px -30px var(--hero-color, var(--accent)), 0 0 0 1px var(--hero-color, var(--accent)) inset; } .product-card .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .product-card .mark { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; } .product-card .mark svg { width: 100%; height: 100%; } .product-card .phase { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--fg-muted); white-space: nowrap; } .product-card .phase.live { color: var(--win); border-color: var(--win); background: rgba(24, 230, 155, 0.08); } .product-card .phase.preview { color: var(--bit); border-color: var(--bit); background: rgba(31, 184, 255, 0.08); } .product-card .phase.pending { color: var(--vibe); border-color: var(--vibe); background: rgba(255, 69, 32, 0.08); } .product-card .phase.future { color: var(--labs); border-color: var(--labs); } .product-card .name { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 30px; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; } .product-card .name .mid { color: var(--hero-color, var(--fg)); } .product-card .blurb { color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; flex: 1; } .product-card .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--fg-dim); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .product-card .meta .dom { color: var(--fg-muted); } .product-card .meta .arrow { margin-left: auto; transition: transform 240ms var(--ease-out), color 200ms var(--ease-out); color: var(--fg-muted); } .product-card:hover .meta .arrow { transform: translateX(4px); color: var(--hero-color, var(--accent)); } /* CONSTELLATION variant */ .products-constellation { position: relative; display: none; height: 720px; width: 100%; margin: 0 auto; } body[data-products="constellation"] .products-grid, body[data-products="orbit"] .products-grid, body[data-products="horizontal"] .products-grid, body[data-products="timeline"] .products-grid { display: none; } body[data-products="constellation"] .products-constellation, body[data-products="orbit"] .products-orbit, body[data-products="horizontal"] .products-horizontal, body[data-products="timeline"] .products-timeline { display: block; } .products-constellation svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .products-constellation svg.lines path { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0.55; animation: dashFlow 30s linear infinite; } @keyframes dashFlow { to { stroke-dashoffset: -200; } } .const-node { position: absolute; width: 130px; height: 130px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: none; } @media (pointer: coarse), (hover: none) { .const-node { cursor: pointer; } } .const-node .ring { width: 88px; height: 88px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; transition: border-color 220ms var(--ease-out), box-shadow 280ms var(--ease-out), transform 240ms var(--ease-out); } .const-node .ring svg { width: 48px; height: 48px; } .const-node .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); text-align: center; } .const-node:hover .ring { border-color: var(--hero-color, var(--accent)); box-shadow: 0 0 32px -4px var(--hero-color, var(--accent)); transform: scale(1.08); } .const-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 180px; display: grid; place-items: center; font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 22px; letter-spacing: -0.02em; line-height: 1.05; text-align: center; color: var(--fg); background: radial-gradient(circle, rgba(255,69,32,0.18), transparent 70%); border-radius: 50%; } .const-center .bit { color: var(--bit); } .const-center .vibe { color: var(--vibe); } .const-center .labs { color: var(--labs); } /* ORBIT variant */ .products-orbit { position: relative; display: none; height: 720px; width: 100%; max-width: 720px; margin: 0 auto; } .orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px dashed var(--border-strong); border-radius: 50%; transform: translate(-50%, -50%); } .orbit-ring.r1 { width: 360px; height: 360px; } .orbit-ring.r2 { width: 580px; height: 580px; } .orbit-track { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: orbitSpin calc(60s / var(--motion, 1)) linear infinite; } .orbit-track.r1 { animation-duration: calc(40s / var(--motion, 1)); } .orbit-track.r2 { animation-duration: calc(80s / var(--motion, 1)); animation-direction: reverse; } @keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .orbit-track .const-node { animation: orbitNodeCounter calc(60s / var(--motion, 1)) linear infinite; } .orbit-track.r1 .const-node { animation-duration: calc(40s / var(--motion, 1)); } .orbit-track.r2 .const-node { animation-direction: reverse; animation-duration: calc(80s / var(--motion, 1)); } @keyframes orbitNodeCounter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } } /* HORIZONTAL variant */ .products-horizontal { display: none; } .products-horizontal .scroller { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 24px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .products-horizontal .scroller::-webkit-scrollbar { height: 4px; } .products-horizontal .scroller::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; } .products-horizontal .product-card { flex: 0 0 360px; scroll-snap-align: start; } /* TIMELINE variant */ .products-timeline { display: none; position: relative; } .products-timeline::before { content: ""; position: absolute; left: 60px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--win), var(--bit), var(--vibe), var(--labs)); opacity: 0.4; } .timeline-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 16px 0; align-items: start; position: relative; } .timeline-phase { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding-top: 8px; position: relative; } .timeline-phase::before { content: ""; position: absolute; right: -36px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--phase-color, var(--labs)); box-shadow: 0 0 12px var(--phase-color, transparent); } /* ============================================================ Now shipping section ============================================================ */ .now-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; } @media (max-width: 800px) { .now-grid { grid-template-columns: 1fr; } } .now-list { display: flex; flex-direction: column; gap: 6px; } .now-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 18px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--border); transition: background 200ms var(--ease-out); } .now-item:hover { background: rgba(245, 245, 244, 0.02); } .now-item .date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-dim); } .now-item .what { font-size: 15px; line-height: 1.5; } .now-item .what strong { color: var(--fg); font-weight: 600; } .now-item .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); } .now-item .tag.ship { color: var(--win); border-color: var(--win); background: rgba(24,230,155,0.08); } .now-item .tag.build { color: var(--bit); border-color: var(--bit); background: rgba(31,184,255,0.08); } .now-item .tag.plan { color: var(--labs); } /* Activity feed panel (mini) */ .activity-card { background: var(--glass); border: 1px solid var(--border-strong); border-radius: 18px; padding: 24px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); position: sticky; top: 100px; } .activity-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .activity-head .ttl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .activity-head .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--win); } .activity-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--win); box-shadow: 0 0 8px var(--win); animation: pulse 1.6s ease-in-out infinite; } .activity-log { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--fg-muted); max-height: 320px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%); mask-image: linear-gradient(180deg, black 70%, transparent 100%); } .activity-log .row { display: flex; gap: 10px; } .activity-log .ts { color: var(--fg-dim); flex-shrink: 0; } .activity-log .who { color: var(--bit); flex-shrink: 0; } .activity-log .ev { color: var(--fg); } .activity-log .ev em { color: var(--vibe); font-style: normal; } /* ============================================================ Press kit + Newsletter ============================================================ */ .kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 800px) { .kit-grid { grid-template-columns: 1fr; } } .glass-card { position: relative; padding: 36px; background: var(--glass); border: 1px solid var(--border-strong); border-radius: 20px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); overflow: hidden; } .glass-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.5; } .kit-title { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 32px; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 12px; } .kit-sub { color: var(--fg-muted); font-size: 15px; line-height: 1.55; margin-bottom: 24px; } .kit-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .kit-download { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(245,245,244,0.04); border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-mono); font-size: 12px; transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); } .kit-download:hover { border-color: var(--accent); background: rgba(245,245,244,0.06); } .kit-download .ext { color: var(--accent); font-weight: 600; } .signup-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .signup-input { flex: 1; min-width: 220px; padding: 14px 18px; background: rgba(10,10,10,0.6); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg); font-family: var(--font-sans); font-size: 14.5px; transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .signup-input::placeholder { color: var(--fg-dim); } .signup-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .signup-msg { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--win); margin-top: 12px; min-height: 16px; } .signup-fineprint { font-size: 12px; color: var(--fg-dim); margin-top: 12px; } /* Palette swatches inside press kit */ .kit-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 20px; } .kit-swatch { aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: rgba(0,0,0,0.7); position: relative; overflow: hidden; cursor: none; transition: transform 200ms var(--ease-out); } @media (pointer: coarse), (hover: none) { .kit-swatch { cursor: pointer; } } .kit-swatch:hover { transform: scale(1.04); } .kit-swatch.dark { color: rgba(255,255,255,0.8); } .kit-swatch .hex { font-weight: 600; } .kit-swatch .lbl { opacity: 0.7; font-size: 8.5px; } /* ============================================================ Contact ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } .contact-h { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: clamp(40px, 6vw, 86px); letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 32px; } .contact-h .accent { color: var(--accent); } .contact-h em { font-family: var(--font-wm); font-style: italic; font-weight: 500; color: var(--labs); } .contact-channels { display: flex; flex-direction: column; gap: 10px; } /* 2026-05-26 — contact rows now read as buttons: card surface with hover/focus highlight, no trailing arrow. The static "where" row uses a subdued variant that doesn't react to hover. */ .contact-row { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.012); align-items: center; text-decoration: none; transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } a.contact-row { cursor: pointer; } a.contact-row:hover, a.contact-row:focus-visible { background: rgba(255, 69, 32, 0.06); border-color: rgba(255, 69, 32, 0.4); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -16px rgba(255, 69, 32, 0.55), 0 0 0 1px rgba(255, 69, 32, 0.18); outline: none; } a.contact-row:focus-visible { box-shadow: 0 0 0 3px rgba(31, 184, 255, 0.45), 0 12px 28px -16px rgba(255, 69, 32, 0.55); } a.contact-row:active { transform: translateY(0); background: rgba(255, 69, 32, 0.10); } a.contact-row:hover .val { color: var(--accent); } .contact-row .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .contact-row .val { font-family: var(--font-mono); font-size: 15px; color: var(--fg); transition: color 200ms var(--ease-out); } /* Static "where" row — informational only (no link). Picks up the same visual highlight as the link rows on hover for consistency. */ .contact-row--static { cursor: default; opacity: 0.92; } .contact-row--static:hover { background: rgba(255, 69, 32, 0.06); border-color: rgba(255, 69, 32, 0.4); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -16px rgba(255, 69, 32, 0.55), 0 0 0 1px rgba(255, 69, 32, 0.18); } .contact-row--static:hover .val { color: var(--accent); transition: color 200ms var(--ease-out); } /* ============================================================ Footer ============================================================ */ footer { padding: 56px var(--gutter) 36px; border-top: 1px solid var(--border); background: rgba(8, 8, 8, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 10; } .footer-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; } @media (max-width: 1100px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-grid > .footer-col:last-child { grid-column: 2 / -1; } } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > .footer-col:last-child { grid-column: auto; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--fg-muted); transition: color 200ms var(--ease-out); } .footer-col a:hover { color: var(--accent); } .footer-brand-block { display: flex; flex-direction: column; gap: 16px; } .footer-wm { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 38px; letter-spacing: -0.025em; line-height: 1; } .footer-wm .bit { color: var(--bit); } .footer-wm .vibe { color: var(--vibe); } .footer-wm .labs { color: var(--labs); } .footer-tag { color: var(--fg-muted); font-size: 13.5px; line-height: 1.55; max-width: 36ch; } .footer-base { max-width: var(--maxw); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; } /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--rd, 0ms); } .reveal.in { opacity: 1; transform: translateY(0); } /* ============================================================ Tweaks panel (custom - built without React) ============================================================ */ .tweaks-fab { position: fixed; bottom: 22px; right: 22px; z-index: 200; width: 52px; height: 52px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--fg); display: none; align-items: center; justify-content: center; cursor: none; transition: border-color 200ms, transform 200ms; } @media (pointer: coarse), (hover: none) { .tweaks-fab { cursor: pointer; } } .tweaks-fab.on { display: flex; } .tweaks-fab:hover { border-color: var(--accent); transform: scale(1.06); } .tweaks-fab svg { width: 22px; height: 22px; } .tweaks-panel { position: fixed; bottom: 84px; right: 22px; z-index: 200; width: min(360px, calc(100vw - 44px)); max-height: calc(100vh - 120px); overflow-y: auto; background: var(--glass-strong); border: 1px solid var(--border-strong); border-radius: 18px; backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); padding: 22px; color: var(--fg); display: none; flex-direction: column; gap: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); } .tweaks-panel.on { display: flex; } .tweaks-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .tweaks-head .ttl { font-family: var(--font-wm); font-weight: 700; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 22px; letter-spacing: -0.02em; } .tweaks-head .close { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--fg-muted); transition: background 200ms; } .tweaks-head .close:hover { background: rgba(245,245,244,0.06); color: var(--fg); } .tweak { display: flex; flex-direction: column; gap: 8px; } .tweak .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } .tweak .options { display: flex; flex-wrap: wrap; gap: 6px; } .tweak .opt { padding: 7px 12px; background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); transition: border-color 180ms, color 180ms, background 180ms; } .tweak .opt.sel { border-color: var(--accent); color: var(--bg); background: var(--accent); } .tweak .opt:hover:not(.sel) { border-color: var(--fg-muted); color: var(--fg); } .tweak input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: rgba(245,245,244,0.1); border-radius: 999px; cursor: none; } @media (pointer: coarse), (hover: none) { .tweak input[type="range"] { cursor: pointer; } } .tweak input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 12px var(--accent); } .tweak input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); } /* ============================================================ Density ============================================================ */ body[data-density="dense"] { --density: 0.65; --gutter: clamp(16px, 3vw, 36px); } body[data-density="balanced"] { --density: 1; } body[data-density="airy"] { --density: 1.35; } /* ============================================================ Color emphasis ============================================================ */ body[data-color="bit"] { --accent: #1FB8FF; --accent-soft: rgba(31,184,255,0.22); } body[data-color="vibe"] { --accent: #FF4520; --accent-soft: rgba(255,69,32,0.22); } body[data-color="labs"] { --accent: #B0A29A; --accent-soft: rgba(176,162,154,0.22); } body[data-color="win"] { --accent: #18E69B; --accent-soft: rgba(24,230,155,0.22); } body[data-color="multi"] { --accent: #FF4520; --accent-soft: rgba(255,69,32,0.22); } /* In multi-mode, decorate underlines/dividers with all four */ body[data-color="multi"] .section-tag::before { background: linear-gradient(90deg, var(--bit), var(--vibe), var(--win)); width: 36px; height: 2px; } /* ============================================================ MOBILE FIXES (audit 2026-05-23) Progressive tightening for narrow viewports. Order matters: tablet (<800), small phone (<560), tiny (<400). ============================================================ */ @media (max-width: 800px) { /* Activity card un-sticks when stacked under .now-list */ .activity-card { position: static; top: auto; } .stats-strip .stat { padding: 28px 18px; } } @media (max-width: 560px) { /* Stack the timeline-phase label above the row content */ .timeline-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } .timeline-phase::before { display: none; } /* Tighten product-card padding for small phones */ .product-card { padding: 22px; } /* Now-list rows: stack date/text, keep tag on the right */ .now-item { grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; padding: 14px 2px; } .now-item .date { grid-column: 1 / -1; } /* Palette swatches go 3-col so labels stay legible */ .kit-palette { grid-template-columns: repeat(3, 1fr); } /* Hero CTAs full-width and stacked */ .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; } .hero-ctas .btn { width: 100%; justify-content: center; } /* Signup button takes full row when input wraps */ .signup-form button { width: 100%; justify-content: center; } /* Section vertical padding tightening - large hero/section breaks felt too generous */ section { padding: calc(80px * var(--density)) 0; } } @media (max-width: 400px) { /* Stats strip → single column on the narrowest devices to avoid number truncation */ .stats-strip { grid-template-columns: 1fr; } .stats-strip .stat { border-right: 0; border-bottom: 1px solid var(--border); } .stats-strip .stat:last-child { border-bottom: 0; } /* Nav CTA shrinks to a smaller pill on tiny widths */ .nav-cta { padding: 8px 12px; font-size: 11px; } .nav-brand { font-size: 18px; } /* Smaller container gutter on tiny */ :root { --gutter: 16px; } } /* iOS Safari: prevent double-tap zoom on action buttons (mobile-friendly accessibility) */ @media (pointer: coarse), (hover: none) { .btn, .signup-form button, .product-card, .kit-swatch, .contact-row { touch-action: manipulation; } } /* ============================================================ PRODUCT CARD LOGO ANIMATIONS (inherited from each product's own dedicated site - same keyframes, scaled to the card mark). Each .product-card .mark contains one .bvl-anim-* element per the data-product attribute. ============================================================ */ /* gitdeployhub: chevron rocket-launches up + resets - mirrors brandChevronLaunch on gitdeployhub.com */ .product-card[data-product="gitdeployhub"] .mark svg { overflow: visible; } .bvl-anim-chevron { transform-origin: 50% 50%; transform-box: fill-box; animation: bvlChevronLaunch 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes bvlChevronLaunch { 0%, 45% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { transform: translateY(2px); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } 88% { transform: translateY(-44px); opacity: 0; } 89% { transform: translateY(8px); opacity: 0; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 100% { transform: translateY(0); opacity: 1; } } /* gitsafehub: Swiss cross pulses with green glow - mirrors brandSafePulse on gitsafehub.com */ .bvl-anim-cross { transform-origin: center; transform-box: fill-box; animation: bvlSafePulse 2.6s ease-in-out infinite; } @keyframes bvlSafePulse { 0%, 100% { opacity: 0.92; transform: scale(0.96); filter: drop-shadow(0 0 0 transparent); } 50% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(24,230,155,0.85)); } } /* youasktube: play triangle pulses + 3 audio-wave bars dance - mirrors the actual youasktube.com brand-mark animation (yt-play-pulse + yt-bar-wave). The mark is intentionally NOT a solid-red square with a plain triangle - that's YouTube's iconography and a trademark risk. */ .bvl-anim-play { transform-origin: 30% 50%; transform-box: fill-box; animation: bvlPlayPulse 2.6s ease-in-out infinite; } @keyframes bvlPlayPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 4px rgba(255,69,32,0.6)); } } .bvl-anim-bar-1, .bvl-anim-bar-2, .bvl-anim-bar-3 { transform-origin: center; transform-box: fill-box; animation: bvlBarWave 1.4s ease-in-out infinite; } .bvl-anim-bar-1 { animation-delay: 0s; } .bvl-anim-bar-2 { animation-delay: 0.18s; } .bvl-anim-bar-3 { animation-delay: 0.36s; } @keyframes bvlBarWave { 0%, 100% { transform: scaleY(0.4); opacity: 0.55; } 50% { transform: scaleY(1); opacity: 1; } } /* gitllmhub: blinks like a code cursor */ .bvl-anim-blink { animation: bvlCodeBlink 1.6s steps(2, end) infinite; } @keyframes bvlCodeBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.45; } } /* whatisgithub: ? bobs */ .bvl-anim-bob { transform-origin: 50px 60px; transform-box: fill-box; animation: bvlBob 3.2s ease-in-out infinite; } @keyframes bvlBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate( 3deg); } } /* gitvibehub: sine wave flows */ .bvl-anim-wave { stroke-dasharray: 30 14; stroke-dashoffset: 0; animation: bvlWaveFlow 2.4s linear infinite; } @keyframes bvlWaveFlow { to { stroke-dashoffset: -44; } } /* keepgit: archive drawer pulses gently */ .bvl-anim-archive { transform-origin: center; transform-box: fill-box; animation: bvlArchiveBob 3.4s ease-in-out infinite; } @keyframes bvlArchiveBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.5px) scale(1.04); } } /* explaingit: magnifier sweeps */ .bvl-anim-search { transform-origin: 42px 42px; transform-box: fill-box; animation: bvlSearchSweep 4s ease-in-out infinite; } @keyframes bvlSearchSweep { 0%, 100% { transform: rotate(-8deg) translate(0, 0); } 50% { transform: rotate( 10deg) translate(2px, 1px); } } /* bitvibelabs (this site): the gradient B cycles hue subtly */ .bvl-anim-gradient { animation: bvlGradientShift 6s ease-in-out infinite; } @keyframes bvlGradientShift { 0%, 100% { filter: hue-rotate(0deg) saturate(1); } 50% { filter: hue-rotate(-12deg) saturate(1.15); } } /* Hover boost - every mark scales slightly when you hover the card */ .product-card:hover .mark { transform: scale(1.04); transition: transform 220ms var(--ease-out); } /* Respect prefers-reduced-motion - disable all the marquee + freeze marks */ @media (prefers-reduced-motion: reduce) { .bvl-anim-chevron, .bvl-anim-cross, .bvl-anim-play, .bvl-anim-blink, .bvl-anim-bob, .bvl-anim-wave, .bvl-anim-archive, .bvl-anim-search, .bvl-anim-gradient, .bvl-anim-bar-1, .bvl-anim-bar-2, .bvl-anim-bar-3 { animation: none !important; } .bvl-anim-bar-1, .bvl-anim-bar-2, .bvl-anim-bar-3 { opacity: 1; } } /* 2026-05-24 inline brand wordmark used in body copy (signup fineprint, footer copy). */ .bvl-mark { white-space: nowrap; font-style: italic; font-weight: 700; letter-spacing: -0.01em; } /* Italic across every trademark mention - hero wordmark too. */ .hero-wordmark .word { font-style: italic; } /* 2026-05-24 hero-wordmark--xl: oversized variant that fills the empty hero space now that the lede was reduced to a single short line and the move/touch/tilt hint was removed. Default sizing was clamp(64px, 12vw, 180px). */ .hero-wordmark--xl { font-size: clamp(80px, 12.5vw, 190px); /* dialed back from 19vw/320 — was filling the desktop viewport */ letter-spacing: -0.055em; line-height: 0.86; margin: 0 0 18px; } @media (max-width: 720px) { .hero-wordmark--xl { font-size: clamp(64px, 18vw, 140px); letter-spacing: -0.04em; } } /* Lede now a single sentence; let it breathe with more weight. */ .hero-wordmark--xl + .hero-lede { font-size: clamp(18px, 2.2vw, 28px); margin-bottom: 22px; } /* 2026-05-26 — studio motto. Italic Fraunces (the logo wordmark font) echoes the hero brandmark visually. Used in two spots: 1. .hero-lede--motto → the "A studio for what comes next." line under the XL wordmark. 2. .footer-motto → same line, smaller, in the footer copy. */ .hero-lede.hero-lede--motto { font-family: var(--font-wm); font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: clamp(22px, 3vw, 38px); letter-spacing: -0.01em; color: var(--fg-muted); margin-top: 4px; } .footer-motto { font-family: var(--font-wm); font-style: italic; font-weight: 400; font-variation-settings: 'SOFT' 50, 'WONK' 0; font-size: 16px; letter-spacing: -0.005em; color: inherit; } /* 2026-05-26 — inline email link in the contact section. Turns scarlet on hover/focus, no underline. */ .email-link { color: var(--fg); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); } .email-link:hover, .email-link:focus-visible { color: var(--vibe); border-bottom-color: var(--vibe); outline: none; } .email-link:focus-visible { outline: 2px solid var(--bit); outline-offset: 3px; border-radius: 2px; } /* 2026-05-26 — product tiers (Live vs Early access). Quiet mono label above each grid; second group separated by extra top margin. */ .products-group + .products-group { margin-top: 56px; } .products-group__label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } /* 2026-05-26 — "more in the works" footnote below the curated products grid. Quiet, single line, italic Fraunces echo. */ .products-more { margin-top: 32px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-muted); text-align: center; } .products-more a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); } .products-more a:hover, .products-more a:focus-visible { color: var(--vibe); border-bottom-color: var(--vibe); outline: none; }