/* ───────────────────────────────────────────────────────────── LEATHER-BOUND READER SKIN An additive skin, not a replacement: everything here is gated behind [data-reader-skin="leather"] on . With that attribute absent (or "standard"), the reader looks and behaves exactly as it always has -- this file changes nothing in that case. This reskins the WHOLE app, not just the book: style.css's nav, buttons, and collapsibles already key off --primary/--secondary/ --accent/--bg-dark/--glass/--border/--text-main, so redefining those custom properties here re-themes most of the chrome automatically. A handful of surfaces (the nav bar, hamburger menu, slide-out settings panel, and a few semi-transparent-black "recessed panel" washes meant to read as recessed against a DARK background) are hardcoded in style.css rather than variable-driven, since that file was written before the leather skin existed -- those get explicit overrides further down so they don't show up as black smudges against vellum beige. The --page/--gilt/etc. set below is only for the paginated leaf itself. Palette reference: an illuminated 14th-century manuscript -- warm beige vellum, soft slate-blue and sea-foam ink washes, gold-leaf linework for ornament, not a dark tooled-leather cover. Layout: the real #storyContainer (built and driven entirely by the existing reader.js parsing/TTS/segment engine, untouched) is hidden; its

/

elements are the SAME DOM nodes, physically moved (not cloned) into single-page "leaves" built by js/leather-skin.js, so every existing click-to-seek handler and TTS highlight target still works unmodified. Switching back to the standard skin moves every node back to its exact original position. ───────────────────────────────────────────────────────────── */ [data-reader-skin="leather"] { /* Re-theme the whole app chrome (nav, buttons, panels, collapsibles -- see css/style.css, which already builds everything from these). */ --primary: #6f93ad; /* soft slate blue */ --secondary: #6fae9a; /* sea foam */ --accent: #b8862f; /* gold leaf */ --bg-dark: #eee5d2; /* warm vellum beige */ --glass: rgba(238,229,210,0.9); --border: rgba(184,134,47,0.28); --font-head: 'Cinzel', serif; --font-body: 'Cormorant Garamond', serif; --font-read: 'Cormorant Garamond', serif; --text-main: #3a3324; /* The paginated leaf's own palette -- a shade lighter/warmer than the app chrome so the open book still reads as a distinct object. */ --page: #f6efdd; --page-shadow: #e2d6b8; --page-ink: #352f22; --page-ink-dim: #8a8064; --gilt: #b8862f; --gilt-bright: #d9a84c; --spine: #d8caa2; --wash-blue: #7fa8c9; --wash-seafoam: #8fc9b0; /* A warm, light "recessed surface" wash to replace the semi- transparent BLACKs style.css uses for inputs/cards/buttons -- those were designed to read as recessed against a dark background and turn into muddy smudges against vellum beige otherwise. */ --recess-1: rgba(120,96,50,0.08); --recess-2: rgba(120,96,50,0.14); --recess-3: rgba(120,96,50,0.20); } /* Surfaces style.css hardcodes rather than building from the variables above (it predates this skin) -- explicit overrides so they read as part of the same page instead of black cutouts in it. */ [data-reader-skin="leather"] .nav { background: rgba(238,229,210,0.94); } [data-reader-skin="leather"] .hamburger-menu, [data-reader-skin="leather"] .panel, [data-reader-skin="leather"] .panel-header { background: rgba(246,239,221,0.98); } [data-reader-skin="leather"] .library-item, [data-reader-skin="leather"] .upload-box, [data-reader-skin="leather"] .char-card, [data-reader-skin="leather"] .save-slot { background: var(--recess-1); } [data-reader-skin="leather"] .text-input-area, [data-reader-skin="leather"] .btn, [data-reader-skin="leather"] #chapterSelect, [data-reader-skin="leather"] .voice-trigger { background: var(--recess-2); color: var(--text-main); } [data-reader-skin="leather"] #ttsStatus { background: rgba(246,239,221,0.96); color: var(--text-main); } /* Hide the live-scrolling standard view; it's still fully built and updated by reader.js, just not rendered while the leather leaf is on screen. */ [data-reader-skin="leather"] #storyContainer.leather-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* Bare page background -- the animated wave layer (::before) and the book itself sit on top of this. */ [data-reader-skin="leather"] body { background: var(--bg-dark); } [data-reader-skin="leather"] #bg-canvas { opacity: 0.12; } [data-reader-skin="leather"] .container { position: relative; overflow: hidden; background: radial-gradient(ellipse at 15% 10%, rgba(143,201,176,0.16), transparent 45%), radial-gradient(ellipse at 85% 85%, rgba(127,168,201,0.14), transparent 50%), var(--bg-dark); padding: clamp(16px, 3.5vh, 40px) clamp(10px, 3vw, 28px); min-height: calc(100vh - 1px); display: flex; align-items: center; justify-content: center; } /* Gentle looping wave pattern, sea-foam + slate-blue linework, drifting sideways forever. A single wide tile repeated via background-repeat, animated by sliding background-position -- perfectly seamless, no JS per frame, negligible cost. */ [data-reader-skin="leather"] .container::before { content: ""; position: absolute; inset: -10% -5%; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' width='400' height='120'%3E%3Cpath d='M0 60 C 50 20, 150 20, 200 60 C 250 100, 350 100, 400 60' stroke='%238fc9b0' stroke-width='1.4' fill='none'/%3E%3Cpath d='M0 80 C 50 45, 150 45, 200 80 C 250 115, 350 115, 400 80' stroke='%237fa8c9' stroke-width='1.4' fill='none'/%3E%3Cpath d='M0 40 C 50 5, 150 5, 200 40 C 250 75, 350 75, 400 40' stroke='%23b8862f' stroke-width='1' fill='none' opacity='0.5'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 400px 120px; animation: leather-wave-drift 34s linear infinite; } @keyframes leather-wave-drift { from { background-position: 0 0; } to { background-position: -400px 60px; } } @media (prefers-reduced-motion: reduce) { [data-reader-skin="leather"] .container::before { animation: none; } } .leather-book { position: relative; z-index: 1; /* vw, not a % of .container -- .container's own width isn't always definite (it can sit inside a flex ancestor without stretch), and a percentage width silently resolves to 0 against an indefinite containing block. Same fix already used by the Atlas dossier panel (app/themes.css .dossier { width:min(540px,92vw); }). */ width: min(720px, 92vw); height: min(78vh, 860px); perspective: 2400px; } /* The closed-book "cover" glimpsed behind the open page on wide screens -- soft vellum-toned spine strips, not dark tooled leather. */ .leather-book::before, .leather-book::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, var(--spine), var(--bg-dark)); border-radius: 4px; box-shadow: inset 0 0 14px rgba(150,130,80,0.25); } .leather-book::before { left: -12px; } .leather-book::after { right: -12px; } .leather-leaf { position: absolute; inset: 0; background: var(--page); background-image: radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.5), transparent 40%), radial-gradient(ellipse at 85% 90%, rgba(184,134,47,0.05), transparent 45%), /* Gold-leaf corner flourishes, illuminated-manuscript style, one per corner via multiple background layers (no per-layer transform in CSS, so all four use the same mark rather than true mirroring -- still reads as deliberate ornament, not a bug). */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='60' height='60'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%23b8862f' stroke-width='1.4' fill='none' opacity='0.55'/%3E%3Cpath d='M12 6 Q32 6 32 26' stroke='%23b8862f' stroke-width='1' fill='none' opacity='0.4'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23b8862f' opacity='0.55'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='60' height='60'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%23b8862f' stroke-width='1.4' fill='none' opacity='0.55'/%3E%3Cpath d='M12 6 Q32 6 32 26' stroke='%23b8862f' stroke-width='1' fill='none' opacity='0.4'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23b8862f' opacity='0.55'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='60' height='60'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%23b8862f' stroke-width='1.4' fill='none' opacity='0.55'/%3E%3Cpath d='M12 6 Q32 6 32 26' stroke='%23b8862f' stroke-width='1' fill='none' opacity='0.4'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23b8862f' opacity='0.55'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' width='60' height='60'%3E%3Cpath d='M6 6 Q6 30 30 30 Q6 30 6 54' stroke='%23b8862f' stroke-width='1.4' fill='none' opacity='0.55'/%3E%3Cpath d='M12 6 Q32 6 32 26' stroke='%23b8862f' stroke-width='1' fill='none' opacity='0.4'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23b8862f' opacity='0.55'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 20% 15%, 85% 90%, top left, top right, bottom right, bottom left; background-size: auto, auto, 46px 46px, 46px 46px, 46px 46px, 46px 46px; border-radius: 3px 10px 10px 3px; box-shadow: 0 14px 40px rgba(120,100,60,0.28), inset 0 0 0 1px rgba(184,134,47,0.15), inset -10px 0 20px -14px rgba(120,100,60,0.25); color: var(--page-ink); overflow: hidden; display: flex; flex-direction: column; transform-origin: left center; backface-visibility: hidden; transition: transform 0.62s cubic-bezier(.4,.1,.2,1), box-shadow 0.62s; } /* Spine edge shading -- the "gutter" of the open book */ .leather-leaf::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(120,100,60,0.14), transparent); pointer-events: none; } .leather-leaf.turning-next { transform: rotateY(-146deg); box-shadow: 0 18px 50px rgba(120,100,60,0.4); } .leather-leaf.turning-prev { transform: rotateY(146deg); box-shadow: 0 18px 50px rgba(120,100,60,0.4); } .leather-leaf.incoming { transform: rotateY(0deg); } .leather-leaf-inner { flex: 1; overflow: hidden; padding: clamp(28px, 6%, 56px) clamp(24px, 7%, 52px) clamp(20px, 4%, 36px); font-family: 'Cormorant Garamond', var(--font-read, serif); } .leather-leaf-inner .chapter h2 { font-family: 'Cinzel', var(--font-head, serif); color: var(--gilt); text-align: center; font-size: clamp(1rem, 2.6vh, 1.3rem); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1.1em; padding-bottom: 0.6em; border-bottom: 1px solid rgba(184,134,47,0.3); } .leather-leaf-inner .chapter-content p { font-size: clamp(1rem, 2.3vh, 1.16rem); line-height: 1.75; margin: 0 0 1.1em; color: var(--page-ink); cursor: pointer; border-radius: 3px; transition: background 0.2s; } .leather-leaf-inner .chapter-content p:hover { background: rgba(111,147,173,0.08); } .leather-leaf-inner .chapter-content p::first-letter { color: var(--gilt); font-family: 'Cinzel', serif; } .leather-leaf-inner .chapter-content p.reading { background: rgba(143,201,176,0.22) !important; box-shadow: inset 3px 0 0 var(--wash-seafoam); } .leather-folio { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--font-body, monospace); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--page-ink-dim); text-transform: uppercase; } /* Page-turn hit zones: click the outer thirds of the book to flip, same gesture as a physical page corner. */ .leather-turn-zone { position: absolute; top: 0; bottom: 0; width: 15%; z-index: 5; cursor: pointer; background: transparent; border: none; padding: 0; } .leather-turn-zone.prev { left: 0; } .leather-turn-zone.next { right: 0; } .leather-turn-zone:hover { background: linear-gradient(90deg, rgba(184,134,47,0.06), transparent); } .leather-turn-zone.next:hover { background: linear-gradient(-90deg, rgba(184,134,47,0.06), transparent); } .leather-turn-zone:disabled { cursor: default; pointer-events: none; } .leather-controls { position: absolute; top: -46px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body, monospace); color: #6f5f3c; font-size: 0.72rem; letter-spacing: 0.08em; } .leather-controls button { background: transparent; border: 1px solid rgba(184,134,47,0.35); color: #7a6538; border-radius: 3px; padding: 5px 12px; font: inherit; cursor: pointer; transition: 0.15s; } .leather-controls button:hover:not(:disabled) { border-color: var(--gilt-bright); color: var(--gilt-bright); } .leather-controls button:disabled { opacity: 0.3; cursor: default; } @media (max-width: 640px) { .leather-book { height: min(76vh, 700px); } .leather-controls { top: -40px; } }