/* ============================================================ SeRuM — srm.vc Palette: pure paper white, near-black ink, and one hot signal orange. The orange is a SIGNAL, not a wash — it appears only on the primary action, links, the active nav state, the mark, and the graduation rail. Everything else is black on white. Structure is carried by hairlines and by the rail (.rail), which echoes the dose graduations on the needle in the logo. ============================================================ */ /* Dark is the default surface. Light is an explicit opt-in via [data-theme="light"] on , toggled by the sun/moon control in the top bar. Component CSS below never branches on theme — it only ever reads these custom properties, so the whole site re-themes by swapping ~12 values. */ :root{ --paper:#0A0A0A; --paper-2:#151515; --ink:#F2F2F0; --ink-2:#A3A3A0; --ink-3:#727270; --rule:#262624; --rule-2:#38403A; /* the signal — brightened slightly for legibility on dark */ --serum:#FF4A00; --serum-deep:#FF6B33; --vial:rgba(255,74,0,.15); /* inverted surfaces: always the darkest anchor, in either theme */ --night:#000000; --night-2:#161616; --on-night:#F2F2F0; --on-night-2:#8A8A87; --max:1180px; --gut:32px; --f-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; --f-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --nav-h:66px; color-scheme:dark; --topbar-bg:rgba(10,10,10,.86); } [data-theme="light"]{ --paper:#FFFFFF; --paper-2:#F7F7F5; --ink:#0A0A0A; --ink-2:#57575A; --ink-3:#8A8A8E; --rule:#E6E6E4; --rule-2:#D2D2CF; --serum:#FF4A00; --serum-deep:#D63B00; --vial:#FFF1EA; color-scheme:light; --topbar-bg:rgba(255,255,255,.88); } body{background:var(--paper);transition:background-color .15s ease} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--f-body);font-size:17px;line-height:1.65; font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--serum);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--serum);outline-offset:3px;border-radius:2px} /* ---------- type scale ---------- */ h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.14;margin:0 0 .5em;text-wrap:balance} h1{font-size:clamp(32px,4.4vw,58px);font-weight:600;letter-spacing:-.028em;line-height:1.06} h2{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.022em} h3{font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.014em} h4{font-size:17px;letter-spacing:-.01em} p{margin:0 0 1.15em} .lede{font-size:clamp(18px,1.9vw,21.5px);line-height:1.55;color:var(--ink-2);max-width:66ch} .muted{color:var(--ink-2)} .small{font-size:14.5px;line-height:1.6} strong,b{font-weight:600;color:var(--ink)} /* eyebrow — mono, letterspaced, tick-prefixed. Structural: marks the start of a numbered movement of the page. */ .eyebrow{ font-family:var(--f-mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); display:flex;align-items:center;gap:10px;margin:0 0 18px; } .eyebrow{color:var(--ink-2)} .eyebrow::before{ content:"";width:26px;height:7px;flex:none;background:var(--serum); -webkit-mask:repeating-linear-gradient(90deg,#000 0 1.5px,transparent 1.5px 6.5px); mask:repeating-linear-gradient(90deg,#000 0 1.5px,transparent 1.5px 6.5px); } /* ---------- layout ---------- */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .section{padding:88px 0;border-top:1px solid var(--rule)} .section--flush{border-top:0} .section--tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .grid{display:grid;gap:28px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:start} .prose{max-width:74ch} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.5em} .prose ul,.prose ol{padding-left:1.15em;margin:0 0 1.15em} .prose li{margin-bottom:.5em} .prose li::marker{color:var(--serum)} /* ---------- graduation rail (signature) ---------- A hairline with dose ticks, like the barrel of a syringe. Used down the left of stepped content so position in the sequence is readable at a glance. */ .rail{position:relative;padding-left:52px} /* the barrel wall */ .rail::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:1px;background:var(--ink)} /* the graduations running the full length of it */ .rail::after{ content:"";position:absolute;left:5px;top:6px;bottom:6px;width:7px; background:repeating-linear-gradient(180deg,var(--rule-2) 0 1px,transparent 1px 9px); } .rail-step{position:relative;padding-bottom:38px} .rail-step:last-child{padding-bottom:0} /* a major graduation — longer, black, and it marks a real step */ .rail-step::before{ content:"";position:absolute;left:-39px;top:12px;width:26px;height:1.5px;background:var(--ink);z-index:1; } .rail-step::after{ content:"";position:absolute;left:-43px;top:8px;width:9px;height:9px; background:var(--serum);border-radius:50%;z-index:2; } .rail-step .n{ font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--serum); text-transform:uppercase;display:block;margin-bottom:7px; } /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule); } .nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);display:flex;align-items:center;gap:26px} .brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none} .brand:hover{text-decoration:none} .brand svg{width:26px;height:26px;flex:none} .brand-w{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.035em} .brand svg{color:var(--serum)} .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto} .nav-grp{position:relative} .nav-top{ display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer; font-family:var(--f-body);font-size:14.5px;font-weight:500;color:var(--ink-2); padding:8px 11px;border-radius:2px;text-decoration:none;white-space:nowrap; } .nav-top svg{width:9px;height:6px;opacity:.55;transition:transform .18s ease} .nav-top:hover{color:var(--ink);background:var(--paper-2);text-decoration:none} .nav-top.on{color:var(--ink)} .nav-top.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--serum)} a.nav-top{position:relative} .nav-grp:hover .nav-top svg,.nav-grp:focus-within .nav-top svg{transform:rotate(180deg)} .nav-menu{ position:absolute;top:calc(100% + 6px);left:0;min-width:262px;background:var(--paper); border:1px solid var(--ink);border-radius:2px;padding:7px;display:none;flex-direction:column; box-shadow:5px 5px 0 var(--serum);z-index:90; } .nav-grp:hover .nav-menu,.nav-grp:focus-within .nav-menu{display:flex} .nav-menu a{ font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 11px;border-radius:6px; text-decoration:none;white-space:nowrap; } .nav-menu a:hover{background:var(--vial);color:var(--ink);text-decoration:none} .nav-menu a.on{color:var(--serum)} .nav-burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule-2);border-radius:6px;padding:7px 9px;cursor:pointer} .nav-burger span{display:block;width:16px;height:1.5px;background:var(--ink);margin:3px 0} @media(max-width:1180px){ .nav-burger{display:block} .nav-links{ display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--paper); border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0; padding:10px var(--gut) 20px;max-height:calc(100vh - var(--nav-h));overflow-y:auto; } .nav-links.open{display:flex} .nav-grp{border-bottom:1px solid var(--rule)} .nav-top{width:100%;justify-content:space-between;padding:13px 0;font-size:15px} .nav-top.on::after{display:none} .nav-menu{ position:static;display:none;border:0;box-shadow:none;padding:0 0 12px 12px; min-width:0;background:transparent; } /* :hover would otherwise out-specify .open and force the accordion shut on tap */ .nav-grp:hover .nav-menu:not(.open),.nav-grp:focus-within .nav-menu:not(.open){display:none} .nav-menu.open{display:flex} .nav-top[aria-expanded="true"] svg{transform:rotate(180deg)} .nav-links > a.nav-top{border-bottom:1px solid var(--rule)} .nav-links .btn{margin-top:16px;text-align:center;justify-content:center} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--f-body);font-size:14.5px;font-weight:600;letter-spacing:-.005em; padding:13px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer; text-decoration:none;transition:background .16s ease,border-color .16s ease,color .16s ease; } .btn:hover{text-decoration:none} .btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn-primary:hover{background:var(--serum);border-color:var(--serum);color:#fff} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)} .btn-sm{padding:8px 15px;font-size:13.5px} .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} /* ---------- hero ---------- */ .hero{padding:104px 0 92px;position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center} .hero h1{margin-bottom:24px;max-width:15ch} .hero .lede{max-width:56ch} .hero-meta{ display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule); font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); } @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px} .hero h1{max-width:none} .hero-art{order:1} .hero-art svg{max-width:250px} } /* the instrument: needle drawn at scale with dose graduations */ .hero-art{display:flex;justify-content:center;align-items:center} .hero-art svg{width:100%;max-width:330px;height:auto;overflow:visible} @media(max-width:620px){ /* labels extend past the viewBox — drop them rather than let them clip */ .hero-art svg text{display:none} .hero-art svg{max-width:190px;overflow:hidden} } @keyframes doseFill{from{transform:scaleY(0)}to{transform:scaleY(1)}} .dose-fill{transform-box:fill-box;transform-origin:50% 100%;animation:doseFill 1.5s cubic-bezier(.22,.7,.3,1) .25s both} @media (prefers-reduced-motion:reduce){.dose-fill{animation:none}} /* ---------- cards ---------- */ .card{ border:1px solid var(--rule);border-radius:2px;padding:28px 26px;background:var(--paper); transition:border-color .18s ease,box-shadow .18s ease;position:relative; } .card:hover{border-color:var(--rule-2)} .card h3{margin-bottom:9px} .card p:last-child{margin-bottom:0} .card-k{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);display:block;margin-bottom:12px; } a.card{color:inherit;display:block} a.card:hover{text-decoration:none;border-color:var(--ink);box-shadow:4px 4px 0 var(--serum)} a.card h3{color:var(--ink)} .card-go{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--serum);margin-top:14px;display:block} /* answer block — the first thing an answer engine should lift */ .answer{ border-left:3px solid var(--serum);background:var(--vial); padding:22px 26px;border-radius:0;margin:0 0 32px; } .answer p:last-child{margin-bottom:0} .answer p{font-size:17.5px;line-height:1.6} .callout{border:1px solid var(--ink);border-left:3px solid var(--ink);border-radius:2px;padding:22px 24px;background:var(--paper);margin:26px 0} .callout p:last-child{margin-bottom:0} /* ---------- table ---------- */ .tbl-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--rule);border-radius:2px} table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top} thead th{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);font-weight:500;background:var(--paper-2); } tbody tr:last-child td{border-bottom:0} td:first-child{font-weight:600} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--rule);margin-top:26px} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--f-display);font-weight:600;font-size:17.5px;letter-spacing:-.014em;line-height:1.4; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:27px;width:9px;height:9px; border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg);transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(225deg);top:31px} .faq summary:hover{color:var(--serum)} .faq .a{padding:0 44px 22px 0;color:var(--ink-2);max-width:78ch} .faq .a p:last-child{margin-bottom:0} .faq-cat{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--serum);margin:44px 0 0} /* ---------- contact form ---------- */ .form-card{border:1px solid var(--ink);border-radius:2px;padding:32px;background:var(--paper)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.f-row{grid-template-columns:1fr}} .f-field{margin-bottom:16px} .f-field label{ display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-2);margin-bottom:7px; } .f-field .req{color:var(--serum)} .f-field input,.f-field select,.f-field textarea{ width:100%;font-family:var(--f-body);font-size:15.5px;color:var(--ink);background:var(--paper); border:1px solid var(--rule-2);border-radius:7px;padding:11px 13px;transition:border-color .15s ease; } .f-field textarea{min-height:104px;resize:vertical} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--serum);outline:none} .f-field input.err,.f-field select.err,.f-field textarea.err{border-color:#C8362B} .f-err{display:none;color:#C8362B;font-size:13px;margin-top:6px} .f-err.show{display:block} .f-note{font-size:12.5px;color:var(--ink-3);margin-top:14px} .f-ok{ display:none;border:1px solid var(--serum);background:var(--vial);border-radius:2px;padding:26px; } .f-ok.show{display:block} .f-ok h3{margin-bottom:8px} .spin{ display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4); border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite; } @keyframes sp{to{transform:rotate(360deg)}} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--ink);padding:76px 0 48px;background:var(--night);color:var(--on-night)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px} @media(max-width:1080px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} .foot h4{ font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--serum);margin-bottom:16px; } .foot ul{list-style:none;padding:0;margin:0} .foot li{margin-bottom:9px} .foot a{color:var(--on-night-2);font-size:14.5px} .foot a:hover{color:#fff} .foot-legal{ margin-top:52px;padding-top:26px;border-top:1px solid var(--night-2); font-size:12.5px;line-height:1.7;color:var(--on-night-2);max-width:88ch; } .foot .brand{color:var(--on-night)} .foot .muted{color:var(--on-night-2)} .foot .brand svg{color:var(--serum)} /* ---------- chat ---------- */ .chat-fab{ position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%; background:var(--serum);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 22px rgba(255,74,0,.34);transition:transform .18s ease,background .18s ease; } .chat-fab:hover{transform:translateY(-2px);background:var(--serum-deep)} .chat-fab svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8} .chat-panel{ position:fixed;right:22px;bottom:22px;z-index:95;width:394px;max-width:calc(100vw - 32px); height:588px;max-height:calc(100vh - 44px);background:var(--paper);border:1px solid var(--rule-2); border-radius:14px;display:none;flex-direction:column;overflow:hidden; box-shadow:0 20px 60px rgba(11,11,12,.16); } .chat-panel.open{display:flex} .chat-head{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--rule);flex:none} .chat-head svg.mark{width:22px;height:22px;flex:none} .chat-head .t{font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.014em} .chat-head .s{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .chat-x{margin-left:auto;background:none;border:none;cursor:pointer;font-size:21px;line-height:1;color:var(--ink-3);padding:3px 6px} .chat-x:hover{color:var(--ink)} .chat-msgs{flex:1;overflow-y:auto;padding:18px 17px;display:flex;flex-direction:column;gap:15px} .msg{display:flex;gap:9px;max-width:100%} .msg .ic{ width:25px;height:25px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; font-family:var(--f-mono);font-size:9px;letter-spacing:.04em; } .msg.bot .ic{background:var(--vial);color:var(--serum)} .msg.bot .ic svg{width:14px;height:14px} .msg.user .ic{background:var(--ink);color:var(--paper)} .msg .bub{font-size:14.5px;line-height:1.58;color:var(--ink);min-width:0;word-wrap:break-word} .msg.user{flex-direction:row-reverse} .msg.user .bub{background:var(--ink);color:var(--paper);padding:9px 13px;border-radius:12px 12px 3px 12px} .msg .bub b{font-weight:600} .msg .bub a{color:var(--serum);font-weight:500;text-decoration:underline} .chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 17px 14px} .chip{ font-family:var(--f-body);font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--paper); border:1px solid var(--rule-2);border-radius:14px;padding:6px 12px;cursor:pointer;transition:.15s; } .chip:hover{border-color:var(--serum);color:var(--serum)} .chat-in{display:flex;gap:9px;padding:13px 15px;border-top:1px solid var(--rule);flex:none;align-items:flex-end} .chat-in textarea{ flex:1;font-family:var(--f-body);font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--paper); border:1px solid var(--rule-2);border-radius:9px;padding:9px 12px;resize:none;max-height:92px;min-height:38px; } .chat-in textarea:focus{border-color:var(--serum);outline:none} .chat-send{ background:var(--serum);border:none;border-radius:9px;width:38px;height:38px;flex:none;cursor:pointer; display:flex;align-items:center;justify-content:center; } .chat-send:hover{background:var(--serum-deep)} .chat-send svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2} .typing{display:flex;gap:4px;align-items:center;padding:6px 0} .typing span{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:bl 1.3s infinite} .typing span:nth-child(2){animation-delay:.18s} .typing span:nth-child(3){animation-delay:.36s} @keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}} @media(max-width:520px){ .chat-panel{right:10px;left:10px;bottom:10px;width:auto;height:calc(100vh - 92px)} .chat-fab{right:16px;bottom:16px} } /* ---------- misc ---------- */ .crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px} .crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--serum)} .page-head{padding:72px 0 4px} .page-head + .section{padding-top:44px} .page-head .lede{max-width:62ch} .disclosure{font-size:12.5px;line-height:1.7;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:22px;margin-top:52px;max-width:88ch} .kv{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px} .kv:last-child{border-bottom:0} .kv dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:104px;flex:none;padding-top:3px} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere} @media(max-width:520px){ /* the fixed-width term column leaves too little room for the value */ .kv{flex-direction:column;gap:5px} .kv dt{width:auto;padding-top:0} } .tag{ display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--serum);background:var(--vial);padding:4px 9px;border-radius:4px; } @media(max-width:820px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr;gap:38px} .section{padding:64px 0} .hero{padding:64px 0 56px} } @media(max-width:560px){ :root{--gut:20px} .g2,.g3,.g4{grid-template-columns:1fr} body{font-size:16px} } /* ---------- link grid (hub pages) ---------- */ .lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px; border:1px solid var(--rule);border-radius:2px;overflow:hidden;background:var(--rule)} .lgrid a{background:var(--paper);padding:17px 19px;text-decoration:none;color:var(--ink); display:block;transition:background .15s ease} .lgrid a:hover{background:var(--vial);text-decoration:none} .lgrid .t{font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.012em;display:block} .lgrid .d{font-size:13px;color:var(--ink-2);line-height:1.5;display:block;margin-top:3px} /* ---------- glossary ---------- */ .gloss{border-top:1px solid var(--rule)} .gloss dt{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.014em; margin-top:26px;scroll-margin-top:88px} .gloss dd{margin:7px 0 0;color:var(--ink-2);max-width:78ch} .gloss-nav{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 8px} .gloss-nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--rule-2);border-radius:6px;padding:5px 10px;color:var(--ink-2);text-decoration:none} .gloss-nav a:hover{border-color:var(--serum);color:var(--serum);text-decoration:none} /* ---------- key-numbers strip ---------- */ .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;background:var(--rule); border:1px solid var(--ink);border-radius:2px;overflow:hidden;margin:30px 0} .nums div{background:var(--paper);padding:20px 18px} .nums .n{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.036em;color:var(--ink);display:block} .nums div{border-top:3px solid var(--serum)} .nums .l{font-size:13px;color:var(--ink-2);line-height:1.45;display:block;margin-top:5px} /* ============================================================ RAIL NAV — replaces the old top mega-menu. A slim icon rail, minimized by default (Supabase-style): hovering or focusing an icon flies a panel out to its right. It never pushes page content — the flyout is a floating overlay, not a layout shift. ============================================================ */ :root{ --sidenav-w:64px; --topbar-h:60px; } body{padding-left:0} @media(min-width:961px){ body{padding-left:var(--sidenav-w)} } .sidenav{ position:fixed;top:0;left:0;bottom:0;width:var(--sidenav-w);z-index:110; background:#0D0D0D;display:flex;flex-direction:column;align-items:center; padding:16px 0;border-right:1px solid #232323; } @media(max-width:960px){ .sidenav{display:none} } .sidenav-brand{ display:flex;align-items:center;justify-content:center;width:38px;height:38px; margin-bottom:18px;color:var(--serum);flex:none; } .sidenav-brand svg{width:23px;height:23px} .sidenav-icons{display:flex;flex-direction:column;gap:2px;flex:1;width:100%;align-items:center} .sidenav-item{position:relative;width:100%;display:flex;justify-content:center} .sidenav-btn{ width:40px;height:40px;border-radius:8px;border:0;background:transparent;color:#8a8a87; display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s ease,color .12s ease; } .sidenav-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .sidenav-btn:hover,.sidenav-btn:focus-visible{background:#1c1c1c;color:#fff} .sidenav-item.open .sidenav-btn{background:#232323;color:#fff} .sidenav-item.current .sidenav-btn{color:var(--serum)} .sidenav-item.current .sidenav-btn::before{ content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:var(--serum);border-radius:2px; } .sidenav-cta{ width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center; background:var(--serum);color:#fff;margin-top:6px;flex:none;transition:background .14s ease; } .sidenav-cta:hover{background:#fff;color:var(--serum)} .sidenav-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------- flyout: styled as an extension of the dark rail itself (Supabase's project-nav pattern) — icon + label rows, grouped by a hairline divider, a soft rounded highlight for hover/current, no card chrome or drop shadow. It reads as part of the same surface, not a popover floating on top of the page. ---------- */ .flyout{ position:fixed;left:var(--sidenav-w);top:0;bottom:0;width:272px; background:#101010;border-right:1px solid #232323;z-index:109; padding:20px 10px;overflow-y:auto; opacity:0;visibility:hidden;transform:translateX(-8px); transition:opacity .13s ease,transform .13s ease,visibility 0s linear .13s; } .sidenav-item.open .flyout{opacity:1;visibility:visible;transform:translateX(0);transition-delay:0s} .flyout-title{ font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:#68706b;padding:4px 12px 12px;display:flex;align-items:center;gap:8px; } .flyout-title svg{width:15px;height:15px;stroke:var(--serum);fill:none;stroke-width:1.6} .flyout a{ display:flex;align-items:center;gap:10px;font-size:14px;color:#c2c2bf; padding:9px 12px;border-radius:7px;text-decoration:none;line-height:1.35; } .flyout a::before{ content:"";width:4px;height:4px;border-radius:50%;background:#4a4a47;flex:none;transition:background .12s ease; } .flyout a:hover{background:#1a1a1a;color:#fff;text-decoration:none} .flyout a:hover::before{background:#7a7a76} .flyout a.current{background:#1a1a1a;color:var(--serum);font-weight:600} .flyout a.current::before{background:var(--serum)} .flyout-divider{height:1px;background:#212121;margin:10px 12px} /* ---------- top bar: search + persistent CTA ---------- */ .topbar{ position:sticky;top:0;z-index:95;height:var(--topbar-h); background:var(--topbar-bg);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule);display:flex;align-items:center; } .topbar-in{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:16px} .topbar-brand{display:none;align-items:center;gap:9px;color:var(--ink);text-decoration:none;flex:none} .topbar-brand svg{width:24px;height:24px;color:var(--serum)} @media(max-width:960px){ .topbar-brand{display:flex} } .topbar-brand-w{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:-.03em} .sidenav-burger{ display:none;width:38px;height:38px;flex:none;align-items:center;justify-content:center; border:1px solid var(--rule-2);border-radius:2px;background:none;cursor:pointer; } @media(max-width:960px){ .sidenav-burger{display:flex} } .sidenav-burger span{display:block;width:16px;height:1.5px;background:var(--ink);margin:3px 0} .search-wrap{position:relative;flex:1;max-width:420px} .search-box{ display:flex;align-items:center;gap:9px;border:1px solid var(--rule-2);border-radius:2px; padding:9px 12px;background:var(--paper-2);transition:border-color .14s ease,background .14s ease; } .search-box:focus-within{border-color:var(--ink);background:var(--paper)} .search-box svg{width:16px;height:16px;color:var(--ink-3);flex:none} .search-box input{ border:0;background:none;outline:0;font-family:var(--f-body);font-size:14.5px;width:100%;color:var(--ink); } .search-box input::placeholder{color:var(--ink-3)} .search-kbd{ font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--rule-2); border-radius:4px;padding:1.5px 5px;flex:none; } @media(max-width:640px){ .search-kbd{display:none} } @media(max-width:520px){ /* five items no longer fit the mobile topbar at once — the drawer already offers "Get in touch", so drop the duplicate label and keep the icon-only affordances that don't have another home */ .topbar-cta{padding:0 12px;font-size:0} .topbar-cta::before{content:"→";font-size:16px} .search-box input::placeholder{color:transparent} } @media(max-width:430px){ .topbar-in{gap:8px;padding:0 14px} .search-wrap{min-width:0} } .search-results{ position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper);border:1px solid var(--ink); border-radius:2px;box-shadow:6px 6px 0 var(--serum);max-height:62vh;overflow-y:auto;z-index:120;display:none; } .search-results.open{display:block} .search-results a{display:block;padding:12px 14px;text-decoration:none;border-bottom:1px solid var(--rule)} .search-results a:last-child{border-bottom:0} .search-results a:hover,.search-results a.active{background:var(--vial)} .search-results .st{font-weight:600;color:var(--ink);font-size:14.5px;display:block} .search-results .sd{font-size:12.5px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.4} .search-results .sc{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--serum)} .search-empty{padding:18px 14px;font-size:13.5px;color:var(--ink-3)} .topbar-cta{margin-left:auto;flex:none} /* ---------- mobile rail drawer ---------- */ .sidenav-drawer{ position:fixed;inset:0;z-index:130;display:none; } .sidenav-drawer.open{display:block} .sidenav-drawer-scrim{position:absolute;inset:0;background:rgba(10,10,10,.5)} .sidenav-drawer-panel{ position:absolute;left:0;top:0;bottom:0;width:min(84vw,340px);background:var(--paper); overflow-y:auto;padding:18px 8px 100px;box-shadow:8px 0 30px rgba(0,0,0,.25); } .sidenav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 16px} .sidenav-drawer-x{width:34px;height:34px;border:1px solid var(--rule-2);border-radius:2px;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer} .sidenav-drawer-x svg{width:16px;height:16px} .sidenav-drawer-grp{border-bottom:1px solid var(--rule);padding:4px 6px} .sidenav-drawer-grp:last-child{border-bottom:0} .sidenav-drawer-top{ width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:13px 4px; font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left; } .sidenav-drawer-top svg:first-child{width:19px;height:19px;color:var(--serum);flex:none} .sidenav-drawer-top svg:last-child{width:11px;height:11px;margin-left:auto;flex:none;transition:transform .14s ease} .sidenav-drawer-top[aria-expanded="true"] svg:last-child{transform:rotate(180deg)} .sidenav-drawer-links{display:none;flex-direction:column;padding:0 4px 12px 33px} .sidenav-drawer-links.open{display:flex} .sidenav-drawer-links a{padding:9px 6px;font-size:14px;color:var(--ink-2);text-decoration:none;border-radius:2px} .sidenav-drawer-links a:hover{background:var(--vial);color:var(--ink)} .sidenav-drawer-cta{margin:16px 6px 0} /* ---------- CTA strip (inline, mid-article) ---------- */ .cta-strip{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; border:1px solid var(--ink);border-left:4px solid var(--serum);border-radius:2px; padding:18px 22px;margin:34px 0;background:var(--paper-2); } .cta-strip p{margin:0;font-size:15.5px;font-weight:500;color:var(--ink)} .cta-strip .btn{flex:none} /* CTA-section button gets the signal color — distinct from ordinary nav buttons */ .btn-cta{background:var(--serum);color:#fff;border-color:var(--serum)} .btn-cta:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* ---------- calculators ---------- */ .calc-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin:30px 0} @media(max-width:820px){ .calc-wrap{grid-template-columns:1fr} } .calc-panel{border:1px solid var(--ink);border-radius:2px;padding:26px;background:var(--paper)} .calc-panel h3{margin-bottom:18px} .calc-field{margin-bottom:18px} .calc-field:last-child{margin-bottom:0} .calc-field label{ display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:600; color:var(--ink);margin-bottom:7px; } .calc-field label .v{font-family:var(--f-mono);color:var(--serum);font-weight:600} .calc-field input[type=number],.calc-field select{ width:100%;border:1px solid var(--rule-2);border-radius:2px;padding:9px 11px;font-family:var(--f-body); font-size:15px;background:var(--paper);color:var(--ink); } .calc-field input[type=number]:focus,.calc-field select:focus{outline:0;border-color:var(--ink)} .calc-field input[type=range]{width:100%;accent-color:var(--serum)} .calc-results{background:var(--night);color:var(--on-night);border-radius:2px;padding:26px} .calc-results h3{color:#fff;margin-bottom:18px} .calc-out{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--night-2)} .calc-out:last-child{border-bottom:0} .calc-out .l{font-size:13.5px;color:var(--on-night-2)} .calc-out .n{font-family:var(--f-display);font-weight:700;font-size:19px;color:#fff} .calc-out .n.hi{color:var(--serum)} .calc-note{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:16px} .calc-cf-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px} .calc-cf-row input{margin:0;min-width:0;width:100%} .calc-cf-row input[type=date]{font-size:13px} @media(max-width:480px){ .calc-cf-row{grid-template-columns:1fr auto} .calc-cf-row input[type=date]{grid-column:1/-1} } .calc-add-row{background:none;border:1px dashed var(--rule-2);border-radius:2px;padding:8px;width:100%; font-size:13px;color:var(--ink-2);cursor:pointer;margin-top:4px} .calc-add-row:hover{border-color:var(--ink);color:var(--ink)} .calc-rm{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;padding:4px} .calc-rm:hover{color:var(--serum)} /* ---------- theme toggle ---------- */ .theme-toggle{ width:36px;height:36px;border:1px solid var(--rule-2);border-radius:8px;background:none; color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none; transition:border-color .12s ease,color .12s ease; } .theme-toggle:hover{border-color:var(--ink);color:var(--ink)} .theme-toggle svg{width:17px;height:17px} .theme-toggle .ti-sun{display:none} .theme-toggle .ti-moon{display:block} [data-theme="light"] .theme-toggle .ti-sun{display:block} [data-theme="light"] .theme-toggle .ti-moon{display:none}