/* Theme Name: ReadLume Theme URI: https://readlume.app Author: ReadLume Author URI: https://readlume.app Description: Bilingual reading platform — read books in two languages in perfect sync. A calm, literary theme with warm surfaces, deep-navy text, a teal accent, and a warm-gold sentence-sync highlight. Includes a landing page plus Library, Reader, and Sign-up page templates. Version: 1.0 Requires at least: 5.8 Tested up to: 6.5 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: readlume */ /* =========================================================== ReadLume — shared design system Warm white · deep navy · soft beige · teal accent Literary serif (Newsreader) + quiet sans (Hanken Grotesk) =========================================================== */ /* Fonts loaded via in each page (Spectral + Hanken Grotesk) */ :root { /* surfaces */ --bg: #faf6ee; /* warm white */ --bg-tint: #f4ecdd; /* deeper warm wash for section bands */ --panel: #fffdf8; /* near-white panel */ --beige: #f1e7d6; /* soft beige card */ --beige-2: #e9dcc6; /* beige hover / nested */ --line: #e7dcc8; /* hairline */ --line-soft: #efe7d8; /* ink */ --ink: #1d2a44; /* deep navy text */ --ink-2: #4f5d77; /* secondary */ --ink-3: #8a93a6; /* muted / captions */ --ink-on-accent: #ffffff; /* teal accent */ --teal: #0e8c80; --teal-700: #0a6f66; --teal-600: #0e8c80; --teal-50: #e4f2f0; --teal-100: #cbe7e3; --teal-ring: rgba(14,140,128,0.30); /* highlight (sync) */ --hl: #fbe7b8; /* active sentence warm gold */ --hl-soft: #fdf1d4; /* hover match */ --hl-line: #e9c878; /* radii + shadow */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --sh-1: 0 1px 2px rgba(29,42,68,0.04), 0 1px 3px rgba(29,42,68,0.06); --sh-2: 0 4px 14px rgba(29,42,68,0.07), 0 2px 6px rgba(29,42,68,0.05); --sh-3: 0 18px 50px rgba(29,42,68,0.13), 0 6px 18px rgba(29,42,68,0.08); --serif: 'Source Serif 4', serif; --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --maxw: 1240px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--hl); color: var(--ink); } /* ---------- layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-700); } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } /* ---------- buttons ---------- */ .btn { font-family: var(--sans); font-weight: 600; font-size: 15px; border: 1px solid transparent; border-radius: 999px; padding: 12px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--teal); color: var(--ink-on-accent); box-shadow: 0 6px 16px rgba(14,140,128,0.26); } .btn-primary:hover { background: var(--teal-700); box-shadow: 0 10px 22px rgba(14,140,128,0.30); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--teal); color: var(--teal-700); background: var(--teal-50); } .btn-soft { background: var(--beige); color: var(--ink); border-color: var(--line); } .btn-soft:hover { background: var(--beige-2); } .btn-sm { padding: 8px 15px; font-size: 13px; } .btn-block { width: 100%; justify-content: center; } /* ---------- chips / badges ---------- */ .chip { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: all .18s ease; white-space: nowrap; } .chip:hover { border-color: var(--teal); color: var(--teal-700); } .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-100); } .badge.lvl-beg { background: #e7f1ea; color: #2f6b4a; border-color: #cfe6d8; } .badge.lvl-int { background: #fdf0d9; color: #9a6c1c; border-color: #f3dfb7; } .badge.lvl-adv { background: #f3e7f0; color: #834878; border-color: #e7d2e2; } .badge.ghost { background: var(--panel); color: var(--ink-2); border-color: var(--line); } /* ---------- progress ---------- */ .progress { height: 6px; border-radius: 999px; background: var(--beige-2); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; } /* ---------- book cover (typographic placeholder) ---------- */ .cover { position: relative; aspect-ratio: 3 / 4.4; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 15px; color: #fff; box-shadow: var(--sh-2); isolation: isolate; } .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%), linear-gradient(0deg, rgba(0,0,0,0.22), rgba(0,0,0,0) 55%); z-index: -1; } .cover .cv-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,0.18); } .cover .cv-top { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.82; font-weight: 600; } .cover .cv-title { font-family: var(--serif); font-size: 21px; line-height: 1.08; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.22); } .cover .cv-author { font-family: var(--sans); font-size: 11.5px; opacity: 0.9; margin-top: 4px; } .cv-prince { background: linear-gradient(160deg,#2a5a8c,#16365c); } .cv-habits { background: linear-gradient(160deg,#c98a3c,#9a5a1f); } .cv-sherlock { background: linear-gradient(160deg,#3a4250,#1d222c); } .cv-pride { background: linear-gradient(160deg,#7c5cab,#4f3b78); } .cv-gatsby { background: linear-gradient(160deg,#1f7a74,#0d4f4a); } .cv-mockingbird { background: linear-gradient(160deg,#6e8b48,#465c2c); } .cv-alchemist { background: linear-gradient(160deg,#b8693f,#7d3f22); } .cv-meditations { background: linear-gradient(160deg,#4a5670,#2b3247); } .cv-oldman { background: linear-gradient(160deg,#2f7c9a,#13506a); } .cv-animalfarm { background: linear-gradient(160deg,#a23e3e,#6e2424); } .cv-janeeyre { background: linear-gradient(160deg,#5c6b73,#33454d); } .cv-prophet { background: linear-gradient(160deg,#c79a3e,#946a1c); } .cv-charlotte { background: linear-gradient(160deg,#5f9a86,#356252); } /* ---------- generic card ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } /* ---------- scrollbars ---------- */ .scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--beige-2) transparent; } .scroll-y::-webkit-scrollbar { width: 9px; } .scroll-y::-webkit-scrollbar-thumb { background: var(--beige-2); border-radius: 999px; border: 2px solid var(--bg); } .scroll-y::-webkit-scrollbar-track { background: transparent; } /* ---------- icons ---------- */ .ico { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ico-sm { width: 16px; height: 16px; } /* ---------- focus ---------- */ :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* ---------- brand lockup ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: -0.01em; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 10px rgba(14,140,128,0.3); } .brand-mark svg { width: 18px; height: 18px; } .brand em { font-style: normal; color: var(--teal-700); } /* ---------- utility ---------- */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .grow { flex: 1; } .center { align-items: center; } .between { justify-content: space-between; } .wrapflex { flex-wrap: wrap; }