/* ============================================================ RONE AUDIO — site-wide stylesheet RONE graphite design language, as shipped in the plugins. Single dark theme by design: these are hardware instruments. ============================================================ */ :root { --ground: #14161A; --panel: #17191E; --card: #101216; --drawer: #1B1E23; --line: #23262C; --line2: #2A2E35; --line3: #383D45; --text: #E8EAED; --text2: #B9BDC4; --dim: #7A7F88; --faint: #4E535B; --neon: #9D6BFF; /* site accent = Plugins Center purple */ --neon-glow: rgba(157,107,255,0.5); --neon-soft: rgba(157,107,255,0.14); --c-reverb: #2BD9FF; --c-stutter: #FFD02B; --c-stucker: #9D6BFF; --c-throw: #9EC5FF; --c-flanger: #FF3E6C; --c-analyzer: #3EFF8B; --c-space: #FF8A3D; /* live knob state — driven by the homepage hero knobs */ --fx-space: 0.62; --fx-energy: 0.8; --fx-chaos: 0.38; --font-disp: 'Sora', 'Segoe UI', sans-serif; --font-body: 'Manrope', 'Segoe UI', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'Consolas', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); background: var(--ground); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1; } ::selection { background: var(--neon-soft); color: var(--text); } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; } /* per-product accent scopes (product pages set these on ) */ .acc-reverb { --kn: var(--c-reverb); --kn-glow: rgba(43,217,255,0.5); --kn-soft: rgba(43,217,255,0.14); } .acc-stutter { --kn: var(--c-stutter); --kn-glow: rgba(255,208,43,0.5); --kn-soft: rgba(255,208,43,0.14); } .acc-stucker { --kn: var(--c-stucker); --kn-glow: rgba(157,107,255,0.5); --kn-soft: rgba(157,107,255,0.14); } .acc-throw { --kn: var(--c-throw); --kn-glow: rgba(158,197,255,0.5); --kn-soft: rgba(158,197,255,0.14); } .acc-flanger { --kn: var(--c-flanger); --kn-glow: rgba(255,62,108,0.5); --kn-soft: rgba(255,62,108,0.14); } .acc-analyzer { --kn: var(--c-analyzer); --kn-glow: rgba(62,255,139,0.5); --kn-soft: rgba(62,255,139,0.14); } .acc-space { --kn: var(--c-space); --kn-glow: rgba(255,138,61,0.5); --kn-soft: rgba(255,138,61,0.14); } /* ---------- Nav ---------- */ #nav { position: sticky; top: 0; z-index: 50; background: rgba(23,25,30,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } #nav .wrap { display: flex; align-items: center; gap: 12px; height: 60px; } /* RONE R logo mark — the same inline SVG the plugins ship in their header */ .logo-glyph { width: 40px; height: 21px; flex-shrink: 0; overflow: visible; filter: drop-shadow(0 0 6px var(--neon-glow)); transition: filter 0.18s ease; } .logo-glyph .r-stem { fill: var(--neon); } .logo-glyph .r-line { fill: none; stroke: var(--neon); stroke-width: 4.2; } a:hover > .logo-glyph { filter: drop-shadow(0 0 11px var(--neon)); } .wordmark { font-family: var(--font-disp); font-size: 16px; font-weight: 800; letter-spacing: 0.14em; color: var(--text); white-space: nowrap; } .wordmark i { font-style: normal; color: var(--neon); text-shadow: 0 0 12px var(--neon-glow); } .nav-sub { font-size: 9px; font-weight: 700; color: var(--faint); letter-spacing: 0.3em; margin-top: 3px; } #nav nav { margin-left: auto; display: flex; align-items: center; gap: 26px; } #nav nav a.nav-link { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--dim); transition: color 0.2s; } #nav nav a.nav-link:hover, #nav nav a.nav-link.here { color: var(--text); } /* SIGN IN reads as an action, not a page: outlined pill next to the filled CTA */ #nav nav a.nav-signin { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line3); color: var(--text); font-size: 10px; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } #nav nav a.nav-signin:hover { border-color: var(--neon); color: var(--neon); box-shadow: 0 0 14px var(--neon-soft); } /* mobile menu */ .menu-btn { display: none; margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--line3); border-radius: 8px; background: transparent; color: var(--text2); cursor: pointer; align-items: center; justify-content: center; } #mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); } #mobile-menu a { padding: 14px 24px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; color: var(--text2); border-bottom: 1px solid var(--line); } #mobile-menu a:last-child { border-bottom: none; } #nav.mobile-open #mobile-menu { display: flex; } /* The full header row — brand, the PLUGINS sub-label, four links, the SIGN IN pill and the GET ALL ACCESS button — measures ~897px of content, so it needs a ~915px viewport before anything is forced to shrink. At 760px the pill was clipped off the right edge and SIGN IN wrapped to two lines; the hamburger now takes over at 940px, with room to spare above it. */ @media (max-width: 940px) { #nav nav { display: none; } .menu-btn { display: inline-flex; } .nav-sub { display: none; } } /* ---------- Buttons — straight from the plugin UIs ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 22px; border-radius: 8px; border: 1px solid var(--line3); background: transparent; color: var(--text2); font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn:hover { border-color: var(--dim); color: var(--text); } .btn:focus-visible, a:focus-visible, button:focus-visible, .knob:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; } .btn.fill { border-color: transparent; background: var(--neon); color: #0F1114; box-shadow: 0 0 calc(10px + var(--fx-energy) * 26px) var(--neon-glow); } .btn.fill:hover { filter: brightness(1.08); color: #0F1114; } .btn.sm { padding: 8px 16px; font-size: 10px; } /* ---------- Hero (homepage) ---------- */ #hero { position: relative; background: linear-gradient(180deg, var(--panel) 0%, var(--ground) 100%); border-bottom: 1px solid var(--line); overflow: hidden; } #hero-aura { position: absolute; inset: -25%; pointer-events: none; background: radial-gradient(45% 55% at 68% 22%, rgba(157,107,255,0.16) 0%, transparent 60%), radial-gradient(38% 48% at 25% 15%, rgba(43,217,255,0.10) 0%, transparent 55%), radial-gradient(30% 40% at 50% 80%, rgba(255,62,108,0.06) 0%, transparent 60%); opacity: calc(0.2 + var(--fx-space) * 0.8); transform: scale(calc(0.85 + var(--fx-space) * 0.35)); transition: opacity 0.25s ease, transform 0.4s ease; will-change: opacity, transform; } #hero .wrap { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; } .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.34em; color: var(--faint); text-transform: uppercase; } .eyebrow .led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon-glow); margin-right: 10px; vertical-align: 1px; animation: ledpulse calc(2.6s - var(--fx-energy) * 2s) ease-in-out infinite; } @keyframes ledpulse { 50% { opacity: 0.35; } } #hero h1 { font-family: var(--font-disp); font-weight: 800; font-size: clamp(34px, 6vw, 62px); line-height: 1.06; letter-spacing: -0.01em; margin: 22px 0 18px; text-wrap: balance; max-width: 15ch; text-shadow: calc(var(--fx-chaos) * 3px) 0 rgba(255,62,108, calc(var(--fx-chaos) * 0.55)), calc(var(--fx-chaos) * -3px) 0 rgba(43,217,255, calc(var(--fx-chaos) * 0.55)); will-change: transform; } #hero h1 em { font-style: normal; color: var(--neon); text-shadow: 0 0 24px var(--neon-glow); } #hero .lede { color: var(--text2); font-size: 17px; font-weight: 500; line-height: 1.65; max-width: 54ch; text-wrap: balance; } #hero .lede b { color: var(--text); font-weight: 800; } .hero-ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; justify-content: center; } .hero-chips { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; justify-content: center; } .chip { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--dim); border: 1px solid var(--line2); border-radius: 5px; padding: 5px 10px; background: var(--card); } /* ---------- Arc knobs (the plugins' signature control) ---------- */ #knob-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(28px, 6vw, 64px); margin-top: 54px; user-select: none; -webkit-user-select: none; } .knob-group { display: flex; flex-direction: column; align-items: center; gap: 12px; } .knob-group > label { font-size: 10px; font-weight: 800; letter-spacing: 0.28em; color: var(--dim); text-transform: uppercase; } .arck { position: relative; flex-shrink: 0; cursor: ns-resize; touch-action: none; } .arck svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .arck .track { fill: none; stroke: var(--line); stroke-linecap: round; } .arck .lit { fill: none; stroke: var(--kn, var(--neon)); stroke-linecap: round; filter: drop-shadow(0 0 5px var(--kn-glow, var(--neon-glow))); } .arck .kbody { position: absolute; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #363B42 0%, #26292F 52%, #1A1C21 100%); box-shadow: 0 12px 24px rgba(0,0,0,0.55), inset 0 2px 3px rgba(255,255,255,0.07), inset 0 -7px 16px rgba(0,0,0,0.45); } .arck .kbody::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #2C3037 0%, #1D2025 60%, #16181C 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.4); } .arck .kdot { position: absolute; left: 50%; border-radius: 50%; background: #F2F4F6; box-shadow: 0 0 7px rgba(255,255,255,0.5); z-index: 2; pointer-events: none; } .arck .cval { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--font-disp); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; z-index: 3; } .arck.size-m { width: 104px; height: 104px; } .arck.size-m .track, .arck.size-m .lit { stroke-width: 4.5; } .arck.size-m .kbody { inset: 13px; } .arck.size-m .kdot { top: 21px; width: 6px; height: 6px; margin-left: -3px; transform-origin: 50% 31px; } .arck.size-m .cval { font-size: 15px; } .arck.size-l { width: 124px; height: 124px; } .arck.size-l .track, .arck.size-l .lit { stroke-width: 5; } .arck.size-l .kbody { inset: 15px; } .arck.size-l .kdot { top: 23px; width: 7px; height: 7px; margin-left: -3.5px; transform-origin: 50% 39px; } .arck.size-l .cval { font-size: 18px; } @keyframes arc-in { from { stroke-dasharray: 0 999; } } #hero .arck .lit { animation: arc-in 1.1s cubic-bezier(0.22,0.9,0.3,1) both; } /* ---------- Live scope ---------- */ #scope { position: relative; width: 100%; max-width: 860px; height: 110px; margin-top: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } #scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .scope-label { position: absolute; top: 8px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--faint); } .scope-led { position: absolute; top: 10px; right: 12px; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--c-analyzer); box-shadow: 0 0 8px rgba(62,255,139,0.5); animation: ledpulse calc(2.6s - var(--fx-energy) * 2s) ease-in-out infinite; } .knob-hint { margin-top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--faint); } @media (prefers-reduced-motion: reduce) { #hero .arck .lit { animation: none; } .eyebrow .led, .scope-led { animation: none; } #hero-aura { transition: none; } html { scroll-behavior: auto; } } /* ---------- Sections ---------- */ section { padding: 84px 0; } .sec-head { text-align: center; margin-bottom: 52px; } .sec-head h2 { font-family: var(--font-disp); font-weight: 800; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: 0.02em; margin-top: 16px; text-wrap: balance; } .sec-head p { color: var(--dim); font-size: 15px; margin-top: 12px; } .glow-divider { width: 120px; height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--neon), transparent); box-shadow: 0 0 10px var(--neon-glow); } /* ---------- Plugin cards ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; } .pcard { --kn: var(--neon); position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .pcard:hover { border-color: var(--line3); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6), 0 0 0 1px var(--kn-soft); transform: translateY(-3px); } .pcard .face { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .pcard .picon { width: 32px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 0 6px var(--kn-soft)); transition: filter 0.25s ease, transform 0.25s ease; } .pcard:hover .picon { filter: drop-shadow(0 0 10px var(--kn-glow)); transform: scale(1.06); } .pcard .pname { font-family: var(--font-disp); font-size: 14px; font-weight: 800; letter-spacing: 0.12em; white-space: nowrap; } .pcard .pname i { font-style: normal; color: var(--kn); text-shadow: 0 0 10px var(--kn-glow); } .pcard .vpill { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dim); border: 1px solid var(--line2); border-radius: 20px; padding: 3px 9px; white-space: nowrap; } .pcard .vpill.soon { color: var(--kn); border-color: var(--kn); box-shadow: 0 0 8px var(--kn-soft); } .pcard .pbody { display: flex; align-items: center; gap: 16px; padding: 18px 16px 14px; flex: 1; } .pcard .mini { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .pcard .mini svg { position: absolute; inset: 0; overflow: visible; } .pcard .mini .track { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; } .pcard .mini .lit { fill: none; stroke: var(--kn); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--kn-glow)); stroke-dasharray: var(--lit) 999; transition: stroke-dasharray 0.5s cubic-bezier(0.22,0.9,0.3,1); } .pcard:hover .mini .lit { stroke-dasharray: var(--lit-hi) 999; } .pcard .mini .mbody { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #363B42 0%, #26292F 52%, #1A1C21 100%); box-shadow: 0 8px 16px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.07), inset 0 -5px 10px rgba(0,0,0,0.45); } .pcard .mini .mbody::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #2C3037 0%, #1D2025 60%, #16181C 100%); } .pcard .pdesc { color: var(--text2); font-size: 13.5px; line-height: 1.6; } .pcard .pfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; } .fmt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--dim); border: 1px solid var(--line2); border-radius: 4px; padding: 3px 7px; } .pcard .inc { margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; color: var(--kn); } /* ---------- Plugins Center strip ---------- */ #center-strip { padding: 0; } #center-strip .inner { background: radial-gradient(120% 160% at 100% 0%, rgba(157,107,255,0.09) 0%, transparent 55%), linear-gradient(160deg, var(--drawer) 0%, var(--card) 100%); border: 1px solid var(--line2); border-radius: 14px; padding: 36px 38px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } #center-strip h3 { font-family: var(--font-disp); font-size: 21px; font-weight: 800; letter-spacing: 0.06em; } #center-strip h3 i { font-style: normal; color: var(--neon); text-shadow: 0 0 12px var(--neon-glow); } #center-strip p { color: var(--text2); font-size: 14px; line-height: 1.65; max-width: 58ch; margin-top: 8px; } #center-strip .cta { margin-left: auto; } @media (max-width: 860px) { #center-strip .cta { margin-left: 0; } } /* ---------- Pricing ---------- */ #subscribe { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .price-card { max-width: 520px; margin: 0 auto; background: linear-gradient(160deg, var(--drawer) 0%, var(--card) 100%); border: 1px solid var(--line2); border-radius: 14px; padding: 42px 40px; text-align: center; position: relative; overflow: hidden; } .price-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0%, var(--neon-soft) 0%, transparent 60%); pointer-events: none; } .pass-pill { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.3em; color: var(--neon); border: 1px solid var(--neon); border-radius: 20px; padding: 7px 16px; box-shadow: 0 0 12px var(--neon-soft); text-transform: uppercase; } .price-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 30px 0 6px; } .price-line .amount { font-family: var(--font-disp); font-weight: 800; font-size: 68px; line-height: 1; color: var(--text); text-shadow: 0 0 30px var(--neon-soft); } .price-line .per { font-family: var(--font-mono); font-size: 14px; color: var(--dim); } .price-note { font-size: 12px; color: var(--faint); letter-spacing: 0.1em; } .price-divider { width: 100%; height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent, var(--neon), transparent); opacity: 0.55; } .feat-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 13px; margin-bottom: 32px; } .feat-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text2); font-size: 14px; font-weight: 600; } .feat-list .tick { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--neon); filter: drop-shadow(0 0 4px var(--neon-glow)); } .price-card .btn.fill { width: 100%; padding: 15px; font-size: 12px; } .secure-note { margin-top: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); } /* ---------- Why ---------- */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; } .why-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px; transition: border-color 0.25s ease; } .why-card:hover { border-color: var(--line3); } .why-card .wled { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--neon); } .why-card h3 { font-family: var(--font-disp); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 10px; } .why-card p { color: var(--dim); font-size: 13.5px; line-height: 1.65; } /* ---------- Support ---------- */ #support { text-align: center; border-top: 1px solid var(--line); } #support h2 { font-family: var(--font-disp); font-size: 28px; font-weight: 800; margin-top: 16px; } #support p { color: var(--dim); margin: 14px auto 28px; max-width: 46ch; line-height: 1.65; } /* ---------- Product pages ---------- */ .prod-hero { position: relative; background: radial-gradient(70% 90% at 50% -20%, var(--kn-soft, var(--neon-soft)) 0%, transparent 60%), linear-gradient(180deg, var(--panel) 0%, var(--ground) 100%); border-bottom: 1px solid var(--line); text-align: center; padding: 76px 0 64px; } .prod-hero .picon-hero { width: 76px; height: 76px; filter: drop-shadow(0 0 18px var(--kn-glow, var(--neon-glow))); margin-bottom: 24px; } .prod-hero h1 { font-family: var(--font-disp); font-weight: 800; font-size: clamp(30px, 5vw, 52px); letter-spacing: 0.08em; line-height: 1.1; text-wrap: balance; } .prod-hero h1 i { font-style: normal; color: var(--kn, var(--neon)); text-shadow: 0 0 22px var(--kn-glow, var(--neon-glow)); } .prod-hero .tagline { color: var(--text2); font-size: 17px; font-weight: 500; line-height: 1.65; max-width: 56ch; margin: 18px auto 0; text-wrap: balance; } .prod-hero .meta-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 26px; flex-wrap: wrap; } .prod-hero .hero-ctas { margin-top: 30px; } .prod-hero .btn.fill { background: var(--kn, var(--neon)); color: #0F1114; box-shadow: 0 0 18px var(--kn-glow, var(--neon-glow)); } .shot-section { padding: 64px 0; } .shot-card { max-width: 920px; margin: 0 auto; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8), 0 0 0 1px var(--kn-soft, transparent); } .shot-card img { display: block; width: 100%; border-radius: 8px; } .shot-card .shot-cap { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--faint); padding: 12px 0 6px; } .prod-about { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .prod-about .inner { max-width: 720px; margin: 0 auto; } .prod-about h2 { font-family: var(--font-disp); font-weight: 800; font-size: 26px; margin-bottom: 24px; } .prod-about p { color: var(--text2); font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; } .prod-about p:last-child { margin-bottom: 0; } .featx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; } .featx { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .featx:hover { border-color: var(--line3); box-shadow: 0 0 0 1px var(--kn-soft, transparent); } .featx .fled { width: 8px; height: 8px; border-radius: 50%; background: var(--kn, var(--neon)); box-shadow: 0 0 8px var(--kn-glow, var(--neon-glow)); margin-bottom: 16px; } .featx h3 { font-family: var(--font-disp); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 9px; } .featx p { color: var(--dim); font-size: 13.5px; line-height: 1.65; } .prod-cta { text-align: center; background: var(--panel); border-top: 1px solid var(--line); } .prod-cta .price-mini { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 22px 0 26px; } .prod-cta .price-mini .amount { font-family: var(--font-disp); font-weight: 800; font-size: 52px; line-height: 1; } .prod-cta .price-mini .per { font-family: var(--font-mono); font-size: 13px; color: var(--dim); } .prod-cta h2 { font-family: var(--font-disp); font-size: 28px; font-weight: 800; margin-top: 14px; } .prod-cta p.sub { color: var(--dim); margin-top: 12px; } /* ---------- Document pages (about / legal) ---------- */ .doc-hero { background: linear-gradient(180deg, var(--panel) 0%, var(--ground) 100%); border-bottom: 1px solid var(--line); text-align: center; padding: 64px 0 52px; } .doc-hero h1 { font-family: var(--font-disp); font-weight: 800; font-size: clamp(28px, 4.4vw, 42px); margin-top: 16px; } .doc-hero .doc-sub { color: var(--dim); font-size: 14px; margin-top: 12px; font-family: var(--font-mono); } .doc-body { max-width: 760px; margin: 0 auto; padding: 56px 24px 84px; } .doc-lede { color: var(--text2); font-size: 16px; line-height: 1.75; margin-bottom: 36px; } .doc-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 28px; margin-bottom: 18px; transition: border-color 0.25s ease; } .doc-card:hover { border-color: var(--line3); } .doc-card h2 { font-family: var(--font-disp); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .doc-card h2::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon-glow); flex-shrink: 0; } .doc-card p { color: var(--text2); font-size: 14.5px; line-height: 1.7; } .doc-contact { text-align: center; background: linear-gradient(160deg, var(--drawer) 0%, var(--card) 100%); border: 1px solid var(--line2); border-radius: 12px; padding: 34px 28px; margin-top: 34px; } .doc-contact p { color: var(--text2); margin-bottom: 18px; font-size: 14.5px; } /* ---------- Footer — hardware back panel ---------- */ footer { background: var(--panel); border-top: 1px solid var(--line2); position: relative; padding: 56px 0 0; margin-top: auto; } .screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #33373E, #1A1C20 70%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.6); } .screw::after { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1.5px; margin-top: -0.75px; background: #0C0D10; border-radius: 1px; transform: rotate(var(--sr, 20deg)); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px; } @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } } .foot-brand p { color: var(--dim); font-size: 13px; line-height: 1.65; margin-top: 14px; max-width: 38ch; } .foot-col h4 { font-size: 10px; font-weight: 800; letter-spacing: 0.3em; color: var(--faint); text-transform: uppercase; margin-bottom: 16px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot-col a { color: var(--dim); font-size: 13px; font-weight: 600; transition: color 0.2s; } .foot-col a:hover { color: var(--text); } .foot-serial { border-top: 1px solid var(--line); padding: 18px 0 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .barcode { width: 74px; height: 22px; background: repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 3px, var(--dim) 3px 5px, transparent 5px 6px, var(--dim) 6px 7px, transparent 7px 10px); opacity: 0.55; } .foot-serial .sn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--faint); } .foot-serial .made { margin-left: auto; } @media (max-width: 720px) { .foot-serial .made { margin-left: 0; } } /* ============================================================ Stage + live demo player (added with the 2026-09 stage concept) ============================================================ */ /* ---------- THE STAGE ---------- */ #stage{margin-top:26px;width:100%} #stage-frame{ position:relative;width:100%;max-width:660px;margin:0 auto; height:clamp(300px,48vw,540px); } /* accent light pooling behind the unit — the page supplies the atmosphere so the cutout never needs a background of its own */ #stage-frame::before{ content:'';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); width:78%;height:86%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,var(--neon-soft) 0%,transparent 70%); filter:blur(14px);transition:background .5s ease; } /* contact shadow so the unit sits on something */ #stage-frame::after{ content:'';position:absolute;left:50%;bottom:1%;transform:translateX(-50%); width:56%;height:26px;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.62) 0%,transparent 72%); filter:blur(9px); } /* height drives the size so every unit reads at the same physical scale, whatever its panel aspect ratio */ #stage-frame img{ position:absolute;left:50%;top:50%; height:100%;width:auto;max-width:none; opacity:0;transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1); transform:translate(-50%,-50%) scale(.975); filter:drop-shadow(0 26px 34px rgba(0,0,0,.6)); } #stage-frame img.on{opacity:1;transform:translate(-50%,-50%) scale(1)} /* caption sits below the unit, never over it */ .stage-cap{ display:block;text-align:center; margin-top:18px; font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--faint); } /* tab rail */ #rail{display:flex;justify-content:center;gap:10px;flex-wrap:wrap; padding:20px 0 46px} .tab{ display:flex;align-items:center;gap:9px; padding:8px 15px 8px 9px;border-radius:11px; border:1px solid var(--line);background:var(--card); transition:border-color .22s,box-shadow .22s,transform .22s,background .22s; } .tab img{width:26px;height:26px;border-radius:7px;flex-shrink:0} .tab span{font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--dim);white-space:nowrap;transition:color .22s} .tab:hover{border-color:var(--line3);transform:translateY(-2px)} .tab.on{background:var(--drawer);border-color:var(--tc);box-shadow:0 0 0 1px var(--tc),0 0 18px -4px var(--tc);transform:translateY(-2px)} .tab.on span{color:var(--text)} @media(max-width:640px){.tab span{display:none}.tab{padding:9px}} /* ---------- audio demo ---------- */ #hear{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #player{max-width:900px;margin:0 auto;background:var(--card); border:1px solid var(--line2);border-radius:14px;overflow:hidden} .p-top{display:flex;align-items:center;gap:16px;padding:16px 20px; background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap} .p-name{font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:.13em} .p-name i{font-style:normal;color:var(--neon);transition:color .4s} .p-loop{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--faint)} .p-top .sp{flex:1} #ab{display:flex;border:1px solid var(--line3);border-radius:8px;overflow:hidden} #ab button{background:transparent;border:0;color:var(--dim); font-size:10px;font-weight:800;letter-spacing:.18em;padding:9px 17px;transition:all .2s} #ab button.on{background:var(--neon);color:#0F1114} #play{width:52px;height:52px;border-radius:50%;border:0;background:var(--neon); color:#0F1114;display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 0 22px var(--neon-glow);transition:filter .2s,transform .1s} #play:hover{filter:brightness(1.1)} #play:active{transform:scale(.95)} #scope-wrap{position:relative;height:150px;background:var(--card)} #scope{position:absolute;inset:0;width:100%;height:100%;display:block} .scope-tag{position:absolute;top:10px;left:14px;font-family:var(--fm);font-size:9px; letter-spacing:.22em;color:var(--faint);z-index:2} .p-kind{font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--faint); border:1px solid var(--line2);border-radius:5px;padding:5px 9px;white-space:nowrap} .p-bottom{display:flex;align-items:center;gap:34px;padding:20px;border-top:1px solid var(--line); flex-wrap:wrap;justify-content:center;min-height:96px} #knobs{display:flex;gap:34px;flex-wrap:wrap;justify-content:center} #meter-note{display:none;max-width:52ch;text-align:center;color:var(--dim); font-size:13px;line-height:1.6} #meter-note b{color:var(--text2);font-weight:700} .kgroup{display:flex;flex-direction:column;align-items:center;gap:10px} .kgroup label{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--dim);text-transform:uppercase} .arck{position:relative;width:78px;height:78px;cursor:ns-resize;touch-action:none;flex-shrink:0} .arck svg{position:absolute;inset:0;overflow:visible} .arck .track{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round} .arck .lit{fill:none;stroke:var(--neon);stroke-width:4;stroke-linecap:round; filter:drop-shadow(0 0 5px var(--neon-glow));transition:stroke .4s} .arck .kbody{position:absolute;inset:11px;border-radius:50%; background:radial-gradient(circle at 38% 30%,#363B42 0%,#26292F 52%,#1A1C21 100%); box-shadow:0 10px 20px rgba(0,0,0,.55),inset 0 2px 3px rgba(255,255,255,.07),inset 0 -6px 13px rgba(0,0,0,.45)} .arck .kbody::before{content:'';position:absolute;inset:9%;border-radius:50%; background:radial-gradient(circle at 40% 32%,#2C3037 0%,#1D2025 60%,#16181C 100%)} .arck .kdot{position:absolute;left:50%;top:16px;width:5px;height:5px;margin-left:-2.5px; border-radius:50%;background:#F2F4F6;box-shadow:0 0 6px rgba(255,255,255,.5); transform-origin:50% 23px;z-index:2} .arck .cval{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-weight:700;font-size:13px;z-index:3;font-variant-numeric:tabular-nums} .hint{text-align:center;color:var(--faint);font-family:var(--fm);font-size:10px; letter-spacing:.16em;margin-top:20px} #nosound{display:none;text-align:center;color:var(--dim);font-size:13px;padding:20px} /* ---------- sticky buy bar ---------- */ #buybar{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:rgba(23,25,30,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line2); transform:translateY(110%);transition:transform .35s cubic-bezier(.22,.9,.3,1); } #buybar.on{transform:translateY(0)} #buybar .wrap{display:flex;align-items:center;gap:16px;padding-top:11px;padding-bottom:11px} #buybar .bb-txt{font-size:13px;color:var(--text2);font-weight:600} #buybar .bb-txt b{color:var(--text);font-weight:800} #buybar .sp{flex:1} /* on phones both labels are hidden, so collapse the spacer too and let the button span the whole bar instead of floating in the right half */ @media(max-width:620px){ #buybar .bb-txt, #buybar .sp { display: none; } #buybar .btn { flex: 1; padding: 13px 22px; } } /* ---------- scroll reveal ---------- */ .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1;transform:none;transition:none} .eyebrow .led{animation:none} #stage-frame img{transition:opacity .2s} } /* ---------- Product pages: "in the track" scenarios ---------- */ #usecases { background: var(--ground); } .uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 17px; max-width: 1000px; margin: 0 auto; } .uc { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .uc:hover { border-color: var(--line3); box-shadow: 0 0 0 1px var(--kn-soft, var(--neon-soft)); } .uc .step { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--kn, var(--neon)); margin-bottom: 12px; } .uc h3 { font-family: var(--font-disp); font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 1.3; } .uc p { color: var(--dim); font-size: 13.5px; line-height: 1.7; } .uc .recipe { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--text2); line-height: 1.8; } .uc .recipe b { color: var(--kn, var(--neon)); font-weight: 500; }