/* Site shell for dj.mcsteelie.com. Custom properties are --s- prefixed so the chrome can never collide with a tool's own :root palette; tools opt in by aliasing (see the key route finder). Theming: the inline boot script in each stamps data-theme on before first paint, resolving stored choice -> OS preference -> dark. So the attribute is always present in a JS browser and the selectors below are all we need; bare :root is the no-JS fallback and keeps the dark house style. type.css is ed alongside this file rather than @import-ed, so the two stylesheets download in parallel instead of serially. */ :root, :root[data-theme="dark"]{ --s-scheme:dark; /* read by tools that paint their own colours */ --s-ink:#0a121a; --s-panel:#101c27; --s-raise:#16242f; --s-line:#213542; --s-text:#dbe7ef; --s-dim:#7d94a4; --s-dimmer:#4f6675; --s-amber:#f2a63a; --s-cyan:#3fcfe0; --s-gap:#e0563f; --s-up:#e08a4a; --s-down:#5aa8d8; --s-btn-hi:#ffffff; /* .btn hover face */ --s-onaccent:#08111a; /* text sitting on a saturated fill */ --s-shadow:none; } :root[data-theme="light"]{ --s-scheme:light; --s-ink:#f4f7f9; --s-panel:#ffffff; --s-raise:#e9eff4; --s-line:#c2d0da; --s-text:#0d1a24; --s-dim:#546b7d; --s-dimmer:#6d8290; --s-amber:#a06305; --s-cyan:#0b7c8c; --s-gap:#c03921; --s-up:#a85f14; --s-down:#26689a; --s-btn-hi:#000000; --s-onaccent:#ffffff; --s-shadow:0 1px 2px rgba(13,26,36,.06),0 1px 8px rgba(13,26,36,.04); } *{box-sizing:border-box;margin:0;padding:0} html{background:var(--s-ink);color-scheme:dark light} :root[data-theme="light"]{color-scheme:light} body{ font-family:var(--f-ui); background:var(--s-ink); color:var(--s-text); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- header ---------- */ .site-head{border-bottom:1px solid var(--s-line);flex:0 0 auto;background:var(--s-ink)} .site-head .wrap{ display:flex;align-items:center;gap:20px; min-height:60px;flex-wrap:wrap; } .brand{ font-family:var(--f-display); font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--s-text);text-decoration:none;white-space:nowrap; } .brand span{color:var(--s-cyan)} .brand:hover{color:var(--s-btn-hi)} .site-head nav{margin-left:auto;display:flex;gap:18px;align-items:center} .site-head nav a{ color:var(--s-dim);text-decoration:none;font-size:14px;font-weight:500; } .site-head nav a:hover,.site-head nav a[aria-current=page]{color:var(--s-text)} /* ---------- theme toggle ---------- */ .theme-btn{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;padding:0;flex:0 0 auto; background:none;border:1px solid var(--s-line);border-radius:5px; color:var(--s-dim);cursor:pointer; transition:color .12s,border-color .12s,background .12s; } .theme-btn:hover{color:var(--s-text);border-color:var(--s-dimmer);background:var(--s-raise)} .theme-btn svg{width:16px;height:16px;display:block} /* one button, two glyphs: show the theme you'd switch TO, matching aria-label */ .theme-btn .i-moon{display:none} .theme-btn .i-sun{display:block} :root[data-theme="light"] .theme-btn .i-moon{display:block} :root[data-theme="light"] .theme-btn .i-sun{display:none} /* ---------- main ---------- */ main{flex:1 0 auto;padding:38px 0 56px} .lede h1{ font-family:var(--f-display); font-size:38px;font-weight:600; letter-spacing:-.005em;word-spacing:.08em;line-height:1.05;margin-bottom:10px; } .lede p{color:var(--s-dim);font-size:16px;max-width:62ch;margin-bottom:34px} /* ---------- tool cards ---------- */ .tools{ display:grid;gap:16px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); list-style:none; } .tool{ border:1px solid var(--s-line);border-radius:6px;background:var(--s-panel); box-shadow:var(--s-shadow); transition:border-color .12s,background .12s,transform .12s; } .tool:hover{border-color:var(--s-dimmer);background:var(--s-raise)} .tool a{ display:block;padding:20px;color:inherit;text-decoration:none;height:100%; } .tool h2{ font-family:var(--f-display); font-size:21px;font-weight:600; margin-bottom:7px;letter-spacing:0;word-spacing:.06em; } .tool:hover h2{color:var(--s-cyan)} .tool p{color:var(--s-dim);font-size:14px;line-height:1.45} .tool .meta{ font-family:var(--f-num); margin-top:14px;font-size:10px;color:var(--s-dimmer); text-transform:uppercase;letter-spacing:.06em;font-weight:500; } /* placeholder card for tools not built yet */ .tool.soon{background:none;border-style:dashed;box-shadow:none} .tool.soon:hover{background:none;border-color:var(--s-line)} .tool.soon .inner{padding:20px} .tool.soon h2{color:var(--s-dimmer)} .tool.soon p{color:var(--s-dimmer)} /* ---------- tool page chrome ---------- */ .crumb{ display:inline-flex;align-items:center;gap:7px; color:var(--s-dim);text-decoration:none;font-size:14px;font-weight:500; margin-bottom:20px; } .crumb:hover{color:var(--s-text)} .crumb::before{content:"\2190"} /* ---------- footer ---------- */ .site-foot{ border-top:1px solid var(--s-line);flex:0 0 auto; padding:20px 0;color:var(--s-dimmer);font-size:13px; } .site-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .site-foot a{color:var(--s-dimmer)} .site-foot a:hover{color:var(--s-dim)} a:focus-visible,button:focus-visible{outline:2px solid var(--s-cyan);outline-offset:2px} @media (max-width:640px){ .wrap{padding:0 16px} .lede h1{font-size:29px} main{padding:28px 0 44px} } /* ---------- prose (privacy, 404, anything read top to bottom) ---------- */ .prose{max-width:68ch} .prose h2{font-family:var(--f-display);font-size:21px;font-weight:600;letter-spacing:0; word-spacing:.06em;margin:32px 0 8px} .prose h2:first-of-type{margin-top:26px} .prose p{margin-bottom:13px;color:var(--s-text)} .prose p.muted,.prose li.muted{color:var(--s-dim)} .prose ul{margin:0 0 13px 18px} .prose li{margin-bottom:6px} .prose a{color:var(--s-cyan)} .prose .updated{font-family:var(--f-num);font-size:10px;text-transform:uppercase; letter-spacing:-.01em;color:var(--s-dimmer);font-weight:500;margin-bottom:4px} .prose dfn{font-style:normal;font-weight:600} /* ---------- ad slot ---------- Reserves its box before anything loads so a filling ad can't push the page around, and stays invisible until assets/ads.js is switched on. Sits below the content it sponsors, never over a tool. */ .ad-slot{ margin:40px auto 0;max-width:728px; min-height:104px; /* holds a 728x90 plus its label */ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; border-top:1px solid var(--s-line);padding-top:16px; } .ad-slot[hidden]{display:none} .ad-slot .ad-label{ font-family:var(--f-num);font-size:9px;text-transform:uppercase;letter-spacing:.04em; color:var(--s-dimmer);font-weight:500;align-self:flex-start; } .ad-slot ins{display:block;width:100%} @media (max-width:640px){ .ad-slot{min-height:280px} /* mobile units are taller than they are wide */ } /* ================= shared tool components ================= Used by every tool page except the key route finder, which predates this layer and carries its own self-contained styles. */ .toolpane h1{font-family:var(--f-display);font-size:30px;font-weight:600; letter-spacing:-.005em;word-spacing:.08em;margin-bottom:5px} .toolpane .sub{color:var(--s-dim);font-size:14.5px;margin-bottom:24px;max-width:66ch} /* loader */ .loader{border:1px dashed var(--s-line);border-radius:5px;padding:16px 18px;margin-bottom:24px; display:flex;gap:18px;align-items:center;flex-wrap:wrap;transition:border-color .12s,background .12s} .loader.hot{border-color:var(--s-cyan);border-style:solid;background:var(--s-panel)} .loader .grow{flex:1 1 260px;min-width:0} .loader p{font-size:13px;color:var(--s-dim);margin-top:3px} .loader code{font-family:var(--f-num);font-size:12px;color:var(--s-text);letter-spacing:-.03em} .status{font-size:14px;font-weight:600} .status.err{color:var(--s-gap)} input[type=file]{display:none} /* buttons */ .btn{font-family:var(--f-ui);font-size:14px;font-weight:600;background:var(--s-text); color:var(--s-ink);border:none;border-radius:4px;padding:10px 16px;cursor:pointer;flex:0 0 auto} .btn:hover{background:var(--s-btn-hi)} .btn:disabled{opacity:.45;cursor:default} .btn.ghost{background:none;color:var(--s-dim);border:1px solid var(--s-line)} .btn.ghost:hover{color:var(--s-text);border-color:var(--s-dimmer);background:none} .btn.sm{font-size:13px;padding:7px 12px} /* fields */ .controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end; padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--s-line)} .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:12px;color:var(--s-dim);font-weight:500} .field select,.field input{font-family:var(--f-ui);font-size:15px;font-weight:600; background:var(--s-raise);color:var(--s-text);border:1px solid var(--s-line); border-radius:4px;padding:8px 12px} .field input[type=number],.field input.num{font-family:var(--f-num);font-size:14px;letter-spacing:-.03em} .field select{cursor:pointer} .check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--s-dim);cursor:pointer;padding-bottom:9px} .check input{accent-color:var(--s-cyan);width:15px;height:15px;cursor:pointer} .spacer{flex:1 1 auto} select:focus-visible,input:focus-visible{outline:2px solid var(--s-cyan);outline-offset:1px} /* section headings inside a tool */ .toolpane h2{font-size:12px;font-weight:600;color:var(--s-dim);margin-bottom:12px; text-transform:none;letter-spacing:0} .block{margin-top:30px;border-top:1px solid var(--s-line);padding-top:22px} .block:first-of-type{border-top:none;padding-top:0;margin-top:0} /* key chip */ .kc{font-family:var(--f-num);font-size:11.5px;font-weight:600;letter-spacing:-.03em; border:1px solid var(--s-line);border-radius:4px;padding:4px 8px;background:var(--s-raise); display:inline-block;white-space:nowrap} .kc.none{color:var(--s-dimmer);border-style:dashed} /* data rows */ .rows{display:grid;gap:1px;background:var(--s-line);border:1px solid var(--s-line); border-radius:5px;overflow:hidden} .row{background:var(--s-panel);padding:9px 12px;display:flex;gap:14px;align-items:baseline; justify-content:space-between} .row .t{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .a{color:var(--s-dim);font-size:12.5px} .row .meta{font-family:var(--f-num);font-size:10.5px;color:var(--s-dim);letter-spacing:-.03em; white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums} .empty{color:var(--s-dim);font-size:14px;padding:4px 0} /* stat tiles */ .tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:6px} .tile{border:1px solid var(--s-line);border-radius:6px;background:var(--s-panel);padding:14px 16px} .tile .n{font-family:var(--f-num);font-size:22px;font-weight:600;letter-spacing:-.04em; font-variant-numeric:tabular-nums;line-height:1.1} .tile .l{font-size:12px;color:var(--s-dim);margin-top:4px} .tile.warn .n{color:var(--s-amber)} .tile.bad .n{color:var(--s-gap)} .tile.good .n{color:var(--s-cyan)}