/* ===== CSS Variables & Base Styles ===== */ :root { --sidebar-width: 260px; --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --bg-tertiary: #3d3d3d; --text-primary: #f5f5f5; --text-secondary: #b0b0b0; --accent-red: #e63946; --accent-red-hover: #ff4d5a; --border-color: #404040; --shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --transition: all 0.3s ease; } /* Light theme overrides (applied via data-theme on ) */ :root[data-theme="light"] { --bg-primary: #f4f4f5; --bg-secondary: #ffffff; --bg-tertiary: #e6e6e9; --text-primary: #1a1a1a; --text-secondary: #5a5a5a; --border-color: #d3d3d8; --shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; /* mobile browsers with collapsing URL bars */ overflow-x: hidden; } /* ===== Utilities ===== */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .hidden { display: none !important; } /* Accessibility Focus */ .skip-link { position: absolute; top: -40px; inset-inline-start: 0; background: var(--accent-red); color: white; padding: 12px 24px; z-index: 10000; text-decoration: none; font-weight: 600; border-radius: 0 0 8px 0; transition: top 0.3s ease; } .skip-link:focus { top: 0; outline: 2px solid white; outline-offset: 2px; } *:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 2px; } /* ===== Page Transitions ===== */ .page { display: none; min-height: 100vh; min-height: 100dvh; } .page.active { display: flex; } /* ===== Landing Page ===== */ .landing-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; } .logo { font-size: 4rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; } .red { color: var(--accent-red); } .tagline { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 60px; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.8s ease forwards; } .fade-in-delay { opacity: 0; animation: fadeIn 0.8s ease forwards 0.3s; } .fade-in-delay-2 { opacity: 0; animation: fadeIn 0.8s ease forwards 0.6s; } /* Upload Section */ .upload-section { width: 100%; } .drop-zone { border: 2px dashed var(--border-color); border-radius: 16px; padding: 60px 40px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--bg-secondary); } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent-red); background: var(--bg-tertiary); } .drop-zone-content { display: flex; flex-direction: column; align-items: center; gap: 15px; } .upload-icon { width: 64px; height: 64px; color: var(--text-secondary); } .drop-zone p { font-size: 1.1rem; color: var(--text-primary); } .supported-formats, .or-divider { font-size: 0.9rem !important; color: var(--text-secondary) !important; } .browse-btn { background: var(--accent-red); color: white; padding: 12px 32px; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; } .browse-btn:hover { background: var(--accent-red-hover); transform: translateY(-2px); } /* Loading Spinner */ .loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px; } .spinner { width: 50px; height: 50px; border: 4px solid var(--bg-tertiary); border-top-color: var(--accent-red); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Error Message */ .error-message { background: rgba(230, 57, 70, 0.1); border: 1px solid var(--accent-red); border-radius: 8px; padding: 16px 24px; margin-top: 20px; color: var(--accent-red); text-align: center; } /* Footer Links */ .global-privacy-link { position: fixed; bottom: 15px; inset-inline-end: 20px; color: var(--text-secondary); text-decoration: none; font-size: 0.75rem; opacity: 0.4; transition: var(--transition); z-index: 50; } .global-privacy-link:hover { color: var(--accent-red); opacity: 1; } /* Offset the second footer link so the two don't overlap (flips in RTL) */ .global-privacy-link.footer-about { inset-inline-end: 80px; } /* ===== Reading Page ===== */ .reading-container { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; } /* Keep the reading area clear of the fixed sidebar (box-sizing keeps the 100% width from overflowing). 768.1px pairs with the mobile block's max-width: 768px so fractional zoom widths can't fall between the two queries and leave the fixed sidebar overlapping an unpadded page. */ @media (min-width: 768.1px) { .reading-container { padding-inline-start: var(--sidebar-width); } } .word-display { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; position: relative; } .word-wrapper { font-size: 4rem; font-weight: 600; font-family: 'Courier New', Courier, monospace; display: flex; align-items: center; white-space: nowrap; width: 100%; overflow: visible; } /* The side spans always split the width equally (flex: 1 1 0) so the highlighted ORP letter stays pinned at the focal line no matter how a chunk divides; main.js scales the font down when the longer side would overflow. Logical alignment (end/start) keeps the layout correct in both LTR and RTL scripts — the wrapper's dir attribute is set per word in JS. white-space: pre keeps the spaces at span boundaries in multi-word chunks from being collapsed away (the spans are flex items). */ #word-left { text-align: end; flex: 1 1 0; min-width: 0; overflow: visible; white-space: pre; } #word-center { color: var(--accent-red); font-weight: 700; flex: 0 0 auto; white-space: pre; } #word-right { text-align: start; flex: 1 1 0; min-width: 0; overflow: visible; white-space: pre; } .focus-line { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 120px; background: var(--accent-red); opacity: 0.4; } /* Progress Container */ .progress-container { padding: 20px 40px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .progress-bar { width: 100%; max-width: 600px; height: 6px; -webkit-appearance: none; appearance: none; background: var(--bg-tertiary); border-radius: 3px; cursor: pointer; } /* Thumb styling is shared with the WPM/chunk sliders — see "Slider Thumbs". */ .progress-info { font-size: 0.9rem; color: var(--text-secondary); } /* ===== Sidebar ===== */ .sidebar { position: fixed; inset-inline-start: 0; /* left in LTR, right in RTL */ top: 0; height: 100vh; height: 100dvh; width: var(--sidebar-width); background: transparent; border-inline-end: 1px solid var(--border-color); transition: var(--transition); z-index: 100; opacity: 0.3; } .sidebar:hover { opacity: 1; background: var(--bg-secondary); } .sidebar-content { padding: 30px 20px; height: 100%; overflow-y: auto; scrollbar-width: thin; } .sidebar-content h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 24px; color: var(--text-primary); } .control-group { margin-bottom: 24px; } .control-group label { display: block; margin-bottom: 10px; color: var(--text-secondary); font-size: 0.95rem; } /* Playback Controls */ .playback-controls { display: flex; align-items: center; justify-content: center; gap: 14px; } .control-btn { width: 46px; height: 46px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; } .control-btn:hover { background: var(--accent-red); border-color: var(--accent-red); } .control-btn svg { width: 22px; height: 22px; color: var(--text-primary); } .play-btn { width: 58px; height: 58px; background: var(--accent-red); border-color: var(--accent-red); } .play-btn svg { width: 26px; height: 26px; } .play-btn:hover { background: var(--accent-red-hover); border-color: var(--accent-red-hover); } /* WPM & Chunk Size Sliders */ .wpm-slider, .chunk-slider { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: var(--bg-tertiary); border-radius: 4px; cursor: pointer; } /* Slider Thumbs (progress, WPM, chunk). NOTE: -webkit- and -moz- selectors must stay in separate rules — grouping them makes browsers drop the entire rule as invalid. Only transform is transitioned: it's the only property that changes (on hover). */ .progress-bar::-webkit-slider-thumb, .wpm-slider::-webkit-slider-thumb, .chunk-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--accent-red); border-radius: 50%; cursor: pointer; border: none; transition: transform 0.3s ease; } .progress-bar::-moz-range-thumb, .wpm-slider::-moz-range-thumb, .chunk-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--accent-red); border-radius: 50%; cursor: pointer; border: none; transition: transform 0.3s ease; } /* The reading progress bar keeps a smaller thumb */ .progress-bar::-webkit-slider-thumb { width: 16px; height: 16px; } .progress-bar::-moz-range-thumb { width: 16px; height: 16px; } .progress-bar::-webkit-slider-thumb:hover, .wpm-slider::-webkit-slider-thumb:hover, .chunk-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .progress-bar::-moz-range-thumb:hover, .wpm-slider::-moz-range-thumb:hover, .chunk-slider::-moz-range-thumb:hover { transform: scale(1.15); } /* New Document Button */ .new-doc-btn { width: 100%; padding: 12px 20px; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--transition); } .new-doc-btn:hover { background: var(--bg-tertiary); border-color: var(--accent-red); } .new-doc-btn svg { width: 20px; height: 20px; } /* Keyboard Shortcuts */ .shortcuts-info { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); } .shortcuts-info h3 { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 15px; font-weight: 500; } .shortcuts-info ul { list-style: none; } .shortcuts-info li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; color: var(--text-secondary); } kbd { background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; font-family: inherit; font-size: 0.8rem; min-width: 30px; text-align: center; } /* ===== Achievement Notifications ===== */ .achievement-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1000; pointer-events: none; } .achievement { background: var(--bg-secondary); border: 1px solid var(--accent-red); border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow); animation: slideUp 0.5s ease forwards, fadeOut 0.5s ease forwards 3s; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } } .achievement-icon { font-size: 2rem; } .achievement-content h4 { font-size: 1rem; color: var(--accent-red); margin-bottom: 4px; } .achievement-content p { font-size: 0.85rem; color: var(--text-secondary); } /* ===== Chunk Progress Indicator ===== */ .chunk-progress-indicator { position: fixed; top: 20px; inset-inline-end: 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; min-width: 280px; max-width: 350px; box-shadow: var(--shadow); z-index: 1000; animation: slideInRight 0.3s ease forwards; } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .chunk-progress-indicator.hidden { display: none; } .chunk-progress-content { display: flex; flex-direction: column; gap: 12px; } .chunk-progress-content .chunk-progress-header { display: flex; align-items: center; gap: 12px; } .chunk-progress-spinner { width: 24px; height: 24px; min-width: 24px; min-height: 24px; border: 3px solid var(--bg-tertiary); border-top-color: var(--accent-red); border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; display: inline-block; } .chunk-progress-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .chunk-progress-title { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chunk-progress-detail { font-size: 0.8rem; color: var(--text-secondary); } .chunk-progress-bar-container { width: 100%; height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; } .chunk-progress-bar { height: 100%; background: var(--accent-red); border-radius: 3px; transition: width 0.3s ease; width: 0%; } @keyframes progressPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .chunk-progress-indicator:not(.hidden) .chunk-progress-bar { animation: progressPulse 2s ease-in-out infinite; } /* ===== Responsive Design ===== */ /* Tablet (1024px) — narrows both the sidebar and the reading-area padding */ @media (max-width: 1024px) { :root { --sidebar-width: 220px; } } /* Mobile (768px) */ @media (max-width: 768px) { /* Layout */ .landing-container { padding: 30px 15px; justify-content: flex-start; padding-top: 15vh; min-height: auto; } .word-display { padding: 20px 10px; flex: 1; } .global-privacy-link { display: none; } /* Typography */ .logo { font-size: 2.5rem; } .tagline { font-size: 0.95rem; margin-bottom: 40px; } .word-wrapper { font-size: 2rem; padding: 0 5px; } .focus-line { height: 80px; } /* Components */ .drop-zone { padding: 35px 20px; border-radius: 12px; } .upload-icon { width: 48px; height: 48px; } .drop-zone p { font-size: 1rem; } .browse-btn { padding: 14px 36px; font-size: 1rem; min-height: 48px; } /* Progress */ .progress-container { padding: 10px 20px; } .progress-bar { height: 8px; } .progress-bar::-webkit-slider-thumb { width: 24px; height: 24px; } .progress-bar::-moz-range-thumb { width: 24px; height: 24px; } .progress-info { font-size: 0.85rem; } .chunk-progress-indicator { top: 10px; right: 10px; left: 10px; min-width: auto; max-width: none; } /* Sidebar: an in-flow bottom panel — no fixed positioning, so the word display and progress bar lay out above it without magic offsets. */ .sidebar { position: static; height: auto; width: 100%; background: var(--bg-secondary); border-inline-end: none; border-top: 1px solid var(--border-color); opacity: 1; padding-bottom: env(safe-area-inset-bottom, 0); } .sidebar-content { padding: 12px 15px 20px; overflow-y: visible; } .sidebar-content h2, .shortcuts-info { display: none; } /* Controls */ .control-group { margin-bottom: 12px; } .playback-controls { gap: 12px; margin-bottom: 8px; } .control-btn { width: 52px; height: 52px; } .control-btn svg { width: 24px; height: 24px; } .play-btn { width: 62px; height: 62px; } .play-btn svg { width: 28px; height: 28px; } .control-group label { font-size: 0.85rem; text-align: center; margin-bottom: 6px; } .wpm-slider::-webkit-slider-thumb, .chunk-slider::-webkit-slider-thumb { width: 26px; height: 26px; } .wpm-slider::-moz-range-thumb, .chunk-slider::-moz-range-thumb { width: 26px; height: 26px; } .new-doc-btn { padding: 10px 16px; font-size: 0.9rem; min-height: 40px; } /* Achievements (vertical anchor is set in JS: just above the in-flow control panel, whatever its current height) */ .achievement { padding: 12px 16px; max-width: calc(100vw - 40px); } .achievement-icon { font-size: 1.5rem; } .achievement-content h4 { font-size: 0.9rem; } .achievement-content p { font-size: 0.8rem; } } /* Landscape Mobile */ @media (max-width: 768px) and (orientation: landscape) { .landing-container { padding-top: 5vh; min-height: auto; } .tagline { margin-bottom: 20px; } .word-display { padding: 15px 10px; } .sidebar-content { padding: 8px 15px 15px; } .control-group { margin-bottom: 8px; } .progress-container { padding: 8px 20px 5px; } .control-btn { width: 44px; height: 44px; } .play-btn { width: 52px; height: 52px; } /* Cap the page to the viewport: the word display shrinks first and the control panel scrolls internally, instead of the whole page scrolling and pushing controls off-screen mid-read. */ .reading-container { min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; } .word-display { min-height: 0; } .sidebar { min-height: 0; overflow-y: auto; } } /* Small Screens (480px) */ @media (max-width: 480px) { .landing-container { padding-top: 10vh; } .logo { font-size: 2.2rem; } .tagline { font-size: 0.9rem; margin-bottom: 30px; } .drop-zone { padding: 30px 15px; } .upload-icon { width: 40px; height: 40px; } .drop-zone p { font-size: 0.95rem; } .supported-formats { font-size: 0.8rem !important; } .word-wrapper { font-size: 1.6rem; } .focus-line { height: 60px; } .control-btn { width: 48px; height: 48px; } .play-btn { width: 56px; height: 56px; } .playback-controls { gap: 10px; } } /* Extra Small Screens (360px) */ @media (max-width: 360px) { .logo { font-size: 1.9rem; } .word-wrapper { font-size: 1.4rem; } .control-btn { width: 44px; height: 44px; } .play-btn { width: 52px; height: 52px; } .playback-controls { gap: 8px; } } /* Touch Optimizations */ @media (hover: none) and (pointer: coarse) { .sidebar { opacity: 1; } .sidebar:hover { background: var(--bg-secondary); } .browse-btn:active, .control-btn:active { transform: scale(0.95); } .drop-zone:active { border-color: var(--accent-red); background: var(--bg-tertiary); } } /* ===== Global Controls (language + theme, top-right) ===== */ .global-controls { position: fixed; top: 16px; inset-inline-end: 16px; /* right in LTR, left in RTL */ z-index: 200; display: flex; align-items: center; gap: 10px; } .lang-select { height: 42px; padding: 0 10px; border-radius: 21px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; cursor: pointer; opacity: 0.75; transition: var(--transition); } .lang-select:hover { opacity: 1; color: var(--text-primary); border-color: var(--accent-red); } .theme-toggle { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); opacity: 0.75; } .theme-toggle:hover { opacity: 1; color: var(--accent-red); border-color: var(--accent-red); } .theme-toggle svg { width: 20px; height: 20px; } @media (max-width: 768px) { .global-controls { top: 12px; inset-inline-end: 12px; gap: 8px; } .lang-select { height: 38px; font-size: 0.8rem; } .theme-toggle { width: 38px; height: 38px; } } /* ===== OCR Language Selector (landing) ===== */ .ocr-lang-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } .ocr-lang-row label { font-size: 0.85rem; color: var(--text-secondary); } .ocr-lang-select { padding: 6px 10px; border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: var(--transition); } .ocr-lang-select:hover { border-color: var(--accent-red); } /* ===== Chapter Navigation ===== */ .chapter-select { width: 100%; padding: 9px 12px; border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); font-size: 0.9rem; font-family: inherit; cursor: pointer; transition: var(--transition); } .chapter-select:hover { border-color: var(--accent-red); } /* ===== Toggle Switch (Warm-up) ===== */ /* Specificity must beat `.control-group label { display: block }`. */ .control-group label.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; margin-bottom: 0; } .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-switch { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); transition: var(--transition); flex-shrink: 0; } .toggle-switch::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-secondary); transition: var(--transition); } .toggle-input:checked + .toggle-switch { background: var(--accent-red); border-color: var(--accent-red); } .toggle-input:checked + .toggle-switch::after { transform: translateX(18px); background: #fff; } /* Knob slides the other way in RTL */ [dir="rtl"] .toggle-input:checked + .toggle-switch::after { transform: translateX(-18px); } .toggle-input:focus-visible + .toggle-switch { outline: 2px solid var(--accent-red); outline-offset: 2px; } /* ===== Reading Stats ===== */ .reading-stats { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border-color); } .stat-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--text-secondary); } .stat-row span:last-child { color: var(--text-primary); font-weight: 600; } /* On the mobile bottom sheet, keep the panel compact */ @media (max-width: 768px) { .reading-stats { display: none; } .chapter-group { margin-bottom: 12px; } }