/* * Redesign Theme — Cormorant Garamond + DM Sans * Visual reference: mockup-redesign-{landing,forum,wiki-items}.html * * Activated via data-theme="redesign" on . */ /* ================================================================ VARIABLES — Override existing palette with mockup colors ================================================================ */ [data-theme="redesign"] { /* Core palette - warm charcoal family */ --bg-body: #08080a; --bg-panel: #141418; --bg-secondary: #0e0e11; --bg-hover: #1a1a1f; --bg-active: #202027; --bg-input: #0e0e11; --bg-input-sm: rgba(14, 14, 17, 0.6); --bg-nav: rgba(10, 10, 14, 0.92); --bg-header: #0c0c0e; --bg-sidebar: #0e0e11; --bg-code: #0e0e11; --nav-sep: rgba(var(--warm-white-rgb), 0.06); --nav-hover: rgba(var(--warm-white-rgb), 0.04); --nav-active: rgba(var(--warm-white-rgb), 0.06); /* Borders - subtle warmth */ --warm-white-rgb: 255, 248, 240; --border: rgba(var(--warm-white-rgb), 0.06); --border-hover: rgba(var(--warm-white-rgb), 0.12); --border-focus: rgba(var(--highlight-rgb), 0.25); /* Text hierarchy */ --text: #9a9590; --text-bright: #e8e4de; --text-dim: #5c5854; /* Accent gold (mockup's primary accent) */ --highlight: #c4a872; --highlight-hover: #d4bc8e; --highlight-rgb: 196, 168, 114; --accent-muted: rgba(var(--highlight-rgb), 0.12); /* Functional green (existing --accent stays green) */ --accent: #7a9e7a; --accent-hover: #8fb88f; --accent-rgb: 122, 158, 122; --success: #7a9e7a; --success-muted: rgba(var(--accent-rgb), 0.12); /* Functional red */ --error: #a87272; --error-rgb: 168, 114, 114; --error-bg: rgba(var(--error-rgb), 0.08); /* Links - cool blue-gray */ --link: #8fa8b8; --link-hover: #a8c0d0; /* Typography */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-prose: 'DM Sans', system-ui, -apple-system, sans-serif; /* --font-mono unchanged */ /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; /* Radius */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; } /* ================================================================ COLOR SCHEMES — override variables per-scheme Default (no data-scheme) = Ember (current warm gold) ================================================================ */ /* Abyss — true black, steel/silver accents */ [data-theme="redesign"][data-scheme="abyss"] { --bg-body: #020204; --bg-panel: #08080c; --bg-secondary: #050508; --bg-hover: #0e0e14; --bg-active: #14141c; --bg-input: #050508; --bg-input-sm: rgba(5, 5, 8, 0.6); --bg-nav: rgba(3, 3, 6, 0.95); --bg-header: #040406; --bg-sidebar: #050508; --bg-code: #050508; --warm-white-rgb: 195, 200, 215; --text: #707080; --text-bright: #c0beca; --text-dim: #404050; --highlight: #8a9aad; --highlight-hover: #a0b0c4; --highlight-rgb: 138, 154, 173; --accent: #5a8a7a; --accent-hover: #6aa08a; --accent-rgb: 90, 138, 122; --error: #8a5a68; --error-rgb: 138, 90, 104; --link: #6a8aa0; --link-hover: #80a0b8; } /* Parchment — aged paper, warm sepia light mode */ [data-theme="redesign"][data-scheme="parchment"] { --bg-body: #e8e0d0; --bg-panel: #f4f0e6; --bg-secondary: #ddd4c4; --bg-hover: #d4cab8; --bg-active: #cac0ae; --bg-input: #f4f0e6; --bg-input-sm: rgba(244, 240, 230, 0.8); --bg-nav: rgba(232, 224, 208, 0.95); --bg-header: #ede4d4; --bg-sidebar: #e0d8c8; --bg-code: #f0ece2; --warm-white-rgb: 80, 68, 48; --text: #4a4030; --text-bright: #1a1208; --text-dim: #7a7060; --highlight: #8a6a20; --highlight-hover: #a07a28; --highlight-rgb: 138, 106, 32; --accent: #4a7a4a; --accent-hover: #3a6a3a; --accent-rgb: 74, 122, 74; --error: #984040; --error-rgb: 152, 64, 64; --link: #4a6a7a; --link-hover: #385a6a; } /* Frost — icy blue-black, cold steel */ [data-theme="redesign"][data-scheme="frost"] { --bg-body: #060a10; --bg-panel: #0c1018; --bg-secondary: #080c14; --bg-hover: #121820; --bg-active: #182028; --bg-input: #080c14; --bg-input-sm: rgba(8, 12, 20, 0.6); --bg-nav: rgba(6, 10, 16, 0.95); --bg-header: #080c12; --bg-sidebar: #080c14; --bg-code: #080c14; --warm-white-rgb: 200, 215, 235; --text: #7888a0; --text-bright: #c8d4e4; --text-dim: #405060; --highlight: #5aa0c0; --highlight-hover: #70b8d8; --highlight-rgb: 90, 160, 192; --accent: #4a9a7a; --accent-hover: #5aaa8a; --accent-rgb: 74, 154, 122; --error: #a06070; --error-rgb: 160, 96, 112; --link: #5a90b8; --link-hover: #70a8d0; } /* Verdant — deep forest, amber/copper accents */ [data-theme="redesign"][data-scheme="verdant"] { --bg-body: #060a06; --bg-panel: #0c120c; --bg-secondary: #081008; --bg-hover: #121a12; --bg-active: #182018; --bg-input: #081008; --bg-input-sm: rgba(8, 16, 8, 0.6); --bg-nav: rgba(6, 10, 6, 0.95); --bg-header: #080c08; --bg-sidebar: #081008; --bg-code: #081008; --warm-white-rgb: 220, 235, 210; --text: #808a80; --text-bright: #c8d4c8; --text-dim: #485848; --highlight: #b09050; --highlight-hover: #c0a060; --highlight-rgb: 176, 144, 80; --accent: #4a8a4a; --accent-hover: #5a9a5a; --accent-rgb: 74, 138, 74; --error: #a07050; --error-rgb: 160, 112, 80; --link: #5a9a70; --link-hover: #6aaa80; } /* ================================================================ GLOBAL BASE ================================================================ */ /* Subtle noise texture overlay */ [data-theme="redesign"] body::before { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; filter: none; opacity: 1; } [data-theme="redesign"] body:where(:not(.play-page)) > * { position: relative; z-index: 1; } /* Parchment: hide noise texture on light background */ [data-theme="redesign"][data-scheme="parchment"] body::before { display: none; } /* Parchment: hide mountain silhouettes on light background */ [data-theme="redesign"][data-scheme="parchment"] .header-mountains { display: none; } /* Parchment: darken skull image for light background */ [data-theme="redesign"][data-scheme="parchment"] .header-skull img { filter: brightness(0.3) sepia(0.4); } /* Parchment: navbar bottom border for definition against content */ [data-theme="redesign"][data-scheme="parchment"] .navbar { border-bottom: 1px solid rgba(80, 68, 48, 0.12); } /* Parchment: dropdown menus */ [data-theme="redesign"][data-scheme="parchment"] .header-user-dropdown-menu { background: var(--bg-panel); border: 1px solid rgba(80, 68, 48, 0.15); } /* Parchment: code blocks with Chroma inline dark backgrounds need light override */ [data-theme="redesign"][data-scheme="parchment"] .wiki-content pre[style], [data-theme="redesign"][data-scheme="parchment"] .post-body pre[style] { background-color: #1a1a20 !important; color: #d0ccc0; } /* Hide noise overlay on play page — terminal has its own background */ [data-theme="redesign"] body.play-page::before { display: none; } [data-theme="redesign"] body { font-family: var(--font-prose); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme="redesign"] a { transition: color 0.2s ease; } /* All headings use display font */ [data-theme="redesign"] h1, [data-theme="redesign"] h2, [data-theme="redesign"] h3, [data-theme="redesign"] h4, [data-theme="redesign"] h5, [data-theme="redesign"] h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; } [data-theme="redesign"] h1 { font-size: 1.5rem; } [data-theme="redesign"] h2 { font-size: 1.2rem; } [data-theme="redesign"] h3 { font-size: 1.05rem; } /* ================================================================ SITE HEADER — shared base styles Reset all base theme decorations (wisps, vignette, skull pulse) ================================================================ */ [data-theme="redesign"] .site-header { position: relative; z-index: 1050; background: linear-gradient(180deg, var(--bg-header) 0%, var(--bg-body) 100%); border-bottom: 1px solid var(--border); overflow: visible; } /* Remove wisps and vignette pseudo-elements from base theme */ [data-theme="redesign"] .site-header::after, [data-theme="redesign"] .site-header::before { display: none; } /* Hide mountains on all pages */ [data-theme="redesign"] .header-mountains { display: none; } /* Skull image — remove pulse animation, apply clean filter */ [data-theme="redesign"] .header-skull img { filter: grayscale(1) brightness(100) contrast(100) saturate(0); animation: none; transition: opacity 0.3s; image-rendering: auto; drop-shadow: none; } [data-theme="redesign"] .header-logo:hover .header-skull img { opacity: 0.85; filter: grayscale(1) brightness(100) contrast(100) saturate(0); } /* Title text base — reset ALL base theme properties */ [data-theme="redesign"] .header-tl, [data-theme="redesign"] .header-tr { font-family: var(--font-display); text-transform: uppercase; position: static; top: 0; padding: 0; text-shadow: none; text-align: left; } [data-theme="redesign"] .header-tl { font-weight: 300; letter-spacing: 0.15em; color: var(--text-bright); line-height: 1.2; } [data-theme="redesign"] .header-tr { font-weight: 300; letter-spacing: 0.3em; color: var(--text-dim); line-height: 1.4; } /* Reset hover effects from base theme */ [data-theme="redesign"] .header-logo:hover .header-tl, [data-theme="redesign"] .header-logo:hover .header-tr { color: inherit; text-shadow: none; } [data-theme="redesign"] .header-tagline { font-family: var(--font-display); font-style: italic; letter-spacing: 0.12em; color: var(--text-dim); opacity: 0.6; font-size: 0.75rem; margin-top: 0.75rem; } /* ---- LANDING PAGE: full header ---- */ [data-theme="redesign"] body:has(.landing-status-bar) .site-header { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.5rem 2rem; } [data-theme="redesign"] body:has(.landing-status-bar) .header-logo { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 1.25rem; max-width: none; width: auto; justify-content: center; } [data-theme="redesign"] body:has(.landing-status-bar) .header-skull { grid-row: 1 / -1; grid-column: 1; width: 80px; height: 80px; } [data-theme="redesign"] body:has(.landing-status-bar) .header-skull img { opacity: 0.7; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tl { grid-row: 1; grid-column: 2; font-size: 1.5rem; align-self: end; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tr { grid-row: 2; grid-column: 2; font-size: 0.85rem; align-self: start; } /* ---- NON-LANDING PAGES: compact header ---- */ [data-theme="redesign"] body:not(:has(.landing-status-bar)) .site-header { display: flex; align-items: center; justify-content: center; padding: 0.85rem 1.5rem; border-bottom: none; } [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-logo { display: flex; align-items: center; gap: 0.75rem; max-width: none; width: auto; grid-template-columns: none; } [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-skull { width: 32px; height: 32px; order: -1; } [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-skull img { opacity: 0.6; } [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-tl { font-size: 0.95rem; line-height: 1; } /* Hide "the forsaken lands" and tagline on non-landing pages */ [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-tr, [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-tagline { display: none; } /* ---- Header user controls ---- */ [data-theme="redesign"] .header-user { font-family: var(--font-prose); font-size: 0.75rem; display: flex; align-items: center; gap: 0.75rem; } [data-theme="redesign"] .header-user a, [data-theme="redesign"] .header-user button { color: var(--text-dim); font-size: 0.75rem; transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; } [data-theme="redesign"] .header-user a:hover, [data-theme="redesign"] .header-user button:hover { color: var(--text); } [data-theme="redesign"] .header-user-name { color: var(--text) !important; } /* Header user icons (Lucide) */ [data-theme="redesign"] .header-user svg { width: 13px; height: 13px; } /* Notification bell */ [data-theme="redesign"] .header-user-bell { position: relative; display: inline-flex; align-items: center; } [data-theme="redesign"] .header-user-bell .nav-unread { position: absolute; top: -4px; right: -6px; background: var(--highlight); color: var(--bg-body); font-size: 0.5rem; font-weight: 700; min-width: 13px; height: 13px; border-radius: 7px; padding: 0 3px; display: flex; align-items: center; justify-content: center; } /* Tools dropdown */ [data-theme="redesign"] .header-user-dropdown { z-index: 1100; } [data-theme="redesign"] .header-user-dropdown-menu { font-family: var(--font-prose); font-size: 0.78rem; background: var(--bg-panel); border: 1px solid var(--border-hover); border-radius: var(--radius-md); z-index: 1100; } [data-theme="redesign"] .header-user-dropdown-menu a:hover { background: var(--bg-hover); } /* On non-landing pages, center the header-user vertically */ [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-user { position: absolute; top: 50%; right: 1.25rem; transform: translateY(-50%); } /* On landing page, user controls are top-right */ [data-theme="redesign"] body:has(.landing-status-bar) .header-user { position: absolute; top: 0.75rem; right: 1.25rem; } /* ================================================================ NAVBAR Mockup: 40px height, centered tabs, animated underline ================================================================ */ [data-theme="redesign"] .navbar { position: sticky; top: 0; z-index: 1000; height: 40px; font-family: var(--font-prose); background: var(--bg-nav); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 0 1.5rem; border-bottom: 1px solid var(--border); } [data-theme="redesign"] .nav-tabs { justify-content: center; } [data-theme="redesign"] .nav-tabs a { font-family: var(--font-prose); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; padding: 0 1.1rem; height: 40px; color: var(--text-dim); transition: color 0.2s; position: relative; display: flex; align-items: center; gap: 0.3rem; text-decoration: none; } [data-theme="redesign"] .nav-tabs a:hover { color: var(--text); } /* Lucide icons in nav tabs */ [data-theme="redesign"] .nav-tabs a svg, [data-theme="redesign"] .nav-tabs a i { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.45; stroke-width: 2; } /* Animated underline on nav tabs */ [data-theme="redesign"] .nav-tabs a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 60%; height: 1px; background: var(--highlight); transition: transform 0.25s ease; } [data-theme="redesign"] .nav-tabs a:hover::after { transform: translateX(-50%) scaleX(1); } [data-theme="redesign"] .nav-tabs a.active { color: var(--text-bright); } [data-theme="redesign"] .nav-tabs a.active::after { transform: translateX(-50%) scaleX(1); opacity: 0.5; background: var(--highlight); } /* Nav right section */ [data-theme="redesign"] .nav-right { display: flex; align-items: center; position: absolute; right: 0; top: 0; height: 40px; } [data-theme="redesign"] .nav-play { font-family: var(--font-prose); font-weight: 600; font-size: 0.78rem; height: 40px; padding: 0 1.25rem; color: var(--accent) !important; display: flex; align-items: center; gap: 0.4rem; border-left: 1px solid var(--border); transition: background 0.2s, color 0.2s; } [data-theme="redesign"] .nav-play svg { width: 14px; height: 14px; } [data-theme="redesign"] .nav-play:hover { background: var(--success-muted); color: var(--accent-hover) !important; } [data-theme="redesign"] .nav-status { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-prose); font-size: 0.72rem; height: 40px; padding: 0 1rem; color: var(--text-dim); border-left: 1px solid var(--border); } [data-theme="redesign"] .nav-status.online { color: var(--text-dim); } /* Status dot glow */ [data-theme="redesign"] .status-dot.online { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4); } /* Unread badge — gold filled circle */ [data-theme="redesign"] .nav-unread { display: inline-flex; align-items: center; justify-content: center; background: var(--highlight); color: var(--bg-body); font-family: var(--font-prose); font-size: 0.5rem; font-weight: 700; min-width: 13px; height: 13px; border-radius: 7px; padding: 0 3px; vertical-align: middle; line-height: 1; margin-left: 0.25rem; } /* Scheme switcher select */ [data-theme="redesign"] .scheme-select { height: 40px; padding: 0 0.6rem; background: transparent; border: none; border-left: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-prose); font-size: 0.75rem; cursor: pointer; appearance: none; -webkit-appearance: none; } [data-theme="redesign"] .scheme-select:hover { color: var(--text); } [data-theme="redesign"] .scheme-select:focus { outline: none; color: var(--text-bright); } [data-theme="redesign"] .scheme-select option { background: var(--bg-panel); color: var(--text); } /* Mobile nav — hidden by default, slide in on .open IMPORTANT: position:fixed must be here to override body>* { position:relative } which wins over the base .mobile-nav { position:fixed } due to specificity */ [data-theme="redesign"] .mobile-nav { position: fixed; z-index: 2000; background: var(--bg-secondary); font-family: var(--font-prose); visibility: hidden; opacity: 0; right: 0 !important; transform: translateX(100%); transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s; } [data-theme="redesign"] .mobile-nav.open { visibility: visible; opacity: 1; right: 0 !important; transform: translateX(0); } [data-theme="redesign"] .mobile-nav a, [data-theme="redesign"] .mobile-nav button { font-family: var(--font-prose); color: var(--text); } [data-theme="redesign"] .mobile-nav a:hover, [data-theme="redesign"] .mobile-nav a.active { color: var(--highlight); } [data-theme="redesign"] .mobile-overlay { position: fixed; z-index: 1999; } [data-theme="redesign"] .mobile-overlay.open { background: rgba(8, 8, 10, 0.6); } /* Hamburger */ [data-theme="redesign"] .hamburger span { background: var(--text-dim); } /* ================================================================ CONTAINER ================================================================ */ [data-theme="redesign"] .container { font-family: var(--font-prose); } /* ================================================================ SIDEBAR (forum, wiki, admin) Mockup: 210px, sticky, bg-surface, left border accent on active ================================================================ */ [data-theme="redesign"] .forum-sidebar, [data-theme="redesign"] .wiki-sidebar, [data-theme="redesign"] .admin-sidebar { width: 210px; background: var(--bg-secondary); backdrop-filter: none; font-family: var(--font-prose); border-right: 1px solid var(--border); padding: 1.25rem 0; position: sticky; top: 40px; align-self: flex-start; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: none; } [data-theme="redesign"] .forum-sidebar::-webkit-scrollbar, [data-theme="redesign"] .wiki-sidebar::-webkit-scrollbar, [data-theme="redesign"] .admin-sidebar::-webkit-scrollbar { display: none; } [data-theme="redesign"] .sidebar-group { margin-bottom: 1.25rem; } [data-theme="redesign"] .sidebar-title { font-family: var(--font-prose); font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); padding: 0 1.25rem; margin-bottom: 0.35rem; } [data-theme="redesign"] .forum-sidebar li a, [data-theme="redesign"] .wiki-sidebar li a, [data-theme="redesign"] .admin-sidebar li a { font-family: var(--font-prose); font-size: 0.8rem; padding: 0.3rem 1.25rem; border-left: 2px solid transparent; transition: all 0.15s; display: flex; align-items: center; gap: 0.4rem; color: var(--text); } /* Lucide icons in sidebar — dimmer than text */ [data-theme="redesign"] .forum-sidebar li a svg, [data-theme="redesign"] .wiki-sidebar li a svg, [data-theme="redesign"] .admin-sidebar li a svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.4; } [data-theme="redesign"] .forum-sidebar li a:hover, [data-theme="redesign"] .wiki-sidebar li a:hover, [data-theme="redesign"] .admin-sidebar li a:hover, [data-theme="redesign"] .map-sidebar li a:hover { background: var(--bg-hover); color: var(--text-bright); text-decoration: none; } /* Active sidebar link */ [data-theme="redesign"] .forum-sidebar li a.active, [data-theme="redesign"] .wiki-sidebar li a.active, [data-theme="redesign"] .admin-sidebar li a.active, [data-theme="redesign"] .map-sidebar li a.active { color: var(--highlight); border-left-color: var(--highlight); background: var(--accent-muted); } /* Sub-sidebar links */ [data-theme="redesign"] .sidebar-sub { padding-left: 1.6rem !important; font-size: 0.75rem !important; } [data-theme="redesign"] .sidebar-sub .subforum-indent { width: 10px; height: 10px; flex-shrink: 0; color: var(--text-dim); opacity: 0.2; stroke-width: 1.5; } /* ================================================================ BREADCRUMBS ================================================================ */ [data-theme="redesign"] .breadcrumb { font-family: var(--font-prose); font-size: 0.78rem; color: var(--text-dim); margin-bottom: 1.25rem; } [data-theme="redesign"] .breadcrumb a { color: var(--text); } [data-theme="redesign"] .breadcrumb a:hover { color: var(--link); } /* Breadcrumb separator chevron icons (injected by JS) */ [data-theme="redesign"] .breadcrumb .bc-sep { display: inline-block; width: 14px; height: 14px; vertical-align: middle; color: var(--text-dim); opacity: 0.4; margin: 0 0.2rem; position: relative; top: -1px; } /* ================================================================ BUTTONS Mockup: transparent bg, border-hover border, accent for primary ================================================================ */ [data-theme="redesign"] .btn { font-family: var(--font-prose); font-size: 0.78rem; font-weight: 500; padding: 0.4rem 0.85rem; border: 1px solid var(--border-hover); border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text); transition: all 0.2s; line-height: 1.4; display: inline-flex; align-items: center; gap: 0.35rem; } [data-theme="redesign"] .btn svg { width: 14px; height: 14px; } [data-theme="redesign"] .btn:hover { border-color: var(--text-dim); color: var(--text-bright); background: var(--bg-hover); } [data-theme="redesign"] .btn-primary { border-color: var(--highlight); color: var(--highlight); font-weight: 600; background: rgba(var(--highlight-rgb), 0.08); } [data-theme="redesign"] .btn-primary:hover { background: rgba(var(--highlight-rgb), 0.15); color: var(--highlight-hover); border-color: var(--highlight); } [data-theme="redesign"] .btn-danger { border-color: var(--error); color: var(--error); } [data-theme="redesign"] .btn-danger:hover { background: var(--error-bg); } [data-theme="redesign"] .btn-small, [data-theme="redesign"] .btn-sm { padding: 0.25rem 0.55rem; font-size: 0.72rem; } [data-theme="redesign"] .btn-subscribed { border-color: var(--accent); color: var(--accent); } /* ================================================================ PANELS & CARDS ================================================================ */ [data-theme="redesign"] .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); backdrop-filter: none; transition: border-color 0.2s; } [data-theme="redesign"] .panel:hover { border-color: var(--border-hover); } [data-theme="redesign"] .panel h2 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; color: var(--highlight); letter-spacing: 0.04em; } [data-theme="redesign"] .panel-header { display: flex; align-items: center; gap: 0.4rem; } [data-theme="redesign"] .panel-header svg { width: 14px; height: 14px; color: var(--highlight); } /* ================================================================ FORUM ================================================================ */ /* Forum header: title + action buttons */ [data-theme="redesign"] .forum-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } [data-theme="redesign"] .forum-header h1 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--text-bright); letter-spacing: 0.02em; margin-bottom: 0; } [data-theme="redesign"] .forum-header-actions { display: flex; gap: 0.4rem; align-items: center; } /* Forum search on index page */ [data-theme="redesign"] .forum-search-form { display: flex; gap: 0.4rem; align-items: center; } [data-theme="redesign"] .forum-search-input { font-family: var(--font-mono); font-size: 0.82rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 0.35rem 0.6rem; transition: border-color 0.2s; } [data-theme="redesign"] .forum-search-input:focus { outline: none; border-color: var(--border-focus); } [data-theme="redesign"] .forum-search-input::placeholder { color: var(--text-dim); } /* Forum name in rows */ [data-theme="redesign"] .forum-name { font-family: var(--font-prose); font-weight: 500; } [data-theme="redesign"] .forum-info .forum-name { color: var(--link); font-size: 0.88rem; } [data-theme="redesign"] .forum-info .forum-name:hover { color: var(--link-hover); } /* Forum description */ [data-theme="redesign"] .forum-desc { font-family: var(--font-prose); font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1.25rem; } /* Category headers */ [data-theme="redesign"] .category-header { font-family: var(--font-prose); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); background: none; border: none; border-bottom: 1px solid var(--border); backdrop-filter: none; padding: 0 0 0.4rem; margin-bottom: 0; } /* Category section */ [data-theme="redesign"] .category-section { margin-bottom: 1.75rem; } /* Forum rows — remove boxiness */ [data-theme="redesign"] .forum-rows { border: none; border-radius: 0; } [data-theme="redesign"] .forum-row { border-bottom: 1px solid var(--border); transition: background 0.15s; background: none; backdrop-filter: none; padding: 0.6rem 0.5rem; } [data-theme="redesign"] .forum-row:last-child { border-bottom: none; } [data-theme="redesign"] .forum-row:hover { background: var(--bg-hover); } /* Forum icon — Lucide icons via data-icon */ [data-theme="redesign"] .forum-icon { width: 20px; height: 20px; } [data-theme="redesign"] .forum-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--text-dim); stroke-width: 1.5; opacity: 0.7; } /* Inline stats (replaces stacked stat-group) */ [data-theme="redesign"] .stat-inline { font-family: var(--font-prose); font-size: 0.75rem; color: var(--text-dim); } [data-theme="redesign"] .stat-sep { color: var(--text-dim); opacity: 0.4; margin: 0 0.15rem; } /* Legacy stacked stats */ [data-theme="redesign"] .stat-count { font-family: var(--font-prose); font-weight: 600; color: var(--text); } [data-theme="redesign"] .stat-label { font-family: var(--font-prose); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } [data-theme="redesign"] .forum-stats { color: var(--text-dim); flex-shrink: 0; white-space: nowrap; } /* Last post */ [data-theme="redesign"] .forum-lastpost { font-family: var(--font-prose); font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; } [data-theme="redesign"] .forum-lastpost a { color: var(--text); font-weight: 500; font-size: 0.75rem; } [data-theme="redesign"] .forum-lastpost a:hover { color: var(--link-hover); } [data-theme="redesign"] .forum-lastpost .lastpost-by { color: var(--text-dim); font-size: 0.72rem; } [data-theme="redesign"] .forum-lastpost .no-posts { color: var(--text-dim); } /* Subforum links */ [data-theme="redesign"] .subforum-links { margin-top: 0.4rem; gap: 0.25rem 0.6rem; } [data-theme="redesign"] .subforum-link { font-family: var(--font-prose); color: var(--text-dim); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem 0.15rem 0.3rem; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: color 0.15s, border-color 0.15s, background 0.15s; text-decoration: none; } [data-theme="redesign"] .subforum-link:hover { color: var(--text-bright); border-color: var(--highlight); background: rgba(var(--highlight-rgb), 0.06); text-decoration: none; } [data-theme="redesign"] .subforum-link::before { display: none; } [data-theme="redesign"] .subforum-link svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.3; stroke-width: 1.5; } /* Unread badge */ [data-theme="redesign"] .unread-badge { background: var(--highlight); color: var(--bg-body); font-size: 0.5rem; font-weight: 700; min-width: 13px; height: 13px; line-height: 13px; padding: 0 3px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; } /* ---- Topic list table ---- */ [data-theme="redesign"] .topic-list { font-family: var(--font-prose); width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } [data-theme="redesign"] .topic-list thead th { background: var(--bg-secondary); color: var(--text-dim); text-align: left; padding: 0.5rem 0.85rem; font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } [data-theme="redesign"] .topic-list thead th.count { text-align: center; width: 70px; } [data-theme="redesign"] .topic-list thead th.meta { width: 140px; } /* Sort header links in table headers */ [data-theme="redesign"] .topic-list thead th a, [data-theme="redesign"] .sort-header { color: var(--text-dim); text-decoration: none; } [data-theme="redesign"] .topic-list thead th a:hover, [data-theme="redesign"] .sort-header:hover { color: var(--text); text-decoration: none; } [data-theme="redesign"] .sort-header.sorted { color: var(--highlight); } /* First column header (Topic) — always gold accent */ [data-theme="redesign"] .topic-list thead th:first-child a { color: var(--highlight); } /* Table body */ [data-theme="redesign"] .topic-list tbody td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.85rem; } /* Reset alternating row stripes */ [data-theme="redesign"] .topic-list tbody tr:nth-child(even) td { background: transparent; } [data-theme="redesign"] .topic-list tbody tr { transition: background 0.15s; } [data-theme="redesign"] .topic-list tbody tr:hover td { background: var(--bg-hover); } /* Count and meta cells */ [data-theme="redesign"] .topic-list td.count { text-align: center; color: var(--text-dim); font-size: 0.82rem; } [data-theme="redesign"] .topic-list td.meta { font-size: 0.78rem; color: var(--text-dim); } /* Topic title — class is directly on the */ [data-theme="redesign"] .topic-title, [data-theme="redesign"] a.topic-title { font-family: var(--font-prose); font-weight: 500; color: var(--link); } [data-theme="redesign"] .topic-title:hover, [data-theme="redesign"] a.topic-title:hover { color: var(--link-hover); } /* Unread topics: gold dot + bright text */ [data-theme="redesign"] tr.unread .topic-title, [data-theme="redesign"] tr.unread a.topic-title { color: var(--text-bright); } [data-theme="redesign"] tr.unread .topic-title::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--highlight); margin-right: 0.5rem; vertical-align: middle; position: relative; top: -1px; } /* Topic author line */ [data-theme="redesign"] .topic-author { font-family: var(--font-prose); font-size: 0.72rem; color: var(--text-dim); } [data-theme="redesign"] .topic-author .author-imm { color: var(--link); } /* Topic header (single topic view) */ [data-theme="redesign"] .topic-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } [data-theme="redesign"] .topic-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--text-bright); margin-bottom: 0; } [data-theme="redesign"] .topic-header-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; } [data-theme="redesign"] .topic-header-actions .btn svg { width: 13px; height: 13px; } /* Mod panel (More dropdown) */ [data-theme="redesign"] .mod-panel .mod-actions { background: var(--bg-panel); border: 1px solid var(--border-hover); border-radius: var(--radius-md); padding: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } [data-theme="redesign"] .mod-panel.inline { position: relative; } [data-theme="redesign"] .mod-panel.inline .mod-actions { position: absolute; right: 0; top: calc(100% + 4px); z-index: 100; min-width: 200px; } /* Bug info / prayer info panels */ [data-theme="redesign"] .bug-info, [data-theme="redesign"] .prayer-info { font-family: var(--font-prose); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } [data-theme="redesign"] .bug-update-form { display: flex; gap: 0.4rem; align-items: center; border-top: none; padding-top: 0; } [data-theme="redesign"] .bug-update-form select { font-size: 0.78rem; padding: 0.25rem 0.4rem; } /* Mod bar (batch moderation) */ [data-theme="redesign"] .mod-bar { font-family: var(--font-prose); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.85rem; gap: 0.5rem; } [data-theme="redesign"] .mod-count { color: var(--text-dim); font-size: 0.78rem; } [data-theme="redesign"] .mod-bar .btn { font-family: var(--font-prose); font-size: 0.75rem; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.3rem 0.65rem; cursor: pointer; transition: all 0.2s; } [data-theme="redesign"] .mod-bar .btn:hover { border-color: var(--border-hover); color: var(--text-bright); } [data-theme="redesign"] .mod-bar .btn-danger { color: var(--error); border-color: rgba(192, 96, 80, 0.3); } [data-theme="redesign"] .mod-bar .btn-danger:hover { border-color: var(--error); background: rgba(192, 96, 80, 0.1); } /* Mod checkboxes */ [data-theme="redesign"] .mod-check { accent-color: var(--highlight); } /* Hidden topic/post styling */ [data-theme="redesign"] tr.hidden-topic td { opacity: 0.5; } [data-theme="redesign"] .hidden-post { opacity: 0.6; } /* ================================================================ POSTS Mockup: 180px sidebar column, refined spacing ================================================================ */ [data-theme="redesign"] .post { grid-template-columns: 180px 1fr; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color 0.2s; } [data-theme="redesign"] .post:hover { border-color: var(--border-hover); } [data-theme="redesign"] .post-sidebar { background: var(--bg-secondary); padding: 0.85rem 1rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; } [data-theme="redesign"] .post-author a { font-family: var(--font-prose); font-weight: 500; font-size: 0.85rem; color: var(--highlight); } [data-theme="redesign"] .post-author a:hover { color: var(--highlight-hover); } [data-theme="redesign"] .post-author-imm, [data-theme="redesign"] a.post-author-imm { color: var(--link) !important; } [data-theme="redesign"] .post-author-title { font-family: var(--font-display); font-style: italic; font-size: 0.78rem; color: var(--text-dim); } [data-theme="redesign"] .post-stats { font-family: var(--font-prose); font-size: 0.68rem; color: var(--text-dim); } [data-theme="redesign"] .post-date { font-family: var(--font-prose); font-size: 0.68rem; color: var(--text-dim); margin-top: auto; } [data-theme="redesign"] .post-avatar { width: 56px; height: 56px; border-radius: 50%; opacity: 0.25; filter: grayscale(30%); transition: opacity 0.2s; } [data-theme="redesign"] .post-sidebar:hover .post-avatar { opacity: 0.4; filter: none; } [data-theme="redesign"] .post-body { font-family: var(--font-prose); font-size: 0.85rem; line-height: 1.75; padding: 1rem 1.25rem; color: var(--text); } [data-theme="redesign"] .post-body blockquote { border-left: 2px solid var(--highlight); background: rgba(var(--highlight-rgb), 0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0.5rem 0; padding: 0.5rem 0.75rem; color: var(--text-dim); } [data-theme="redesign"] .post-body code { background: rgba(var(--warm-white-rgb), 0.04); color: var(--highlight); padding: 0.1rem 0.35rem; border-radius: 2px; font-size: 0.82em; font-family: var(--font-mono); } [data-theme="redesign"] .post-actions { font-family: var(--font-prose); padding: 0.5rem 1.25rem; border-top: 1px solid var(--border); } /* Reaction buttons */ [data-theme="redesign"] .react-btn { font-family: var(--font-prose); font-size: 0.68rem; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); transition: all 0.2s; } [data-theme="redesign"] .react-btn:hover { border-color: var(--highlight); color: var(--text); } [data-theme="redesign"] .react-btn.reacted { border-color: var(--highlight); color: var(--highlight); } [data-theme="redesign"] .react-btn svg { width: 12px; height: 12px; } [data-theme="redesign"] .react-btn.react-add { padding: 0.25rem 0.4rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } [data-theme="redesign"] .react-btn.react-add svg { width: 13px; height: 13px; display: block; } /* Reply form */ [data-theme="redesign"] .reply-form { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); } [data-theme="redesign"] .reply-form h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--text-bright); } /* ================================================================ BADGES ================================================================ */ [data-theme="redesign"] .badge { font-family: var(--font-prose); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.35rem; text-transform: uppercase; } [data-theme="redesign"] .badge svg { width: 10px; height: 10px; } [data-theme="redesign"] .badge-pin { color: var(--highlight); background: var(--accent-muted); } [data-theme="redesign"] .badge-lock { color: #b89070; background: rgba(184, 144, 112, 0.1); } [data-theme="redesign"] .badge-staff { color: #7a9eb8; background: rgba(122, 158, 184, 0.1); } [data-theme="redesign"] .badge-op { color: var(--accent); background: var(--success-muted); } [data-theme="redesign"] .badge-hidden { color: var(--error); background: var(--error-bg); } [data-theme="redesign"] .badge-category { color: var(--text-dim); background: rgba(var(--warm-white-rgb), 0.04); } /* ================================================================ WIKI ================================================================ */ [data-theme="redesign"] .wiki-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } [data-theme="redesign"] .wiki-page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--text-bright); letter-spacing: 0.02em; margin-bottom: 0; } [data-theme="redesign"] .wiki-page-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; } [data-theme="redesign"] .wiki-page-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; } [data-theme="redesign"] .wiki-page-actions .btn svg { width: 14px; height: 14px; opacity: 0.7; } [data-theme="redesign"] .wiki-content { font-family: var(--font-prose); font-size: 0.88rem; line-height: 1.8; color: var(--text); } [data-theme="redesign"] .wiki-content h1, [data-theme="redesign"] .wiki-content h2, [data-theme="redesign"] .wiki-content h3, [data-theme="redesign"] .wiki-content h4, [data-theme="redesign"] .wiki-content h5, [data-theme="redesign"] .wiki-content h6 { font-family: var(--font-display); font-weight: 400; color: var(--text-bright); } [data-theme="redesign"] .wiki-content h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); letter-spacing: 0.02em; } [data-theme="redesign"] .wiki-content h3 { font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.5rem; } [data-theme="redesign"] .wiki-content p { margin-bottom: 0.85rem; } [data-theme="redesign"] .wiki-content ul, [data-theme="redesign"] .wiki-content ol { margin: 0.5rem 0 0.85rem 1.5rem; } [data-theme="redesign"] .wiki-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; } [data-theme="redesign"] .wiki-content table th { text-align: left; padding: 0.5rem 0.75rem; background: var(--bg-secondary); color: var(--text-bright); font-weight: 500; font-size: 0.8rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: color 0.2s; } [data-theme="redesign"] .wiki-content table th:hover { color: var(--highlight); } [data-theme="redesign"] .wiki-content table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; } [data-theme="redesign"] .wiki-content table tr:hover td { background: var(--bg-hover); } [data-theme="redesign"] .wiki-content blockquote { border-left: 2px solid var(--highlight); margin: 0.75rem 0; padding: 0.5rem 1rem; color: var(--text-dim); background: rgba(var(--highlight-rgb), 0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ---- Inline code ---- */ [data-theme="redesign"] .wiki-content code { background: rgba(var(--highlight-rgb), 0.06); border: 1px solid rgba(var(--highlight-rgb), 0.08); padding: 0.1rem 0.4rem; border-radius: 3px; color: var(--highlight); font-family: var(--font-mono); } /* ---- Plain code blocks — parchment edge ---- */ [data-theme="redesign"] .wiki-content pre { background: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%); padding: 0.85rem; border: none; border-left: 2px solid rgba(var(--highlight-rgb), 0.35); border-radius: 0; overflow-x: auto; font-family: var(--font-mono); line-height: 1.55; } [data-theme="redesign"] .wiki-content pre code { color: var(--text); background: none; border: none; padding: 0; } /* ---- Syntax-highlighted code blocks (Chroma inline styles) — parchment edge ---- */ [data-theme="redesign"] .wiki-content pre[style], [data-theme="redesign"] .post-body pre[style] { background-color: rgba(14, 14, 17, 0.8) !important; background-image: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%) !important; border: none; border-left: 2px solid rgba(var(--highlight-rgb), 0.35); border-radius: 0; padding: 0.85rem; margin: 0.75rem 0; } /* ---- MUD log blocks — keep terminal dark, gold edge ---- */ [data-theme="redesign"] .wiki-content pre.mudlog, [data-theme="redesign"] .post-body pre.mudlog { background: #0a0a0a; border: none; border-left: 2px solid rgba(var(--highlight-rgb), 0.25); border-radius: 0; } /* ---- File blocks ---- */ [data-theme="redesign"] .wiki-content pre.file { border-left: 2px solid rgba(var(--highlight-rgb), 0.5); } /* ---- Post body code (forum posts) — same treatment ---- */ [data-theme="redesign"] .post-body code { background: rgba(var(--highlight-rgb), 0.06); border: 1px solid rgba(var(--highlight-rgb), 0.08); padding: 0.1rem 0.4rem; border-radius: 3px; color: var(--highlight); font-family: var(--font-mono); } [data-theme="redesign"] .post-body pre { background: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%); border: none; border-left: 2px solid rgba(var(--highlight-rgb), 0.35); border-radius: 0; padding: 0.85rem; font-family: var(--font-mono); line-height: 1.55; } [data-theme="redesign"] .post-body pre code { background: none; border: none; padding: 0; } /* ---- Help hover links [[help:X]] — gold accent ---- */ [data-theme="redesign"] .help-hover { color: var(--highlight); border-bottom: 1px dotted rgba(var(--highlight-rgb), 0.4); cursor: help; transition: color 0.15s, border-color 0.15s; } [data-theme="redesign"] .help-hover:hover { color: var(--highlight-hover); border-bottom-color: var(--highlight); } /* ---- Item hover links [[item:X]] — gold accent ---- */ [data-theme="redesign"] .item-hover { color: var(--highlight); border-bottom: 1px dotted rgba(var(--highlight-rgb), 0.4); transition: color 0.15s, border-color 0.15s; } [data-theme="redesign"] .item-hover:hover { color: var(--highlight-hover); border-bottom-color: var(--highlight); } [data-theme="redesign"] .item-hover-missing { color: var(--text-dim); border-bottom: 1px dotted rgba(180, 70, 70, 0.4); } /* Wiki page meta */ [data-theme="redesign"] .wiki-page-meta, [data-theme="redesign"] .wiki-meta { font-family: var(--font-prose); color: var(--text-dim); font-size: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.4rem; } /* ================================================================ ITEMS DATABASE ================================================================ */ [data-theme="redesign"] .item-search-form { font-family: var(--font-prose); margin-bottom: 1.75rem; } [data-theme="redesign"] .item-search-form label { display: block; margin-bottom: 0.3rem; color: var(--text-dim); font-size: 0.72rem; text-transform: lowercase; letter-spacing: 0.04em; } [data-theme="redesign"] .item-search-form input, [data-theme="redesign"] .item-search-form select { font-family: var(--font-mono); font-size: 0.82rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); transition: border-color 0.2s; } [data-theme="redesign"] .item-search-form input:focus, [data-theme="redesign"] .item-search-form select:focus { outline: none; border-color: var(--border-focus); } [data-theme="redesign"] .item-count { font-family: var(--font-prose); color: var(--text-dim); font-size: 0.78rem; } [data-theme="redesign"] .item-table { font-family: var(--font-prose); width: 100%; border-collapse: collapse; } [data-theme="redesign"] .item-table thead th { background: var(--bg-secondary); color: var(--text-dim); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); text-align: left; padding: 0.5rem 0.75rem; cursor: pointer; transition: color 0.2s; } [data-theme="redesign"] .item-table thead th:hover { color: var(--highlight); } [data-theme="redesign"] .item-table thead th.sorted { color: var(--highlight); } [data-theme="redesign"] .item-table tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; vertical-align: top; } [data-theme="redesign"] .item-table tbody tr { transition: background 0.15s; } [data-theme="redesign"] .item-table tbody tr:hover { background: var(--bg-hover); } [data-theme="redesign"] .item-name { font-weight: 500; } [data-theme="redesign"] .item-flags { font-size: 0.72rem; color: var(--text-dim); } [data-theme="redesign"] .item-affects { font-size: 0.72rem; color: var(--accent); } [data-theme="redesign"] .item-area { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; } /* Item detail */ /* ================================================================ ITEM DETAIL PAGE (idet-) ================================================================ */ [data-theme="redesign"] .idet { max-width: 900px; } [data-theme="redesign"] .idet-header h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--highlight); margin: 0 0 0.25rem 0; } [data-theme="redesign"] .idet-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } [data-theme="redesign"] .idet-pill { font-family: var(--font-prose); font-size: 0.68rem; font-weight: 500; color: var(--text-dim); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 3px; padding: 0.2rem 0.55rem; letter-spacing: 0.02em; } [data-theme="redesign"] .idet-pill-type { text-transform: capitalize; color: var(--highlight); border-color: var(--highlight-dim, var(--border)); background: rgba(200, 170, 110, 0.07); } [data-theme="redesign"] .idet-pill-hidden { color: #c84040; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(200, 64, 64, 0.1); border-color: rgba(200, 64, 64, 0.2); } /* Two-column body layout */ [data-theme="redesign"] .idet-body { display: grid; grid-template-columns: 1fr 280px; gap: 0.75rem; margin-bottom: 0.75rem; } [data-theme="redesign"] .idet-left { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } [data-theme="redesign"] .idet-right { display: flex; flex-direction: column; gap: 0.75rem; } /* Identify output */ [data-theme="redesign"] .identify-output { font-family: var(--font-mono); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.78rem; color: var(--text); line-height: 1.6; white-space: pre-wrap; margin: 0; } /* Card containers */ [data-theme="redesign"] .idet-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } [data-theme="redesign"] .idet-card-label { font-family: var(--font-prose); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); padding: 0.5rem 0.75rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } /* Stat rows (key-value pairs) */ [data-theme="redesign"] .idet-stats { padding: 0.15rem 0; } [data-theme="redesign"] .idet-stat { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.75rem; font-family: var(--font-prose); font-size: 0.78rem; } [data-theme="redesign"] .idet-stat > span:first-child { color: var(--text-dim); font-size: 0.72rem; } [data-theme="redesign"] .idet-stat > span:last-child { color: var(--text-bright); text-align: right; } [data-theme="redesign"] .idet-stat-tags > span:last-child { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: flex-end; } [data-theme="redesign"] .idet-highlight { color: var(--highlight); } /* Affect rows */ [data-theme="redesign"] .idet-affects { padding: 0.15rem 0; } [data-theme="redesign"] .idet-aff-row { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.75rem; font-family: var(--font-prose); font-size: 0.78rem; } [data-theme="redesign"] .idet-aff-name { color: var(--text-dim); font-size: 0.72rem; } [data-theme="redesign"] .idet-aff-val { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-bright); } [data-theme="redesign"] .idet-aff-val.val-pos { color: #7aba7a; } [data-theme="redesign"] .idet-aff-val.val-neg { color: #c87070; } /* Flag row inside cards */ [data-theme="redesign"] .idet-flagrow { padding: 0.5rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem; } /* Badge variants for item flags */ [data-theme="redesign"] .badge-flag { color: var(--highlight); background: var(--accent-muted); } /* Restriction badges */ [data-theme="redesign"] .idet-restrict-allow { color: #7aba7a; } [data-theme="redesign"] .idet-badge-allow { color: #7aba7a; background: rgba(122, 186, 122, 0.1); border: 1px solid rgba(122, 186, 122, 0.15); } [data-theme="redesign"] .idet-badge-deny { color: #c87070; background: rgba(200, 112, 112, 0.1); border: 1px solid rgba(200, 112, 112, 0.15); } [data-theme="redesign"] .idet-card-restrict .idet-card-label { color: #b89070; } /* Compare section */ [data-theme="redesign"] .idet-compare { margin-bottom: 0.75rem; } [data-theme="redesign"] .idet-compare .idet-card-label { background: none; border: none; padding: 0 0 0.35rem 0; } /* Footer meta */ [data-theme="redesign"] .idet-meta { display: flex; justify-content: flex-end; padding-top: 0.25rem; } @media (max-width: 700px) { [data-theme="redesign"] .idet-body { grid-template-columns: 1fr; } } /* Compare bar */ [data-theme="redesign"] .compare-bar { background: var(--bg-panel); border: 1px solid var(--highlight); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); font-family: var(--font-prose); font-size: 0.82rem; } /* ================================================================ FORMS Mockup: lowercase labels, mono font inputs ================================================================ */ [data-theme="redesign"] label { font-family: var(--font-prose); font-size: 0.72rem; text-transform: lowercase; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 500; } [data-theme="redesign"] input, [data-theme="redesign"] select { font-family: var(--font-prose); border-radius: var(--radius-sm); transition: border-color 0.2s; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); } [data-theme="redesign"] input:focus, [data-theme="redesign"] select:focus, [data-theme="redesign"] textarea:focus { outline: none; border-color: var(--border-focus); } [data-theme="redesign"] textarea { font-family: var(--font-prose); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); } /* Keep markdown editor mono */ [data-theme="redesign"] textarea.md-editor, [data-theme="redesign"] .mde-editor-pane textarea { font-family: var(--font-mono); } /* Form rows (item search) */ [data-theme="redesign"] .form-row { display: flex; gap: 0.85rem; margin-bottom: 0.65rem; } [data-theme="redesign"] .form-group { flex: 1; min-width: 0; } /* ================================================================ PAGINATION ================================================================ */ [data-theme="redesign"] .pagination { font-family: var(--font-prose); } [data-theme="redesign"] .pagination a { border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all 0.2s; } [data-theme="redesign"] .pagination a:hover { border-color: var(--highlight); color: var(--highlight); } [data-theme="redesign"] .pagination .current { background: var(--highlight); color: var(--bg-body); font-weight: 600; border-radius: var(--radius-sm); } [data-theme="redesign"] .pagination-info { color: var(--text-dim); font-size: 0.72rem; } /* ================================================================ LANDING PAGE ================================================================ */ /* Status bar */ [data-theme="redesign"] .landing-status-bar { font-family: var(--font-prose); font-size: 0.78rem; color: var(--text-dim); max-width: 960px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; gap: 0.4rem; } [data-theme="redesign"] .landing-status-bar svg { width: 14px; height: 14px; } /* World blurbs */ [data-theme="redesign"] .landing-world { gap: 2.5rem; max-width: 960px; margin: 0 auto; padding: 2rem 2rem 2.5rem; border-top: 1px solid var(--border); } [data-theme="redesign"] .landing-world h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--highlight); letter-spacing: 0.02em; } [data-theme="redesign"] .landing-world p { font-family: var(--font-prose); font-size: 0.82rem; line-height: 1.7; color: var(--text); } /* Landing lower — grid layout: left column (activity + updates), right column (cabals) */ [data-theme="redesign"] .landing-lower { display: grid; grid-template-columns: 380px 1fr; grid-template-rows: auto auto; gap: 1.25rem; max-width: 1060px; margin: 0 auto; padding: 0 2rem 3rem; align-items: start; } [data-theme="redesign"] .landing-lower .activity-section { grid-column: 1; grid-row: 1; width: auto; } [data-theme="redesign"] .landing-lower .updates-section { grid-column: 1; grid-row: 2; width: auto; } [data-theme="redesign"] .landing-lower .cabals-section { grid-column: 2; grid-row: 1 / -1; width: auto; text-align: left; padding: 0; margin: 0; } /* When no activity section, updates takes first row */ [data-theme="redesign"] .landing-lower .updates-section:first-child { grid-row: 1; } /* Activity/Updates panels */ [data-theme="redesign"] .activity-panel, [data-theme="redesign"] .updates-panel { padding: 0; overflow: hidden; } [data-theme="redesign"] .activity-panel h2, [data-theme="redesign"] .updates-panel h2 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; color: var(--highlight); letter-spacing: 0.04em; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: 0; display: flex; align-items: center; gap: 0.5rem; } [data-theme="redesign"] .activity-panel h2 svg, [data-theme="redesign"] .updates-panel h2 svg { width: 14px; height: 14px; color: var(--highlight); } [data-theme="redesign"] .activity-list, [data-theme="redesign"] .updates-list { padding: 0; } [data-theme="redesign"] .activity-item { padding: 0.45rem 1rem; transition: background 0.15s; } [data-theme="redesign"] .activity-item:hover { background: var(--bg-hover); } [data-theme="redesign"] .activity-title { font-family: var(--font-prose); font-size: 0.8rem; } [data-theme="redesign"] .activity-meta { font-family: var(--font-prose); font-size: 0.68rem; color: var(--text-dim); } /* Updates items */ [data-theme="redesign"] .updates-item { padding: 0.4rem 1rem; transition: background 0.15s; } [data-theme="redesign"] .updates-item:hover { background: var(--bg-hover); } /* Update type tags — match mockup colors */ [data-theme="redesign"] .updates-type { font-family: var(--font-prose); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 0.1rem 0.35rem; border-radius: 2px; } [data-theme="redesign"] .updates-type-post { color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3); } [data-theme="redesign"] .updates-type-wiki { color: #7a9eb8; border: 1px solid rgba(122, 158, 184, 0.3); } [data-theme="redesign"] .updates-type-bug { color: var(--highlight); border: 1px solid rgba(var(--highlight-rgb), 0.3); } [data-theme="redesign"] .updates-title { font-family: var(--font-prose); font-size: 0.8rem; } /* Cabals */ [data-theme="redesign"] .cabals-section h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--highlight); letter-spacing: 0.02em; } [data-theme="redesign"] .cabals-subtitle { font-family: var(--font-prose); font-style: italic; color: var(--text-dim); font-size: 0.78rem; margin-bottom: 1.25rem; } /* Cabal grid — 2 columns to match mockup */ [data-theme="redesign"] .cabal-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } [data-theme="redesign"] .cabal-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem; display: flex; gap: 0.75rem; align-items: flex-start; transition: border-color 0.2s, background 0.2s; text-decoration: none; } [data-theme="redesign"] .cabal-card:hover { border-color: var(--border-hover); background: var(--bg-hover); text-decoration: none; } [data-theme="redesign"] .cabal-card svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--highlight); opacity: 0.6; } [data-theme="redesign"] .cabal-card h3 { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--text-bright); margin-bottom: 0.2rem; } [data-theme="redesign"] .cabal-card p { font-family: var(--font-prose); font-size: 0.72rem; color: var(--text-dim); line-height: 1.55; } /* Landing footer */ [data-theme="redesign"] .landing-footer { font-family: var(--font-prose); border-top: 1px solid var(--border); } [data-theme="redesign"] .footer-connect { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); } [data-theme="redesign"] .footer-connect .accent { color: var(--accent); } [data-theme="redesign"] .footer-links a { color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.04em; transition: color 0.2s; } [data-theme="redesign"] .footer-links a:hover { color: var(--link); } [data-theme="redesign"] .footer-copy { font-size: 0.62rem; opacity: 0.4; } /* ================================================================ CHANGES PAGE — Timeline design ================================================================ */ /* ---- Timeline heatmap strip ---- */ [data-theme="redesign"] .changes-timeline { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0 1.25rem; margin-bottom: 0.5rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; position: sticky; top: 40px; z-index: 10; background: rgba(8, 8, 10, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } [data-theme="redesign"] .tl-year-group { display: flex; align-items: flex-start; gap: 0.4rem; flex-shrink: 0; } [data-theme="redesign"] .tl-year-group + .tl-year-group { padding-left: 0.75rem; border-left: 1px solid var(--border); } [data-theme="redesign"] .tl-year-label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; text-decoration: none; transition: color 0.15s; } [data-theme="redesign"] .tl-year-label:hover { color: var(--highlight); } [data-theme="redesign"] .tl-blocks { display: flex; gap: 2px; align-items: flex-start; } [data-theme="redesign"] .tl-slot { position: relative; display: flex; flex-direction: column; align-items: center; } [data-theme="redesign"] .tl-date-label { font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-dim); opacity: 0.6; position: absolute; top: 10px; white-space: nowrap; pointer-events: none; } [data-theme="redesign"] .tl-block { width: 7px; height: 7px; border-radius: 1px; background: var(--text-dim); opacity: 0.1; display: block; transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s; } [data-theme="redesign"] .tl-block:hover { transform: scale(2); z-index: 1; } [data-theme="redesign"] .tl-block.tl-1 { background: var(--highlight); opacity: 0.25; } [data-theme="redesign"] .tl-block.tl-2 { background: var(--highlight); opacity: 0.45; } [data-theme="redesign"] .tl-block.tl-3 { background: var(--highlight); opacity: 0.7; } [data-theme="redesign"] .tl-block.tl-4 { background: var(--highlight); opacity: 1; box-shadow: 0 0 4px rgba(var(--highlight-rgb), 0.3); } [data-theme="redesign"] .tl-block:hover { opacity: 1 !important; box-shadow: 0 0 6px rgba(var(--highlight-rgb), 0.5); } [data-theme="redesign"] .tl-block.tl-active { transform: scale(2); opacity: 1 !important; box-shadow: 0 0 8px rgba(var(--highlight-rgb), 0.6); border-radius: 50%; } /* Year tab navigation */ [data-theme="redesign"] .changes-year-tabs { top: 40px; background: rgba(8, 8, 10, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 0.5rem; gap: 0; } [data-theme="redesign"] .changes-year-tabs a { font-family: var(--font-prose); font-size: 0.75rem; font-weight: 500; color: var(--text-dim); padding: 0.5rem 0.85rem; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } [data-theme="redesign"] .changes-year-tabs a:hover { color: var(--highlight); border-bottom-color: var(--highlight); } /* Year sections — timeline spine */ [data-theme="redesign"] .changes-year-section { border-left: 1px solid var(--border); padding-left: 1.75rem; margin-left: 0.5rem; margin-bottom: 2.5rem; position: relative; } /* Year heading — display font, node on timeline */ [data-theme="redesign"] .changes-year-heading { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--highlight); letter-spacing: 0.04em; margin-bottom: 1.25rem; position: relative; } /* Gold dot on the timeline spine */ [data-theme="redesign"] .changes-year-heading::before { content: ''; position: absolute; left: calc(-1.75rem - 0.5rem - 4px); top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 8px rgba(var(--highlight-rgb), 0.3); } /* Horizontal rule after year text */ [data-theme="redesign"] .changes-year-heading::after { background: var(--border); } /* Date headers — small node on timeline */ [data-theme="redesign"] .changes-date { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: var(--text-bright); letter-spacing: 0.03em; margin: 1.5rem 0 0.5rem; padding: 0.3rem 0.65rem; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-sm); display: inline-block; position: relative; } /* Small dot on timeline for dates */ [data-theme="redesign"] .changes-date::before { content: ''; position: absolute; left: calc(-1.75rem - 0.5rem - 2px); top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); } [data-theme="redesign"] .changes-year-section .changes-date:first-of-type { margin-top: 0; } /* Entry list */ [data-theme="redesign"] .changes-list { font-family: var(--font-prose); font-size: 0.82rem; line-height: 1.6; margin: 0.4rem 0 1.25rem 0; padding: 0; list-style: none; } [data-theme="redesign"] .changes-list li { position: relative; padding-left: 1rem; margin-bottom: 0.5rem; color: var(--text); } /* Subtle dash bullet */ [data-theme="redesign"] .changes-list li::before { content: '—'; position: absolute; left: 0; color: var(--text-dim); opacity: 0.5; font-size: 0.7rem; top: 0.15em; } [data-theme="redesign"] .changes-list li ul { list-style: none; margin: 0.3rem 0 0 0.5rem; padding: 0; } [data-theme="redesign"] .changes-list li ul li { margin-bottom: 0.2rem; padding-left: 1rem; } [data-theme="redesign"] .changes-list li ul li::before { content: '·'; opacity: 0.7; font-size: 0.9rem; } /* ================================================================ AUTH PAGES ================================================================ */ [data-theme="redesign"] .auth-form h1 { font-family: var(--font-display); } [data-theme="redesign"] .auth-form { font-family: var(--font-prose); } /* ================================================================ SETTINGS ================================================================ */ [data-theme="redesign"] .settings-card-header { font-family: var(--font-display); font-weight: 400; } [data-theme="redesign"] .settings-card-body { font-family: var(--font-prose); } /* ================================================================ PROFILE ================================================================ */ [data-theme="redesign"] .profile-header h1 { font-family: var(--font-display); font-weight: 400; } [data-theme="redesign"] .profile-info { font-family: var(--font-prose); } /* ================================================================ NOTIFICATIONS ================================================================ */ [data-theme="redesign"] .notif-header { margin-bottom: 1.25rem; } [data-theme="redesign"] .notif-list { gap: 0; } [data-theme="redesign"] .notif-item { font-family: var(--font-prose); display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; text-decoration: none; color: var(--text); transition: background 0.15s; } [data-theme="redesign"] .notif-item:first-child { border-top: 1px solid var(--border); } [data-theme="redesign"] .notif-item:hover { background: var(--bg-hover); text-decoration: none; } [data-theme="redesign"] .notif-item.notif-unread { border-left: none; background: rgba(var(--highlight-rgb), 0.04); } [data-theme="redesign"] .notif-item.notif-unread::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--highlight); flex-shrink: 0; box-shadow: 0 0 6px rgba(var(--highlight-rgb), 0.3); } [data-theme="redesign"] .notif-type { font-family: var(--font-prose); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); flex-shrink: 0; min-width: 3.5rem; text-align: center; } [data-theme="redesign"] .notif-type-reply { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.2); } [data-theme="redesign"] .notif-type-mention { color: var(--highlight); background: rgba(var(--highlight-rgb), 0.1); border: 1px solid rgba(var(--highlight-rgb), 0.2); } [data-theme="redesign"] .notif-type-quote { color: #7a9eb8; background: rgba(122, 158, 184, 0.1); border: 1px solid rgba(122, 158, 184, 0.2); } [data-theme="redesign"] .notif-type-pklog { color: var(--error); background: rgba(175, 95, 95, 0.1); border: 1px solid rgba(175, 95, 95, 0.2); } [data-theme="redesign"] .notif-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--text); } [data-theme="redesign"] .notif-link strong { color: var(--text-bright); font-weight: 600; } [data-theme="redesign"] .notif-time { font-size: 0.72rem; color: var(--text-dim); flex-shrink: 0; } /* ================================================================ DIFF VIEW ================================================================ */ [data-theme="redesign"] .diff-meta { font-family: var(--font-prose); } [data-theme="redesign"] .diff-view { font-family: var(--font-mono); } /* ================================================================ MARKDOWN EDITOR ================================================================ */ [data-theme="redesign"] .mde-toolbar button { font-family: var(--font-mono); } [data-theme="redesign"] .mde-preview-content { font-family: var(--font-prose); } /* ================================================================ COMPARE ================================================================ */ [data-theme="redesign"] .compare-grid { font-family: var(--font-prose); } [data-theme="redesign"] .compare-identify pre { font-family: var(--font-mono); } /* ================================================================ STATCARDS — Parchment Edge (gold) ================================================================ */ [data-theme="redesign"] .wiki-content .statcard, [data-theme="redesign"] .post-body .statcard { border-left: 2px solid rgba(var(--highlight-rgb), 0.35); background: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%); font-family: var(--font-prose); } [data-theme="redesign"] .wiki-content .statcard .statcard-title, [data-theme="redesign"] .post-body .statcard .statcard-title { font-family: var(--font-display); color: var(--highlight); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; } [data-theme="redesign"] .wiki-content .statcard table td, [data-theme="redesign"] .post-body .statcard table td { border-top-color: rgba(var(--warm-white-rgb), 0.03); font-family: var(--font-mono); } [data-theme="redesign"] .wiki-content .statcard table td:first-child, [data-theme="redesign"] .post-body .statcard table td:first-child { font-family: var(--font-prose); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.6px; } /* ---- Statcard pills — warm palette ---- */ [data-theme="redesign"] .pill-vuln { background: rgba(180, 70, 70, 0.12); color: #c47070; border-color: rgba(180, 70, 70, 0.18); } [data-theme="redesign"] .pill-resist { background: rgba(70, 120, 180, 0.10); color: #7098c4; border-color: rgba(70, 120, 180, 0.16); } [data-theme="redesign"] .pill-immune { background: rgba(var(--highlight-rgb), 0.10); color: var(--highlight); border-color: rgba(var(--highlight-rgb), 0.15); } [data-theme="redesign"] .pill-good { background: rgba(var(--accent-rgb), 0.10); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.16); } [data-theme="redesign"] .pill-evil { background: rgba(180, 70, 70, 0.12); color: #c47070; border-color: rgba(180, 70, 70, 0.18); } [data-theme="redesign"] .pill-neutral { background: rgba(var(--warm-white-rgb), 0.03); color: var(--text); border-color: rgba(var(--warm-white-rgb), 0.06); } [data-theme="redesign"] .pill-ethos { background: rgba(var(--warm-white-rgb), 0.03); color: var(--text); border-color: rgba(var(--warm-white-rgb), 0.06); } [data-theme="redesign"] .pill-stat { background: rgba(var(--warm-white-rgb), 0.03); color: var(--text); border-color: rgba(var(--warm-white-rgb), 0.06); } [data-theme="redesign"] .pill-align { background: rgba(var(--warm-white-rgb), 0.03); color: var(--text); border-color: rgba(var(--warm-white-rgb), 0.06); } /* ================================================================ HELP EMBEDS {help:KEYWORD} — Parchment Edge (gold) ================================================================ */ [data-theme="redesign"] .wiki-content .helpembed, [data-theme="redesign"] .post-body .helpembed { border-left: 2px solid rgba(var(--highlight-rgb), 0.4); background: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%); } [data-theme="redesign"] .wiki-content .helpembed .helpembed-keyword, [data-theme="redesign"] .post-body .helpembed .helpembed-keyword { font-family: var(--font-display); color: var(--highlight); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; } [data-theme="redesign"] .wiki-content .helpembed .helpembed-link, [data-theme="redesign"] .post-body .helpembed .helpembed-link { font-family: var(--font-prose); font-size: 0.68rem; } [data-theme="redesign"] .wiki-content .helpembed .helpembed-link:hover, [data-theme="redesign"] .post-body .helpembed .helpembed-link:hover { color: var(--highlight); } [data-theme="redesign"] .wiki-content .helpembed .helpembed-body, [data-theme="redesign"] .post-body .helpembed .helpembed-body { font-family: var(--font-prose); font-size: 0.84rem; line-height: 1.7; } [data-theme="redesign"] .wiki-content .helpembed .helpembed-body .help-syntax, [data-theme="redesign"] .post-body .helpembed .helpembed-body .help-syntax { background: rgba(var(--highlight-rgb), 0.06); border: 1px solid rgba(var(--highlight-rgb), 0.08); border-radius: 3px; padding: 2px 8px; } [data-theme="redesign"] .wiki-content .helpembed .helpembed-seealso a, [data-theme="redesign"] .post-body .helpembed .helpembed-seealso a { color: var(--link); } /* ================================================================ ITEM EMBEDS {item:REF} — Parchment Edge (gold) ================================================================ */ [data-theme="redesign"] .wiki-content .itemembed, [data-theme="redesign"] .post-body .itemembed { border: none; border-left: 2px solid rgba(var(--highlight-rgb), 0.4); border-radius: 0; background: linear-gradient(90deg, rgba(var(--highlight-rgb), 0.04) 0%, transparent 50%); } [data-theme="redesign"] .wiki-content .itemembed .itemembed-header, [data-theme="redesign"] .post-body .itemembed .itemembed-header { background: none; } [data-theme="redesign"] .wiki-content .itemembed .itemembed-name, [data-theme="redesign"] .post-body .itemembed .itemembed-name { font-family: var(--font-display); color: var(--highlight); font-weight: 600; font-size: 1rem; } [data-theme="redesign"] .wiki-content .itemembed .itemembed-link, [data-theme="redesign"] .post-body .itemembed .itemembed-link { font-family: var(--font-prose); font-size: 0.68rem; } [data-theme="redesign"] .wiki-content .itemembed .itemembed-link:hover, [data-theme="redesign"] .post-body .itemembed .itemembed-link:hover { color: var(--highlight); } [data-theme="redesign"] .wiki-content .itemembed .itemembed-meta, [data-theme="redesign"] .post-body .itemembed .itemembed-meta { border-bottom: none; padding-top: 0; } [data-theme="redesign"] .itemembed-flag { background: rgba(var(--highlight-rgb), 0.08); border: 1px solid rgba(var(--highlight-rgb), 0.12); color: var(--highlight); } [data-theme="redesign"] .wiki-content .itemembed .itemembed-body .identify-output, [data-theme="redesign"] .post-body .itemembed .itemembed-body .identify-output { font-family: var(--font-mono); } /* ================================================================ HELP & ITEM TOOLTIP POPUPS — Gold-accented panel ================================================================ */ [data-theme="redesign"] .help-popup { font-family: var(--font-prose); background: var(--bg-panel); border: 1px solid var(--border); border-left: 2px solid rgba(var(--highlight-rgb), 0.4); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--highlight-rgb), 0.05); } [data-theme="redesign"] .help-popup .helpembed { border-left: none; background: none; } [data-theme="redesign"] .help-popup .helpembed-keyword { font-family: var(--font-display); color: var(--highlight); font-weight: 600; font-size: 0.95rem; } [data-theme="redesign"] .help-popup .helpembed-link { font-family: var(--font-prose); font-size: 0.68rem; } [data-theme="redesign"] .help-popup .helpembed-link:hover { color: var(--highlight); } [data-theme="redesign"] .help-popup .helpembed-body .help-syntax { background: rgba(var(--highlight-rgb), 0.06); border: 1px solid rgba(var(--highlight-rgb), 0.08); border-radius: 3px; padding: 2px 8px; } [data-theme="redesign"] .help-popup .helpembed-seealso a { color: var(--link); } [data-theme="redesign"] .help-popup .itemembed { border: none; border-radius: 0; } [data-theme="redesign"] .help-popup .itemembed-header { background: rgba(var(--highlight-rgb), 0.04); border-bottom: 1px solid var(--border); } [data-theme="redesign"] .help-popup .itemembed-name { font-family: var(--font-display); color: var(--highlight); font-weight: 600; font-size: 0.95rem; } [data-theme="redesign"] .help-popup .itemembed-link { font-family: var(--font-prose); font-size: 0.68rem; } [data-theme="redesign"] .help-popup .itemembed-link:hover { color: var(--highlight); } [data-theme="redesign"] .help-popup .itemembed-flag { background: rgba(var(--highlight-rgb), 0.08); border: 1px solid rgba(var(--highlight-rgb), 0.12); color: var(--highlight); } /* ================================================================ ALERTS ================================================================ */ [data-theme="redesign"] .alert { font-family: var(--font-prose); border-radius: var(--radius-sm); } /* ================================================================ FOOTER ================================================================ */ [data-theme="redesign"] .site-footer { font-family: var(--font-prose); font-size: 0.68rem; color: var(--text-dim); } /* ================================================================ TABLES (general) ================================================================ */ [data-theme="redesign"] table { font-family: var(--font-prose); } [data-theme="redesign"] .forum-list th { font-family: var(--font-prose); font-weight: 500; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ================================================================ ADMIN PAGES ================================================================ */ [data-theme="redesign"] .admin-layout h1 { font-family: var(--font-display); } /* Admin dashboard grid */ [data-theme="redesign"] .admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; } [data-theme="redesign"] .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; } [data-theme="redesign"] .stat-card h3 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; font-family: var(--font-prose); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 500; } [data-theme="redesign"] .stat-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.2rem; } [data-theme="redesign"] .stat-row .val { color: var(--text-bright); } /* Stat bar (dashboard progress bars) */ [data-theme="redesign"] .stat-bar { background: var(--bg-secondary); border-radius: 3px; overflow: hidden; height: 6px; margin-top: 0.2rem; } [data-theme="redesign"] .stat-bar .bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; } /* ---- Admin: Permission Tags (pills) ---- */ [data-theme="redesign"] .perm-tag { font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.18rem 0.55rem; margin: 0.12rem; border-radius: 3px; border: none; color: var(--text-bright); background: rgba(var(--highlight-rgb), 0.12); } [data-theme="redesign"] .perm-tag.forum { color: #7bc8a0; background: rgba(123, 200, 160, 0.1); } [data-theme="redesign"] .perm-tag.wiki { color: #7ba8d4; background: rgba(123, 168, 212, 0.1); } [data-theme="redesign"] .perm-tag.items { color: #d4a87b; background: rgba(212, 168, 123, 0.1); } [data-theme="redesign"] .perm-tag.builder { color: #c49bd4; background: rgba(196, 155, 212, 0.1); } [data-theme="redesign"] .perm-tag.mod { color: #d49b9b; background: rgba(212, 155, 155, 0.1); } [data-theme="redesign"] .perm-tag.pklogs { color: #d4a89b; background: rgba(212, 168, 155, 0.1); } [data-theme="redesign"] .perm-tag.helps { color: #a8c4d4; background: rgba(168, 196, 212, 0.1); } /* ---- Admin: Forms & Inputs ---- */ [data-theme="redesign"] .admin-main input[type="text"], [data-theme="redesign"] .admin-main input[type="number"], [data-theme="redesign"] .admin-main input[type="password"], [data-theme="redesign"] .admin-main input[type="email"], [data-theme="redesign"] .admin-main textarea, [data-theme="redesign"] .admin-main select { font-family: var(--font-prose); font-size: 0.82rem; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; transition: border-color 0.2s; } [data-theme="redesign"] .admin-main input:focus, [data-theme="redesign"] .admin-main textarea:focus, [data-theme="redesign"] .admin-main select:focus { border-color: var(--highlight); outline: none; } [data-theme="redesign"] .admin-main label { font-family: var(--font-prose); color: var(--text); } /* ---- Admin: Search forms ---- */ [data-theme="redesign"] .perm-search, [data-theme="redesign"] .ban-search, [data-theme="redesign"] .reset-search { gap: 0.5rem; } [data-theme="redesign"] .perm-results, [data-theme="redesign"] .ban-results, [data-theme="redesign"] .reset-results, [data-theme="redesign"] .link-results, [data-theme="redesign"] .merge-results { background: var(--bg-panel); border: 1px solid var(--border-hover); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="redesign"] .perm-results div, [data-theme="redesign"] .ban-results div, [data-theme="redesign"] .reset-results div, [data-theme="redesign"] .link-results div, [data-theme="redesign"] .merge-results div { font-family: var(--font-prose); font-size: 0.82rem; border-bottom: 1px solid var(--border); transition: background 0.15s; } [data-theme="redesign"] .perm-results div:last-child, [data-theme="redesign"] .ban-results div:last-child, [data-theme="redesign"] .reset-results div:last-child { border-bottom: none; } [data-theme="redesign"] .perm-results div:hover, [data-theme="redesign"] .ban-results div:hover, [data-theme="redesign"] .reset-results div:hover, [data-theme="redesign"] .link-results div:hover, [data-theme="redesign"] .merge-results div:hover { background: var(--bg-hover); } /* ---- Admin: Permission editor ---- */ [data-theme="redesign"] .perm-editor { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; } [data-theme="redesign"] .perm-editor h4 { font-family: var(--font-display); color: var(--text-bright); } [data-theme="redesign"] .perm-group h5 { color: var(--highlight); font-family: var(--font-prose); font-weight: 600; } [data-theme="redesign"] .perm-group label { font-size: 0.82rem; color: var(--text); } [data-theme="redesign"] .perm-group input[type="checkbox"] { accent-color: var(--highlight); } [data-theme="redesign"] .role-shortcuts button { font-family: var(--font-prose); } /* ---- Admin: Ban form ---- */ [data-theme="redesign"] .ban-form { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; } [data-theme="redesign"] .ban-form h4 { font-family: var(--font-display); color: var(--text-bright); } /* ---- Admin: Tables ---- */ [data-theme="redesign"] .admin-main .topic-list, [data-theme="redesign"] .session-table, [data-theme="redesign"] .hidden-table { font-family: var(--font-prose); width: 100%; border-collapse: collapse; } [data-theme="redesign"] .admin-main .topic-list th, [data-theme="redesign"] .session-table th, [data-theme="redesign"] .hidden-table th { font-family: var(--font-prose); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--border); text-align: left; } [data-theme="redesign"] .admin-main .topic-list td, [data-theme="redesign"] .session-table td, [data-theme="redesign"] .hidden-table td { padding: 0.5rem 0.85rem; font-size: 0.82rem; border-bottom: 1px solid var(--border); color: var(--text); } [data-theme="redesign"] .admin-main .topic-list tr:hover td, [data-theme="redesign"] .session-table tr:hover td, [data-theme="redesign"] .hidden-table tr:hover td { background: var(--bg-hover); } /* Reset admin table alternating rows */ [data-theme="redesign"] .admin-main .topic-list tbody tr:nth-child(even) td { background: transparent; } /* Token column monospace */ [data-theme="redesign"] .token-col, [data-theme="redesign"] .token-preview { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); } /* ---- Admin: Password reset ---- */ [data-theme="redesign"] .reset-selection { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.85rem; } [data-theme="redesign"] .reset-selection .selected-name { color: var(--highlight); font-weight: 600; } [data-theme="redesign"] .generated-link { background: var(--bg-panel); border: 1px solid var(--highlight); border-radius: var(--radius-md); padding: 1rem; } [data-theme="redesign"] .generated-link input { font-family: var(--font-mono); font-size: 0.78rem; } /* ---- Admin: Logs ---- */ [data-theme="redesign"] .log-output { background: var(--bg-body); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 0.72rem; } [data-theme="redesign"] .log-toolbar .count { font-family: var(--font-prose); color: var(--text-dim); } /* ---- Admin: Forum config cards ---- */ [data-theme="redesign"] .forum-edit-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); } [data-theme="redesign"] .forum-edit-card summary { font-family: var(--font-prose); color: var(--text-bright); } [data-theme="redesign"] .forum-edit-card summary .forum-type { color: var(--text-dim); } [data-theme="redesign"] .forum-cat-header { font-family: var(--font-display); color: var(--highlight); border-bottom-color: var(--border); } [data-theme="redesign"] .forum-edit-grid label { color: var(--text-dim); font-size: 0.78rem; } /* ---- Admin: Character edit ---- */ [data-theme="redesign"] .field-grid { font-family: var(--font-prose); } [data-theme="redesign"] .field-group label { font-size: 0.78rem; color: var(--text-dim); } [data-theme="redesign"] .bitfield-editor { font-family: var(--font-prose); } [data-theme="redesign"] .bitfield-title { color: var(--text-dim); font-family: var(--font-mono); } [data-theme="redesign"] .bitfield-grid label { font-size: 0.82rem; color: var(--text); } [data-theme="redesign"] .bitfield-grid input[type="checkbox"] { accent-color: var(--highlight); } [data-theme="redesign"] .save-bar { background: var(--bg-panel); border-top-color: var(--border); } [data-theme="redesign"] .child-tabs button { font-family: var(--font-prose); color: var(--text-dim); } [data-theme="redesign"] .child-tabs button:hover { color: var(--text); } [data-theme="redesign"] .child-tabs button.active { color: var(--highlight); border-bottom-color: var(--highlight); } [data-theme="redesign"] .child-table { font-family: var(--font-prose); } [data-theme="redesign"] .child-table th { color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } [data-theme="redesign"] .child-table td { border-bottom: 1px solid var(--border); font-size: 0.78rem; } [data-theme="redesign"] .child-actions button { font-family: var(--font-mono); font-size: 0.68rem; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; } [data-theme="redesign"] .child-actions button:hover { border-color: var(--border-hover); color: var(--text); } [data-theme="redesign"] .child-actions button.del { color: var(--error); border-color: rgba(192, 96, 80, 0.3); } [data-theme="redesign"] .child-actions button.del:hover { border-color: var(--error); background: rgba(192, 96, 80, 0.1); } /* Tab nav */ [data-theme="redesign"] .tab-nav label { font-family: var(--font-prose); font-size: 0.78rem; color: var(--text-dim); cursor: pointer; padding: 0.4rem 0.75rem; border-bottom: 2px solid transparent; transition: all 0.15s; } [data-theme="redesign"] .tab-nav label:hover { color: var(--text); } [data-theme="redesign"] .tab-nav label.active { color: var(--highlight); border-bottom-color: var(--highlight); } /* ---- Admin: Accounts ---- */ [data-theme="redesign"] .admin-stats { font-family: var(--font-prose); } [data-theme="redesign"] .admin-stats .orphaned { color: var(--error); } [data-theme="redesign"] .admin-stats .linked { color: var(--accent); } [data-theme="redesign"] .acct-name { color: var(--highlight); } [data-theme="redesign"] .action-group { font-family: var(--font-prose); } [data-theme="redesign"] .action-sep { color: var(--text-dim); } [data-theme="redesign"] .selected-name { color: var(--highlight); font-weight: 600; } /* ---- Admin: Sessions ---- */ [data-theme="redesign"] .session-actions { display: flex; gap: 0.3rem; } /* ---- Admin: Hidden items ---- */ [data-theme="redesign"] .unhide-form { display: inline; } /* ---- Admin: Wiki migrate ---- */ [data-theme="redesign"] .original-source pre { background: var(--bg-body); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-mono); } /* ---- Admin: Who table ---- */ [data-theme="redesign"] .who-table { font-family: var(--font-prose); } [data-theme="redesign"] .who-table th { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); border-bottom: 1px solid var(--border); } [data-theme="redesign"] .who-table td { border-bottom: 1px solid var(--border); } [data-theme="redesign"] .who-imm td { color: var(--highlight); } /* ================================================================ PLAY PAGE Terminal stays mono, chrome uses new fonts ================================================================ */ [data-theme="redesign"] .play-page .navbar { position: fixed; top: 0; left: 0; right: 0; font-family: var(--font-prose); height: 40px; background: var(--bg-nav); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); z-index: 1000; } /* Fix play page positioning — navbar is 40px not 32px */ [data-theme="redesign"] #terminal-container { top: 40px; } [data-theme="redesign"] .side-panel { top: 40px; } [data-theme="redesign"] .panel-toggle { top: 44px; } [data-theme="redesign"] .play-page .nav-brand { font-family: var(--font-display); font-size: 1rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-bright); } [data-theme="redesign"] .play-page .nav-tabs a { font-family: var(--font-prose); font-size: 0.78rem; color: var(--text-dim); } [data-theme="redesign"] .play-page .nav-tabs a:hover { color: var(--text); } [data-theme="redesign"] .play-page .nav-tabs a.active { color: var(--text-bright); } [data-theme="redesign"] .play-page .nav-user { color: var(--text) !important; } [data-theme="redesign"] .vitals-bar { font-family: var(--font-prose); background: var(--bg-secondary); border-top: 1px solid var(--border); } [data-theme="redesign"] .gauge-label { font-family: var(--font-prose); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="redesign"] .gauge-track { background: var(--bg-hover); border-radius: 2px; } [data-theme="redesign"] .gauge-fill { border-radius: 2px; } [data-theme="redesign"] .gauge-hp .gauge-fill { background: var(--error); } [data-theme="redesign"] .gauge-mana .gauge-fill { background: var(--link); } [data-theme="redesign"] .gauge-move .gauge-fill { background: var(--accent); } [data-theme="redesign"] .gauge-text { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); } [data-theme="redesign"] .affects-bar { font-family: var(--font-prose); background: var(--bg-secondary); } [data-theme="redesign"] .combat-bar { background: var(--bg-secondary); border-top: 1px solid var(--border); } [data-theme="redesign"] .combat-name { font-family: var(--font-prose); font-weight: 500; color: var(--text-bright); } [data-theme="redesign"] .combat-condition { color: var(--text-dim); font-size: 0.72rem; } [data-theme="redesign"] .combat-track { background: var(--bg-hover); border-radius: 2px; } [data-theme="redesign"] .combat-fill { border-radius: 2px; } [data-theme="redesign"] .panel-section-title { font-family: var(--font-prose); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } [data-theme="redesign"] .panel-tab-bar button { font-family: var(--font-prose); font-size: 0.72rem; color: var(--text-dim); } [data-theme="redesign"] .panel-tab-bar button.active { color: var(--highlight); border-bottom-color: var(--highlight); } [data-theme="redesign"] .input-field { font-family: var(--font-mono); } [data-theme="redesign"] .input-bar { background: var(--bg-secondary); border-top: 1px solid var(--border); } [data-theme="redesign"] .input-prompt { color: var(--highlight); } [data-theme="redesign"] .quick-commands .qcmd { font-family: var(--font-prose); background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); } [data-theme="redesign"] .quick-commands .qcmd:hover { border-color: var(--border-hover); color: var(--text); } [data-theme="redesign"] .side-panel { background: var(--bg-secondary); border-left: 1px solid var(--border); } [data-theme="redesign"] .panel-room { font-family: var(--font-prose); font-size: 0.78rem; color: var(--text-bright); } [data-theme="redesign"] .panel-time { font-family: var(--font-prose); font-size: 0.68rem; color: var(--text-dim); } [data-theme="redesign"] .connect-status { font-family: var(--font-prose); background: rgba(8, 8, 10, 0.9); } [data-theme="redesign"] .connect-btn { font-family: var(--font-prose); background: transparent; border: 1px solid var(--highlight); color: var(--highlight); border-radius: var(--radius-sm); } [data-theme="redesign"] .connect-btn:hover { background: var(--accent-muted); } [data-theme="redesign"] .vitals-status.connected { color: var(--accent); } [data-theme="redesign"] .vitals-status.disconnected { color: var(--error); } [data-theme="redesign"] .vitals-name { font-family: var(--font-prose); font-weight: 500; color: var(--highlight); } [data-theme="redesign"] .vitals-worth { font-family: var(--font-prose); font-size: 0.72rem; color: var(--text-dim); } [data-theme="redesign"] .popout-btn { color: var(--text-dim); } [data-theme="redesign"] .popout-btn:hover { color: var(--text); } /* ================================================================ BUGS PAGE ================================================================ */ [data-theme="redesign"] .bug-list { font-family: var(--font-prose); } [data-theme="redesign"] .bug-status { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* ================================================================ PK LOGS ================================================================ */ [data-theme="redesign"] .pklog-list { font-family: var(--font-prose); } [data-theme="redesign"] .pklog-transcript { font-family: var(--font-mono); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); } /* ================================================================ CHARACTERS PAGE ================================================================ */ [data-theme="redesign"] .char-card { font-family: var(--font-prose); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color 0.2s; } [data-theme="redesign"] .char-card:hover { border-color: var(--border-hover); } [data-theme="redesign"] .char-card h3 { font-family: var(--font-display); } /* ================================================================ RESPONSIVE — Mobile-first refactor Breakpoints: 1024px (tablet landscape), 768px (tablet portrait), 480px (phone) ================================================================ */ /* ---------------------------------------------------------- TABLET LANDSCAPE — 1024px ---------------------------------------------------------- */ @media (max-width: 1024px) { /* Landing grids stack */ [data-theme="redesign"] .landing-world { grid-template-columns: 1fr; gap: 1.5rem; } [data-theme="redesign"] .landing-lower { grid-template-columns: 1fr; } [data-theme="redesign"] .landing-lower .activity-section, [data-theme="redesign"] .landing-lower .updates-section, [data-theme="redesign"] .landing-lower .cabals-section { grid-column: 1; grid-row: auto; } [data-theme="redesign"] .cabal-grid { grid-template-columns: repeat(2, 1fr); } /* --- Header-user: hide on tablet — too cramped with full nav --- */ [data-theme="redesign"] .header-user { display: none; } /* --- Nav tabs: tighter spacing to fit all links --- */ [data-theme="redesign"] .nav-tabs a { padding: 0 0.5rem; font-size: 0.72rem; gap: 0.2rem; } [data-theme="redesign"] .nav-tabs a svg, [data-theme="redesign"] .nav-tabs a i { width: 12px; height: 12px; } /* --- Nav right: compact play + status --- */ [data-theme="redesign"] .navbar { padding: 0 0.75rem; } } /* ---------------------------------------------------------- TABLET PORTRAIT — 768px Major layout shift: sidebars collapse, posts go single-col, tables reflow, touch targets enforced ---------------------------------------------------------- */ @media (max-width: 768px) { /* --- Global typography scale --- */ [data-theme="redesign"] h1 { font-size: 1.3rem; } [data-theme="redesign"] .container { padding-left: 0.75rem; padding-right: 0.75rem; } /* --- Navbar compact --- */ [data-theme="redesign"] .nav-tabs a { padding: 0 0.6rem; font-size: 0.72rem; gap: 0.2rem; } [data-theme="redesign"] .nav-tabs a svg, [data-theme="redesign"] .nav-tabs a i { width: 12px; height: 12px; } /* --- Mobile nav: full redesign treatment --- */ [data-theme="redesign"] .mobile-nav { background: var(--bg-secondary); border-left: 1px solid var(--border); padding-top: 0.75rem; } [data-theme="redesign"] .mobile-nav a { font-family: var(--font-prose); font-size: 0.88rem; font-weight: 400; color: var(--text); padding: 0.65rem 1.25rem; min-height: 44px; display: flex; align-items: center; border-left: 2px solid transparent; transition: all 0.15s; } [data-theme="redesign"] .mobile-nav a:hover, [data-theme="redesign"] .mobile-nav a.active { color: var(--highlight); background: var(--bg-hover); border-left-color: var(--highlight); } [data-theme="redesign"] .mobile-nav .nav-divider { border-color: var(--border); margin: 0.35rem 1.25rem; } [data-theme="redesign"] .mobile-nav button { font-family: var(--font-prose); font-size: 0.88rem; color: var(--text-dim); padding: 0.65rem 1.25rem; min-height: 44px; text-align: left; width: 100%; } [data-theme="redesign"] .mobile-nav button:hover { color: var(--text); background: var(--bg-hover); } /* --- Header-user: hidden on mobile (base hides it but redesign display:flex overrides) --- */ [data-theme="redesign"] .header-user { display: none; } /* --- Layouts: stack vertically and fix negative margin on mobile --- */ [data-theme="redesign"] .forum-layout, [data-theme="redesign"] .wiki-layout, [data-theme="redesign"] .admin-layout { flex-direction: column; margin: -0.75rem; } /* --- Sidebars: hidden on mobile — navigation via mobile nav --- */ [data-theme="redesign"] .forum-sidebar, [data-theme="redesign"] .wiki-sidebar, [data-theme="redesign"] .admin-sidebar { display: none; } /* --- Main content areas: fill space and reasonable padding --- */ [data-theme="redesign"] .wiki-main, [data-theme="redesign"] .admin-main { padding: 1rem; } /* --- Landing header scales down --- */ [data-theme="redesign"] body:has(.landing-status-bar) .site-header { padding: 1.5rem 1rem 1.25rem; } [data-theme="redesign"] body:has(.landing-status-bar) .header-skull { width: 56px; height: 56px; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tl { font-size: 1.15rem; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tr { font-size: 0.72rem; } /* --- Non-landing compact header --- */ [data-theme="redesign"] body:not(:has(.landing-status-bar)) .site-header { padding: 0.5rem 0.75rem; } [data-theme="redesign"] body:not(:has(.landing-status-bar)) .header-skull { width: 24px; height: 24px; } /* --- Forum header stacks --- */ [data-theme="redesign"] .forum-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } [data-theme="redesign"] .forum-header-actions { width: 100%; flex-wrap: wrap; } [data-theme="redesign"] .forum-search-form { width: 100%; } [data-theme="redesign"] .forum-search-input { flex: 1; min-width: 0; } /* --- Forum rows: hide stats and lastpost columns --- */ [data-theme="redesign"] .forum-stats, [data-theme="redesign"] .forum-lastpost { display: none; } /* --- Topic list table: hide count/meta columns --- */ [data-theme="redesign"] .topic-list thead th.count, [data-theme="redesign"] .topic-list thead th.meta, [data-theme="redesign"] .topic-list td.count, [data-theme="redesign"] .topic-list td.meta { display: none; } [data-theme="redesign"] .topic-list tbody td { padding: 0.6rem 0.65rem; } [data-theme="redesign"] .topic-title, [data-theme="redesign"] a.topic-title { font-size: 0.85rem; } /* --- Wiki page titles --- */ [data-theme="redesign"] .wiki-page-header h1 { font-size: 1.3rem; } [data-theme="redesign"] .topic-header h1 { font-size: 1.2rem; } /* --- Topic header stacks --- */ [data-theme="redesign"] .topic-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } [data-theme="redesign"] .topic-header-actions { width: 100%; flex-wrap: wrap; } /* --- Posts go single-column --- */ [data-theme="redesign"] .post { grid-template-columns: 1fr; } [data-theme="redesign"] .post-sidebar { flex-direction: row; align-items: center; gap: 0.75rem; border-right: none; border-bottom: 1px solid var(--border); padding: 0.65rem 0.85rem; } [data-theme="redesign"] .post-avatar { width: 32px; height: 32px; } [data-theme="redesign"] .post-date { margin-top: 0; margin-left: auto; } [data-theme="redesign"] .post-author-title { font-size: 0.68rem; } [data-theme="redesign"] .post-body { padding: 0.75rem 0.85rem; font-size: 0.88rem; } [data-theme="redesign"] .post-actions { grid-column: 1; padding: 0.5rem 0.85rem; } /* --- Breadcrumbs: allow wrapping --- */ [data-theme="redesign"] .breadcrumb { font-size: 0.72rem; overflow-wrap: break-word; word-break: break-word; } /* --- Notifications: tighter padding --- */ [data-theme="redesign"] .notif-item { padding: 0.6rem 0.75rem; gap: 0.5rem; } [data-theme="redesign"] .notif-type { font-size: 0.52rem; padding: 0.15rem 0.35rem; min-width: auto; } [data-theme="redesign"] .notif-link { font-size: 0.8rem; } [data-theme="redesign"] .notif-time { font-size: 0.65rem; } /* --- Changes timeline: tighter --- */ [data-theme="redesign"] .changes-year-section { padding-left: 1.25rem; margin-left: 0.25rem; } [data-theme="redesign"] .changes-year-heading::before { left: calc(-1.25rem - 0.25rem - 4px); } [data-theme="redesign"] .changes-date::before { left: calc(-1.25rem - 0.25rem - 2px); } /* --- Item search forms stack --- */ [data-theme="redesign"] .item-search-form .form-row { flex-direction: column; } [data-theme="redesign"] .item-search-form .form-group { width: 100%; } /* --- Admin grid single-column --- */ [data-theme="redesign"] .admin-grid { grid-template-columns: 1fr; } /* --- Wiki content: prevent overflow --- */ [data-theme="redesign"] .wiki-content { overflow-x: auto; } [data-theme="redesign"] .wiki-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } [data-theme="redesign"] .wiki-content nav.toc { float: none; display: block; margin: 0.75rem 0; width: 100%; } /* --- Pagination: compact --- */ [data-theme="redesign"] .pagination { flex-wrap: wrap; gap: 0.25rem; } [data-theme="redesign"] .pagination a, [data-theme="redesign"] .pagination span { min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; } [data-theme="redesign"] .pagination-info { width: 100%; text-align: center; margin-top: 0.25rem; } /* --- Touch targets --- */ [data-theme="redesign"] .btn, [data-theme="redesign"] button { min-height: 40px; } /* --- Subforum chips: wrap nicely --- */ [data-theme="redesign"] .subforum-links { flex-wrap: wrap; } /* --- Item detail sections --- */ [data-theme="redesign"] .item-section { border-radius: var(--radius-sm); } /* --- Mod bar --- */ [data-theme="redesign"] .mod-bar { flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem 0.75rem; } /* --- Cabal grid single column --- */ [data-theme="redesign"] .cabal-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- PHONE — 480px Tightest layout, maximum content density ---------------------------------------------------------- */ @media (max-width: 480px) { /* --- Container: edge-to-edge feel --- */ [data-theme="redesign"] .container { padding-left: 0.5rem; padding-right: 0.5rem; } /* --- Landing header: minimal --- */ [data-theme="redesign"] body:has(.landing-status-bar) .site-header { padding: 1rem 0.75rem 0.75rem; } [data-theme="redesign"] body:has(.landing-status-bar) .header-skull { width: 48px; height: 48px; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tl { font-size: 1rem; } [data-theme="redesign"] body:has(.landing-status-bar) .header-tr { font-size: 0.6rem; } [data-theme="redesign"] .landing-world { padding: 1.25rem 0.75rem 1.75rem; } /* --- Nav icons hidden on phone --- */ [data-theme="redesign"] .nav-tabs a svg, [data-theme="redesign"] .nav-tabs a i { display: none; } [data-theme="redesign"] .nav-tabs a { padding: 0 0.5rem; font-size: 0.68rem; } /* --- Non-landing header: ultra-compact --- */ [data-theme="redesign"] body:not(:has(.landing-status-bar)) .site-header { padding: 0.35rem 0.5rem; } /* --- Forum header h1 --- */ [data-theme="redesign"] .forum-header h1 { font-size: 1.15rem; } /* --- Posts: tighter spacing --- */ [data-theme="redesign"] .post-sidebar { padding: 0.5rem 0.65rem; gap: 0.5rem; } [data-theme="redesign"] .post-body { padding: 0.65rem; font-size: 0.85rem; } [data-theme="redesign"] .post-actions { padding: 0.4rem 0.65rem; } /* --- Topic list: minimal padding --- */ [data-theme="redesign"] .topic-list tbody td { padding: 0.5rem; } [data-theme="redesign"] .topic-list thead th { padding: 0.4rem 0.5rem; font-size: 0.6rem; } /* --- Notifications: stacked time --- */ [data-theme="redesign"] .notif-item { flex-wrap: wrap; padding: 0.5rem 0.65rem; } [data-theme="redesign"] .notif-link { white-space: normal; order: 3; width: 100%; margin-top: 0.15rem; } [data-theme="redesign"] .notif-time { order: 4; width: 100%; margin-top: 0.15rem; } /* --- Changes timeline heatmap: smaller blocks on mobile --- */ [data-theme="redesign"] .changes-timeline { gap: 0.5rem; } [data-theme="redesign"] .tl-block { width: 5px; height: 5px; } [data-theme="redesign"] .tl-year-label { font-size: 0.55rem; } /* --- Changes timeline: compact --- */ [data-theme="redesign"] .changes-year-section { padding-left: 1rem; margin-left: 0.15rem; } [data-theme="redesign"] .changes-year-heading { font-size: 0.95rem; } [data-theme="redesign"] .changes-year-heading::before { left: calc(-1rem - 0.15rem - 4px); } [data-theme="redesign"] .changes-date { font-size: 0.65rem; } [data-theme="redesign"] .changes-date::before { left: calc(-1rem - 0.15rem - 2px); } [data-theme="redesign"] .changes-list { font-size: 0.78rem; } /* --- Badges: smaller on phone --- */ [data-theme="redesign"] .badge { font-size: 0.55rem; padding: 0.1rem 0.3rem; } /* --- Breadcrumb: even smaller --- */ [data-theme="redesign"] .breadcrumb { font-size: 0.68rem; } [data-theme="redesign"] .breadcrumb .bc-sep { width: 10px; height: 10px; } /* --- Pagination on phone --- */ [data-theme="redesign"] .pagination .ellipsis { display: none; } /* --- Category section: less margin --- */ [data-theme="redesign"] .category-section { margin-bottom: 1rem; } /* --- Item meta tags stack --- */ [data-theme="redesign"] .item-section.item-meta { flex-direction: column; gap: 0.25rem; } /* --- Subforum chips: full-width on phone --- */ [data-theme="redesign"] .subforum-link { font-size: 0.68rem; padding: 0.12rem 0.4rem 0.12rem 0.25rem; } /* --- Form actions: full-width buttons --- */ [data-theme="redesign"] .form-actions .btn { flex: 1; justify-content: center; } } /* ================================================================ PRAYER / BUG / TRACKER BADGES ================================================================ */ /* Prayer status badge */ [data-theme="redesign"] .badge-prayer { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25); } /* Bug tracker badge */ [data-theme="redesign"] .badge-bug { color: var(--highlight); background: rgba(var(--highlight-rgb), 0.1); border: 1px solid rgba(var(--highlight-rgb), 0.25); } /* Tracker badge */ [data-theme="redesign"] .badge-tracker { color: #7a9eb8; background: rgba(122, 158, 184, 0.1); border: 1px solid rgba(122, 158, 184, 0.25); } /* Bug priority badges */ [data-theme="redesign"] .priority-low { color: #708090; border-color: #708090; background: rgba(112, 128, 144, 0.1); } [data-theme="redesign"] .priority-normal { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } [data-theme="redesign"] .priority-high { color: var(--highlight); border-color: var(--highlight); background: rgba(var(--highlight-rgb), 0.1); } [data-theme="redesign"] .priority-critical { color: var(--error); border-color: var(--error); background: rgba(192, 96, 80, 0.12); } /* Bug/tracker status badges (inline style colors from template) */ [data-theme="redesign"] .bug-info, [data-theme="redesign"] .prayer-info { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 1rem; font-family: var(--font-prose); } [data-theme="redesign"] .bug-badges { gap: 0.5rem; } [data-theme="redesign"] .bug-update-form select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); font-family: var(--font-prose); font-size: 0.78rem; border-radius: var(--radius-sm); padding: 0.25rem 0.4rem; } [data-theme="redesign"] .bug-update-form select:focus { border-color: var(--highlight); outline: none; } /* Badge category */ [data-theme="redesign"] .badge-category { color: var(--text-dim); background: rgba(96, 96, 96, 0.12); border: 1px solid rgba(96, 96, 96, 0.2); } /* Bug filter form */ [data-theme="redesign"] .filter-form select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); font-family: var(--font-prose); font-size: 0.78rem; border-radius: var(--radius-sm); padding: 0.25rem 0.4rem; } [data-theme="redesign"] .filter-form select:focus { border-color: var(--highlight); outline: none; }