/* ── Theme-independent base ───────────────────────────────────────────────── */ :root { --radius: 8px; } /* ── Dark theme (default) ─────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #1a1815; --panel: #262220; --panel-2: #2f2a27; --ink: #ece5da; --muted: #a99e8f; --accent: #b5482e; --accent-2: #c9a227; --line: #3c3530; --good: #4c8a4c; --bad: #b5482e; --flash-error-bg: #3a201c; --flash-success-bg: #1f2e1f; --flash-info-bg: #2f2a27; color-scheme: dark; } /* ── Light theme (parchment) ──────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f5efe6; --panel: #ede3d5; --panel-2: #e4d8c6; --ink: #2a1f14; --muted: #7a6650; --accent: #b5482e; --accent-2: #8b6b0a; --line: #c9b99d; --good: #2d6e2d; --bad: #b5482e; --flash-error-bg: #fde8e4; --flash-success-bg: #e6f4e6; --flash-info-bg: #e4d8c6; color-scheme: light; } /* ── Alias layer ────────────────────────────────────────────────────────────── Many templates were authored against an earlier set of variable names that were never defined in the theme. Where those names had hardcoded dark fallbacks (e.g. var(--card-bg, #1e1a16)) they rendered as unreadable dark boxes on the light theme; where they had none, colors silently broke. Mapping each legacy name onto the active palette fixes every template at once in BOTH themes. `[data-theme]` matches the same element the real vars live on, and is listed AFTER the theme blocks so the references resolve to the current theme's values. Prefer the canonical names in new code. */ [data-theme] { --border: var(--line); --border-subtle: var(--line); --fg: var(--ink); --text: var(--ink); --text-2: var(--muted); --text-muted: var(--muted); --gold: var(--accent-2); /* *-muted names are used as subtle tinted *backgrounds* behind colored text, so tint the panel (stays light in light theme, dark in dark theme) rather than producing a mid-tone that clashes with the foreground text. */ --gold-muted: color-mix(in srgb, var(--accent-2) 20%, var(--panel)); --accent-muted: color-mix(in srgb, var(--accent) 20%, var(--panel)); --card-bg: var(--panel); --bg-card: var(--panel); --bg-card-alt: var(--panel-2); --input-bg: var(--panel-2); --surface-2: var(--panel-2); --ok: var(--good); --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif; } * { box-sizing: border-box; } [x-cloak] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { display: flex; align-items: center; gap: 1.2rem; padding: 0.8rem 1.4rem; background: var(--panel); border-bottom: 2px solid var(--accent); } .topbar .brand { font-size: 1.3rem; font-weight: bold; color: var(--ink); } .topbar nav { display: flex; align-items: center; gap: 1.1rem; flex: 1; } .topbar nav .spacer { flex: 1; } .topbar nav .user { color: var(--muted); } .container { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.4rem; } .sitefooter { padding: 1rem 1.4rem; font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--line); text-align: center; } h1, h2, h3 { font-family: "Trajan Pro", "Cinzel", Georgia, serif; color: var(--accent-2); } h1 { margin-top: 0; } .flash { padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; } .flash-error { background: var(--flash-error-bg); border: 1px solid var(--bad); } .flash-success { background: var(--flash-success-bg); border: 1px solid var(--good); } .flash-info { background: var(--flash-info-bg); border: 1px solid var(--line); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1rem; } label { display: block; margin: 0.6rem 0 0.2rem; color: var(--muted); font-size: 0.9rem; } input, select, textarea { width: 100%; padding: 0.55rem 0.7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: 1rem; } /* Radios/checkboxes must not inherit the full-width text-input sizing above — stretching them breaks flex/inline label alignment (e.g. the Loot form). */ input[type="radio"], input[type="checkbox"], input[type="range"] { width: auto; } button, .btn { display: inline-block; padding: 0.55rem 1.1rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 1rem; } button:hover, .btn:hover { filter: brightness(1.1); text-decoration: none; } .btn-secondary { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); } .grid { display: grid; gap: 1rem; } .grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: normal; } th.th-sort a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; cursor: pointer; } th.th-sort a:hover { color: var(--fg); } th.th-sort--active a { color: var(--fg); } .sort-indicator { font-size: .7em; } .filters { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; } .filters > div { flex: 1; min-width: 160px; } .pill { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); } .muted { color: var(--muted); } .auth-narrow { max-width: 420px; margin: 2rem auto; } .errors { color: var(--bad); font-size: 0.85rem; list-style: none; padding: 0; margin: 0.2rem 0; } /* Map thumbnail picker */ .map-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: .6rem; } .map-thumb { position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--line); aspect-ratio: 16/9; cursor: pointer; } .map-thumb-active { border-color: var(--accent-2); } .map-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .map-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; padding: .4rem; } .map-thumb:hover .map-thumb-overlay { opacity: 1; } .map-thumb-name { font-size: .72rem; color: #fff; text-align: center; line-height: 1.3; margin-bottom: .3rem; } /* Builder wizard progress bar */ .progress-bar-track { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; } .choice-ctx { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; } .btn-primary { background: var(--accent); color: #fff; } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.85rem; } /* ── Dice roll UI ────────────────────────────────────────────────────────── */ .roll-btn { margin: .2rem .2rem .2rem 0; white-space: nowrap; } .roll-section { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: .4rem; } .roll-result { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .75rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); flex-wrap: wrap; } .roll-result-label { color: var(--muted); font-size: .85rem; } .roll-result-total { font-size: 1.8rem; font-weight: bold; color: var(--ink); line-height: 1; } .roll-result-breakdown { font-size: .82rem; } .roll-nat20 { color: var(--good); } .roll-nat1 { color: var(--bad); } /* ── Phase 29: Play-screen redesign ─────────────────────────────────────── */ /* HP card — current/max is the dominant element, controls demoted beneath. */ .play-hp-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .play-hp-value { line-height: 1; } .play-hp-current { font-size: 3rem; font-weight: 700; color: var(--ink); } .play-hp-max { font-size: 1.4rem; color: var(--muted); } .play-hp-temp { color: var(--accent-2); margin-left: .4rem; } .play-hp-wrap { height: 1.1rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: .6rem 0; } .play-hp-fill { height: 100%; border-radius: 5px; transition: width .3s ease; } .play-hp-ok { background: var(--good); } .play-hp-low { background: var(--accent-2); } .play-hp-crit { background: var(--bad); } /* Demoted damage/heal/temp controls */ .play-hp-controls { margin-top: .4rem; align-items: end; } /* Per-ability roll grid — six cards, auto-fit to width (1-up on phones). */ .ability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-top: .6rem; } .ability-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: .7rem .8rem; } .ability-card-head { font-family: "Cinzel", Georgia, serif; font-size: .95rem; letter-spacing: .04em; color: var(--accent-2); margin: 0 0 .4rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; } .ability-card .roll-section { margin-bottom: .2rem; } .combat-row { margin: .2rem 0 .4rem; } /* Prominent ability check + save on the top row, skills smaller beneath. */ .ability-top { display: flex; gap: .4rem; margin-bottom: .5rem; } .ability-top .roll-btn { flex: 1; margin: 0; } .roll-btn.prominent { background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-weight: 600; padding: .45rem .6rem; text-align: center; } .roll-btn.prominent:hover { border-color: var(--accent); color: var(--accent); } .ability-skills { gap: 0; } /* Proficiency cues — gold accent on proficient saves/skills, brighter for expertise. */ .roll-btn.is-proficient { border-color: var(--accent-2); } .roll-btn.is-expertise { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); } .prof-pip { color: var(--accent-2); font-size: .7em; vertical-align: middle; } /* Condition chips double as hover-preview cards (no trailing "?"). */ .cond-chip { border-bottom: none; display: inline-flex; align-items: center; } .cond-chip:hover, .cond-chip:focus { color: inherit; } /* ── R3: Content browser sidebar layout ─────────────────────────────────── */ .browser-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; align-items: start; } @media (max-width: 640px) { .browser-layout { grid-template-columns: 1fr; } } .filter-sidebar { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; font-size: .85rem; } .filter-section { margin-bottom: .75rem; } /* Search section label (no button wrapper) */ .filter-section label:first-child:not(.filter-check), .filter-section-title { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; } /* Collapsible section header button */ .filter-section-header { display: flex; align-items: center; gap: .35rem; width: 100%; background: none; border: none; padding: 0; margin-bottom: .35rem; cursor: pointer; color: inherit; text-align: left; } .filter-section-header .filter-section-title { flex: 1; margin-bottom: 0; } .filter-badge { font-size: .62rem; font-family: sans-serif; background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center; line-height: 1.5; font-weight: bold; } .filter-chevron { font-size: .65rem; color: var(--muted); display: inline-block; transition: transform .18s; flex-shrink: 0; } .filter-chevron.open { transform: rotate(180deg); } /* Tri-state filter option (include / exclude / none) */ .filter-tri { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .1rem 0; user-select: none; font-size: inherit; } .filter-tri-icon { width: 14px; height: 14px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; transition: background .12s, border-color .12s; color: #fff; } .filter-tri[data-state="include"] .filter-tri-icon { background: var(--good); border-color: var(--good); } .filter-tri[data-state="include"] .filter-tri-icon::after { content: "✓"; } .filter-tri[data-state="exclude"] .filter-tri-icon { background: var(--bad); border-color: var(--bad); } .filter-tri[data-state="exclude"] .filter-tri-icon::after { content: "✗"; } /* Active-filter chip row */ .filter-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; } .filter-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-family: sans-serif; border-radius: 10px; padding: 2px 6px 2px 8px; line-height: 1.4; white-space: nowrap; } .filter-chip--include { background: color-mix(in srgb, var(--good) 18%, transparent); border: 1px solid var(--good); color: var(--good); } .filter-chip--exclude { background: color-mix(in srgb, var(--bad) 15%, transparent); border: 1px solid var(--bad); color: var(--bad); } .filter-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: .78rem; padding: 0; line-height: 1; opacity: .8; } .filter-chip button:hover { opacity: 1; } .filter-chip-section { opacity: .65; } .filter-clear-all { font-size: .7rem; color: var(--muted); cursor: pointer; align-self: center; white-space: nowrap; text-decoration: underline; } /* Plain checkbox rows (boolean props, source dropdown) */ .filter-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .1rem 0; } .filter-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; } .filter-section input[type="search"], .filter-section select { width: 100%; font-size: .83rem; padding: .3rem .4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); } .browser-results { min-width: 0; } /* ── Entity links + preview popover (R2) ───────────────────────────────── */ .entity-link { border-bottom: 1px dotted var(--accent); cursor: pointer; color: inherit; } .entity-link:hover, .entity-link:focus { color: var(--accent); outline: none; } #preview-popover { min-width: 220px; max-width: 320px; } .preview-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: .83rem; line-height: 1.45; } .preview-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; gap: .5rem; } .preview-card-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .preview-card-meta { font-size: .78rem; margin-bottom: .2rem; } .preview-card-desc { margin: .3rem 0 0; color: var(--ink); } /* ── Nav omnisearch (R4) ─────────────────────────────────────────────────── */ .nav-search { position: relative; display: flex; align-items: center; width: 240px; /* fixed — siblings never shift on focus */ } .nav-search-input { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: .82rem; padding: .3rem .65rem; width: 100%; } .nav-search-input:focus { outline: none; border-color: var(--accent); } .nav-search-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 280px; max-width: 340px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.45); padding: .5rem; z-index: 800; max-height: 420px; overflow-y: auto; } .search-group { margin-bottom: .6rem; } .search-group-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .2rem .4rem; margin-bottom: .2rem; } .search-hit { display: flex; align-items: baseline; gap: .4rem; padding: .3rem .5rem; border-radius: 4px; color: var(--ink); text-decoration: none; } .search-hit:hover { background: var(--panel); } .search-hit-name { font-size: .88rem; } .search-hit-sub { font-size: .75rem; color: var(--muted); } .search-see-all { font-size: .78rem; color: var(--accent); } /* Search page */ .search-group + .search-group { margin-top: 1rem; } /* ── Lair action dramatic overlay (Phase 14, table view) ─────────────────── */ .lair-action-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(12, 9, 3, 0.55) 0%, rgba(5, 4, 2, 0.93) 68%); animation: lair-overlay-fade 10s forwards; } .lair-action-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.22) 0%, transparent 60%); animation: lair-glow-pulse 1.6s ease-in-out infinite alternate; pointer-events: none; } .lair-action-inner { position: relative; text-align: center; padding: 0 1rem; animation: lair-shake 0.55s ease-out forwards; } .lair-action-title { font-family: "Trajan Pro", "Cinzel", Georgia, serif; font-size: clamp(2.6rem, 9vw, 5.5rem); font-weight: bold; letter-spacing: .18em; text-transform: uppercase; color: #f0d060; text-shadow: 0 0 24px rgba(201,162,39,0.95), 0 0 55px rgba(201,162,39,0.55); animation: lair-title-impact 10s forwards; } .lair-action-effect { font-family: Georgia, "Iowan Old Style", serif; font-size: clamp(1.25rem, 4.5vw, 2.1rem); color: var(--ink, #ece5da); text-shadow: 0 2px 12px rgba(0,0,0,0.9); max-width: 80vw; margin: 1rem auto 0; line-height: 1.4; animation: lair-effect-in 10s forwards; } @keyframes lair-overlay-fade { 0% { opacity: 0; } 4% { opacity: 1; } 80% { opacity: 1; } 100%{ opacity: 0; } } @keyframes lair-title-impact { 0% { transform: scale(1.18); opacity: 0; } 4% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100%{ opacity: 0; } } @keyframes lair-effect-in { 0%, 8% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes lair-shake { 0%,100% { transform: translateX(0); } 14% { transform: translateX(-9px); } 29% { transform: translateX(9px); } 43% { transform: translateX(-5px); } 57% { transform: translateX(5px); } 72% { transform: translateX(-2px); } } @keyframes lair-glow-pulse { from { opacity: 0.45; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lair-action-overlay { animation: lair-overlay-simple 10s forwards; } .lair-action-title, .lair-action-effect { animation: none; opacity: 1; transform: none; } .lair-action-inner { animation: none; } .lair-action-glow { animation: none; opacity: 0.7; } } @keyframes lair-overlay-simple { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } /* ── Floating dice tray (Phase 13) ─────────────────────────────────────────── */ .dice-tray-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.5rem; border: none; cursor: pointer; z-index: 810; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.5); transition: background .15s; line-height: 1; } .dice-tray-fab:hover { background: var(--accent-2); color: var(--bg); } .dice-tray-fab-icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0; } .dice-tray-panel { position: fixed; bottom: 5.2rem; right: 1.5rem; width: min(290px, 94vw); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; z-index: 810; box-shadow: 0 8px 28px rgba(0,0,0,.55); } .dice-tray-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; font-weight: bold; color: var(--accent-2); } .dice-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-bottom: .65rem; } .die-btn { padding: .35rem .2rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: .82rem; text-align: center; transition: border-color .1s, color .1s; } .die-btn:hover { border-color: var(--accent); color: var(--ink); } .die-btn-active { border-color: var(--accent-2); color: var(--accent-2); background: rgba(201,162,39,.1); } .dice-tray-row { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; flex-wrap: wrap; } .dice-tray-result { margin-top: .65rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); text-align: center; } .roll-total { font-size: 2rem; font-family: "Trajan Pro", "Cinzel", Georgia, serif; color: var(--accent-2); line-height: 1.1; } .dice-share-toggle { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; font-size: .82rem; color: var(--muted); cursor: pointer; } .dice-share-toggle input { width: auto; margin: 0; } .roll-breakdown { font-size: .78rem; margin-top: .2rem; } .roll-nat20 { border-color: var(--accent-2); } .roll-nat20 .roll-total { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,.5); } .roll-nat1 { border-color: var(--bad); } .roll-nat1 .roll-total { color: var(--bad); } /* ── Rolled ability-score chips (Phase 13) ─────────────────────────────────── */ .roll-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: .3rem .6rem; border-radius: 20px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 1rem; font-weight: bold; transition: border-color .12s, background .12s; } .roll-chip:hover:not(:disabled) { border-color: var(--accent-2); } .roll-chip-selected { border-color: var(--accent-2); background: rgba(201,162,39,.15); color: var(--accent-2); } .roll-chip:disabled { opacity: .4; cursor: default; border-style: dashed; } .roll-chip-slot { min-height: 2.2rem; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: var(--radius); cursor: pointer; padding: .25rem .4rem; margin-top: .25rem; transition: border-color .12s, background .12s; } .roll-chip-slot:hover { border-color: var(--accent); } .roll-slot-ready { border-color: var(--accent-2); background: rgba(201,162,39,.07); } .roll-chip-placed { display: flex; align-items: center; gap: .4rem; font-size: 1rem; font-weight: bold; color: var(--ink); } .roll-chip-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; padding: 0 .2rem; line-height: 1; } .roll-chip-clear:hover { color: var(--bad); } /* ── Phase 16: header nav redesign ─────────────────────────────────────────── */ /* Library dropdown */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown-toggle { background: none; border: none; color: var(--accent-2); font-size: inherit; font-family: inherit; cursor: pointer; padding: .15rem .3rem; display: flex; align-items: center; gap: .25rem; text-decoration: none; white-space: nowrap; } .nav-dropdown-toggle:hover { color: var(--ink); text-decoration: none; } .nav-dropdown-arrow { font-size: .65em; transition: transform .15s; } .nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.4); padding: .35rem 0; z-index: 850; display: flex; flex-direction: column; } .nav-dropdown-menu a { padding: .4rem .85rem; color: var(--ink); font-size: .88rem; white-space: nowrap; display: block; } .nav-dropdown-menu a:hover { background: var(--panel); text-decoration: none; } /* Account dropdown */ .nav-account { position: relative; display: flex; align-items: center; } .nav-account-toggle { background: none; border: none; color: var(--muted); font-size: inherit; font-family: inherit; cursor: pointer; padding: .15rem .3rem; display: flex; align-items: center; gap: .25rem; white-space: nowrap; } .nav-account-toggle:hover { color: var(--ink); } .nav-account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.4); padding: .35rem 0; z-index: 850; display: flex; flex-direction: column; } .nav-account-menu a, .nav-account-menu button { padding: .4rem .85rem; color: var(--ink); font-size: .88rem; background: none; border: none; cursor: pointer; text-align: left; white-space: nowrap; display: block; font-family: inherit; width: 100%; } .nav-account-menu a:hover, .nav-account-menu button:hover { background: var(--panel); text-decoration: none; color: var(--ink); } .nav-account-menu hr { border: none; border-top: 1px solid var(--line); margin: .25rem 0; } .nav-theme-section { padding: .3rem .85rem; display: flex; gap: .25rem; align-items: center; } .nav-theme-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .8rem; padding: .2rem .45rem; cursor: pointer; flex: 1; text-align: center; white-space: nowrap; } .nav-theme-btn:hover { border-color: var(--accent); color: var(--ink); } .nav-theme-btn-active { border-color: var(--accent-2); color: var(--accent-2); background: var(--panel-2); } /* Hamburger (mobile) */ .nav-hamburger { display: none; background: none; border: none; color: var(--ink); font-size: 1.4rem; cursor: pointer; padding: .2rem .4rem; line-height: 1; } .nav-mobile-panel { display: none; } @media (max-width: 860px) { .topbar nav { display: none; } .nav-hamburger { display: inline-flex; align-items: center; } .topbar { position: relative; } .nav-mobile-panel { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); border-bottom: 2px solid var(--accent); z-index: 900; padding: .5rem 1rem 1rem; box-shadow: 0 8px 20px rgba(0,0,0,.4); } .nav-mobile-panel a, .nav-mobile-panel button { display: block; padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); background: none; border-left: none; border-right: none; border-top: none; text-align: left; font-size: 1rem; font-family: inherit; cursor: pointer; width: 100%; } .nav-mobile-panel a:last-child { border-bottom: none; } .nav-mobile-section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .75rem 0 .2rem; } } /* Settings page — theme radio group */ .theme-radio-group { display: flex; gap: .75rem; flex-wrap: wrap; } .theme-radio-option { display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .55rem .9rem; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel-2); transition: border-color .12s, background .12s; margin: 0; color: var(--ink); font-size: .95rem; } .theme-radio-option:has(input:checked) { border-color: var(--accent-2); background: var(--panel); } .theme-radio-option input[type="radio"] { width: 14px; height: 14px; accent-color: var(--accent-2); flex-shrink: 0; } .theme-radio-label { user-select: none; } /* ── Themed HTTP error pages ──────────────────────────────────────────────── */ .errpage { max-width: 640px; margin: 2.5rem auto; text-align: center; padding: 2.5rem 1.5rem 2rem; } .errpage-die { width: 150px; height: 150px; margin: 0 auto 1.25rem; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation: errpage-die-in .5s ease-out both; } @keyframes errpage-die-in { from { opacity: 0; transform: rotate(-25deg) scale(.6); } to { opacity: 1; transform: rotate(0) scale(1); } } .errpage-die .die-face { fill: var(--panel-2); stroke: var(--accent-2); stroke-width: 3; stroke-linejoin: round; } .errpage-die .die-edge { stroke: var(--accent-2); stroke-width: 2; opacity: .5; } .errpage-die .die-num { fill: var(--accent-2); font-family: "Trajan Pro","Cinzel",Georgia,serif; font-weight: 700; } .errpage-die--crit .die-face { stroke: var(--bad); } .errpage-die--crit .die-edge { stroke: var(--bad); } .errpage-die--crit .die-num { fill: var(--bad); } .errpage-code { font-family: "Trajan Pro","Cinzel",Georgia,serif; letter-spacing: .25em; font-size: .85rem; text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem; } .errpage-title { font-size: 2rem; margin: 0 0 .75rem; line-height: 1.15; } .errpage-flavor { color: var(--ink); font-size: 1.05rem; line-height: 1.6; margin: 0 auto 1rem; max-width: 48ch; } .errpage-flavor em { color: var(--accent-2); font-style: italic; } .errpage-scroll { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: var(--radius); padding: .75rem 1rem; margin: 1.25rem auto; max-width: 44ch; color: var(--muted); font-style: italic; font-size: .95rem; } .errpage-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } /* --- Password strength meter (Phase 24) ---------------------------------- */ .pw-meter { margin: -0.4rem 0 0.8rem; } .pw-meter-track { height: 6px; border-radius: 3px; background: var(--surface-2, rgba(0,0,0,0.18)); overflow: hidden; } .pw-meter-fill { height: 100%; width: 0; border-radius: 3px; transition: width 0.2s ease, background-color 0.2s ease; background: #b04a3a; } .pw-meter-fill.pw-score-0 { background: #b04a3a; } .pw-meter-fill.pw-score-1 { background: #c97b2c; } .pw-meter-fill.pw-score-2 { background: #c9a227; } .pw-meter-fill.pw-score-3 { background: #6f9a4a; } .pw-meter-fill.pw-score-4 { background: #4f8f4f; } .pw-meter-label { font-size: 0.82rem; margin: 0.3rem 0 0; } /* "Remember me" checkbox row on the login form. */ .checkbox-row { display: flex; align-items: center; gap: 0.45rem; margin: 0.2rem 0 0.9rem; font-size: 0.92rem; cursor: pointer; } .checkbox-row input[type="checkbox"] { width: auto; margin: 0; } /* ── Phase 25 — admin console + impersonation ───────────────────────────── */ .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-danger:hover { filter: brightness(1.1); } .btn-danger:disabled { opacity: .5; cursor: not-allowed; filter: none; } .admin-shell { max-width: 1100px; margin: 0 auto; } .admin-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .admin-subnav { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; padding-bottom: .4rem; } .admin-subnav a { padding: .35rem .7rem; border-radius: 6px; text-decoration: none; color: var(--muted); } .admin-subnav a:hover { color: var(--fg); background: var(--panel-2); } .admin-subnav a.is-active { color: var(--fg); background: var(--panel-2); } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; } .admin-stat { text-align: center; } .admin-stat-num { font-size: 2rem; font-weight: 700; color: var(--accent-2); } .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 760px) { .admin-cols { grid-template-columns: 1fr; } } /* Settings page — vertical sidebar tabs (reuses .browser-layout / .filter-sidebar) */ .settings-tabs { display: flex; flex-direction: column; gap: .15rem; } .settings-tab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: .45rem .6rem; cursor: pointer; color: var(--muted); font-size: .9rem; } .settings-tab:hover { background: var(--panel); color: var(--fg); } .settings-tab.is-active { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent-2); } .settings-tab-badge { font-size: .68rem; padding: .02rem .4rem; } .admin-search { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; } .admin-inline-form { display: inline-flex; gap: .35rem; align-items: center; margin: .15rem .25rem .15rem 0; } .admin-pager { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; } .admin-audit-list { list-style: none; padding: 0; margin: 0; } .admin-audit-list li { padding: .3rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; } .admin-audit-action { font-weight: 600; } .admin-audit-time { margin-left: auto; font-size: .8rem; } .admin-bulk-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; padding: .4rem .6rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); } .admin-bulk-toolbar form { margin: 0; } .impersonation-banner { position: sticky; top: 0; z-index: 950; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; background: var(--accent-2); color: #1a1410; padding: .4rem .8rem; font-size: .9rem; } .impersonation-banner .btn { padding: .15rem .7rem; }