/* ===== ADUPlanet — Light-Only, AA Contrast (2025-09-05) ===== */ /* ---------- Shell & layout ---------- */ *, *::before, *::after{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:Arial, sans-serif} /* Content wrapper */ .wrap{max-width:1120px;margin:0 auto;padding:0 20px} /* ---------- Theme tokens (LIGHT ONLY) ---------- */ :root{ --bg:#ffffff; --surface:#ffffff; --ink:#0b0f19; /* body text (≈15:1 on white) */ --ink-2:#0b0f19; /* headings */ --muted:#1f2937; /* secondary (≈8.6:1 on white) */ --link:#1e40af; /* blue-800 — AA on white */ --link-visited:#6b21a8; /* purple-800 */ --focus-ring:#1e40af; --line:#cbd5e1; /* slate-300 */ --line-2:#94a3b8; /* slate-400 */ --card:#ffffff; /* card background (light) */ } /* ---------- Global base ---------- */ html,body{background:var(--bg);color:var(--ink)} h1,h2,h3,h4{color:var(--ink-2);font-weight:700;margin:0 0 .5em} p,li,dd,dt,summary,.sub,.fresh,figcaption{color:var(--ink)} .sub,.fresh,figcaption{color:var(--muted)} a{color:var(--link);text-underline-offset:2px} a:hover{text-decoration:underline} a:visited{color:var(--link-visited)} :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px} small,.fresh,figcaption{font-size:clamp(14px,0.9rem,16px)} img,svg,video{max-width:100%;height:auto;display:block} /* ---------- Header / Nav (light, sticky) ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); color:var(--ink-2); } .nav{display:flex;align-items:center;gap:20px;padding:16px 0} .nav img{height:32px;width:auto} .nav a{padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none} .nav a:hover{text-decoration:underline} .nav a[aria-current="page"]{background:#f8fafc;outline:1px solid var(--line)} /* ---------- Cards / Pills / Buttons ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px rgba(0,0,0,.04); } .pill{ display:inline-flex;align-items:center;gap:6px; padding:6px 10px;border-radius:999px; background:#fff;border:1px solid var(--line-2);color:var(--ink) } .btn{ display:inline-block;padding:10px 14px;border-radius:12px; font-weight:600;border:1px solid var(--line-2);background:#fff;color:var(--ink-2) } .btn.primary{background:#1e40af;border-color:#1e40af;color:#fff} /* AA on blue-800 */ .btn:disabled{opacity:.9} /* avoid ghosted gray */ /* ---------- Forms ---------- */ input,select,textarea{ color:var(--ink);background:#fff;border:1px solid var(--line-2); border-radius:10px;padding:.6em .75em } ::placeholder{color:#334155;opacity:1} /* ---------- Footer (light) ---------- */ footer{ border-top:1px solid var(--line); padding:28px 0 40px; background:var(--surface); color:var(--muted) } .footer-links{display:flex;gap:14px;flex-wrap:wrap} /* ---------- Helpers ---------- */ /* Use on any text block that sits on a busy photo while keeping page light */ .on-image-card{ background:#ffffffcc; /* translucent white */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border:1px solid var(--line); color:var(--ink); } /* Print niceties */ @media print{ .btn,.pill{border-color:#aaa} .card{box-shadow:none} } /* Increased contrast for users who ask for it */ @media (prefers-contrast: more){ :root{ --link:#1e3a8a; --link-visited:#581c87; --line:#94a3b8; --line-2:#64748b; } .card,.pill,.btn{border-width:2px} } /* ---------- FORCE LIGHT OVERRIDE (wins over most inline) ---------- */ /* Add class="force-light" on to enforce light/AA even when inline styles exist */ body.force-light, html.force-light{ background:#fff !important; color:#0b0f19 !important; } body.force-light *, body.force-light :is(h1,h2,h3,h4,strong){ color:#0b0f19 !important; } body.force-light a{ color:#1e40af !important; text-underline-offset:2px; } body.force-light a:visited{ color:#6b21a8 !important; } /* Neutralize dark inline backgrounds (keeps images intact) */ body.force-light [style*="background-color"]{ background-color:#fff !important; } body.force-light [style*="background:#"]{ background-color:#fff !important; background-image:none !important; } body.force-light [style*="background: rgb"]{ background-color:#fff !important; background-image:none !important; } body.force-light [style*="background:rgba"]{ background-color:#fff !important; background-image:none !important; } /* Keep core components readable after overrides */ body.force-light .btn{ background:#fff !important; color:#0b0f19 !important; border:1px solid #94a3b8 !important; } body.force-light .btn.primary{ background:#1e40af !important; border-color:#1e40af !important; color:#fff !important; } body.force-light .card{ background:#fff !important; border:1px solid #cbd5e1 !important; } body.force-light input, body.force-light select, body.force-light textarea{ color:#0b0f19 !important; background:#fff !important; border:1px solid #94a3b8 !important; } body.force-light :focus-visible{ outline:3px solid #1e40af !important; outline-offset:2px; } .updates{margin:24px 0;padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc} .updates h2{margin:0 0 8px} .updates ul{margin:0;padding-left:18px} /* === State Card Consistency & Contrast ================================== */ :root{ --ink:#0b1221; --muted:#4b5563; --edge:#e5e7eb; --brand:#2563eb; --bg:#fff; --chip:#f4f7ff; /* lighter for contrast */ --chip-border:#c7d2fe; /* soft indigo border */ --min:#2563eb; /* "min" bar color (blue) */ --max:#16a34a; /* "max" bar color (green) */ --shadow:0 8px 30px rgba(2,8,20,.06); } .state{ border:1px solid var(--edge); border-radius:16px; background:#fff; box-shadow:var(--shadow); padding:16px; margin:18px 0; } .state h2{ display:flex; align-items:center; gap:10px; font-size:1.25rem; margin:0 0 .4rem; } /* HIGH-CONTRAST BADGE (fixes dark-on-dark) Targets both legacy .badge and new .state-badge */ .state h2 .badge, .state h2 .state-badge{ font-size:.78rem; line-height:1; white-space:nowrap; background:var(--chip); color:#0b3bb8; border:1px solid var(--chip-border); padding:4px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:600; text-transform:none; background-image:none; box-shadow:none; mix-blend-mode:normal; } /* Notes, grids, rule cards */ .state .note{ background:#f9fafb; border:1px solid var(--edge); border-radius:12px; padding:10px 12px; margin:.6rem 0; color:var(--ink); } .state .kv{ display:grid; gap:12px; margin:.6rem 0; grid-template-columns:repeat(3,1fr); } .state .kv>div{ border:1px solid var(--edge); border-radius:12px; background:#fff; padding:10px 12px; } .state .rule-card{ border:1px dashed var(--edge); border-radius:12px; background:#fcfcfd; padding:12px; margin:.6rem 0; } /* Buttons */ .btn{ display:inline-block; background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:12px; text-decoration:none; box-shadow:var(--shadow); font-weight:600; border:1px solid transparent; } .btn.ghost{ background:#fff; color:var(--ink); border-color:var(--edge); } .state .actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; } /* Mini charts with clear min/max colors */ .state .mini-chart, .state .mini-viz{ display:block; margin-top:10px; } .state .mini-chart rect.bg, .state .mini-viz rect.bg{ fill:#eef2ff; } .state .mini-chart rect.min, .state .mini-viz rect.min{ fill:var(--min); } .state .mini-chart rect.max, .state .mini-viz rect.max{ fill:var(--max); } .state .mini-chart text, .state .mini-viz text{ fill:var(--ink); } /* Responsive */ @media (max-width:1000px){ .state .kv{ grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .state .kv{ grid-template-columns:1fr;} } /* Optional: dark-mode safeguard */ @media (prefers-color-scheme: dark) { .state h2 .badge, .state h2 .state-badge{ background:#e6efff; color:#2037a3; border-color:#b8c7ff; } }