/* ========================================================================= Bosco Allegro — Premium Reader · Modalità notte (dark mode) Condiviso da Vol.1 / Vol.2 / Vol.3. Attivato da [data-theme="dark"] su . Filosofia: il reader deriva ogni superficie da 6 variabili semantiche (--paper, --paper-shadow, --ink, --ink-sepia, --ink-marginalia, --rust). Ridefinendole sotto [data-theme="dark"] l'intera cascata si ribalta. Le illustrazioni watercolor NON si invertono: si abbassa solo un soffio di luminosità perché non "buchino" la notte. ========================================================================= */ /* ---- 1. Override palette: la carta diventa notte calda (mai nero puro) ---- */ :root[data-theme="dark"] { --paper: #1C1814; /* carta-notte, bruno caldo */ --paper-shadow: #26201A; /* superficie sollevata (card, hover, drawer) */ --ink: #ECE3D3; /* inchiostro avorio caldo */ --ink-sepia: #C7B59C; /* sepia schiarito (sottotitoli, bordi) */ --ink-marginalia: #9C8568; /* glyph decorativi */ --rust: #E06B4F; /* ruggine più acceso per contrasto su scuro */ color-scheme: dark; } /* ---- 2. Superfici traslucide hardcoded (non derivate da variabile) ------- */ /* Sticky-band: era carta al 92%, diventa notte traslucida */ :root[data-theme="dark"] .sticky-band { background: rgba(28, 24, 20, 0.88); } @media (prefers-reduced-transparency: reduce) { :root[data-theme="dark"] .sticky-band { background: rgba(28, 24, 20, 0.98); } } /* Highlight bianchi → tenui scuri */ :root[data-theme="dark"] .reserved-id { background: rgba(236, 227, 211, 0.07); color: var(--ink-sepia); } /* ---- 3. Placeholder illustrazioni riservate (raro: slot senza immagine) -- */ :root[data-theme="dark"] .reserved-frame, :root[data-theme="dark"] .reserved-frame--cover { background: radial-gradient(circle at 50% 40%, #2B241E 0%, #221C17 65%, #1A1511 100%) !important; } /* ---- 4. Immagini: abbassa appena luminosità/saturazione sulla notte ------ */ :root[data-theme="dark"] .illustration img, :root[data-theme="dark"] .chapter-cover img, :root[data-theme="dark"] .cover-screen__img { filter: brightness(0.90) saturate(0.95); } /* ---- 5. Ammorbidisci ombre nere troppo dure su fondo scuro --------------- */ :root[data-theme="dark"] .chapter-cover, :root[data-theme="dark"] .illustration img, :root[data-theme="dark"] .cover-screen__frame { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55); } /* ========================================================================= Scala testo — moltiplicatore globale. Il testo del reader usa clamp(...rem), quindi scalando il font-size di root tutto cresce/diminuisce in proporzione. Default 1 (100%). Impostato da theme-toggle.js / snippet inline nel . ========================================================================= */ html { font-size: calc(100% * var(--reader-scale, 1)); } /* ========================================================================= Controlli lettura — footer in fondo al pannello Indice (la sidebar). Niente più pill flottante: i controlli si raggiungono aprendo il menu. ========================================================================= */ .reader-controls { flex-shrink: 0; border-top: 1px solid var(--ink-sepia); background: var(--paper-shadow); padding: 0.7rem 1.2rem 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; } .reader-controls__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .reader-controls__label { font-family: var(--font-body, serif); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-sepia); } .reader-controls__btn { font-family: var(--font-body, serif); font-size: 0.9rem; line-height: 1; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-sepia); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background .2s ease, color .2s ease, opacity .2s ease; } .reader-controls__btn:hover { background: var(--paper-shadow); } .reader-controls__btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; } .reader-controls__btn:disabled { opacity: 0.4; cursor: default; } .rc-theme__icon { font-size: 1rem; } .reader-controls__stepper { display: inline-flex; align-items: center; gap: 0.5rem; } .reader-controls__stepper .reader-controls__btn { padding: 0.3rem 0.6rem; min-width: 2.1rem; justify-content: center; } .rc-scale-value { font-family: var(--font-body, serif); font-size: 0.85rem; color: var(--ink); min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; } @media print { .reader-controls { display: none !important; } }