/* ---- Design tokens ------------------------------------------------- Palette: dawn breaking over dusk parchment. The page background is a soft, pastel gradient — cool night giving way to warm blush and gold — read top to bottom as darkness lifting into first light: hope, not dusk waiting. Candlelight amber is still the one warm accent used only where something is actually "lit" (the prayer count / the pray button), softened here so it sits comfortably inside the pastel gradient instead of competing with it. Dark mode (below) mirrors the same dawn narrative at night: a dusk gradient (deep indigo into a muted ember) instead of the light version's bright sky, same "candlelight is the one warm color" logic, all pairs re-verified for contrast rather than just inverted. Applied automatically via prefers-color-scheme, or forced by data-theme="light"/"dark" on (js/nav.js sets this from the logged-in user's saved preference). The three --gradient-bg stops were originally near-identical in perceived lightness (all ~12-13%), which made the gradient read as almost a flat fill rather than a visible transition — widened the spread (~9%-17% equivalent) while keeping the same indigo→plum→ember hue progression, so the direction is now genuinely visible, not just present in theory. ------------------------------------------------------------------- */ :root { --bg: #F7F1E9; --bg-card: #FFFEFB; /* A shade lighter than --bg-card, for small "raised" elements sitting on top of a card (e.g. each verse in the Bible verse picker) that need to read as distinguishable from the card itself. */ --bg-raised: #FFFFFF; --ink: #262B3D; --ink-soft: #5C6178; /* Slightly darker than --ink-soft, used only for the "time ago" half of a request card's meta line so the category name (still --ink-soft) reads as the more prominent of the two. */ --ink-meta-time: #4C5166; --accent: #C08A2E; --accent-glow: #F0C878; --line: #E7E0D4; --danger: #A5432F; --on-danger: #FFFFFF; --gradient-bg: linear-gradient(160deg, #E8EDF8 0%, #F6E9E5 48%, #FBEEDB 100%); --shadow-soft: 0 2px 14px rgba(38, 43, 61, 0.3); --nav-glass: rgba(255, 254, 251, 0.85); --crisis-bg: #FBEFE9; --crisis-border: #E3B9A6; --answered-bg: #FBF3E3; --btn-primary-hover: #333A54; /* Password strength meter — a generic weak→strong scale, kept separate from --accent (candlelight amber is reserved for "lit" elements). */ --strength-fair: #D9822B; --strength-good: #7BA23D; --strength-strong: #3E8E52; /* Form input/button surface — a lighter tint of --bg (the page's own background), not an unrelated color, so inputs and secondary buttons read as a distinct layer while still visibly belonging to the same palette as the rest of the page. (A prior attempt at "darker than --bg-card" landed on an over-saturated tan that clashed with the page's neutral cream/parchment tones — this is the correction.) Dark mode below uses the same "lighter tint of --bg" formula, which lands on a dark blue-gray rather than a light well, so it also flips --input-text/--input-text-soft to the light --ink/--ink-soft pair instead of keeping the dark navy pair light mode uses. */ --input-bg: #FBF7EF; --input-text: var(--ink); --input-text-soft: var(--ink-soft); /* Genuine input/textarea/select fields only (not .chip/.btn-secondary, which keep using --line) — same as --line in light mode, but dark mode below overrides this separately, since --line there reads as nearly invisible against --input-bg (they're almost the same lightness) whereas a border actually needs to stand out against the specific surface it's drawn on. */ --input-border: var(--line); --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", -apple-system, sans-serif; --font-mono: "IBM Plex Mono", monospace; /* Nav-only: a geometric-humanist sans (not the serif --font-display used for page titles) — stays crisp at the small sizes the bottom tab bar uses on mobile, where a serif's thin strokes get lost. */ --font-nav: "Manrope", -apple-system, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1B1E2B; --bg-card: #242838; --bg-raised: #2F3446; --ink: #EDEAE2; --ink-soft: #A6ABC0; --ink-meta-time: #8D91A3; --accent: #D9A84E; --accent-glow: #E8B85A; --line: #363C52; --danger: #E8785A; --on-danger: #1A0E0A; --gradient-bg: linear-gradient(160deg, #12141F 0%, #221B28 48%, #2E2013 100%); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4); --nav-glass: rgba(27, 30, 43, 0.85); --crisis-bg: #3A241E; --crisis-border: #5C3A2E; --answered-bg: #3A2E14; --btn-primary-hover: #DCD8CE; --strength-fair: #E0A050; --strength-good: #96C15C; --strength-strong: #5CC17E; /* Same "lighter tint of --bg" formula as light mode's --input-bg above, which here lands on a dark blue-gray rather than a light well — a few earlier attempts (reusing light mode's near-white bg-card verbatim, then two rounds of a beige/tan "darker" fix) all either clashed with the rest of dark mode's cool indigo palette or drifted into an unrelated tan hue entirely; staying in the same blue-gray family as --bg/--bg-card fixes both. Because this is now a dark surface, --input-text/--input-text-soft switch to the light --ink/--ink-soft pair instead of light mode's dark navy pair — dark text would be unreadable here. Nudged one shade lighter again (#2B2F42 → #343A52) per feedback that it needed a little more contrast against --bg-card — unlike light mode (input darker than its card), dark mode's input is already lighter than --bg-card, so lightening it further is what actually widens that gap here. */ --input-bg: #343A52; --input-text: var(--ink); --input-text-soft: var(--ink-soft); /* --line (#363C52) is nearly the same lightness as --input-bg here, so it reads as barely-there against an actual input field — a dedicated, visibly lighter border just for inputs instead. */ --input-border: #4C5372; } } :root[data-theme="dark"] { --bg: #1B1E2B; --bg-card: #242838; --bg-raised: #2F3446; --ink: #EDEAE2; --ink-soft: #A6ABC0; --ink-meta-time: #8D91A3; --accent: #D9A84E; --accent-glow: #E8B85A; --line: #363C52; --danger: #E8785A; --on-danger: #1A0E0A; --gradient-bg: linear-gradient(160deg, #12141F 0%, #221B28 48%, #2E2013 100%); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4); --nav-glass: rgba(27, 30, 43, 0.85); --crisis-bg: #3A241E; --crisis-border: #5C3A2E; --answered-bg: #3A2E14; --btn-primary-hover: #DCD8CE; --strength-fair: #E0A050; --strength-good: #96C15C; --strength-strong: #5CC17E; --input-bg: #343A52; --input-text: var(--ink); --input-text-soft: var(--ink-soft); --input-border: #4C5372; } * { box-sizing: border-box; } body { margin: 0; background: var(--gradient-bg); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); line-height: 1.5; } /* 820px, not the original 640px — widened so the Dashboard sub-nav's six pills (Dashboard/My Requests/Saved/Groups/Subscriptions/Settings, ~735px of natural content width) fit without needing their own horizontal scroll. There was no documented reason for 640px specifically (it wasn't tied to a readability constraint anywhere in this file or README) — it was just the original single-column-feed width, so this applies site-wide via the one shared .wrap class rather than carving out a special case for just the Dashboard pages. */ .wrap { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; } /* ---- Shared icon set (js/icons.js) — replaces the emoji this app used to render for nav items and card actions. Sized in `em`s, not a fixed px value, so each icon scales with whatever font-size its own context already sets (a nav link, a pill, a heading) rather than needing a size override everywhere it's used — the same approach FLAME_SVG/ .site-nav-flame-icon already take. currentColor means it always matches the surrounding text color unless a context overrides it (e.g. .flame inside .pray-btn, which still sets its own explicit stroke color). ---- */ .lucide-icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- Links — one consistent style site-wide. Deliberately does NOT need to exclude .site-nav-link/.notification-bell: both already set their own color and text-decoration explicitly, which wins on specificity alone. Uses --accent rather than the browser default blue, which is how this bug showed up in the first place — dashboard.html's plain links had no color rule at all, so they fell back to default link-blue, which fails contrast against the dark gradient background. ---- */ a { color: var(--accent); text-decoration: underline; } a:hover { color: var(--accent-glow); } /* ---- Site navigation --------------------------------------------------- One shared component (js/nav.js) rendered on every page. Breakpoint at 768px — the standard mobile/tablet boundary — splits it into two distinct styles: a fixed bottom tab bar on phones (the native-app pattern users already expect there) and a fixed top bar on tablet/desktop (the standard website pattern). Tablet and desktop share one treatment since this app's content is already capped at a fixed width (.wrap's max-width) — there's nothing left for a tablet-specific layout to do that the desktop one doesn't already do. ---- */ .site-nav { display: flex; align-items: center; } /* GetPrayer wordmark: the same flame mark used as the pray-button icon (js/common.js's FLAME_SVG) and the PWA/favicon, so the "lit candle" motif reads as one consistent brand identity everywhere it appears — not a second, unrelated icon design. Only shown on the tablet/desktop top bar — a left logo with nav links "to its right" is a website-header pattern, not a bottom-tab one. */ .site-logo { display: none; flex: 0 0 auto; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); } .site-logo-mark { width: 22px; height: 22px; flex: 0 0 auto; /* Same fill+stroke recipe as .pray-btn.lit's flame (and the mobile bottom nav's Home icon, .site-nav-flame-icon) — a plain fill alone reads noticeably thinner than that. */ fill: var(--accent-glow); stroke: var(--accent); stroke-width: 1.6; } .site-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; } .site-nav-links { display: flex; align-items: center; } .site-nav-link { display: flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--ink-soft); text-decoration: none; font-family: var(--font-nav); font-weight: 500; font-size: 0.85rem; border-radius: 8px; } .site-nav-link:hover { background: var(--bg); } .site-nav-link.active { color: var(--ink); font-weight: 600; } .site-nav-icon { font-size: 1rem; line-height: 1; } /* Home's icon on the mobile bottom tab bar (js/nav.js's HOME_FLAME_ICON) — an inline SVG, not emoji text, so it needs its own explicit box size instead of inheriting .site-nav-icon's font-size. Same fill+stroke as .site-logo-mark so it reads as the same brand mark (this base rule is itself always overridden by the mobile media query below — kept in sync with it anyway so nothing looks inconsistent if that override ever changes without this one being noticed). */ .site-nav-flame-icon { width: 1.2rem; height: 1.2rem; fill: var(--accent-glow); stroke: var(--accent); stroke-width: 1.6; } /* Groups the notification bell with whichever of "Log In" (logged out) or "Dashboard" (logged in) is present — see nav.js's renderMainNav — so they sit right next to each other at the far right of the bar, instead of clustering with Home at the left while the bell sits alone at the true right edge with a big gap in between. Positioned at the far right via margin-left:auto on the wider top bar (see desktop media query below); on mobile it's simply the last item in the bar, matching where the bell alone used to sit. */ .site-nav-right { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .notification-wrap { position: relative; flex: 0 0 auto; display: flex; } .notification-bell { display: flex; align-items: center; justify-content: center; padding: 8px 10px; font-size: 1.15rem; color: var(--ink-soft); border-radius: 8px; background: none; border: none; font: inherit; cursor: pointer; } .notification-bell:hover { background: var(--bg); } /* Anchored to .notification-wrap, not the button itself, so its position doesn't shift with the button's own padding/hover state. Opens downward from the top bar; the mobile media query below flips it to open upward from the bottom tab bar instead, since downward would run off-screen. */ .notification-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-soft); padding: 10px; z-index: 20; } .notification-section + .notification-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .notification-section-title { margin: 0 0 6px; font-family: var(--font-nav); font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .notification-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 4px; border-radius: 6px; color: var(--ink); text-decoration: none; } .notification-item:hover { background: var(--bg); } .notification-item-text { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notification-item-time { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); } .notification-empty { margin: 4px; font-size: 0.82rem; color: var(--ink-soft); } .notification-view-all { display: block; margin-top: 6px; font-size: 0.78rem; text-align: right; } /* Dull/greyscale until there's something new, then switches to --ink (which is already near-black in light mode / near-white in dark mode) at full opacity — reuses the existing theme token instead of hardcoding colors. */ .notification-bell svg { width: 1.15rem; height: 1.15rem; color: var(--ink-soft); opacity: 0.45; filter: grayscale(1); transition: color 0.15s ease, opacity 0.15s ease; } .notification-bell.has-unread svg { color: var(--ink); opacity: 1; filter: none; } .notification-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; display: flex; align-items: center; justify-content: center; background: var(--danger); color: var(--on-danger); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; border-radius: 999px; line-height: 1; } /* Tablet + desktop: fixed top bar. Logo left, nav links to its right with padding between them, bar height fixed at 56px so the logo's 36px height (bar height - 20px) is exact; width is auto since it's an icon+wordmark now, not a fixed-size placeholder box. */ @media (min-width: 768px) { body { padding-top: 56px; } .site-nav { position: fixed; top: 0; left: 0; right: 0; height: 56px; justify-content: flex-start; background: var(--nav-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 0 20px; z-index: 10; } .site-logo { display: flex; height: 36px; } .site-nav-links { gap: 12px; margin-left: 20px; } .site-nav-icon { display: none; } .site-nav-right { margin-left: auto; } /* Redundant with the logo (both go home) — hidden here, but still shown on the mobile bottom tab bar below, which has no logo at all. */ .nav-home-link { display: none; } } /* Mobile: fixed bottom tab bar, icon over label, app-like. No logo here — Home (the only item .site-nav-links ever renders here, everything else lives in .site-nav-right — see renderMainNav) sits flush against the bar's left edge instead, balancing the bell + Log In/Dashboard group pinned to the right by .site-nav-links' own flex:1. */ @media (max-width: 767px) { body { padding-bottom: 64px; } .wrap { padding-top: 15px; padding-bottom: 30px; } .site-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--nav-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 14px; z-index: 10; } .site-nav-links { flex: 1; justify-content: flex-start; } /* Every item in the bar — Home/Log In/Dashboard's two-line links, and the icon-only notification bell next to them — shares one explicit height and centers its own content within it, rather than sizing to content the way the desktop bar's links do. A label-less item (the bell) and two differently-sized icon types (Home's inline SVG vs. Log In/Dashboard's emoji glyph) would otherwise each size themselves slightly differently and throw the whole row's height off — an explicit shared height sidesteps that instead of chasing it via alignment tricks (aspect-ratio/stretch already proved fragile for a similar "match a sibling's height" case elsewhere in this file). */ .site-nav-link { flex-direction: column; justify-content: center; gap: 2px; height: 50px; padding: 0 10px; border-radius: 0; font-size: 0.68rem; } .site-nav-icon { font-size: 1.25rem; height: 1.25rem; display: flex; align-items: center; } /* Home's flame is deliberately bigger than the emoji icon beside it (a brand mark, not just a functional glyph) — the shared height/centering on .site-nav-link above is what keeps the row aligned despite that, not equal icon sizes. margin-top nudges it to look vertically centered against its own label, same reasoning as the save-star nudge below. fill+stroke matches the same treatment .pray-btn.lit's flame uses (accent-glow fill, accent stroke) — a plain fill alone (this icon's original, .site-logo-mark-matching treatment) reads noticeably thinner than the request cards' flame at this size. */ .site-nav-flame-icon { width: 1.9rem; height: 1.9rem; margin-top: 9px; fill: var(--accent-glow); stroke: var(--accent); stroke-width: 1.6; } .notification-wrap { height: 50px; } .notification-bell { height: 100%; padding: 0 10px; } .notification-bell svg { width: 1.25rem; height: 1.25rem; } /* The bell lives in a bottom-fixed bar here, so the dropdown opens upward instead of down (which would run off the bottom of the viewport), and is right-aligned to the screen edge rather than the narrow wrap element so it doesn't overflow off-screen on small phones. */ .notification-dropdown { top: auto; bottom: calc(100% + 8px); right: -6px; } } /* ---- Header ---- */ .page-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* The public wall's own header (index.html) — a 2-column grid instead of .page-header-row's plain flex row, so the verse (row 2, column 1) is constrained to the same width as the heading (row 1, column 1) rather than running the page's full width under the button. Column 2 is `auto` (the button's own content width) and only ever occupied in row 1 — the verse's column 1 track is sized against it automatically, so it stays correct however long "+ Submit request" ends up being, with no need to hardcode or measure the button's width. */ .wall-header { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; } .wall-header .page-title { grid-column: 1; grid-row: 1; } .wall-header #toggle-submit-btn { grid-column: 2; grid-row: 1; } .wall-header .page-sub { grid-column: 1; grid-row: 2; } /* Edit-profile pencil next to a group's name (js/group.js's groupHeroHtml) — faded until hovered/focused so it reads as a secondary affordance, not competing with the name itself for attention. */ .group-edit-icon { background: none; border: none; padding: 0; font-size: 0.375em; cursor: pointer; opacity: 0.35; vertical-align: middle; } .group-edit-icon:hover, .group-edit-icon:focus-visible { opacity: 1; } .page-title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 2rem; padding-bottom: 0.5rem; margin: 0 0 4px; letter-spacing: -0.01em; } .page-sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.02em; margin: 0 0 28px; } /* ---- Category chips ---- */ .category-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 24px; /* Themed scrollbar instead of the browser default — standard CSS, no library needed. scrollbar-width/scrollbar-color cover Firefox; the ::-webkit-scrollbar rules below cover Chrome/Safari/Edge. */ scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .category-row::-webkit-scrollbar { height: 6px; } .category-row::-webkit-scrollbar-track { background: transparent; } .category-row::-webkit-scrollbar-thumb { background-color: var(--line); border-radius: 999px; } .category-row::-webkit-scrollbar-thumb:hover { background-color: var(--ink-soft); } .chip { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--input-bg); color: var(--ink-soft); cursor: pointer; white-space: nowrap; } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* Pending/Reported sub-nav count badge (js/group.js's renderGroupOwnerSubnav) — always computed from the same moderation.php snapshot the page under it renders from, so this number can never drift from that page's own displayed total. */ .subnav-count { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-size: 0.7rem; line-height: 1.4; text-align: center; } /* ---- Submit form ---- */ .submit-card { position: relative; /* anchors .submit-wisp/.submit-spark below */ background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 32px; box-shadow: var(--shadow-soft); } /* "Sent Upward — Fades Out" — plays once on the public wall's submit form right after a successful submission (js/app.js's playSubmitSentUpward()): the card the writer was just looking at lifts, glows, and dissolves away before the form actually resets/hides, rather than just vanishing. Same rise/wisp/sparks language as .pray-lift/.answered-celebrate elsewhere on a request card, just framed as an exit instead of an in-place reaction — the form starts fully visible (opacity:1) and fades OUT, the reverse of how .pray-lift/.answered-celebrate animate an already-visible card. */ .submit-card.sent-upward-fade-out { animation: sent-upward-fade-out 2s cubic-bezier(0.3, 0.1, 0.3, 1) forwards; } @keyframes sent-upward-fade-out { 0% { opacity: 1; transform: translateY(0) scale(1); box-shadow: var(--shadow-soft); } 30% { opacity: 1; box-shadow: 0 22px 40px -6px var(--accent-glow), var(--shadow-soft); transform: translateY(-8px) scale(1.01); } 100% { opacity: 0; transform: translateY(-54px) scale(0.95); box-shadow: 0 30px 46px -10px transparent; } } .submit-wisp { position: absolute; left: 50%; bottom: 100%; width: 46%; height: 90px; transform: translateX(-50%); background: linear-gradient(to top, var(--accent-glow), transparent 85%); opacity: 0; filter: blur(2px); pointer-events: none; animation: wisp-rise 2s ease-out forwards; } @keyframes wisp-rise { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scaleY(0.6); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scaleY(1.3); } } .submit-spark { position: absolute; left: var(--sx); top: var(--sy); width: var(--ssize); height: var(--ssize); border-radius: 50%; background: var(--accent-glow); box-shadow: 0 0 6px 1px var(--accent-glow); opacity: 0; pointer-events: none; animation: submit-spark-drift var(--sdur) ease-out var(--sdelay) forwards; } @keyframes submit-spark-drift { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 18% { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.5); } } @media (prefers-reduced-motion: reduce) { .submit-card.sent-upward-fade-out { animation: none; } .submit-wisp, .submit-spark { display: none; } } .submit-card textarea, .submit-card input[type=text], .submit-card input[type=email], .submit-card input[type=password], .submit-card select { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--input-text); margin-bottom: 10px; } .submit-card textarea::placeholder, .submit-card input::placeholder { color: var(--input-text-soft); opacity: 1; } .submit-card textarea { min-height: 80px; resize: vertical; } /* Breathing room above the category select on a group's collapsible "Post to group" form (js/group.js's #post-content, toggled display: none/block by the heading click) — the select otherwise sits flush against the heading right above it. Scoped to #post-content rather than .submit-card select generally so it only ever shows up while the section is actually expanded; display:none already hides it (and everything else inside) while collapsed, so no separate visibility rule is needed. */ #post-content { padding-top: 12px; } /* "Subscribe" — a checkbox against the visitor's own account email, used on every submit form site-wide (js/app.js's public wall, js/group.js's Post to group, js/my-requests.js) now that posting a request always requires an account (README §100). Rendered inline next to the poster's badge avatar in `.posting-as-row`, not on its own line. */ .notify-email-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 10px; cursor: pointer; } .notify-email-checkbox-label input[type=checkbox] { flex: 0 0 auto; width: auto; margin: 0; } /* ---- Password field with a show/hide toggle ---- */ .password-field-wrap { position: relative; } .password-field-wrap input[type=password], .password-field-wrap input[type=text] { padding-right: 48px; } .password-toggle-btn { position: absolute; right: 6px; top: 8px; background: none; border: none; cursor: pointer; color: var(--input-text-soft); font-size: 0.72rem; font-family: var(--font-mono); padding: 6px 8px; } /* ---- Password strength meter (js/password-strength.js) ---- */ .password-strength-meter { margin: -6px 0 12px; } .password-strength-track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .password-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.2s ease, background-color 0.2s ease; } .password-strength-fill.password-strength-weak { background: var(--danger); } .password-strength-fill.password-strength-fair { background: var(--strength-fair); } .password-strength-fill.password-strength-good { background: var(--strength-good); } .password-strength-fill.password-strength-strong { background: var(--strength-strong); } .password-strength-label { display: block; font-size: 0.75rem; margin-top: 4px; color: var(--ink-soft); } .password-strength-label.password-strength-weak { color: var(--danger); } .password-strength-label.password-strength-fair { color: var(--strength-fair); } .password-strength-label.password-strength-good { color: var(--strength-good); } .password-strength-label.password-strength-strong { color: var(--strength-strong); } /* ---- Initials box (dashboard registration form layout only) ---- */ .initials-box { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; } /* ---- Poster identity in the wall's submit form: notify-email + optional inline account creation when logged out, or just the avatar when already logged in. Reuses .password-field-wrap/.initials-box from the dashboard's register form and .avatar-initials below. ---- */ .create-account-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-soft); margin: 2px 0 10px; cursor: pointer; } .create-account-row input[type=checkbox] { margin: 0; } .posting-as-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* ---- Reusable initials avatar — same look everywhere it's rendered. Generated via avatarInitialsHtml() / sanitizeInitials() in js/avatar.js. ---- */ .avatar-initials { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--bg-card); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; flex: 0 0 auto; } /* Only an avatar with an earned badge has anything to hover/tap for — see the tooltip listeners in js/avatar.js, which target this same attribute. */ .avatar-initials[data-badge-name] { cursor: pointer; } /* Badge shapes — a "circle family" of regular polygons (see badge_definitions.shape / api/badges.php's best_badge). Tier 1 is a plain circle; each tier after that loses a side rather than gaining one, so the shape reads as progressively more sharply defined at higher tiers (§46 — originally the reverse direction; flipped on request). Exact polygon coordinates are precomputed regular-polygon vertices (first vertex pointing straight up), not hand-eyeballed. .avatar-initials--circle is an explicit no-op (the base .avatar-initials rule is already a circle) kept only so every value in the shape ENUM has a matching rule, for the same reason the other five do. */ .avatar-initials--circle { border-radius: 50%; clip-path: none; } .avatar-initials--pentagon { border-radius: 0; clip-path: polygon(50% 0%, 97.6% 34.5%, 79.4% 90.5%, 20.6% 90.5%, 2.4% 34.5%); } .avatar-initials--hexagon { border-radius: 0; clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); } .avatar-initials--heptagon { border-radius: 0; clip-path: polygon(50% 0%, 89.1% 18.8%, 98.7% 61.1%, 71.7% 95%, 28.3% 95%, 1.3% 61.1%, 10.9% 18.8%); } .avatar-initials--octagon { border-radius: 0; clip-path: polygon(50% 0%, 85.4% 14.6%, 100% 50%, 85.4% 85.4%, 50% 100%, 14.6% 85.4%, 0% 50%, 14.6% 14.6%); } .avatar-initials--decagon { border-radius: 0; clip-path: polygon(50% 0%, 79.4% 9.5%, 97.6% 34.5%, 97.6% 65.5%, 79.4% 90.5%, 50% 100%, 20.6% 90.5%, 2.4% 65.5%, 2.4% 34.5%, 20.6% 9.5%); } /* A badge-holder's name is never shown as a permanent label — only via this shared hover/tap tooltip (see avatarInitialsHtml() + the tooltip listeners in js/avatar.js). Positioned with inline left/top (computed per-target in JS, since the same avatar renders at very different sizes/places — the "posting as you" widget vs. a request card's compact poster badge). */ .avatar-tooltip { position: absolute; z-index: 50; background: var(--ink); color: var(--bg); font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-soft); } .btn { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; /* .btn is also used on elements (e.g. the Users page's Edit link) — a button should never render with the browser's default link underline regardless of which element it's applied to. */ text-decoration: none; } /* .btn sets cursor:pointer unconditionally above, which otherwise masks a disabled button's default not-allowed affordance (used by the Prev/Next pagination controls, js/subscriptions.js) — opacity is the primary signal here, cursor is just a secondary confirmation. */ .btn:disabled { opacity: 0.45; cursor: default; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--btn-primary-hover); } /* The site-wide "secondary action" button (Cancel, Edit, Dismiss, Remove, Log out, etc.) — same surface as form inputs and .chip (--input-bg: a lighter tint of the page background so it reads as its own distinct control, not just a bare outline), with a legible soft-ink text color, rather than each call site inline-styling `border:1px solid var(--line);background:var(--bg)` with NO explicit color at all. That was the actual bug behind two separate "button text is dark/hard to read in dark mode" reports: with no `color` set, the browser falls back to its own default form-control text color, which isn't dark-mode-aware the way every *other* color in this page is — it doesn't automatically become light just because --bg went dark. One shared class with an explicit, theme-aware color fixes every button using it at once, everywhere in the site, instead of one at a time as each is separately noticed. */ .btn-secondary { background: var(--input-bg); color: var(--ink-soft); border: 1px solid var(--line); } /* A button that should read as plain text, not a control — no fill, border, or padding, just the label (currently just "Log out" — see js/nav.js's renderLogoutButton()). Explicit font-family/size (matching .btn) rather than relying on inheritance, since a bare