/** * Trending section styles. * * Lives between the hero and the card list on the homepage. Also used * on the Worker-rendered /trending/ and /trending/YYYY-W##/ pages, * which reuse the same markup shape for consistency. */ .trending { margin: 2rem 0 2.5rem; } .trending__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .trending__heading { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--color-text-primary); } .trending__more { font-size: 0.9rem; color: var(--color-accent); text-decoration: none; white-space: nowrap; } .trending__more:hover, .trending__more:focus-visible { text-decoration: underline; } /* * Flex with justify-content: center so a partial last row (the * homepage shows 3 cards capped, /trending/ shows up to 10) is * centered horizontally rather than left-aligned with empty grid * tracks beside it. Fixed-width cards (240px) preserve uniform * widths across rows; max-width: 100% lets a single column collapse * gracefully on narrow viewports. */ .trending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .trending-card { position: relative; flex: 0 0 240px; max-width: 100%; } /* Phase 3.5A (2026-05-01): the legacy base block (.trending-card > a with display grid + auto-56px-1fr columns) was unreachable — .trending--standalone uses display block, .trending--home uses a 24-56-1fr-auto grid. Both fully override the base. Same for .trending-card__img / __img--none which referenced a class no surface emits (both surfaces use __photo). Source-shape tests in tests/interaction/trending-cohesion.spec.js pin the removal so neither slips back in. Universal anchor styling (background, border, color, text-decoration) stays inline on the modifiers — only 4 lines each, and trying to share via a base selector reintroduces the cascade-vs-override fragility the dead block had. */ .trending-card__rank { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5)); font-size: 0.95rem; min-width: 2ch; text-align: right; } .trending-card__body { display: flex; flex-direction: column; min-width: 0; } .trending-card__name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trending-card__neighborhood { color: var(--color-text-secondary, rgba(255, 255, 255, 0.7)); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Numerals-led /trending/ redesign (2026-05-13). The numeral does the visual work. Three tiers via Playfair Display at three sizes; no coins, no plates, no shimmer. hero #1 gold, clamp(5.5rem, 4rem + 3vw, 8rem) podium #2-3 primary white, clamp(3.75rem, 3rem + 2vw, 5.5rem) list #4-10 dim white (.55), clamp(2.5rem, 2rem + 1.2vw, 3.25rem) Tokens scoped to .trending so the homepage teaser (.trending--home) inherits the shared anchor / photo / hover declarations. The teaser keeps its compact medal-dot treatment (out of scope of this redesign). */ .trending { --trending-photo-radius: 12px; --trending-card-radius: 16px; --trending-list-max-width: 720px; --trending-card-gap: var(--space-4); --trending-focal: center 35%; --trending-hover-transform: translateY(-2px); --trending-hover-shadow: 0 8px 24px rgba(0,0,0,.3); --trending-transition: transform var(--duration-fast) var(--ease-out, ease), box-shadow var(--duration-fast) var(--ease-out, ease); } /* Editorial header: H1 + date subtitle stack vertically. */ .trending--standalone .trending__header { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; } .trending--standalone .trending__heading { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .trending__date-range { margin: 0; color: var(--color-text-tertiary, rgba(255,255,255,.5)); font-size: var(--text-xs); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-transform: uppercase; } /* Single-column list, 720px cap, centered. Rows for #2-#10 sit flush with no inter-row gap — the per-row chrome was the listicle smell. A hairline bottom rule on each
  • does the separation, like NYT/Eater editorial lists. The hero card (#1) gets its own gap below (margin-bottom) so the feature card doesn't fuse to the ruled list. */ .trending--standalone .trending-list { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; max-width: var(--trending-list-max-width); margin: 0 auto; padding: 0; list-style: none; } .trending--standalone .trending-card { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Hairline rule between row entries; last row has no bottom rule. */ .trending--standalone .trending-card[data-rank-tier="podium"], .trending--standalone .trending-card[data-rank-tier="list"] { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .trending--standalone .trending-card:last-child { border-bottom: none; } /* Breathing room between the hero card and the ruled list below. */ .trending--standalone .trending-card[data-rank-tier="hero"] { margin-bottom: 24px; } /* Phase 3.5B (2026-05-01): rules that are line-for-line identical between --standalone and --home live on the shared .trending parent here. The cohesion contract is enforced structurally — neither modifier can drift away from the other for these declarations. The tests/interaction/trending-cohesion.spec.js source-shape walker tolerates either form (per-modifier OR shared-base), so this refactor doesn't loosen the contract. */ .trending .trending-card > a { border-radius: var(--trending-card-radius); background: var(--color-surface-raised, rgba(255,255,255,.04)); border: 1px solid var(--color-border, rgba(255,255,255,.08)); color: var(--color-text-primary); text-decoration: none; transition: var(--trending-transition); } .trending .trending-card > a:hover { background: var(--color-surface-hover, rgba(255,255,255,.07)); transform: var(--trending-hover-transform); box-shadow: var(--trending-hover-shadow); } .trending .trending-card > a:focus-visible { outline: 2px solid var(--color-accent, #30d158); outline-offset: 3px; box-shadow: none; } .trending .trending-card__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--trending-focal); } .trending .trending-card__photo--none { width: 100%; height: 100%; background: var(--color-skeleton, rgba(255,255,255,.04)); } /* ─────────────────────────────────────────────────────────────────────────── */ /* Standalone /trending/ — numerals-led redesign (2026-05-13). */ /* Three tiers via Playfair Display at three sizes; no coins, no plates, */ /* no shimmer. #1 = hero card (photo above body), #2-#10 = 3-col rows */ /* [numeral | square photo | body]. Taglines render on #1-#3 only. */ /* ─────────────────────────────────────────────────────────────────────────── */ .trending--standalone .trending-card > a { display: grid; position: relative; overflow: hidden; align-items: center; } /* Suppress hover translate on the hero card — heroes don't bounce. Subtle border-color shift via the existing surface-hover background is the polite "I'm interactive" cue. */ .trending--standalone .trending-card[data-rank-tier="hero"] > a:hover { transform: none; box-shadow: none; } /* Rows (#2-#10): strip the per-row card chrome (no bg, no border, no radius) so the page reads as one editorial column instead of a stack of pills. The hairline rule on the
  • separates entries. Numeral column is RIGHT-aligned so the ordinal cluster end-anchors against the photo edge with a consistent gap row-to-row — "1ˢᵗ" and "10ᵗʰ" have different widths, and right-align keeps the photo-side cadence steady. Column widened to minmax(96px, 112px) to accommodate "10ᵗʰ" without crowding. */ .trending--standalone .trending-card[data-rank-tier="podium"] > a, .trending--standalone .trending-card[data-rank-tier="list"] > a { grid-template-columns: minmax(96px, 112px) 112px 1fr; gap: 16px; padding: 20px 0; background: transparent; border: none; border-radius: 0; } /* Suppress the shared-anchor hover background — the de-carded rows shouldn't paint a surface on hover; only the photo + a subtle name color shift carry the affordance. */ .trending--standalone .trending-card[data-rank-tier="podium"] > a:hover, .trending--standalone .trending-card[data-rank-tier="list"] > a:hover { background: transparent; box-shadow: none; } .trending--standalone .trending-card[data-rank-tier="podium"] .trending-card__photo-wrap, .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__photo-wrap { position: relative; width: 112px; height: 112px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--color-skeleton, rgba(255,255,255,.04)); } /* Hero (#1): photo above body, full-width card. Numeral floats top-left as the editorial anchor with gold prestige color. */ .trending--standalone .trending-card[data-rank-tier="hero"] > a { grid-template-columns: 1fr; grid-template-areas: "photo" "body"; padding: 0; gap: 0; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__photo-wrap { grid-area: photo; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--color-skeleton, rgba(255,255,255,.04)); } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__body { grid-area: body; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__rank { position: absolute; /* top bumped 16 → 28: the raised "ˢᵗ" suffix extends above the parent's em-box by ~0.55em; a tighter top would clip the suffix at the photo's top edge (anchor carries overflow:hidden so glyph overflow disappears). */ top: 28px; left: 28px; z-index: 2; } /* ── Numerals: Playfair Display, three sizes, three colors ── */ .trending--standalone .trending-card .trending-card__rank { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif; font-weight: 700; font-style: normal; line-height: 0.85; letter-spacing: -0.04em; /* Proportional lining figures — the "1" reads narrower than the "8"; that asymmetry is the typography doing work. NOT tabular-nums. */ font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "pnum" 1; /* No decorative shell: no plate, no coin, no shadow. */ background: transparent; background-color: transparent; background-image: none; box-shadow: none; border-radius: 0; /* Right-align so the ordinal cluster ("1ˢᵗ", "10ᵗʰ") end-anchors at the column right edge — the photo's left edge becomes the fixed visual beat. With bare cardinals + pnum we left-aligned to avoid "4" floating in empty space; with ordinals the cluster is more substantial (digit + suffix), so right-align gives the steadier column rhythm. */ text-align: right; display: block; min-width: auto; isolation: auto; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__rank { font-size: clamp(5.5rem, 4rem + 3vw, 8rem); color: var(--color-medal-gold); /* line-height 1 instead of the base 0.85 — the hero numeral is absolute- positioned over the photo; line-height < 1 lets the ascender escape its line box, and the anchor's overflow:hidden then clips the top of the "1". */ line-height: 1; /* Warm-tinted soft-white stroke = polished-metal highlight, NOT pure white. Pure white at 2px on gold reads as a label sticker (cool edge clash); a cream/pale-gold tint (rgb(255,240,200)) shares the warm hue family and reads as a sheen — the same logic real-metal finishes use for their bright highlights. Lower alpha (0.7) keeps the rim luminous rather than chalky. The heavy ambient shadow stack below gives the numeral lift off the photo. */ -webkit-text-stroke: 1.75px rgba(255, 240, 200, 0.7); text-shadow: 0 0 28px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.58), 0 2px 4px rgba(0, 0, 0, 0.52), 0 1px 0 rgba(0, 0, 0, 0.55); } /* Medal cohesion via typography (NOT plates): #1 gold, #2 silver, #3 bronze as text COLOR on the Playfair Display numeral cluster. The ordinal suffix inherits color, so "2ⁿᵈ" reads as a unified silver cluster. */ .trending--standalone .trending-card[data-rank="2"][data-rank-tier="podium"] .trending-card__rank { font-size: clamp(3.75rem, 3rem + 2vw, 5.5rem); color: var(--color-medal-silver); } .trending--standalone .trending-card[data-rank="3"][data-rank-tier="podium"] .trending-card__rank { font-size: clamp(3.75rem, 3rem + 2vw, 5.5rem); color: var(--color-medal-bronze); } .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__rank { font-size: clamp(2.5rem, 2rem + 1.2vw, 3.25rem); /* Warm-dim white via alpha rather than --color-text-secondary (#AEAEB2), which reads as cool UI grey. rgba dim feels editorial, not menu. */ color: rgba(245, 245, 247, 0.55); } /* List tier (#4-#10): minimal lift shadow only — no medal treatment. */ .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__rank { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } /* Podium (#2, #3): cream stroke + medal shadow stack to match the hero treatment. Shadow stack is scaled down vs hero (no photo overlay to fight on a dark bg) but the visual register stays the same — the three medals read as a set. */ .trending--standalone .trending-card[data-rank-tier="podium"] .trending-card__rank { -webkit-text-stroke: 1.5px rgba(255, 240, 200, 0.65); text-shadow: 0 0 18px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 0, 0, 0.45); } /* Podium ordinal suffix: matches the digit stroke (proportionally thinner so the small "ⁿᵈ"/"ʳᵈ" letters don't go chunky). */ .trending--standalone .trending-card[data-rank-tier="podium"] .trending-card__rank-ordinal { -webkit-text-stroke: 1px rgba(255, 240, 200, 0.65); } /* Ordinal suffix: small caps register, raised above the numeral baseline. Color inherits from the parent rank so "1ˢᵗ" / "2ⁿᵈ" / "3ʳᵈ" read as single gold/silver/bronze clusters. Italic isn't used (Playfair italic isn't loaded — browser would synthesize and produce ugly skew). The raise + size were tuned against #1 at 8rem and #10 at 3.25rem so the suffix sits visually at the upper third of the numeral's cap-height at every size — no over-/under-shoot across the clamp range. */ .trending--standalone .trending-card .trending-card__rank-ordinal { display: inline-block; font-family: inherit; font-weight: 700; font-size: 0.32em; font-style: normal; text-transform: lowercase; letter-spacing: 0.02em; /* Vertical-align: percentage of EM lifts the suffix above the baseline by 0.55em (≈ x-height of the parent). line-height: 0 prevents the raised suffix from inflating the parent's line box, which would push the numeral cluster vertical-center off the row's grid. */ vertical-align: 0.55em; line-height: 0; /* Breathing room between the numeral and the suffix. Playfair's compact metrics + a small em margin made "2ⁿᵈ" read as a single glyph rather than digit + suffix; bumped to 0.14em (≈ half an x-height) so the cluster reads as two typographic elements. */ margin-left: 0.14em; /* Default: suffix carries no stroke. The hero overrides this below with a proportionally-thinner cream stroke so the "ˢᵗ" cluster matches the digit's treatment without going chunky on the small letters. -webkit-text-stroke does NOT inherit, so each tier must declare its own. */ -webkit-text-stroke: 0; } /* Hero suffix: matches the parent's cream stroke but thinner (1.25px vs 1.75px on the digit) so the smaller "ˢᵗ" letters carry the same sheen-rim without thickening into a blob. */ .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__rank-ordinal { -webkit-text-stroke: 1.25px rgba(255, 240, 200, 0.7); } /* ── Body content ── */ .trending--standalone .trending-card[data-rank-tier="podium"] .trending-card__body, .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .trending--standalone .trending-card__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__name { font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); letter-spacing: -0.015em; white-space: normal; } .trending--standalone .trending-card__tagline { margin: 0; font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-secondary, rgba(255,255,255,.7)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__tagline { font-size: var(--text-base); -webkit-line-clamp: 3; } /* List tier (#4-#10) drops the tagline. Scan-dense, no narration — the same restraint move Eater's Heatmap uses past the top three. */ .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__tagline { display: none; } .trending--standalone .trending-card__meta { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary, rgba(255,255,255,.5)); letter-spacing: .04em; text-transform: uppercase; } .trending--standalone .trending-card__type { text-transform: uppercase; } .trending--standalone .trending-card__neighborhood { white-space: normal; overflow: visible; text-overflow: clip; font-size: inherit; color: inherit; } .trending--standalone .trending-card__divider { opacity: .55; } .trending--standalone .trending-card__amenities { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); } /* Chip selectors scoped to .trending--standalone (not nested under .trending-card__amenities) so the rendered bytes stay lean. */ .trending .card__amenity { display: inline-flex; align-items: center; /* gap 3px (NOT 4px) — synced with cards.css so chips render identically on the venue grid and the trending leaderboard. tests/interaction/trending-cohesion.spec.js (Phase 3) pins this equivalence at the rendered-style level. */ gap: 3px; padding: 2px 8px; border-radius: var(--radius-full); background-color: var(--color-chip-bg); font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; } .trending .card__amenity svg { width: 12px; height: 12px; color: var(--_ac); } .trending .card__amenity[data-amenity="wifi"] { background-color: color-mix(in srgb, var(--color-chip-wifi) 15%, transparent); --_ac: var(--color-chip-wifi); } .trending .card__amenity[data-amenity="outlets"] { background-color: color-mix(in srgb, var(--color-chip-outlets) 15%, transparent); --_ac: var(--color-chip-outlets); } .trending .card__amenity[data-amenity="quiet"] { background-color: color-mix(in srgb, var(--color-chip-quiet) 15%, transparent); --_ac: var(--color-chip-quiet); } .trending .card__amenity[data-amenity="openLate"] { background-color: color-mix(in srgb, var(--color-chip-openlate) 15%, transparent); --_ac: var(--color-chip-openlate); } .trending .card__amenity[data-amenity="outdoorSeating"] { background-color: color-mix(in srgb, var(--color-chip-outdoor) 15%, transparent); --_ac: var(--color-chip-outdoor); } .trending .card__amenity[data-amenity="food"] { background-color: color-mix(in srgb, var(--color-chip-food) 15%, transparent); --_ac: var(--color-chip-food); } /* History chips — the "track record" row above the amenity chips. Distinct visual weight from amenities: outlined rather than tinted, small emoji-free, so the eye reads them as a separate signal class. Phase 1 of docs/trending-history-chips.md. */ .trending--standalone .trending-card__history { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); } .trending .card__history-chip { display: inline-flex; align-items: center; /* gap replaces the collapsed whitespace between anonymous flex text items and the .card__history-chip__count span. 0.25em ≈ a native word-space at the chip's var(--text-xs) font size. Without this, inline-flex eats the leading space of " time at #1" so it renders as "Firsttime at #1". */ gap: 0.25em; padding: 2px 8px; border-radius: var(--radius-full); background-color: transparent; border: 1px solid color-mix(in srgb, var(--color-text-secondary) 65%, transparent); font-size: var(--text-xs); color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; } /* first-place chip inherits the neutral base outline + text — the gold medal language belongs to the rank-1 numeral, not duplicated on the chip. The cafe-green count span ("First" / "Nth") carries the pop. top-3 keeps silver to mark the podium-club tier. */ .trending .card__history-chip[data-history-kind="top-3"] { border-color: color-mix(in srgb, var(--color-medal-silver) 65%, transparent); color: var(--color-medal-silver); } /* Milestone count palette — count token inside chip text takes a brand- compass color per docs/trending-history-chip-colors.md §2.2. Walks cool→warm as count climbs, every adjacent tier a hue-family jump. Rollback: delete the 11 tier rules; base rule keeps font-weight only. */ .trending .card__history-chip__count { color: inherit; font-weight: 700; } .trending .card__history-chip[data-milestone-tier="1"] .card__history-chip__count { color: var(--color-accent); } .trending .card__history-chip[data-milestone-tier="2"] .card__history-chip__count { color: var(--color-chip-quiet); } .trending .card__history-chip[data-milestone-tier="3"] .card__history-chip__count { color: var(--color-chip-printer); } .trending .card__history-chip[data-milestone-tier="4"] .card__history-chip__count { color: var(--color-chip-wifi); } .trending .card__history-chip[data-milestone-tier="5"] .card__history-chip__count { color: var(--color-chip-openlate); } .trending .card__history-chip[data-milestone-tier="6"] .card__history-chip__count { color: var(--color-chip-viral); } .trending .card__history-chip[data-milestone-tier="7"] .card__history-chip__count { color: var(--color-chip-wine); } .trending .card__history-chip[data-milestone-tier="8"] .card__history-chip__count { color: var(--color-chip-food); } .trending .card__history-chip[data-milestone-tier="9"] .card__history-chip__count { color: var(--color-chip-athletic); } .trending .card__history-chip[data-milestone-tier="10"] .card__history-chip__count { color: var(--color-chip-coffee); } .trending .card__history-chip[data-milestone-tier="11plus"] .card__history-chip__count { color: var(--color-chip-beer); } @media (prefers-reduced-motion: reduce) { .trending--standalone .trending-card > a { transition: none; } .trending--standalone .trending-card > a:hover { transform: none; } } /* Mobile: numeral column widened to 76px (was 56) so "10ᵗʰ" doesn't crowd the photo. Photo 88×88, denser vertical rhythm via 0 list-gap (the border-bottom rule on each
  • separates rows). */ @media (max-width: 600px) { .trending--standalone .trending-list { gap: 0; } .trending--standalone .trending-card[data-rank-tier="podium"] > a, .trending--standalone .trending-card[data-rank-tier="list"] > a { grid-template-columns: 76px 88px 1fr; gap: 12px; padding: 16px 0; } .trending--standalone .trending-card[data-rank-tier="podium"] .trending-card__photo-wrap, .trending--standalone .trending-card[data-rank-tier="list"] .trending-card__photo-wrap { width: 88px; height: 88px; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__body { padding: 16px 18px 18px; } .trending--standalone .trending-card[data-rank-tier="hero"] .trending-card__rank { top: 16px; left: 18px; } } /* ─────────────────────────────────────────────────────────────────────────── */ /* Phase 2.5 — Homepage compact-row teaser (.trending--home) */ /* L8 third-pass design: Phase 2's 3-col 4:3 grid shipped at ~500px */ /* desktop / ~1200px mobile — too big for a teaser. Replaced with a */ /* vertical stack of compact rows (Spotify Top 50 / Apple Music Charts): */ /* [rank-medal | 56px square thumb | name+meta one-line | chevron]. */ /* ~280px total on every viewport. No chips, no tagline, no breakpoint */ /* switch — single column always. Standalone retains medal podium; this */ /* preserves cohesion via shared --color-medal-* tokens scaled down (gold */ /* fill #1, silver/bronze rings #2/#3 — only the winner gets a full medal). */ /* ─────────────────────────────────────────────────────────────────────────── */ .trending--home .trending-list { display: flex; flex-direction: column; gap: var(--space-2); max-width: 720px; margin: 0 auto; padding: 0; list-style: none; } .trending--home .trending-card { /* Override base .trending-card { flex: 0 0 240px } — that 240px flex-basis becomes the cross-axis size in our flex-column layout and ballooned each compact row to 240px tall. The row's actual content is ~74px (56px thumb + 16px padding); flex-basis: auto lets the row size to its content. */ flex: 0 0 auto; width: 100%; margin: 0; padding: 0; } /* Phase 3.5B: shared anchor / hover / focus-visible declarations live on .trending at line ~180. Home only needs the layout override. */ .trending--home .trending-card > a { display: grid; grid-template-columns: 24px 56px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2); } /* Rank medal — gold fill for #1 (winner), silver/bronze RINGS for #2/#3 (subtle hierarchy — only the winner gets the full medal weight). Same --color-medal-* tokens as the standalone podium → cohesion. */ .trending--home .trending-card .trending-card__rank { position: static; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 1.5px solid transparent; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; text-shadow: none; text-align: center; min-width: 0; /* box-sizing: border-box so the 1.5px ring counts within the 24×24 box; prevents the silver/bronze rings from inflating to 27×27. */ box-sizing: border-box; } .trending--home .trending-card[data-rank="1"] .trending-card__rank { background: var(--color-medal-gold); color: #1a1300; border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--color-medal-gold) 60%, white) inset; } .trending--home .trending-card[data-rank="2"] .trending-card__rank { color: var(--color-medal-silver); border-color: var(--color-medal-silver); } .trending--home .trending-card[data-rank="3"] .trending-card__rank { color: var(--color-medal-bronze); border-color: var(--color-medal-bronze); } /* Square 56×56 thumbnail — leaderboard convention; doesn't compete with standalone's 16:9 hero. */ .trending--home .trending-card__photo-wrap { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--color-skeleton, rgba(255,255,255,.04)); } /* Phase 3.5B: shared .trending-card__photo / __photo--none declarations live on .trending at line ~210. Home photo-wrap below provides the 56×56 leaderboard sizing. */ /* Body: name + meta on a single compact band. */ .trending--home .trending-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; } .trending--home .trending-card__name { font-family: var(--font-display); font-size: var(--text-base, 1rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--color-text-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trending--home .trending-card__meta { margin: 0; display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-xs); line-height: 1.2; color: var(--color-text-tertiary, rgba(255,255,255,.5)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trending--home .trending-card__type { text-transform: capitalize; } .trending--home .trending-card__neighborhood { font-size: inherit; color: inherit; } .trending--home .trending-card__divider { opacity: .6; } /* Trailing chevron — "go deeper" affordance without screaming. */ .trending--home .trending-card__chevron { font-size: 1.25rem; font-weight: 600; color: var(--color-text-secondary, rgba(255,255,255,.5)); opacity: .55; line-height: 1; padding-right: var(--space-1); transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease), transform var(--duration-fast, 150ms) var(--ease-out, ease); } .trending--home .trending-card > a:hover .trending-card__chevron { opacity: 1; transform: translateX(2px); } /* Defensive: tagline + chips never rendered by js/trending.js cardHTML on the homepage. Hide if any future regression injects them so the row layout stays compact. */ .trending--home .trending-card__tagline, .trending--home .trending-card__amenities { display: none; } @media (prefers-reduced-motion: reduce) { .trending--home .trending-card > a { transition: none; } .trending--home .trending-card > a:hover { transform: none; } .trending--home .trending-card > a:hover .trending-card__chevron { transform: none; } } /* * /trending/ archive section ("Past weeks") and the /trending// * back link were unstyled — defaulting to bulleted