/* ========================================================================== NEVER FOUND — site design (live since 2026-09-27; built as /test) NFA's brand (Space Grotesk + IBM Plex, the violet, the plug-in's own accent pair) in the overhaul language from design/exo-reference: a tinted page instead of white, violet-tinted shadows instead of grey, big radii, pill controls, one slow easing curve, blur-in reveals, glass over a moving fog. A test page: it lives in /test and is not in publish.ps1's whitelist. ── THE RULEBOOK (this file) ─────────────────────────────────────────────── SPACE 4px base, --s1…--s13 only. RADIUS Four: --r1 chips, --r2 small cards, --r3 panels, --r-pill controls. SHADOW Three, all tinted with --shade-rgb: --sh1 resting, --sh2 lifted, --sh3 the floating product only. MOTION One curve, --ease. --t1 state, --t-hover surfaces, --t-reveal. TYPE Display (Space Grotesk, never above 700) for names and headings, Plex Sans for prose and UI, Plex Mono only for numbers. ── ─────────────────────────────────────────────────────────────────────── */ :root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 80px; --s12: 112px; --s13: 128px; --r1: 8px; --r2: 14px; --r3: 28px; --r-pill: 999px; --bg: #F4F3F8; --bg-soft: #EDECF3; --card: #FFFFFF; --glass: rgba(255, 255, 255, .66); --ink: #14141B; --text-2: #4E4B5C; --text-3: #64646F; --accent-rgb: 109 40 217; --accent: rgb(var(--accent-rgb)); --accent-dark: #55209F; --accent-wash: #EFE7FD; --plug-accent-rgb: 151 83 245; /* the plug-in's violet: dark surfaces only */ --plug-curve-rgb: 234 80 204; /* the plug-in's pink: dark surfaces, glows */ --shade-rgb: 40 18 74; /* every shadow and hairline is this, never black */ --line: rgb(var(--shade-rgb) / .09); --line-2: rgb(var(--shade-rgb) / .16); --sh1: 0 2px 8px rgb(var(--shade-rgb) / .05), 0 8px 32px rgb(var(--shade-rgb) / .08), inset 0 1px 0 rgba(255, 255, 255, .9); --sh2: 0 10px 26px -12px rgb(var(--shade-rgb) / .16), 0 34px 80px -30px rgb(var(--shade-rgb) / .38), inset 0 1px 0 rgba(255, 255, 255, .95); --sh3: 0 90px 130px -30px rgb(var(--shade-rgb) / .34), 0 44px 70px -16px rgb(var(--shade-rgb) / .24), 0 16px 30px -6px rgb(var(--shade-rgb) / .16); /* The name's ink: black into the brand violet, ending no lighter than 4:1 on the page (the plug-in pink itself is 2.9:1 on --bg, so it stops short). */ --ink-grad: linear-gradient(180deg, #14141B 0%, #2A1850 30%, #55209F 58%, #6D28D9 78%, #9245C9 100%); --ease: cubic-bezier(.25, 1, .2, 1); --t1: 160ms var(--ease); --t-hover: 360ms var(--ease); --t-reveal: 1100ms; --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1180px; --gutter: var(--s6); --sec: var(--s12); color-scheme: light; } /* ============================ BASE ====================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text-2); font-family: var(--font-text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r1); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; padding: var(--s2) var(--s4); background: var(--ink); color: #fff; border-radius: var(--r-pill); } .skip:focus { top: var(--s4); } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* ============================ THE FOG ==================================== */ /* A fixed, blurred, moving fog behind the whole page (test/media, rendered in Blender for this site). Everything else is glass over it. The poster and a still gradient stand in until the video plays, and for reduced motion. */ .fog { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(50% 45% at 30% 30%, rgb(var(--plug-accent-rgb) / .14), transparent 70%), radial-gradient(45% 40% at 75% 65%, rgb(var(--plug-curve-rgb) / .10), transparent 72%), var(--bg); } .fog__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* A veil keeps the top of the page quiet under the nav and the name. Lighter since the 'flow' fog (2026-10-02): the colour is meant to be seen. */ .fog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(244 243 248 / .28), rgb(244 243 248 / 0) 35%, rgb(244 243 248 / .08)); } /* ============================ TYPE ====================================== */ .kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .kicker--accent { color: var(--accent); } .h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; } .lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 46ch; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .grad { background: var(--ink-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================ BUTTONS =================================== */ .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 50px; padding: var(--s3) var(--s7); border-radius: var(--r-pill); font-family: var(--font-text); font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap; transition: transform var(--t-hover), box-shadow var(--t-hover), background var(--t-hover), border-color var(--t-hover); } .btn--primary { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 55%), var(--accent); box-shadow: 0 8px 22px rgb(var(--accent-rgb) / .34), inset 0 1px 0 rgba(255, 255, 255, .28); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgb(var(--accent-rgb) / .42), inset 0 1px 0 rgba(255, 255, 255, .28); } .btn--primary:active { transform: none; } .btn--glass { color: var(--ink); background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 18px rgb(var(--shade-rgb) / .10), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .btn--glass:hover { transform: translateY(-1px); background: #fff; } .btn--sm { min-height: 40px; padding: var(--s2) var(--s5); font-size: 14px; } .btn__arrow { transition: transform var(--t-hover); } .btn:hover .btn__arrow { transform: translateX(3px); } /* One sweep of light across the one hero button, every 3.4 s, paused on hover. */ .btn--sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-16deg); animation: sheen 3.4s var(--ease) infinite; } .btn--sheen:hover::after { animation-play-state: paused; } @keyframes sheen { 0% { left: -70%; } 58%, 100% { left: 130%; } } /* ============================ GLASS ===================================== */ .glass { background: var(--glass); border: 1px solid rgba(255, 255, 255, .85); box-shadow: var(--sh2); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); } /* ============================ NAV ======================================= */ /* A floating pill, fixed at the top: the logo, three places, one button. */ .nav { position: fixed; top: var(--s4); left: 0; right: 0; z-index: 50; pointer-events: none; } .nav__pill { pointer-events: auto; display: flex; align-items: center; gap: var(--s6); width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding: var(--s2) var(--s2) var(--s2) var(--s6); border-radius: var(--r-pill); } .nav__mark img { height: 17px; width: auto; } .nav__links { display: flex; gap: var(--s1); } .nav__links a { padding: var(--s2) var(--s4); border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--text-2); transition: background var(--t-hover), color var(--t-hover); } .nav__links a:hover { background: rgba(255, 255, 255, .8); color: var(--ink); } /* ============================ HERO ====================================== */ /* The name on the left, VT-Mini's two pages floating on the right: TUNE in front, CLEAN behind it, both real press renders. */ .hero { padding-block: calc(var(--s12) + var(--s6)) var(--s10); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s10); align-items: center; } .hero__copy { display: grid; justify-items: start; gap: var(--s6); } .facts { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-radius: var(--r-pill); } .facts span + span::before { content: "·"; margin-right: var(--s3); color: var(--text-3); } .hero__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 10.5vw, 9rem); line-height: .86; letter-spacing: -.05em; padding-bottom: .06em; /* the gradient must reach the descender-free baseline cleanly */ } .hero__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); } .hero__line em { font-style: normal; color: var(--accent); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); } .hero__note { font-size: 14px; color: var(--text-3); } .hero__note b { color: var(--text-2); font-weight: 500; } /* Flat, not preserve-3d: 3D-layered children over the fixed fog video lost their stacking in Chrome (a window vanished). The tilt is a perspective() inside the stack's own transform instead. */ .float { position: relative; aspect-ratio: 1 / 1.02; } .float__glow { position: absolute; inset: 4% -4% 0 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side at 40% 45%, rgb(var(--plug-accent-rgb) / .45), transparent), radial-gradient(closest-side at 70% 70%, rgb(var(--plug-curve-rgb) / .30), transparent); filter: blur(46px); } .float__stack { position: absolute; inset: 0; transition: transform 900ms var(--ease); will-change: transform; } .float__win { position: absolute; filter: drop-shadow(0 40px 50px rgb(var(--shade-rgb) / .28)) drop-shadow(0 12px 18px rgb(var(--shade-rgb) / .18)); } .float__win--back { width: 70%; right: 0; top: 0; transform: rotate(4deg) scale(.97); opacity: .92; } .float__win--front { width: 78%; left: 0; bottom: 0; } /* ============================ PRESS ===================================== */ .press { padding-block: var(--s6) var(--s10); } .press__bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s7); padding: var(--s4) var(--s4) var(--s4) var(--s7); border-radius: var(--r3); } /* No blur in the press reveal: two blurred edges meeting made a thick smear at the seam for the first half second. */ .js .press .rv { filter: none; } /* The logo row takes whatever the label and badge leave and spreads the logos over it, so a longer label ("Never Found Audio in the press") still fits. */ .press__logos { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; gap: var(--s5) var(--s6); } .press__logos img { height: 22px; width: auto; filter: grayscale(1); opacity: .6; transition: filter var(--t-hover), opacity var(--t-hover); } .press__logos a:hover img { filter: none; opacity: 1; } .press__logos .is-tall img { height: 26px; } /* The dip under the press bar (2026-10-02): a pane of frosted glass tucked under the bar (the bar sits on top and casts onto it), the same height and the same 28 px rounding as the bar. ONE element, ONE background: its shape -- the plate, its two rounded bottom corners and the two concave fillets that join it to the bar -- is cut with a mask. Built from separate pieces it showed a seam between plate and fillet; a mask cannot. Each mask layer overlaps its neighbour by 1 px INSIDE the shape, never on the outline, or a half-covered pixel at a layer boundary leaves a faint line of its own. The number counts up (site.js). */ .press__dip { --fil: 28px; --R: var(--r3); position: relative; z-index: 0; width: fit-content; min-width: calc(min(360px, 56%) + 2 * var(--fil)); max-width: calc(100% - 2 * var(--s4)); height: 80px; margin: 0 auto; padding: 0 calc(var(--s9) + var(--fil)); display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, rgb(255 255 255 / .36), rgb(255 255 255 / .16)); -webkit-backdrop-filter: blur(40px) saturate(1.9); backdrop-filter: blur(40px) saturate(1.9); --mask: linear-gradient(#000 0 0) top center / calc(100% - 2 * var(--fil)) calc(100% - var(--R) + 1px) no-repeat, linear-gradient(#000 0 0) bottom center / calc(100% - 2 * var(--fil) - 2 * var(--R) + 2px) var(--R) no-repeat, radial-gradient(circle at 100% 0, #000 calc(var(--R) - .5px), transparent var(--R)) left var(--fil) bottom 0 / var(--R) var(--R) no-repeat, radial-gradient(circle at 0 0, #000 calc(var(--R) - .5px), transparent var(--R)) right var(--fil) bottom 0 / var(--R) var(--R) no-repeat, radial-gradient(circle at 0 100%, transparent calc(var(--fil) - .5px), #000 var(--fil)) left top / calc(var(--fil) + 1px) var(--fil) no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--fil) - .5px), #000 var(--fil)) right top / calc(var(--fil) + 1px) var(--fil) no-repeat; -webkit-mask: var(--mask); mask: var(--mask); } .press__trust { display: grid; justify-items: center; gap: 4px; } .press__num { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; } .press__lab { font-family: var(--font-display); font-size: 10.5px; line-height: 1.3; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); } .press__more { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); white-space: nowrap; } .partner { display: inline-flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-radius: var(--r-pill); background: linear-gradient(135deg, #221D33, #15121E); color: #fff; transition: transform var(--t-hover); } .partner:hover { transform: translateY(-1px); } .partner__k { font-family: var(--font-display); font-weight: 600; font-size: 13px; } .partner img { height: 22px; width: auto; } /* ============================ STATEMENT ================================= */ .statement { padding-block: var(--sec) var(--s10); text-align: center; } .statement .kicker { margin-bottom: var(--s5); } .statement__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5.6vw, 4.5rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; } .statement__h span { display: block; } /* ============================ THE PAIR ================================== */ .pair { padding-bottom: var(--sec); } .pair__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } .tier { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s8) var(--s9); border-radius: var(--r3); } .tier__lane { width: 100%; height: var(--s10); overflow: visible; } .tier__lane path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .tier__grid { stroke: var(--line); stroke-width: 1; } .tier__raw { stroke: var(--line-2); stroke-width: 2; } .tier__out { stroke: var(--accent); stroke-width: 2.5; } .tier__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); } .tier__name { margin-top: var(--s2); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.045em; color: var(--ink); } .tier__name span { color: var(--accent); } .tier__price { display: grid; justify-items: end; gap: var(--s1); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.9vw, 2.375rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .tier__per { font-family: var(--font-text); font-weight: 400; font-size: 13px; letter-spacing: 0; color: var(--text-3); } .ticks { display: grid; gap: var(--s3); padding-block: var(--s5); border-block: 1px solid var(--line); } .ticks li { position: relative; padding-left: var(--s7); font-size: 15px; line-height: 1.5; } .ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%236D28D9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .ticks b { font-weight: 600; color: var(--ink); } .tier__end { margin-top: auto; display: grid; gap: var(--s3); } .tier__note { padding: var(--s3) var(--s5); border-radius: var(--r-pill); font-size: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); } .tier .btn { width: 100%; } .tier--pro { background: radial-gradient(130% 120% at 85% 0%, #2A1E44 0%, #0F0F12 62%); color: rgba(255, 255, 255, .74); border: 1px solid rgb(var(--plug-accent-rgb) / .30); box-shadow: 0 40px 90px -44px rgb(var(--shade-rgb) / .85); } .tier--pro .tier__grid { stroke: rgba(255, 255, 255, .08); } .tier--pro .tier__raw { stroke: rgba(255, 255, 255, .22); } .tier--pro .tier__out { stroke: rgb(var(--plug-accent-rgb)); } .tier--pro .tier__midi { stroke: rgb(var(--plug-accent-rgb) / .22); stroke-width: 6; stroke-linecap: butt; } .tier--pro .kicker { color: color-mix(in srgb, rgb(var(--plug-accent-rgb)) 88%, #fff); } .tier--pro .tier__name, .tier--pro .tier__price, .tier--pro .ticks b { color: #fff; } .tier--pro .tier__name span { color: rgb(var(--plug-accent-rgb)); } .tier--pro .tier__per { color: rgba(255, 255, 255, .6); } .tier--pro .ticks { border-color: rgba(255, 255, 255, .12); } .tier--pro .ticks li::before { background-color: rgb(var(--plug-accent-rgb) / .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23C9A6FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .tier--pro .tier__note { background: rgb(var(--plug-accent-rgb) / .14); border-color: rgb(var(--plug-accent-rgb) / .32); color: rgba(255, 255, 255, .9); } .tier--pro .tier__note b { color: #fff; } .tier--pro .btn--primary { box-shadow: 0 8px 26px rgb(var(--plug-accent-rgb) / .35), inset 0 1px 0 rgba(255, 255, 255, .28); } .tier--pro :focus-visible { outline-color: rgb(var(--plug-accent-rgb)); } /* ============================ VT-PRO STAGE ============================== */ /* An inset dark panel, not a full-bleed band: the plug-in's own page row as the switcher, the real window floating on a violet glow. */ .stage { padding-bottom: var(--sec); } .stage__panel { position: relative; isolation: isolate; overflow: hidden; padding: var(--s11) var(--s9) var(--s10); border-radius: var(--r3); background: #0F0F12; color: rgba(255, 255, 255, .74); box-shadow: 0 60px 120px -60px rgb(var(--shade-rgb) / .9); } .stage__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 50% 0%, rgb(var(--plug-accent-rgb) / .24), transparent 70%), radial-gradient(45% 35% at 50% 100%, rgb(var(--plug-curve-rgb) / .10), transparent 70%); } .stage__head { display: grid; justify-items: center; gap: var(--s7); max-width: 1000px; margin: 0 auto var(--s9); text-align: center; } .stage__head .kicker { color: rgba(255, 255, 255, .6); } .stage__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s4); font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 6rem); line-height: .9; letter-spacing: -.05em; color: #fff; } .stage__h > span:first-child span { color: rgb(var(--plug-accent-rgb)); } .soon { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; padding: var(--s2) var(--s3); border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent); white-space: nowrap; } .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); width: 100%; padding: var(--s1); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); } .tab { display: grid; gap: 2px; justify-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-pill); border: 1px solid transparent; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.3; transition: background var(--t-hover), border-color var(--t-hover); } .tab b { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .14em; color: #fff; } .tab:hover { background: rgba(255, 255, 255, .06); } .tab[aria-selected="true"] { background: rgb(var(--plug-accent-rgb) / .16); border-color: rgb(var(--plug-accent-rgb) / .55); } .tab:focus-visible { outline-color: rgb(var(--plug-accent-rgb)); } .stage__view { position: relative; aspect-ratio: 1484 / 1057; max-width: 1000px; margin-inline: auto; } .stage__view::before { content: ""; position: absolute; inset: 10% 8% -2%; z-index: -1; background: radial-gradient(closest-side, rgb(var(--plug-accent-rgb) / .32), transparent); filter: blur(40px); } .stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 700ms var(--ease); } .stage__img.is-on { opacity: 1; } /* ============================ SIGNUP ==================================== */ .list { padding-bottom: var(--sec); } .list__card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s10); padding: var(--s10); border-radius: var(--r3); background: linear-gradient(158deg, rgba(255, 255, 255, .8), rgb(var(--accent-rgb) / .06) 52%, rgb(var(--plug-curve-rgb) / .06)); } .list__copy { display: grid; align-content: start; gap: var(--s4); } .list__aside { font-size: 15px; color: var(--text-3); } .capsule { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: 6px 6px 6px var(--s6); border-radius: var(--r-pill); background: rgba(255, 255, 255, .96); border: 1px solid var(--line); box-shadow: 0 24px 50px -16px rgb(var(--shade-rgb) / .22), 0 10px 22px -8px rgb(var(--shade-rgb) / .12); transition: border-color var(--t-hover), box-shadow var(--t-hover); } .capsule:focus-within { border-color: rgb(var(--accent-rgb) / .45); box-shadow: 0 24px 50px -16px rgb(var(--shade-rgb) / .22), 0 0 0 4px rgb(var(--accent-rgb) / .10); } .capsule input { flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: none; outline: none; font: inherit; font-size: 16px; color: var(--ink); } .capsule input::placeholder { color: var(--text-3); } .consent { display: flex; gap: var(--s3); align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-2); cursor: pointer; } .consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); } .consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .form-msg { font-size: 14px; color: var(--accent-dark); min-height: 1.5em; } .deal { align-self: start; display: grid; gap: var(--s4); padding: var(--s8); border-radius: var(--r3); background: var(--card); box-shadow: var(--sh1); } .deal__price { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 700; font-size: 3.25rem; line-height: 1; letter-spacing: -.035em; color: var(--ink); } .deal__price span:first-child { color: var(--accent); } .deal__sub { font-size: 13px; color: var(--text-3); } /* The later price beside the launch price. Deliberately NOT struck through: VT-Pro has never been sold at 29.99, and a struck price that was never charged is a Mondpreis (UWG 5, PAngV 11). Labelled as the later price. */ .deal__later { align-self: center; margin-left: var(--s4); display: grid; font-family: var(--font-text); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.25; color: var(--text-3); } .deal__later small { font-size: 12px; font-weight: 500; } .deal .ticks { padding-block: var(--s4); } .deal__fine { font-size: 13px; color: var(--text-3); } /* ============================ STORY ===================================== */ .story { padding-bottom: var(--sec); } .story__card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s10); padding: var(--s10); border-radius: var(--r3); } .story__q { margin-top: var(--s4); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); } .story__q span { color: var(--accent); } .story__body { display: grid; gap: var(--s5); font-size: 17px; line-height: 1.7; max-width: 58ch; } .story__sign { font-weight: 500; color: var(--ink); } /* ============================ FAQ ======================================= */ .faq { padding-bottom: var(--sec); } .faq__card { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: var(--s10); padding: var(--s10); border-radius: var(--r3); } .faq__intro { display: grid; align-content: start; gap: var(--s4); } .faq__intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .qa { border-bottom: 1px solid var(--line); } .qa:first-child { border-top: 1px solid var(--line); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.015em; color: var(--ink); transition: color var(--t-hover); } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--accent); } .qa__mk { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); transition: transform 650ms var(--ease), background var(--t-hover); } .qa__mk::before, .qa__mk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--accent); border-radius: 1px; transform: translate(-50%, -50%); } .qa__mk::after { transform: translate(-50%, -50%) rotate(90deg); } .qa[open] .qa__mk { transform: rotate(45deg); background: var(--accent-wash); } .qa__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.2s var(--ease); } .qa[open] .qa__wrap { grid-template-rows: 1fr; } .qa__inner { overflow: hidden; } .qa__inner p { padding-bottom: var(--s5); max-width: 62ch; font-size: 16px; } .qa__inner p + p { margin-top: calc(-1 * var(--s2)); } .qa__inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ============================ MORE ====================================== */ .more { padding-bottom: var(--sec); } .more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s7); } .more__head .h2 { margin-top: var(--s3); } .more__all { font-weight: 600; font-size: 15px; color: var(--accent); } .more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s4) var(--s5) var(--s4) var(--s4); border-radius: var(--r2); background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--sh1); transition: transform var(--t-hover), box-shadow var(--t-hover), background var(--t-hover); } .mini:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--sh2); } .mini img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r1); background: #0F0F12; } .mini__k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .mini__n { margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .mini__m { margin-top: var(--s1); font-size: 13px; color: var(--text-3); } /* ============================ FOOTER ==================================== */ .foot { padding-bottom: var(--s9); } .foot__card { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s8); padding: var(--s10) var(--s10) var(--s8); border-radius: var(--r3); background: #14141B; color: rgba(255, 255, 255, .62); } .foot__card img { height: 17px; width: auto; filter: invert(1); } .foot__line { margin-top: var(--s4); font-size: 14px; max-width: 32ch; } /* The one button in the footer (2026-10-02): a way to reach a person. */ .foot__cta { margin-top: var(--s6); min-width: 200px; min-height: 56px; font-size: 16px; color: var(--ink); background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); } .foot__cta:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .36); } .foot__h { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .9); margin-bottom: var(--s3); } .foot nav { display: grid; align-content: start; gap: var(--s2); font-size: 14px; } .foot nav a:hover { color: #fff; } .foot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s6); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; } /* ============================ PHONE BAR ================================= */ /* Below 940px the nav links go; this floating bar takes their place. */ .tabbar { display: none; } /* ============================ MOTION ==================================== */ /* The hero sequence runs on CSS alone, so it plays without JavaScript. */ @keyframes rise { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } } @keyframes fade { from { opacity: 0; } } .hero__copy > * { animation: rise .9s var(--ease) both; } .hero__copy > :nth-child(1) { animation-delay: 40ms; } .hero__copy > :nth-child(2) { animation-delay: 140ms; } .hero__copy > :nth-child(3) { animation-delay: 260ms; } .hero__copy > :nth-child(4) { animation-delay: 500ms; } .hero__copy > :nth-child(5) { animation-delay: 620ms; } .float { animation: fade 1.4s var(--ease) 300ms both; } /* Scroll reveals: set up by test.js, which adds .is-in. Without JS nothing is hidden, because the hiding rule needs the .js class. */ .js .rv { opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity var(--t-reveal) var(--ease), filter var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); } .js .rv.is-in { opacity: 1; filter: none; transform: none; } /* ============================ RESPONSIVE ================================ */ @media (max-width: 1100px) { .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list__card, .story__card, .faq__card { grid-template-columns: 1fr; gap: var(--s8); } .foot__card { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__card > :first-child { grid-column: 1 / -1; } } @media (max-width: 940px) { :root { --sec: var(--s11); } .nav__links { display: none; } .hero__grid { grid-template-columns: 1fr; gap: var(--s9); } .float { max-width: 560px; width: 100%; justify-self: center; } .pair__grid { grid-template-columns: 1fr; } body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .tabbar { display: flex; position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); gap: var(--s1); padding: var(--s1); border-radius: var(--r-pill); } .tabbar a { display: grid; justify-items: center; gap: 2px; min-width: 72px; padding: var(--s2) var(--s3); border-radius: var(--r-pill); font-size: 11px; font-weight: 600; color: var(--text-2); } .tabbar a svg { width: 20px; height: 20px; } .tabbar a[aria-current="page"] { background: var(--ink); color: #fff; } } @media (max-width: 760px) { :root { --gutter: var(--s5); --sec: var(--s10); --t-reveal: 600ms; } .js .rv { filter: none; } body { font-size: 16px; } .nav__pill { gap: var(--s4); padding-left: var(--s5); } .hero { padding-top: calc(var(--s11) + var(--s6)); } .facts { flex-wrap: wrap; row-gap: var(--s1); } .tier, .list__card, .story__card, .faq__card, .stage__panel { padding: var(--s7) var(--s6); } .stage__panel { padding-top: var(--s9); } .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r2); } .tab { border-radius: var(--r1); } .more__grid { grid-template-columns: 1fr; } .foot__card { grid-template-columns: 1fr 1fr; padding: var(--s8) var(--s6); } .capsule { flex-wrap: wrap; padding: var(--s2); border-radius: var(--r2); } .capsule input { flex-basis: 100%; padding-inline: var(--s3); } .capsule .btn { width: 100%; } .press__bar { padding: var(--s5); } .press__dip { min-width: 0; max-width: 100%; padding: 0 calc(var(--s6) + var(--fil)); } .press__logos { justify-content: flex-start; column-gap: var(--s8); } /* Glass over a moving video costs frames on phones; solid white instead. */ .glass, .btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .9); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .rv { opacity: 1; filter: none; transform: none; } .float__stack { transform: none !important; } } /* ========================================================================== NEVER FOUND test redesign — shared page components (2026-09-26) Loaded after test.css on every page in /test. Everything the product, form, utility and legal pages need, built only from test.css's tokens. A page's own extras go in a