/* Lirio — dual theme. Light "Étude": warm paper + navy ink + deep gold — calm, made for study. Dark "Nuit": deep navy + gold, matching the illustrations. Semantic tokens (--bg, --surface, --ink, --line, --gold) drive everything; the legacy --navy-N and --bg-soft names are remapped per theme so existing rules adapt without rewrites. Toggled via data-bs-theme on (static/js/theme.js, persisted in localStorage lirio:theme). */ :root, [data-bs-theme="light"] { --bg: #f6f1e6; /* warm paper */ --surface: #fdfaf2; /* cards, wells */ --surface-2: #efe8d6; /* soft chips, covers */ --ink: #2a3450; /* body text */ --ink-soft: #6b7488; /* secondary text */ --line: #e2d9c3; /* borders */ --gold: #c08a12; /* accent — deep gold, readable on paper */ --gold-bright: #f4c033; /* accent on dark surfaces (hero, footer) */ --gold-soft: #f1e3bb; --navy-900: #22304a; --navy-700: #3a5680; --navy-500: #6b7488; --navy-200: var(--line); --bg-soft: var(--surface-2); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--line); --bs-tertiary-bg: var(--surface-2); } [data-bs-theme="dark"] { --bg: #0e1420; /* deep navy night */ --surface: #17202f; --surface-2: #1e2839; --ink: #dbe3f2; --ink-soft: #93a0b8; --line: #2a3650; --gold: #f4c033; --gold-bright: #f4c033; --gold-soft: #4a3f1d; --navy-900: #e8edf8; /* headings invert to light */ --navy-700: #b9c6de; --navy-500: #93a0b8; --navy-200: var(--line); --bg-soft: var(--surface-2); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-border-color: var(--line); --bs-tertiary-bg: var(--surface-2); } body { overflow-x: hidden; } /* Theme toggle (navbar) */ .theme-toggle { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; width: 2.1rem; height: 2.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { border-color: var(--gold); } /* ---- Reading typography: calm, book-like measure ---- */ .reading { font-family: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 1.07rem; line-height: 1.75; max-width: 44rem; } .reading p { margin-bottom: 1.05rem; } .reading h2, .reading h3 { font-family: Georgia, serif; color: var(--navy-900); margin-top: 2.2rem; } .reading blockquote { border-left: 3px solid var(--gold); background: var(--surface); padding: 0.8rem 1.1rem; border-radius: 0 0.5rem 0.5rem 0; color: var(--ink-soft); } .serif { font-family: Georgia, "Times New Roman", serif; } .navbar-brand { font-family: Georgia, serif; } /* ---- Full-bleed helper (breaks out of the .container) ---- */ .fullbleed { width: 100vw; position: relative; left: 50%; margin-left: -50vw; } /* ---- Hero ---- */ .hero { background: linear-gradient(135deg, #1b2842 0%, #33507f 100%); color: #eaf0fb; padding: 4rem 0 4.5rem; margin-bottom: 2.5rem; } /* keep the navbar above full-bleed sections */ .navbar { position: relative; z-index: 10; background: var(--bg); } .hero h1 { font-family: Georgia, serif; font-weight: 700; font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing: -0.5px; } .hero .lead { color: #c9d7ee; max-width: 42rem; } .hero .accent { color: var(--gold-bright); } .hero .stat { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.85rem; } .hero .stat b { color: #fff; } .hero .continue { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--gold-bright); color: #1b2842; border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hero .continue:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); color: #1b2842; } /* ---- How-it-works strip ---- */ .hiw .item { padding: 0.5rem 0; } .hiw .emoji { font-size: 1.7rem; line-height: 1; } .hiw .t { font-weight: 600; color: var(--navy-900); } .hiw .d { color: var(--navy-500); font-size: 0.9rem; } /* ---- Section headers ---- */ .section-title { font-family: Georgia, serif; font-weight: 700; color: var(--navy-900); display: flex; align-items: center; gap: 0.55rem; } .section-title::after { content: ""; flex: 1; height: 2px; margin-left: 0.75rem; background: linear-gradient(90deg, var(--gold), transparent); border-radius: 2px; } .section-title .count { color: var(--navy-500); font-size: 1rem; font-weight: 400; } /* ---- Book cards ---- */ .book-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; } .book-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 40, 66, 0.16); } .book-cover { aspect-ratio: 3 / 4; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; } .book-cover img { width: 100%; height: 100%; object-fit: cover; } .book-cover.placeholder { font-family: Georgia, serif; font-size: 2.6rem; color: var(--navy-500); } .book-card .body { padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; flex: 1; } .book-card .title { font-family: Georgia, serif; font-weight: 700; color: var(--navy-900); font-size: 1.06rem; line-height: 1.25; } .book-card .author { color: var(--navy-500); font-size: 0.84rem; margin-top: 0.15rem; } .book-card .meta { margin-top: auto; display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; } .chip { background: var(--bg-soft); color: var(--navy-700); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 600; } .book-card .stretched-link::after { position: absolute; inset: 0; content: ""; } /* ---- Footer ---- */ .site-footer { background: var(--navy-900); color: #aeb9d0; padding: 2rem 0; margin-top: 3.5rem; font-size: 0.9rem; } .site-footer a { color: #cdd8ee; text-decoration: none; } /* ---- Audio read-along (static/js/narration.js) ---- */ .reading:not(.no-tap-seek) .narratable { cursor: pointer; } .narration-tap-toggle { margin: 0.35rem 0 0 0.15rem; user-select: none; } .reading .narrating { background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 0.3rem; box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--gold) 14%, transparent); transition: background 0.3s, box-shadow 0.3s; } .reading .nw-active { background: var(--gold-bright); color: #1b2842; border-radius: 0.2rem; box-shadow: 0 0 0 2px var(--gold-bright); } [data-bs-theme="dark"] .reading .narrating { background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--gold) 10%, transparent); } /* ---- Dark theme niceties ---- */ [data-bs-theme="dark"] body { color: #d7deea; } [data-bs-theme="dark"] .book-card { background: #1a1f2b; border-color: #2b3550; } [data-bs-theme="dark"] .book-cover { background: #141824; border-color: #2b3550; } [data-bs-theme="dark"] .section-title { color: #e7ecf6; } [data-bs-theme="dark"] .book-card .title { color: #eaf0fb; }