/* Web Dev Toolkit — shared design system. */ :root{ --bg:#0b1020;--bg-soft:#111834;--surface:#151d3b;--surface-2:#1b2547; --border:#27325a;--border-soft:#1f2949; --text:#e6ebf7;--text-dim:#9aa7c7;--text-mute:#6b7899; --brand:#6366f1;--brand-hover:#4f46e5;--accent:#22d3ee;--accent-2:#818cf8; --radius:14px;--radius-sm:10px;--shadow:0 10px 30px rgba(0,0,0,.35); --maxw:960px;--header-h:58px; --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} .wdt-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(11,16,32,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)} .wdt-header-inner{max-width:var(--maxw);height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px} .wdt-logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--text);text-decoration:none;white-space:nowrap} .wdt-logo .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand),var(--accent));display:inline-block} .wdt-nav{display:flex;gap:2px;margin-left:8px;flex:1} .wdt-nav a{color:var(--text-dim);text-decoration:none;font-size:.86rem;padding:7px 10px;border-radius:8px;white-space:nowrap} .wdt-nav a:hover{color:var(--text);background:var(--surface)} .wdt-header .cta{margin-left:auto;background:linear-gradient(135deg,var(--brand),var(--accent-2));color:#fff;font-weight:700;font-size:.82rem;padding:8px 14px;border-radius:999px;text-decoration:none;white-space:nowrap} .wdt-header .cta:hover{filter:brightness(1.1)} @media(max-width:720px){.wdt-nav{display:none}} .wdt-crumbs{max-width:var(--maxw);margin:0 auto;padding:12px 16px 0;font-size:.8rem;color:var(--text-mute)} .wdt-crumbs a{color:var(--text-dim);text-decoration:none} .wdt-footer{border-top:1px solid var(--border-soft);margin-top:48px;background:var(--bg-soft)} .wdt-footer-inner{max-width:var(--maxw);margin:0 auto;padding:28px 16px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start} .wdt-footer h4{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute)} .wdt-footer a{display:block;color:var(--text-dim);text-decoration:none;font-size:.85rem;padding:3px 0} .wdt-footer a:hover{color:var(--accent-2)} .wdt-footer .copyright{width:100%;text-align:center;color:var(--text-mute);font-size:.78rem;padding-top:16px;border-top:1px solid var(--border-soft)} .wdt-cta-band{max-width:var(--maxw);margin:32px auto 0;padding:0 16px} .wdt-cta-band .inner{background:linear-gradient(135deg,rgba(99,102,241,.16),rgba(34,211,238,.10));border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between} .wdt-cta-band h3{margin:0 0 4px;color:var(--text);font-size:1.05rem} .wdt-cta-band p{margin:0;color:var(--text-dim);font-size:.86rem} .wdt-cta-band .btn{background:var(--brand);color:#fff;text-decoration:none;font-weight:700;padding:10px 18px;border-radius:var(--radius-sm);white-space:nowrap} .wdt-cta-band .btn:hover{background:var(--brand-hover)} /* --- Chrome-safe body reset --------------------------------------------------- Many tool pages set `body{display:flex;align-items:center;justify-content:center}` to center their own card. site.js mounts header/breadcrumbs/CTA/footer as direct children of , so on those pages every chrome block became a cramped flex column and the page content was shoved off to the side. When injected chrome is present we neutralise that: block layout, full-width chrome, page padding kept. Pages without site.js are untouched (the `:has()` guard never matches). */ body:has(> .wdt-header){display:block!important;align-items:initial!important;justify-content:initial!important;flex-direction:column!important} body:has(> .wdt-header) > .wdt-header, body:has(> .wdt-header) > .wdt-crumbs, body:has(> .wdt-header) > .wdt-cta-band, body:has(> .wdt-header) > .wdt-footer{width:100%;max-width:100%;flex:0 0 auto;align-self:stretch;margin-left:0;margin-right:0} /* Pages that centred their own wrapper via body flex need explicit centring now. */ body:has(> .wdt-header) > .wrap, body:has(> .wdt-header) > .container, body:has(> .wdt-header) > .card{margin-left:auto;margin-right:auto} /* Base look for pages that ship no body rule of their own (e.g. index.html). Kept as low-specificity defaults so per-page inline styles still win. */ html{background:var(--bg)} body{background:var(--bg);color:var(--text);font-family:var(--font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);min-height:100vh} /* Tool grid (scoped to the home grid; not !important so pages can override) */ .tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;align-items:stretch;margin:24px 0} .tools > .tool-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:18px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .tools > .tool-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow)} .tools > .tool-card h3{margin:0 0 6px;color:var(--text);font-size:1.02rem;line-height:1.3} .tools > .tool-card p{margin:0 0 14px;color:var(--text-dim);font-size:.86rem;line-height:1.5;flex:1 1 auto} .tools > .tool-card .btn{display:inline-block;padding:8px 14px;border-radius:9px;font-weight:600;text-decoration:none;font-size:.82rem;text-align:center} .tools > .tool-card .btn-free{background:var(--brand);color:#fff} .tools > .tool-card .btn-free:hover{background:var(--brand-hover)} .tools > .tool-card .btn-pro{background:transparent;color:var(--accent-2);border:1px solid var(--border);margin-top:6px} /* Content tables (benchmarks, comparisons) */ .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0;border:1px solid var(--border-soft);border-radius:var(--radius);background:var(--surface)} .tableWrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem} .tableWrap th,.tableWrap td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top} .tableWrap thead th{background:var(--bg-soft);color:var(--text);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .tableWrap tbody tr:last-child td{border-bottom:0} .tableWrap tbody tr:hover{background:var(--bg-soft)} .tableWrap td:first-child{white-space:nowrap;color:var(--text)} .tableWrap td{color:var(--text-dim)}