/* ============================================================================ ringhub.css — RingHub's own overrides on top of the Bloome (style.css) theme. Loaded AFTER style.css in home/base.html and auth/base.html, so rules here win. Keep OUR customizations here rather than editing the vendored theme, so they're greppable in one place and survive a theme update. ============================================================================ */ /* --- Palette: firm up the washed-out greys (2026-08-06) ---------------------- The Bloome theme's light-mode neutrals are too pale on the #eff2f6 page — `--bs-border-color: rgba(0,0,0,.1)` is nearly invisible, so cards, inputs and dividers fade into the background. Darken the neutral tokens to a legible cool blue-grey that sits under RingHub's navy identity. Scoped to [data-bs-theme=light] so it beats the theme's own light tokens; RingHub is light-only (no dark mode). */ :root[data-bs-theme="light"] { --bs-body-bg: #e8ecf2; /* was #eff2f6 — a hair deeper so white cards read as raised */ --bs-border-color: #c2ccd9; /* was rgba(0,0,0,.1) — a clear hairline on white AND on the page */ --bs-border-color-translucent: rgba(31, 45, 68, 0.17); /* card borders — navy-tinted, visible */ --bs-light-border-subtle: #d3dae3; --bs-secondary-color: #5b6473; /* muted text — cooler + darker for legibility */ --bs-secondary-color-rgb: 91, 100, 115; } /* --- No more layout jump between pages --------------------------------------- Short pages have no scrollbar, tall ones do; on Windows the bar eats ~15px of width, so centered content shifts left/right as you navigate. Reserve the bar's space always so width never changes. Modern browsers reserve just the gutter (no greyed track on short pages); older ones fall back to always showing the bar. Either way: zero reflow. */ html { scrollbar-gutter: stable; } @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* --- Active page: gold nav chip --------------------------------------------- The top-nav icons are pale-gray chips (.bg-light, which sets its background with !important — hence the !important here). Gold-fill only the chip for the page you're currently on: ties to the landing's accent, gives a real "you are here" cue, and keeps the gold scarce so the Create buttons still read as the primary action. The icon stays dark (#2c2418 ~ 7:1 on gold). */ .navbar .nav-link.icon-md.rh-nav-active, .navbar .nav-link.icon-md.rh-nav-active:hover, .navbar .nav-link.icon-md.rh-nav-active:focus { background-color: #d4a853 !important; border-color: #d4a853 !important; } /* --- The Woodshed "under construction" band (TEMPORARY) ---------------------- Shown across the parked marketplace via the namespace-gated block in home/base.html. Warm amber with a hazard-stripe left edge — reads as "not live yet" and ties to the gold accent, without a garish blinking-GIF register. Delete this rule together with that base.html block when the marketplace launches. */ .rh-under-construction { position: relative; overflow: hidden; padding-left: 1.5rem; border: 1px solid #e6c200; border-radius: .5rem; background-color: #fdf6e3; color: #6b5900; } .rh-under-construction::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .6rem; background: repeating-linear-gradient( 45deg, #e6c200, #e6c200 8px, #2c2418 8px, #2c2418 16px ); } .rh-under-construction .bi-cone-striped { font-size: 1.75rem; color: #d49b00; } /* --- Let position:sticky work -------------------------------------------------- The theme sets `body { overflow-x: hidden }` (to kill horizontal scroll). But `overflow-x: hidden` forces the OTHER axis to compute to `auto`, which turns into a scroll container — and a sticky element anchors to its nearest scroll-container ancestor, not the window. Since itself never scrolls (the window does), our sticky sidebar had nothing to stick to and scrolled off. `overflow-x: clip` clips the same way but is NOT a scroll container, so sticky escapes to the viewport as intended. (Browsers without `clip` ignore this line and fall back to the theme's `hidden` — no horizontal scroll, sticky degrades.) */ body { overflow-x: clip; } /* --- Sticky left sidebar (every section) ----------------------------------- Left panels shouldn't scroll away with their content. Every world's sidebar is `nav.navbar.navbar-expand-lg.mx-0` (home feed/profile, Chapter House, Events, Quartet Corner, Tag Town, Woodshed) — the top header is a

, not this — so one selector pins them all. `.rh-sidebar-sticky` covers the odd sidebar that isn't that nav (Settings, Messenger). Pin just under the 56px fixed-top header. Desktop only: on mobile these are off-canvas drawers, left untouched. No overflow/max-height here on purpose: making the sticky element its OWN scroll container stops the browser compositing it cleanly, so it lags a frame on scroll-direction change (a few-px wobble before it re-sticks). Sidebars are short, so plain sticky is smoother. */ @media (min-width: 992px) { .navbar.navbar-expand-lg.mx-0, .rh-sidebar-sticky { position: sticky; /* 5rem = the content row's natural top (56px fixed header + 24px gutter). Match it exactly so the sidebar sticks right where it already sits — an 8px mismatch here is what made it step down on reaching the top. */ top: 5rem; } } /* Sticky sidebar, bottom edge: base.html puts `main { padding-bottom: 8rem }` to clear the fixed Swag/Feedback/Bob FABs. But that whitespace sits BELOW the whole row — i.e. below the sticky nav's column — so scrolling into it drags the nav up at the very bottom (looks like it "un-sticks"). Move that clearance onto the SCROLLING content column instead, so the nav's column reaches the page bottom and it stays pinned. Tag a page's content column with `rh-fab-clear` to opt in (feed #main-panel, profile). :has() beats the inline `main` rule on specificity, so no !important needed. */ main:has(.rh-fab-clear) { padding-bottom: 0; } .rh-fab-clear { padding-bottom: 8rem; } /* --- Tag "sing mode": full-screen music-stand view ------------------------- A tag is performed — people gather round a screen and sing it — so the tag page has a "Sing" button that opens this. requestFullscreen() makes it true full-screen; this fixed overlay is also the fallback if fullscreen is denied. Big centered lyrics + the voice-part tracks, readable from across a room. */ .rh-singmode { position: fixed; inset: 0; z-index: 3000; background: #fff; color: #1a1a1a; overflow-y: auto; padding: 3rem 1.5rem; } .rh-singmode[hidden] { display: none; } .rh-singmode-close { position: fixed; top: 1rem; right: 1rem; z-index: 1; } .rh-singmode-inner { max-width: 900px; margin: 0 auto; text-align: center; } .rh-singmode-title { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 700; margin-bottom: .25rem; } .rh-singmode-meta { color: #666; font-size: 1.25rem; margin-bottom: 2rem; } .rh-singmode-tracks { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; margin-bottom: 2.5rem; } .rh-singmode-track { display: flex; flex-direction: column; align-items: center; } .rh-singmode-lyrics { font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.5; white-space: pre-wrap; font-family: inherit; text-align: center; margin: 0; }