/* --------------------------------------------------------------------------- chrome.css — the login pill and the cart badge. These two came from Simvoly's Custom Body Markup, so they are on EVERY page today, black and white alike. Both layouts load this file. Extracted 17 September 2026 from the live page mirror at ~/riddimbank-crawl-2026-09-17/pages/main-page.html (style block #7 and #8). Rules are ported AS THEY ARE, !important and all. Cleanup is Phase 9. --------------------------------------------------------------------------- */ .rb-cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;margin-left:8px;font-size:13px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;border-radius:12px;vertical-align:middle;line-height:1;transition:all .3s ease;white-space:nowrap} /* ⚠️ THE FOUR STATE COLOURS THAT SAT HERE WERE REMOVED — 17 September 2026. They were the Simvoly lift, carrying !important, and they silently beat the considered palette further down this file, which has none. The badge was rendering with this block's COLOURS and that block's GEOMETRY — a mongrel neither version intended, and the documented one was dead code. One definition now, at the bottom of this file, under the comment that explains the four states. What was removed, for the record: green #1DB954 on #000 → now #1DB954 on #ffffff yellow #FFD700 on #000 → now #E8A317 on #1a1a1a red #e74c3c on #fff → now #D62828 on #ffffff neutral #666 on #fff → now #4a4a4a on #e8e8e8 The new reds and golds are the theme's own --deep-red and a gold that holds its contrast against dark text; the originals were generic Bootstrap-ish values that belong to no palette here. To go back, restore the four lines from git history — do not re-add them alongside the others. */ .rb-cart-badge.rb-hidden{display:none!important} #auth-widget { position: absolute !important; top: 20px !important; right: 20px !important; z-index: 9999 !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } #auth-widget.ready { opacity: 1 !important; } .auth-link { color: #1DB954 !important; text-decoration: none !important; font-size: 15px !important; font-weight: 600 !important; padding: 10px 20px !important; background: #0a0a0a !important; border: 2px solid #1DB954 !important; border-radius: 24px !important; transition: all 0.2s ease !important; display: inline-block !important; cursor: pointer !important; white-space: nowrap !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } .auth-link:hover { background: #1DB954 !important; color: #0a0a0a !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(29, 185, 84, 0.4) !important; } .auth-user { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; padding: 10px 20px !important; background: #1a1a1a !important; border: 2px solid #333 !important; border-radius: 24px !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.2s ease !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } .auth-user:hover { border-color: #1DB954 !important; } .username { color: #1DB954 !important; text-decoration: none !important; cursor: pointer !important; } .username:hover { opacity: 0.8 !important; } .separator { color: #666 !important; } .logout-link { color: #999 !important; text-decoration: none !important; cursor: pointer !important; } .logout-link:hover { color: #fff !important; } @media (max-width: 768px) { #auth-widget { top: 15px !important; right: 15px !important; } .auth-link, .auth-user { font-size: 13px !important; padding: 8px 14px !important; } } /* --------------------------------------------------------------------------- Found on the preview, 17 September 2026: the cart badge was showing "0" on every page, on every visit, including to a visitor who has never added anything. The markup carries the `hidden` attribute, but `hidden` works by setting display:none in the browser's own stylesheet, and the rule above sets display:inline-flex — an author rule always beats a browser rule, so `hidden` was doing nothing at all. The badge is now genuinely hidden until the cart script removes the attribute. Keep the attribute on the element in the layout. --------------------------------------------------------------------------- */ .rb-cart-badge[hidden] { display: none !important; } /* --------------------------------------------------------------------------- THE LOG-IN PILL IS NO LONGER AN OVERLAY — 17 September 2026. The ported rules above set #auth-widget to position: absolute !important; top: 20px !important; right: 20px !important; because Simvoly's header had no slot to put it in, so it was floated over the page. It overlapped content on narrow screens and did not move with the bar. The header is ours now and has a real place for it, so the overlay is undone here rather than edited out above — the ported block stays intact and comparable with the live site, and this says plainly what changed and why. --------------------------------------------------------------------------- */ #auth-widget.rb-auth { position: static !important; top: auto !important; right: auto !important; } /* --------------------------------------------------------------------------- CART BADGE — four states, set by site/js/cart.js. CORRECTED 17 September 2026. An earlier version of this file invented three class names (rb-cart-ok / -warn / -short). The real code uses four, and they are these. Renamed to match the code rather than translating between them. IT IS NOT AN ITEM COUNT. It shows the cart's cost in CREDITS against the customer's balance — which is why a real one reads "3,000": rb-badge-green the cart fits within available credits rb-badge-yellow at or above 75% of them (YELLOW_THRESHOLD in cart.js) rb-badge-red over budget, no credits, or signed out — cannot redeem rb-badge-neutral signed in, balance still loading; grey so a returning customer never flashes red while the fetch runs Hiding is done with .rb-hidden, not the `hidden` attribute, because that is what cart.js toggles. --------------------------------------------------------------------------- */ .rb-cart-badge.rb-hidden { display: none !important; } .rb-cart-badge { min-width: 34px; padding: 0 9px; height: 22px; font-size: 12px; line-height: 22px; border-radius: 11px; text-align: center; } .rb-cart-badge.rb-badge-green { background: #1DB954; color: #ffffff; } .rb-cart-badge.rb-badge-yellow { background: #E8A317; color: #1a1a1a; } .rb-cart-badge.rb-badge-red { background: #D62828; color: #ffffff; } .rb-cart-badge.rb-badge-neutral { background: #4a4a4a; color: #e8e8e8; } /* --------------------------------------------------------------------------- STICKY FOOTER — added 18 September 2026. On a short page (this showed up first on /quiz-20-questions, which is a heading, a button and one drawer) the body only grew as tall as its content, so the footer sat in the middle of the screen with a field of black beneath it. It looked broken because it was: nothing was holding it down. body becomes a flex column the height of the viewport and
takes the slack, so the footer is pushed to the bottom when there is not enough content and flows normally when there is. Nothing else changes. Lives in chrome.css because BOTH layouts load this file — the black and white shells share the same header and footer, and they should share this too. 100dvh follows 100vh on purpose: on mobile browsers the address bar makes 100vh taller than the visible area, which would put a gap below the footer. Browsers that do not understand dvh ignore that line and keep vh. --------------------------------------------------------------------------- */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } #main { flex: 1 0 auto; } .footer { flex-shrink: 0; }