/* ============================================================================= style.css — the PUBLIC app stylesheet. ============================================================================= @font-face, the design tokens (:root, [data-theme="light"], [data-theme="dark"] and the legacy aliases) and the element reset moved to base.css, which both index.html and admin.html load immediately before their own sheet. Nothing was reordered; this file simply starts further down than it used to. The component layer BOTH pages render moved to components.css. admin.html no longer loads this file at all, so rules added here are PUBLIC-ONLY in fact and not merely by intent: they cannot reach the admin panel, and an edit here cannot change it. A rule the admin panel also needs belongs in components.css, which is a shared contract -- see CLAUDE.md §3b. ============================================================================= PLATFORM OVERRIDES -- how to style the desktop/mobile shells ============================================================================= `` carries `data-platform`, set before the first painted frame by the boot script in index.html and re-applied authoritatively by applyPlatformAttribute() in src/shared/platform.js. Its value is one of: web | tauri | capacitor Write shell-specific rules as OVERRIDES on top of the existing ones, keyed on that attribute, and put them next to the rule they override: .site-header { padding: 12px 16px; } [data-platform="tauri"] .site-header { padding: 6px 12px; } Three rules, and they are what keep this from becoming a fork: 1. NEVER duplicate a component to change it. One component tree, an override layer on top -- see the roadmap's 3.7 note. A forked homepage or reader is two things to fix every time, and the second one is always the one that gets forgotten. 2. The base rule stays platform-neutral and keeps working with NO attribute at all. `data-platform` can legitimately be absent -- a locked-down WebView that throws on DOM access leaves it unset, and the boot script swallows that. An unstyled page is the failure mode to design against. 3. Shell overrides belong HERE, in style.css. A `[data-platform="tauri"]` block in components.css or base.css also reaches admin.html and makes the commit a shared-contract change (CI blocks it without a Contract-Impact trailer). The admin panel is web-only and has no shell to style for. The bytes ship to web too, unused. That is the intended trade: one stylesheet whose cascade you can reason about beats a build-time split you cannot. ============================================================================= */ /* ─── UI text uses Inter ─── */ .form-textarea, .sidebar-tab-item, .tab, .toast, .b2-stat-label, .stat-label, .theme-toggle-label, .empty-state p, .skeleton, .tab-text, .book-card-meta-badges, .queue-details-column, .volume-picker-modal, .panel-header-desc, .b2-controls-row { font-family: var(--font-ui); } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { /* The book-cover zoom is a transform, not a duration: killing the transition alone would still snap the cover to scale(1.03) on hover, which is exactly the motion a vestibular-disorder user opted out of. !important because `.book-card:hover .book-card-cover` is declared later in this file (BOOK CARDS section) at equal specificity, and @media adds none — without it the later rule wins. */ .book-card:hover .book-card-cover { transform: none !important; } } /* ======================== SCROLLBAR STYLING ======================== */ /* ======================== THEME TOGGLE PILL ======================== */ .theme-toggle-pill { display: flex; align-items: center; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; box-shadow: var(--shadow-md); transition: background 300ms ease, border-color 300ms ease; } .theme-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); position: relative; } .theme-toggle-btn:hover { color: var(--text-primary); } .theme-toggle-btn.active { background: var(--accent-light); color: var(--accent); } .theme-toggle-btn svg { width: 18px; height: 18px; } /* Navbar theme pill: same component as the reader-settings theme switcher, just sized down slightly to sit comfortably in the navbar row next to the lang-switcher pill. */ .navbar-theme-pill { padding: 2px; } .navbar-theme-pill .theme-toggle-btn { width: 30px; height: 30px; } .navbar-theme-pill .theme-toggle-btn svg { width: 16px; height: 16px; } /* ── Navbar settings gear & user auth icon buttons ── */ .navbar-settings-toggle, .navbar-auth-toggle { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-secondary); box-shadow: var(--shadow-sm); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); cursor: pointer; } .navbar-settings-toggle:hover, .navbar-auth-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); } .navbar-settings-toggle svg, .navbar-auth-toggle svg { width: 18px; height: 18px; } .navbar-settings-dropdown.open .navbar-settings-toggle, .nav-link-dropdown.open .navbar-auth-toggle { color: var(--accent); border-color: var(--accent); } /* The gear wrapper is tiny and sits close to the navbar edge, so anchoring the panel to it pushed the panel off-screen (worse in RTL). Pin it to the viewport's trailing-top corner instead — it can't clip whatever the navbar layout or text direction. (≤768px still overrides this to a bottom sheet.) */ .navbar-settings-panel { width: 248px; max-width: calc(100vw - 24px); gap: 14px; padding: 14px; } .navbar-settings-dropdown.open .navbar-settings-panel { position: fixed; top: 60px; inset-inline-start: auto; inset-inline-end: 14px; margin: 0; } .navbar-settings-group { display: flex; flex-direction: column; gap: 6px; } /* A hairline between groups so the four sections read as distinct. */ .navbar-settings-group + .navbar-settings-group { padding-top: 12px; border-top: 1px solid var(--border); } .navbar-settings-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* All four controls are compact full-width segmented rows, ~30px tall, so the panel reads as a tidy list rather than a stack of chunky buttons. */ .navbar-settings-panel .navbar-theme-pill { align-self: stretch; padding: 3px; } .navbar-settings-panel .navbar-theme-pill .theme-toggle-btn { flex: 1; width: auto; height: 26px; border-radius: var(--radius-full); } .navbar-settings-panel .lang-switcher { align-self: stretch; width: 100%; } .navbar-settings-panel .lang-switcher .lang-btn { flex: 1; padding: 6px 4px; font-size: 12px; } .navbar-settings-panel .display-mode-toggle { display: flex; width: 100%; } .navbar-settings-panel .display-mode-btn { flex: 1; justify-content: center; padding: 6px 8px; font-size: 12px; } .navbar-settings-panel .display-mode-btn i { width: 14px; height: 14px; } .navbar-settings-panel .view-options-size-buttons { gap: 5px; } .navbar-settings-panel .view-options-size-btn { flex: 1 1 0; min-width: 0; padding: 6px 4px; font-size: 11px; } /* Toast styling moved to components.css and was retargeted at the class names shared/components/toast.js actually emits (.toast-message, not .toast). The rules that were here matched markup nothing has rendered since the component was rewritten, and the admin panel could not see them at all after the components.css split. @keyframes toastIn went with them. */ /* ======================== STATUS BAR ======================== */ .status-badge.disconnected { background: #fef2f2; color: #dc2626; } /* All Books' search bar specifically — 0 left/right padding AND no max-width cap, instead of the shared .container's 24px padding + 1300px ceiling. Padding alone still left 33px of auto-centering margin on each side once the row was narrower than the viewport; removing max-width too lets it use the full width, with the freed space going to the search input (the only 1fr column). Scoped to just this .container (not the base rule, reused all over the site) — the panel below (book list) gets its own alignment from a different ancestor and keeps its normal width, so this intentionally makes the search bar sit wider than the content under it. */ .search-filter-panel .container { max-width: none; padding-left: 0; padding-right: 0; } /* Auto-hides after scrolling a fair way down a book list (toggleNavbar() in app.js), reappearing on scroll-up or any click — max-height (not display/transform) so it genuinely collapses out of flow instead of just visually hiding, letting the search bar and list below slide up into the reclaimed space. --chrome-offset drops (see the 4 explicit values above and below) at the same time so the list grows to fill that space instead of a gap opening up below it. overflow: hidden only applies here (while collapsing/collapsed), not on the base .navbar rule — the "Public Library" hover dropdown (below) is a child of .navbar that intentionally renders past its bottom edge, and overflow: hidden on the resting navbar clipped that panel almost entirely invisible. */ body.navbar-hidden .navbar { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; border-bottom-color: transparent; } body.navbar-hidden { --chrome-offset: 112px; /* navbar hidden, tab strip + search bar visible (All Books, scrolled) */ --offline-chrome-offset: var(--offline-chrome-offset-collapsed); } /* Set by switchLibraryTab() (app.js) whenever the active library tab is NOT All Books — those tabs (Author/Category/Recent) hide the shared .search-filter-panel and show their own local .search-grid header instead, so the shared bar contributes 0px of chrome here, not the usual 80px baked into the default --chrome-offset above. */ body.lib-searchbar-hidden { --chrome-offset: 142px; /* navbar + tab strip visible, search bar hidden (Author/Category/Recent, resting) */ } body.navbar-hidden.lib-searchbar-hidden { --chrome-offset: 32px; /* navbar + search bar hidden, tab strip still visible */ } /* ─── Android: the chrome pass ───────────────────────────────────────────── Measured on a Galaxy A20 (411x813 CSS px) before this block existed: 312px of chrome above the first book and 57px of bottom nav below it. 45% of the screen, for four books. The desktop navbar was reflowing onto a phone -- .navbar-container wraps at mobile widths and .nav-links takes width:100%, so the brand, the nav links and the settings gear each claimed a row of their own, 135px in total. Nothing here is hidden that cannot be reached: "Public Library" and "Offline Library" are both in the bottom tab bar, and "Articles" is in the More sheet. The links were a second copy, not the only copy -- which is why this is a strip and not a redesign. The base rules stay platform-neutral and keep working with no attribute at all, per rule 2 of the PLATFORM OVERRIDES note at the top of this file. */ /* One row: brand left, settings right. The wrap is what cost two rows. */ [data-platform="capacitor"] .navbar-container { flex-wrap: nowrap; align-items: center; } [data-platform="capacitor"] #navbar-links { display: none; } /* The tab bar sticks at top:56px, an offset sized for the navbar. With the title bar gone that floor sits 56px BELOW where the bar naturally falls, so sticky held it pinned there — on top of the first 56px of the book list. Measured: search band 56-140, first row starting at 84. top:0 is what "sticky" means once there is nothing above it. */ [data-platform="capacitor"] .library-tabs-bar { top: 0; } /* The gear moves into the More sheet (build-shell.js §8). Only the TOGGLE is hidden: #settings-dropdown is the container for the settings panel as well as for the button, so hiding the wrapper would hide the panel the new More row opens -- a settings entry that does nothing, with no error to find. */ [data-platform="capacitor"] .navbar-settings-toggle { display: none; } /* ─── Android: both book actions inline, no "…" ──────────────────────────── At <=768px the row hides its inline save-offline button and clones it into a "…" sheet, alongside download and read-later. That split earns its keep on the website, where the sheet holds three things. It does not here. Read-later is not rendered at all (no accounts in this build) and download is already hidden by isNativeApp(), so the sheet was opening to show a single item: one tap to reveal one button. Read and Save are the only two actions a reader has, and they both fit. The inline buttons are re-shown and the trigger removed rather than hidden with visibility, so it leaves the tab order and the accessibility tree too -- a control that opens an empty sheet should not be reachable at all. */ [data-platform="capacitor"] .book-row-actions > .book-opfs-btn, [data-platform="capacitor"] .books-grid .book-card-actions > .book-opfs-btn { display: inline-flex; } [data-platform="capacitor"] .book-more-wrap { display: none; } /* ─── Android: the settings panel must escape the navbar ─────────────────── THE BUG THIS FIXES IS NOT COSMETIC, and it is not Android-only. .navbar carries `backdrop-filter: blur(12px)`. Per spec, a backdrop-filter makes an element a containing block for `position: fixed` DESCENDANTS -- the same rule `transform` follows, and easy to miss because nothing about the markup suggests it. The settings panel lives inside .navbar, so it was never fixed to the viewport at all: it was fixed to the navbar, which is sticky and had scrolled to -791px. Measured on the device with the list scrolled: the panel computed `bottom: 0` and `top: -357px` against a 49px containing block, putting its rect at -1148 -- open, painted, full width, and entirely above the top of the screen. The same thing happens on the website; it is simply harder to reach there. Filed as a finding rather than fixed globally, because removing the blur from the live site is a visual change to a surface nobody asked me to touch. Here the blur has nothing left to blur: §9 takes the wordmark out, so the bar is zero-height and invisible. Dropping it restores the viewport as the containing block, and the existing `bottom: 0 !important` sheet rule -- already correct -- starts working. */ [data-platform="capacitor"] .navbar { /* Lifted to the sheet rung so the settings panel it hosts can paint above the bottom bar -- see the note above this block. */ z-index: var(--z-sheet-top); backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 0; padding-bottom: 0; min-height: 0; border-bottom: 0; } /* The status-bar / notch inset lived on .navbar's padding-top. With the bar collapsed it has to live somewhere that still has height, or on a notched phone the first row of content sits under the system clock. body is the one element every screen shares. */ [data-platform="capacitor"] body { padding-top: env(safe-area-inset-top, 0px); } /* ─── Android: More opens as a side drawer ───────────────────────────────── Written with logical properties rather than left/right, so "which side" follows the document's `dir` and therefore the UI language with no JS and no second rule: inline-start is the right edge in Arabic and Urdu, the left edge in English. That is the conventional direction for a navigation drawer in each, and it is the side the reader's eye already starts from. */ [data-platform="capacitor"] .more-sheet-panel { /* Block axis physical, inline axis logical. `bottom: auto` used to sit below `inset-block: 0` here and quietly cancelled its bottom half, so the drawer was top-anchored and only as tall as its three rows (252px of an 813px screen) -- it read as a dropdown, not a drawer. Physical and logical properties resolve to the SAME computed property, so the last declaration wins and order is the whole story. */ top: 0; bottom: 0; inset-inline-end: 0; inset-inline-start: auto; width: min(82vw, 320px); max-height: none; border-top: 0; border-inline-start: 1px solid var(--border); border-radius: 0; box-shadow: 0 0 28px rgba(0, 0, 0, 0.22); padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); animation: moreDrawerIn 0.24s ease; } /* The settings panel has to be able to paint above the bottom bar. z-index: 2200 on the panel never meant anything, because z-index only ranks siblings within one stacking context and the panel is not a sibling of the bar: it lives inside .navbar, which is position:sticky with z-index: var(--z-navbar) = 100 and therefore opens a context of its own. The bottom bar sits at 200 on the root. So the whole navbar subtree -- panel included -- painted underneath it, and the last setting was cut off by a bar drawn on top of it. The CSS comment beside .user-dropdown-backdrop already describes this trap for the scrim; the panel has it too. The bar this raises is zero-height, transparent and has no interactive children left, so lifting it to the sheet rung costs nothing and blocks nothing. */ /* ─── Android: the settings sheet, sized for a thumb ─────────────────────── The panel was drawn for a 248px desktop dropdown: small type, generous vertical gaps between groups, and controls sized for a cursor. As a full-width sheet that reads as a scaled-up desktop menu. Each group becomes one row -- label on the inline-start, control on the inline-end -- which halves the height, puts the controls under the thumb rather than across the whole width, and lets the whole sheet fit without scrolling. */ [data-platform="capacitor"] .navbar-settings-panel { gap: 0; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px); } [data-platform="capacitor"] .navbar-settings-group { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border-light, var(--border)); } [data-platform="capacitor"] .navbar-settings-group:last-child { border-bottom: 0; } [data-platform="capacitor"] .navbar-settings-label { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } /* Controls stop stretching to the full row and sit at the inline-end, so the whole group reads as one setting rather than a heading over a wide bar. */ [data-platform="capacitor"] .navbar-settings-panel .navbar-theme-pill, [data-platform="capacitor"] .navbar-settings-panel .lang-switcher, [data-platform="capacitor"] .navbar-settings-panel .display-mode-toggle, [data-platform="capacitor"] .navbar-settings-panel .view-options-size-buttons { flex: 0 0 auto; width: auto; } /* 44px is the minimum comfortable touch target; the desktop sizes were ~28px. */ [data-platform="capacitor"] .navbar-settings-panel .theme-toggle-btn, [data-platform="capacitor"] .navbar-settings-panel .lang-btn, [data-platform="capacitor"] .navbar-settings-panel .display-mode-btn, [data-platform="capacitor"] .navbar-settings-panel .view-options-size-btn { min-height: 40px; min-width: 44px; padding-inline: 12px; font-size: 13px; } /* The sheet already has a title row of its own; the desktop panel's separate heading block just repeats it. */ [data-platform="capacitor"] .user-dropdown-mobile-header { padding: 14px 16px; border-bottom: 1px solid var(--border); } /* The grab handle is a bottom-sheet affordance. A drawer does not drag down. */ [data-platform="capacitor"] .more-sheet-panel::before { content: none; } @keyframes moreDrawerIn { from { transform: translateX(calc(var(--more-drawer-from, 1) * 100%)); } to { transform: translateX(0); } } /* translateX is physical, so the slide direction has to be told which way the document runs; the keyframe reads this. */ [data-platform="capacitor"][dir="rtl"] .more-sheet-panel { --more-drawer-from: -1; } /* Search field and its three controls share a row instead of stacking. The field already carries min-width:0, so it shrinks rather than overflowing. */ [data-platform="capacitor"] .search-grid-primary { flex-wrap: nowrap; } /* --chrome-offset is deliberately NOT adjusted here, and that is worth writing down because it looks like an omission. It sizes the book list with calc(100dvh - offset), so reclaiming 129px of chrome above the list ought to require shrinking it by the same amount. It does not, because on a phone the rule never applies: the @media (max-width: 480px) block further down sets `.lib-tab-view.active, #lib-view-all-books.active { height: auto; overflow: visible }`, so below 480px the DOCUMENT scrolls and the container simply grows with its content. Confirmed on the device -- the list container measured 561450px tall against an 813px viewport, with overflow visible. Four capacitor overrides for those four states were written first and then deleted: they were dead rules carrying confident comments, which is worse than no rules at all. */ /* ─── Android: the thumb bar ─────────────────────────────────────────────── The bar is a tab switcher on Android, written by build-shell.js §4c, and its buttons carry an icon and no label. Five Arabic words across 411px is what made the old bar cramped; the one button whose meaning is not obvious from a glyph (the library switch) answers by CHANGING its glyph instead — a globe in the public library, a struck-through wifi in the offline one. .mbn-label does not exist in this build's markup, so nothing is hidden here; these rules only give the icon the room the label used to occupy. */ /* NOTE: no `position` override here, deliberately. The bar is `position: fixed` inside @media (max-width: 768px), and an attribute-plus-class selector at top level outranks it -- setting `position: relative` here took the bar out of fixed positioning and dropped it to the foot of a 561450px-tall document, i.e. entirely off-screen, while every DOM assertion still passed. A fixed element is already a containing block for absolutely-positioned children, so the drop-up anchors to it with nothing added. */ [data-platform="capacitor"] .mbn-item { justify-content: center; padding-top: 0; padding-bottom: 0; } [data-platform="capacitor"] .mbn-icon { width: 24px; height: 24px; } /* The drop-up. Anchored to the bar rather than the button so it cannot be pushed off-screen by the button's own position in an RTL row, and hidden by default with visibility as well as opacity so it is out of the tab order when closed rather than merely invisible. */ [data-platform="capacitor"] .mbn-library-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 8px; z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } [data-platform="capacitor"] .mbn-library-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } [data-platform="capacitor"] .mbn-library-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 14px; text-align: start; cursor: pointer; } [data-platform="capacitor"] .mbn-library-option i, [data-platform="capacitor"] .mbn-library-option svg { width: 18px; height: 18px; flex: 0 0 auto; } [data-platform="capacitor"] .mbn-library-option.active { background: var(--bg-hover); color: var(--accent); font-weight: 600; } /* ─── Nav Links ─── */ .nav-link.admin-pill { border: 1px solid var(--accent); color: var(--accent); } .nav-link.admin-pill:hover, .nav-link.admin-pill.active { background: var(--accent); color: #fff; } /* ─── "Public Library" hover dropdown (All Books/Authors/Categories/Recent) ─── The 4-tab strip used to be a permanent bar under the navbar; it's now tucked behind a hover so it only costs space while actually choosing a tab. top:100% (no gap) keeps the link→panel hover path continuous instead of flickering closed while the mouse crosses a margin. */ .nav-link-dropdown { position: relative; display: inline-flex; } .nav-dropdown-panel { position: absolute; top: 100%; inset-inline-start: 0; z-index: var(--z-dropdown); display: none; flex-direction: column; gap: 2px; min-width: 240px; padding: var(--space-2); margin-top: var(--space-2); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .nav-link-dropdown.open .nav-dropdown-panel { display: flex; } /* Chevron rotates when dropdown is open */ .nav-link-dropdown.open .dropdown-chevron { transform: rotate(180deg); } /* Dropdown toggle gets pointer cursor */ .nav-link-dropdown-toggle { cursor: pointer; user-select: none; } /* User Dropdown Component */ .user-dropdown-toggle { padding: 6px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; } .user-dropdown-toggle .user-icon { width: 18px; height: 18px; flex-shrink: 0; } .user-dropdown-name { font-weight: 600; color: var(--text-secondary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-dropdown-panel { min-width: 220px; inset-inline-end: 0; inset-inline-start: auto; top: 100%; margin-top: var(--space-2); } .user-dropdown-mobile-header { display: none; } .user-dropdown-item { padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--radius-sm); } .user-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Invisible bridge over the margin-top gap above, so moving the mouse from the link down into the panel doesn't cross a dead zone that closes it. */ .nav-link-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--space-2); } /* Reuse .sidebar-tab-item (same markup as before) but as a vertical menu row instead of a horizontal tab — no bottom-border tab underline, full width, rounded corners, accent background instead for hover/active. */ .nav-dropdown-panel .sidebar-tab-item { padding: 10px 12px; border-radius: var(--radius-sm); border-bottom: none; } .nav-dropdown-panel .sidebar-tab-item:hover { background: var(--accent-light); color: var(--accent); } .nav-dropdown-panel .sidebar-tab-item.active { background: var(--accent); color: #fff; } .nav-dropdown-panel .sidebar-tab-item.active .books-total-count { color: inherit; opacity: 0.85; } /* ─── PDF Badge Nav Link ─── */ .nav-link-pdf { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); } .nav-pdf-badge { flex-shrink: 0; height: 28px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)); transition: transform var(--transition-fast); } .nav-link-pdf:hover .nav-pdf-badge { transform: scale(1.08); } /* ─── Nav Actions Row (search icon, sidebar toggle, theme) ─── */ .nav-actions { display: flex; align-items: center; gap: var(--space-1); } .nav-icon-btn { width: 40px; height: 40px; border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); } .nav-icon-btn:hover { color: var(--accent); background: var(--accent-light); } .nav-icon-btn:active { transform: scale(0.97); transition: transform 100ms ease; } .nav-icon-btn svg { width: 20px; height: 20px; } /* ── Boot screen (pre-JS) ──────────────────────────────────────────────── index.html hardcodes #screen-home as .active, so without these rules the homepage is what gets painted for every URL until app.js runs at the bottom of the page. The inline script stamps data-boot-screen from the URL before the body is parsed; these rules make it win for that window only — preselectScreenFromPath() removes the attribute as soon as it has set the real .active class, so nothing here can fight the router afterwards. No animation: this is the first paint, there is nothing to transition. */ html[data-boot-screen]:not([data-boot-screen="home"]) #screen-home.active { display: none; animation: none; } html[data-boot-screen="library"] #screen-library, html[data-boot-screen="search"] #screen-search, html[data-boot-screen="articles"] #screen-articles, html[data-boot-screen="contact-support"] #screen-contact-support, html[data-boot-screen="reading-lists"] #screen-reading-lists, html[data-boot-screen="download"] #screen-download { display: block; } /* Lucide icons inside buttons */ .btn svg.lucide, .btn .lucide { width: 18px; height: 18px; flex-shrink: 0; } /* ─── Scroll-to-top FAB — dark frosted glass, not a solid accent-filled button. A solid --btn-primary-bg circle competes visually with real actions (Read/Download); dark-tinted glass reads as passive chrome and sits quietly over any page content since it isn't theme-tinted itself — same reasoning as the sidebar icon rail's glass treatment nearby. */ .scroll-to-top-fab { border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); color: #F8FAFC; cursor: pointer; transition: opacity 0.3s, transform 0.3s, background 150ms ease, border-color 150ms ease; } .scroll-to-top-fab:hover { background: rgba(15, 23, 42, 0.62); border-color: rgba(255, 255, 255, 0.28); } .scroll-to-top-fab:active { transform: scale(0.94); } /* Dark theme already puts a dark surface behind it — lighten the glass itself instead, so it still reads as a distinct floating layer. */ [data-theme="dark"] .scroll-to-top-fab { background: rgba(245, 245, 244, 0.14); border-color: rgba(245, 245, 244, 0.22); } [data-theme="dark"] .scroll-to-top-fab:hover { background: rgba(245, 245, 244, 0.22); } /* ======================== FORMS ======================== */ .form-textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-arabic); font-size: 15px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .form-textarea { resize: vertical; min-height: 100px; } /* ======================== BADGES ======================== */ .badge-primary { background: var(--accent-gold-light); /* --accent-gold-text, not --accent-gold: this is real text, and the fill tone only clears the 3:1 non-text bar, not the 4.5:1 AA text bar. */ color: var(--accent-gold-text); } .badge-accent { background: var(--accent-light); color: var(--accent-hover); } .badge-count { background: var(--bg-page); color: var(--text-secondary); } /* ======================== LIBRARY TABS BAR (horizontal, beneath navbar) ======================== */ .library-tabs-bar { background: transparent; padding: 0; position: sticky; /* top:0 (was a hardcoded 64px) — sticky's "top" is a floor the element won't scroll above, not a fixed offset from its natural flow position. At 64px, when the navbar collapses (body.navbar-hidden) this bar's natural position moves to ~1px, which is ABOVE that floor, so sticky held it pinned at 64px anyway — a 63px dead gap the navbar-collapse transition couldn't close no matter what. top:0 only pins it if the page ever scrolls above the very top, which is what "sticky" should mean here in the first place. */ top: 56px; z-index: var(--z-tabs-bar); transition: top 280ms ease, background-color var(--transition-base), border-color var(--transition-base); } body.navbar-hidden .library-tabs-bar { top: 0; } .library-tab-strip-container { background: var(--child-bar-bg, var(--bg-surface)); border-bottom: 1px solid var(--border); transition: background-color var(--transition-base), border-color var(--transition-base); } /* Direct child only. .search-filter-panel sits inside this same