@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2');} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2');} @font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/roboto-400.woff2') format('woff2');} @font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/roboto-700.woff2') format('woff2');} /* Branding carried over from the reco theme: #FF3152 accent, #FFD012 highlight, Poppins for headings and UI, Roboto for body copy. The markup underneath is new - no sidebar, no framework, no jQuery. */ /* Three theme states, not two. An explicit choice stamps data-theme on ; the default "no choice" state stamps nothing, and only prefers-color-scheme separates light from dark there. So the dark tokens are declared twice: once guarded against an explicit light choice, once for an explicit dark one. Every colour lives on :root, never only inside a media block - a token defined only under @media never applies in the unstamped state. */ :root{ color-scheme: light; --accent:#FF3152; --accent-2:#FFD012; --head:#222222; --fg:#3d3d3d; --muted:#6f6f6f; --line:#e5e5e5; --card:#f7f7f8; --thead:#f2f2f2; --bg:#ffffff; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme: dark; --accent:#FF5C77; --head:#f2f3f5; --fg:#d4d7db; --muted:#9aa0a7; --line:#2b3038; --card:#1a1e23; --thead:#222831; --bg:#131619; } } :root[data-theme="dark"]{ color-scheme: dark; --accent:#FF5C77; --head:#f2f3f5; --fg:#d4d7db; --muted:#9aa0a7; --line:#2b3038; --card:#1a1e23; --thead:#222831; --bg:#131619; } /* ---- theme toggle ---- */ .themetoggle{ appearance:none;background:transparent;border:1px solid var(--line); color:var(--muted);border-radius:3px;cursor:pointer; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:12px;font-weight:600; letter-spacing:.04em;padding:5px 9px;line-height:1.4 } .themetoggle:hover{color:var(--accent);border-color:var(--accent)} .themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .themetoggle .on{display:none} :root[data-theme="dark"] .themetoggle .on{display:inline} :root[data-theme="dark"] .themetoggle .off{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]) .themetoggle .on{display:inline} :root:not([data-theme="light"]):not([data-theme="dark"]) .themetoggle .off{display:none} } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--fg); font:400 16px/1.7 "Roboto","Helvetica","Arial",sans-serif; } .wrap{max-width:840px;margin:0 auto;padding:0 22px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--accent);color:#fff;padding:9px 14px;z-index:20} /* ---- header ---- */ header.site{background:var(--bg);border-bottom:1px solid var(--line)} /* Only the vertical padding here - setting the shorthand would wipe out the horizontal padding .wrap provides and push the header against the edge. */ .bar{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center; justify-content:space-between;padding-top:18px;padding-bottom:18px} .brand{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-weight:700;font-size:21px; letter-spacing:-.02em;color:var(--head);text-decoration:none;line-height:1; border-bottom:3px solid var(--accent);padding-bottom:3px; } .brand:hover{color:var(--accent)} header nav{display:flex;flex-wrap:wrap;gap:6px 22px} header nav a{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-weight:600;font-size:13.5px; letter-spacing:.01em;color:var(--muted);text-decoration:none;padding-bottom:2px; border-bottom:2px solid transparent; } header nav a:hover{color:var(--accent);border-bottom-color:var(--accent-2)} /* ---- content ---- */ main{padding:36px 22px 60px} h1,h2,h3,h4{font-family:"Poppins","Helvetica",Arial,sans-serif;color:var(--head); font-weight:700;letter-spacing:-.02em;margin:0} h1{font-size:30px;line-height:1.22;margin-bottom:8px} h1::after{content:"";display:block;width:56px;height:4px;background:var(--accent); border-radius:2px;margin:14px 0 22px} h2{font-size:21px;margin:36px 0 12px} h3{font-size:17.5px;font-weight:600;margin:28px 0 10px} a{color:var(--accent)} a:hover{text-decoration:underline} .prose p{margin:0 0 16px} .prose strong{color:var(--head);font-weight:700} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{margin:4px 0} .prose img{max-width:100%;height:auto} .prose hr{border:0;border-top:1px solid var(--line);margin:28px 0} .prose blockquote{margin:0 0 18px;padding:2px 0 2px 16px; border-left:3px solid var(--accent-2);color:var(--muted)} /* The legacy content is full of wide postal-code tables. */ .prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px; display:block;overflow-x:auto;white-space:nowrap} .prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left} .prose th{background:var(--thead);color:var(--head);font-weight:600; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:13px} .prose tr:nth-child(even) td{background:var(--card)} /* ---- ads ---- */ .ad{margin:30px 0;text-align:center;clear:both} .ad__label{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:7px; font-family:"Poppins","Helvetica",Arial,sans-serif} .ad--top,.ad--mid{min-height:280px} .ad--bottom{min-height:250px} @media(max-width:782px){.ad--top,.ad--mid{min-height:250px}} /* ---- footer ---- */ footer.site{border-top:1px solid var(--line);background:var(--card); padding:26px 0;color:var(--muted);font-size:14px} footer.site p{margin:0 0 9px} footer.site a{color:var(--muted);text-decoration:underline} footer.site a:hover{color:var(--accent)} footer .fine{font-size:12.5px;line-height:1.6;max-width:64ch;margin:0} @media(max-width:640px){ h1{font-size:25px} .bar{padding-top:15px;padding-bottom:15px} header nav{gap:5px 16px} } /* Worked address layouts - country-specific, from Google's address metadata. */ pre.addr{ background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:4px;padding:14px 16px;margin:0 0 18px;overflow-x:auto; font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap;color:var(--fg) } /* Full code tables run to six figures of rows; keep the per-row markup bare and do the monospacing here instead of wrapping every cell in . */ .prose table.codes td:first-child{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:nowrap } /* Postal codes for one town: a flowing grid beats a tall single-column table. */ .prose ul.codegrid{ list-style:none;margin:0 0 22px;padding:0; display:grid;gap:4px 10px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .prose ul.codegrid li{ margin:0;padding:4px 6px;background:var(--card); border:1px solid var(--line);border-radius:3px;text-align:center } /* Coverage caveats - visible, but not alarming. */ .prose p.note{ background:var(--card);border-left:3px solid var(--accent-2); padding:12px 14px;margin:0 0 20px;font-size:14.5px;border-radius:0 3px 3px 0 } /* ---- breadcrumbs ---- */ .crumbs{ font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:12.5px; color:var(--muted);margin:0 0 14px;display:flex;flex-wrap:wrap; align-items:center;gap:0 6px } .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--accent);text-decoration:underline} .crumbs span[aria-hidden]{opacity:.5} .crumbs .here{color:var(--head);font-weight:600} /* ---- search ---- */ .pcsearch{position:relative;margin:0 0 24px;max-width:520px} .pcsearch input{ width:100%;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:11px 13px; font:400 15px/1.4 "Roboto","Helvetica",Arial,sans-serif } .pcsearch input::placeholder{color:var(--muted)} .pcsearch input:focus{outline:none;border-color:var(--accent)} .pcsearch .results{ list-style:none;margin:4px 0 0;padding:0;position:absolute;z-index:30; left:0;right:0;background:var(--bg);border:1px solid var(--line); border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.10); max-height:340px;overflow-y:auto } :root[data-theme="dark"] .pcsearch .results{box-shadow:0 8px 24px rgba(0,0,0,.5)} .pcsearch .results li{margin:0;border-bottom:1px solid var(--line)} .pcsearch .results li:last-child{border-bottom:0} .pcsearch .results a{ display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:9px 13px;text-decoration:none;color:var(--fg) } .pcsearch .results a:hover,.pcsearch .results a:focus{ background:var(--card);color:var(--accent);outline:none } .pcsearch .results .nm{font-weight:600;font-size:14.5px} .pcsearch .results .ct{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;color:var(--muted);white-space:nowrap } .pcsearch .results .none{padding:11px 13px;font-size:14px;color:var(--muted)} /* ---- nearest towns ---- */ .prose p.nearby{line-height:2.1} .prose .dist{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;color:var(--muted);white-space:nowrap } /* ---- map ---- */ .pcmap{margin:0 0 24px} .pcmap .mapnote{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;color:var(--muted);margin:0 0 10px } .pcmap .canvas.loading{background:var(--card)} .pcmap .canvas.loading::after{ content:"";display:block;width:26px;height:26px;margin:176px auto 0; border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%; animation:pcspin .9s linear infinite } @keyframes pcspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.pcmap .canvas.loading::after{animation:none}} .prose .mapfail{padding:24px;text-align:center;color:var(--muted);font-size:14.5px;margin:0} .mapbtn{ appearance:none;background:var(--card);border:1px solid var(--line); color:var(--fg);border-radius:4px;cursor:pointer;padding:9px 15px; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:13.5px;font-weight:600 } .mapbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .mapbtn:disabled{opacity:.6;cursor:default} .mapbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .pcmap .canvas{ height:380px;border:1px solid var(--line);border-radius:4px;overflow:hidden } @media(max-width:640px){.pcmap .canvas{height:300px}} /* ---- reference tables ---- */ .tablefilter{ width:100%;max-width:420px;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:9px 12px; font:400 15px/1.4 "Roboto","Helvetica",Arial,sans-serif } .tablefilter:focus{outline:none;border-color:var(--accent)} .prose .filternote{font-size:14px;color:var(--muted);margin:-10px 0 20px} .prose td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px} /* ---- tools ---- */ .tool{ border:1px solid var(--line);background:var(--card); border-radius:5px;padding:20px;margin:0 0 26px } .tool .fld{display:block;margin:0 0 16px;position:relative} .tool .fld > span{ display:block;font-family:"Poppins","Helvetica",Arial,sans-serif; font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px } .tool select,.tool textarea,.tool input[type=search]{ width:100%;appearance:none;background:var(--bg);color:var(--fg); border:2px solid var(--line);border-radius:4px;padding:10px 12px; font:400 15px/1.45 "Roboto","Helvetica",Arial,sans-serif } .tool textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;resize:vertical} .tool select:focus,.tool textarea:focus,.tool input:focus{outline:none;border-color:var(--accent)} .tool .row{display:flex;gap:10px;flex-wrap:wrap} .tool .btn{ appearance:none;background:var(--accent);color:#fff;border:1px solid var(--accent); border-radius:4px;cursor:pointer;padding:10px 18px; font-family:"Poppins","Helvetica",Arial,sans-serif;font-size:14px;font-weight:600 } .tool .btn.ghost{background:transparent;color:var(--muted);border-color:var(--line)} .tool .btn:hover:not(:disabled){filter:brightness(1.08)} .tool .btn.ghost:hover{color:var(--accent);border-color:var(--accent)} .tool .btn:disabled{opacity:.6;cursor:default} .tool .results{ list-style:none;margin:4px 0 0;padding:0;position:absolute;z-index:20;left:0;right:0; background:var(--bg);border:1px solid var(--line);border-radius:4px;max-height:260px;overflow-y:auto } .tool .results li{margin:0;border-bottom:1px solid var(--line)} .tool .results li:last-child{border-bottom:0} .tool .results button{ width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:9px 12px;font:400 14px "Roboto",Arial,sans-serif;color:var(--fg); display:flex;justify-content:space-between;gap:12px } .tool .results button:hover{background:var(--card);color:var(--accent)} .tool .results .ct{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted)} .tool .summary{font-size:15px;margin:18px 0 12px} .tool .none{font-size:15px;color:var(--muted);margin:18px 0 0} table.checkres{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto} table.checkres th,table.checkres td{border:1px solid var(--line);padding:7px 10px;text-align:left} table.checkres th{background:var(--thead);font-family:"Poppins",Arial,sans-serif;font-size:12px} table.checkres td.mono{font-family:ui-monospace,Menlo,monospace;white-space:nowrap} .pill{display:inline-block;font-family:"Poppins",Arial,sans-serif;font-size:11px; font-weight:600;padding:2px 8px;border-radius:3px;white-space:nowrap} .pill.good{background:#1F7A5A;color:#fff} .pill.warn{background:#A84B12;color:#fff} .pill.bad{background:var(--accent);color:#fff} .pill.muted{background:var(--line);color:var(--muted)}