:root { --accent: #2e7d32; --accent-dark: #235e27; --accent-soft: #e7f3e8; --accent-contrast: #ffffff; --bg: #fafbfa; --surface: #ffffff; --text: #1a1f1b; --text-muted: #667066; --border: #e2e7e2; /* An approved Model credit's own gold/amber pair (.model-pill-approved, styles.css) — deliberately its own color, not --accent, so a starred Model chip reads as "reviewed identity" rather than blending into the same green/pink an ordinary tag pill already uses for both themes. */ --model-gold: #7a5b00; --model-gold-soft: #fff3cd; } /* Dark palette — applies automatically when the visitor's OS/browser prefers dark (unless THEME=light pins it to light), and always when THEME=dark pins it explicitly. See lib/brand.js (getThemeAttr) and server.js, which set data-theme="light"/"dark" on from the THEME env var, or leave it unset for "system" so this media query decides. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #eb004e; --accent-dark: #bc003e; --accent-soft: #3a0f1e; --accent-contrast: #ffffff; --bg: #1a1216; --surface: #221a1e; --text: #f4ecee; --text-muted: #a89aa0; --border: #3a2d32; --model-gold: #ffd666; --model-gold-soft: #3d2f0a; } } :root[data-theme="dark"] { --accent: #eb004e; --accent-dark: #bc003e; --accent-soft: #3a0f1e; --accent-contrast: #ffffff; --bg: #1a1216; --surface: #221a1e; --text: #f4ecee; --text-muted: #a89aa0; --border: #3a2d32; --model-gold: #ffd666; --model-gold-soft: #3d2f0a; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; } a { color: var(--accent); } .container { max-width: 860px; margin: 0 auto; padding: 0 20px; } /* ---- site header ---- */ header.site-header { border-bottom: 1px solid var(--border); background: var(--surface); } header.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .brand { font-size: 17px; font-weight: 700; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px; } /* Highlights the logo itself while on the Dashboard (round-32 punchlist, app.js's markActiveNavLink()) — same accent-color "currently on this page" treatment .site-nav a.active/.footer-links a.active already give every other active link, just applied to .brand instead since Dashboard has no nav link of its own to mark (the brand link already doubles as the Dashboard shortcut for a logged-in visitor — see hydrateSiteNav). */ .brand.active { color: var(--accent); } /* Home page only (index.html) — wraps .brand plus the optional BRAND_TAGLINE span so both stay one flex item within the header's own space-between layout (header.site-header .container), same as .brand alone was before. On every other page the tagline placeholder is never in the markup at all, so .brand-wrap there is just an unstyled, harmless wrapper. */ .brand-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .brand-tagline { font-size: 13px; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .brand-tagline { display: none; } } /* Impersonate User (later round) — the sticky read-only-mode banner app.js's renderImpersonationBanner() prepends to on every page while this browser holds an impersonation token (see that function's own comment for why this is the one deliberate exception to the feature's "invisible" design — invisible to the TARGET, not to the admin currently looking through their account). Danger-red, same tone this app already reserves for "something needs your attention" elsewhere (.btn-danger, .admin-legacy-user-status-delivery-bad) — impersonation is a normal, intended admin action, but the banner still needs to read as "not your own browsing session right now" at a glance, not blend in as ordinary page chrome. Sticky rather than fixed so it scrolls out of the way of nothing (no page content needs to shift down to make room below a fixed bar), but still reappears the instant you scroll back to the top of a long page. z-index sits above .site-nav's own dropdowns (30) and every ordinary page element, but well below Quick Hide's deliberately-maximal one (2147483647, see that feature's own comment) since that's an unrelated full-page cover, not something this banner should compete with. */ .impersonation-banner { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 10px 16px; background: #c62828; color: #fff; font-size: 14px; font-weight: 600; text-align: center; } .impersonation-banner .btn { padding: 6px 14px; font-size: 13px; background: #fff; border-color: #fff; color: #c62828; } .impersonation-banner .btn:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.85); color: #a92121; } .site-nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; column-gap: 14px; font-size: 14px; } .site-nav a { text-decoration: none; font-weight: 500; } /* :not(.btn) on both of these matters — a plain ".site-nav a" or ".site-nav a:hover" selector has higher specificity than ".btn-primary"/ ".btn-primary:hover" (class+element beats class alone), so without this exclusion these would repaint a primary nav button's text back to the accent color — the same color as its own background (the "Create Account" button bug: accent-on-accent text, in both its default and hover states). Excluding .btn here lets button-classed nav links fall through entirely to the global .btn/.btn-primary rules below instead. */ .site-nav a:not(.btn) { color: var(--text-muted); } .site-nav a:not(.btn):hover { color: var(--accent); } /* The current page's own nav link — same accent color as the hover state above (so it reads as "you're already here" using the same visual language as "go here"), plus a heavier weight so it's still visibly distinct from an ordinary hover once the mouse moves away. Set by app.js's markActiveNavLink(), which runs on every page (part of initSharedNav). :not(.btn) for the same reason the hover rule above needs it — see that rule's own comment. */ .site-nav a.active:not(.btn) { color: var(--accent); font-weight: 600; } /* "Create Account" (/register) is a .btn-primary, not a plain nav link, so the :not(.btn) rule just above never touches it — its own accent-colored background already uses the same color the plain-link .active state above does, so recoloring text here would look identical to its ordinary state instead of visibly different. An inset ring in the button's own contrast color reads as "you're already here" without fighting its existing look. Set by the same app.js markActiveNavLink() as every other nav highlight here. */ .site-nav a.btn-primary.active { box-shadow: 0 0 0 2px var(--accent-contrast) inset; } .site-nav a.btn:not(.btn-primary) { color: var(--accent); } /* The Admin nav link — an icon + a live open-reports count badge (round-32 nav-order request: "Admin (switch to admin-related icon)") in place of the old plain "Admin"/"Admin (n)" text link. Same plain-icon-button shape as .notif-bell just below (no border/background box, unlike .mask-mode-toggle/.topo-mode-toggle further down — this is a navigation LINK, not a toggle switch, so it keeps the nav's own plain-link look) — position: relative anchors .admin-nav-badge the same way .notif-bell-wrap anchors .notif-badge. */ .admin-nav-link { position: relative; display: inline-flex; align-items: center; padding: 4px; } .admin-nav-icon { font-size: 16px; line-height: 1; } /* Same shape/position as .notif-badge above (see that rule's own comment on why a badge instead of inline text now that this link is an icon, not a text label) — kept as its own class rather than sharing .notif-badge directly since the two badges anchor to differently-shaped parents (.admin-nav-link has no wrapping element of its own the way .notif-bell-wrap does) and may want to drift independently later. */ .admin-nav-badge { position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } /* .user-identity is an even before a username is known (falls back to plain email text with its href removed — see dashboard.js renderIdentity) so it needs its own not-actually-a-link cursor, since :not(.btn) above already colors it like every other nav link regardless of href. */ .user-identity:not([href]) { cursor: default; } .user-identity:not([href]):hover { color: var(--text-muted); } /* Round 50/51: the pink Premium-membership checkmark next to the username in the main nav went through two prior fixes, both now superseded. Round 50 made it position:absolute inside #userIdentity to stop its late arrival (app.js's hydrateMemberNav(), an async follow-up to the rest of the nav's own load) from shoving every later flex item to the right. Round 51 then shrank it (10px/7px, down from 15px/10px) because absolute positioning had put it outside .site-nav's own 14px column-gap rhythm, and the full-size mark was actually wider than that gap, so no offset could avoid touching either the username or the bell. Reported a third time as still not right: even overlap-free, an absolutely-positioned element never actually participates in .site-nav's column-gap, so the spacing around it could never truly match the even rhythm between the nav's own text links no matter how its offset was tuned. Fixed properly this time in the markup itself, not CSS: the checkmark (#userMemberCheck, MEMBER_CHECK_NAV_HTML in lib/brand.js) is now rendered as #userIdentity's own NEXT SIBLING directly inside .site-nav, not nested inside #userIdentity at all — so it's a real flex item and .site-nav's existing column-gap:14px spaces it evenly on both sides for free, exactly like every other nav item, with no manual offset math and no shrinking. It's revealed/hidden by app.js's hydrateMemberNav() (toggling .hidden, not insertAdjacentHTML) and, on a return visit, by the cached-eligibility early-reveal script EARLY_MEMBER_NAV_SCRIPT_HTML (lib/brand.js) — the same pattern this file's own #adminNavLink and .mask-mode-toggle already use, so a returning eligible member sees it in place from the very first frame instead of a late pop-in. Only `margin-left: 0` is needed here, to cancel out .member-check's own 3px margin-left below (meant for plain inline-text contexts) so it doesn't double up with .site-nav's own gap and throw off the even spacing on that one side. */ #userMemberCheck { margin-left: 0; } /* The notification bell (public/app.js's hydrateNotifications()) — lives in every page's .site-nav (see the shared header markup each static page and lib/publicPages.js's own siteHeader() all carry), same nav-logged-in show/hide convention as the rest of that nav except on the handful of always-logged-in pages (account.html/dashboard.html/membership.html) where it's unconditionally visible, matching #userIdentity's own treatment on those same pages. position: relative anchors .notif-dropdown below to this wrapper, not to the page. */ .notif-bell-wrap { position: relative; display: flex; align-items: center; } .notif-bell { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-muted); padding: 4px; position: relative; } .notif-bell:hover { color: var(--accent); } /* Unread count — a small solid dot with the number in it, same "impossible to miss, doesn't need to be read to register" convention the Admin nav link's own "(n)" open-reports count uses, just a badge instead of inline text since this sits on an icon, not a text label. Hidden outright (not just showing "0") whenever there's nothing unread — see app.js's hydrateNotifications(). */ .notif-badge { position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } /* Right-aligned under the bell (not centered/left) so it never runs off the right edge of the viewport regardless of where the bell itself sits in a wide .site-nav — the same reasoning a browser's own address-bar menus right-align from whichever icon opened them. */ .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 30; padding: 6px 0; } .notif-dropdown-header { font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 6px 14px 8px; } .notif-item { display: block; padding: 8px 14px; font-size: 13.5px; color: var(--text); text-decoration: none; } .notif-item:hover { background: var(--accent-soft); } /* An unread row's own left accent stripe — the badge count is already cleared the moment the dropdown opens (see app.js's own comment on why), so this is the one remaining "these are the ones you hadn't seen yet" signal once it has. */ .notif-item.unread { box-shadow: inset 3px 0 0 var(--accent); } .notif-item-time { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .notif-empty { padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center; } /* The user-icon nav dropdown (public/app.js's initUserMenu()) — Activity and Account, folded behind one icon the same way the bell above folds a whole notification list behind one icon. Same three-rule shape as .notif-bell-wrap/.notif-bell/.notif-dropdown just above (position: relative anchor, icon-only trigger button, absolutely-positioned right-aligned panel) — kept as its own small set of rules rather than reusing the .notif-* classes directly, since "this is the bell" and "this is the user menu" are different enough concepts that sharing a class name would just make each one's CSS harder to read in isolation, the same call every other pair of near-identical widgets in this stylesheet already makes (.view-toggle-btn vs .type-filter-btn, etc). */ .user-menu-wrap { position: relative; display: flex; align-items: center; } .user-menu-btn { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-muted); padding: 4px; } .user-menu-btn:hover { color: var(--accent); } /* Same "currently on this page" treatment .site-nav a.active gives a plain link — this is a