/* =========================================================================== Sourcing — operations UI A dense, quiet interface: the data is the design. Colour is reserved for meaning (profit, loss, state), never decoration. =========================================================================== */ /* --------------------------------------------------------------------------- Theme --------------------------------------------------------------------------- Everything chromatic now comes from ww-design.css, the stylesheet shared by every service on weienwong.online. This block only re-expresses that palette under the names the rest of this file already uses, so every component below is unchanged and there is exactly one place where the two systems meet. Day and night are the fleet's, switched by data-theme on rather than by the OS, so the prefers-color-scheme block that used to live here is gone with them: two independent theme mechanisms on one page means a service that disagrees with the hub about which theme the visitor chose. --------------------------------------------------------------------------- */ :root { /* Teal, and the only value this service picks. Unused elsewhere in the fleet, and far enough from ok (~128) and info (~212) that a state colour is never mistaken for the accent. It also keeps the identity this app already had. */ --accent-h: 168; --accent-s: 52%; /* Aliases onto the shared ladder. --surface-2, --surface-3, --accent, --warn and --mono are deliberately absent: ww-design defines each under the same name with the same meaning, so redefining them here would only invite the two to drift apart. */ --bg: var(--canvas); --surface: var(--surface-1); --line: var(--hairline); --line-soft: var(--hairline); --text: var(--ink); --text-2: var(--ink-muted); --text-3: var(--ink-subtle); --accent-2: var(--accent-hover); --accent-bg: var(--accent-quiet); --good: var(--ok); --good-bg: var(--ok-quiet); --warn-bg: var(--warn-quiet); --bad: var(--danger); --bad-bg: var(--danger-quiet); --radius: var(--r-lg); --radius-sm: var(--r-sm); /* The shared system builds depth from the surface ladder and 1px hairlines on purpose -- a drop shadow over a near-black canvas reads as a smudge -- so the shadow this file used to spend is now nothing. */ --shadow: none; --sidebar: 232px; --sans: var(--font); } * { box-sizing: border-box; } /* An image with no intrinsic limit is the usual cause of a page that scrolls sideways on a phone; product photos come from marketplaces at any size. */ img { max-width: 100%; height: auto; } /* eBay titles, ASINs and URLs are long unbroken strings. Without this they set a minimum width the table cannot go below, and the layout widens instead. */ td, .msg, .reason, .lead, .hint { overflow-wrap: anywhere; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } .mono { font-family: var(--mono); font-size: .92em; } .small { font-size: 12px; } .dim { color: var(--text-2); } .faint { color: var(--text-3); } code { font-family: var(--mono); font-size: .88em; background: var(--surface-3); color: var(--text); padding: 2px 6px; border-radius: 4px; } /* ---------------------------------------------------------------- sidebar */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 30; } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; color: var(--text); } .brand:hover { text-decoration: none; } .brand .mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 650; } .brand-text em { font-style: normal; font-size: 11px; color: var(--text-3); font-weight: 400; } .sidebar nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; } .nav-label { margin: 14px 8px 5px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 1px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; font-size: 13.5px; } .sidebar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .sidebar nav a.on { background: var(--accent-bg); color: var(--accent); } .sidebar nav .ico { width: 15px; text-align: center; font-size: 11px; opacity: .85; } .sidebar-foot { border-top: 1px solid var(--line); padding: 12px 14px; } .who { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; font-size: 12px; font-weight: 650; } .who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .who-text strong { font-size: 13px; font-weight: 600; } .who-text em { font-style: normal; font-size: 11px; color: var(--text-3); } button.linkish { background: none; border: 0; padding: 0; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; } button.linkish:hover { color: var(--accent); } .nav-open, .nav-scrim, #nav-toggle { display: none; } /* ------------------------------------------------------------------- main */ main { margin-left: var(--sidebar); padding: 26px 30px 64px; max-width: 1560px; } /* Signed out there is no sidebar, so the page is the whole viewport and the card is centred in it. `max-width` had to go with the sidebar: it was capping the content box at 1560px and leaving the card centred inside that box rather than on the screen, which on a wide display put it left of centre. Auto margins do the centring, so a card taller than the viewport stays reachable instead of overflowing off the top. */ body.signed-out main { margin: 0; max-width: none; min-height: 100dvh; padding: 32px 20px; display: flex; } h1 { font-size: 21px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 4px; } h2 { font-size: 14px; font-weight: 650; margin: 28px 0 10px; letter-spacing: -.005em; } h2 .dim { font-weight: 400; } .lead { color: var(--text-2); margin: 0 0 20px; max-width: 78ch; } .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .section-head > div { display: flex; gap: 8px; align-items: center; } .more { font-size: 13px; color: var(--text-2); } .more:hover { color: var(--accent); } /* ------------------------------------------------------------------ cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .card h2:first-child { margin-top: 0; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; align-items: start; } /* ------------------------------------------------------------------ stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .stat .label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .stat .value { font-size: 25px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat .value .of { font-size: 15px; color: var(--text-3); font-weight: 400; } .stat .hint { font-size: 11.5px; color: var(--text-3); } .stat.good .value { color: var(--good); } .stat.bad .value { color: var(--bad); } .stats.compact .stat { padding: 11px 13px; } .stats.compact .value { font-size: 19px; } /* ----------------------------------------------------------------- tables */ .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); } /* Inside a card the frame is the card's, not the scroller's - the scroller is only there so a wide table can be swiped instead of overflowing the page. */ .card > .table-scroll, .panel > .table-scroll { border: 0; border-radius: 0; background: transparent; } table { width: 100%; border-collapse: collapse; } thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } tbody tr.clickable { cursor: pointer; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .profit { color: var(--good); font-weight: 600; } .loss { color: var(--bad); } tr.muted td { opacity: .58; } tr.cheapest { background: color-mix(in srgb, var(--good) 9%, transparent); } .links a { margin-right: 10px; font-size: 12.5px; } .empty { color: var(--text-3); padding: 34px 14px; text-align: center; } td.reason { max-width: 44ch; font-size: 12.5px; color: var(--text-2); } th a.sort { color: inherit; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } th a.sort:hover { color: var(--text); text-decoration: none; } th a.sort.on { color: var(--accent); } th a.sort .arrow { font-size: 9px; } /* ------------------------------------------------------------------ pills */ .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--text-2); border: 1px solid transparent; } .pill.completed, .pill.eligible, .pill.scanned, .pill.approved { background: var(--good-bg); color: var(--good); } .pill.failed, .pill.ineligible, .pill.error, .pill.rejected, .pill.suspended { background: var(--bad-bg); color: var(--bad); } .pill.running, .pill.pending { background: var(--warn-bg); color: var(--warn); } .pill.cancelled, .pill.skipped { background: var(--surface-3); color: var(--text-3); } /* Seen but not yet judged. Deliberately neutral - it is not a result. */ .pill.discovered { background: var(--surface-3); color: var(--text-3); } /* What a finished scan produced, next to the fact that it finished. */ .outcome { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); } .outcome.good { color: var(--good); font-weight: 600; } .pill.method, .pill.change { text-transform: none; font-weight: 500; } .tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-3); } .tag.warn { background: var(--warn-bg); color: var(--warn); } /* ------------------------------------------------------------------ forms */ input, select, button, textarea { font: inherit; padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: border-color .12s ease; } input:hover, select:hover, textarea:hover { border-color: var(--text-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--text-3); } textarea { resize: vertical; line-height: 1.5; } select { cursor: pointer; } button { cursor: pointer; background: var(--surface-3); font-weight: 550; } button:hover { border-color: var(--text-3); } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; padding: 9px 18px; } button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } button.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } button.danger:hover { background: var(--bad-bg); } .download { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 550; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .download::before { content: "↓"; color: var(--accent); font-weight: 700; } .download:hover { border-color: var(--accent); text-decoration: none; } /* Page-level actions, sitting beside the heading where a reader looks for them. `.section-head > div` already lays out a row; this keeps the forms inside it from adding their own block spacing and breaking the line. */ .head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .head-actions form { margin: 0; display: inline-flex; } button.action { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 550; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } button.action::before { content: "↻"; color: var(--accent); font-weight: 700; } button.action:hover { border-color: var(--accent); } .table-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .table-filters .grow { flex: 1 1 240px; min-width: 170px; } .table-filters .narrow { max-width: 140px; } .table-filters input, .table-filters select { min-width: 0; padding: 7px 10px; font-size: 13px; } .table-filters .clear { font-size: 13px; color: var(--text-3); } /* ------------------------------------------------------------------ pager */ .pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding: 12px 2px; } .pager .pages { display: flex; gap: 2px; flex-wrap: wrap; } .pager .pages a { min-width: 31px; text-align: center; padding: 5px 9px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; border: 1px solid transparent; } .pager .pages a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .pager .pages a.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; } .pager .pages a.disabled { opacity: .3; pointer-events: none; } .pager .gap { color: var(--text-3); padding: 5px 3px; } .pager .per-page label { display: flex; align-items: center; gap: 7px; } .pager .per-page select { padding: 4px 8px; font-size: 12px; } .toggle-line { margin: -8px 0 14px; } /* --------------------------------------------------- scan: choose one of three Three alternatives, not five fields. Each is a panel with its own number and heading, so the choice reads before any control does. */ .choose-label { margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .options { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; align-items: start; } .option { position: relative; padding: 16px 18px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; } .option:focus-within { border-color: var(--accent); } .option-n { position: absolute; top: -10px; left: 16px; width: 21px; height: 21px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--text-3); font-size: 11px; font-weight: 700; display: grid; place-items: center; } .option:focus-within .option-n { border-color: var(--accent); color: var(--accent); } .option h3 { margin: 2px 0 0; font-size: 14px; font-weight: 650; } .option label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0; } .option label.file { margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--line); } .option input, .option select, .option textarea { font-weight: 400; color: var(--text); width: 100%; } .option input[type=file] { padding: 6px; font-size: 12px; background: var(--surface); } .option .hint { font-size: 11.5px; color: var(--text-3); font-weight: 400; } /* ------------------------------------------------------- run form / detail */ .run-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .run-form .span2 { grid-column: span 2; } .run-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .run-form label input, .run-form label select, .run-form label textarea { font-weight: 400; color: var(--text); } .run-form .hint { font-size: 11.5px; font-weight: 400; color: var(--text-3); } .run-form details { margin: 18px 0 4px; border-top: 1px solid var(--line); padding-top: 14px; } .run-form summary { cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 550; padding: 4px 0; } .run-form .actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; } .settings-used { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px 20px; padding: 16px 18px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .settings-used div { display: flex; flex-direction: column; gap: 2px; } .settings-used .k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } .settings-used .v { font-size: 13px; font-variant-numeric: tabular-nums; } .settings-used .v.changed { color: var(--accent); font-weight: 600; } dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; } dt { color: var(--text-3); font-size: 12.5px; } dd { margin: 0; font-size: 13px; } ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .hint { color: var(--text-3); font-size: 12px; } /* Destructive controls are fenced off and coloured, so they are never a button someone reaches by accident on the way to something else. */ .danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); } .danger-zone h2 { color: var(--bad); } .danger-zone label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 12px 0; max-width: 22rem; } .danger-zone input { width: 100%; font-weight: 400; color: var(--text); } .danger-zone .actions { display: flex; gap: 10px; } /* The correction form: destructive, so it looks it and asks for a reason. */ .correction { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); } .correction .actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .correction label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-top: 12px; } .correction input { width: 100%; font-weight: 400; color: var(--text); } /* Per-run outcome tally: narrow, quiet, and read before the decision log. */ table.breakdown { max-width: 46rem; } table.breakdown td.num { width: 5rem; font-weight: 600; } table.breakdown td.profit { color: var(--good); } .stats.spend .value { font-size: 18px; } .stats.spend .stat { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); } /* A refusal shown to a person, rather than JSON shown to a person. */ dialog.notice { position: fixed; inset: 0; margin: auto; z-index: 60; max-width: 30rem; width: calc(100% - 32px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); } dialog.notice::backdrop { background: rgb(0 0 0 / .5); } dialog.notice h2 { margin: 0 0 10px; color: var(--bad); } dialog.notice p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; } dialog.notice .actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; } a.button { display: inline-block; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--text); } a.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } /* ------------------------------------------------------------- campaigns */ .progress-head { font-size: 13.5px; margin-bottom: 7px; } .progress-track { height: 9px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; } .progress-track.slim { height: 5px; max-width: 12rem; margin: 5px 0 3px; } .progress-track .bar { display: block; height: 100%; background: var(--accent); } .progress-track .bar.done { background: var(--good); transition: width .4s ease; } .pill.enumerating, .pill.scanning { background: var(--warn-bg); color: var(--warn); } /* --------------------------------------------------------------- banners */ .banner { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 18px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; } .banner.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } .banner.error { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); } .banner.info { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); } .banner.good { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); } /* Emphasis inside a coloured banner must not drop back to body text. */ .banner strong, .banner b { color: inherit; } .banner .small { display: inline-block; margin-top: 4px; font-size: 12px; opacity: .85; } /* ----------------------------------------------------------- decision log */ .log { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-height: 620px; overflow-y: auto; } .log li { display: flex; gap: 12px; align-items: baseline; padding: 9px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .log li:last-child { border-bottom: 0; } .log li.error .msg { color: var(--bad); } .log li.warn .msg { color: var(--warn); } .log li.debug { opacity: .72; } .log .stage { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--surface-3); color: var(--text-3); min-width: 26px; text-align: center; } .log .stage.a { color: var(--info); } .log .stage.b { color: var(--accent); } .log .stage.c { color: var(--warn); } .log .stage.d { color: var(--good); } .log .msg { flex: 1; } .log .when { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .live { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: 13px; } .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } } /* ------------------------------------------------------------- outcome bar */ .outcome-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .chip-link { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); } .chip-link b { color: var(--text); font-variant-numeric: tabular-nums; } .chip-link:hover { border-color: var(--accent); text-decoration: none; } .chip-link.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .chip-link.good b { color: var(--good); } /* ------------------------------------------------------------------- auth */ .auth-card { width: min(25rem, 100%); margin: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; } /* The card spaces its children with `gap`, so their own margins would add to it - a banner or lead paragraph sat 36px from the form instead of 16px. */ .auth-card > * { margin: 0; } .auth-card h1 { margin: 0; } .auth-logo { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 2px; } .auth-card form { display: flex; flex-direction: column; gap: 15px; } .auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); } .auth-card input { width: 100%; font-weight: 400; color: var(--text); } /* -------------------------------------------------- side-by-side comparison */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; } .compare-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .compare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } .compare-head .price { font-size: 15px; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; } .compare-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .compare-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface-3); border-radius: var(--radius-sm); border: 1px solid var(--line-soft); } .compare-title { font-size: 13.5px; line-height: 1.45; } .thumbs { display: flex; gap: 7px; flex-wrap: wrap; } .thumbs img { width: 52px; height: 52px; object-fit: contain; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm); } .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; } .facts dt { color: var(--text-3); } .facts dd { margin: 0; } .scorebar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .score { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .score .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } .score .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1080px) { .options { grid-template-columns: 1fr 1fr; } .options .option:first-child { grid-column: span 2; } .split { grid-template-columns: 1fr; } .compare { grid-template-columns: 1fr; } } @media (max-width: 860px) { .sidebar { transform: translateX(-100%); transition: transform .18s ease; width: 250px; box-shadow: var(--shadow); } #nav-toggle:checked ~ .sidebar { transform: none; } #nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / .45); } .nav-open { display: grid; place-items: center; position: fixed; top: 12px; left: 12px; z-index: 40; width: 38px; height: 38px; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 16px; } main { margin-left: 0; padding: 62px 16px 48px; } } @media (max-width: 620px) { h1 { font-size: 18px; } .stats { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; } .stat { padding: 11px 13px; } .stat .value { font-size: 20px; } .table-filters .grow { flex-basis: 100%; } .table-filters input, .table-filters select, .table-filters button { flex: 1 1 auto; } .pager { justify-content: center; } .pager .per-page { display: none; } .run-form .grid { grid-template-columns: 1fr; } .run-form .span2 { grid-column: span 1; } .options { grid-template-columns: 1fr; } td.reason { max-width: none; } .settings-used { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 13px; } body.signed-out main { padding: 20px 14px; } .auth-card { padding: 24px 20px; } th, td { padding: 9px 11px; } .card { padding: 16px; } } /* ------------------------------------------------------- theme toggle */ /* Sidebar foot: sign-out and the day/night switch share a row rather than stacking, so the foot keeps its height. */ .foot-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .foot-actions form { margin: 0; } /* Signed out there is no sidebar, so the toggle floats clear of the card. */ .theme-float { position: fixed; top: 14px; right: 16px; z-index: 5; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 11px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .theme-float:hover { background: var(--surface-3); color: var(--text); } /* ------------------------------------------------------- hub sign-in button */ /* The fleet door on the sign-in card. Sized like the form's own submit so the two choices read as equals rather than one being an afterthought. */ .hub-btn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; border-radius: var(--radius-sm); border: 1px solid var(--accent-2); background: var(--accent-bg); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .12s ease, border-color .12s ease; } .hub-btn:hover { background: var(--surface-3); border-color: var(--accent); } .hub-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; } /* "or use a password", with a rule either side. The pseudo-elements are the rule, so the text sits in a gap rather than on top of a border. */ .hub-split { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-3); margin: 0; } .hub-split::before, .hub-split::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------------------------------------------------------------- landing */ /* The public page. `body.signed-out main` centres a single card in the viewport, which is right for a sign-in form and wrong for a document: it would centre the whole page vertically and cap nothing. This undoes the centring while keeping the sidebar-less full-width layout. */ body.landing-page main { display: block; min-height: 0; padding: 0; } .landing { width: min(60rem, 100%); margin: 0 auto; padding: 40px 24px 72px; display: flex; flex-direction: column; gap: 60px; } /* -- hero */ .lp-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .lp-hero > * { margin: 0; } .lp-mark { width: 52px; height: 52px; border-radius: 13px; } .lp-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .lp-hero h1 { font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; letter-spacing: -.025em; font-weight: 680; max-width: 20ch; text-wrap: balance; } .lp-lead { font-size: 16px; line-height: 1.62; color: var(--text-2); max-width: 62ch; } .lp-note { font-size: 13px; color: var(--text-3); } .lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .lp-btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .12s ease, border-color .12s ease; } .lp-btn:hover { background: var(--surface-3); border-color: var(--accent-2); } .lp-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); } .lp-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--text); } /* -- sections */ .lp-section { display: flex; flex-direction: column; gap: 8px; } .lp-h2 { font-size: 12px; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); } .lp-sub { font-size: 14.5px; color: var(--text-2); max-width: 66ch; margin: 6px 0 12px; } /* -- the A-D pipeline. Lettered because the stages are lettered in the domain and each one genuinely feeds the next; the marker carries meaning here rather than decorating a list. */ .lp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .lp-steps > li { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); padding: 18px 20px; } .lp-step-key { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-2); } .lp-steps h3 { font-size: 14.5px; font-weight: 650; margin: 2px 0 5px; letter-spacing: -.008em; } .lp-steps p { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 62ch; } /* -- feature cards */ /* Two columns, not auto-fit: there are four cards, and auto-fit fitted three on the first row, stretched them all to the tallest, and left the fourth alone beside a column of dead space. */ .lp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 6px; } .lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .lp-card h3 { font-size: 14.5px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.008em; } .lp-card p { font-size: 13.5px; line-height: 1.58; color: var(--text-2); margin: 0; } /* -- access steps: numbered because approval is a real sequence with a wait in the middle, and the order is what the reader needs. */ .lp-access { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: acc; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .lp-access > li { counter-increment: acc; background: var(--surface); padding: 15px 20px 15px 52px; position: relative; font-size: 14px; line-height: 1.58; } .lp-access > li::before { content: counter(acc); position: absolute; left: 20px; top: 15px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); } .lp-access b { display: block; font-weight: 650; color: var(--text); margin-bottom: 2px; } .lp-access span { color: var(--text-2); } /* -- foot */ .lp-foot { border-top: 1px solid var(--line); padding-top: 20px; } .lp-foot p { font-size: 13px; color: var(--text-3); margin: 0; max-width: 70ch; line-height: 1.6; } @media (max-width: 760px) { .landing { padding: 28px 16px 56px; gap: 44px; } .lp-grid { grid-template-columns: 1fr; } .lp-steps > li { padding: 15px 16px; gap: 13px; } .lp-access > li { padding: 13px 16px 13px 46px; } .lp-access > li::before { left: 16px; top: 13px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media print { .sidebar, .nav-open, .table-filters, .pager, .download { display: none !important; } main { margin: 0; padding: 0; } } /* Numbered explanation of a mechanism, not a decorative list. */ ol.how { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; } ol.how li { color: var(--text-2); } ol.how strong { color: var(--text); font-weight: 600; } button.tiny { padding: 4px 10px; font-size: 12px; }