/* CNTRLLD SPECTRA — site Colours and type follow the plug-in interface (Source/web/style.css). */ @font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('../fonts/Barlow-400.woff2') format('woff2')} @font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url('../fonts/Barlow-500.woff2') format('woff2')} @font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('../fonts/Barlow-600.woff2') format('woff2')} @font-face{font-family:'Barlow Semi Condensed';font-weight:400;font-display:swap;src:url('../fonts/BarlowSemiCondensed-400.woff2') format('woff2')} @font-face{font-family:'Barlow Semi Condensed';font-weight:500;font-display:swap;src:url('../fonts/BarlowSemiCondensed-500.woff2') format('woff2')} @font-face{font-family:'Barlow Semi Condensed';font-weight:600;font-display:swap;src:url('../fonts/BarlowSemiCondensed-600.woff2') format('woff2')} :root{ --edge:#0a0e12; --ink:#10151a; --panel:#171e24; --panel-2:#1c252c; --plot:#111920; --rule:#27333c; --rule-soft:#1e2830; --txt:#c8d4dc; --txt-hi:#f1f5f8; --dim:#7e8e9a; --faint:#5a6975; --amber:#e7a24a; --steel:#5fa8c9; --mint:#80e8cc; --bone:#e6ddcd; --lav:#b9a7f0; --ok:#7fb97a; --warn:#d7705a; --sans:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --cond:'Barlow Semi Condensed','Barlow',ui-sans-serif,system-ui,sans-serif; --wrap:1180px; --gutter:clamp(16px,4vw,40px); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--ink);color:var(--txt);font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;height:auto;display:block} a{color:var(--txt-hi);text-decoration-color:var(--faint);text-underline-offset:3px} a:hover{text-decoration-color:var(--amber)} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px} h1,h2,h3{color:var(--txt-hi);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.005em;text-wrap:balance} p{margin:0} p+p{margin-top:1em} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)} .skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 12px;z-index:100} .skip:focus{left:8px} /* ---------- our own notes, only on our own machine ---------- De site staat live, dus de balk en de gestippelde vakjes zijn standaard weg. js/site.js zet .dev op op localhost en op workers.dev; daar zien we ze wel. Zo hoeft er bij een uitrol niets weggehaald te worden. */ .preview-note{display:none} html.dev .preview-note{display:block;background:#231a0d;border-bottom:1px solid #4a3516;color:#e9c893; font:500 13px/1.4 var(--sans);padding-block:8px;text-align:center} .preview-note .wrap{display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap;align-items:center} .preview-note label{display:inline-flex;gap:6px;align-items:center;cursor:pointer;color:#f3dcb3} html.dev body.hide-tbd .tbd{outline:none} html.dev body.hide-tbd .tbd::after{display:none} html.dev .tbd{outline:1px dashed rgba(231,162,74,.55);outline-offset:4px;border-radius:4px;position:relative} html.dev .tbd::after{content:attr(data-tbd);position:absolute;top:-10px;right:-6px;transform:translateY(-50%); background:#3a2a12;color:#f0c27e;font:600 10px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase; padding:4px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;max-width:260px;overflow:hidden;text-overflow:ellipsis} /* Terminalregels in door de Worker gemaakte pagina's (download, changelog). */ pre.cmd{background:var(--plot);border:1px solid var(--rule-soft);border-radius:8px;padding:14px 16px;overflow-x:auto; font:400 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--txt);margin:12px 0 0} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:50;background:rgba(16,21,26,.86); backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--rule-soft)} .site-head .wrap{display:flex;align-items:center;gap:20px;min-height:60px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex-shrink:0} .brand .mfr{font:500 10.5px/1 var(--sans);letter-spacing:.3em;color:var(--faint); padding-right:12px;border-right:1px solid var(--rule)} .brand .word{font:600 21px/1 var(--sans);letter-spacing:.1em;color:var(--txt-hi)} .nav{display:flex;gap:4px;margin-left:auto;align-items:center} .nav a{font:500 14.5px/1 var(--sans);color:var(--dim);text-decoration:none;padding:10px 12px;border-radius:6px} .nav a:hover,.nav a[aria-current="page"]{color:var(--txt-hi)} .nav .btn{margin-left:8px} .menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);color:var(--txt); border-radius:6px;padding:8px 12px;font:500 14px/1 var(--sans);cursor:pointer} @media (max-width:860px){ .menu-toggle{display:inline-block} .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch; background:var(--ink);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 16px;gap:0} .nav.open{display:flex} .nav a{padding:14px 4px;border-bottom:1px solid var(--rule-soft);border-radius:0} .nav .btn{margin:12px 0 0;text-align:center;border-bottom:0} } /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--sans); padding:13px 20px;border-radius:7px;text-decoration:none;border:1px solid transparent;cursor:pointer; transition:background .15s,border-color .15s,color .15s} .btn-primary{background:var(--amber);color:#1a1206} .btn-primary:hover{background:#f0b25f} .btn-ghost{border-color:var(--rule);color:var(--txt-hi);background:rgba(255,255,255,.015)} .btn-ghost:hover{border-color:var(--faint)} .btn-sm{padding:9px 14px;font-size:14px} .nav a.btn-primary{color:#1a1206} /* ---------- type helpers ---------- */ .eyebrow{font:500 12.5px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--amber); display:flex;align-items:center;gap:10px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(231,162,74,.5);animation:pulse 2.6s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,162,74,.45)}70%{box-shadow:0 0 0 7px rgba(231,162,74,0)}100%{box-shadow:0 0 0 0 rgba(231,162,74,0)}} @media (prefers-reduced-motion:reduce){.eyebrow .dot{animation:none}} .lede{font-size:clamp(17px,1.6vw,20px);color:var(--txt);max-width:40em} .muted{color:var(--dim)} .num{font-family:var(--cond);font-variant-numeric:tabular-nums} .k-amber{color:var(--amber)} .k-steel{color:var(--steel)} .k-mint{color:var(--mint)} .k-bone{color:var(--bone)} /* ---------- sections ---------- */ section{padding-block:clamp(64px,9vw,120px)} .section-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)} .section-head h2{font-size:clamp(30px,4vw,46px);margin-top:14px} .section-head p{margin-top:18px} .band{background:linear-gradient(180deg,var(--edge),var(--ink))} .rule-top{border-top:1px solid var(--rule-soft)} /* ---------- hero ---------- */ .hero{padding-block:clamp(48px,8vw,96px) 0;overflow:hidden; background:radial-gradient(1100px 520px at 70% 8%,rgba(95,168,201,.10),transparent 60%), radial-gradient(700px 380px at 12% 30%,rgba(231,162,74,.07),transparent 65%),var(--edge)} .hero h1{font-size:clamp(38px,6.2vw,74px);margin-top:20px;max-width:14em} .hero h1 em{font-style:normal;color:var(--mint)} .hero .lede{margin-top:22px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;align-items:center} .hero-meta{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:26px;font:500 13.5px/1.3 var(--cond);letter-spacing:.06em;color:var(--dim);text-transform:uppercase} .hero-meta span{display:inline-flex;align-items:center;gap:8px} .hero-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--faint)} .hero-shot{margin-top:clamp(40px,6vw,72px);position:relative} .hero-shot::before{content:"";position:absolute;inset:8% 6% -4%;background:radial-gradient(closest-side,rgba(128,232,204,.14),transparent);filter:blur(30px);z-index:0} .shot{position:relative;z-index:1;border-radius:12px;overflow:hidden;border:1px solid var(--rule); box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;background:var(--panel)} .hero-shot .shot{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0} /* ---------- concept: Follow demo ---------- */ .concept{display:grid;grid-template-columns:1fr 1fr;gap:18px} .idea{background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px;padding:26px 26px 28px} .idea h3{font-size:21px;margin-top:10px} .idea p{margin-top:10px;color:var(--dim);font-size:16px} .idea .tag{font:500 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} @media (max-width:760px){.concept{grid-template-columns:1fr}} .demo{margin-top:18px;background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden} .demo-plot{background:var(--plot);border-bottom:1px solid var(--rule-soft);display:flex;flex-direction:column} .demo-plot .demo-legend{order:-1} .demo-plot svg{display:block;width:100%;height:auto;touch-action:none} .demo-legend{display:flex;gap:6px 16px;flex-wrap:wrap;padding:14px 16px 4px; font:500 12.5px/1 var(--cond);color:var(--dim)} .demo-legend i{display:inline-block;width:14px;height:2px;margin-right:6px;vertical-align:middle;border-radius:1px} .demo-note{margin-left:auto;color:var(--faint);letter-spacing:.04em} .demo-controls{display:grid;grid-template-columns:auto 1fr auto;gap:10px 22px;align-items:center;padding:20px 24px 22px} .demo-controls label{font:600 15px/1 var(--sans);color:var(--txt-hi)} .demo-controls .ends{display:flex;justify-content:space-between;font:400 13px/1.2 var(--cond);color:var(--dim);grid-column:2;margin-top:-4px} .demo-controls output{font:500 18px/1 var(--cond);color:var(--amber);min-width:3.6em;text-align:right} .demo-caption{padding:0 24px 22px;color:var(--dim);font-size:15px;min-height:3.2em} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--p,50%),var(--rule) var(--p,50%))} input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--rule)} input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--amber)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#dfe7ec;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--amber);margin-top:-7px} input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#dfe7ec;border:3px solid var(--panel);box-shadow:0 0 0 1px var(--amber)} @media (max-width:560px){ .demo-controls{grid-template-columns:1fr auto;padding:18px 16px} .demo-controls input{grid-column:1 / -1;grid-row:2} .demo-controls .ends{grid-column:1 / -1;grid-row:3} .demo-caption{padding:0 16px 18px} .demo-legend{font-size:11.5px;gap:6px 12px} .demo-note{margin-left:0;flex-basis:100%} } /* ---------- split feature rows ---------- */ .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center} .split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .split.flip .split-text{order:2} .split h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px} .split .split-text p{margin-top:16px} @media (max-width:900px){.split,.split.flip{grid-template-columns:1fr}.split.flip .split-text{order:0}} .list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px} .list li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--txt);font-size:16px} .list li::before{content:"";width:8px;height:8px;margin-top:9px;border-radius:2px;background:var(--amber);transform:rotate(45deg)} .list li b{color:var(--txt-hi);font-weight:600} .list.mint li::before{background:var(--mint)} .list.steel li::before{background:var(--steel)} .kbd{font:500 12.5px/1 var(--cond);color:var(--txt-hi);background:var(--panel-2);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:3px 6px;white-space:nowrap} /* ---------- paths ---------- */ .paths{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden} .path{background:var(--panel);padding:24px 22px 26px} .path .name{font:600 20px/1.1 var(--sans);color:var(--txt-hi)} .path .sub{font:400 13.5px/1.2 var(--cond);color:var(--dim);margin-top:4px} .path p{margin-top:14px;font-size:15.5px;color:var(--txt)} .path .bar{height:3px;width:36px;border-radius:2px;margin-top:18px} @media (max-width:980px){.paths{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.paths{grid-template-columns:1fr}} .knobs-shot{margin-top:18px} /* ---------- variants ---------- */ .variants{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .variant{background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px;padding:26px;position:relative;overflow:hidden} .variant::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule)} .variant.on::before{background:var(--amber)} .variant .name{font:600 22px/1 var(--sans);color:var(--txt-hi)} .variant .lat{font:500 44px/1 var(--cond);color:var(--txt-hi);margin-top:18px;letter-spacing:-.01em} .variant .lat small{font-size:18px;color:var(--dim);margin-left:4px} .variant .for{font:500 12.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:10px} .variant p{margin-top:16px;color:var(--dim);font-size:15.5px} @media (max-width:860px){.variants{grid-template-columns:1fr}} .variants-foot{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:22px;color:var(--dim);font-size:15.5px} .variants-foot b{color:var(--txt-hi);font-weight:600} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden} .stat{background:var(--panel);padding:26px 24px 28px} .stat .v{font:500 clamp(34px,3.6vw,46px)/1 var(--cond);color:var(--txt-hi);letter-spacing:-.01em} .stat .v small{font-size:.45em;color:var(--dim);margin-left:4px;letter-spacing:0} .stat .l{font:600 16px/1.3 var(--sans);color:var(--txt-hi);margin-top:14px} .stat p{font-size:15px;color:var(--dim);margin-top:6px} @media (max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.stats{grid-template-columns:1fr}} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px} .cell{background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px;padding:24px} .cell h3{font-size:18px} .cell p{margin-top:8px;font-size:15.5px;color:var(--dim)} @media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}} @media (max-width:600px){.grid-3{grid-template-columns:1fr}} /* ---------- interface ---------- */ .ui-grid{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:18px;align-items:start} .ui-side{display:grid;gap:18px} .ui-side .shot{border-radius:10px} @media (max-width:760px){.ui-grid{grid-template-columns:1fr}.ui-side{grid-template-columns:1fr 1fr}} @media (max-width:460px){.ui-side{grid-template-columns:1fr}} figcaption{font:400 13.5px/1.4 var(--cond);color:var(--faint);margin-top:10px;letter-spacing:.02em} /* ---------- specs ---------- */ .specs{width:100%;border-collapse:collapse;font-size:16px} .specs th,.specs td{text-align:left;padding:15px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top} .specs th{width:34%;font-weight:500;color:var(--dim);padding-right:20px} .specs td{color:var(--txt-hi)} .specs td .muted{display:block;font-size:14.5px;margin-top:2px} @media (max-width:560px){.specs th,.specs td{display:block;width:auto;padding:0}.specs th{padding-top:14px}.specs td{padding:4px 0 14px}} /* ---------- pricing ---------- */ .price-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center} @media (max-width:900px){.price-wrap{grid-template-columns:1fr}} .price-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--rule);border-radius:14px;padding:clamp(24px,4vw,36px);position:relative;overflow:hidden} .price-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--steel),var(--amber))} .price-card .pname{display:flex;align-items:baseline;gap:10px} .price-card .pname .mfr{font:500 10.5px/1 var(--sans);letter-spacing:.3em;color:var(--faint)} .price-card .pname .word{font:600 24px/1 var(--sans);letter-spacing:.1em;color:var(--txt-hi)} .price{font:500 60px/1 var(--cond);color:var(--txt-hi);margin-top:22px;display:inline-block} .price small{font-size:18px;color:var(--dim);margin-left:6px} .price-card .beta-note{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 11px;border-radius:999px; border:1px solid rgba(231,162,74,.4);background:rgba(231,162,74,.08);color:var(--amber);font:500 12.5px/1.2 var(--cond);letter-spacing:.04em} .price-card .beta-note b{color:var(--txt-hi);font-weight:600} .price-card .list{margin-top:26px} .price-card .actions{display:flex;flex-direction:column;gap:10px;margin-top:30px} .price-card .fine{font-size:13.5px;color:var(--faint);margin-top:16px;text-align:center} /* ---------- FAQ ---------- */ .faq{max-width:860px} .faq details{border-bottom:1px solid var(--rule-soft)} .faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:600 18px/1.35 var(--sans);color:var(--txt-hi);position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:translateY(-70%) rotate(45deg);transition:transform .2s} .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq details>div{padding:0 0 22px;color:var(--dim);max-width:44em} /* ---------- footer ---------- */ .site-foot{background:var(--edge);border-top:1px solid var(--rule-soft);padding-block:48px 40px;font-size:14.5px;color:var(--dim)} .foot-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px} .foot-grid h4{font:500 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 14px} .foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .foot-grid a{color:var(--dim);text-decoration:none} .foot-grid a:hover{color:var(--txt-hi)} .foot-legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule-soft);font-size:13px;color:var(--faint);display:grid;gap:6px} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1 / -1}} /* ---------- inner pages ---------- */ .page-head{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,44px);background:var(--edge);border-bottom:1px solid var(--rule-soft)} .page-head h1{font-size:clamp(34px,5vw,56px);margin-top:14px} .page-head p{margin-top:16px} .page-head .wrap,.wrap.prose{max-width:840px} .prose{padding-block:clamp(40px,6vw,72px)} .prose h2{font-size:clamp(24px,2.6vw,30px);margin:48px 0 12px} .prose h2:first-child{margin-top:0} .prose h3{font-size:19px;margin:28px 0 8px} .prose p,.prose ul,.prose ol{color:var(--txt)} .prose ul,.prose ol{padding-left:1.2em;margin:12px 0} .prose li{margin:6px 0} .prose code{font:500 .9em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel-2);border:1px solid var(--rule-soft);padding:2px 5px;border-radius:4px;color:var(--txt-hi)} .toc{background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px;padding:20px 24px;margin-bottom:40px} .toc ol{margin:8px 0 0} .log-entry{border-left:2px solid var(--rule);padding-left:22px;margin-top:36px} .log-entry .ver{font:500 26px/1 var(--cond);color:var(--txt-hi)} .log-entry .date{font:400 14px/1 var(--cond);color:var(--faint);margin-left:10px} /* ---------- laat het me weten bij een release ---------- */ .notify{background:var(--panel);border:1px solid var(--rule-soft);border-radius:12px; padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(18px,3vw,40px);align-items:center} .notify h2{font-size:clamp(22px,2.6vw,30px)} .notify p{margin-top:10px;color:var(--dim);font-size:16px} .notify form{display:flex;gap:10px;flex-wrap:wrap} .notify input[type=email]{flex:1 1 220px;background:var(--panel-2);border:1px solid var(--rule);color:var(--txt-hi); border-radius:7px;padding:13px 14px;font:400 16px/1 var(--sans)} .notify input[type=email]:focus-visible{outline:2px solid var(--amber);outline-offset:1px} .notify .fine{font:400 13px/1.5 var(--sans);color:var(--faint);margin-top:12px} @media (max-width:820px){.notify{grid-template-columns:1fr}}