/* ========================================================================== TITANS COLLECTIBLES Rebuilt when the site became a price guide. The stylesheet had reached 209KB, most of which styled a card product that no longer exists, pack openings, tier ladders, a portrait studio, an animated opening sequence. What remains is the design system, the navigation, the legal pages, the marketplace and the guide. ========================================================================== */ @font-face { font-family: "Instrument Serif"; src: url("fonts/instrumentserif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("fonts/instrumentserif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 400 800; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :root { color-scheme: light; /* DAYLIGHT. The owner retired the night-mode look for an open sky, the token NAMES survive (ink is still the ground, bone still the text) so every rule in this sheet re-themes without being touched; only the VALUES swapped sides of the day. The animated sky itself is painted by body::before / body::after below. */ --sky-zenith: #7FACD8; --sky-mid: #B0CFEA; --sky-horizon: #E4F0FA; --sky-glow: #F7EAD6; --ink: #FFFFFF; --ink-2: #F3F8FC; --ink-3: #E9F2F9; --line: #C6D6E5; --line-2: #A7BFD4; /* Frosted glass, now white over blue rather than black over black. Alpha is still set for legibility against the brightest sky state. */ --panel: rgba(255, 255, 255, 0.9); --panel-line: rgba(130, 160, 195, 0.55); --panel-body: #2C3F55; --bone: #16293E; --bone-2: #3D5168; --bone-3: #42556E; /* Gold darkened to antique brass: the old #C6A15B read at 2.4:1 on daylight, which is decoration, not text. "hi" is now the DARKER of the pair, because on a light ground emphasis means more ink, not more light. */ --gold: #7A5E1F; --gold-hi: #6B521C; /* Dark text for gold-filled chips and buttons, whatever the theme does. */ --on-gold: #241D0E; --vis: #A67716; --vis-hi: #7C5A10; --deal: #2E7D64; --deal-hi: #1F5C49; --display: "Instrument Serif", Georgia, serif; --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --t-display: clamp(2.6rem, 6.4vw, 5.75rem); --t-title: clamp(2rem, 4.3vw, 3.6rem); --t-head: clamp(1.45rem, 2.6vw, 2.15rem); --t-lede: clamp(1.0625rem, 1.3vw, 1.25rem); --t-small: 0.875rem; --t-label: 0.6875rem; --t-micro: 0.625rem; --max: 1400px; --gutter: clamp(1.25rem, 4.5vw, 4rem); --section-y: clamp(5rem, 10vw, 8.5rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 68px; --bar-h: 34px; /* Everything that has to clear the fixed header clears the whole header, not just the nav, the status bar sits above it. */ --top-h: calc(var(--nav-h) + var(--bar-h)); } *, *::before, *::after { box-sizing: border-box; } /* The ground colour lives on so can be transparent and let the fixed sky show through behind every section. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); } /* ---- The sky -------------------------------------------------------------- The whole site sits under one animated daytime sky, fixed to the viewport so every page and every scroll position shares the same weather. Two layers, both pure CSS, no script, no images, nothing to load: body::before the air. A gradient taller than the viewport, drifting slowly, with a warm glow low in the east corner. body::after the clouds. Soft white radial blobs in three repeating bands, each band a different size and speed, so the drift never visibly loops. The animations move background-position only, compositor work, no layout, no paint storms, and stop entirely for anyone who asked for reduced motion, leaving a perfectly good still sky. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(40% 70% at 0% 40%, rgba(127,172,216,0.16), rgba(127,172,216,0) 70%), radial-gradient(40% 70% at 100% 65%, rgba(127,172,216,0.14), rgba(127,172,216,0) 70%), #ffffff; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(closest-side at 30% 30%, rgba(127,172,216,0.5) 25%, rgba(127,172,216,0) 75%), radial-gradient(closest-side at 55% 68%, rgba(127,172,216,0.34) 20%, rgba(127,172,216,0) 72%), radial-gradient(closest-side at 70% 25%, rgba(127,172,216,0.46) 25%, rgba(127,172,216,0) 75%), radial-gradient(closest-side at 42% 70%, rgba(127,172,216,0.3) 20%, rgba(127,172,216,0) 72%); background-size: 240px 420px, 200px 520px, 230px 460px, 190px 560px; background-position: left 0, left 0, right 0, right 0; background-repeat: repeat-y; animation: clouds-drift 160s linear infinite; } @keyframes sky-breathe { from, to { opacity: 1; } } @keyframes clouds-drift { from { background-position: left 0, left 0, right 0, right 0; } /* Each column rises by its own tile height, so all four loop seamlessly at their own speeds. */ to { background-position: left -420px, left -520px, right -460px, right -560px; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } body { margin: 0; background: transparent; color: var(--bone); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; /* clip, not hidden: hidden turns the body into a scroll container, and a scroll container swallows position:sticky for every descendant, which is exactly how the marketplace filter bar silently stopped sticking. clip cuts overflow identically without creating a scroll container. */ overflow-x: clip; } /* `[hidden]` is a browser default, and ANY author rule setting display beats it, so `.combo__panel { display: flex }` left every dropdown permanently open on screen while `el.hidden` read true in script. This makes the attribute mean what it says, everywhere, once. */ [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } button, input, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--gold); color: #fff; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 62% at 22% -8%, rgba(232, 180, 92, 0.13), transparent 60%), radial-gradient(95% 58% at 84% 4%, rgba(111, 168, 148, 0.10), transparent 58%); } /* ---------- Primitives ---------- */ .wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .label { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-2); } .label--gold { color: var(--gold); } .micro { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-3); } .display { font-family: var(--display); font-weight: 400; line-height: 0.92; letter-spacing: -0.032em; text-wrap: balance; } .display em { font-style: italic; color: var(--gold); } .lede { font-size: var(--t-lede); line-height: 1.55; color: var(--bone-2); max-width: 52ch; letter-spacing: -0.008em; } .tabular { font-variant-numeric: tabular-nums; } /* Available to a screen reader, absent from the page. Used where the visual hierarchy is obvious but the heading outline would otherwise skip a level. */ .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .btn { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.9rem 1.5rem; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--line-2); background: transparent; color: var(--bone); cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); } .btn:hover { border-color: var(--gold); color: var(--gold-hi); } .btn--fill { background: var(--gold); border-color: var(--gold); color: var(--on-gold); } .btn--fill:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--on-gold); } .btn:disabled { cursor: not-allowed; border-color: var(--line); color: var(--bone-3); background: transparent; } .btn--fill:disabled { background: var(--line); border-color: var(--line); } .btn__arrow { transition: transform 0.4s var(--ease); } .btn:hover:not(:disabled) .btn__arrow { transform: translateX(4px); } /* A button that carries its own status line. Kept inside the button so the status travels with the control rather than floating near it. */ /* Reads as a control at a glance: a thick gold rule and a lit ground, so it is not mistaken for a line of text sitting next to the filled button. */ .btn--stacked { flex-direction: column; gap: 0.35em; line-height: 1.1; border: 2px solid var(--gold); color: var(--gold-hi); background: rgba(198, 161, 91, 0.12); } .btn--stacked:hover { border-color: var(--gold-hi); background: rgba(198, 161, 91, 0.22); color: #FFF6E0; } .btn__soon { font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--gold); } .btn--stacked:hover .btn__soon { color: var(--gold-hi); } .tlink { display: inline-block; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 0.3em; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 0.5s var(--ease-out), color 0.4s var(--ease); } .tlink:hover { color: var(--gold-hi); background-size: 100% 1px; } /* ========================================================================== Navigation ========================================================================== */ /* ---------- Status bar ---------- */ /* Height is auto so the line can wrap on a phone, and is measured back into --bar-h by script, everything below offsets against it. */ .topbar { position: fixed; inset: 0 0 auto; z-index: 62; display: grid; place-items: center; padding-block: 0.55rem; background: #16120A; border-bottom: 1px solid rgba(198, 161, 91, 0.34); } .topbar__text { display: flex; align-items: center; gap: 0.6rem; padding-inline: var(--gutter); text-align: center; text-wrap: balance; font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); line-height: 1.5; } .topbar__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .nav { position: fixed; inset: var(--bar-h) 0 auto; z-index: 60; height: var(--nav-h); display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background 0.5s var(--ease), border-color 0.5s var(--ease); } .nav.is-stuck { background: var(--ink); backdrop-filter: none; border-bottom-color: var(--line); } .nav__inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* The wordmark is the word, set in the display serif. No icon competing with it. */ .mark { display: flex; align-items: baseline; gap: 0.6rem; white-space: nowrap; } .mark__name { font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--bone); } .mark__sub { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-2); } .nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.25rem); } .nav__link { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-2); transition: color 0.35s var(--ease); } .nav__link:hover { color: var(--bone); } .nav__link[aria-current="page"] { color: var(--gold); } /* A nav item that carries a status under its name. The label keeps the row's baseline; the status hangs below it without moving anything else. */ .nav__link--stacked { position: relative; display: inline-block; } .nav__soon { position: absolute; left: 0; top: calc(100% + 0.32em); white-space: nowrap; font-size: 0.5625rem; letter-spacing: 0.14em; color: var(--gold); } .menu__soon { display: inline-block; vertical-align: middle; margin-left: 0.6em; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .nav__toggle { display: none; justify-self: end; border: 0; background: none; cursor: pointer; padding: 0.5rem 0; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); } /* ========================================================================== Section rail Every section is named at all times. The one you are in is largest; hovering any of them grows it, so the list reads as a place you are standing in. ========================================================================== */ .sidenav { /* Sizing lives in tokens so narrower windows shrink the rail instead of losing it. */ --rail-w: 150px; --rail-w-on: 190px; --rail-name: 0.625rem; --rail-name-on: 0.8125rem; --rail-pad: 1.5rem; /* nine entries now, keeps the stack inside a short viewport */ position: fixed; z-index: 45; left: clamp(0.75rem, 2.4vw, 2.5rem); top: 50%; transform: translateY(-50%); pointer-events: auto; } .sidenav[hidden] { display: none; } /* A spine down the left, a numbered entry per section, and a rule that extends and brightens on the one you are in. Every name stays legible; the current section is simply larger. */ /* The spine sits at x=0 and each rule starts on it, so they meet as clean T junctions. Text is inset by its own padding and never touches either line. */ /* The rail floats over a sky that runs from near-black to near-white across the page, so grey-on-transparent was legible for about half of it. It carries its own dark plate now, and the names are gold: one colour that holds against every state the sky passes through. */ .sidenav__list { position: relative; padding: 0.5rem 0.75rem 0.5rem 0; background: #FBFDFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(198, 161, 91, 0.22); border-left: 0; } .sidenav__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent); } .sidenav__link { display: block; width: var(--rail-w); padding: var(--rail-pad) 0 var(--rail-pad) 1.15rem; border-bottom: 1px solid rgba(198, 161, 91, 0.16); transition: width 0.5s var(--ease-out), border-color 0.4s var(--ease); } .sidenav__item:last-child .sidenav__link { border-bottom: 0; } /* Names are never truncated, the rule is sized to hold the longest label at its largest size, so nothing ever resolves to an ellipsis. */ .sidenav__name { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--rail-name); letter-spacing: 0.16em; text-transform: uppercase; color: #C9AE79; white-space: nowrap; overflow: visible; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); transition: font-size 0.4s var(--ease-out), color 0.35s var(--ease); } .sidenav__item.is-active .sidenav__link { width: var(--rail-w-on); border-bottom-color: var(--gold); } .sidenav__item.is-active .sidenav__name { font-size: var(--rail-name-on); color: #FFF0CC; } .sidenav__link:hover { width: var(--rail-w-on); border-bottom-color: var(--gold); } .sidenav__link:hover .sidenav__name { font-size: var(--rail-name-on); color: #FFF6E0; } .menu { position: fixed; inset: 0; z-index: 55; background: var(--ink-2); display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: var(--top-h) var(--gutter) var(--gutter); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease-out); } .menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; } .menu__link { font-family: var(--display); font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.2; letter-spacing: -0.03em; } .menu__link:hover { color: var(--gold); } /* ========================================================================== Views ========================================================================== */ .view { position: relative; z-index: 1; display: block; } .view[hidden] { display: none; } .view.is-entering { animation: viewIn 0.65s var(--ease-out) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .band { padding-block: var(--section-y); } .band + .band { border-top: 1px solid var(--line); } /* ========================================================================== Legal pages Documents, not marketing: one column, generous measure, and no decoration competing with the text. The one visual device is the placeholder, every value only the company can supply is marked, so an unfinished document cannot be mistaken for a finished one at a glance. ========================================================================== */ /* Clears the fixed banner and nav, the same way every other full page does. */ .legal { padding-block: calc(var(--top-h) + clamp(2rem, 4vw, 3.25rem)) clamp(3rem, 7vw, 6rem); } .legal__wrap { max-width: 78ch; } .legal__back { display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .legal__meta { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-3); margin-top: 0.9rem; } .legal__lede { margin-top: 1rem; max-width: 58ch; } /* The draft warning. Deliberately the loudest thing on the page, these documents are not finished and must not read as though they are. */ .legal__flag { margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.4vw, 1.6rem); background: rgba(198, 161, 91, 0.09); border: 1px solid rgba(198, 161, 91, 0.42); border-left: 3px solid var(--gold); color: #E7DCC6; } .legal__flag p { font-size: var(--t-small); line-height: 1.6; } .legal__flagTitle { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 0.4rem; } .legal__sec { margin-top: clamp(2rem, 4.5vw, 3.25rem); } .legal__sec h2 { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--bone-hi); margin-bottom: 0.7rem; line-height: 1.2; } .legal__sec p, .legal__list li { color: var(--bone); font-size: var(--t-body); line-height: 1.7; } .legal__sec p + p { margin-top: 0.85rem; } .legal__list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; } .legal__list li { position: relative; padding-left: 1.1rem; } .legal__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; background: var(--gold); } .legal__note { margin-top: 1rem; color: var(--bone-2); font-size: var(--t-small); } /* The lawful-basis table. Wide content gets its own scroller so the page body never moves sideways on a phone. */ .legal__table { width: 100%; margin-top: 1.1rem; border-collapse: collapse; font-size: var(--t-small); display: block; overflow-x: auto; } .legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--bone); min-width: 14ch; } .legal__table th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); border-bottom-color: var(--gold); } /* Contact addresses, one card per subject. */ .legal__cards { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); } .legal__card { padding: clamp(0.9rem, 2vw, 1.3rem); background: var(--panel); border: 1px solid var(--panel-line); border-left: 2px solid var(--gold); display: flex; flex-direction: column; gap: 0.45rem; } .legal__addr { font-family: var(--mono); font-size: var(--t-small); word-break: break-all; } .legal__cardBody { color: var(--bone-2); font-size: var(--t-small); line-height: 1.6; } /* Anything only the company can fill in. Marked rather than blank, so the gap is visible in a screenshot and in a print-out, not just in the source. */ /* A filter that looks like a filter. The chips elsewhere are underlined words in a row, which reads as a heading followed by links, you cannot tell it is a control until you click one. In the shop they are pills inside a labelled, bordered group: the group says what you are choosing, and the filled pill says what is chosen. */ .filter--group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.55rem 0.75rem 0.6rem; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, 0.02); } .filter--group .filter__legend { color: var(--bone-2); } .filter__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .filter--group .chip { padding: 0.32rem 0.7rem; border: 1px solid var(--line); border-bottom-width: 1px; border-radius: 999px; color: var(--bone-2); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .filter--group .chip:hover { color: var(--bone-hi); border-color: var(--bone-3); } .filter--group .chip[aria-pressed="true"] { color: var(--on-gold); background: var(--gold); border-color: var(--gold); } /* On the mine ground the group needs a warmer edge than the neutral panel line. */ #view-packs .filter--group { border-color: rgba(198, 161, 91, 0.3); background: rgba(20, 13, 6, 0.5); } #view-packs .filter--group .chip { border-color: rgba(198, 161, 91, 0.34); color: #CBB89B; } #view-packs .filter--group .chip:hover { color: #FFF3DE; border-color: rgba(232, 193, 115, 0.7); } #view-packs .filter--group .chip[aria-pressed="true"] { color: #201404; background: var(--gold); border-color: var(--gold); } /* The board runs four of these side by side, so once they are bordered the row needs its own spacing, the old gap was sized for text separated by air. */ .filters:has(.filter--group) { gap: 0.75rem; align-items: stretch; } /* Sort is one of the four now, not a trailing control. The auto margin shoved it onto a line of its own and right-aligned it there, which read as a stray box rather than the last filter in the set. */ .filter--group.filter--sort { margin-left: 0; justify-content: space-between; } .filter--group .select { width: 100%; padding-block: 0.3rem; } /* Cool edges on the field, warm ones down the mine. The chip colours have to be re-stated at this specificity because the view-level rules that set the page's type colour are id-scoped and would otherwise win. */ #view-market .filter--group { border-color: rgba(138, 158, 226, 0.3); background: rgba(10, 14, 34, 0.5); } #view-market .filter--group .chip { border-color: rgba(138, 158, 226, 0.34); color: #C2CBEA; } #view-market .filter--group .chip:hover { color: #FFFFFF; border-color: rgba(180, 198, 255, 0.7); background: rgba(140, 164, 255, 0.12); } #view-market .filter--group .chip[aria-pressed="true"] { color: #0B1020; background: var(--gold); border-color: var(--gold); } #view-market .filter--group .filter__legend { color: #AEB9DC; } /* Wraps. These were nowrap so a placeholder like [company number] stayed on one line, but a long one in a narrow column then pushed the whole document sideways on a phone, 153px of horizontal scroll on the privacy notice. A placeholder breaking across two lines costs nothing; a page that scrolls sideways costs the reader everything. */ .ph { color: #F0C97A; background: rgba(198, 161, 91, 0.14); border-bottom: 1px dashed rgba(240, 201, 122, 0.6); padding: 0 0.25em; font-family: var(--mono); font-size: 0.94em; overflow-wrap: anywhere; } .foot__entity { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } /* ========================================================================== Responsive, for the components declared above These have to sit after their own base rules. A media query adds no specificity, so a plain rule written later in the file wins over an earlier `@media` block regardless of the viewport, which is how the opportunity section stayed two columns on a phone. ========================================================================== */ @media (max-width: 1080px) { .shop__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ring svg { max-height: min(46vh, 380px); } } /* The two sign-up forms are the point of this section, so on a short window the ring gives way to them rather than the other way round. Declared here so it sits after the width-based cap above. */ /* The opportunity section carries a diagram and two forms, so it starts giving way earlier than the rest of the page. */ /* 860, not 790. Between those two heights nothing compacted and The Opportunity was a dozen pixels over, a gap in the ladder rather than a section that was too tall. */ @media (max-height: 860px) { .oppLede { font-size: clamp(1rem, min(2vw, 2.7vh), 1.7rem); } .boom { padding: clamp(0.85rem, 1.9vw, 1.3rem); gap: 0.55rem; } .sign { padding-top: 0.7rem; gap: 0.45rem; } .sign__note { min-height: 0; } /* Collections is the tightest section, and on a 720-tall window it was two pixels over, which is enough to fail the fit check and switch snapping off for the whole page. It starts compacting here rather than at 680. */ #sets .head { margin-bottom: clamp(0.5rem, 1.6vh, 1.4rem); } #sets .next { margin-top: clamp(0.6rem, 1.5vh, 1.5rem); padding-top: clamp(0.55rem, 1.3vh, 1rem); } #sets .setcard { padding: clamp(0.7rem, 1.5vh, 1.4rem) clamp(0.85rem, 1.6vh, 1.4rem); } } @media (max-height: 680px) { .ring svg { max-height: min(37vh, 236px); } .boom { padding: 0.75rem 0.9rem; gap: 0.45rem; } .boom__body { line-height: 1.45; } /* The Opportunity is measured with snapping already applied, because turning snapping on is what adds the header clearance that makes it overflow, measuring without it reports a fit that stops being true a frame later. */ #opportunity .head { margin-bottom: 0.6rem; } #opportunity .opp { gap: clamp(0.75rem, 2vw, 1.5rem); } .oppLede { font-size: clamp(0.95rem, min(1.9vw, 2.5vh), 1.5rem); } .oppLede--sub { margin-top: 0.5rem; padding-top: 0.5rem; } .rules { padding-block: 0.6rem 0.7rem; margin-bottom: 0.6rem; } .boom__title { font-size: clamp(0.9rem, min(1.5vw, 2.1vh), 1.2rem); } .sign__row .form__field { padding: 0.5rem 0.7rem; } .sign__note { min-height: 0; } .sign__v { margin-top: 0.15rem; } /* Collections is the tightest section on a short window. Everything here is a size reduction, not a removal, the tiles still say what they said. */ #sets .head { margin-bottom: 0.5rem; } #sets .next { margin-top: 0.6rem; padding-top: 0.55rem; } #sets .next__item { padding: 0.35rem 0.6rem; gap: 0.45rem; } #sets .next__badge { width: 1.4rem; height: 1.4rem; } #sets .setcard { padding: 0.7rem 0.85rem; } } /* The floor. Below this the three tallest sections, Card Types, Collections and The Opportunity, were each a handful of pixels over, and a single section overflowing anywhere switches snapping off for the whole page, so the cost of missing by two pixels is the same as missing by two hundred. */ @media (max-height: 660px) { #types .type__float { height: clamp(2.6rem, 7.4vh, 3.6rem); } #types .type { gap: 0.3rem; } #sets .setcard .logo { max-height: 3.1rem; } #sets .setcard__unlock { gap: 0.3rem; } #sets .setcard__face { width: 2rem; height: 2.6rem; } #sets .setcard { padding: 0.55rem 0.7rem; gap: 0.35rem; } #sets .next__item { padding: 0.28rem 0.5rem; } #sets .next { margin-top: 0.45rem; padding-top: 0.45rem; } #sets .head { margin-bottom: 0.35rem; } .boom { padding: 0.7rem 0.85rem; gap: 0.4rem; } .ring svg { max-height: min(35vh, 214px); } /* The two sign-up forms are most of the Opportunity column's height. Every line of copy stays; the space around it is what gives way. */ .sign { padding-top: 0.5rem; gap: 0.3rem; } .sign__row .form__field { padding: 0.38rem 0.6rem; } .sign__note { line-height: 1.35; } #opportunity .head { margin-bottom: 0.45rem; } #opportunity .opp { gap: 0.7rem; } } /* The rig and the chart stay side by side as long as there are two columns worth of room. Stacking them at 1080 doubled the section's height and pushed it off a screen on a narrow laptop, where two columns still fit fine. */ @media (max-width: 900px) { .opp { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); } .shop__head { grid-template-columns: minmax(0, 1fr); } .shop__trust { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .filter--sort { margin-left: 0; } .shop__count { margin-left: 0; } /* The board folds to two columns, so the terms stack under the name rather than staying right-aligned against an edge that is no longer there. */ .listing__terms { text-align: left; align-items: flex-start; } } @media (max-width: 700px) { .shop { grid-template-columns: minmax(0, 1fr); } .shop__notes { grid-template-columns: minmax(0, 1fr); } .prodcard__stage { min-height: 220px; } .bidbox__row { flex-direction: column; gap: 0.75rem; } .bidbox__clock { text-align: left; } .shop__bar { gap: 0.75rem 1.25rem; } } /* Text inside an SVG scales with the drawing, so on a phone it has to be set larger in viewBox units to survive being shrunk to fit. */ @media (max-width: 560px) { .rg__label { font-size: 15px; letter-spacing: 0.06em; } .rg__halfName { font-size: 22px; } .rg__halfNote { font-size: 13px; } .rg__sealText { font-size: 12px; } .ring svg { max-height: none; } } /* ========================================================================== Opener, once only After the intro has run, every animation belonging to it is switched off and pinned to its finished state. Clicking a section can then only ever scroll. ========================================================================== */ .intro-done .opener { display: none !important; } /* Belt and braces: even if the class were re-applied, the home view cannot replay. */ .intro-done #view-home.is-entering { animation: none !important; opacity: 1; transform: none; } .intro-done .reveal-line > span { animation: none !important; transform: none; } .intro-done .fade-up { animation: none !important; opacity: 1; transform: none; } .intro-done .spread__deal { animation: none !important; opacity: 1; transform: none; filter: none; } .intro-done .bolt { animation: none !important; opacity: 0; } .intro-done .spread__slot::after { animation: none !important; opacity: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal-line > span, .fade-up, .obs { opacity: 1; transform: none; } .tc__tilt { transform: none !important; } /* Nothing may sit behind a delay waiting for an animation that will not play. */ .spread__deal, .bolt, .spread__slot::after { animation-delay: 0s !important; } .bolt, .spread__slot::after, .opener { display: none; } .spread__deal { opacity: 1; filter: none; } .trail::after { transition: none; } .stop__panel { animation: none; } } /* ========================================================================== Phones Three separate problems, all of which only exist on a touch device and none of which show up in a desktop window narrowed to 375px: 1. iOS Safari zooms the whole page when you focus an input whose text is under 16px, and it does not zoom back out. Every field here was 11-13px. 2. Fingers are not cursors. A 33x34 menu button is a miss waiting to happen; the platform guidance is 44px, and the nav toggle was the worst offender because it is the only way into the menu. 3. Notched phones put the status bar and the home indicator over the page. ========================================================================== */ /* --- Safe areas ---------------------------------------------------------- */ /* The fixed banner paints up into the notch and pads its own text down out of it, so the colour goes edge to edge but nothing is ever hidden behind the sensor housing. --top-h has to grow by the same amount, because every snapped section and every page heading offsets against it. */ :root { --top-h: calc(var(--nav-h) + var(--bar-h) + env(safe-area-inset-top, 0px)); } .topbar { padding-top: calc(0.55rem + env(safe-area-inset-top, 0px)); } /* `top` only, the base rule's `inset` shorthand already pins left and right, and adding `inset-block-start: auto` here (its logical alias) cancelled the line above it and dropped the nav off the page entirely. */ .nav { top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); } .wrap, .nav__inner, .topbar__text { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } .foot { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); } /* --- Touch devices ------------------------------------------------------- */ @media (pointer: coarse) { /* 16px is the threshold, not a preference: below it iOS zooms on focus. */ input, select, textarea { font-size: 16px; } .search__field, .select, .form__field, .verify__field { font-size: 16px; } /* Hit areas. Where a control cannot physically be 44px, an inline text link inside a paragraph, it is left alone rather than given padding that would break the line it sits in. */ .nav__toggle { min-width: 44px; min-height: 44px; padding: 0.5rem 0.25rem; } .menu__link { min-height: 44px; display: flex; align-items: center; } .btn, .cartbtn, .chip, .search__clear { min-height: 44px; } .chip { padding-block: 0.5rem; } .filter--group .chip { padding: 0.55rem 0.85rem; } .foot__cols .tlink, .legal__back, .setcard__foot .tlink { min-height: 44px; display: inline-flex; align-items: center; } /* An inline serial inside a sentence cannot be 44px tall without opening up the line it sits in. It gets the hit area anyway, via padding cancelled by an equal negative margin, so the text around it does not move. */ .verify__sample { padding-block: 0.85rem; margin-block: -0.85rem; padding-inline: 0.3rem; margin-inline: -0.3rem; } .rung, .type, .next__item { touch-action: manipulation; } /* The blue flash Safari and Chrome paint over a tapped element fights every colour on the site. The controls have their own pressed states. */ a, button, input, select, .chip { -webkit-tap-highlight-color: rgba(198, 161, 91, 0.18); } /* The card tilt follows a pointer. On a touchscreen there is no pointer to follow, so the transform just sticks wherever the last tap landed. */ .tc__tilt { transform: none !important; } } /* --- Layout at phone widths ---------------------------------------------- */ @media (max-width: 560px) { /* The banner is two lines on a phone. Centre the dot with the first line rather than the middle of the block. */ .topbar__text { align-items: flex-start; } .topbar__dot { margin-top: 0.42em; } /* One product per row, and the 3D objects get room to be seen. */ .shop { grid-template-columns: minmax(0, 1fr); } .legal__cards { grid-template-columns: minmax(0, 1fr); } /* Filter groups go full width so their chips wrap inside a predictable box instead of each group being a different ragged width. */ .filter--group { width: 100%; } .filters:has(.filter--group) { gap: 0.6rem; } /* The footer's four columns stack; two-up wastes the width on labels. */ .foot__cols { gap: 0.6rem; } } /* ========================================================================== The marketplace Statically generated pages, sharing every token, font and control with the hand-written site. They are a different kind of page, a grid of other people's listings rather than our own product, but they have to read as the same company, so nothing here invents a new visual language. ========================================================================== */ :root { --spark-up: #6FA894; --spark-down: #C97F6A; } /* The generated pages have a static header rather than the fixed one the single-page site uses, so content starts below it rather than under it. */ .nav--static { position: sticky; top: 0; background: var(--ink); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } body.mkt { background: var(--ink); } .mktpage, .mktitem { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); } /* ---- Index head ---------------------------------------------------------- */ .mkt__head { max-width: 62ch; } .mkt__lede { margin-top: 1rem; color: var(--bone); } .mkt__disclaim { margin-top: 1rem; font-size: var(--t-small); color: var(--bone-2); } /* ---- Price tiers, as the headline control ------------------------------- "Under $100" is a feature, not a dropdown entry. The cheap end is where most collectors start and it is what makes the index feel alive on a slow day, so it leads. */ /* Tier tiles retired, price ranges are a dropdown filter with counts now. */ .tierchip[aria-pressed="true"] .tierchip__label, .tierchip[aria-pressed="true"] .tierchip__n { color: var(--on-gold); } .tierchip__label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); } .tierchip__n { font-family: var(--display); font-size: 1.5rem; color: var(--gold-hi); } .mkt__tools { margin-top: clamp(1.5rem, 3vw, 2rem); } .mkt__source { margin-top: 1.25rem; color: var(--bone-2); } /* ---- The grid ------------------------------------------------------------ */ .mkt__grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); } .mcard { border: 1px solid var(--panel-line); background: var(--panel); display: flex; } .mcard[hidden] { display: none; } .mcard__link { display: flex; flex-direction: column; width: 100%; } .mcard:hover { border-color: rgba(198, 161, 91, 0.5); } /* Hotlinked from the source, never rehosted, no storage cost, no bandwidth cost, and no question about who owns the photograph. */ .mcard__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); } .mcard__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .mcard:hover .mcard__shot img { transform: scale(1.04); } .mcard__noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--ink-2) 0 10px, var(--ink-3) 10px 20px); } .mcard__tier { position: absolute; left: 0; bottom: 0; padding: 0.3rem 0.6rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.94); color: var(--bone); border-top-right-radius: 8px; } .tier--entry { border-top: 2px solid #6FA894; } .tier--mid { border-top: 2px solid #7FA0C4; } .tier--high { border-top: 2px solid #C6A15B; } .tier--grail { border-top: 2px solid #C97F6A; } .mcard__body { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .mcard__title { font-size: var(--t-small); line-height: 1.4; color: var(--bone-hi); } .mcard__reason { font-size: var(--t-micro); line-height: 1.5; color: var(--bone-2); flex: 1; } .mcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--line); } .mcard__price { font-family: var(--display); font-size: 1.15rem; color: var(--gold-hi); } .mcard__source { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3); } .mkt__empty { margin-top: 2rem; color: var(--bone-2); } /* ---- An item ------------------------------------------------------------- */ .mktitem__back { display: inline-block; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .mktitem__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } /* A plain block, because the gallery inside it now owns its own layout. This was a three-column grid for the old flat strip of four images, which made the whole gallery a single third-width cell and rendered every photograph at a third of its intended size. */ .mktitem__media { display: block; } .mktitem__img { width: 100%; border: 1px solid var(--panel-line); background: var(--ink-2); } .mktitem__noimg { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--bone-3); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; } .mktitem__title { font-size: var(--t-title); margin-top: 0.6rem; line-height: 1.15; } .mktitem__reason { margin-top: 0.9rem; color: var(--bone); font-size: var(--t-body); line-height: 1.6; } .mktitem__note { margin-top: 0.85rem; color: var(--bone-2); font-size: var(--t-small); line-height: 1.65; border-left: 2px solid var(--gold); padding-left: 0.9rem; } .mktitem__pricebox { margin-top: 1.5rem; padding: 1rem 1.15rem; background: var(--panel); border: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; } .mktitem__price { font-family: var(--display); font-size: 2.25rem; color: var(--gold-hi); line-height: 1; } .mktitem__tier { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-2); padding-top: 0.3rem; } .mktitem__go { margin-top: 1.15rem; } .mktitem__disclaim { margin-top: 0.75rem; font-size: var(--t-micro); color: var(--bone-3); line-height: 1.6; } /* ---- The archive state ---------------------------------------------------- The most misleading thing on the site if it is done carelessly. An inferred price is never rendered as a sale, the badge and the wording both carry the distinction, not just one of them. */ .arch { margin-top: 1.5rem; padding: 1rem 1.15rem; background: var(--panel); border: 1px solid var(--panel-line); border-left: 2px solid var(--bone-3); } .arch__line { color: var(--bone); font-size: var(--t-body); line-height: 1.6; } .arch__line strong { color: var(--gold-hi); font-family: var(--display); font-size: 1.2em; } .arch__explain { margin-top: 0.6rem; font-size: var(--t-micro); color: var(--bone-3); line-height: 1.6; } .arch__badge { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.5rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); color: var(--bone-2); } .arch__badge--confirmed { border-color: #6FA894; color: #8FBFAE; } .arch__badge--inferred { border-color: #9A8046; color: #C6A15B; } /* ---- Price history -------------------------------------------------------- */ .mktitem__history { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .spark { width: 100%; height: auto; margin-top: 0.75rem; display: block; } .spark__line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .spark__dot { fill: var(--bone-2); } .spark__gone { fill: none; stroke: var(--bone-3); stroke-width: 1.2; } .spark__legend { margin-top: 0.5rem; display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-micro); color: var(--bone-3); } .spark__thin, .spark__none { margin-top: 0.5rem; font-size: var(--t-micro); color: var(--bone-3); line-height: 1.6; } .mktitem__about { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .mktitem__blurb { margin-top: 0.5rem; color: var(--bone-2); font-size: var(--t-small); line-height: 1.65; } @media (max-width: 860px) { .mktitem__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .mkt__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkt__grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } } /* ---- When the source's photograph has gone --------------------------------- Hotlinking costs nothing and keeps the copyright question simple, but it means we do not control how long a picture lasts. A listing ends, the source drops the file, and the archive page, which stays up forever, would show a broken-image icon. It shows the same woven placeholder an image-less listing gets instead, and says so where there is room to. */ .mcard__shot img.is-broken, .mktitem__img.is-broken { display: block; min-height: 8rem; background: repeating-linear-gradient(135deg, var(--ink-2) 0 10px, var(--ink-3) 10px 20px); border: 1px solid var(--line); /* An with no src is still a replaced element, and the browser draws its own small broken-picture glyph in the corner on top of the background above, so the card ends up showing a placeholder AND an error icon. `content` replaces what a replaced element renders, which suppresses the glyph and leaves the weave clean. */ content: ""; } .mktitem__media.has-broken-image::after { content: "The source no longer serves this photograph."; display: block; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-3); text-align: center; padding-top: 0.4rem; } /* ---- Company, person and tier pages ---------------------------------------- The editorial sits above the grid on every one of these, because the writing is the part a grid cannot supply and the reason the page ranks at all. */ .ent { max-width: 68ch; } .ent__founded { margin-top: 0.5rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); } .ent__blurb { margin-top: 1.1rem; color: var(--bone); font-size: var(--t-body); line-height: 1.7; } .ent__stats { margin-top: 1rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .ent__people { margin-top: 0.75rem; font-size: var(--t-small); color: var(--bone-2); line-height: 1.8; } .ent__section { margin-top: clamp(2rem, 5vw, 3.25rem); } .ent__h2 { font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--bone-hi); } .ent__sub { margin-top: 0.4rem; color: var(--bone-2); font-size: var(--t-small); line-height: 1.6; max-width: 62ch; } .ent__section .mkt__grid { margin-top: 1.25rem; } /* ---- The results archive --------------------------------------------------- The most linkable page here, so the confidence distinction gets real design attention rather than a footnote: the key explains all three states before the table starts, and every row carries both a badge and words. */ .results__key { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; } .results__keyItem { padding: 0.9rem 1rem; background: var(--panel); border: 1px solid var(--panel-line); } .results__keyItem p { margin-top: 0.5rem; font-size: var(--t-micro); color: var(--bone-2); line-height: 1.6; } .results { margin-top: 1.25rem; border-top: 1px solid var(--line); } .results__head, .results__row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 1rem; padding: 0.85rem 0.25rem; align-items: baseline; border-bottom: 1px solid var(--line); } .results__head { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-3); } .results__row:hover { background: rgba(198, 161, 91, 0.06); } .results__title { color: var(--bone-hi); font-size: var(--t-small); line-height: 1.4; } .results__price { font-family: var(--display); font-size: 1.1rem; color: var(--gold-hi); } .results__when { font-family: var(--mono); font-size: var(--t-micro); color: var(--bone-2); } .results__note { display: block; margin-top: 0.3rem; font-size: var(--t-micro); color: var(--bone-3); } /* Titans' own cards on a shared surface. A site-wide banner would be wrong over a real listing someone can buy, so the card says it instead. */ .mcard--ours { border-color: rgba(198, 161, 91, 0.4); } .mcard__ours { position: absolute; right: 0; bottom: 0; padding: 0.3rem 0.55rem; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold); color: var(--on-gold); } @media (max-width: 720px) { .results__head { display: none; } .results__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; } .results__title { grid-column: 1 / -1; } .results__how { grid-column: 1 / -1; } } /* ========================================================================== Marketplace, second pass: the sticky filter bar, grouped cards, the sold strip, and the item page's related-listings modules. The old chip rows grew linearly with the roster, at 104 companies they were most of the viewport. One bar of dropdowns stays one bar at any roster size, and the active choices surface as removable tags underneath, since a closed dropdown hides its own selection. ========================================================================== */ .mbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); padding: 0.65rem 0; margin-bottom: 1.75rem; } .mbar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .mbar__search { flex: 1 1 11rem; min-width: 9rem; background: rgba(240, 247, 252, 0.9); border: 1px solid var(--line); color: var(--bone); font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.55rem 1rem; border-radius: 999px; } .mbar__search:focus-visible { outline: none; border-color: var(--gold); } .mbar__select { appearance: none; -webkit-appearance: none; background: rgba(240, 247, 252, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23C6A15B'/%3E%3C/svg%3E") no-repeat right 0.7rem center; border: 1px solid var(--line); color: var(--bone); font: inherit; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 1.9rem 0.55rem 1rem; border-radius: 999px; cursor: pointer; max-width: 13rem; } .mbar__select:hover, .mbar__select:focus-visible { outline: none; border-color: var(--gold); } .mbar__selects { display: contents; } .mbar__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.55rem; } .mtag { font: inherit; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--gold); background: rgba(198, 161, 91, 0.1); border: 1px solid rgba(198, 161, 91, 0.4); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; } .mtag:hover { background: rgba(198, 161, 91, 0.2); } .mtag--count { color: var(--bone-2); background: transparent; border-color: var(--panel-line); cursor: default; } .mtag--count:hover { background: transparent; } .mtag:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* The daily refresh, made visible. */ .mcard__new { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); padding: 0.22rem 0.5rem; border-radius: 2px; } /* Recently sold, on the way into the grid. Horizontal scroll on purpose, a strip, not a section that pushes the live market below the fold. */ .soldstrip { margin-bottom: 2rem; } .soldstrip__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; } .soldstrip__row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; } .soldcard { flex: 0 0 14rem; text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.02); } .soldcard:hover { border-color: var(--gold); } .soldcard__title { color: var(--bone); font-size: 0.8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 0.45rem; } .soldcard__price { color: var(--gold); font-size: 1rem; margin: 0 0 0.35rem; } .soldcard__meta { display: flex; gap: 0.5rem; align-items: center; margin: 0; font-size: 0.68rem; color: var(--bone-3); } /* Related listings on an item page: compact rows, not another grid. */ .mktitem__module { margin-top: 2rem; } .minilist { display: flex; flex-direction: column; margin-top: 0.6rem; border-top: 1px solid var(--line); } .minirow { display: grid; grid-template-columns: 2.6rem 1fr auto auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line); text-decoration: none; } .minirow:hover .minirow__title { color: var(--gold); } .minirow__img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); background: var(--ink-2); } .minirow__img--none, .minirow__img.is-broken { background: repeating-linear-gradient(135deg, var(--ink-2) 0 6px, var(--ink-3) 6px 12px); content: ""; } .minirow__title { color: var(--bone); font-size: 0.8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .minirow__price { color: var(--gold); font-size: 0.82rem; white-space: nowrap; } .mktitem__modulenote { margin-top: 0.5rem; } @media (max-width: 40rem) { /* On a phone the wrapped bar was four rows and half the viewport when stuck. Search keeps its own full-width row; the five selects share one horizontally scrollable row beneath it, two rows total, always. */ .mbar__inner { gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: none; } .mbar__inner::-webkit-scrollbar { display: none; } .mbar__search { flex: 0 0 100%; } .mbar { padding-top: 0.5rem; padding-bottom: 0.5rem; } .mbar__inner { flex-wrap: wrap; } .mbar__selects { display: flex; gap: 0.4rem; overflow-x: auto; flex: 0 0 100%; scrollbar-width: none; } .mbar__selects::-webkit-scrollbar { display: none; } .mbar__select { font-size: 0.68rem; padding: 0.5rem 1.7rem 0.5rem 0.6rem; flex: 0 0 auto; max-width: none; } .soldcard { flex-basis: 11.5rem; } } @media (prefers-reduced-motion: reduce) { .soldstrip__row { scroll-behavior: auto; } } /* ========================================================================== The searchable filter dropdown. Replaces the native