/* ===================================================================== Spill Sisters — Redesign Layer (Pass 1: app chrome + feed + story/thread) Loaded AFTER styles.css and brand.css. This file does not edit the 24k-line styles.css; it overrides it on the token system defined in tokens.css. Everything is scoped under `html.ss-redesign` for a specificity boost, and `!important` is used only where an existing `!important` rule sets the same property. Direction: "refined glam" — keep the pink + near-black identity and the voice, but fix spacing rhythm and type hierarchy, calm the decoration (gradients, glows, oversized radii), and remove dead space and generated-looking filler. Sections: 1. Base / typography 2. App chrome — top bar, rails, primary nav 3. Feed — header, room filters, story rows, action bar 4. Story / thread — reading column, body, poll, comments, reader 5. Decoration cleanup (glows, gradients, stray radii) ===================================================================== */ /* --------------------------------------------------------------------- 1. BASE / TYPOGRAPHY --------------------------------------------------------------------- */ /* Kill the phantom horizontal scrollbar: shell widths use 100%/100vw, which include the vertical scrollbar gutter, so they sit ~4px past the client width. `clip` on the root contains it without breaking sticky. */ html.ss-redesign { overflow-x: clip; /* Reserve the scrollbar's width permanently instead of letting it appear only once page height exceeds the viewport. Without this, switching the auth screen to the taller Create-account form could cross that threshold mid-interaction and shift the whole page (and the vertical split-screen divider) sideways by the scrollbar's width. */ scrollbar-gutter: stable; /* Slim flat bottom nav (see section 2) — feeds the content padding-bottom calcs that reference this token with a 76px fallback. */ --ss-mobile-bottom-nav-h: 58px; /* Retire Montserrat: repoint every styles.css font token at the system stack (they are set `!important` on :root, so match that). */ --font-body: var(--ss-font-body) !important; --font-display: var(--ss-font-body) !important; --ss-font-app: var(--ss-font-body) !important; --ss-font-editorial: var(--ss-font-body) !important; /* is white by default and shows through below a short page (above the fixed bottom nav) — the "half black, half white" seam. app.js also stamps .dark-mode on so this token flips. */ background: var(--ss-color-bg) !important; } html.ss-redesign body { min-height: 100dvh !important; background: var(--ss-color-bg) !important; } /* Post reader: one story, one body. The gallery intentionally reads as a gallery instead of a row of partially visible cards. */ /* Post media = a bounded "stage" (like Reddit / X): the image is capped so the body copy and action bar stay on the first screen. Full image is one tap away in the fullscreen viewer. */ html.ss-redesign .story-page.story-thread .story-media-gallery { position: relative !important; margin: var(--ss-space-3) 0 !important; } html.ss-redesign .story-page.story-thread .story-media-grid { display: flex !important; align-items: stretch !important; gap: 0 !important; overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x mandatory !important; scrollbar-width: none; border-radius: var(--ss-radius-md) !important; background: #141118 !important; /* neutral stage so portrait screenshots read as media, not a stray photo */ } html.ss-redesign .story-page.story-thread .story-media-grid::-webkit-scrollbar { display: none; } html.ss-redesign .story-page.story-thread .story-media-item { flex: 0 0 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 38vh !important; height: 52vh !important; max-height: 460px !important; scroll-snap-align: start !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; aspect-ratio: auto !important; /* styles.css locks this to 4/3 */ background: transparent !important; cursor: zoom-in !important; } html.ss-redesign .story-page.story-thread .story-media-item img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* Gallery controls overlaid on the image, Reddit-style: side arrows + a small dot pill at the bottom. Only rendered when 2+ images. */ html.ss-redesign .story-media-controls { position: absolute !important; inset: 0 !important; margin: 0 !important; display: block !important; pointer-events: none !important; } html.ss-redesign .story-media-nav { pointer-events: auto !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; border: 0 !important; border-radius: var(--ss-radius-circle) !important; background: rgba(18, 16, 20, 0.55) !important; color: #fff !important; } html.ss-redesign .story-media-nav:hover, html.ss-redesign .story-media-nav:focus-visible { background: rgba(18, 16, 20, 0.78) !important; color: #fff !important; outline: 0 !important; } html.ss-redesign .story-media-nav[data-story-media-move="-1"] { left: 8px !important; } html.ss-redesign .story-media-nav[data-story-media-move="1"] { right: 8px !important; } /* "1 / 4" position pill, bottom-centre on the image */ html.ss-redesign .story-media-count { position: absolute !important; left: 50% !important; bottom: 10px !important; transform: translateX(-50%) !important; padding: 3px 9px !important; border-radius: var(--ss-radius-pill) !important; background: rgba(18, 16, 20, 0.62) !important; color: #fff !important; font-size: 12px !important; font-weight: var(--ss-weight-semibold) !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums !important; } html.ss-redesign body.story-view .story-page.story-thread { padding-bottom: calc(var(--ss-space-6) + env(safe-area-inset-bottom)) !important; } @media (max-width: 900px) { html.ss-redesign body.story-view .app-grid, html.ss-redesign body.logged-in.story-view .app-grid { padding-bottom: calc(var(--ss-mobile-bottom-nav-h, 76px) + var(--ss-space-5) + env(safe-area-inset-bottom)) !important; } } html.ss-redesign body { font-family: var(--ss-font-body) !important; font-size: var(--ss-text-body) !important; /* 15px, up from 14 */ line-height: 1.45; color: var(--ss-ink); background: var(--ss-bg); overflow-x: clip; } /* The platform UI font. The --font-* token overrides above flip most of styles.css; this catches the rest. Montserrat is no longer loaded, so any literal `font-family:"Montserrat",` rule falls through to its own system fallback anyway. The serif reading rules below are more specific and re-assert the serif on the post body only. */ html.ss-redesign body, html.ss-redesign button, html.ss-redesign input, html.ss-redesign select, html.ss-redesign textarea, html.ss-redesign label, html.ss-redesign a, html.ss-redesign p, html.ss-redesign h1, html.ss-redesign h2, html.ss-redesign h3, html.ss-redesign h4, html.ss-redesign h5, html.ss-redesign h6, html.ss-redesign span, html.ss-redesign small, html.ss-redesign strong, html.ss-redesign b, html.ss-redesign em, html.ss-redesign li, html.ss-redesign td, html.ss-redesign th, html.ss-redesign blockquote, html.ss-redesign legend { font-family: var(--ss-font-body) !important; } /* Real 700 face now loaded — retire synthetic 800 across the app. */ html.ss-redesign h1, html.ss-redesign h2, html.ss-redesign h3, html.ss-redesign strong, html.ss-redesign b { font-weight: var(--ss-weight-semibold); } /* Uppercase micro-labels need tracking or they read as a cramped blob. */ html.ss-redesign .eyebrow, html.ss-redesign .brand small, html.ss-redesign .sticker, html.ss-redesign .read-chip, html.ss-redesign .stat-strip, html.ss-redesign .feed-section-head .eyebrow { letter-spacing: var(--ss-tracking-caps) !important; } /* Brand-pink focus ring everywhere, replacing the teal one. */ html.ss-redesign a:focus-visible, html.ss-redesign button:focus-visible, html.ss-redesign input:focus-visible, html.ss-redesign select:focus-visible, html.ss-redesign textarea:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); } /* --------------------------------------------------------------------- 2. APP CHROME --------------------------------------------------------------------- */ /* --- Top bar: flat, short, aligned to the grid ------------------- */ html.ss-redesign body.logged-in .topbar.app-topbar { min-height: 54px !important; height: 54px !important; padding: 0 clamp(var(--ss-space-3), 2vw, var(--ss-space-6)) !important; gap: var(--ss-space-3); border: 0 !important; border-bottom: var(--ss-divider) !important; border-radius: 0 !important; /* Match the page ground (hairline divider is the separation) so the app chrome doesn't seam against the content — one continuous surface. */ background: var(--ss-color-bg) !important; box-shadow: none !important; backdrop-filter: none !important; } html.ss-redesign .topbar.app-topbar .brand, html.ss-redesign body.logged-in .topbar.app-topbar .brand, html.ss-redesign .topbar.app-topbar .brand > .brand-lockup, html.ss-redesign body.logged-in .topbar.app-topbar .brand > .brand-lockup { min-height: 0 !important; padding: 0 !important; align-self: center !important; } html.ss-redesign .topbar.app-topbar .brand .brand-header-image, html.ss-redesign body.logged-in .topbar.app-topbar .brand .brand-header-image { width: auto !important; height: 44px !important; max-width: 52vw !important; } /* "18+ community" tagline removed from the header per request */ html.ss-redesign .topbar.app-topbar .brand small, html.ss-redesign body.logged-in .topbar.app-topbar .brand small { display: none !important; } html.ss-redesign .topbar.app-topbar .search-box { min-height: 40px; border: var(--ss-divider); border-radius: var(--ss-radius-pill); background: var(--ss-color-soft); } html.ss-redesign .topbar.app-topbar .search-box svg { color: var(--ss-muted); } html.ss-redesign .topbar.app-topbar .search-box input, html.ss-redesign .topbar.app-topbar .search-box input::placeholder { color: var(--ss-ink); } html.ss-redesign .topbar.app-topbar .search-box input::placeholder { color: var(--ss-muted); } /* Desktop keeps the labelled theme control in Account actions. On phones, expose the same preference as a dedicated thumb-sized moon/sun control so it cannot disappear with the compacted account actions. */ html.ss-redesign .mobile-theme-toggle, html.ss-redesign .mobile-alerts-toggle { display: none !important; } /* Top-bar buttons: quiet ghost, single pink CTA ("Join"). */ html.ss-redesign .topbar .ghost-button { color: var(--ss-muted); background: transparent; } html.ss-redesign .topbar .ghost-button:hover { color: var(--ss-ink); background: var(--ss-color-soft); } html.ss-redesign .topbar .primary-button { background: var(--ss-pink); color: #fff; border-radius: var(--ss-radius-pill); box-shadow: none; } /* Notification bell badge: was a bare 9px dot; show the unread count. */ html.ss-redesign .notification-button .notification-dot.has-count { top: 2px !important; right: 2px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border-radius: var(--ss-radius-pill) !important; background: var(--ss-pink) !important; box-shadow: 0 0 0 2px var(--ss-surface) !important; color: #fff !important; font-size: 10px !important; font-weight: var(--ss-weight-semibold) !important; line-height: 1 !important; letter-spacing: 0 !important; } /* Inbox gets a real numeric badge for unread chats and requests. */ html.ss-redesign [data-profile-menu-view='notifications'].has-unread, html.ss-redesign [data-profile-menu-view='inbox'].has-unread, html.ss-redesign .left-rail [data-view='inbox'].has-unread, html.ss-redesign .mobile-nav [data-mobile-view='notifications'].has-unread, html.ss-redesign .mobile-nav [data-mobile-view='inbox'].has-unread { position: relative; } html.ss-redesign [data-profile-menu-view='notifications'].has-unread::after, html.ss-redesign [data-profile-menu-view='inbox'].has-unread::after, html.ss-redesign .mobile-nav [data-mobile-view='notifications'].has-unread::after, html.ss-redesign .mobile-nav [data-mobile-view='inbox'].has-unread::after { content: attr(data-unread-count); position: absolute; top: 5px; right: 7px; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid var(--ss-surface); border-radius: var(--ss-radius-pill); background: var(--ss-pink); color: #fff; font-size: 10px; font-weight: var(--ss-weight-semibold); line-height: 1; } /* Left rail keeps the count aligned at the far edge of its nav pill. */ html.ss-redesign .left-rail [data-view='inbox'].has-unread::after { content: attr(data-unread-count); position: absolute; top: 50%; right: var(--ss-space-3); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--ss-radius-pill); background: var(--ss-pink); color: #fff; font-size: 10px; font-weight: var(--ss-weight-semibold); line-height: 1; } /* --- Grid: leave the app's responsive column template alone (it already collapses correctly for drawer / 2-col / mobile). Only add rhythm, and cap the feed content width via the inner list, not the cell. --- */ /* Never let the shell paint wider than the viewport (the app's fixed-ish grid tracks + padding can sum past 100% and add a phantom h-scrollbar). `clip` (not `hidden`) keeps position:sticky descendants working. */ html.ss-redesign .app-shell { max-width: 100%; overflow-x: clip; } @media (min-width: 901px) { html.ss-redesign body.logged-in .app-grid { gap: var(--ss-space-6) !important; margin-top: var(--ss-space-5) !important; } /* Content-forward: let the shell use the screen and give the extra width to the feed, so the main column doesn't float in a void. */ html.ss-redesign body.logged-in:not(.story-view):not(.inbox-view):not(.control-center-view) .app-grid { grid-template-columns: 210px minmax(0, 1fr) 300px !important; width: min(1300px, 100%) !important; max-width: 1300px !important; } /* Hamburger on desktop hides the left rail (focus mode). Drop its 210px track too, or the feed gets auto-placed into that sliver. */ html.ss-redesign body.logged-in.sidebar-collapsed:not(.story-view):not(.inbox-view):not(.control-center-view) .app-grid { grid-template-columns: minmax(0, 1fr) 300px !important; } /* Profile / settings / connections: keep the nav rail, drop the trending rail (feed chrome, not relevant here) and let the content fill. Depth matches redesign.css:385 + styles.css so the 3rd track is gone. */ html.ss-redesign body.logged-in.profile-view:not(.story-view):not(.inbox-view):not(.control-center-view) .app-shell .app-grid.app-grid { grid-template-columns: 210px minmax(0, 720px) !important; justify-content: center !important; } html.ss-redesign body.logged-in.profile-view.sidebar-collapsed:not(.story-view):not(.inbox-view):not(.control-center-view) .app-shell .app-grid.app-grid { grid-template-columns: minmax(0, 720px) !important; } html.ss-redesign body.logged-in.profile-view .right-rail { display: none !important; } html.ss-redesign body.logged-in:not(.story-view):not(.inbox-view):not(.control-center-view) .feed-column { max-width: none !important; } html.ss-redesign body.logged-in.profile-view .feed-column, html.ss-redesign body.logged-in.profile-view #feed, html.ss-redesign body.logged-in.profile-view .public-profile, html.ss-redesign body.logged-in.profile-view .alias-profile-page { max-width: 720px !important; width: 100% !important; } } @media (min-width: 1440px) { html.ss-redesign body.logged-in:not(.story-view):not(.inbox-view):not(.control-center-view) .feed-column { max-width: 760px !important; /* stop the feed getting silly-wide */ margin-inline: auto !important; } /* renderViewHead screens (notifications, rooms, drafts, following, …) have intrinsically-flexible content, so the 760px cap + auto margins above let the column shrink-wrap to its text and leave a wide dead gap before the right rail. Let those fill their grid track. */ html.ss-redesign body.logged-in:not(.story-view):not(.inbox-view):not(.control-center-view) .feed-column:has(.view-head) { max-width: none !important; margin-inline: 0 !important; } } @media (min-width: 901px) { html.ss-redesign .left-rail, html.ss-redesign .right-rail { top: calc(var(--ss-topbar-h) + var(--ss-space-4)); gap: var(--ss-space-3); } /* Rails: plain columns, not shadowed cards floating over a flat feed. */ html.ss-redesign .left-rail { padding: 0 var(--ss-space-4) 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } } /* Right rail: plain stacked sections, not floating cards. A hairline between each is the only structure — matches the flat feed. The `body.logged-in` depth beats styles.css's own `.right-rail .panel` rule, which otherwise re-adds a border-bottom and its own padding. */ html.ss-redesign body.logged-in .right-rail .panel, html.ss-redesign body.logged-in .right-rail .rail-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; /* left inset so the text clears the rail's own left rule */ padding: 0 0 0 var(--ss-space-5) !important; } html.ss-redesign body.logged-in .right-rail .panel + .panel, html.ss-redesign body.logged-in .right-rail .rail-card + .rail-card, html.ss-redesign body.logged-in .right-rail .panel + .rail-card { margin-top: var(--ss-space-5) !important; padding-top: var(--ss-space-5) !important; border-top: var(--ss-divider) !important; } html.ss-redesign .rail-card { border: var(--ss-divider) !important; border-radius: var(--ss-radius-lg) !important; background: var(--ss-surface) !important; box-shadow: none !important; padding: var(--ss-space-4) !important; } /* --- Primary nav pills ----------------------------------------- */ html.ss-redesign .left-rail .nav-pill { min-height: var(--ss-tap-target-min); gap: var(--ss-space-3); padding: 0 var(--ss-space-3); border-radius: var(--ss-radius-md); color: var(--ss-muted); font-size: var(--ss-text-nav); font-weight: var(--ss-weight-medium); } html.ss-redesign body.logged-in .left-rail .nav-pill:hover, html.ss-redesign body.drawer-open .left-rail .nav-pill:hover { background: var(--ss-color-soft) !important; color: var(--ss-ink) !important; } html.ss-redesign body.logged-in .left-rail .nav-pill.active, html.ss-redesign body.drawer-open .left-rail .nav-pill.active { background: var(--ss-color-pink-soft) !important; color: var(--ss-pink) !important; } html.ss-redesign body.logged-in .left-rail .nav-pill.active svg { color: var(--ss-pink) !important; } /* "Spill the Tea" composer button — the one place a filled pink lives here. styles.css paints it with a #cf1b63 -> #ff5f6a gradient whose light end puts white text at 2.95:1, so this is forced flat: solid raspberry clears 4.5:1 across the whole button and matches the rest of the flat redesign. */ html.ss-redesign .left-rail .spill-button { min-height: var(--ss-tap-target-min); margin-top: var(--ss-space-2); border-radius: var(--ss-radius-pill); background: #cf1b63 !important; background-image: none !important; color: #fff !important; font-weight: var(--ss-weight-semibold); box-shadow: none; } /* Dark mode dropped the fill entirely, leaving the primary action looking like a ghost button. Keep it filled, in the ratio-safe raspberry. */ html.ss-redesign body.logged-in.dark-mode .left-rail .spill-button, html.ss-redesign body.dark-mode .left-rail .spill-button { background: #cf1b63 !important; background-image: none !important; color: #fff !important; border-color: transparent !important; } html.ss-redesign body.dark-mode .left-rail .spill-button svg { color: #fff !important; } /* --- Mobile bottom nav: active tab was a solid near-black rounded card (styles.css:1762 `background: var(--black)`), which reads as a stray floating chip. Match the left-rail treatment: quiet pink tint + pink label, no invert. --------------------------------- */ html.ss-redesign .mobile-nav button.active { background: var(--ss-color-pink-soft, rgba(255, 47, 139, 0.12)) !important; color: var(--ss-pink) !important; border-radius: var(--ss-radius-md) !important; } html.ss-redesign .mobile-nav button.active svg { color: var(--ss-pink) !important; } html.ss-redesign .mobile-nav button:focus-visible { outline: 2px solid var(--ss-focus-ring, var(--ss-pink)) !important; outline-offset: -2px !important; } /* --- Slim bottom nav: was a ~68px floating rounded pill (12px inset all round, 22px radius, blur + a big drop shadow) that ate screen and overlapped content. Make it a flat ~54px full-width bar flush to the edge with a hairline top rule — closer to a native tab bar. ------ */ @media (max-width: 900px) { html.ss-redesign body.logged-in .mobile-nav { right: 0 !important; left: 0 !important; bottom: 0 !important; gap: 0 !important; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-top: var(--ss-divider) !important; border-radius: 0 !important; /* Same ground as the page — a hairline top rule is the only separation, like a native tab bar. Avoids a "two shades of black" seam. */ background: var(--ss-color-bg) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.ss-redesign body.logged-in .mobile-nav button { min-height: 46px !important; gap: 2px !important; border-radius: var(--ss-radius-md) !important; /* 10px muted labels came in at 3.67:1 on the dark ground. 11px at medium weight, on the lighter muted, clears 4.5:1. */ font-size: 11px !important; font-weight: var(--ss-weight-medium) !important; } html.ss-redesign body.logged-in.dark-mode .mobile-nav button { color: var(--ss-muted) !important; } html.ss-redesign body.logged-in.dark-mode .mobile-nav button.active { color: var(--ss-pink) !important; } html.ss-redesign body.logged-in .mobile-nav button svg, html.ss-redesign body.logged-in .mobile-nav svg { width: 20px !important; height: 20px !important; } /* Flat bar → tint the active tab, no filled chip. */ html.ss-redesign body.logged-in .mobile-nav button.active { background: transparent !important; color: var(--ss-pink) !important; } /* "Spill" centre button: flat pink, no raised transform / glow. */ html.ss-redesign body.logged-in .mobile-nav .mobile-spill { transform: none !important; background: var(--ss-pink) !important; box-shadow: none !important; } /* White on the lighter dark-mode pink is only 3.46:1; the deeper brand raspberry takes it to ~5:1 and still reads as the same accent. */ html.ss-redesign body.logged-in.dark-mode .mobile-nav .mobile-spill { background: #cf1b63 !important; color: #fff !important; } html.ss-redesign body.logged-in.dark-mode .mobile-nav .mobile-spill svg { color: #fff !important; } html.ss-redesign body.logged-in .mobile-nav .mobile-spill svg { color: #fff !important; } /* styles.css reserves 92px for the old tall pill; match the slim bar. */ html.ss-redesign body.logged-in .app-shell { padding-bottom: calc(var(--ss-mobile-bottom-nav-h) + var(--ss-space-3) + env(safe-area-inset-bottom)) !important; } } /* --------------------------------------------------------------------- 3. FEED --------------------------------------------------------------------- */ /* --- Hero prompt: was a 220px gradient panel with a decorative "case files" graphic and duplicate copy. Collapse to a slim composer prompt; the heading/subtitle just repeated the feed. -- */ html.ss-redesign .feed-column .hero-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-4); min-height: 0; padding: var(--ss-space-4) var(--ss-space-5); border: var(--ss-divider); border-radius: var(--ss-radius-lg); background: var(--ss-color-soft); color: var(--ss-ink); box-shadow: none; } html.ss-redesign .hero-strip > div { margin: 0; } html.ss-redesign .hero-strip h1 { margin: 0; font-size: var(--ss-text-feed-title); font-weight: var(--ss-weight-semibold); color: var(--ss-ink); } html.ss-redesign .hero-strip p, html.ss-redesign .hero-strip .eyebrow, html.ss-redesign .hero-strip .hero-graphic-board { display: none; } html.ss-redesign .hero-strip .primary-button { flex: none; background: var(--ss-pink); color: #fff; border-radius: var(--ss-radius-pill); box-shadow: none; } /* --- Feed header: one 44px row — title · sort · count ----------- */ /* styles.css adds a blanket 18px .feed-column top pad; on the feed it shoved "For You" far below the topbar rule while the section's own bottom rule hugged the Hot/New control. Zero the top pad and let the header's own min-height center the row between the two rules. */ html.ss-redesign .feed-column:has(.feed-section-head) { padding-top: 0 !important; } html.ss-redesign .feed-section-head { display: flex !important; align-items: center !important; gap: var(--ss-space-3); min-height: 40px !important; padding: 0 !important; border-bottom: var(--ss-divider); margin-bottom: var(--ss-space-2) !important; } html.ss-redesign .feed-section-head > div:first-child { flex: 1 1 auto; } html.ss-redesign .feed-section-head h2, html.ss-redesign body.logged-in .feed-section-head h2 { margin: 0 !important; font-size: 18px !important; /* was the thread-title token (24-32px) — too loud for a section label */ font-weight: var(--ss-weight-semibold) !important; line-height: var(--ss-leading-tight) !important; } html.ss-redesign .feed-section-head > span:last-child { color: var(--ss-muted); font-size: var(--ss-text-meta); font-weight: var(--ss-weight-regular); letter-spacing: 0; text-transform: none; } /* Hot / New as a real segmented control. */ html.ss-redesign .feed-mini-controls { display: inline-flex !important; align-items: center !important; gap: 2px !important; padding: 2px !important; border: var(--ss-divider); border-radius: var(--ss-radius-pill); background: var(--ss-color-soft); } html.ss-redesign .feed-mini-controls button { min-height: 26px !important; height: 26px !important; padding: 0 var(--ss-space-3) !important; border: 0; border-radius: var(--ss-radius-pill); background: transparent; color: var(--ss-muted); font-size: var(--ss-text-meta); font-weight: var(--ss-weight-medium); } html.ss-redesign .feed-mini-controls button.active { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-xs); } html.ss-redesign .feed-mini-controls .refresh-feed-button { min-height: 26px !important; height: 26px !important; width: 26px !important; padding: 0 !important; color: var(--ss-muted); } html.ss-redesign .feed-mini-controls .refresh-feed-button svg { width: 14px; height: 14px; } /* --- Room filter: the app shows a