is EMPTY at first paint — which parked the mountain mid-screen and then shoved it down the instant content landed, on every single load. Reserving a viewport while empty starts the footer below the fold, so it lands once instead of sliding past the reader. The router holds the outgoing page's height on top of this (app.js routeTo), so a soft navigation doesn't move it at all. */ body > main:empty { min-height: 100vh; min-height: 100dvh; } /* fixed height, and it must not be squeezed by a tall main */ body > footer.site { flex: none; } /* The mountain waits for the page it sits under. Every page is a shell its script fills, so for the first beat of a load the footer has nothing above it — it sat mid-screen and was then shoved down as content landed, which was the single largest layout shift in the app. Held invisible until the page says it has rendered (app.js marks .page-ready from revealView), it simply fades in where it belongs: its position is already final, so nothing the reader can see ever moves. */ body > footer.site { opacity: 0; } html.page-ready body > footer.site { opacity: 1; transition: opacity .4s ease .05s; } @media (prefers-reduced-motion: reduce) { html.page-ready body > footer.site { transition: none; } } ::selection { background: var(--ink); color: var(--paper); } a { color: var(--ink); } /* ---------- page frame ----------------------------------------------------- Every page used to roll its own

: nine containers across the app with four different side paddings (14/20/28), five measures (520/680/700/720/ 1040/1080) and four top drops (0/6/24/28). Moving between Badges, Quests and Messages, the text shifted left and right and started at a different height each time. Worse, only .wrap ever read env(safe-area-inset-*), so eight pages ran under the notch in landscape. So the frame is four numbers, declared once. A page chooses a MEASURE and nothing else; the gutter, the drop and the tail are not its business. */ :root { --gutter: 28px; /* side margin — header, content and footer share the line */ /* 26, matching the margin a section bar's own tabs sit on — so the first thing you read starts at the same height whether the page carries that bar or not. At 40 a page without one (Quests, Messages, Account) began 14px lower than the Badges tabs beside it in the nav, which read as the pages not lining up with each other. The phone already agreed on 26. */ --drop: 26px; /* chrome to the first thing on the page */ --drop-sub: 22px; /* …when a section sub-bar already sits between them */ --tail: 90px; /* last thing on the page to the mountain */ --measure-tool: 520px; /* one focused job: capture, locate, sign-in */ --measure-read: 680px; /* a column of prose, rows, or messages */ --measure-wide: 1080px; /* a board: catalogs, the queue, the studio */ /* the status bar / Dynamic Island, as a value SCRIPT can read: CSS gets env() directly, but a popover positioned from JS has to clamp against it too, and getComputedStyle can't see an env() that was never assigned */ --sat: env(safe-area-inset-top); } @media (max-width: 720px) { :root { --gutter: 20px; --drop: 26px; --drop-sub: 16px; --tail: 64px; } } /* The gutter is the app's left edge, and the header, the content and the footer all start on it. max() rather than a plain value so a notched phone in landscape pushes content clear instead of running under the cutout. */ .wrap, body > main { margin-left: auto; margin-right: auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .wrap { max-width: var(--measure-wide); } /* The drop and the tail belong to

, not to whatever happens to be first inside it — that is how four different pages ended up four different heights. A page with a sub-bar above it drops less: the bar has already spent the space, and .has-subnav is set synchronously in the head of exactly the four pages that carry one, so the smaller drop is there at first paint. (app.js renderSubnav re-checks it on every soft nav — the head script cannot run again, and the class must not follow you onto a page with no bar.) */ body > main { /* A main that names no measure of its own takes the wide one. Without this it runs the full viewport, and any .wrap nested inside it then centres itself in a WIDER column than the header's .wrap — which put the studio's content a gutter to the left of the wordmark above it. */ max-width: var(--measure-wide); padding-top: var(--drop); padding-bottom: var(--tail); } html.has-subnav body > main { padding-top: var(--drop-sub); } /* …and a .wrap nested INSIDE main is a column, not the frame — the frame is already on

, so taking the gutter twice puts that page's content at double everyone else's. */ body > main .wrap { padding-left: 0; padding-right: 0; } /* …and nothing that lands at the top of a page adds to that drop. One rule instead of chasing every .qq-head / .login-panel / .section-head that set its own — including pages whose

holds a single wrapper (home, badge). */ body > main > :first-child, body > main > :only-child > :first-child { margin-top: 0; } /* …except a whole-page empty state, which is meant to float down the page. One float for all of them, rather than 120 here and 24 or 40 there. */ body > main > .empty:first-child { margin-top: 120px; } /* small lowercase letterspaced label — the system's only "label" voice */ .label, .kicker, .chip, .coords, .reqs-h, .when, .err, .empty { font-size: 12px; letter-spacing: 0.12em; text-transform: lowercase; font-weight: 500; } /* bold text carries the accent */ b, strong { color: var(--accent); } ol li { margin-bottom: 1.4em; } div > li, ul li { list-style-type: none; margin-bottom: 1.4em; } /* ---------- header ---------- */ header.site { /* no rule under it — the bar's own fill and blur already separate it from whatever scrolls beneath */ position: sticky; top: 0; z-index: 20; /* sit the sticky bar below the Dynamic Island / status bar; the blurred background extends up under it */ padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); } header.site .wrap { /* named, because the two controls at the right end subtract it back out to land on the bar's own rhythm — and it is not the same number on a phone */ --row-gap: 18px; display: flex; align-items: center; gap: var(--row-gap); padding-top: 16px; padding-bottom: 16px; /* the content row, RESERVED: the bar ships empty in every page's markup and is filled by renderChrome after first paint, so without this every page began 36px short and dropped its whole content the moment the header appeared */ min-height: 36px; } /* the mark: a spark alive inside the device disc */ /* THE FULL BAR HEIGHT: 68px = the wrap's 16px padding, its ~36px content row, and 16px again. The negative margins cancel that padding so the spark spans the bar edge to edge WITHOUT making it taller — anything less leaves the mark floating in the middle of a bar built around something else. */ .mark { width: 68px; height: 68px; flex: none; margin-top: -16px; margin-bottom: -16px; /* pulls the wordmark in against the 18px wrap gap. Negative margin rather than a smaller gap, because that gap also spaces the bell and burger on the right and they are fine as they are. The spark's glow fades out well before the canvas edge, so the optical gap is wider than the measured one. */ margin-right: -10px; } .mark svg, .mark img, .mark canvas { width: 100%; height: 100%; display: block; } .wordmark { font-weight: 600; font-size: 23px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--ink); text-decoration: none; } .wordmark em { color: var(--brick); font-style: normal; } /* ONE rhythm down the right side of the bar: pill to pill, pill to the notification disc, disc to the burger — all 12px. It was 8 between the pills and 18 to everything after them, so the group read as two clusters that happened to be near each other. 12 is the pill gap, a little opened up. The two elements after this nav each cancel part of the header row's own 18px gap to land on the same number (see .nav-bell / .nav-burger). */ nav.site-nav { margin-left: auto; display: flex; gap: var(--nav-gap, 12px); } /* ONE pill, both bars. Desktop wore underlined text and the phone wore pills — the same three destinations in two different clothes, and the desktop version was the one that didn't look like the rest of the app. */ nav.site-nav a, nav.quicknav a { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 15px; border-radius: 999px; /* The outline wears the section's colour BEFORE you get there, held at 60% so the bar reads as three quiet hues and the one you're in is the only thing at full strength. The count chips already sit in these exact colours (.nc-badges / .nc-quests / .nc-msgs), so a pill now matches its own chip instead of framing it in grey. */ border: 1px solid color-mix(in srgb, var(--pill, var(--ink-faint)) 60%, transparent); background: var(--surface); color: var(--ink-soft); text-decoration: none; font-size: 13px; letter-spacing: 0.06em; font-weight: 500; white-space: nowrap; transition: background-color .18s, border-color .18s, color .18s; } /* hover takes that same hue to full — the rung between "not here" and "here" */ nav.site-nav a:hover, nav.quicknav a:hover { color: var(--ink); border-color: var(--pill, var(--ink-faint)); } /* Each section owns a colour: outlined in it always, filled with it when you are in that section. Declared once per destination as --pill/--pill-ink, so a single rule paints every copy of the nav (inline bar, phone pills) and adding a section is two custom properties rather than another selector in three places. */ [data-nav="badges"] { --pill: var(--leaf); --pill-ink: #14200b; } [data-nav="quests"] { --pill: var(--accent); --pill-ink: var(--on-accent); } [data-nav="messages"] { --pill: var(--sky); --pill-ink: #05121f; } [data-nav="klic"] { --pill: var(--berry); --pill-ink: #1e0c16; } nav.site-nav a.active, nav.quicknav a.active { background: var(--pill, var(--accent)); border-color: var(--pill, var(--accent)); color: var(--pill-ink, var(--on-accent)); } /* the count chip inverts on a filled pill, or it vanishes into it */ nav.site-nav a.active .nc, nav.quicknav a.active .nc { background: var(--pill-ink, var(--on-accent)); color: var(--pill, var(--accent)); } /* nav counters ride INLINE on their own items: green in-progress badges beside "Badges", orange open quests beside "Quests". */ /* NO left margin. Every container that carries one of these is a flex row with its own `gap`, so a margin here was added ON TOP of it — 6 + 7 = 13px between a word and its count, which read as the disc drifting away from the label it belongs to. The gap owns the spacing now, at 5px, and it is the same 5 on the lens pills below (which are not flex, so those keep a margin). */ .nc { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; vertical-align: 2px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; /* digits share a width, so 9 -> 10 doesn't nudge the label beside it */ font-variant-numeric: tabular-nums; transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .25s ease, min-width .25s ease; } .nc[hidden] { display: none; } /* THE SAME DISC BESIDE A TAB, where the type is 20–28px rather than a nav pill's 13. At the nav's 18px it read as a small thing floating over the word: too light for the type it belongs to, and centred on the CAP band when the eye reads a word by its x-height — which is what put it visibly high. So it grows with the tab and drops the couple of pixels that set it level with the bulk of the word. `top` rather than `transform`: .nc.counting owns the transform (the waiting disc's shrink), and a translate here would win on specificity and cancel it. */ .section-head .tab .nc { min-width: 22px; height: 22px; font-size: 12.5px; position: relative; top: 2px; } .lens-tab .nc { min-width: 19px; height: 19px; font-size: 11.5px; position: relative; top: 1.5px; } /* no signal, and what's waiting because of it — quiet, but never hidden */ .offline-chip { margin-left: auto; flex: none; white-space: nowrap; font-size: 11px; letter-spacing: 0.1em; text-transform: lowercase; font-weight: 600; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; } .offline-chip.is-offline { color: var(--accent); border-color: var(--accent-mute); } .offline-chip + .nav-bell { margin-left: 12px; } /* Waiting for its number: the circle is already there, empty and quiet, so the count arrives INTO a shape that was always on the page rather than appearing from nothing and shoving its neighbours along. */ .nc.counting, .pill-n.counting { color: transparent; background: var(--line); transform: scale(.82); opacity: .7; } /* the settle when the number lands */ .nc.landed, .pill-n.landed { transform: scale(1); opacity: 1; } .nc-quests { background: var(--accent); color: var(--on-accent); } .nc-badges { background: var(--leaf); color: #14200b; } .nc-review { background: var(--brick); color: #000; } /* lead: items waiting to review */ /* unread messages — blue now, the section's own colour, so the three discs read as one set that differ only in hue. (It was accent, matching the bell and the count on a conversation row; the bell keeps that, since it isn't a section.) */ .nc-msgs { background: var(--sky); color: #05121f; } /* The nothing-waiting state: the same disc, carrying a dark slate dash instead of a count (app.js refreshMsgCount). Quieter than the near-black a count wears — 2.8:1 on the blue against the count's 5.6 — because it is a mark that should read without asking for attention. The 1px of BOTTOM padding is a half-pixel lift, not spacing. Geometric centre is not optical centre here: a bar sitting dead on the middle of a circle reads as sinking in it, so this puts the dash's ink a pixel above centre (8.0 of 18) where it looks level. In a centred grid a 1px pad moves the content half its width, hence 1 for half a pixel. */ .nc-msgs.nil { color: #33475c; padding-bottom: 1px; } .nav-panel .nc { vertical-align: 3px; } /* ---------- mobile menu: burger + slide-in panel from the right ---------- */ /* On EVERY width now, not just phones: it carries Account, Spark and Log out — the things that are about you rather than about a section — and those left the inline bar so the bar is only the three places you go. */ /* NO auto margin here on a desktop: nav.site-nav already claims the free space, and a second auto on the burger split the difference — pills stranded in the middle of the bar with the burger away at the edge. They travel as one group at the right now. The phone puts the auto back, because there the inline nav is hidden and nothing else is pushing. */ .nav-burger { display: flex; flex: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 9px; /* back to the bar's 12 from the row's 18, AND back by its own 9px of left padding — so the gap you SEE, to the first bar rather than to the button's box, matches the one before the disc. The padding stays for the tap target; only the optical spacing is corrected. */ margin-left: calc(var(--nav-gap, 12px) - var(--row-gap, 18px) - 9px); background: none; border: 0; cursor: pointer; } .nav-burger i { display: block; height: 2px; background: var(--ink); } .nav-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .nav-scrim.open { opacity: 1; pointer-events: auto; } .nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 49; width: min(78vw, 300px); display: flex; flex-direction: column; padding: calc(34px + env(safe-area-inset-top)) 28px 28px; background: var(--surface); border-left: 1px solid var(--line-strong); transform: translateX(100%); transition: transform 0.28s ease; } .nav-panel.open { transform: translateX(0); } .nav-panel a, .nav-panel .nav-out { font-family: var(--font); font-size: 22px; font-weight: 600; text-align: left; color: var(--ink-soft); text-decoration: none; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; } .nav-panel a.active { color: var(--accent); } .nav-panel a:hover, .nav-panel .nav-out:hover { color: var(--ink); } /* Leaving is not a destination — it reads as the one thing here that undoes something, and it sits last with no rule under it. */ .nav-panel .nav-out { color: var(--ink-faint); border-bottom: 0; margin-top: 6px; } .nav-panel .nav-out:hover { color: var(--clay); } /* mobile-only quick-switch; the inline nav covers this on wider screens */ nav.quicknav { display: none; } @media (max-width: 720px) { nav.site-nav { display: none; } /* the phone's push lives with the .nav-bell rules further down — a @media block up here adds no specificity and loses to them on source order */ nav.quicknav { display: flex; gap: 8px; padding: 10px 20px; /* RESERVE THE FILLED HEIGHT. The element ships empty in every page's markup and app.js fills it — so without this it paints as a ~21px strip and then grows to ~56px, shoving the page down exactly like the injected version did. Matching heights means first paint and filled paint are the same layout. */ min-height: 56px; align-items: center; /* Centred — but `safe` centring, declared after the plain one so older engines still get something. With plain `center` an overflowing row pushes its FIRST item off the scrollable start, where it cannot be reached; `safe` falls back to flex-start exactly when that would happen. Three short pills will not overflow a phone today, but a fourth section or a long word would. */ justify-content: center; justify-content: safe center; /* one scrollable line rather than wrapping, same as .section-head below */ overflow-x: auto; scrollbar-width: none; background: var(--paper); } nav.quicknav::-webkit-scrollbar { display: none; } /* the pill itself is shared with nav.site-nav above — only the strip that carries them is phone-only now */ header.site .wrap { --row-gap: 12px; } .wordmark { white-space: nowrap; } footer.site { height: 200px; margin-top: 48px; } footer.site .caption { left: 16px; bottom: 14px; } footer.site .wrap { right: 16px; bottom: 14px; } /* catalog tabs: one scrollable line instead of wrapping off-screen */ .section-head { flex-wrap: nowrap; overflow-x: auto; } .section-head .tab { white-space: nowrap; flex: none; } .section-head h2 { white-space: nowrap; } /* the section bar itself sits a point smaller on a phone — it grew a fourth tab (View · Review · Photos · Manage) and is the widest row on the page */ nav.subnav .section-head .tab { font-size: 27px; } } /* The signed-out marketing hero and its product-shot spark lived here. Both went with the page they were on: signed out never reaches the catalog now, so there was no visitor left to show them to. */ /* author `display` (on .btn, .tab…) overrides the UA [hidden] rule, so make the `hidden` attribute authoritative everywhere — otherwise hidden buttons/tabs still render (e.g. the lead-only "manage badges" button) */ [hidden] { display: none !important; } .kicker { color: var(--brick); } /* ---------- sections ---------- */ .section-head { display: flex; align-items: baseline; gap: 16px; margin: 56px 0 0; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; } .section-head h2 { font-weight: 600; font-size: 28px; letter-spacing: 0; text-transform: lowercase; } /* unified chip: dark-gray pill with light text. The section-head count is the same pill, so every count across the app matches it. */ .pill, .section-head .count { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; letter-spacing: 0.12em; text-transform: lowercase; font-weight: 600; color: var(--ink); background: #26221c; padding: 3px 11px; } /* colored variants */ .count.green, .pill.green { background: var(--leaf); color: #14200b; } .count.orange, .pill.orange { background: var(--accent); color: var(--on-accent); } .count.light, .pill.light { background: #3d3527; } /* ---------- lens bar: the puck's badge header, on the web ---------- Two labelled pill groups spread across one row (BADGES · TRACKS), each with its name + in-progress count above a snug row of pills. Mirrors menu.c's bd_build_tabs so the device and the site read as one control. */ .lens-bar { display: flex; flex-direction: column; gap: 20px; margin: 0; } /* Badges / Tracks as a tab level, one step quieter than the subnav's own View·Manage·Review above it. Phone-only — the media query switches it on and hides the group not chosen; desktop has the room for both groups at once. */ .lens-tabs { display: none; } /* No underline on the selected one — full-strength ink against the others' 45% is the whole signal, the same way the section bar above marks its own. */ .lens-tab { font: inherit; font-size: 20px; font-weight: 600; line-height: 1; background: none; border: 0; padding: 5px 0; cursor: pointer; color: var(--ink-soft); opacity: 0.45; } .lens-tab.active { color: var(--ink); opacity: 1; } /* the two lens groups share the top row, side by side on the left */ .lens-groups { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; } .lens-group { display: flex; flex-direction: column; gap: 14px; } /* THE SAME NAME AT THE SAME SIZE, whichever way the bar is folded. On a phone these names ARE the tab level (.lens-tab, 20px); on a desktop they stand over their own pill row instead — and they were a 12px uppercase kicker there, which read as a different, smaller kind of thing on each screen and as a different thing again from the tab level on Quick Quests. One level, one size, everywhere: 20px, sentence case as authored, full ink (nothing here is the unchosen one — both groups are on screen). */ .lens-label { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink); } /* each tab pill carries a count: neutral by default, green on Working (in progress), orange on Earned (finished). On a filled active pill the count takes the pill's own ink. The Working pill wears the green identity active. */ /* the count is a little circle, like the nav menu counts: neutral / green (working) / orange (earned). On a filled active pill it inverts to a light chip so it stays legible. */ .lens-pill .pill-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; /* no margin — the pill is a flex row now and its `gap` sets this, exactly as .nc's does in the nav bar */ padding: 0 5px; vertical-align: 2px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #3d3527; color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1), background-color .25s ease, min-width .25s ease; } /* Never display:none while a count is still unknown — the pill would resize under the reader when it arrived. Hidden is reserved for a KNOWN zero, and even that collapses on its own transition rather than vanishing. */ .lens-pill .pill-n[hidden] { display: none; } /* the waiting disc, restated at this specificity: `.lens-pill .pill-n` above sets a colour and would otherwise win the tie against `.pill-n.counting` */ .lens-pill .pill-n.counting { color: transparent; background: var(--line); transform: scale(.82); opacity: .7; } .lens-pill.working .pill-n { background: var(--leaf); color: #14200b; } .lens-pill.earned-lens .pill-n { background: var(--accent); color: var(--on-accent); } .lens-pill.working.active { background: var(--leaf); border-color: var(--leaf); color: #14200b; } /* on a filled active pill the circle goes dark with the state color as the number */ .lens-pill.active .pill-n { background: #17130c; color: var(--ink); } .lens-pill.working.active .pill-n { color: var(--leaf); } .lens-pill.earned-lens.active .pill-n { color: var(--accent); } .lens-pills { display: flex; gap: 5px; } /* THE SAME PILL AS THE NAV BAR'S, to the pixel — metrics, padding, fill, border and the 5px to its count. It was its own shape (14px type, 11/13 padding, a different surface and a min-width that never bound) which made it read as a heavier, squarer relative of the thing at the top of the page rather than the same control one level down. inline-flex matters as much as the numbers: these are built as `Active `, and outside a flex row that source whitespace RENDERS — so the label sat ~9px off its disc where the header's sat at 5, which is the gap that looked wrong. As a flex item the trailing space is trimmed and `gap` is the whole story. */ .lens-pill { /* no line-height override: `font: inherit` already brings the body's, which is what makes the nav pill 36px tall. Pinning it to 1 here left these two pixels shorter than the bar above — same padding, different box. */ font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 15px; cursor: pointer; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; transition: background .15s, color .15s, border-color .15s; } .lens-pill:hover { color: var(--ink); border-color: var(--ink-faint); } .lens-pill.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .lens-pill[hidden] { display: none; } /* PHONE. This block MUST stay below the base lens rules above: @media adds no specificity, so up in the header's own breakpoint block these rules tied with the defaults and lost on source order. */ @media (max-width: 720px) { /* the lens bar folds to one group at a time: the names leave their pill rows and become the tab level, and only the chosen group's pills stay */ .lens-bar { gap: 14px; } .lens-tabs { display: flex; gap: 22px; } .lens-label { display: none; } .lens-bar[data-group="bd"] .lens-group[data-group="tr"], .lens-bar[data-group="tr"] .lens-group[data-group="bd"] { display: none; } /* three pills plus their counts can just miss on a narrow phone — same scrollable line the quicknav and the catalog tabs use, rather than a wrap */ .lens-pills { overflow-x: auto; scrollbar-width: none; } .lens-pills::-webkit-scrollbar { display: none; } .lens-pill { flex: none; white-space: nowrap; } } /* ========== uniform badge display system ========== One congruent look for every badge collection. A .bd-coll is grid (lg/md/sm) or list (lg/md); each .bd-item reflows between a centered card and a coin·title·progress row. --coin drives the coin size per mode. */ .bd-coll.grid { display: grid; gap: 4px 2px; grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr)); /* the catalog lattice's plain `.grid` further down also matches this element and gives it 96px of bottom margin — which inside a track level is 96px of empty box under two coins, and everywhere else is a gap nobody asked for. The template-columns there loses to this rule on specificity; the margin had nothing to lose to. */ margin-bottom: 0; } /* In a grid the coin is 3/4 of ITS COLUMN, measured rather than guessed at — --col still decides how many columns, and the coin fills three quarters of whatever that works out to. A fixed pixel size cannot do this: the same 150px that is 3/4 of a 200px desktop column is 42% of the single 353px column a phone gives Large, which is the case that looked wrong. */ /* Large means large: the column is 300 rather than 200, which on a desktop column is three badges across at ~256px each — double the 128 it drew before this pass, and the reason to have a Large at all. */ .bd-coll.grid.lg { --coin: 150px; --col: 300px; } .bd-coll.grid.md { --coin: 114px; --col: 152px; } .bd-coll.grid.sm { --coin: 81px; --col: 108px; } .bd-coll.grid .coin-wrap { width: 75%; } /* Large takes 80 rather than 75. It is the size somebody picks to LOOK at the art, so it gets the extra; the smaller two are scanning sizes and want the breathing room more than the pixels. */ .bd-coll.grid.lg .coin-wrap { width: 80%; } .bd-coll.grid .bd-coin { width: 100%; } .bd-coll.list { display: flex; flex-direction: column; } .bd-coll.list.lg { --coin: 120px; } .bd-coll.list.md { --coin: 96px; } .bd-coll.list.sm { --coin: 74px; } .bd-item { display: flex; color: inherit; text-decoration: none; cursor: pointer; border: 0; background: none; font: inherit; -webkit-appearance: none; appearance: none; } .bd-item .coin-wrap { position: relative; flex: none; } .bd-coin { display: block; width: var(--coin); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line-strong); } .bd-coin.started { box-shadow: 0 0 0 2px var(--leaf); } .bd-coin.done { box-shadow: 0 0 0 2px var(--accent); } .bd-coin img, .bd-coin svg { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .bd-title { transition: color 0.18s; } .bd-sub { display: none; } /* the one-line summary shows in list view only */ .bd-item:hover .bd-title { color: var(--accent); } .bd-item.sel .bd-title { color: var(--accent); font-weight: 600; } /* popover-picked */ /* track-only bd-items: the "+ add badge" elective and empty quota slots */ .bd-coin.add, .bd-coin.slot { display: grid; place-items: center; box-shadow: none; border: 2px dashed var(--line-strong); background: transparent; color: var(--ink-soft); font-size: calc(var(--coin) * 0.42); line-height: 1; } .bd-item.add-badge { cursor: pointer; } .bd-item.add-badge:hover .bd-coin.add { border-color: var(--accent); color: var(--accent); } .bd-item.placeholder { cursor: default; } .bd-item.placeholder .bd-title { color: var(--ink-soft); } .bd-prog { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; } .bd-prog.started { color: var(--leaf); } /* in progress */ .bd-prog.earned { color: var(--accent); text-transform: lowercase; } /* finished */ /* GRID: centered vertical card, progress rides the coin */ /* 22px of vertical padding was most of the space between two rows of badges, on top of the grid's own gap — the coins now carry the cell and the padding is only what keeps a title off its neighbour. */ .bd-coll.grid .bd-item { flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 10px 6px; } .bd-coll.grid .bd-prog { display: none; } .bd-coll.grid .bd-text { align-self: stretch; text-align: center; } .bd-coll.grid.lg .bd-title { font-size: 17px; font-weight: 600; } .bd-coll.grid.md .bd-title { font-size: 15px; font-weight: 600; } .bd-coll.grid.sm .bd-title { font-size: 12.5px; font-weight: 500; } /* LIST: coin at the left, everything else STACKED beside it — title, summary, then the count under them both. Nothing is trimmed. Title and summary were each one nowrap line ending in an ellipsis, which on a phone meant most badges showed half a title and a summary cut mid-word — the two pieces of text that say what the badge IS. The row grows to fit them instead. Grid rather than a flex row, because the count has to sit UNDER the summary while the coin stays beside all of it, and the coin is the markup's first child. It spans both rows; everything else stacks in the second column. */ .bd-coll.list .steps-pill { display: none; } /* not on the coin in list */ .bd-coll.list .bd-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 4px; padding: 12px 6px; border-bottom: 1px solid var(--line); } .bd-coll.list .coin-wrap { grid-row: 1 / span 2; align-self: center; } .bd-coll.list .bd-text { grid-column: 2; display: flex; flex-direction: column; gap: 2px; } .bd-coll.list .bd-prog { grid-column: 2; justify-self: start; } .bd-coll.list .bd-title { text-align: left; font-weight: 600; } .bd-coll.list .bd-sub { display: block; font-size: 12.5px; color: var(--ink-faint); text-align: left; } .bd-coll.list.lg .bd-title { font-size: 22px; } .bd-coll.list.lg .bd-sub { font-size: 16px; color: var(--ink-soft); } .bd-coll.list.md .bd-title { font-size: 19px; } .bd-coll.list.md .bd-sub { font-size: 15px; color: var(--ink-soft); } .bd-coll.list.sm .bd-title { font-size: 16px; } .bd-coll.list.sm .bd-sub { font-size: 13.5px; color: var(--ink-soft); } /* (no margin-left:auto any more — the count sits under the summary, not out at the far right of the row) */ /* the per-lens display controls (adventure page) */ .disp-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; } .seg button { font: inherit; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; background: transparent; color: var(--ink-soft); border: 0; cursor: pointer; } .seg button + button { border-left: 1px solid var(--line); } .seg button.on { background: var(--accent); color: var(--on-accent); } .seg button:disabled { opacity: 0.3; cursor: default; } /* The gear rides the END of the pill row, not the top corner of the bar: it changes what the pills show, so it belongs on their line. It is the last item in .lens-groups — pushed right by its own auto margin and bottom-aligned against the group boxes, which is what makes it level with the pills whether or not their names are above them (36px control, 36px pill). In flow, so nothing has to be positioned against the bar or measured in pixels. */ .lens-tools { position: relative; /* the settings menu hangs off it */ margin-left: auto; align-self: flex-end; display: flex; align-items: center; gap: 10px; } /* The type filter: a word and a chevron, no pill. The native