/* /assets/app.css */ /* ========== Design Tokens ========== */ :root { --bg:#f7f9ff; --card:#ffffff; --text:#0f172a; --muted:#475569; --accent:#16a34a; --accent-2:#2563eb; --stroke:#d0d8ea; --wrap:980px; --radius:18px; --shadow:0 6px 22px rgba(15,23,42,.08); --focus:#94a3b8; /* focus ring color */ } /* Dark mode (auto) */ @media (prefers-color-scheme: dark) { :root { --bg:#0b0f14; --card:#111824; --text:#e9f1ff; --muted:#9eb0c9; --accent:#19c37d; --accent-2:#60a5fa; --stroke:#1f2b3a; --shadow:0 10px 30px rgba(0,0,0,.35); --focus:#60a5fa; } } /* Optional manual dark class on or */ .dark { --bg:#0b0f14; --card:#111824; --text:#e9f1ff; --muted:#9eb0c9; --accent:#19c37d; --accent-2:#60a5fa; --stroke:#1f2b3a; --shadow:0 10px 30px rgba(0,0,0,.35); --focus:#60a5fa; } /* ========== Base ========== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.12);margin:14px 0} img[decoding="async"]{content-visibility:auto} /* tiny LCP win */ .wrap{max-width:var(--wrap);margin:0 auto;padding:20px} @media (max-width:640px){ .wrap{padding:16px} } a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px} /* ========== Header / Nav ========== */ header.site-header{ background:var(--card); border-bottom:1px solid var(--stroke); position:sticky;top:0;z-index:50; box-shadow:0 6px 18px rgba(0,0,0,.04); } .nav{ max-width:var(--wrap);margin:0 auto; display:flex;align-items:center;justify-content:space-between; padding:10px 18px; gap:12px; } .brand img{height:44px;width:auto;box-shadow:none;margin:0;border-radius:0} .nav a{ color:var(--text);text-decoration:none;font-weight:700; padding:10px 12px;border-radius:10px;line-height:1; } .nav a:hover{background:color-mix(in srgb, var(--accent-2) 10%, transparent)} .nav a[aria-current="page"]{background:color-mix(in srgb, var(--accent) 16%, transparent)} @media (max-width:840px){ .nav{flex-wrap:wrap} } /* ========== Utilities / Components ========== */ .breadcrumbs{font-size:14px;color:var(--muted);margin:10px 0} .breadcrumbs a{color:var(--accent-2)} .breadcrumbs a:hover{text-decoration:underline} .card{ background:var(--card); padding:26px;border-radius:var(--radius); border:1px solid var(--stroke);box-shadow:var(--shadow); margin:18px 0; } h1{font-size:clamp(30px,4.5vw,44px);line-height:1.15;margin:0 0 8px;color:var(--accent)} h2{font-size:clamp(22px,3.3vw,28px);margin:18px 0 10px} h3{margin:16px 0 8px} p,li{font-size:18px;line-height:1.6;color:var(--muted);margin:8px 0} ul,ol{padding-left:20px;margin:8px 0} .badge{ display:inline-flex;gap:8px;align-items:center; background:color-mix(in srgb, var(--accent-2) 12%, var(--card)); border:1px solid color-mix(in srgb, var(--accent-2) 30%, var(--stroke)); border-radius:999px;padding:8px 12px;font-weight:800;margin-bottom:10px;color:var(--text) } .badge .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)} .cta{ display:inline-block;background:var(--accent);color:#fff;font-weight:900; padding:14px 18px;border-radius:14px;text-decoration:none;margin-top:12px; transition:filter .15s ease; } .cta.secondary{background:var(--accent-2)} .cta:hover{filter:brightness(1.06)} .cta:focus-visible{outline:3px solid var(--focus);outline-offset:2px} .note{ background:color-mix(in srgb, var(--accent-2) 8%, var(--card)); border:1px solid color-mix(in srgb, var(--accent-2) 25%, var(--stroke)); border-radius:14px;padding:12px 14px;margin:12px 0;font-size:15px;color:var(--muted) } .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:8px} .share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:20px 0} .share a{ display:inline-flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--stroke);padding:10px 14px;border-radius:12px; color:var(--text);text-decoration:none;font-weight:700; } .share a:hover{background:color-mix(in srgb, var(--accent-2) 10%, var(--card))} .footer{opacity:.95;color:#334155;font-size:14px;margin:24px 0 12px;text-align:center} @media (prefers-color-scheme: dark){ .footer{color:#9eb0c9} } .meta{font-size:14px;color:#64748b} @media (prefers-color-scheme: dark){ .meta{color:#9eb0c9} } /* Tables */ .table-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse} th,td{padding:10px 12px;border-bottom:1px solid var(--stroke);text-align:left;vertical-align:top} thead th{font-weight:800} tr:last-child td{border-bottom:0} /* States */ .good{color:var(--accent)} .bad{color:#dc2626} /* TOC */ .toc{ background:var(--card);border:1px solid var(--stroke);border-radius:12px; padding:12px 14px;margin:10px 0 18px;box-shadow:var(--shadow) } .toc h2{font-size:18px;margin:0 0 8px;color:var(--accent)} .toc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px} .toc a{ display:inline-block;padding:8px 10px;border:1px solid var(--stroke); border-radius:10px;text-decoration:none;color:var(--text) } .toc a:hover{text-decoration:underline} /* Accessibility helpers */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus:not(:focus-visible){outline:none} /* Motion reduction */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* Print basics */ @media print{ header.site-header,.share,.toc,.cta{display:none !important} body{background:#fff;color:#000} .card{box-shadow:none;border-color:#ccc} }