/* ATF Connect — shared UI kit (inner pages). Poppins · ATF blue · light default + day/night. */ :root { --ink:#0e2233; --muted:#5b6b76; --blue:#0e4d92; --blue2:#0a3a70; --bg:#f5f8fc; --card:#ffffff; --wash:#eef3fa; --line:#e3eaf3; --ok:#1a9e6c; --bad:#c94f4f; --radius:10px; /* C2 (review 2026-08-29) — the INK THAT SITS ON THE ACCENT, as a token. ~25 views paint a chip or a button with an inline `background:var(--blue)` and a literal `color:#fff`; the literal cannot follow the accent when the dark scope lifts --blue to a light tint, so every one of them read white-on-pale (~2:1). One token, flipped once per theme, moves them all. */ --on-blue:#ffffff; } [data-theme="dark"] { --bg:#16202f; --wash:#1d2937; --card:#202c3d; --ink:#e9eef6; --muted:#a6b6ca; --line:#33445c; /* C1 (theme audit): the dark scope re-tokened surfaces but NOT the accents, so every link, kicker and chip kept brand blue #0e4d92 on #16202f — 1.9:1, unreadable. These are the same lifted accents the design system uses (ds/atf-theme.css:68-73). */ --blue:#6aa5e2; --blue2:#85b8ea; --ok:#3fa76a; --bad:#d66560; /* the lifted accent is a LIGHT tint, so what sits on it must be dark ink, not white */ --on-blue:#0e2233; } /* C7 (theme audit): native selects, scrollbars and form controls stayed light-painted because the UA never learned the page is dark. */ :root[data-theme="dark"] { color-scheme: dark; } /* C2 (theme audit): the two places that put white text ON the accent. The lifted --blue above is a light tint, so white-on-it drops to ~2:1 — give each a dark twin instead of un-lifting the token that fixed every other use. */ [data-theme="dark"] .btn-primary { background:linear-gradient(135deg,#2f74c8,#0e4d92); } /* C2 follow-up (review 2026-08-29): the `.badge` half of that pair is GONE. It could never win — every blue chip carries its colour INLINE, which beats a stylesheet rule — and it repainted the badges that carry NO background at all in the card's own colour, i.e. invisible. The inline sites now use var(--on-blue); a bare badge keeps the base .badge colour in both themes. */ * { margin:0; padding:0; box-sizing:border-box; } html { scrollbar-width:thin; scrollbar-color:rgba(120,145,180,.35) transparent; } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-thumb { background:rgba(120,145,180,.35); border-radius:8px; } ::-webkit-scrollbar-track { background:transparent; } body { font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; transition:background .3s ease, color .3s ease; } a { color:var(--blue); text-decoration:none; } img { max-width:100%; } /* ── Header ── */ /* Z LAW (Owner screenshot, 31 Aug — the map painted OVER the mega menu): Leaflet's own panes run 100-700 and its controls 800. Everything that must beat a map lives ABOVE 800: header 900 · header dropdowns 910 · assistant 850 · full modals 1000+. */ .site-head { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:900; } .site-head .inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:6px 16px; } .site-head .logo { height:52px; width:auto; mix-blend-mode:multiply; } [data-theme="dark"] .site-head .logo { mix-blend-mode:normal; background:#fff; padding:3px 7px; border-radius:8px; } .site-nav { display:flex; gap:2px; margin-left:6px; flex:1; } .site-nav a { padding:9px 12px; border-radius:8px; font-size:.88rem; font-weight:500; color:var(--ink); white-space:nowrap; } .site-nav a:hover, .site-nav a.on { background:var(--wash); color:var(--blue); } .head-actions { display:flex; align-items:center; gap:8px; margin-left:auto; } .iconbtn { width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:.95rem; } .burger { display:none; } @media (max-width:960px) { .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--card); border-bottom:1px solid var(--line); flex-direction:column; padding:8px 12px 14px; gap:2px; box-shadow:0 14px 30px rgba(14,34,51,.12); } .site-nav.open { display:flex; } .site-nav a { padding:12px 12px; font-size:.95rem; } .burger { display:inline-flex; align-items:center; justify-content:center; } .site-head .logo { height:44px; } } /* ── Buttons (edges only slightly covered — 8px, never pills) ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:4px; padding:10px 18px; font-weight:600; font-size:.88rem; cursor:pointer; border:none; font-family:inherit; text-decoration:none; } /* T17 (Owner 2026-08-22, booking.com north star): "everything is a notch too big and strong" — type, weight, padding and shadow all come down HERE, in the theme layer, so every screen moves at once. */ .btn-primary { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:0 4px 12px rgba(14,77,146,.18); } .btn-primary:hover { filter:brightness(1.08); } .btn-ghost { border:1.5px solid var(--blue); color:var(--blue); background:transparent; } .btn-sm { padding:7px 12px; font-size:.82rem; } /* Secondary actions are TEXT LINKS, not buttons (DESIGN-DIRECTION-GALLERY §3: "Show on map" is a link). .link-action for ; .btn-link for a