/* gear.casa brand design ("Banner"), light and dark. DEV ONLY for now. catalog-table.html loads this only when DESIGN_PREVIEW is on, and sets data-look="banner" on at the same time; every rule below is scoped to that attribute, so prod (same image, flag off) is untouched. brand.js sets data-mode="light|dark" before the first paint. THE BRAND, AS SAMPLED FROM THE ARTWORK blue #1e78e0 the banner and the icon tile orange #ff8a1f the dot, and the two orange icons in the banner white the wordmark and the line icons The wordmark is an image cut from the banner (images/brand/wordmark-*.png), not a font: the site loads no webfonts (see design-system.css). ORANGE IS RATIONED. In the artwork it is one dot and two icons out of thirty marks. Here it is the logo's dot, the title's full stop, and "a filter is on" badges, and nothing else. Price signals keep green / red / amber, which carry meaning orange must not borrow. DARK MODE IS ITS OWN PALETTE, not the light one inverted. The ground is a blue-black so the brand blue still belongs on it; the band at the top drops to a deep brand blue so a white page does not flash in at the top of a dark one; text and accents are re-measured against their own ground (contrast notes on the tokens). */ /* ---------- pieces that exist only for this design ---------- */ .brand-wm, .brand-tag, .nav-art, .mode-toggle, .cat-find, .cat-find-none, .cat-active { display: none; } /* ================================================================ tokens */ :root[data-look="banner"] { color-scheme: light; --bg: #eef3fa; --bg-elev: #ffffff; --surface: #f6f9fd; --surface-2: #eaf1fa; --border: #dbe4ef; --border-strong: #bfcddf; --text: #0e1b2c; /* 17.3:1 on white */ --text-2: #46566b; /* 7.5:1 */ --text-3: #5a6a80; /* 5.5:1 on white, 4.9:1 on surface-2: the floor for the smallest labels */ /* Brand blue is 4.3:1 on white, just under the 4.5 small text needs, so text and small UI take a shade deeper. Large fills keep the true blue. */ --accent: #1a6dd0; /* 5.0:1 */ --accent-hi: #1559ad; /* 6.6:1 */ --accent-dim: rgba(30, 120, 224, 0.1); --accent-line: rgba(30, 120, 224, 0.42); --good: #0f7b37; --good-dim: rgba(15, 123, 55, 0.1); --down: #c4302b; --down-dim: rgba(196, 48, 43, 0.09); --warn: #9a5b00; --warn-dim: rgba(255, 138, 31, 0.16); --shadow: 0 12px 32px -18px rgba(14, 40, 80, 0.4); --radius: 8px; --radius-lg: 14px; --brand: #1e78e0; --btn: #1a6dd0; /* white on it: 5.0:1 */ --btn-hi: #155bb0; /* 6.4:1 */ --orange: #ff8a1f; --orange-ink: #a64f00; /* orange as small text: 5.0:1 on its own tint */ --orange-dim: rgba(255, 138, 31, 0.14); /* A hair deeper than the brand blue (#1e78e0 is 4.36:1 under white text, #1c74db is 4.59:1). Side by side the two cannot be told apart; the tagline and the listing count can now be read by everyone. */ --band-top: #1c74db; --band-bottom: #1c74db; --nav-h: 68px; --hover: #eef3fa; --chip-on-text: #ffffff; } :root[data-look="banner"][data-mode="dark"] { color-scheme: dark; --bg: #0a1220; --bg-elev: #111b2e; --surface: #0e1727; --surface-2: #172339; --border: #22314b; --border-strong: #31456a; --text: #e8eef8; /* 14.8:1 on the panel */ --text-2: #a9b7cc; /* 8.5:1 */ --text-3: #8293ad; /* 5.5:1, 5.0:1 on surface-2 */ --accent: #6aabff; /* 7.3:1 */ --accent-hi: #93c2ff; --accent-dim: rgba(106, 171, 255, 0.14); --accent-line: rgba(106, 171, 255, 0.5); --good: #4fd88a; --good-dim: rgba(79, 216, 138, 0.13); --down: #ff8279; --down-dim: rgba(255, 130, 121, 0.14); --warn: #ffb85c; --warn-dim: rgba(255, 138, 31, 0.17); --shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.8); --orange-ink: #ffa956; /* 7.2:1 on its own tint */ --orange-dim: rgba(255, 138, 31, 0.15); --band-top: #133f80; --band-bottom: #133f80; --hover: #18253b; } /* ================================================================ frame */ /* The band runs on past the nav, behind the title and the search box, and the panels start inside it: the page hangs off the banner instead of the banner being a strip stuck to the top. IT ENDS WHERE THE SEARCH BAR ENDS, not at a fixed height. It is drawn by the bar itself (a full-width layer behind it, reaching up under the nav and 44px below the bar), so when the bar wraps onto a second line on a small phone the band grows with it. At a fixed 236px the wrapped listing count fell off the band at 320px: white text on the pale page, invisible. The layer is the bar's own width, widened to the screen edges with a box-shadow and trimmed top and bottom with clip-path. A shadow is painted but never counts as scrollable overflow, so it cannot add a sideways scroll at any width (a wide box did, and overflow-x on body to hide it propagates to the viewport, which iOS Safari does not reliably honour). */ :root[data-look="banner"] body { background: var(--bg); color: var(--text); } :root[data-look="banner"] .cat-bar { position: relative; } :root[data-look="banner"] .cat-bar::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: -480px; bottom: -44px; background: var(--band-bottom); box-shadow: 0 0 0 100vmax var(--band-bottom); clip-path: inset(0 -100vmax 0 -100vmax); } :root[data-look="banner"] .nav { position: sticky; overflow: hidden; background: var(--band-top); border-bottom: 0; box-shadow: none; } :root[data-look="banner"] .nav-inner { position: relative; height: var(--nav-h); } /* THE STRIP TAKES WHATEVER ROOM IS LEFT, by layout rather than by numbers. It is a flex item between the wordmark (and tagline) and the mode button, so it can never overlap either at any width: on a phone it is a couple of icons, on a 3440px monitor it is the whole strip, and in between it is exactly the space there is. Sized by percentages it overlapped the wordmark at 320px and the tagline at 641px. Right-aligned, so the icons nearest the button are the ones that always show, and faded in from the left so it never starts with a hard edge. Stops 26px short of the button, which lines up with the table's edge. */ :root[data-look="banner"] .nav-links { display: none; } :root[data-look="banner"] .nav-art { display: block; order: 2; flex: 1 1 0; min-width: 0; align-self: stretch; margin: 0 4px 0 8px; background: url("/images/brand/strip-light.svg") right center / auto 68px no-repeat; opacity: .92; -webkit-mask-image: linear-gradient(to right, transparent, #000 min(45%, 220px)); mask-image: linear-gradient(to right, transparent, #000 min(45%, 220px)); } :root[data-look="banner"][data-mode="dark"] .nav-art { opacity: .55; } :root[data-look="banner"] .brand > img:first-child, :root[data-look="banner"] .brand > span:first-of-type { display: none; } :root[data-look="banner"] .brand { gap: 12px; position: relative; z-index: 1; flex: none; } :root[data-look="banner"] .brand-wm-white { display: block; height: 30px; width: auto; } :root[data-look="banner"] .brand-tag { display: inline-block; font-size: 15px; font-weight: 300; letter-spacing: .01em; white-space: nowrap; padding-left: 14px; margin-left: 2px; color: #fff; border-left: 1px solid rgba(255, 255, 255, .35); } /* The mode switch: a quiet glass button at the right end of the band. */ :root[data-look="banner"] .mode-toggle { display: grid; place-items: center; position: relative; z-index: 1; order: 3; margin-left: auto; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 11px; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); transition: background .15s ease, border-color .15s ease; } :root[data-look="banner"] .mode-toggle:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .45); } :root[data-look="banner"] .mode-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .mode-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-look="banner"] .mode-toggle .mode-sun { display: none; } :root[data-look="banner"][data-mode="dark"] .mode-toggle .mode-sun { display: block; } :root[data-look="banner"][data-mode="dark"] .mode-toggle .mode-moon { display: none; } /* The page title takes the logo's full stop: "GPU prices." with the orange dot. */ :root[data-look="banner"] .cat-title { color: #fff; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; } :root[data-look="banner"] .cat-title::after { content: "."; color: var(--orange); } :root[data-look="banner"] .cat-count { color: #fff; } :root[data-look="banner"] #f-text { border-radius: 999px; padding: .6rem 1rem .6rem 2.4rem; font-size: .9rem; color: var(--text); background: var(--bg-elev) url("/images/brand/search.svg") no-repeat .9rem 50% / 15px 15px; border: 1px solid transparent; box-shadow: 0 10px 24px -14px rgba(8, 30, 70, .8); } :root[data-look="banner"] #f-text::placeholder { color: var(--text-3); } :root[data-look="banner"] #f-text:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45), 0 10px 24px -14px rgba(8, 30, 70, .8); } /* ================================================================ panels + table */ :root[data-look="banner"] .cat-side, :root[data-look="banner"] .cat-grid, :root[data-look="banner"] .ph { background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow); } :root[data-look="banner"][data-mode="light"] .cat-side, :root[data-look="banner"][data-mode="light"] .cat-grid, :root[data-look="banner"][data-mode="light"] .ph { border-color: transparent; } :root[data-look="banner"] .cat-grid { border-radius: var(--radius-lg); overflow: hidden; } :root[data-look="banner"] .cat-grid-head { background: var(--surface-2); } :root[data-look="banner"] .cat-grid .off-row:hover, :root[data-look="banner"] .cat-tbl tbody tr:hover td { background: var(--hover); } :root[data-look="banner"] .cat-grid .gh.sorted { color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); } :root[data-look="banner"] .cat-buy { background: var(--btn); color: #fff; border-radius: 8px; font-weight: 700; } :root[data-look="banner"] .cat-buy:hover, :root[data-look="banner"] .cat-tbl tbody tr:hover .cat-buy { background: var(--btn-hi); box-shadow: 0 4px 12px -4px rgba(30, 120, 224, .6); } :root[data-look="banner"] .cat-filters-btn { background: var(--bg-elev); border-color: transparent; box-shadow: var(--shadow); color: var(--text); } :root[data-look="banner"] .cat-filters-btn .n { color: var(--orange-ink); font-weight: 700; } /* Hard-coded dark-theme colours in the page, re-pointed at tokens. */ :root[data-look="banner"] .cat-tbl .delta.under { color: var(--good); } :root[data-look="banner"] .cat-tbl .delta.over { color: var(--down); } :root[data-look="banner"] .cat-tbl .price { color: var(--good); } :root[data-look="banner"] .cat-cols-list li:hover { background: var(--surface-2); } :root[data-look="banner"] .conf.c-high { background: var(--good-dim); color: var(--good); } :root[data-look="banner"] .conf.c-medium { background: var(--warn-dim); color: var(--warn); } :root[data-look="banner"] .conf.c-low { background: var(--down-dim); color: var(--down); } :root[data-look="banner"] select { color-scheme: inherit; } /* ================================================================ the sidebar WHAT WAS WRONG WITH IT. A tree of ninety cards always fully open, scrolling inside a sidebar that also scrolls; guide rules and three sizes of caret; names cut off ("RTX 4070 SU..."); every filter the same grey checkbox row, whether it was a list of 200 brands or four conditions; and nothing saying what was switched on once its group was folded away. WHAT IT IS NOW - One scroll: the panel itself, sticky under the header. The GPU list opens one level (NVIDIA, AMD, Intel) with the series folded, and a "Find a card" box jumps straight to any card. - Short choices (VRAM, condition, price check) are chips you tap, not rows. - What is on sits at the top as removable chips, so a filter can never hide behind a folded group. - Group headers are the sidebar's structure: bold label, a badge when something inside is on, the chevron on the right where the eye ends. - Wider (17rem) and less indented, so card names fit. */ :root[data-look="banner"] .cat-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; } :root[data-look="banner"] .cat-side { padding: 0; border-radius: var(--radius-lg); top: calc(var(--nav-h) + 12px); max-height: calc(100vh - var(--nav-h) - 24px); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } :root[data-look="banner"] .cat-side::-webkit-scrollbar { width: 8px; } :root[data-look="banner"] .cat-side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; border: 2px solid var(--bg-elev); } /* -- head: "Filters 2" .............................. Clear all */ :root[data-look="banner"] .cat-side-head { position: sticky; top: 0; z-index: 3; margin: 0; padding: 14px 16px 12px; background: var(--bg-elev); border-bottom: 1px solid var(--border); } :root[data-look="banner"] .cat-side-head h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; letter-spacing: -.01em; text-transform: none; color: var(--text); } :root[data-look="banner"] .cat-side-head h4[data-n]::after { content: attr(data-n); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--btn); color: #fff; font-variant-numeric: tabular-nums; } :root[data-look="banner"] .cat-side-head .reset { font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 4px 8px; border-radius: 7px; } :root[data-look="banner"] .cat-side-head .reset:hover { background: var(--accent-dim); border-color: transparent; color: var(--accent-hi); } :root[data-look="banner"] .cat-side-head .reset[aria-disabled="true"] { color: var(--text-3); opacity: .7; pointer-events: none; } /* -- what is on, as chips */ :root[data-look="banner"] .cat-active:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); } :root[data-look="banner"] .cat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 18px; color: var(--accent-hi); background: var(--accent-dim); border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; } :root[data-look="banner"][data-mode="dark"] .cat-chip { color: var(--accent-hi); } :root[data-look="banner"] .cat-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-look="banner"] .cat-chip > i { flex: none; width: 18px; height: 18px; border-radius: 50%; position: relative; background: rgba(30, 120, 224, .14); } :root[data-look="banner"] .cat-chip > i::before, :root[data-look="banner"] .cat-chip > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } :root[data-look="banner"] .cat-chip > i::after { transform: translate(-50%, -50%) rotate(-45deg); } :root[data-look="banner"] .cat-chip:hover { border-color: var(--accent-line); } :root[data-look="banner"] .cat-chip:hover > i { background: var(--btn); color: #fff; } :root[data-look="banner"] .cat-chip:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; } /* -- groups */ :root[data-look="banner"] .cat-facet { border-bottom: 1px solid var(--border); padding: 0 16px; } :root[data-look="banner"] .cat-facet:last-of-type { border-bottom: 0; } :root[data-look="banner"] .cat-facet > summary { padding: 13px 0; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--text); transition: color .12s ease; } :root[data-look="banner"] .cat-facet > summary::before { display: none; } :root[data-look="banner"] .cat-facet > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 3px 0 4px; border-right: 1.75px solid var(--text-3); border-bottom: 1.75px solid var(--text-3); transform: rotate(45deg); transition: transform .18s ease, margin .18s ease; } :root[data-look="banner"] .cat-facet[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; } :root[data-look="banner"] .cat-facet > summary:hover { color: var(--accent); } :root[data-look="banner"] .cat-facet > summary:hover::after { border-color: var(--accent); } :root[data-look="banner"] .cat-facet > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 6px; } :root[data-look="banner"] .cat-facet-on { margin-left: auto; } :root[data-look="banner"] .cat-facet-on:not(:empty) { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 16px; color: var(--orange-ink); background: var(--orange-dim); } /* A default nobody chose (the seller floor of 1) is shown, but not shouted. */ :root[data-look="banner"] .cat-facet-on.is-default { color: var(--text-3); background: var(--surface-2); } :root[data-look="banner"] .cat-facet-opts { padding: 0 0 14px; margin: 0; max-height: none; overflow: visible; } /* -- rows (trees and long lists) */ :root[data-look="banner"] .cat-opt { margin: 0; padding: 6px 8px; gap: 10px; border-radius: 8px; font-size: 13px; color: var(--text-2); transition: background .1s ease, color .1s ease; } :root[data-look="banner"] .cat-opt:hover { background: var(--hover); color: var(--text); } :root[data-look="banner"] .cat-opt:has(input:checked) { background: var(--accent-dim); color: var(--text); font-weight: 600; } :root[data-look="banner"] .cat-opt-n { font-size: 11.5px; color: var(--text-3); padding-left: 6px; } :root[data-look="banner"] .cat-opt:has(input:checked) .cat-opt-n { color: var(--accent); font-weight: 700; } :root[data-look="banner"] .cat-opt.is-empty { opacity: .42; } /* The checkbox, on the brand: rounder, a touch bigger, white tick on blue. */ :root[data-look="banner"] .cat-opt input[type="checkbox"] { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--bg-elev); } :root[data-look="banner"] .cat-opt input[type="checkbox"]::after { width: 10px; height: 10px; background: #fff; } :root[data-look="banner"] .cat-opt:hover input[type="checkbox"] { border-color: var(--btn); } :root[data-look="banner"] .cat-opt input[type="checkbox"]:checked, :root[data-look="banner"] .cat-opt input[type="checkbox"]:indeterminate { background: var(--btn); border-color: var(--btn); } :root[data-look="banner"] .cat-opt input[type="checkbox"]:indeterminate::after { width: 9px; height: 2px; } /* The tree: depth by indent alone, no guide rules; carets in a soft square. */ :root[data-look="banner"] .cat-facet-opts.cat-tree { padding-left: 0; max-height: none; } :root[data-look="banner"] .cat-kids { margin-left: 14px; padding-left: 0; border-left: 0; } :root[data-look="banner"] .cat-node-row { gap: 2px; } :root[data-look="banner"] .cat-tog { width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); } :root[data-look="banner"] .cat-tog:hover { background: var(--hover); color: var(--accent); } :root[data-look="banner"] .cat-tog::before { width: 6px; height: 6px; border-width: 0 1.75px 1.75px 0; } :root[data-look="banner"] .cat-tog:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; } :root[data-look="banner"] .cat-tog-sp { width: 22px; } :root[data-look="banner"] .cat-tree .cat-opt { padding: 6px 8px; gap: 9px; } :root[data-look="banner"] .cat-node[data-depth="0"] > .cat-node-row .cat-opt > span:first-of-type { font-weight: 750; color: var(--text); } :root[data-look="banner"] .cat-node[data-depth="1"] > .cat-node-row .cat-opt > span:first-of-type { font-weight: 600; color: var(--text); } :root[data-look="banner"] .cat-node[data-depth="0"] + .cat-node[data-depth="0"] { margin-top: 4px; } /* The long Brand list keeps its own short scroll: two hundred brands do not belong inline. The finder above it is the faster way in. */ :root[data-look="banner"] .cat-facet[data-facet="brand"] .cat-facet-opts.cat-tree { max-height: 18rem; overflow-y: auto; margin-right: -8px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* -- the finder */ :root[data-look="banner"] .cat-find { display: block; margin: 0 0 8px; } :root[data-look="banner"] .cat-find input { width: 100%; height: 34px; padding: 0 10px 0 32px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface) url("/images/brand/search.svg") no-repeat 10px 50% / 14px 14px; border: 1px solid var(--border); transition: border-color .12s ease, box-shadow .12s ease; } :root[data-look="banner"] .cat-find input::placeholder { color: var(--text-3); } :root[data-look="banner"] .cat-find input:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px var(--accent-dim); background-color: var(--bg-elev); } :root[data-look="banner"] .cat-find-none:not([hidden]) { display: block; padding: 4px 8px 12px; font-size: 12.5px; color: var(--text-3); } :root[data-look="banner"] .cat-node.is-filtered-out { display: none; } :root[data-look="banner"] .cat-opt mark { background: none; color: var(--accent); font-weight: 700; } /* -- short choices as chips: VRAM, condition, price check */ :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-facet-opts { display: flex; flex-wrap: wrap; gap: 6px; } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt { position: relative; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt .cat-opt-n { margin-left: 0; padding-left: 0; font-weight: 600; } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt:hover { border-color: var(--btn); background: var(--bg-elev); } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt:has(input:checked) { background: var(--btn); border-color: var(--btn); color: var(--chip-on-text); } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt:has(input:checked) .cat-opt-n { color: rgba(255, 255, 255, .82); } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt:has(input:focus-visible) { outline: 2px solid var(--accent-line); outline-offset: 2px; } /* VRAM reads as a number with its unit. */ :root[data-look="banner"] .cat-facet[data-facet="lead"] .cat-opt > span:first-of-type::after { content: " GB"; font-weight: 500; } /* The price check chips carry the same dot as the pills in the table. */ :root[data-look="banner"] .cat-facet[data-facet="check"] .cat-opt > span:first-of-type::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--text-3); } :root[data-look="banner"] .cat-facet[data-facet="check"] .cat-opt:has(input[value="unusual"]) > span:first-of-type::before { background: var(--warn); } :root[data-look="banner"] .cat-facet[data-facet="check"] .cat-opt:has(input[value="low"]) > span:first-of-type::before { background: var(--good); } :root[data-look="banner"] .cat-facet[data-facet="check"] .cat-opt:has(input[value="high"]) > span:first-of-type::before { background: var(--down); } :root[data-look="banner"] .cat-facet[data-facet="check"] .cat-opt:has(input:checked) > span:first-of-type::before { box-shadow: 0 0 0 1.5px #fff; } /* -- seller history: filled tracks, a real thumb, tidy number boxes */ :root[data-look="banner"] .cat-min { padding: 2px 0 12px; } :root[data-look="banner"] .cat-min + .cat-min { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 0; } :root[data-look="banner"] .cat-min > label { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; } :root[data-look="banner"] input.f-min-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--btn) 0, var(--btn) var(--fill, 0%), var(--border) var(--fill, 0%)); } :root[data-look="banner"] input.f-min-track::-webkit-slider-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--btn); box-shadow: 0 2px 6px rgba(14, 40, 80, .3); transition: transform .12s ease; } :root[data-look="banner"] input.f-min-track::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 2px solid var(--btn); box-shadow: 0 2px 6px rgba(14, 40, 80, .3); } :root[data-look="banner"] input.f-min-track:active::-webkit-slider-thumb { transform: scale(1.12); } :root[data-look="banner"] .cat-min-ends { font-size: 11px; color: var(--text-3); margin-top: 6px; } :root[data-look="banner"] .cat-min-row { gap: 8px; margin-top: 8px; } :root[data-look="banner"] .cat-min-row input[type="number"], :root[data-look="banner"] .cat-range input { height: 32px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface); border: 1px solid var(--border); } :root[data-look="banner"] .cat-min-row input[type="number"]:focus, :root[data-look="banner"] .cat-range input:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px var(--accent-dim); background: var(--bg-elev); } :root[data-look="banner"] .cat-min-hint { font-size: 12px; color: var(--text-3); } /* -- listing price: two boxes and a dash */ :root[data-look="banner"] .cat-range { gap: 8px; padding: 0 0 14px; } :root[data-look="banner"] .cat-range input { flex: 1 1 0; width: 0; min-width: 0; } :root[data-look="banner"] .cat-range > span { color: var(--text-3); } /* ================================================================ phones + tablets */ @media (max-width: 62rem) { :root[data-look="banner"] .cat-layout { grid-template-columns: minmax(0, 1fr); } :root[data-look="banner"] .cat-side { position: static; max-height: none; } :root[data-look="banner"] .cat-side-head { position: static; } :root[data-look="banner"] .cat-opt { padding: 9px 10px; font-size: 14px; } :root[data-look="banner"] .cat-facet > summary { padding: 15px 0; font-size: 14.5px; } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt { padding: 8px 13px; font-size: 13.5px; } :root[data-look="banner"] .cat-opt input[type="checkbox"] { width: 20px; height: 20px; } :root[data-look="banner"] .cat-find input { height: 40px; font-size: 15px; } } @media (max-width: 40rem) { :root[data-look="banner"] .brand-tag { display: none; } :root[data-look="banner"] .brand-wm-white { height: 25px; } :root[data-look="banner"] .cat-title { font-size: 1.5rem; } :root[data-look="banner"] .mode-toggle { width: 36px; height: 36px; } } /* ================================================================ orange, where it earns it The rule stays the same: orange marks the ONE thing that matters at that spot, and never carries a meaning green, red or amber already own. Added: - today's point on the price chart, the point the whole chart is about; - focus on the two search boxes, the inputs people type into most; - the count of filters that are on, and the sorted column's arrow; - small "section" labels (the eyebrow over the chart); - a link's underline on hover. */ :root[data-look="banner"] .ph-chart .now-dot { fill: var(--orange); stroke: var(--bg-elev); stroke-width: 2.5; } :root[data-look="banner"] .ph-chart .now-halo { fill: var(--orange-dim); } :root[data-look="banner"] .ph-eyebrow { color: var(--orange-ink); letter-spacing: .08em; } :root[data-look="banner"] #f-text:focus { box-shadow: 0 0 0 3px rgba(255, 138, 31, .55), 0 10px 24px -14px rgba(8, 30, 70, .8); } :root[data-look="banner"] .cat-find input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-dim); } :root[data-look="banner"] .cat-side-head h4[data-n]::after { background: var(--orange); color: #3a1c00; } :root[data-look="banner"] .cat-grid .gh.sorted .arw { color: var(--orange-ink); opacity: 1; } :root[data-look="banner"] .ph-more:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ================================================================ phones One pass for the whole page at phone width, judged by use, not looks: every tap target at least 40px, every text box 16px (iOS zooms the page on focus below that), sort and filters reachable with a thumb, and nothing that only works on hover. */ /* Sort: phones have no headers to tap. Hidden on desktop, where they do. */ :root[data-look="banner"] .cat-sort { display: none; } /* Price-check explanations, shown on tap (mobile.js). */ .chk-tip { position: absolute; z-index: 300; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow); } .chk-tip b { font-weight: 700; } /* Back to top: appears once the list is a screen and a half down. */ .to-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--btn, #1a6dd0); box-shadow: 0 10px 24px -10px rgba(8, 30, 70, .7); } .to-top[hidden] { display: none; } .to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .to-top:focus-visible { outline: 2px solid var(--orange, #ff8a1f); outline-offset: 3px; } @media (min-width: 62.01rem) { .to-top { right: 24px; bottom: 24px; } } .cat-sheet-close, .cat-sheet-foot { display: none; } @media (max-width: 62rem) { :root[data-look="banner"] { --nav-h: 60px; } :root[data-look="banner"] .brand-wm-white { height: 26px; } /* 16px in every box, or iOS zooms the whole page when one is tapped. */ :root[data-look="banner"] #f-text, :root[data-look="banner"] .cat-find input, :root[data-look="banner"] .cat-min-row input[type="number"], :root[data-look="banner"] .cat-range input, :root[data-look="banner"] .ph-pick, :root[data-look="banner"] .cat-sort select { font-size: 16px; } :root[data-look="banner"] #f-text { padding-top: .7rem; padding-bottom: .7rem; } :root[data-look="banner"] .cat-min-row input[type="number"], :root[data-look="banner"] .cat-range input { height: 42px; } /* The bar under the search: sort on the left, the count on the right. */ :root[data-look="banner"] .cat-bar > input { flex-basis: 100%; max-width: none; min-width: 0; } :root[data-look="banner"] .cat-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #fff; } :root[data-look="banner"] .cat-sort select { height: 38px; padding: 0 30px 0 12px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; background-color: rgba(255, 255, 255, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px; border: 1px solid rgba(255, 255, 255, .3); -webkit-appearance: none; appearance: none; } :root[data-look="banner"] .cat-sort select:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .cat-sort select option { color: #0e1b2c; background: #fff; } :root[data-look="banner"] .cat-count { font-size: 13px; } /* The Filters button: full width, 48px, thumb-sized. */ :root[data-look="banner"] .cat-filters-btn { min-height: 48px; font-size: 15px; font-weight: 600; border-radius: 12px; } /* Cards without a price-check column (price history off): condition gets its own column beside the variant instead of sharing the variant's cell, so a long variant ("Phantom Gaming D") ellipsizes before "Open box" rather than printing over it. */ :root[data-look="banner"] .cat-grid .off-row:not(.has-chk) { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "buy ident price" "buy meta cond" "buy title title"; } :root[data-look="banner"] .cat-grid .off-row:not(.has-chk) .gc[data-key="condition"] { grid-area: cond; justify-self: end; white-space: nowrap; } :root[data-look="banner"] .cat-grid .off-row:not(.has-chk) .gc[data-key="variant"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Listing cards: a 44px button, larger supporting text, room between cards. */ :root[data-look="banner"] .cat-buy { min-height: 44px; padding: 0 .65rem; font-size: .8rem; border-radius: 10px; } :root[data-look="banner"] .cat-grid .off-row { padding-top: .75rem; padding-bottom: .75rem; row-gap: .2rem; } :root[data-look="banner"] .cat-grid .gc[data-key="title"] { font-size: .78rem; } :root[data-look="banner"] .cat-grid .gc[data-key="model"] { font-size: .92rem; } :root[data-look="banner"] .chk { padding: .2rem .55rem .2rem .5rem; font-size: .78rem; } /* Every row and control in the sidebar at least 40px tall (measured: the tree rows were 33, the carets 22, the chips 28). */ :root[data-look="banner"] .cat-tree .cat-opt { min-height: 42px; padding: 8px 10px; font-size: 15px; } :root[data-look="banner"] .cat-tog { width: 36px; height: 42px; } :root[data-look="banner"] .cat-tog-sp { width: 36px; } :root[data-look="banner"] .cat-kids { margin-left: 18px; } :root[data-look="banner"] .cat-chip { min-height: 38px; padding: 6px 6px 6px 12px; font-size: 14px; } :root[data-look="banner"] .cat-chip > i { width: 24px; height: 24px; } :root[data-look="banner"] .cat-facet:is([data-facet="lead"], [data-facet="condition"], [data-facet="check"]) .cat-opt { min-height: 40px; } :root[data-look="banner"] .brand { min-height: 44px; } :root[data-look="banner"] .ph-more { min-height: 40px; display: inline-flex; align-items: center; } /* Price history panel. */ :root[data-look="banner"] .ph-seg button { min-height: 38px; padding: 0 .85rem; font-size: .85rem; } :root[data-look="banner"] .ph-pick { height: 42px; } :root[data-look="banner"] .ph-controls .ph-more { min-height: 38px; } /* ---- the filter sheet ---- */ :root[data-look="banner"] .cat-side.is-open { position: fixed; inset: 0; z-index: 200; display: block; margin: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } :root[data-look="banner"] .cat-side.is-open .cat-side-head { position: sticky; top: 0; padding: 14px 16px; gap: 8px; } :root[data-look="banner"] .cat-side.is-open .cat-side-head h4 { font-size: 18px; margin-right: auto; } :root[data-look="banner"] .cat-side.is-open .cat-side-head h4:focus { outline: none; } :root[data-look="banner"] .cat-side.is-open .cat-side-head .reset { min-height: 40px; padding: 0 12px; font-size: 14px; } :root[data-look="banner"] .cat-side.is-open .cat-sheet-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); position: relative; color: var(--text); } :root[data-look="banner"] .cat-sheet-close::before, :root[data-look="banner"] .cat-sheet-close::after { content: ""; position: absolute; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); } :root[data-look="banner"] .cat-sheet-close::after { transform: rotate(-45deg); } :root[data-look="banner"] .cat-side.is-open .cat-sheet-foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg-elev); border-top: 1px solid var(--border); box-shadow: 0 -10px 24px -18px rgba(8, 30, 70, .6); } :root[data-look="banner"] .cat-sheet-show { width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--btn); } :root[data-look="banner"] .cat-sheet-show:active { background: var(--btn-hi); } :root[data-look="banner"] .cat-sheet-show:disabled { background: var(--surface-2); color: var(--text-3); } :root[data-look="banner"] .cat-sheet-show:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* The page underneath stays put while the sheet is open. */ :root.sheet-open, :root.sheet-open body { overflow: hidden; } :root.sheet-open .to-top { display: none; } } @media (max-width: 62rem) and (prefers-reduced-motion: no-preference) { :root[data-look="banner"] .cat-side.is-open { animation: gc-sheet-in .22s cubic-bezier(.2, .8, .2, 1); } } @keyframes gc-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* A mode switch changes every colour in one frame rather than letting each transition fade at its own speed. */ :root.mode-switching *, :root.mode-switching *::before, :root.mode-switching *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { :root[data-look="banner"] * { transition: none !important; } } /* ================================================================ disclosure, footer, plain pages The affiliate line sits at the top of the listings (catalog-table.html): it has to be readable beside the links and on a phone without scrolling, so it is quiet but never small or faint. The footer and the four plain pages (About, How it works, Privacy, Contact) reuse the band and the white panel: a title with the orange full stop, prose underneath. */ :root[data-look="banner"] .cat-disclose { flex: 1 0 100%; margin: 0; font-size: .84rem; line-height: 1.5; color: #fff; /* 4.6:1 on the band */ } :root[data-look="banner"] .cat-disclose a { color: #fff; text-decoration: underline; white-space: nowrap; } :root[data-look="banner"] .site-foot { border-top: 1px solid var(--border); padding: 28px 0 40px; background: var(--bg); } :root[data-look="banner"] .site-foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 32px; } :root[data-look="banner"] .site-foot-note { margin: 0; max-width: 62ch; font-size: .84rem; line-height: 1.55; color: var(--text-3); } :root[data-look="banner"] .site-foot-links { display: flex; flex-wrap: wrap; gap: 4px 6px; } :root[data-look="banner"] .site-foot-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--text-2); text-decoration: none; } :root[data-look="banner"] .site-foot-links a:hover { color: var(--accent); background: var(--hover); } :root[data-look="banner"] .site-foot-links a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .page-band { background: var(--band-bottom); padding: 30px 0 92px; } :root[data-look="banner"] .page-title { margin: 0; color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; } :root[data-look="banner"] .page-title::after { content: "."; color: var(--orange); } :root[data-look="banner"] .page-title-q::after { content: none; } /* White down to just above the question mark's dot, orange below. The text is painted from the background, which only reaches the edge of the mark's box, and the glyph stands taller and wider than one em: the padding grows the box to take all of it in (the first version clipped the hook's top, Nick, Nov 2) and the negative margin keeps the line where it was. The cut is measured from the top of the em box, so the pad is added back. */ :root[data-look="banner"] .q-mark { --q-pad: .3em; display: inline-block; line-height: 1; padding: var(--q-pad) .12em; margin: calc(-1 * var(--q-pad)) -.12em; background: linear-gradient(to bottom, #fff 0 calc(var(--q-pad) + var(--q-cut, .705) * 1em), var(--orange) calc(var(--q-pad) + var(--q-cut, .705) * 1em)); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-look="banner"] .page-lede { margin: .45rem 0 0; max-width: 60ch; font-size: 1.05rem; color: #fff; opacity: .92; } :root[data-look="banner"] .page-main { margin-top: -64px; margin-bottom: 56px; } :root[data-look="banner"] .page-panel { max-width: 780px; padding: 30px 36px 34px; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow); } :root[data-look="banner"][data-mode="light"] .page-panel { border-color: transparent; } :root[data-look="banner"] .page-panel h2 { margin: 1.9rem 0 .5rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); } :root[data-look="banner"] .page-panel > :first-child { margin-top: 0; } :root[data-look="banner"] .page-panel p, :root[data-look="banner"] .page-panel li { max-width: 66ch; font-size: 1rem; line-height: 1.7; color: var(--text-2); } :root[data-look="banner"] .page-panel p { margin: 0 0 .9rem; } :root[data-look="banner"] .page-panel strong { color: var(--text); font-weight: 700; } :root[data-look="banner"] .page-panel a, :root[data-look="banner"] .cat-disclose a { text-underline-offset: 3px; } :root[data-look="banner"] .page-panel a { color: var(--accent); } :root[data-look="banner"] .page-panel a:hover, :root[data-look="banner"] .cat-disclose a:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; } :root[data-look="banner"] .page-list { margin: .4rem 0 1rem; padding-left: 1.2rem; } :root[data-look="banner"] .page-list li { margin: 0 0 .55rem; padding-left: .2rem; } :root[data-look="banner"] .page-list li::marker { color: var(--accent); } :root[data-look="banner"] .page-mail { margin-bottom: 1rem; } :root[data-look="banner"] .page-mail a { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; } /* The way out of an error page (error.html). */ :root[data-look="banner"] .page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.4rem 0 0; } :root[data-look="banner"] .page-panel a.page-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--btn); color: #fff; font-weight: 700; text-decoration: none; } :root[data-look="banner"] .page-panel a.page-btn:hover { background: var(--btn-hi); } :root[data-look="banner"] .page-panel a.page-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .page-panel a.page-btn-quiet { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--border); } :root[data-look="banner"] .page-panel a.page-btn-quiet:hover { background: var(--hover); } @media (max-width: 40rem) { :root[data-look="banner"] .page-band { padding: 22px 0 80px; } :root[data-look="banner"] .page-panel { padding: 22px 18px 24px; } :root[data-look="banner"] .page-main { margin-top: -60px; } } /* The buying pages' links (_nav.html, GROWTH_PREVIEW only): a quiet strip under the nav, scrolling sideways on a phone rather than wrapping. */ .tools-bar { background: var(--bg-elev); border-bottom: 1px solid var(--border); } .tools-bar-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; } .tools-bar-inner::-webkit-scrollbar { display: none; } .tools-bar a { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 650; color: var(--text-2); text-decoration: none; white-space: nowrap; } .tools-bar a svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .85; } .tools-bar a:hover { background: var(--surface-2); color: var(--text); } .tools-bar a[aria-current="page"] { background: var(--accent-dim); color: var(--accent); } .tools-bar a[aria-current="page"] svg { opacity: 1; } .tools-bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Listings: all of them, or the deals among them. A switch inside the tab, at the bar's far end, so it reads as one place with two views. */ .tools-sub { flex: none; display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--surface-2); } .tools-bar .tools-sub a { padding: .32rem .8rem; font-size: .84rem; } .tools-bar .tools-sub a[aria-current="true"] { background: var(--btn); color: #fff; } .tools-bar .tools-sub a[aria-current="true"]:hover { background: var(--btn); } /* Discord: a button beside the mode toggle (_nav.html) and one in the footer (_footer.html), both to /discord. Discord's own blurple on hover only, so the header stays in the brand's blue. */ .nav-discord, .foot-discord { display: none; } :root[data-look="banner"] .nav-discord { display: grid; place-items: center; position: relative; z-index: 1; order: 3; margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); transition: background .15s ease, border-color .15s ease; } :root[data-look="banner"] .nav-discord:hover { background: #5865f2; border-color: #5865f2; } :root[data-look="banner"] .nav-discord:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .nav-discord .dc-ico { width: 20px; height: 20px; } /* The two buttons as one group: the nav row's own 22px gap sat between them. */ :root[data-look="banner"] .nav-acts { display: flex; align-items: center; gap: 8px; order: 3; margin-left: auto; flex: none; position: relative; z-index: 1; } :root[data-look="banner"] .nav-acts .nav-discord, :root[data-look="banner"] .nav-acts .mode-toggle { margin-left: 0; } :root[data-look="banner"] .foot-discord { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1rem .6rem .8rem; border-radius: 12px; background: #5865f2; color: #fff; text-decoration: none; box-shadow: 0 8px 20px -12px rgba(88, 101, 242, .9); transition: background .15s ease, transform .15s ease; } :root[data-look="banner"] .foot-discord:hover { background: #4752c4; transform: translateY(-1px); } :root[data-look="banner"] .foot-discord:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } :root[data-look="banner"] .foot-discord .dc-ico { width: 26px; height: 26px; flex: none; } :root[data-look="banner"] .foot-discord span { display: flex; flex-direction: column; line-height: 1.25; } :root[data-look="banner"] .foot-discord b { font-size: .95rem; font-weight: 800; } :root[data-look="banner"] .foot-discord small { font-size: .78rem; opacity: .88; } @media (prefers-reduced-motion: reduce) { :root[data-look="banner"] .foot-discord:hover { transform: none; } }