@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); :root { --navy: #0b111a; --navy-panel: #141d29; --navy-panel-2: #182333; --border: #2a3a4c; --border-light: #35485e; --gold: #c9a25c; --gold-bright: #e0b96f; --bronze: #8a5a2e; --bronze-hover: #a9713b; --text: #eae4d6; --muted: #93a0b0; /* CR #71 Phase 1 (H3/#1, H4): component-scoped tokens for .side-nav text/active-pill. Default to the existing --gold/--gold-bright (dark theme already clears AA here -- see contrast math in the CR #71 build report) so dark-theme rendering is byte-identical to before this change; only the light-theme override below actually differs. Kept separate from --gold/--gold-bright themselves because those are also used as BUTTON backgrounds paired with dark text (a.btn/button) -- darkening them to fix nav-link contrast would have dropped button-text contrast below AA as a side effect. */ --nav-text: var(--gold); --active-pill-top: var(--gold-bright); } /* Light theme -- same brand (navy + gold), roles inverted: navy moves from background to ink, gold deepens wherever it carries text/icon color so it still reads against ivory. Toggled via [data-theme] on , set server-side in partials/header.php from the logged-in account's site_users.theme_preference or, logged out, the rw_theme cookie set by set-theme.php. */ :root[data-theme="light"] { --navy: #f2ead4; --navy-panel: #fffdf8; --navy-panel-2: #f3e9cd; --border: #ddcda3; --border-light: #e6d9b3; --gold: #b8894a; --gold-bright: #9c7530; --bronze: #8a5a2e; --bronze-hover: #6e4724; --text: #0b111a; /* CR #71 Phase 1 (Public #6 / footer .muted): #7a6e58 measured 4.17:1 against the --navy background (#f2ead4), just under the 4.5:1 AA floor for normal text. Darkened (same hue/saturation, lower lightness) to #736853 -- verified 4.56:1 vs #f2ead4 and 5.39:1 vs --navy-panel (#fffdf8), both with margin. --muted is never used as a background anywhere in this stylesheet (grep-confirmed), so darkening it has no downstream contrast side effects. */ --muted: #736853; /* CR #71 Phase 1 (Public #1 / Member H3): .side-nav a at --gold (#b8894a) measured 2.58-3.08:1 against the two real backgrounds it renders on (--navy-panel #fffdf8 desktop nav box, --navy #f2ead4 mobile bottom-bar), both well under 4.5:1 AA. #856234 verified 4.57-5.44:1 against both (plus the --navy-panel-2 hover background), all with margin. */ --nav-text: #856234; /* CR #71 Phase 1 (Member H4): active "Home" pill's gradient top stop, used ONLY with the dark #16130c text now applied to .side-nav a.active (see that rule) -- verified 4.55:1. The gradient's bottom stop stays the unmodified --gold (#b8894a), which clears 5.93:1 with the same dark text. */ --active-pill-top: #9f7731; } :root[data-theme="light"] .sidebar { background: linear-gradient(180deg, #fbf6e8, #f2ead4); } * { box-sizing: border-box; } body { background: var(--navy); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; line-height: 1.6; min-height: 100vh; overflow-x: hidden; } .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { flex: 0 0 236px; background: linear-gradient(180deg, #0d141f, #0a0f17); border-right: 1px solid var(--border); padding: 1.75rem 1.1rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } .sidebar-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 1.45rem; color: var(--gold-bright); text-align: center; letter-spacing: 0.03em; padding-bottom: 1.25rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .side-nav { display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; background: var(--navy-panel); } .side-nav a { display: block; background: transparent; color: var(--nav-text); text-decoration: none; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; text-align: left; padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; transition: background 0.12s ease, border-color 0.12s ease; } .side-nav > *:last-child { border-bottom: none; } .side-nav a:hover { background: var(--navy-panel-2); border-left-color: var(--border-light); } .side-nav a:active { background: var(--navy-panel-2); } /* CR #71 Phase 1 (Member H4): text was white (#ffffff) -- 3.13:1 (light theme) / 2.38:1 (dark theme) against this gold gradient, both failing AA. Switched to #16130c, the same near-black already used for a.btn/button text on this exact gold background elsewhere in this file (existing convention, reused rather than inventing a new color) -- verified 5.93-10.01:1 across both themes' gradient stops. text-shadow removed since it was tuned for legibility of white text and serves no purpose under dark text. */ .side-nav a.active { background: var(--gold); background-image: linear-gradient(180deg, var(--active-pill-top), var(--gold)); border-left-color: var(--gold-bright); color: #16130c; } .side-nav-divider { border-top: 1px solid var(--border-light); margin: 0; } /* Mobile-only bottom nav bar's Home toggle -- hidden on desktop (nav is a short single column there, no collapsing needed); shown inside the max-width:760px block below. */ .mobile-nav-home-toggle { display: none; } .side-nav a.mobile-nav-theme-link { display: none; } /* Light/dark toggle -- sits below the nav box with a visible gap (margin-top), not inside it. Persists via set-theme.php: cookie always, plus site_users.theme_preference when logged in, so a chosen theme is already correct on the very next login, any device. */ .theme-toggle { display: flex; margin-top: 1rem; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; background: var(--navy-panel); } .theme-toggle a { flex: 1; text-align: center; padding: 0.5rem 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .theme-toggle a + a { border-left: 1px solid var(--border-light); } .theme-toggle a:hover { background: var(--navy-panel-2); } .theme-toggle a.active { background: var(--navy-panel-2); color: var(--gold-bright); } /* Pins a form's submit action to the bottom of the viewport while scrolling a long list, so it's always reachable without scrolling back down (or up) to find it. */ .sticky-action-bar { position: sticky; bottom: 0; z-index: 5; margin-top: 1rem; padding: 0.85rem 1rem; background: var(--navy-panel); border: 1px solid var(--border-light); border-radius: 8px; box-shadow: 0 -6px 20px rgba(0,0,0,0.25); } .side-nav a.side-nav-quiet { color: var(--muted); font-weight: 500; border-left-color: transparent; } .side-nav a.side-nav-quiet:hover { color: var(--gold-bright); background: var(--navy-panel-2); } /* Admin sidebar only -- slightly smaller type/padding, more compact than the public nav. */ .admin-nav a { font-size: 0.78rem; padding: 0.55rem 0.85rem; } .main-col { flex: 1 1 auto; min-width: 0; max-width: 780px; margin: 0 auto; padding: 0 1.5rem 4rem; } /* Banner + nav lock in place while the page content scrolls beneath them (Alvin's explicit request) -- .sidebar already had its own independent sticky/top:0 for desktop; this adds the same treatment to the banner. z-index keeps both above scrolling content underneath. */ .banner-block { position: sticky; top: 0; z-index: 5; background: var(--navy); } h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--gold-bright); font-weight: 600; letter-spacing: 0.02em; } h1 { font-size: 2.1rem; text-align: center; margin: 0 0 0.5rem; } h2 { font-size: 1.35rem; margin: 1.5rem 0 0.75rem; } h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; } .banner { display: block; width: 100%; height: 200px; object-fit: cover; object-position: center 22%; margin: 0 0 1.25rem; border-radius: 0 0 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } p { color: var(--text); } p.intro { color: var(--muted); text-align: center; margin-bottom: 1.5rem; } .muted { color: var(--muted); font-size: 0.88rem; } a { color: var(--gold); } a.btn, button { display: block; width: 100%; background-color: var(--gold); background-image: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #16130c; border: 1px solid rgba(0,0,0,0.15); padding: 0.9rem 1.25rem; border-radius: 8px; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; margin: 0.5rem 0; text-align: center; transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35); } a.btn:hover, button:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4); transform: translateY(-1px); } a.btn:active, button:active { transform: translateY(0); } a.btn.secondary { background: var(--navy-panel); background-image: none; color: var(--text); border: 1px solid var(--border-light); box-shadow: none; font-weight: 500; } a.btn.secondary:hover { background: var(--navy-panel-2); box-shadow: none; filter: none; } .btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; } .btn-row a.btn, .btn-row button { margin: 0.5rem 0; } /* CR #62: compact action button for cards/tables -- auto-width, still polished, not the tiny cramped inline-styled overrides scattered across admin pages before this. */ a.btn.btn-action, button.btn-action { display: inline-block; width: auto; padding: 0.55rem 1.15rem; font-size: 0.86rem; border-radius: 7px; margin: 0.35rem 0.35rem 0.35rem 0; } a.btn.btn-action.secondary, button.btn-action.secondary { font-weight: 600; } /* Status-colored outline variant for semantic actions (e.g. Church Outreach's red/yellow/green) -- pass the color via the --status-color custom property inline, keep the sizing/shape from .btn-action. */ a.btn.btn-action.btn-status, button.btn-action.btn-status { background: transparent; background-image: none; color: var(--status-color, var(--text)); border: 1px solid var(--status-color, var(--border-light)); box-shadow: none; font-weight: 600; } a.btn.btn-action.btn-status:hover, button.btn-action.btn-status:hover { background: rgba(255,255,255,0.04); box-shadow: none; filter: none; } .slot { display: block; width: 100%; text-align: left; background: var(--navy-panel); border: 1px solid var(--border); color: var(--text); padding: 0.95rem 1.1rem; margin: 0.5rem 0; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.98rem; transition: border-color 0.12s ease, background 0.12s ease; } .slot:hover { border-color: var(--gold); background: var(--navy-panel-2); } .card { background: var(--navy-panel); border: 1px solid var(--gold); border-radius: 12px; padding: 1.75rem; margin-top: 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.25); position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* CR #62: compact card for grid layouts -- same gold-bordered identity as .card, tighter padding/margin so more information portals fit proportionately on screen. */ .card.compact { padding: 1.15rem 1.3rem; margin-top: 0; } /* CR #62: responsive multi-column card grid -- replaces the old one-card-per-row vertical stack on information-portal pages (dashboard, Church Outreach, Journey Health, Organizations). */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 1.25rem; } .info-grid .card, .info-grid .card.compact { margin-top: 0; } form { margin-top: 1rem; } label { display: block; margin: 0.6rem 0 0.3rem; font-size: 0.92rem; } /* CR #71 Phase 2 (Public #2 / Member M3): input[type=tel] and input[type=search] were never included in this shared width rule -- confirmed by grep, every type=tel/type=search field site-wide (signup.php phone, church-connect.php phone, account.php Church Phone Number, media.php search) fell back to the browser's native ~150-170px default width instead of the shared 100% width every other input type gets. One root-cause fix here resolves all 4 reported occurrences at once. */ input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], input[type=date], input[type=time], textarea, select { width: 100%; background: var(--navy-panel-2); border: 1px solid var(--border-light); color: var(--text); border-radius: 6px; padding: 0.6rem 0.75rem; font-family: 'Inter', sans-serif; font-size: 0.95rem; } textarea { min-height: 100px; resize: vertical; } /* WebKit/Blink render type=search with native rounded-corner chrome (and reserve inner padding for their own cancel-X icon) that fights the box-style above -- normalize to a plain box like every other input type now that it shares the same width rule. */ input[type=search] { appearance: none; -webkit-appearance: none; } /* CR #71 Phase 1 (Member H6): native input[type=checkbox] was completely unstyled -- in dark theme the OS-default checked control (dark tick on dark control) measured 1.24:1, effectively invisible. Custom-built via appearance:none + a ::after checkmark since styling a native control's internal check glyph directly is unreliable cross-browser. Checked-state fill reuses the same gold gradient + #16130c dark checkmark already established for a.btn/.side-nav a.active elsewhere in this file (same "text/mark on gold" pattern, not a new color introduced). width/height carry !important solely to win over two known inline style="width:auto" attributes on the exact two checkboxes named in this finding (account.php, prayer-request.php) -- done this way (not by editing those PHP files) to keep this build's footprint entirely inside style.css, per this phase's file-conflict-avoidance scope. */ input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px !important; height: 20px !important; min-width: 20px; display: inline-block; vertical-align: middle; margin: 0 0.45rem 0 0; padding: 0; background: var(--navy-panel-2); border: 1.5px solid var(--border-light); border-radius: 4px; position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.12s ease, border-color 0.12s ease; } input[type=checkbox]:hover:not(:disabled) { border-color: var(--gold); } input[type=checkbox]:checked { background: var(--gold); background-image: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); } input[type=checkbox]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #16130c; border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type=checkbox]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } input[type=checkbox]:disabled { opacity: 0.55; cursor: default; } hr, .divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } /* Devotion card */ .scripture-block { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--gold-bright); font-size: 1.15rem; border-left: 3px solid var(--gold); padding: 0.5rem 0 0.5rem 1rem; margin: 0.75rem 0 1.25rem; } .scripture-ref { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.85rem; color: var(--muted); } .reflection-list { list-style: none; padding: 0; margin: 0.5rem 0; } .reflection-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .reflection-list li:last-child { border-bottom: none; } .reflection-list li::before { content: "\2022"; color: var(--gold); margin-right: 0.5rem; } .prayer-block, .challenge-block { background: var(--navy-panel-2); border-radius: 8px; padding: 1rem 1.15rem; margin-top: 0.5rem; } /* Track picker */ .track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1rem 0; } .track-grid label { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem 0.5rem; margin: 0; background: var(--navy-panel-2); border: 1px solid var(--border-light); border-radius: 8px; cursor: pointer; font-size: 0.92rem; } .track-grid input[type=radio] { display: none; } .track-grid input[type=radio]:checked + span { color: var(--gold-bright); font-weight: 600; } .track-grid label:has(input:checked) { border-color: var(--gold); background: var(--navy-panel); } /* Audio player */ .player-controls { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; } .player-controls button { width: auto; flex: 0 0 auto; padding: 0.7rem 1.1rem; margin: 0; } .now-playing { flex: 1; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--gold-bright); } .track-list { list-style: none; padding: 0; margin: 0.75rem 0 0; } .track-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.4rem; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .track-list li:hover { border-color: var(--gold); background: var(--navy-panel-2); } .track-list li.playing { border-color: var(--gold); background: var(--navy-panel-2); color: var(--gold-bright); } /* CR #71 Phase 2 (Public finding 4 / Member L4): small per-item visual anchor for the media list, which previously had none at all. Real video thumbnails from YouTube's public CDN where available (img), a themed icon box as the fallback (span.media-thumb-icon) -- both share the same fixed 56x42 footprint so the row layout doesn't jump between the two. */ .media-thumb { width: 56px; height: 42px; flex-shrink: 0; border-radius: 4px; object-fit: cover; background: var(--navy-panel-2); } .media-thumb-icon { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border: 1px solid var(--border); } .media-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .media-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); } .media-title:hover { color: var(--gold-bright); } .row-actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; } .save-star, .share-btn { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--gold); padding: 0.25rem 0.5rem; flex-shrink: 0; } .share-btn { font-size: 1.05rem; } .save-star:hover, .share-btn:hover { color: var(--gold-bright); } /* Church finder results */ .church-result { padding: 0.95rem 1.1rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.6rem; background: var(--navy-panel); } .church-result h3 { margin: 0 0 0.25rem; font-size: 1.05rem; } .church-rating { color: var(--gold); font-weight: 600; } /* Admin table */ table.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } table.admin-table th, table.admin-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } table.admin-table th { color: var(--gold); font-weight: 500; position: sticky; top: 0; background: var(--navy-panel); z-index: 1; box-shadow: 0 1px 0 var(--border); } table.music-matrix { table-layout: fixed; } table.music-matrix th, table.music-matrix td { padding: 0.3rem 0.15rem; font-size: 0.6rem; text-align: center; word-break: break-word; overflow-wrap: anywhere; } table.music-matrix th:first-child, table.music-matrix td:first-child { text-align: left; } .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.78rem; } .badge.queued { background: var(--navy-panel-2); color: var(--muted); } .badge.published { background: rgba(201,162,92,0.18); color: var(--gold-bright); } .badge.spam-flagged { background: rgba(255,149,0,0.18); color: #ff9500; } .badge.risk-low { background: rgba(95,214,138,0.18); color: #5fd68a; } .badge.risk-medium { background: rgba(224,185,111,0.18); color: #e0b96f; } .badge.risk-high { background: rgba(255,107,100,0.18); color: #ff6b64; } .pc-live-banner { display: none; text-align: center; font-weight: 700; font-size: 1.05rem; padding: 0.9rem 1.25rem; border-radius: 10px; margin-bottom: 1.25rem; text-decoration: none; } .pc-live-banner.pc-red { display: block; background: rgba(224, 69, 63, 0.12); border: 2px solid #e0453f; color: #ff6b64; animation: pc-flash 1.4s ease-in-out infinite; } .pc-live-banner.pc-green { display: block; background: rgba(52, 199, 89, 0.12); border: 2px solid #34c759; color: #5fe38a; animation: pc-flash 3s ease-in-out infinite; } .pc-live-banner.pc-red:hover { color: #ff6b64; } .pc-live-banner.pc-green:hover { color: #5fe38a; } @keyframes pc-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .rs-live-banner { display: none; text-align: center; font-weight: 700; font-size: 1.05rem; padding: 0.9rem 1.25rem; border-radius: 10px; margin-bottom: 1.25rem; text-decoration: none; } .rs-live-banner.rs-red { display: block; background: rgba(224, 69, 63, 0.12); border: 2px solid #e0453f; color: #ff6b64; animation: pc-flash 1.4s ease-in-out infinite; } .rs-live-banner.rs-green { display: block; background: rgba(52, 199, 89, 0.12); border: 2px solid #34c759; color: #5fe38a; animation: pc-flash 3s ease-in-out infinite; } .rs-live-banner.rs-red:hover { color: #ff6b64; } .rs-live-banner.rs-green:hover { color: #5fe38a; } /* CR #61 (+ T-RW107 follow-up): live-session roster row, shared by the minister/ intercessor-facing block (id="rs-live-roster", includes the guide link) and the participant-facing block (id="rs-live-roster-participant", name(s) only, no link). */ .rs-live-roster { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: center; text-align: center; font-size: 0.88rem; color: var(--muted); margin-top: -0.75rem; margin-bottom: 1.25rem; } .rs-live-roster strong { color: var(--text); font-weight: 600; } .rs-live-roster a { color: var(--gold); font-weight: 600; } .rs-live-roster a:hover { color: var(--gold-bright); } .rs-end-session-row { text-align: center; margin-top: -0.75rem; margin-bottom: 1.25rem; } .rs-end-session-btn { display: inline-block; width: auto; padding: 0.55rem 1.5rem; font-size: 0.9rem; margin: 0; } .rs-end-session-btn:disabled { opacity: 0.6; cursor: not-allowed; filter: none; transform: none; } @media (prefers-reduced-motion: reduce) { .pc-live-banner.pc-red, .pc-live-banner.pc-green, .rs-live-banner.rs-red, .rs-live-banner.rs-green { animation: none; } } /* Responsive */ @media (max-width: 860px) { /* CR #41: same safety net the installed-PWA block below already uses -- without it, a page with one slightly-too-wide element (a wide table, an unwrapped long string, etc.) blows the whole layout wider than the phone's viewport instead of wrapping or clipping cleanly. This was only ever guarded for standalone/PWA launches, not regular mobile browser tabs, which is what CR #41 reported across admin screens. */ html, body { overflow-x: clip; max-width: 100vw; } .app-shell { flex-direction: column; } /* Nav locked to the bottom of the screen (2026-08-26 per Alvin, replacing the earlier top-collapsed version he didn't like the look of) -- it no longer sits in the flow between the banner and page content at all, so it can't compete with the sticky banner/video/list for vertical space on any page, and content never scrolls behind it the way it did when the collapsed toggle sat directly under the banner. Originally Home + the Dark/Light toggle stayed visible at all times, with the rest of the nav collapsed until Home was tapped, mirroring the installed-PWA tab bar below but for regular mobile too. */ /* Member mobile nav label + theme placement (2026-09-15, T-RW-MEMBER-MOBILE-MENU-LABEL-AND-THEME-MOVE) -- supersedes the "stay visible at all times" behavior described above, per direct owner instruction. The toggle button now reads "Menu" instead of "Home", and the Dark/Light theme links move inside the collapsible .side-nav list itself (as .mobile-nav-theme-link, rendered via the display:none/display:block idiom below) instead of remaining in a separate always-visible .theme-toggle box. The standalone .theme-toggle box is hidden on mobile (display:none, added below) and only continues to render on desktop, where it is untouched. */ .sidebar { flex: 0 0 auto; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 50; height: auto; max-height: 75vh; overflow-y: auto; width: 100%; padding: 0.6rem 1rem; border-right: none; border-top: 1px solid var(--border); border-bottom: none; box-shadow: 0 -4px 16px rgba(0,0,0,0.35); background: var(--navy); } .sidebar-brand { display: none; } .mobile-nav-home-toggle { display: block; width: 100%; padding: 0.4rem; background: var(--navy-panel-2); border: 1px solid var(--border-light); border-radius: 6px; color: var(--gold); font-weight: 600; font-size: 0.85rem; cursor: pointer; } .side-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4rem; border: none; border-radius: 0; overflow: hidden; background: transparent; max-height: 0; margin-top: 0; transition: max-height 0.25s ease, margin-top 0.25s ease; } .side-nav.expanded { max-height: 700px; margin-top: 0.6rem; } .side-nav a { flex: 0 0 auto; padding: 0.5rem 0.85rem; font-size: 0.82rem; border: 1px solid var(--border-light); border-radius: 6px; text-align: center; } .side-nav-divider { display: none; } .theme-toggle { display: none; } .side-nav a.mobile-nav-theme-link { display: block; } /* Banner-then-content order (mobile only) -- .main-col itself stops rendering as a box (display:contents) so banner-block and main-col-body become individually orderable flex items of .app-shell; .sidebar is fixed-position now so its own order is inert, but leaving it set is harmless and avoids touching working plumbing unnecessarily. */ .main-col { display: contents; } .banner-block { order: 1; } .sidebar { order: 2; } .main-col-body { order: 3; max-width: 680px; width: 100%; padding: 0 1.5rem 6.5rem; box-sizing: border-box; } /* Admin panel opt-out (2026-08-26) -- the member-site bottom-locked-nav redesign above (collapsed .side-nav, fixed-bottom .sidebar) was never meant to touch the admin panel, which shares the same .sidebar/.side-nav class names but has no toggle button or JS to expand a collapsed nav. Left as-is, admin's entire nav collapsed to an invisible sliver on mobile with no way to reopen it. .admin-sidebar/.admin-nav are more specific than the bare selectors above, so this restores admin's original always-visible, sticky-top mobile nav without touching the member-site rules at all. */ /* Admin panel mobile nav fix (2026-09-15) -- supersedes the 2026-08-26 opt-out above. That patch existed only because admin/partials/header.php had no toggle button/JS to re-expand a collapsed nav -- opting into the general rules below left admin's whole nav an unreachable sliver. admin/partials/header.php now has its own .mobile-nav-home-toggle button (mirroring the member site's), so admin can safely inherit the same fixed-bottom, collapsed-by-default nav mechanism the member site already uses, instead of forcing a sticky-top, always-expanded nav that ate most of the mobile viewport (T-RW-MOBILE-MENU-COLLAPSIBLE-ARCHIVE-BLOCKED). admin/partials/header.php's .main-col has no .banner-block/.main-col-body wrapper (unlike the member site), so it doesn't inherit the member site's 6.5rem bottom-padding reservation for the fixed nav bar -- the .admin-app-shell rule below adds the admin-specific equivalent so page content (e.g. the Archive button) isn't left flush against the fixed nav bar. */ .admin-app-shell { padding-bottom: 6.5rem; } } /* Installed PWA: pin nav to the bottom like a native app tab bar, instead of the browser-mode top nav used above. Deliberately NOT gated on max-width — standalone launch overwhelmingly means a phone/tablet home-screen icon, and depending on a width check here was letting the desktop side-by-side layout leak through on some devices, causing content to lay out at desktop width and simply get clipped instead of actually reflowing narrow. */ @media (display-mode: standalone) { html, body { overflow-x: hidden !important; max-width: 100vw !important; } .app-shell { flex-direction: column !important; width: 100% !important; max-width: 100vw !important; } .main-col { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; overflow-x: hidden !important; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100% !important; max-width: 100vw !important; flex: 0 0 auto !important; height: auto !important; z-index: 500; border-right: none !important; border-bottom: none; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,0.35); max-height: 190px; overflow-y: auto; padding: 0.5rem; box-sizing: border-box; } .sidebar-brand { display: none; } .side-nav { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; } .side-nav a { flex: 1 1 30%; border-radius: 4px; background: var(--navy-panel); background-image: none; color: var(--nav-text); border: 1px solid var(--border-light); box-shadow: none; font-weight: 500; padding: 0.6rem 0.4rem; font-size: 0.76rem; letter-spacing: normal; } .side-nav a:hover, .side-nav a:active { filter: none; background: var(--navy-panel-2); transform: none; } /* CR #71 Phase 1 (Member H4): same fix as the non-PWA .side-nav a.active rule above -- this standalone/PWA-mode duplicate had the identical white-text-on-gold contrast bug. */ .side-nav a.active { background: var(--gold); background-image: linear-gradient(180deg, var(--active-pill-top), var(--gold)); color: #16130c; box-shadow: none; } .main-col { padding-bottom: 13rem; } } @media (max-width: 480px) { .main-col { padding: 0 0.85rem 3rem; } h1 { font-size: 1.6rem; } .card { padding: 1.1rem; } .banner { height: 170px; margin: 0 0 1rem; border-radius: 0 0 8px 8px; } .track-grid { grid-template-columns: 1fr; } .side-nav a { font-size: 0.78rem; padding: 0.45rem 0.7rem; } } @media (min-width: 481px) and (max-width: 860px) { .main-col { padding: 0 1.5rem 3.5rem; } } @media (min-width: 861px) { .main-col { max-width: 680px; } } @media (display-mode: standalone) { .pwa-hide-explore { display: none !important; } } /* Status/semantic colors (red=needs attention, green=clear, blue=ready-for-review, gold=warning) -- theme-aware, added 2026-08-26 alongside the admin dark/light toggle. The dark-theme values are bright pastels tuned to pop against navy; against a light/cream background those same values read as washed-out and fail contrast, so light mode gets darker, more saturated variants -- forest green and crimson/dark red specifically, per Alvin's direction, not just "any darker shade" -- plus matching darker blue/gold. Used via var(--status-*) in inline styles wherever a status dot/badge/button needs a semantic color, instead of a hardcoded hex. */ :root { --status-red: #ff6b64; --status-green: #5fe38a; --status-blue: #5EC8E3; --status-gold: #e0b96f; --status-orange: #ff9f4d; } :root[data-theme="light"] { --status-red: #b71c1c; --status-green: #1b5e20; --status-blue: #1a7ea6; --status-gold: #96700e; --status-orange: #b0530a; }