/* Voltaverb — premium design layer. Linked LAST in every page's , after style.css and the pages' own inline style blocks, so document order keeps the cascade intact. Edit here; every page picks it up. Deploy to the SITE ROOT. */ /* ============================================================================ VOLTAVERB — PREMIUM DESIGN LAYER v1.0 ---------------------------------------------------------------------------- A self-contained override layer. Loaded LAST, so it wins the cascade against style.css and the page's own inline style blocks. !important is used only where it must beat a style="" attribute on the element itself. Brand essence retained: deep navy world, Voltaverb cyan (#7DD3F0), the gradient VOLTAVERB wordmark, "spaces between spaces". What changed: type is now Inter Tight / Inter instead of Courier New + JetBrains Mono, weights are heavier, the scale is larger and tighter, the palette is deeper and unified, and surfaces have real depth. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { /* Type ------------------------------------------------------------------ */ --vp-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --vp-num: 'Inter Tight', 'Inter', sans-serif; /* Ink ------------------------------------------------------------------- */ --vp-ink: #F4F7FB; /* headings */ --vp-ink-2: #C3CCDB; /* body copy */ --vp-ink-3: #99A4B7; /* secondary / meta */ --vp-ink-4: #656F82; /* faint / captions */ /* Surfaces — deeper, richer navy. Same family, more expensive. ---------- */ --vp-bg: #0B0D18; /* page base */ --vp-bg-2: #10131F; /* alternating band */ --vp-card: #151928; /* card / panel */ --vp-card-2: #1A1F31; /* raised card */ --vp-matte: #080A12; /* screenshot matte */ /* Accent — unchanged brand cyan ---------------------------------------- */ --vp-cy: #7DD3F0; --vp-cy-lo: #4FB3DC; --vp-cy-hi: #D6F2FF; --vp-cy-a08: rgba(125, 211, 240, 0.08); --vp-cy-a14: rgba(125, 211, 240, 0.14); --vp-cy-a24: rgba(125, 211, 240, 0.24); --vp-mint: #6EE7B7; /* Lines & depth --------------------------------------------------------- */ --vp-line: rgba(146, 168, 200, 0.13); --vp-line-2: rgba(146, 168, 200, 0.22); --vp-top: inset 0 1px 0 rgba(255, 255, 255, 0.055); --vp-lift: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -8px rgba(0,0,0,.55); --vp-lift-2: 0 2px 4px rgba(0,0,0,.3), 0 24px 56px -16px rgba(0,0,0,.72); --vp-glow: 0 14px 44px -12px rgba(125, 211, 240, 0.42); --vp-r: 14px; --vp-r-lg: 20px; --vp-pad: clamp(4.5rem, 8vw, 8rem); /* Remap the original theme variables so anything still referencing them lands inside the new system instead of the old flat-UI palette. */ --color-bg-primary: #0B0D18; --color-bg-secondary: #10131F; --color-bg-tertiary: #151928; --color-accent: #7DD3F0; --color-accent-dim: #4FB3DC; --color-text-primary: #F4F7FB; --color-text-secondary:#C3CCDB; --color-text-dim: #8B95A8; --color-border: rgba(146, 168, 200, 0.13); --color-success: #6EE7B7; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif; } /* -------------------------------------------------------------------- base */ html { -webkit-text-size-adjust: 100%; } body { background-color: var(--vp-bg) !important; color: var(--vp-ink-2) !important; font-family: var(--vp-sans) !important; font-size: 1.0625rem; line-height: 1.62; letter-spacing: -0.005em; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: rgba(125, 211, 240, 0.28); color: #fff; } :focus-visible { outline: 2px solid var(--vp-cy); outline-offset: 3px; border-radius: 6px; } /* Kill every decorative monospace on the page. Courier New and JetBrains Mono are what made this read like a typewriter. Numerals keep tabular alignment through font-variant-numeric instead of a mono face. */ [style*="JetBrains"], [style*="monospace"], [style*="Courier"], .logo, .title-main, .requirements-card h3, .interface-info h3, .vv-panels-eyebrow, .vv-band-index, .price-intro, .tier-slots, .doc-status, .pricing-tier-badge { font-family: var(--vp-display) !important; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- headings */ h1, h2, h3, h4, h5, h6, .section-title, .title-main, .title-sub, .vv-panels-title, .vv-band-title, .price-amount, .tier-price { font-family: var(--vp-display) !important; color: var(--vp-ink); text-wrap: balance; /* Inter Tight has narrow word spaces; tight tracking makes multi-word headings run together without this. */ word-spacing: 0.06em; } h1 { font-weight: 600; letter-spacing: -0.023em; line-height: 0.98; } h2 { font-weight: 600; font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.5rem); letter-spacing: -0.020em; line-height: 1.04; margin-bottom: 1.25rem; } h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.019em; line-height: 1.25; color: var(--vp-ink); } h4 { font-weight: 700; letter-spacing: -0.012em; } p { text-wrap: pretty; } strong, b { font-weight: 700; color: var(--vp-ink); } /* ------------------------------------------------------------------ layout */ .container { max-width: 1220px !important; padding-left: clamp(1.25rem, 4vw, 2.5rem) !important; padding-right: clamp(1.25rem, 4vw, 2.5rem) !important; } section { padding: var(--vp-pad) 0; } /* Section rhythm — deep base, one step up for alternating bands. Strict alternation top to bottom. Overrides the inline gradient backgrounds. */ .features { background: var(--vp-bg-2) !important; } #try-it { background: var(--vp-bg-2) !important; } #grain-cloud { background: var(--vp-bg) !important; } #about { background: var(--vp-bg-2) !important; } .demos { background: var(--vp-bg) !important; } .pricing { background: var(--vp-bg-2) !important; } .system-requirements { background: var(--vp-bg) !important; } .documentation { background: var(--vp-bg-2) !important; } #waitlist { background: var(--vp-bg) !important; } .faq { background: var(--vp-bg-2) !important; } .interface-showcase { background: var(--vp-bg) !important; } .vv-panels { background: var(--vp-bg) !important; } .vv-panels-head { background: var(--vp-bg-2) !important; } /* Hairline separators between bands — quiet, expensive. */ .features, .demos, .pricing, .faq, .system-requirements, .documentation, .interface-showcase, #try-it, #grain-cloud, #about, #waitlist { border-top: 1px solid var(--vp-line); } .section-title { font-weight: 600; font-size: clamp(2.15rem, 1.2rem + 3vw, 3.6rem); letter-spacing: -0.022em; line-height: 1.02; color: var(--vp-ink); margin-bottom: 1.15rem; } .section-title::before { content: ''; display: block; width: 40px; height: 3px; margin: 0 auto 1.9rem; border-radius: 3px; background: linear-gradient(90deg, var(--vp-cy-lo), var(--vp-cy)); opacity: 0.9; } .section-subtitle { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); color: var(--vp-ink-3); font-weight: 400; letter-spacing: -0.008em; max-width: 46rem; margin-left: auto; margin-right: auto; margin-bottom: 3.75rem; } /* --------------------------------------------------------------------- nav */ .nav { background: rgba(11, 13, 24, 0.72) !important; -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--vp-line) !important; } .nav-links { gap: 1.6rem !important; } .nav-links a { font-family: var(--vp-sans); font-size: 0.895rem !important; font-weight: 550; text-transform: none !important; letter-spacing: -0.008em !important; color: var(--vp-ink-3); position: relative; padding: 0.35rem 0; transition: color .18s ease; } .nav-links a:hover { color: var(--vp-ink); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; border-radius: 2px; background: var(--vp-cy); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.3,1); } .nav-links a:hover::after { transform: scaleX(1); } .logo img { transition: opacity .2s ease; } /* -------------------------------------------------------------------- hero */ .hero { background: radial-gradient(120% 78% at 50% -12%, rgba(125, 211, 240, 0.15) 0%, rgba(125, 211, 240, 0.04) 38%, transparent 68%), radial-gradient(70% 46% at 82% 4%, rgba(103, 128, 255, 0.09) 0%, transparent 62%), var(--vp-bg) !important; } .hero-title { gap: 0 !important; margin-bottom: 0 !important; } .title-main { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: clamp(3.05rem, 1rem + 8.6vw, 9rem) !important; letter-spacing: -0.033em !important; line-height: 0.9 !important; background: linear-gradient(173deg, #FBFEFF 0%, #DFF4FF 20%, #9FDEF6 52%, #7DD3F0 74%, #46A3D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 6px 26px rgba(125, 211, 240, 0.30)); text-shadow: none !important; } .title-sub { font-family: var(--vp-display) !important; font-style: normal !important; font-weight: 500 !important; font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.65rem) !important; letter-spacing: -0.018em !important; color: var(--vp-ink-2) !important; margin-top: 1.25rem !important; opacity: .82; } .hero-description { font-size: clamp(1.06rem, 1rem + 0.34vw, 1.24rem) !important; line-height: 1.6 !important; color: var(--vp-ink-2) !important; letter-spacing: -0.012em; max-width: 44rem !important; margin-top: 2.25rem !important; } .hero-cta { gap: 0.85rem !important; margin-top: 2.75rem !important; } /* The pill under the CTA — was mono + wide tracking, now a proper eyebrow. */ .hero span[style*="border-radius: 999px"], #waitlist div[style*="border-radius: 999px"] { font-family: var(--vp-display) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.13em !important; padding: 0.45rem 0.95rem !important; border-color: var(--vp-cy-a24) !important; background: var(--vp-cy-a08); color: var(--vp-cy) !important; } .plugin-screenshot { border-radius: var(--vp-r-lg) !important; border: 1px solid var(--vp-line-2) !important; box-shadow: var(--vp-lift-2), 0 0 0 1px rgba(125,211,240,.06), 0 40px 120px -40px rgba(125,211,240,.28) !important; } .plugin-screenshot:hover { transform: translateY(-5px); } /* ----------------------------------------------------------------- buttons */ .btn, .btn-primary, .btn-secondary, .btn-add-cart, button[type="submit"], input[type="submit"] { font-family: var(--vp-display) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.014em !important; font-size: 1.02rem; border-radius: 12px !important; padding: 1rem 1.9rem; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease, border-color .22s ease !important; } .btn-primary, .btn-add-cart, button[type="submit"], input[type="submit"] { background: linear-gradient(178deg, #A6E4FA 0%, #7DD3F0 46%, #4FB3DC 100%) !important; color: #06121C !important; border: none !important; box-shadow: var(--vp-glow), inset 0 1px 0 rgba(255,255,255,.45) !important; } .btn-primary:hover, .btn-add-cart:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: linear-gradient(178deg, #C4EEFF 0%, #97DEF5 46%, #62C2E6 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 20px 56px -12px rgba(125, 211, 240, 0.55), inset 0 1px 0 rgba(255,255,255,.5) !important; } .btn-secondary { background: rgba(146, 168, 200, 0.05) !important; color: var(--vp-ink) !important; border: 1px solid var(--vp-line-2) !important; box-shadow: var(--vp-top) !important; } .btn-secondary:hover { background: rgba(125, 211, 240, 0.09) !important; border-color: var(--vp-cy-a24) !important; color: #fff !important; transform: translateY(-2px) !important; } .btn-add-cart { display: inline-flex !important; align-items: center; gap: 0.6rem; } .btn-add-cart svg { width: 19px !important; height: 19px !important; } /* ------------------------------------------------------------------- cards */ .feature-card, .doc-card, .faq-item, .demo-item, .interface-card, .requirements-card, .pricing-card, .pricing-tier, .demo-player, .docs-note, .faq-contact { background: linear-gradient(180deg, var(--vp-card-2) 0%, var(--vp-card) 100%) !important; border: 1px solid var(--vp-line) !important; border-radius: var(--vp-r) !important; box-shadow: var(--vp-top), var(--vp-lift) !important; transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease !important; } .feature-card, .doc-card, .faq-item, .demo-item, .requirements-card { padding: clamp(1.6rem, 2.2vw, 2.1rem) !important; } .feature-card:hover, .doc-card:hover, .faq-item:hover, .interface-card:hover { transform: translateY(-4px) !important; border-color: var(--vp-cy-a24) !important; box-shadow: var(--vp-top), 0 2px 6px rgba(0,0,0,.3), 0 26px 60px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(125,211,240,.07) !important; } .features-grid, .docs-grid, .demo-grid, .requirements-grid { gap: 1.25rem !important; margin-top: 0 !important; } .faq-grid { gap: 1.25rem !important; } /* Headings inside cards go near-white; cyan is reserved for accents and numbers. This is the single biggest "premium" shift on the page. */ .feature-card h3, .faq-item h3, .doc-card h3, .demo-item h3, .interface-info h3, .requirements-card h3 { color: var(--vp-ink) !important; font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: 1.28rem !important; letter-spacing: -0.021em !important; line-height: 1.24 !important; margin-bottom: 0.75rem !important; } .faq-item h3 { font-size: 1.14rem !important; } .feature-card p, .faq-item p, .doc-card p, .demo-item p, .interface-info p, .requirements-list li { color: var(--vp-ink-3) !important; font-size: 1rem !important; line-height: 1.66 !important; letter-spacing: -0.006em; } .feature-icon { color: var(--vp-cy) !important; margin-bottom: 1.35rem !important; display: inline-flex; padding: 0.7rem; border-radius: 12px; background: var(--vp-cy-a08); border: 1px solid var(--vp-cy-a14); } .feature-icon svg { width: 30px !important; height: 30px !important; } .doc-status { color: var(--vp-cy) !important; font-weight: 700 !important; font-size: 0.78rem !important; letter-spacing: 0.1em !important; text-transform: uppercase; } .requirements-list li { border-bottom: 1px solid var(--vp-line) !important; padding: 0.7rem 0 !important; } .requirements-list strong { color: var(--vp-ink) !important; font-weight: 650 !important; } .requirements-note { background: var(--vp-card) !important; border-left: 3px solid var(--vp-cy) !important; border-radius: 12px !important; padding: 1.5rem 1.75rem !important; } .interface-image { border-bottom: 1px solid var(--vp-line) !important; } /* ----------------------------------------------------- vv-panels subsystem */ .vv-panels { --vv-accent: var(--vp-cy); --vv-ink: var(--vp-ink); --vv-body: var(--vp-ink-2); --vv-muted: var(--vp-ink-3); --vv-faint: var(--vp-ink-4); --vv-bg: var(--vp-bg); --vv-bg-alt: var(--vp-bg-2); --vv-mat: var(--vp-matte); --vv-line: var(--vp-line-2); --vv-hair: var(--vp-line); --vv-mono: var(--vp-display); font-family: var(--vp-sans); } .vv-panels-eyebrow { font-weight: 700 !important; font-size: 0.72rem !important; letter-spacing: 0.15em !important; } .vv-panels-title, .vv-band-title { font-family: var(--vp-display) !important; font-weight: 600 !important; letter-spacing: -0.020em !important; line-height: 1.05 !important; color: var(--vp-ink) !important; } .vv-panels-title { font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.4rem) !important; } .vv-band-title { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem) !important; } .vv-band-index { font-weight: 700 !important; letter-spacing: 0.14em !important; color: var(--vp-cy) !important; } .vv-band-text { color: var(--vp-ink-3) !important; letter-spacing: -0.006em; } .vv-band-frame { border-radius: var(--vp-r) !important; box-shadow: var(--vp-lift-2) !important; } /* ----------------------------------------------------------------- pricing */ .pricing-card { padding: clamp(2.25rem, 4vw, 3.5rem) !important; border-radius: var(--vp-r-lg) !important; } .pricing-header { border-bottom: 1px solid var(--vp-line) !important; } .pricing-header h3 { font-size: 1.9rem !important; font-weight: 600 !important; letter-spacing: -0.018em !important; } .price-amount, .tier-price { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: clamp(3.4rem, 2rem + 4.4vw, 5.25rem) !important; letter-spacing: -0.038em !important; line-height: 0.92 !important; background: linear-gradient(175deg, #FFFFFF 0%, #B9E9FC 42%, #7DD3F0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .price-currency, .price-intro, .tier-slots { font-family: var(--vp-sans) !important; color: var(--vp-ink-3) !important; letter-spacing: -0.004em !important; text-transform: none !important; font-size: 0.95rem !important; } .pricing-tier-badge { font-weight: 600 !important; font-size: 0.68rem !important; letter-spacing: 0.13em !important; border-radius: 999px !important; padding: 0.4rem 0.9rem !important; } .pricing-features li { color: var(--vp-ink-2) !important; font-size: 1.02rem !important; padding: 0.5rem 0 !important; } .pricing-features li::before { color: var(--vp-mint) !important; } .pricing-note { font-style: normal !important; color: var(--vp-ink-3) !important; } .tier-savings { color: var(--vp-ink-3) !important; } .pricing-tier { border-radius: var(--vp-r) !important; padding: clamp(1.75rem, 2.6vw, 2.4rem) !important; } .pricing-tier.active { border-color: var(--vp-cy-a24) !important; box-shadow: var(--vp-top), var(--vp-lift), 0 0 0 1px rgba(125,211,240,.12), 0 30px 80px -30px rgba(125,211,240,.3) !important; } .pricing-tier h3 { font-family: var(--vp-display) !important; font-weight: 600 !important; letter-spacing: -0.022em !important; color: var(--vp-ink) !important; } /* ----------------------------------------------------------- audio players */ .demo-player { border-radius: var(--vp-r) !important; padding: 1.35rem !important; } .demo-toggle { gap: 0.4rem !important; } .toggle-btn { font-family: var(--vp-display) !important; font-weight: 650 !important; font-size: 0.86rem !important; letter-spacing: -0.008em !important; text-transform: none !important; border-radius: 9px !important; border: 1px solid var(--vp-line) !important; background: rgba(146, 168, 200, 0.05) !important; color: var(--vp-ink-3) !important; transition: all .18s ease !important; } .toggle-btn.active { background: var(--vp-cy) !important; border-color: var(--vp-cy) !important; color: #06121C !important; box-shadow: 0 6px 18px -6px rgba(125,211,240,.5) !important; } .play-btn { background: linear-gradient(178deg, #A6E4FA 0%, #7DD3F0 46%, #4FB3DC 100%) !important; color: #06121C !important; border: none !important; box-shadow: 0 8px 22px -8px rgba(125,211,240,.6) !important; } .progress-container { background: rgba(146,168,200,.12) !important; border-radius: 999px !important; } .progress-bar-demo { background: linear-gradient(90deg, var(--vp-cy-lo), var(--vp-cy)) !important; border-radius: 999px !important; } .time-display { font-family: var(--vp-sans) !important; font-variant-numeric: tabular-nums; font-size: 0.82rem !important; letter-spacing: 0 !important; color: var(--vp-ink-4) !important; } /* ------------------------------------------------------------ notes / cart */ .docs-note, .faq-contact { border-radius: var(--vp-r) !important; padding: 1.75rem !important; } .faq-contact { border-color: var(--vp-cy-a24) !important; } .launch-banner { font-family: var(--vp-display) !important; font-weight: 650 !important; letter-spacing: -0.008em !important; } .cart-content { border-radius: var(--vp-r-lg) !important; background: var(--vp-card) !important; border: 1px solid var(--vp-line) !important; } .cart-checkout, .btn-trial { font-family: var(--vp-display) !important; font-weight: 700 !important; letter-spacing: -0.014em !important; text-transform: none !important; border-radius: 12px !important; } .cart-icon { box-shadow: var(--vp-glow) !important; } /* ------------------------------------------------------------------- forms */ input[type="text"], input[type="email"], textarea { font-family: var(--vp-sans) !important; font-size: 1rem !important; background: rgba(146, 168, 200, 0.05) !important; border: 1px solid var(--vp-line-2) !important; border-radius: 11px !important; color: var(--vp-ink) !important; padding: 0.95rem 1.15rem !important; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } input[type="text"]::placeholder, input[type="email"]::placeholder, textarea::placeholder { color: var(--vp-ink-4) !important; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--vp-cy-a24) !important; background: rgba(125, 211, 240, 0.06) !important; box-shadow: 0 0 0 3px rgba(125, 211, 240, 0.1) !important; outline: none !important; } /* ------------------------------------------------------------------ footer */ .footer { background: var(--vp-matte) !important; border-top: 1px solid var(--vp-line) !important; padding-top: clamp(3.5rem, 6vw, 5.5rem) !important; } .footer-column h4 { font-family: var(--vp-display) !important; color: var(--vp-ink) !important; font-size: 0.76rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; margin-bottom: 1.1rem !important; } .footer-column a, .footer-brand p { color: var(--vp-ink-3) !important; font-size: 0.95rem !important; letter-spacing: -0.005em; transition: color .18s ease; } .footer-column a:hover { color: var(--vp-cy) !important; } .footer-bottom { border-top: 1px solid var(--vp-line) !important; color: var(--vp-ink-4) !important; } /* -------------------------------------------------------------- responsive */ @media (max-width: 768px) { .title-main { letter-spacing: -0.026em !important; } .section-title::before { margin-bottom: 1.4rem; } .btn, .btn-primary, .btn-secondary, .btn-add-cart { width: 100%; justify-content: center; } .feature-card, .doc-card, .faq-item, .demo-item, .requirements-card { padding: 1.5rem !important; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================================ DOWNLOADS PAGE (downloads-index.html) Brings the standalone downloads page onto the same system as the homepage. ========================================================================== */ .downloads-hero { background: radial-gradient(120% 80% at 50% -14%, rgba(125, 211, 240, 0.16) 0%, rgba(125, 211, 240, 0.04) 40%, transparent 70%), var(--vp-bg) !important; } .downloads-hero .eyebrow { font-family: var(--vp-display) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.13em !important; color: var(--vp-cy) !important; border-color: var(--vp-cy-a24) !important; background: var(--vp-cy-a08) !important; } .downloads-hero h1 { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: clamp(2.9rem, 1.2rem + 7vw, 6rem) !important; letter-spacing: -0.030em !important; line-height: 0.95 !important; word-spacing: 0.06em; background: linear-gradient(173deg, #FBFEFF 0%, #DFF4FF 20%, #9FDEF6 52%, #7DD3F0 74%, #46A3D4 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 6px 26px rgba(125, 211, 240, 0.30)) !important; } .downloads-hero p { color: var(--vp-ink-3) !important; font-size: 1.14rem !important; letter-spacing: -0.008em; } .version-card, .system-req { background: linear-gradient(180deg, var(--vp-card-2) 0%, var(--vp-card) 100%) !important; border: 1px solid var(--vp-line) !important; border-radius: var(--vp-r-lg) !important; box-shadow: var(--vp-top), var(--vp-lift-2) !important; } .version-header { border-bottom: 1px solid var(--vp-line) !important; } .version-header h2, .system-req h3, .support-section h3 { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: 1.75rem !important; letter-spacing: -0.018em !important; word-spacing: 0.06em; color: var(--vp-ink) !important; } .version-header h2 strong { color: var(--vp-cy) !important; font-weight: 600 !important; } .version-badge, .eyebrow-label, .meta-label, .changelog h3 { font-family: var(--vp-display) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.13em !important; } .version-badge { border-color: rgba(245, 181, 68, 0.45) !important; background: rgba(245, 181, 68, 0.09) !important; color: #F5B544 !important; } .version-meta { background: var(--vp-cy-a08) !important; border: 1px solid var(--vp-line) !important; border-radius: 12px !important; } .meta-label { color: var(--vp-ink-4) !important; } .meta-value { color: var(--vp-ink) !important; font-weight: 650 !important; } .version-info p { color: var(--vp-ink-2) !important; } .download-btn { font-family: var(--vp-display) !important; font-weight: 700 !important; font-size: 1.02rem !important; letter-spacing: -0.014em !important; border-radius: 12px !important; background: rgba(146, 168, 200, 0.05) !important; border: 1px solid var(--vp-line-2) !important; color: var(--vp-ink) !important; box-shadow: var(--vp-top) !important; } .download-btn:hover { background: rgba(125, 211, 240, 0.1) !important; border-color: var(--vp-cy-a24) !important; transform: translateY(-2px) !important; } .download-btn svg { color: var(--vp-cy) !important; } /* First (primary) installer button reads as the page's main action. */ .download-buttons > .download-btn:first-child:not(.disabled) { background: linear-gradient(178deg, #A6E4FA 0%, #7DD3F0 46%, #4FB3DC 100%) !important; color: #06121C !important; border: none !important; box-shadow: var(--vp-glow), inset 0 1px 0 rgba(255,255,255,.45) !important; } .download-buttons > .download-btn:first-child:not(.disabled) svg { color: #06121C !important; } .download-buttons > .download-btn:first-child:not(.disabled):hover { background: linear-gradient(178deg, #C4EEFF 0%, #97DEF5 46%, #62C2E6 100%) !important; } .beta-notice { background: rgba(245, 181, 68, 0.05) !important; border-color: rgba(245, 181, 68, 0.28) !important; border-radius: 12px !important; } .beta-notice svg, .beta-notice-content h4 { color: #F5B544 !important; } .beta-notice-content h4 { font-family: var(--vp-display) !important; font-weight: 700 !important; letter-spacing: -0.012em !important; } .beta-notice-content p { color: var(--vp-ink-3) !important; } .changelog { background: var(--vp-cy-a08) !important; border-left: 3px solid var(--vp-cy) !important; border-radius: 12px !important; } .changelog h3 { color: var(--vp-cy) !important; } .changelog li { color: var(--vp-ink-2) !important; } .changelog li::before { background: var(--vp-cy) !important; } .req-table tr { border-bottom: 1px solid var(--vp-line) !important; } .req-table th { font-family: var(--vp-sans) !important; font-weight: 650 !important; letter-spacing: -0.006em !important; color: var(--vp-ink) !important; } .req-table td { color: var(--vp-ink-3) !important; } .support-section > p { color: var(--vp-ink-3) !important; } .support-link { font-family: var(--vp-display) !important; font-weight: 650 !important; letter-spacing: -0.010em !important; border-radius: 11px !important; background: rgba(146, 168, 200, 0.05) !important; border: 1px solid var(--vp-line-2) !important; color: var(--vp-ink) !important; } .support-link:hover { background: rgba(125, 211, 240, 0.1) !important; border-color: var(--vp-cy-a24) !important; } .support-link svg { color: var(--vp-cy) !important; } .downloads-container .footer, body > .footer { background: var(--vp-matte) !important; border-top: 1px solid var(--vp-line) !important; } /* ============================================================================ HERO PANEL CAROUSEL Seven interface screenshots, stepped through with arrows / dots / keyboard / swipe. Images are stacked in a single CSS grid cell so the stage sizes itself to the artwork and slides crossfade in place — no fixed aspect ratio needed and no layout shift when a slide changes. ========================================================================== */ .vv-carousel { position: relative; width: 100%; } /* --- stage ------------------------------------------------------------- */ .vv-car-stage { display: grid; border-radius: var(--vp-r-lg); overflow: hidden; border: 1px solid var(--vp-line-2); background: var(--vp-matte); box-shadow: var(--vp-lift-2), 0 0 0 1px rgba(125, 211, 240, .06), 0 40px 120px -40px rgba(125, 211, 240, .28); touch-action: pan-y; /* let the page scroll; we own the X axis */ cursor: grab; } .vv-car-stage:active { cursor: grabbing; } .vv-car-stage > img { grid-area: 1 / 1; /* every slide occupies the same cell */ width: 100%; height: auto; display: block; opacity: 0; visibility: hidden; transition: opacity .38s cubic-bezier(.4, 0, .2, 1); /* the card treatment lives on the stage, not the image */ border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .vv-car-stage > img.is-active { opacity: 1; visibility: visible; } /* --- arrows ------------------------------------------------------------ */ .vv-car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid var(--vp-line-2); background: rgba(11, 13, 24, .62); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); color: var(--vp-ink); cursor: pointer; box-shadow: var(--vp-top), 0 8px 26px -8px rgba(0, 0, 0, .7); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1), opacity .2s ease; } .vv-car-arrow:hover { background: rgba(125, 211, 240, .16); border-color: var(--vp-cy-a24); color: #fff; } .vv-car-arrow:active { transform: translateY(-50%) scale(.94); } .vv-car-arrow svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .vv-car-prev { left: -26px; } .vv-car-next { right: -26px; } /* Below ~1180px the arrows would sit off-canvas, so tuck them inside the frame. */ @media (max-width: 1180px) { .vv-car-prev { left: 12px; } .vv-car-next { right: 12px; } } /* --- dots + caption ---------------------------------------------------- */ .vv-car-controls { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-top: 1.6rem; } .vv-car-dots { display: flex; align-items: center; gap: .55rem; } .vv-car-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; background: rgba(146, 168, 200, .28); cursor: pointer; transition: background .2s ease, width .28s cubic-bezier(.2, .7, .3, 1); } .vv-car-dot:hover { background: rgba(146, 168, 200, .5); } .vv-car-dot.is-active { width: 26px; background: var(--vp-cy); } .vv-car-caption { margin: 0; font-family: var(--vp-display); font-size: .88rem; font-weight: 600; letter-spacing: -.008em; color: var(--vp-ink-3); text-align: center; } .vv-car-caption .vv-car-index { color: var(--vp-cy); font-weight: 700; letter-spacing: .11em; font-size: .74rem; text-transform: uppercase; margin-right: .6rem; } /* --- small screens ----------------------------------------------------- */ @media (max-width: 640px) { .vv-car-arrow { width: 42px; height: 42px; } .vv-car-arrow svg { width: 18px; height: 18px; } .vv-car-prev { left: 8px; } .vv-car-next { right: 8px; } .vv-car-controls { margin-top: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .vv-car-stage > img { transition: none; } } /* ============================================================================ LEGAL PAGES — privacy.html / terms.html / eula.html These load style.css + legal.css and were not part of the original redesign. The rules below pull them onto the same type scale, palette and surfaces as the rest of the site. Legal copy itself is untouched. ========================================================================== */ /* The top nav held a logo pointing at a filename that was never on the server. The markup is gone; this is belt and braces if a stale copy ever ships. */ .legal-nav { display: none !important; } .legal-main { max-width: 780px !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2rem) 4rem !important; } .legal-header { margin-bottom: 2.75rem !important; padding-bottom: 1.75rem !important; border-bottom: 1px solid var(--vp-line) !important; } .legal-header h1 { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.1rem) !important; letter-spacing: -0.028em !important; line-height: 1.05 !important; word-spacing: .06em; color: var(--vp-ink) !important; margin-bottom: .7rem !important; } .legal-meta { color: var(--vp-ink-4) !important; font-size: .9rem !important; } .legal-content h2 { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: 1.5rem !important; letter-spacing: -0.022em !important; line-height: 1.25 !important; word-spacing: .05em; color: var(--vp-ink) !important; border-bottom: 1px solid var(--vp-line) !important; padding-bottom: .65rem !important; margin-top: 3rem !important; } .legal-content h3 { font-family: var(--vp-display) !important; font-weight: 600 !important; font-size: 1.14rem !important; letter-spacing: -0.016em !important; color: var(--vp-ink) !important; } .legal-content p, .legal-content li, .legal-content ul, .legal-content ol, .legal-content td { color: var(--vp-ink-2) !important; font-size: 1rem !important; line-height: 1.72 !important; letter-spacing: -0.005em; } .legal-content li::marker { color: var(--vp-cy) !important; } .legal-content strong { color: var(--vp-ink) !important; font-weight: 650 !important; } .legal-content a { color: var(--vp-cy) !important; text-underline-offset: 3px; } .legal-content a:hover, .legal-content a:focus-visible { color: var(--vp-cy-hi) !important; } .legal-content th, .legal-content td { border-bottom: 1px solid var(--vp-line) !important; } .legal-content th { color: var(--vp-ink) !important; font-weight: 650 !important; background: var(--vp-cy-a08) !important; font-family: var(--vp-display) !important; letter-spacing: -0.008em !important; } .legal-callout { background: var(--vp-cy-a08) !important; border-left: 3px solid var(--vp-cy) !important; border-radius: 0 12px 12px 0 !important; padding: 1.15rem 1.4rem !important; color: var(--vp-ink-2) !important; } .legal-all-caps { background: rgba(146, 168, 200, .04) !important; border: 1px solid var(--vp-line) !important; border-radius: 12px !important; color: var(--vp-ink-3) !important; padding: 1.15rem 1.4rem !important; } .legal-back { border-top: 1px solid var(--vp-line) !important; } .legal-back a { font-family: var(--vp-display) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--vp-cy) !important; font-size: 1rem !important; } .legal-back a:hover { color: var(--vp-cy-hi) !important; } .legal-footer { background: var(--vp-matte) !important; border-top: 1px solid var(--vp-line) !important; padding: 2.5rem 2rem !important; } .legal-footer p { color: var(--vp-ink-4) !important; font-size: .86rem !important; } .footer-social a { color: var(--vp-ink-3) !important; background: rgba(146, 168, 200, .05) !important; border: 1px solid var(--vp-line-2) !important; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } .footer-social a:hover, .footer-social a:focus-visible { color: #fff !important; background: rgba(125, 211, 240, .14) !important; border-color: var(--vp-cy-a24) !important; transform: translateY(-2px); } .legal-footer-links a { color: var(--vp-cy) !important; font-weight: 600 !important; } .legal-footer-links a:hover { color: var(--vp-cy-hi) !important; } .legal-footer-links span { color: var(--vp-ink-4) !important; } .skip-link { background: var(--vp-cy) !important; color: #06121C !important; font-family: var(--vp-display) !important; font-weight: 700 !important; border-radius: 0 0 10px 0 !important; } /* Inline 'DejaVu Sans' usages (waitlist stat figures) — pulled onto the display face so no element is left on the old typewriter stack. */ [style*="DejaVu"] { font-family: var(--vp-display) !important; font-weight: 600 !important; letter-spacing: -0.018em !important; font-variant-numeric: tabular-nums; }