/* DeAnalog — the site lives in the same design world as the panels: dark chassis, brushed metal, engraved type, one warm indicator colour. */ html{color-scheme:dark} :root{ /* Lifted off near-black. The first pass sat at #0d0e11 with #16181d cards -- only 9 luma of separation, so the whole page read as one black slab and the panel shots had nothing to sit against. A dark PRODUCT photo needs a surround that is dark but clearly lighter than the product, the way a real chassis reads against a studio wall. */ --bg:#1a1d22; /* chassis -- was 0d0e11 */ --bg2:#22262c; --card:#252930; /* now 11 luma above bg, and visibly a card */ --line:#363b44; /* borders you can actually see */ --ink:#f4f5f7; --dim:#aeb4bf; /* lifted: 9aa0ab was fighting the darker bg */ --faint:#828994; --amber:#ffb43a; /* the panel's indicator colour — used sparingly, like a real LED */ --indigo:#6f7bef; --r:14px; --pad:clamp(20px,5vw,80px); --maxw:1240px; } *{box-sizing:border-box} /* Background lives on so the fixed ambient gutters (z-index:-1) can sit behind the transparent content and only show through in the side margins. */ html{scroll-behavior:smooth; background:var(--bg)} body{ margin:0; background:transparent; color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } /* ── AMBIENT SYNTHWAVE GUTTERS ────────────────────────────────────────────── Subtle palm-silhouette glow flanking the content on wide screens. Fixed and behind everything, faded toward the content column so it never fights the text, and gone entirely on narrower screens where there's no gutter to fill. */ .gutter{ position:fixed; top:0; bottom:0; z-index:-1; pointer-events:none; overflow:hidden; width:calc((100vw - var(--maxw)) / 2 + 40px); opacity:.5; /* keep it a whisper, not a poster */ } .gutter .scene{ position:absolute; inset:0; background: url("assets/palms.svg") bottom center / auto 56% no-repeat, linear-gradient(180deg, transparent 0%, rgba(70,40,96,0) 16%, rgba(91,42,134,.50) 50%, rgba(160,43,143,.55) 80%, rgba(224,85,155,.58) 100%); } .gutter.l{ left:0; -webkit-mask:linear-gradient(90deg,#000 30%,transparent); mask:linear-gradient(90deg,#000 30%,transparent); } .gutter.r{ right:0; -webkit-mask:linear-gradient(270deg,#000 30%,transparent); mask:linear-gradient(270deg,#000 30%,transparent); } .gutter.r .scene{ transform:scaleX(-1); } /* mirror for symmetric framing */ @media (max-width:1180px){ .gutter{ display:none } } img{max-width:100%; height:auto; display:block} h1,h2,h3{line-height:1.1; margin:0; letter-spacing:-.02em} p{margin:0} a{color:inherit; text-decoration:none} /* the DA mark: the Blender-rendered relief the plugin header wears, filled bright for dark ground */ .mark{width:44px; height:auto; flex:0 0 44px} .mark.foot{width:36px; flex:0 0 36px; opacity:.75} /* ── NAV ─────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--pad); background:rgba(26,29,34,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .brand{display:flex; align-items:center; gap:11px} .brandtext{font-weight:650; letter-spacing:-.01em; font-size:17px} .nav nav{display:flex; align-items:center; gap:6px} .nav nav a{padding:8px 13px; border-radius:8px; font-size:14px; color:var(--dim)} .nav nav a:hover{color:var(--ink); background:var(--bg2)} .nav nav a.cta{color:#0d0e11; background:var(--amber); font-weight:650} .nav nav a.cta:hover{background:#ffc766} /* ── shared ──────────────────────────────────────────── */ section{padding:clamp(30px,3.4vw,50px) var(--pad); max-width:var(--maxw); margin-inline:auto} .eyebrow{ font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; } .lede{color:var(--dim); font-size:clamp(15px,1.5vw,18px); max-width:62ch; margin-top:16px} .fine{color:var(--faint); font-size:13px; margin-top:14px} .sechead{margin-bottom:26px} .sechead h2{font-size:clamp(28px,4vw,44px)} .row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px} .btn{ display:inline-block; padding:13px 22px; border-radius:11px; font-weight:600; font-size:15px; border:1px solid transparent; transition:transform .12s ease, background .18s ease, border-color .18s ease; } .btn:active{transform:translateY(1px)} .btn.primary{background:var(--amber); color:#0d0e11} .btn.primary:hover{background:#ffc766} .btn.primary.big{padding:16px 30px; font-size:16px} .btn.ghost{border-color:var(--line); color:var(--ink); background:var(--bg2)} .btn.ghost:hover{border-color:#39404a} /* "Coming Soon" — a STATE, not a link: no href, not clickable, clearly not a live buy button. site.js swaps these back to real links the moment a URL is set in SYNTH_BUY_URL / DOWNLOADS. */ .btn.is-soon{cursor:default; pointer-events:none} .btn.primary.is-soon{background:transparent; color:var(--amber); border-color:rgba(255,180,58,.45); box-shadow:none} .btn.ghost.is-soon{opacity:.5} /* ── OPENING ─────────────────────────────────────────── */ .panel-intro{ display:grid; gap:clamp(30px,4vw,56px); align-items:center; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding-top:clamp(36px,4.5vw,64px); } .panel-intro h1{font-size:clamp(38px,6vw,68px); font-weight:700} .panel-intro h1 span{color:var(--dim)} .panel-shot{margin:0; position:relative} .panel-shot img{ border-radius:var(--r); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset; transition:opacity .22s ease; } .panel-shot img.swapping{opacity:.35} /* ── THEME WALL ──────────────────────────────────────── */ .swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px} .sw{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:16px 18px; border-radius:12px; cursor:pointer; text-align:left; background:var(--card); border:1px solid var(--line); color:var(--ink); font:inherit; transition:border-color .18s ease, background .18s ease, transform .12s ease; } .sw:hover{border-color:#39404a; transform:translateY(-2px)} .sw.is-on{border-color:var(--amber); background:#2c313a} .sw .dot{ width:26px; height:26px; border-radius:50%; margin-bottom:8px; background:linear-gradient(140deg,var(--a),var(--b)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.5); } .sw b{font-size:15px} .sw i{font-style:normal; font-size:12.5px; color:var(--faint)} /* ── FEATURES ────────────────────────────────────────── */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px} .feat{padding:26px; border-radius:var(--r); background:var(--card); border:1px solid var(--line)} .feat h3{font-size:17px; margin-bottom:10px} .feat p{color:var(--dim); font-size:14.5px} /* ── HEAR ────────────────────────────────────────────── */ .players{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px} .players figure.wide{grid-column:1/-1} .players figure{margin:0; padding:22px; border-radius:var(--r); background:var(--card); border:1px solid var(--line)} .players figcaption{ font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; } .players audio{width:100%} /* ── PRESETS ─────────────────────────────────────────── */ .presets .big{color:var(--amber); font-variant-numeric:tabular-nums} .colls{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px} .colls li{ padding:9px 15px; border-radius:999px; font-size:13.5px; color:var(--dim); background:var(--card); border:1px solid var(--line); } /* ── CATALOG ─────────────────────────────────────────── */ /* cards bring their own padding, so the run needs less between them */ .prod{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:center; padding:clamp(26px,3vw,40px); margin-bottom:16px; border-radius:18px; background:var(--card); border:1px solid var(--line); } .prod:nth-child(even) img{order:2} .prod img{border-radius:10px; border:1px solid var(--line); cursor:zoom-in} .prod h3{font-size:clamp(22px,2.6vw,30px); margin-bottom:12px} .prod p{color:var(--dim); font-size:15px} .badge{ display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px; font:600 10px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.12em; } .badge.beta{background:rgba(255,180,58,.14); color:var(--amber); border:1px solid rgba(255,180,58,.3)} .badge.soon{background:#2c313a; color:var(--faint); border:1px solid var(--line)} /* ── COMPAT ──────────────────────────────────────────── */ .compat{text-align:center} .compat h2{font-size:clamp(24px,3.4vw,36px); margin-bottom:28px} .compat ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px} .compat li{padding:10px 18px; border-radius:10px; color:var(--dim); font-size:14px; background:var(--card); border:1px solid var(--line)} /* ── GET ─────────────────────────────────────────────── */ .get{ text-align:center; border-radius:22px; margin-bottom:clamp(40px,5vw,72px); padding-block:clamp(44px,5vw,72px); background:linear-gradient(180deg,#252930,#1c2026); border:1px solid var(--line); } .get h2{font-size:clamp(30px,4.4vw,48px)} .get .lede{margin-inline:auto; margin-bottom:30px} footer{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:34px var(--pad); border-top:1px solid var(--line); color:var(--faint); font-size:13.5px; } footer p{margin-right:auto} /* ── LIGHTBOX ────────────────────────────────────────── */ .lightbox{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:5vw; background:rgba(10,12,15,.94); cursor:zoom-out; } /* A class rule beats the UA stylesheet's [hidden]{display:none}, so `display:grid` above kept this full-screen 94%-opaque scrim painted over the ENTIRE page at all times. Everything looked correct in the DOM and in computed styles -- the page really was that dark on screen. */ .lightbox[hidden]{display:none} .lightbox img{max-height:90vh; border-radius:10px; border:1px solid var(--line)} @media (max-width:900px){ .panel-intro,.prod{grid-template-columns:1fr} .prod:nth-child(even) img{order:0} .nav nav a:not(.cta){display:none} } @media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }