/* ========================================================================== BuiltUsingBlazor.com - prototype design system ("Option D" hybrid) Dark-first tokens, light theme via [data-theme="light"] on . Section order: 1. Tokens 5. Cards / grid 9. Timeline & evidence 2. Base 6. Forms 10. Tables & queues 3. Header/nav 7. Stepper 11. Prose (about) 4. Page furniture 8. Status display 12. Footer & utilities ========================================================================== */ /* -------------------------------------------------- 1. Tokens ------------ */ :root{ /* Tells the browser which palette to draw the parts of a form we do not control: the dropdown a select opens, scrollbars, autofill, spinners and date pickers. Without it those are drawn light over a dark page, which is where black-on-black text comes from - the page styles the control, the operating system styles its popup, and only one of them knows it is dark. */ color-scheme:dark; --bg:#0b0b11; --bg-2:#101017; --surface:#15151f; --surface-2:#1c1c28; --surface-3:#232333; --border:#26263a; --border-2:#33334d; --text:#ececf5; --text-2:#a3a3bd; --text-3:#6f6f8c; --accent:#7c5cff; --accent-2:#a78bfa; --accent-soft:rgba(124,92,255,.14); --ok:#34d399; --ok-soft:rgba(52,211,153,.13); --ok-bd:rgba(52,211,153,.42); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.13); --warn-bd:rgba(251,191,36,.45); --bad:#f87171; --bad-soft:rgba(248,113,113,.13); --bad-bd:rgba(248,113,113,.42); --info:#60a5fa; --info-soft:rgba(96,165,250,.13); --info-bd:rgba(96,165,250,.42); /* One hue per render mode, so a mode reads the same in the breakdown bar, its legend and the badge on every card below it. Separate from the .badge colours, which are tuned to sit on a dark scrim over a screenshot and are too pale to carry on the page background - these are the same hues at a weight that works against --surface in both themes. */ --mode-server:#7ea6ff; --mode-wasm:#34d399; --mode-ssr:#f0a955; --mode-auto:#c084fc; --mode-unknown:#6f6f8c; --radius:12px; --radius-lg:18px; --radius-sm:8px; --shadow:0 18px 50px -14px rgba(0,0,0,.7); --font:"Segoe UI",system-ui,-apple-system,sans-serif; --mono:Consolas,"Cascadia Mono",Menlo,monospace; } html[data-theme="light"]{ color-scheme:light; --bg:#f6f7fb; --bg-2:#fff; --surface:#fff; --surface-2:#f1f2f8; --surface-3:#e9ebf4; --border:#e2e4ef; --border-2:#cdd0e2; --text:#131629; --text-2:#4e5470; --text-3:#7c839f; --accent:#512bd4; --accent-2:#6f4be0; --accent-soft:#efeafc; --ok:#0f9d68; --ok-soft:#e4f7ee; --ok-bd:#bfe9d5; --warn:#b45309; --warn-soft:#fdf3e2; --warn-bd:#f5dfb6; --bad:#c2323b; --bad-soft:#fdecec; --bad-bd:#f3cccc; --info:#2563eb; --info-soft:#e8effd; --info-bd:#c7d8f8; /* Darkened against the light background: the dark-theme hues are legible on #0b0b11 and wash out entirely on #f6f7fb. */ --mode-server:#3b6fd4; --mode-wasm:#0f9d68; --mode-ssr:#b4700e; --mode-auto:#8b4fd8; --mode-unknown:#8b91ab; --shadow:0 12px 34px -14px rgba(30,20,80,.22); } /* -------------------------------------------------- 2. Base -------------- */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} h1,h2,h3,h4{letter-spacing:-.022em} code{font-family:var(--mono)} .wrap{max-width:1480px;margin:0 auto;padding:0 26px} .wrap-narrow{max-width:940px;margin:0 auto;padding:0 26px} .wrap-form{max-width:720px;margin:0 auto;padding:0 26px} .btn{border:1px solid var(--border-2);background:var(--surface);color:var(--text);padding:9px 15px;border-radius:9px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap} .btn:hover{border-color:var(--accent)} .btn:disabled{opacity:.45;cursor:not-allowed} /* A button waiting on the server keeps its full contrast - it is working, not unavailable - and carries a spinner so a long crawl looks like progress. */ .btn[aria-busy="true"]{opacity:1;cursor:progress} .btn[aria-busy="true"]::before{ content:"";width:13px;height:13px;flex:none;border-radius:50%; border:2px solid currentColor;border-top-color:transparent; animation:btn-spin .7s linear infinite } @keyframes btn-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.btn[aria-busy="true"]::before{animation:none}} .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:transparent} .btn-danger{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-soft)} .btn-danger:hover{border-color:var(--bad)} .btn-ok{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-soft)} .btn-ok:hover{border-color:var(--ok)} .btn-sm{padding:6px 11px;font-size:.81rem} .btn-lg{padding:12px 22px;font-size:.95rem} .btn-block{width:100%} .icon-btn{width:37px;height:37px;padding:0} /* -------------------------------------------------- 3. Header / nav ------ */ header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;gap:20px;height:66px} .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:1.02rem;flex:none} .logo .mark{width:29px;height:29px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:800} .logo .dim{color:var(--text-3);font-weight:500} .nav nav{display:flex;gap:3px;font-size:.9rem;flex-wrap:wrap} .nav nav a{padding:7px 12px;border-radius:8px;color:var(--text-2);white-space:nowrap} .nav nav a:hover{background:var(--surface);color:var(--text)} .nav nav a.on{color:var(--accent-2);background:var(--accent-soft);font-weight:600} html[data-theme="light"] .nav nav a.on{color:var(--accent)} .nav .spacer{flex:1} /* The phone menu. Wide screens never see the toggle, and the panel adds no box of its own, so the header row is exactly what it was. The checkbox is display:none there so it is not a Tab stop with nothing to show. */ .nav-panel{display:contents} .nav-toggle{display:none} .nav-toggle-btn{display:none;font-size:1.15rem;flex:none} .nav-toggle:focus-visible + .nav-toggle-btn{outline:2px solid var(--accent-2);outline-offset:2px} .nav-toggle:checked + .nav-toggle-btn{background:var(--surface);border-color:var(--border-2)} /* 940px is where the header row runs out of room; the version pill already moves to the footer here for the same reason. */ @media (max-width:940px){ .nav{height:58px;gap:12px;position:relative} .nav .spacer{display:none} /* Clipped rather than display:none, so keyboard and screen reader still reach it. */ .nav-toggle{display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0} .nav-cta{margin-left:auto} .nav-toggle-btn{display:inline-flex;order:3} .nav-panel{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:6px; padding:10px 16px 16px;background:var(--bg); border-bottom:1px solid var(--border);box-shadow:var(--shadow) } .nav-toggle:checked ~ .nav-panel{display:flex} .nav-panel nav{flex-direction:column;font-size:1rem;gap:2px} .nav-panel nav a{padding:12px 14px} .nav-panel .btn{min-height:44px} .nav-panel .icon-btn{width:44px} .nav-user{padding:0 14px;overflow-wrap:anywhere} } /* A phone has room for the logo and the menu. "Submit" is the second item in the menu, so the button goes rather than squeezing the logo. */ @media (max-width:480px){ .nav-cta{display:none} .nav-toggle-btn{margin-left:auto} } /* -------------------------------------------------- 4. Page furniture ---- */ .masthead{padding:34px 0 26px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)} .masthead::before{content:"";position:absolute;inset:-60% 30% auto -12%;height:460px;background:radial-gradient(closest-side,rgba(124,92,255,.20),transparent);pointer-events:none} html[data-theme="light"] .masthead::before{opacity:.5} .masthead h1{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.032em;margin:0 0 10px;position:relative} /* FocusOnNavigate (Routes.razor) moves focus to the h1 after every navigation so a screen reader announces the new page. The browser then paints its focus ring around the headline - a box nobody asked for, since no one moved that focus with the keyboard. Elements carrying tabindex="-1" cannot be reached by tabbing, so suppressing their ring costs keyboard users nothing and leaves every real focus indicator intact. */ [tabindex="-1"]:focus{outline:none} /* Solid colour, not gradient-clipped text. The headline used `background:linear-gradient` + `background-clip:text` + `color:transparent`. That recipe hangs a real background image on the words, and anything that cannot clip it to the glyphs paints its rectangle instead: engines without background-clip:text, Windows High Contrast, and the contrast extensions that rewrite backgrounds all draw a box around the first line. It was reported twice from Edge, where our own CSS declares no outline at all. One accent colour cannot be drawn as a box by anybody. */ .masthead h1 em{font-style:normal;color:var(--accent-2)} html[data-theme="light"] .masthead h1 em{color:var(--accent)} .masthead p{color:var(--text-2);font-size:1rem;max-width:78ch;margin:0;position:relative} .pagehead{padding:26px 0 22px;border-bottom:1px solid var(--border);position:relative} .pagehead h1{font-size:1.65rem;margin:0 0 7px} .pagehead p{margin:0;color:var(--text-2);max-width:76ch} .crumbs{font-size:.82rem;color:var(--text-3);margin-bottom:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap} .crumbs a:hover{color:var(--accent-2)} .trust{display:flex;margin-top:22px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-width:860px;position:relative;background:var(--surface)} /* A cell is a div on the public pages and a link on the admin one, where the count doubles as the status filter. Both are styled, because selecting on the element left the admin strip with no flex, no padding and no separators - the counts collapsed to the left as underlined blue links. */ .trust div,.trust .trust-item{flex:1;padding:11px 16px;border-right:1px solid var(--border)} .trust div:last-child,.trust .trust-item:last-child{border-right:0} .trust .trust-item{display:block;color:inherit;text-decoration:none;transition:background .15s} .trust .trust-item:hover{background:var(--surface-2)} /* The chosen filter, marked on the inside edge so the strip keeps its outline. */ .trust .trust-item.on{background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--accent)} .trust .trust-item.on span{color:var(--text-2)} .trust b{display:block;font-size:1.18rem;letter-spacing:-.015em} .trust b.ok{color:var(--ok)} .trust b.warn{color:var(--warn)} .trust b.bad{color:var(--bad)} .trust span{font-size:.73rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em} .featured{margin:24px 0 0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);display:grid;grid-template-columns:1.5fr 1fr} .feat-img{position:relative;border-right:1px solid var(--border);background:var(--surface-2);min-height:300px;overflow:hidden} .feat-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .stamp{position:absolute;top:16px;left:16px;z-index:2;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:6px 13px;border-radius:99px;font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em} .feat-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px} .eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--accent-2)} html[data-theme="light"] .eyebrow{color:var(--accent)} .feat-body h2{margin:0;font-size:1.6rem} .feat-body .dom{color:var(--text-3);font-size:.85rem;margin-top:-6px} .feat-body p{margin:0;color:var(--text-2);font-size:.93rem} /* The results take the full width; filters live in a drawer over them. */ .layout{display:block;padding-top:26px;padding-bottom:60px} /* Checkbox-driven drawer: no script, no render mode. The input is the state, the labels are the controls, and it is a sibling of both so ~ can reach them. */ .drawer-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .facets.drawer{ position:fixed;top:0;left:0;bottom:0;width:min(330px,88vw);z-index:70; border-radius:0;border-left:0;border-top:0;border-bottom:0; transform:translateX(-101%);transition:transform .22s ease; overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow) } .drawer-toggle:checked ~ .facets.drawer{transform:none} .drawer-scrim{ position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .22s ease;cursor:pointer } .drawer-toggle:checked ~ .drawer-scrim{opacity:1;pointer-events:auto} /* Keyboard: the label is not focusable, so give the checkbox itself a visible ring through the button that labels it. */ .drawer-toggle:focus-visible ~ main .filters-btn{border-color:var(--accent);color:var(--text)} .drawer-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-2) } .drawer-close{ cursor:pointer;font-size:1.5rem;line-height:1;color:var(--text-3); padding:0 6px;border-radius:8px;user-select:none } .drawer-close:hover{color:var(--text)} .filters-btn{cursor:pointer;flex:none} @media (prefers-reduced-motion:reduce){ .facets.drawer,.drawer-scrim{transition:none} } /* Top and bottom only: this sits on the same element as .wrap, and a shorthand "padding:26px 0" cancelled its side padding, so panels touched the window edge below 1480px. */ .layout-detail{display:grid;grid-template-columns:1fr 340px;gap:28px;padding-top:26px;padding-bottom:60px;align-items:start} .facets{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);position:sticky;top:82px;overflow:hidden} .facet{border-bottom:1px solid var(--border);padding:14px 16px} .facet:last-child{border-bottom:0} .facet h4{margin:0 0 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3)} .facet label{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.87rem;color:var(--text-2);cursor:pointer} .facet label:hover{color:var(--text)} .facet input{accent-color:var(--accent);width:15px;height:15px;flex:none} .facet .count{margin-left:auto;font-size:.77rem;color:var(--text-3);font-variant-numeric:tabular-nums} .facet-clear{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--text-3);background:var(--surface-2)} .facet-clear a{color:var(--accent-2);font-weight:600} html[data-theme="light"] .facet-clear a{color:var(--accent)} .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap} /* The shared form rule makes every select full width, which used to be right when the toolbar sat in a narrow column. Now that results span the page, the sort control has to size to its content or it pushes everything onto its own line. */ .toolbar select{width:auto;flex:none;min-width:210px} .toolbar .btn{flex:none} .search{flex:1;min-width:240px;position:relative} .search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px 11px 39px;color:var(--text);font-size:.92rem;font-family:inherit} .search input:focus{outline:none;border-color:var(--accent)} .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3)} .viewtoggle{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden} .viewtoggle button{border:0;background:var(--surface);padding:10px 14px;font-family:inherit;font-size:.85rem;cursor:pointer;color:var(--text-2);border-right:1px solid var(--border)} .viewtoggle button:last-child{border-right:0} .viewtoggle button.on{background:var(--accent-soft);color:var(--accent-2);font-weight:600} html[data-theme="light"] .viewtoggle button.on{color:var(--accent)} .resultline{color:var(--text-3);font-size:.84rem;margin-bottom:16px} .resultline b{color:var(--text)} /* Render-mode breakdown. Sits between the result count and the grid, and describes the former. */ .modebar{margin:0 0 20px;padding:0} .modebar-track{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border)} /* Segment widths come from the element's own style attribute, computed from the unrounded fraction so the segments fill the track exactly. min-width keeps a single listing out of a hundred from rendering as a hairline. */ .modebar-seg{min-width:3px;background:var(--mode-unknown)} .modebar-seg.server{background:var(--mode-server)} .modebar-seg.wasm{background:var(--mode-wasm)} .modebar-seg.ssr{background:var(--mode-ssr)} .modebar-seg.auto{background:var(--mode-auto)} .modebar-seg.unknown{background:var(--mode-unknown)} .modebar-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:10px 0 0;padding:0;font-size:.78rem;color:var(--text-2)} .modebar-legend li{display:flex;align-items:baseline;gap:7px} /* A mode the current filter reduced to zero keeps its place in the legend so the colours stay put between views, but recedes. */ .modebar-legend li.is-empty{opacity:.45} .modebar-dot{flex:none;width:8px;height:8px;border-radius:50%;align-self:center;background:var(--mode-unknown)} .modebar-dot.server{background:var(--mode-server)} .modebar-dot.wasm{background:var(--mode-wasm)} .modebar-dot.ssr{background:var(--mode-ssr)} .modebar-dot.auto{background:var(--mode-auto)} .modebar-dot.unknown{background:var(--mode-unknown)} .modebar-legend b{color:var(--text);font-weight:600} .modebar-pct{color:var(--text-3);font-variant-numeric:tabular-nums} @media(max-width:560px){.modebar-legend{gap:6px 14px;font-size:.74rem}} /* -------------------------------------------------- 5. Cards / grid ------ */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow)} .shot{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden} .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} /* The full-page capture on a listing keeps its own proportions: it is metres tall and its ratio varies per site, so anything that fixes a height squashes it. width + height:auto lets the file decide. */ .detail-shot{display:block;width:100%;height:auto} .shot::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(11,11,17,.78),transparent);pointer-events:none} html[data-theme="light"] .shot::after{background:linear-gradient(to top,rgba(0,0,0,.3),transparent)} .badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(11,11,17,.74);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;padding:5px 11px;border-radius:99px;font-size:.73rem;font-weight:600} .badge.wasm{color:#a5f3d0} .badge.server{color:#bfd4ff} .badge.ssr{color:#fcd9a8} .badge.auto{color:#e9c8ff} .stat-chip{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(11,11,17,.74);backdrop-filter:blur(8px);border:1px solid var(--ok-bd);color:#6ee7b7;padding:5px 10px;border-radius:99px;font-size:.72rem;font-weight:600} .stat-chip.warn{border-color:var(--warn-bd);color:#fcd34d} .stat-chip.bad{border-color:var(--bad-bd);color:#fca5a5} .card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1} .card h3{margin:0;font-size:1.04rem} .card .dom{color:var(--text-3);font-size:.81rem;margin-top:1px} .card p{margin:0;color:var(--text-2);font-size:.88rem} .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:11px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.79rem} .kv div span{display:block;color:var(--text-3);font-size:.67rem;text-transform:uppercase;letter-spacing:.07em} .kv div b{font-weight:600;color:var(--text-2)} .dates{display:flex;justify-content:space-between;gap:8px;font-size:.74rem;color:var(--text-3);margin-top:auto;padding-top:10px;border-top:1px solid var(--border)} .dates b{display:block;color:var(--text-2);font-weight:600;font-size:.79rem} /* -------------------------------------------------- 6. Forms ------------- */ .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .panel-head{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:12px} .panel-head h3{margin:0;font-size:.95rem} .panel-head .hint{font-size:.78rem;color:var(--text-3);font-weight:400} .panel-body{padding:18px} .panel-foot{padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} .field{margin-bottom:18px} .field:last-child{margin-bottom:0} .field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:6px} .field .req{color:var(--accent-2)} html[data-theme="light"] .field .req{color:var(--accent)} .field .help{font-size:.78rem;color:var(--text-3);margin-top:6px} .field .err{font-size:.78rem;color:var(--bad);margin-top:6px} /* Matched by exclusion rather than by listing the types we want. renders a bare unless a type is passed, and a bare input has NO type attribute - so "input[type=text]" never matched it and six fields across the app were left completely unstyled: default colours on a dark page, which is how a field ends up unreadable. Excluding the controls that must keep their native look is the version of this rule that cannot silently miss one. */ /* Wrapped in :where() so the whole chain costs nothing. Each :not() carries the specificity of its argument, so eight of them scored higher than any class - it beat ".search input" and dropped the 39px of left padding that keeps the magnifier off the text. :where() contributes zero, leaving this exactly as specific as a bare element selector, which is what a base style should be. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color])), textarea, select{ width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:9px; padding:10px 12px;color:var(--text);font-size:.92rem;font-family:inherit;line-height:1.5} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)} input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed} textarea{resize:vertical;min-height:96px} select{cursor:pointer} /* The dropdown list is drawn by the operating system, not by the page. Styling the select alone gives its popup our dark background with the system's black text - readable nowhere. */ option{background:var(--bg-2);color:var(--text)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .charcount{float:right;font-size:.74rem;color:var(--text-3);font-weight:400} .checkline{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--text-2);margin-bottom:10px} .checkline input{accent-color:var(--accent);width:16px;height:16px;margin-top:2px;flex:none} .chipset{display:flex;gap:8px;flex-wrap:wrap} .chipset label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--bg-2);padding:7px 13px;border-radius:99px;font-size:.84rem;color:var(--text-2);cursor:pointer;font-weight:500;margin:0} .chipset label:hover{border-color:var(--border-2)} .chipset input{accent-color:var(--accent)} .chipset input:checked + span{color:var(--text)} /* -------------------------------------------------- 7. Stepper ----------- */ .stepper{display:flex;gap:0;margin:24px 0 26px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .step{flex:1;padding:13px 16px;border-right:1px solid var(--border);display:flex;gap:11px;align-items:center;min-width:0} .step:last-child{border-right:0} .step .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;background:var(--surface-3);color:var(--text-3);flex:none} .step .t{font-size:.84rem;color:var(--text-3);min-width:0} .step .t b{display:block;color:var(--text-3);font-weight:600;font-size:.86rem} .step.done .n{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-bd)} .step.done .t b{color:var(--text-2)} .step.on{background:var(--accent-soft)} .step.on .n{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff} .step.on .t b{color:var(--text)} .step.on .t{color:var(--text-2)} /* -------------------------------------------------- 8. Status display ---- */ .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:600;border:1px solid transparent;white-space:nowrap} .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-bd)} .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-bd)} .pill.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-bd)} .pill.info{background:var(--info-soft);color:var(--info);border-color:var(--info-bd)} .pill.host{background:var(--accent-soft);color:var(--accent-2);border-color:var(--border-2)} html[data-theme="light"] .pill.host{color:var(--accent)} .pill.muted{background:var(--surface-2);color:var(--text-3);border-color:var(--border)} /* "auto" marks a value the crawler extracted rather than the user typing it. */ .pill.auto{background:var(--info-soft);color:var(--info);border-color:var(--info-bd);font-size:.67rem;padding:2px 8px;text-transform:uppercase;letter-spacing:.06em} .pill.edited{background:var(--accent-soft);color:var(--accent-2);border-color:var(--border-2);font-size:.67rem;padding:2px 8px;text-transform:uppercase;letter-spacing:.06em} html[data-theme="light"] .pill.edited{color:var(--accent)} .field label .pill{margin-left:8px;vertical-align:middle;font-weight:600} .field.autofilled input,.field.autofilled textarea,.field.autofilled select{border-color:var(--info-bd);background:color-mix(in srgb,var(--info-soft) 45%,var(--bg-2))} .srcnote{font-size:.74rem;color:var(--text-3);margin-top:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .srcnote code{font-size:.7rem} .callout{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface);border-radius:var(--radius-sm);padding:14px 18px;color:var(--text-2);font-size:.9rem;margin:18px 0} .callout.ok{border-left-color:var(--ok);background:var(--ok-soft)} .callout.warn{border-left-color:var(--warn);background:var(--warn-soft)} .callout.bad{border-left-color:var(--bad);background:var(--bad-soft)} .callout b{color:var(--text)} .callout p{margin:0 0 8px} .callout p:last-child{margin:0} .tag{border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);padding:3px 9px;border-radius:6px;font-size:.76rem} .tags{display:flex;gap:7px;flex-wrap:wrap} /* -------------------------------------------------- 9. Timeline/evidence - */ .evidence{font-size:.78rem;color:var(--text-3);display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap} .evidence code,code.ev{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:.73rem;color:var(--text-2);font-family:var(--mono);white-space:nowrap} .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--border)} .timeline li{position:relative;padding:0 0 18px 30px} .timeline li:last-child{padding-bottom:0} .timeline li::before{content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--border-2)} .timeline li.ok::before{border-color:var(--ok);background:var(--ok-soft)} .timeline li.warn::before{border-color:var(--warn);background:var(--warn-soft)} .timeline li.accent::before{border-color:var(--accent);background:var(--accent-soft)} .timeline .when{font-size:.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em} .timeline .what{font-size:.88rem;color:var(--text-2)} .timeline .what b{color:var(--text);font-weight:600} .speclist{display:flex;flex-direction:column;gap:0} .speclist div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.86rem} .speclist div:last-child{border-bottom:0} .speclist span{color:var(--text-3)} .speclist b{font-weight:600;color:var(--text-2);text-align:right} /* The address a measured value was derived from, under the value it backs. */ .spec-note{display:block;font-style:normal;font-weight:400;font-size:.74rem;color:var(--text-3);font-family:var(--mono)} /* Where a listing answered from, beside its domain on a card. A token rather than loose text, so it does not read as part of the domain. */ .hostcountry{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 7px 1px 5px; border:1px solid var(--border-2);border-radius:99px;white-space:nowrap; color:var(--text-3);font-size:.7rem;letter-spacing:.04em;vertical-align:1px} /* Flags are 4x3 SVGs. The faint border keeps a white or largely white flag from dissolving into a light background, and the radius stops it reading as a broken image while it loads. */ .flag{display:inline-block;width:16px;height:12px;border-radius:2px; box-shadow:0 0 0 1px rgba(128,128,128,.28);object-fit:cover;flex:none} .speclist .flag{margin-right:6px;vertical-align:-1px} /* -------------------------------------------------- 10. Tables & queues -- */ .tabs{display:flex;gap:3px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap} .tabs button{border:0;background:transparent;padding:11px 15px;font-family:inherit;font-size:.89rem;cursor:pointer;color:var(--text-2);border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:8px} .tabs button:hover{color:var(--text)} .tabs button.on{color:var(--accent-2);border-bottom-color:var(--accent);font-weight:600} html[data-theme="light"] .tabs button.on{color:var(--accent)} .tabs .n{background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:1px 8px;font-size:.74rem;color:var(--text-3)} .tabs button.on .n{background:var(--accent-soft);color:var(--accent-2);border-color:var(--border-2)} html[data-theme="light"] .tabs button.on .n{color:var(--accent)} .listrow{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:grid;grid-template-columns:248px 1fr auto;gap:0;overflow:hidden;margin-bottom:12px;transition:border-color .15s} .listrow:hover{border-color:var(--border-2)} .listrow .thumb{position:relative;border-right:1px solid var(--border);background:var(--surface-2);min-height:120px} .listrow .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .listrow .main{padding:14px 18px;min-width:0} .listrow .main h3{margin:0 0 3px;font-size:1.02rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .listrow .main .dom{color:var(--text-3);font-size:.81rem;margin-bottom:9px} .listrow .main p{margin:0 0 10px;color:var(--text-2);font-size:.87rem} .listrow .acts{padding:14px 16px;background:var(--surface-2);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:172px} .datagrid{width:100%;border-collapse:collapse;font-size:.87rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .datagrid th{text-align:left;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:600;white-space:nowrap} .datagrid td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:middle} .datagrid tr:last-child td{border-bottom:0} .datagrid tbody tr:hover{background:var(--surface-2)} .datagrid td b{color:var(--text);font-weight:600} .table-scroll{overflow-x:auto;border-radius:var(--radius)} .empty{border:1px dashed var(--border-2);border-radius:var(--radius);padding:40px 24px;text-align:center;color:var(--text-3)} .empty h3{margin:0 0 7px;color:var(--text-2);font-size:1.02rem} .empty p{margin:0 0 16px;font-size:.89rem;max-width:46ch;margin-inline:auto} /* -------------------------------------------------- 11. Version + notes -- */ /* The pill sits against the logo and is deliberately quiet: it is a fact about the build, not a call to action, so it reads as part of the wordmark until hovered. */ .ver-pill{ font-family:var(--mono);font-size:.65rem;font-weight:600;letter-spacing:.02em; color:var(--text-3);padding:2px 8px;border-radius:999px;flex:none; background:var(--surface-2);border:1px solid var(--border); margin-left:-10px;position:relative;top:-1px; transition:color .12s,border-color .12s } .ver-pill:hover{color:var(--text);border-color:var(--accent-2)} html[data-theme="light"] .ver-pill:hover{border-color:var(--accent)} /* One pill at a time. The header row runs out of width around 940px - it was already tight before the pill existed - so below that the footer carries it instead of the page scrolling sideways. */ footer .ver-pill{margin-left:8px} @media (max-width:940px){ header .ver-pill{display:none} } @media (min-width:941px){ footer .ver-pill{display:none} } .release{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:18px 20px;margin-bottom:16px} .release-head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--border)} .rn-ver{font-size:1.05rem;font-weight:700;letter-spacing:-.02em} .rn-date{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--text-3)} .rn-sec{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:16px 0 7px} .rn-list{margin:0;padding-left:20px;color:var(--text-2)} .rn-list li{margin-bottom:8px} .rn-list li:last-child{margin-bottom:0} /* -------------------------------------------------- 12. Prose ------------ */ .prose{max-width:74ch} .prose h2{font-size:1.3rem;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--border)} .prose h2:first-child{border-top:0;padding-top:0;margin-top:0} .prose h3{font-size:1.02rem;margin:22px 0 7px} .prose p{color:var(--text-2);margin:0 0 13px} .prose ul,.prose ol{color:var(--text-2);margin:0 0 13px;padding-left:22px} .prose li{margin-bottom:6px} .prose strong{color:var(--text)} .prose a{color:var(--accent-2);text-decoration:underline} html[data-theme="light"] .prose a{color:var(--accent)} .qa{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-bottom:10px} .qa summary{padding:14px 18px;cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";color:var(--text-3);font-size:1.2rem;line-height:1} .qa[open] summary::after{content:"\2212"} .qa .qa-body{padding:0 18px 16px;color:var(--text-2);font-size:.9rem} .qa .qa-body p{margin:0 0 10px} .qa .qa-body p:last-child{margin:0} /* -------------------------------------------------- 12. Footer & utils --- */ /* Horizontal padding repeated from .wrap deliberately: this element carries both classes, and "footer.site" outranks ".wrap" on specificity, so "padding:30px 0" silently cancelled the 26px and pinned the footer to both edges of the window. */ footer.site{border-top:1px solid var(--border);padding:30px 26px;color:var(--text-3);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px} footer.site a:hover{color:var(--text-2)} /* The company credit sits under the site line, quieter than it, and only its name is a link - "An … website" is not something to click. */ .credit{margin-top:4px;color:var(--text-3);opacity:.85} .credit a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px} .credit a:hover{color:var(--accent-2)} html[data-theme="light"] .credit a:hover{color:var(--accent)} .stack{display:flex;flex-direction:column;gap:18px} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap} .muted{color:var(--text-3)} .mono{font-family:var(--mono)} .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} .mt0{margin-top:0}.mb0{margin-bottom:0} /* -------------------------------------------------- Responsive ----------- */ @media(max-width:1100px){ .layout,.layout-detail{grid-template-columns:1fr} .facets{position:static} /* minmax(0,…) rather than 1fr, which never shrinks below its content: one long evidence chip held the panel 450px wide on a 375px phone. */ .featured{grid-template-columns:minmax(0,1fr)} .feat-img{border-right:0;border-bottom:1px solid var(--border)} .listrow{grid-template-columns:200px 1fr} .listrow .acts{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);flex-direction:row;justify-content:flex-end} .stepper{flex-wrap:wrap} .step{flex:1 1 44%} } @media(max-width:640px){ .grid{grid-template-columns:1fr} .trust{flex-wrap:wrap} .trust div,.trust .trust-item{flex:1 1 40%} .field-row{grid-template-columns:1fr} .listrow{grid-template-columns:1fr} .listrow .thumb{border-right:0;border-bottom:1px solid var(--border);aspect-ratio:16/9} /* Sides only: .layout and .layout-detail set top and bottom on the same element. */ .wrap,.wrap-narrow,.wrap-form{padding-left:16px;padding-right:16px} footer.site{padding:24px 16px} /* An asset path is wider than a phone. Breaking inside the chip is better than pushing the card past the edge of the screen. */ .evidence > span{min-width:0} .evidence code,code.ev{white-space:normal;overflow-wrap:anywhere} .kv div span,.pill.auto,.pill.edited{font-size:.74rem} } /* Confirmation panel for deleting one listing from the admin list. Tinted and inset so it reads as belonging to the row above it rather than as the next listing along - the whole risk of an inline confirmation is answering it for the wrong site. */ .danger-zone{ margin-top:12px;padding:12px 14px;border-radius:var(--radius); border:1px solid var(--bad-bd);background:var(--bad-soft) } .danger-zone b{display:block;margin-bottom:4px;font-size:.9rem;color:var(--bad)} .danger-zone p{font-size:.83rem;color:var(--text-2);max-width:70ch} /* The outbound link on a card. Muted like the domain text it replaces, so it reads as the same line rather than as a new control, and only picks up the accent on hover. The arrow is decorative and marked aria-hidden - the link already says where it goes, and a screen reader announcing "up-right arrow" after every domain is noise. */ .card .dom a{color:inherit;text-decoration:none} .card .dom a:hover{color:var(--accent-2)} html[data-theme="light"] .card .dom a:hover{color:var(--accent)} .dom .ext{font-size:.78em;margin-left:3px;opacity:.6} .card .dom a:hover .ext{opacity:1} /* Anchor targets clear the sticky header. Without this the browser scrolls a heading to y=0, which is underneath the 66px header bar - you follow a link named "Guidelines" and land in the middle of a paragraph with the heading it promised hidden above you. */ h1[id],h2[id],h3[id]{scroll-margin-top:86px} /* Screenshot history. Scrolls sideways rather than wrapping: the strip is a timeline, and a timeline that reflows onto a second row stops reading as one. */ .shot-history{margin-top:28px} .shot-history h2{margin:0 0 4px;font-size:1.02rem} .shot-history-strip{display:flex;gap:14px;overflow-x:auto;list-style:none;margin:12px 0 0;padding:0 0 10px} .shot-history-strip li{flex:0 0 auto;width:240px} .shot-history-strip img{display:block;width:240px;height:135px;object-fit:cover;object-position:top center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)} .shot-history-when{display:block;margin-top:6px;font-size:.81rem;color:var(--text-3)}