/* Theme Name: NovelRead (Velvet Hour) Theme URI: https://example.com Author: Your Studio Author URI: https://example.com Description: A mobile-first WordPress theme for serialized romance novel reading sites. Built for fast chapter browsing, an immersive distraction-free reader, AJAX genre filtering, a local "Library" of bookmarks/reading progress, and ad-friendly slots for networks like Monetag. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: novelread Tags: blog, mobile, dark-mode, custom-post-types, translation-ready */ /* ========================================================================== 1. DESIGN TOKENS — "Velvet Hour" Dark "ink" reading-lamp mode is default. "Paper" (light) mode is the alternate, toggled via [data-theme="light"] on . ========================================================================== */ :root { /* --- Core palette --- */ --ink: #1B1320; /* primary background (dark) */ --ink-soft: #251A2C; /* card / surface (dark) */ --ink-elevated: #2F2236; /* raised surfaces, sheets, nav (dark) */ --ink-border: #3A2C42; --paper: #FAF1E8; /* primary background (light) */ --paper-soft: #FFFFFF; /* card / surface (light) */ --paper-elevated: #FFFFFF; --paper-border: #EAD9CB; --ember: #E8536A; /* primary accent — rose/ember */ --ember-dark: #C23E54; --ember-soft: rgba(232, 83, 106, 0.14); --gold: #E3A857; /* secondary accent — ratings, badges, premium */ --gold-soft: rgba(227, 168, 87, 0.16); --text-on-dark: #F5ECE7; --muted-on-dark: #B8A6B4; --text-on-light: #2B1A23; --muted-on-light: #8A7680; /* --- Semantic tokens (default = dark / ink mode) --- */ --bg: var(--ink); --surface: var(--ink-soft); --surface-raised: var(--ink-elevated); --border: var(--ink-border); --text: var(--text-on-dark); --muted: var(--muted-on-dark); --accent: var(--ember); --accent-strong: var(--ember-dark); --accent-soft: var(--ember-soft); /* --- Type --- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Layout --- */ --container: 1180px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --bottom-nav-h: 60px; --shadow-sm: 0 2px 10px rgba(0,0,0,0.18); --shadow-md: 0 8px 28px rgba(0,0,0,0.28); } [data-theme="light"] { --bg: var(--paper); --surface: var(--paper-soft); --surface-raised: var(--paper-elevated); --border: var(--paper-border); --text: var(--text-on-light); --muted: var(--muted-on-light); --accent: var(--ember); --accent-strong: var(--ember-dark); --accent-soft: var(--ember-soft); --shadow-sm: 0 2px 10px rgba(43,26,35,0.06); --shadow-md: 0 8px 28px rgba(43,26,35,0.10); } /* Reader-specific paper theme (sepia) for the chapter reader only */ [data-reader-theme="sepia"] .reader-content { --bg: #F1E6D3; --text: #3A2C20; background: var(--bg); color: var(--text); } [data-reader-theme="dark"] .reader-content { --bg: #14101A; --text: #EFE6E2; background: var(--bg); color: var(--text); } [data-reader-theme="ink"] .reader-content { --bg: var(--ink); --text: var(--text-on-dark); background: var(--bg); color: var(--text); } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; padding-bottom: var(--bottom-nav-h); } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { padding: 0; margin: 0; list-style: none; } button, input, select, textarea { font-family: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; } h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); } h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } .container { max-width: var(--container); margin: 0 auto; padding: 0 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }