/* ================================================================ Shared page controls (zoom + light/dark theme toggle) Used on: /2033/project-progress, /2033/project-progress/:id, /user, /deaf-full-bible-initiative/language/:id ---------------------------------------------------------------- - Controls live in (moved there by page-controls.js) so they are not affected when body is zoomed. - Light mode engaged via html[data-theme="light"] on . ================================================================ */ /* ─── Control chrome (dark default) ─────────────────────────────── */ .pp-top-right-controls { position: fixed; top: 12px; right: 12px; z-index: 2147483600; display: flex; align-items: center; gap: 8px; font-family: 'Roboto', system-ui, sans-serif; } .pp-zoom-control { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(0, 12, 51, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pp-zoom-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); margin-right: 4px; } .pp-zoom-btn { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.1); padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; } .pp-zoom-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .pp-zoom-btn.active { background: rgba(238, 51, 37, 0.22); border-color: rgba(238, 51, 37, 0.6); color: #ff6b5b; } .pp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(0, 12, 51, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.75); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s; } .pp-theme-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .pp-theme-toggle:active { transform: scale(0.94); } .pp-theme-toggle svg { width: 18px; height: 18px; display: block; } .pp-theme-icon-sun { display: none; } .pp-theme-icon-moon { display: block; } html[data-theme="light"] .pp-theme-icon-sun { display: block; } html[data-theme="light"] .pp-theme-icon-moon { display: none; } @media print { .pp-top-right-controls { display: none !important; } } @media (max-width: 720px) { .pp-zoom-control { display: none; } .pp-top-right-controls { top: 8px; right: 8px; } } /* ─── Control chrome (light theme) ──────────────────────────────── */ html[data-theme="light"] .pp-zoom-control, html[data-theme="light"] .pp-theme-toggle { background: rgba(255, 255, 255, 0.96); border-color: rgba(26, 41, 66, 0.12); box-shadow: 0 4px 18px rgba(26, 41, 66, 0.12); color: #1a2942; } html[data-theme="light"] .pp-zoom-label { color: rgba(26, 41, 66, 0.5); } html[data-theme="light"] .pp-zoom-btn { background: #f4f6fa; border-color: rgba(26, 41, 66, 0.12); color: rgba(26, 41, 66, 0.7); } html[data-theme="light"] .pp-zoom-btn:hover { background: #e8ecf2; border-color: rgba(26, 41, 66, 0.25); color: #1a2942; } html[data-theme="light"] .pp-zoom-btn.active { background: rgba(238, 51, 37, 0.12); border-color: rgba(238, 51, 37, 0.5); color: #ee3325; } html[data-theme="light"] .pp-theme-toggle:hover { background: #f0f2f7; border-color: rgba(26, 41, 66, 0.3); color: #1a2942; } /* ================================================================ Generic light-theme overrides Keep these conservative — per-page templates add their own component-specific overrides for page-unique classes. ================================================================ */ html[data-theme="light"] body { background-color: #f4f6fa !important; color: #1a2942; } html[data-theme="light"] section:not(.hero-section):not(.language-hero) { background-color: #ffffff; color: #1a2942; } html[data-theme="light"] ::selection { background: #ee3325; color: #ffffff; text-shadow: none; } html[data-theme="light"] a { color: inherit; } html[data-theme="light"] progress::-webkit-progress-bar { background-color: #e8ecf2; }