/* ========================================================================== Air Market - v3 / the "Browse ▾" mega menu. (REDESIGN.md §11.3) OWNER: the mega-menu builder. Pairs with assets/js/v3/mega.js. Styles [data-v3-slot="mega"] (#v3MegaPanel), its four columns, the footer row, the scrim, and the #/browse list page the panel's rows route to. SCOPE. Every rule below is scoped under :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]), so v0, v1 and v2 render byte-identically. v4 inherits the mega menu unchanged (V4-SPEC.md §2.3 - only the detail page reorders), so it takes the same gate as v3 rather than a private clause. Nothing here restyles a v2 class: the panel reuses .card-grid and appCard on the /browse page as-is, and the featured tile builds its own 16:10 frame rather than borrowing .a-shot, so v2's card language is never reached into. HOUSE RULES. No hardcoded hex - colour, spacing, radius and type all come from tokens.css or the --v3-* aliases in store-v3-core.css. Cursors go through var(--cur-*), never a bare keyword. Counts are quantities, so they are Manrope + tabular-nums; JetBrains Mono appears nowhere in this file. Links sit at --v3-ink / --text-2 rather than --color-text-link, which fails AA at 3.68:1. LAYERING. The panel is a child of #topbar (z-index --v3-bar: 60, its own stacking context) and drops out of it via position:absolute; top:100% - which lands it under tier 3 too, because the filter bar is the last child of the bar and the panel is out of flow. The scrim is a child at --v3-z-scrim (55), i.e. below the whole bar, so the bar stays lit and clickable while everything under it dims. Air_DS dialogs are z-index 100 and still win over both. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE SCRIM. A token colour at reduced opacity rather than an rgba() literal - tokens.css ships no alpha ramp, and `opacity` keeps the surface token as the single source of the hue. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-scrim { position: fixed; inset: 0; z-index: var(--v3-z-scrim); background: var(--color-surface-inverse); opacity: .34; cursor: var(--cur-arrow); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-scrim[hidden] { display: none; } /* -------------------------------------------------------------------------- 2. THE PANEL. `display` is stated on the base rule, so [hidden] has to be re-asserted at higher specificity or the UA's `[hidden]{display:none}` would lose. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-slot="mega"] { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--v3-z-mega); background: var(--v3-paper); border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); box-shadow: var(--shadow-md); /* Never taller than what is left of the viewport; --v3-bar-total is substituted here, so it already reflects the condensed heights. Tier 3 is subtracted unconditionally (integration): the panel hangs off #topbar's bottom edge, which on a catalogue route sits --v3-filterbar-h lower, and the old sum ignored that - on a short viewport the last rows would have fallen below the fold with no way to scroll to them. Off a catalogue route this now under-estimates by the same 48px, which only ever makes the panel shorter than it could be. */ max-height: calc(100vh - var(--v3-bar-total) - var(--v3-filterbar-h) - var(--space-16)); overflow-y: auto; overflow-x: hidden; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-slot="mega"][hidden] { display: none; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-slot="mega"].is-open { animation: v3MegaIn 140ms ease; } @keyframes v3MegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-inner { max-width: var(--v3-max); margin: 0 auto; padding: var(--space-32) var(--v3-gutter) var(--space-24); display: grid; /* Four columns, weighted: the job column is the marquee one and carries the longest labels; the featured tile needs enough width for a readable 16:10 preview. minmax(0,…) everywhere so a long label can never push the panel into horizontal scroll. */ grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 0.95fr); gap: var(--space-32); align-items: start; } /* mega.js drops a facet column the catalogue cannot fill (no job lanes, or no trust facet that narrows anything) rather than printing a heading over nothing, so the panel can come back with three columns or two. The track list is weighted by hand above, so each case gets its own: the widths a dropped column gave up are shared out, never left as a hole. */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-inner--cols3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-inner--cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } /* -------------------------------------------------------------------------- 3. COLUMNS AND HEADS. Sentence case, not uppercase-letterspaced: REDESIGN §10 called the small-caps treatment the second-loudest "technical" cue after mono, and v2 already reverted its section heads for the same reason. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-head { font-size: 12px; font-weight: 600; letter-spacing: .1px; color: var(--text-3); padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid var(--v3-line); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-list { list-style: none; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- 4. THE ROW. Icon · label + blurb · count. The count on every row is the Klarna / GitHub / Unity facet discipline REDESIGN §2 called out and the store still does nowhere else. It is a quantity, so tabular-nums in Manrope - never mono, which this repo reserves for identifiers a reader compares character by character. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-12); padding: var(--space-8); border-radius: var(--radius-sm); color: var(--v3-ink); text-decoration: none; cursor: var(--cur-pointer); transition: background-color var(--v3-ease); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row:hover { background: var(--v3-field); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; background: var(--v3-field); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-ico { display: flex; color: var(--text-3); margin-top: 1px; } /* Teal marks verification and nothing else (REDESIGN §3), so exactly one row - "Checked by AIR" - earns it. The other trust facets are true but are not the verification claim, and diluting the colour would cost it its meaning. */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row.is-verified .v3-mega-ico { color: var(--v3-verif); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-txt { min-width: 0; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-label { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; line-height: 1.25; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-blurb { display: block; font-size: 12px; line-height: 1.35; color: var(--text-3); margin-top: 2px; text-wrap: pretty; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; /* --text-2, not --text-3: measured in-browser at 4.39:1 against the action-secondary chip it sits on, which fails AA for 12px text. --text-3's documented 4.81:1 is against WHITE, and this count is not on white. */ color: var(--text-2); background: var(--color-action-secondary); border-radius: var(--radius-full); min-width: 24px; padding: 2px var(--space-8); text-align: center; line-height: 16px; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row:hover .v3-mega-count { background: var(--color-action-secondary-hover); color: var(--text-2); } /* -------------------------------------------------------------------------- 5. THE FEATURED COLUMN. Retail puts a merchandised image in the mega menu (FARFETCH, Canva, A24); ours is proof-of-output - the same preview art the v2 card leads with (api.shotSVG), not a decorative icon. One anchor, so it is reachable by keyboard in a single stop. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat { display: block; text-decoration: none; color: var(--v3-ink); border: 1px solid var(--v3-line); border-radius: var(--radius-lg); overflow: hidden; padding-bottom: var(--space-12); cursor: var(--cur-pointer); transition: border-color var(--v3-ease), transform var(--v3-ease); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat:hover { border-color: var(--color-border-default); transform: translateY(-2px); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-shot { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--v3-field); border-bottom: 1px solid var(--v3-line); overflow: hidden; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-shot .art-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-name { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.2px; margin: var(--space-12) var(--space-12) 0; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-sub { display: block; font-size: 12px; line-height: 1.4; color: var(--text-3); margin: 3px var(--space-12) 0; text-wrap: pretty; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-verif { display: flex; align-items: center; gap: var(--space-4); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--v3-verif); margin: var(--space-8) var(--space-12) 0; } /* "Not checked yet": teal means verified and nothing else, so both the line and the Air mark inside its badge drop to the neutral tertiary colour. */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-verif--none { color: var(--text-3); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-verif--none .air-shield-mark g { fill: currentColor; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat-note { font-size: 11px; line-height: 1.4; color: var(--text-3); margin-top: var(--space-8); } /* -------------------------------------------------------------------------- 6. THE FOOTER ROW. Categories folded into Browse ▾ (REDESIGN §11.3's nav merge table), so the panel has to keep a path to the Categories page - plus one to the whole catalogue, which nothing else in the chrome offers. -------------------------------------------------------------------------- */ :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-foot { border-top: 1px solid var(--v3-line); background: var(--v3-field); } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-list--inline { max-width: var(--v3-max); margin: 0 auto; padding: var(--space-8) calc(var(--v3-gutter) - var(--space-8)); display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); list-style: none; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-list--inline .v3-mega-row { align-items: center; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-list--inline .v3-mega-row:hover { background: var(--v3-paper); } /* -------------------------------------------------------------------------- 7. THE /browse LIST PAGE the rows land on. Not here either. The rows link at #/browse/, and both that view and its .v3-browse-lede live in filterbar.js / store-v3-filters.css - one route, one owner (see mega.js's BROWSE note). This section is a signpost, not a rule set: the page itself reuses .page / .page-title / .card-grid from the inherited v2 language and needs nothing from this file. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 8. NARROWER VIEWPORTS. v3 is scoped to >= 1024px on purpose (REDESIGN §11.4 risk 3 - responsive is its own pass). This is not that pass; it only stops the four columns from crushing before the hamburger work lands. -------------------------------------------------------------------------- */ @media (max-width: 1180px) { :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24) var(--space-32); } } /* -------------------------------------------------------------------------- 9. Motion. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) #topbar [data-v3-slot="mega"].is-open { animation: none; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-row, :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat { transition: none; } :root:is([data-ui="v3"],[data-ui="v4"],[data-ui="v5"]) .v3-mega-feat:hover { transform: none; } }