/* ═══════════════════════════════════════════════════════════════════════════ DARK THEME — Bookplate brand Applied when data-theme="dark" is set on . Palette: Burgundy #561A27 · Coral #D75340 · Green #A4A056 · Cream #F2EEE8 Loaded separately from tailwind.css — pure custom CSS, no Tailwind utilities. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted fonts (replaces Google Fonts CDN) ───────────────────────── */ @font-face { font-family: 'Averia Serif Libre'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/AveriaSerifLibre-Regular-1da2f18b.ttf") format('truetype'); } @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/DMSerifDisplay-Regular-a2123433.ttf") format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/Lato-Regular-3d716aad.ttf") format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/Lato-Italic-a5c48518.ttf") format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/Lato-Bold-8af8670c.ttf") format('truetype'); } /* ── CSS variable overrides ──────────────────────────────────────────────── */ [data-theme="dark"] { --color-primary: #d75340; --color-primary-hover: #b8432f; --color-success: #a4a056; --color-danger: #d75340; --color-background: #2d1219; --color-card: #3d1a24; --color-border: rgba(242, 238, 232, 0.12); --color-banner-bg: #240e15; --color-banner-border: rgba(242, 238, 232, 0.08); --color-card-warn: #d75340; --color-card-muted: rgba(242, 238, 232, 0.4); --color-text: #f2eee8; --color-text-muted: rgba(242, 238, 232, 0.55); --color-input-bg: var(--color-background); --color-flash-bg: #3d1a24; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); --color-auth-bg-from: #561a27; --color-auth-bg-to: #380d18; } /* ── Typography — DM Serif Display for headings ──────────────────────────── */ /* :where() zeroes the selector's specificity so any class-level font-family override (e.g. .journal-fate-heading, .journal-greeting-line) still wins. */ :where([data-theme="dark"]) h1, :where([data-theme="dark"]) h2, :where([data-theme="dark"]) h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; } /* ── Body atmosphere ─────────────────────────────────────────────────────── */ /* Lantern glow — deep burgundy pulse from above + bottom vignette */ [data-theme="dark"] body { min-height: 100vh; background-image: radial-gradient(ellipse 140% 60% at 50% 0%, #380d18 0%, transparent 65%), radial-gradient(ellipse 80% 40% at 50% 100%, rgba(45, 10, 20, 0.6) 0%, transparent 100%); } /* Grain texture — aged paper/book binding atmosphere */ [data-theme="dark"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; mix-blend-mode: soft-light; } /* ── Dark overrides for shared components ────────────────────────────────── */ /* Card: visible outer border + scoped --color-border so interior dividers show */ [data-theme="dark"] .card { border-color: #4a2030; --color-border: rgba(255, 255, 255, 0.07); } /* Flash messages */ [data-theme="dark"] .flash-notice .text-success { color: #a4a056; } [data-theme="dark"] .flash-alert .text-danger { color: #d75340; } [data-theme="dark"] .flash-dismiss { color: rgba(242, 238, 232, 0.55); } [data-theme="dark"] .flash-dismiss:hover { color: #f2eee8; } /* Cover placeholder: dark instead of cream */ [data-theme="dark"] .cover-placeholder { background: linear-gradient(145deg, #3d1a24, #2a1020) !important; } [data-theme="dark"] .cover-placeholder span { color: rgba(242, 238, 232, 0.55) !important; opacity: 0.5 !important; } /* Profile dropdown */ [data-theme="dark"] .profile-dropdown-menu { background: #2d1219; border-color: #4a2030; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .profile-dropdown-menu a, [data-theme="dark"] .profile-dropdown-menu button { color: #f2eee8; } [data-theme="dark"] .profile-dropdown-menu a:hover, [data-theme="dark"] .profile-dropdown-menu button:hover { background: #3d1a24; color: #f2eee8; } [data-theme="dark"] .profile-dropdown-divider { background: #4a2030; } /* Desktop user trigger: plain text, no border */ [data-theme="dark"] .bp-header-row1 .user-profile-link { font-size: 0.9375rem; color: #f2eee8 !important; opacity: 0.75; border: none; background: none; padding: 0.25rem 0; transition: opacity 0.15s; } [data-theme="dark"] .bp-header-row1 .user-profile-link:hover { opacity: 1; background: none; } /* Sidebar cards: override hardcoded light background */ [data-theme="dark"] .journal-sidebar-card { background: var(--color-card); } /* Feed section headings */ [data-theme="dark"] .journal-feed-heading { color: rgba(242,238,232,0.7); } /* Feed heading count pill */ [data-theme="dark"] .journal-feed-heading-count { background: rgba(242, 238, 232, 0.1); color: rgba(242, 238, 232, 0.35); } /* TBR nudge heading link */ [data-theme="dark"] .tbr-nudge-heading-link { color: #fff; } /* Show book genre pills: solid fill for legibility on dark card */ [data-theme="dark"] .bp-book-show .badge-genre { background: #561a27; color: #f2eee8; border-color: rgba(242, 238, 232, 0.15); } /* Star ratings: coral instead of Tailwind amber */ [data-theme="dark"] .text-amber-400, [data-theme="dark"] .text-amber-500, [data-theme="dark"] .text-slate-400 { color: #d75340 !important; } [data-theme="dark"] .collection-stats .text-amber-400 { color: #d75340; } [data-theme="dark"] .collection-stats .text-secondary { color: rgba(242, 238, 232, 0.55); } /* Library card: stays cream in dark mode (physical card metaphor) */ [data-theme="dark"] .library-card { background: #fdf8f0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } [data-theme="dark"] .library-card-body { background: #fdf8f0; } /* Cancel the global dark input override inside the library card body. High-specificity needed to beat the [data-theme="dark"] input rule. */ [data-theme="dark"] .library-card-body input:not([type=submit]):not([type=checkbox]):not([type=radio]), [data-theme="dark"] .library-card-body select { background-color: #e8ddd0 !important; color: #2a1010 !important; border-color: #c8b89a !important; border-radius: 3px !important; } [data-theme="dark"] .library-card-logo { height: 48px; } [data-theme="dark"] .library-card-input { padding: 0.3rem 0.5rem !important; } [data-theme="dark"] .library-card-save-btn { background: #d75340; } [data-theme="dark"] .library-card-save-btn:hover { background: #b8432f; } /* ── Dark overrides for bp-specific components ───────────────────────────── */ /* Auth card is always a light panel (fullcolor logo, light inputs) */ [data-theme="dark"] .auth-card { background: #F2EEE8; border-color: #e4ddd4; color: #1e1714; } [data-theme="dark"] .auth-card h2, [data-theme="dark"] .auth-card label, [data-theme="dark"] .auth-card .auth-links a { color: #7c6e61; } [data-theme="dark"] .auth-card input[type="email"], [data-theme="dark"] .auth-card input[type="password"], [data-theme="dark"] .auth-card input[type="text"] { background: #fff; border-color: #e4ddd4; color: #1e1714; } [data-theme="dark"] .admin-table th { background: rgba(242, 238, 232, 0.04); color: rgba(242, 238, 232, 0.75); } [data-theme="dark"] .loan-row-active { background: rgba(215, 83, 64, 0.1); } [data-theme="dark"] .bp-header { background: #1a0810; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .bp-header::after { background: linear-gradient(to bottom, rgba(26, 8, 16, 0.65), transparent); } [data-theme="dark"] .bp-filter-wrap { background: rgba(242, 238, 232, 0.04); } [data-theme="dark"] .bp-filter-wrap:focus-within { border-color: rgba(242, 238, 232, 0.2); } [data-theme="dark"] .bp-browse-pill { color: rgba(242, 238, 232, 0.6); background: #3d1a24; border-color: #561a27; } [data-theme="dark"] .bp-browse-pill:hover { color: #f2eee8; border-color: rgba(242, 238, 232, 0.3); } [data-theme="dark"] .bp-tab-bar { background: #1a0810; border-top-color: #2d1219; } [data-theme="dark"] .bp-badge-source { background: rgba(242, 238, 232, 0.06); color: rgba(242, 238, 232, 0.35); border-color: rgba(242, 238, 232, 0.1); } [data-theme="dark"] .bp-badge-reading { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); } [data-theme="dark"] .bp-badge-unread { background: rgba(242, 238, 232, 0.07); color: rgba(242, 238, 232, 0.5); border-color: rgba(242, 238, 232, 0.12); } [data-theme="dark"] .bp-badge-wnr { background: rgba(242, 238, 232, 0.03); color: rgba(242, 238, 232, 0.3); border-color: rgba(242, 238, 232, 0.1); border-style: dashed; } [data-theme="dark"] .bp-wnr-switch { color: rgba(242, 238, 232, 0.2); } [data-theme="dark"] .bp-wnr-switch:hover { color: rgba(242, 238, 232, 0.4); } [data-theme="dark"] .bp-wnr-switch-track { background: rgba(242, 238, 232, 0.12); } [data-theme="dark"] .bp-wnr-switch--active { color: rgba(242, 238, 232, 0.55); } [data-theme="dark"] .bp-wnr-switch--active .bp-wnr-switch-track { background: #8a2a3d; } [data-theme="dark"] .bp-import-badge-pending { background: rgba(242, 238, 232, 0.07); color: rgba(242, 238, 232, 0.5); border-color: rgba(242, 238, 232, 0.12); } [data-theme="dark"] .bp-import-badge-processing { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); } [data-theme="dark"] .bp-import-badge-complete { background: rgba(164, 160, 86, 0.15); color: #a4a056; border-color: rgba(164, 160, 86, 0.3); } [data-theme="dark"] .bp-import-badge-failed { background: rgba(215, 83, 64, 0.18); color: #d75340; border-color: rgba(215, 83, 64, 0.3); } [data-theme="dark"] .bp-stats-drawer { border-color: rgba(242, 238, 232, 0.12); } [data-theme="dark"] .bp-stats-drawer__content { background: #3d1a24; }