:root { --plate: #ffffff; --ground: #dddddd; --ink: #222831; --etch: #30475e; --keyline: #b9bfc6; --brand: #872341; --caution: #8a5000; --clear: #0b6153; --sans: "Barlow", system-ui, -apple-system, sans-serif; --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --gap: clamp(1.25rem, 4vw, 2.25rem); color-scheme: light; } :root[data-theme="dark"] { --plate: #222831; --ground: #171c23; --ink: #dddddd; --etch: #a6b4c6; --keyline: #30475e; --brand: #e17092; --caution: #e0a03a; --clear: #3fbfa5; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --plate: #222831; --ground: #171c23; --ink: #dddddd; --etch: #a6b4c6; --keyline: #30475e; --brand: #e17092; --caution: #e0a03a; --clear: #3fbfa5; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font: 400 12px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } /* --- masthead ------------------------------------------------------------ */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gap) 1.25rem; border-bottom: 1px solid var(--keyline); } .masthead__logo { display: block; line-height: 0; } .masthead__logo img { height: 51px; width: auto; max-width: 58vw; object-fit: contain; } /* The masthead logo is per BRAND as well as per theme, and one listener serves both domains — so the URLs cannot be hard-coded here. layout.ejs stamps data-brand on (from res.locals.brand), each brand declares its pair as variables, and the theme rules below read the variables. An inline style attribute would have been shorter and is not available: style-src in the CSP does not allow unsafe-inline, and it should not. */ :root[data-brand="ltzero"] { --logo-light: url("https://res.cloudinary.com/dy5qdihfq/image/upload/v1788588259/logo-ltzero-300px.webp"); --logo-dark: url("https://res.cloudinary.com/dy5qdihfq/image/upload/v1788588375/ltzero-logo-300-reverse.webp"); } /* QSA has the same pair: wordmark for light grounds, reverse mark for dark. */ :root[data-brand="qsa"] { --logo-light: url("https://res.cloudinary.com/dy5qdihfq/image/upload/v1789174635/Q_Servieces_pthmiw.webp"); --logo-dark: url("https://res.cloudinary.com/dy5qdihfq/image/upload/v1789181035/QSA_Services_Reverse_c1rz68.png"); } /* The manual toggle must beat the prefers-color-scheme . The result page's brand mark — what an unmapped product shows in place of a product image — swaps with the same two rules. */ :root[data-theme="dark"] .masthead__logo img, :root[data-theme="dark"] .readout__image--brand { content: var(--logo-dark); } :root[data-theme="light"] .masthead__logo img, :root[data-theme="light"] .readout__image--brand { content: var(--logo-light); } .toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--keyline); border-radius: 2px; color: var(--etch); cursor: pointer; transition: color .16s, border-color .16s; } .toggle:hover { color: var(--ink); border-color: var(--ink); } :where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } main { padding: clamp(1.25rem, 4vw, 2.25rem) var(--gap) 3rem; min-height: calc(100svh - 5.5rem); display: grid; align-content: safe center; justify-items: center; } main > * { width: 100%; } /* --- the plate ----------------------------------------------------------- */ .plate { position: relative; background: var(--plate); border: 1px solid var(--keyline); border-radius: 2px; padding: clamp(1.5rem, 5vw, 2.75rem); } .plate--form, .plate--message { max-width: 33rem; margin-inline: auto; } .plate--stacked { margin-bottom: 1.5rem; } /* Corner fixings — the plate device. */ .plate::before, .plate::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--keyline); pointer-events: none; } .plate::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .plate::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } h1 { margin: 0 0 .35rem; font-size: clamp(1.05rem, 2.8vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .lede { margin: 0 0 2rem; color: var(--etch); max-width: 30rem; } /* --- form ---------------------------------------------------------------- */ .form { display: grid; gap: 1.5rem; } .field { display: grid; gap: .4rem; } .field label { font-family: var(--cond); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .input { width: 100%; min-height: 48px; padding: .7rem .85rem; background: var(--ground); border: 1px solid var(--keyline); border-radius: 2px; color: var(--ink); font: 400 12px/1.4 var(--sans); transition: border-color .16s; } .input:hover { border-color: var(--etch); } .input:focus { border-color: var(--ink); } .input--mono { font-family: var(--mono); letter-spacing: .09em; } .input--upper { text-transform: uppercase; } /* The result page's link-back reads as a button but is still a navigation link, so it stays an . .btn's justify-self does nothing outside a grid, hence the explicit centring here. */ .btn--linkback { display: flex; align-items: center; justify-content: center; width: fit-content; text-decoration: none; margin: 0 auto clamp(1.25rem, 4vw, 2rem); } .input[aria-invalid="true"] { border-color: var(--brand); } .help { margin: 0; font-size: 10px; color: var(--etch); } .error { margin: 0; font-size: 10px; font-weight: 500; color: var(--brand); } .btn { justify-self: center; min-height: 44px; padding: 0 1.5rem; background: var(--ink); color: var(--plate); border: 1px solid var(--ink); border-radius: 2px; font: 600 12px/1 var(--sans); letter-spacing: .01em; cursor: pointer; transition: background-color .16s, border-color .16s; } .btn:hover { background: var(--etch); border-color: var(--etch); } .btn--quiet { background: none; color: var(--ink); border-color: var(--keyline); min-height: 40px; padding: 0 .9rem; font-size: 15px; } .btn--quiet:hover { background: var(--ground); border-color: var(--ink); } .linkback { display: inline-block; margin-top: 2rem; color: var(--ink); text-decoration-color: var(--keyline); text-underline-offset: 4px; } .linkback:hover { text-decoration-color: var(--brand); } .message-body { margin: 0; max-width: 46ch; color: var(--etch); } .plate--message h1 { margin-bottom: .75rem; } /* --- result: the verdict is the hero ------------------------------------- */ .plate--result { max-width: 52rem; margin-inline: auto; padding: 0; overflow: hidden; } .verdict { position: relative; padding: 10px clamp(1.5rem, 5vw, 2.75rem); border-bottom: 1px solid var(--keyline); } .verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--state); transform-origin: top; animation: draw .42s cubic-bezier(.2, .7, .3, 1) both; } @keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .verdict::before { animation: none; } } .verdict--expired { --state: var(--brand); } .verdict--expiring { --state: var(--caution); } .verdict--active { --state: var(--clear); } .verdict--unknown { --state: var(--etch); } .verdict__state { margin: 0; color: var(--state); font-size: clamp(1.35rem, 4.5vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } .readout { display: grid; gap: clamp(1.5rem, 4vw, 2.25rem); padding: clamp(1.5rem, 5vw, 2.75rem); grid-template-columns: 1fr; } @media (min-width: 46rem) { .readout { grid-template-columns: 220px 1fr; } } .readout__image { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .75rem; background: var(--ground); border: 1px solid var(--keyline); border-radius: 2px; } .spec { margin: 0; display: grid; } .spec > div { display: grid; gap: .15rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--keyline); } @media (min-width: 30rem) { .spec > div { grid-template-columns: 8.5rem 1fr; align-items: baseline; } } .spec > div:last-child { border-bottom: 0; } .spec dt { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .spec dd { margin: 0; font-weight: 500; } .spec dd.mono { font-family: var(--mono); font-weight: 400; letter-spacing: .06em; } /* --- admin --------------------------------------------------------------- */ .console { max-width: 78rem; margin-inline: auto; } .tabs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--keyline); } .tabs a { padding: .55rem .9rem; border-radius: 2px; color: var(--etch); text-decoration: none; font-weight: 500; transition: color .16s, background-color .16s; } .tabs a:hover { color: var(--ink); background: var(--plate); } .tabs a[aria-current="page"] { color: var(--ink); background: var(--plate); border: 1px solid var(--keyline); } .tabs form { margin-left: auto; } .filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.25rem; } .filters label { display: grid; gap: .3rem; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .filters input, .filters select { min-height: 42px; padding: .45rem .6rem; background: var(--plate); border: 1px solid var(--keyline); border-radius: 2px; color: var(--ink); font: 400 15px/1.3 var(--sans); } .table-scroll { background: var(--plate); border: 1px solid var(--keyline); border-radius: 2px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 15px; } thead th { position: sticky; top: 0; padding: .7rem .85rem; text-align: left; background: var(--plate); border-bottom: 1px solid var(--keyline); font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); white-space: nowrap; } tbody td { padding: .65rem .85rem; vertical-align: top; border-bottom: 1px solid var(--keyline); } tbody tr:last-child td { border-bottom: 0; } td.mono { font-family: var(--mono); font-size: 13.5px; color: var(--etch); white-space: nowrap; } /* The zone the Date/Time column is showing, on its own line under the label. Condensed, like every other column head — the convention already in use. */ .th-zone { display: block; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; } td.msg { min-width: 22rem; } /* Type is carried by the written word and a tick, never by colour alone. */ .type { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 500; } .type::before { content: ""; width: 3px; height: 1.05em; background: var(--etch); border-radius: 1px; } .type--Security::before { background: var(--brand); } .type--Access::before { background: var(--clear); } .type--Debug::before { background: var(--caution); } .empty { padding: 2rem .85rem; color: var(--etch); } .pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; font-size: 15px; color: var(--etch); } .pager a { color: var(--ink); text-underline-offset: 4px; } .thumb { width: 58px; height: 42px; object-fit: contain; padding: 3px; background: var(--ground); border: 1px solid var(--keyline); border-radius: 2px; } .thumb--blocked { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--brand); text-align: center; } .url { font-family: var(--mono); font-size: 13px; color: var(--etch); word-break: break-all; } /* Clears an active blacklist search. A link, not a button: it navigates. */ .filters__clear { color: var(--ink); font-size: 15px; padding-bottom: .6rem; text-underline-offset: 4px; } /* One row of the blacklist table IS its edit form — an in-place correction keeps the row's id, so created_at survives. The domain field is mono and tracked for the same reason serials are: it is identity data, read one character at a time, where a hyphen or an l/1 must not be guessable. */ .row-edit { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .row-edit input { min-height: 42px; padding: .4rem .55rem; background: var(--plate); border: 1px solid var(--keyline); border-radius: 2px; color: var(--ink); font: 400 15px/1.3 var(--sans); } .row-edit input.row-edit__domain { flex: 1 1 15rem; min-width: 12rem; font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em; } .row-edit input.row-edit__remarks { flex: 2 1 18rem; min-width: 12rem; } /* Marks a mapped name the cached product list does not have — a product that has been renamed or discontinued, whose entry can now only be removed. Same secondary ink as every other supporting label; no new colour. */ .row-note { display: block; margin-top: .2rem; font-size: 13px; color: var(--etch); max-width: 30ch; } /* Supporting line under the product-name field and beside the refresh button: how many names are cached, how many still need an image, when the list was last read. Same secondary ink as every other supporting label. */ .product-status { margin: .75rem 0 0; font-size: 15px; color: var(--etch); max-width: 68ch; } /* Whether a product already has an image. Written out AND ticked, never carried by colour alone — the same construction as the log Type column, reusing its tokens rather than introducing a state colour of its own. */ .mapped { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 500; } .mapped::before { content: ""; width: 3px; height: 1.05em; border-radius: 1px; background: var(--caution); } .mapped--yes::before { background: var(--clear); } /* --- the Images tab ------------------------------------------------------ */ /* Refresh and Add Image Manually on the left, the search on the right, one row. Wraps to a column on a narrow screen rather than scrolling. */ .toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; } .toolbar__search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-left: auto; } .toolbar__label { display: grid; gap: .3rem; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .toolbar__search input { min-height: 40px; min-width: 14rem; padding: .45rem .6rem; background: var(--plate); border: 1px solid var(--keyline); border-radius: 2px; color: var(--ink); font: 400 15px/1.3 var(--sans); } /* Set / Not set / All. Links, because each one is a view of the table with its own URL — they carry the current search with them and work with no script. */ .segmented { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; } .segmented a { padding: .4rem .75rem; border: 1px solid var(--keyline); border-radius: 2px; color: var(--etch); text-decoration: none; font-weight: 500; font-size: 15px; transition: color .16s, border-color .16s; } .segmented a:hover { color: var(--ink); border-color: var(--etch); } .segmented a[aria-current="page"] { color: var(--ink); border-color: var(--ink); } .row-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* An error above the table rather than beside a field: the form it belongs to is inside the dialog, which reopens with the values still in it. */ .error--block { margin: 0 0 1rem; font-size: 15px; } /* The dialog is a plate: a keyline frame, 2px corners, no shadow. The backdrop is a plain translucent scrim — not a blur, not a gradient. */ .dialog { width: min(34rem, calc(100vw - 2rem)); padding: clamp(1.25rem, 4vw, 1.75rem); background: var(--plate); color: var(--ink); border: 1px solid var(--keyline); border-radius: 2px; } .dialog::backdrop { background: rgb(23 28 35 / .6); } .dialog__form { display: grid; gap: 1.1rem; } .dialog__title { margin: 0; font-size: 17px; font-weight: 600; } .dialog__field { display: grid; gap: .35rem; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .dialog__field input { min-height: 44px; padding: .55rem .7rem; background: var(--ground); border: 1px solid var(--keyline); border-radius: 2px; color: var(--ink); font: 400 15px/1.3 var(--sans); letter-spacing: normal; text-transform: none; } .dialog__hint { font: 400 14px/1.45 var(--sans); letter-spacing: normal; text-transform: none; color: var(--etch); } /* The locked name: rendered, and submitted by the hidden input beside it. */ .dialog__locked { margin: 0; display: grid; gap: .2rem; } .dialog__label { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--etch); } .dialog__locked-name { font-weight: 500; } .dialog__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .dialog__actions .btn { justify-self: start; } /* The script hides the locked row and the name field with the hidden attribute. Author display rules beat the UA's [hidden], so say it here once. */ [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }