/* ========================================================================== WORD OF WISDOM — MASTER STYLESHEET ========================================================================== This stylesheet consolidates four previously separate CSS files into a single, organized document. The original files were: 1. base.css — Reset, variables, typography, layout structure 2. effects.css — Glassmorphism, animations, interactive states 3. theme-dark.css — Dark mode color overrides 4. select.css — Custom dropdown select component ========================================================================== TABLE OF CONTENTS ========================================================================== PART I: FOUNDATION §1.0 Reset & Box Model §1.1 CSS Custom Properties (Variables) §1.1.1 Colors §1.1.2 Typography §1.1.3 Spacing & Layout §1.1.4 Borders & Radii §1.1.5 Shadows §1.1.6 Gradients (Glassmorphism) §1.2 Base Typography §1.2.1 UI Text Classes §1.2.2 Headings §1.2.3 Horizontal Rules PART II: LAYOUT §2.0 Three-Panel Grid §2.1 Panel Base Styles §2.2 Panel Scrollbars PART III: COMPONENTS §3.0 Settings Panel Components §3.0.1 Logo §3.0.2 Font Size Control §3.0.3 Book/Chapter Selection Row §3.0.4 Translation Metadata §3.0.5 Credits §3.1 Bible Text Panel Components §3.1.1 Chapter Header §3.1.2 Verses §3.2 Commentary Panel Components §3.2.1 Verse Context Display §3.2.2 Filter Cockpit §3.2.3 Commentary Cards §3.2.4 Placeholder State §3.3 Form Elements §3.3.1 Native Select §3.3.2 Buttons (Base, Size, Navigation) PART IV: THEMES §4.0 Dark Mode Overrides ========================================================================== */ /* ************************************************************************** ************************************************************************** PART I: FOUNDATION Core resets, design tokens (CSS variables), and base typography that establish the visual foundation of the application. ************************************************************************** ************************************************************************** */ /* ========================================================================== §1.0 RESET & BOX MODEL ========================================================================== Minimal reset ensuring consistent box-sizing across all elements. Additional resets (margins, padding) are handled per-element as needed. ========================================================================== */ /* +++ INTER (load blocking — used for all UI elements) +++ */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; src: local("Inter"), url("assets/fonts/Inter/InterVariable.woff2") format("woff2"), url("assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: italic; font-display: swap; src: local("Inter"), url("assets/fonts/Inter/InterVariable-Italic.woff2") format("woff2"), url("assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"); } /* +++ IBARRA REAL NOVA (default font — load blocking) +++ */ @font-face { font-family: "IbarraRealNova"; font-style: normal; font-display: swap; src: local("Ibarra Real Nova"), url("assets/fonts/Ibarra_Real_Nova/IbarraRealNova-VariableFont_wght.woff2") format("woff2"), url("assets/fonts/Ibarra_Real_Nova/IbarraRealNova-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: "IbarraRealNova"; font-style: italic; font-display: swap; src: local("Ibarra Real Nova"), url("assets/fonts/Ibarra_Real_Nova/IbarraRealNova-Italic-VariableFont_wght.woff2") format("woff2"), url("assets/fonts/Ibarra_Real_Nova/IbarraRealNova-Italic-VariableFont_wght.ttf") format("truetype"); } * { box-sizing: border-box; } /* ========================================================================== §1.1 CSS CUSTOM PROPERTIES (VARIABLES) ========================================================================== Design tokens for the entire application. Modify these values to update the visual appearance globally. Dark mode overrides are in PART V. ========================================================================== */ :root { /* ---------------------------------------------------------------------- §1.1.1 Colors ---------------------------------------------------------------------- */ /* Text Colors */ --color-text-primary: rgb(5,3,21); --color-text-secondary: rgb(134,130,146); /* Background Colors (light to dark gradient) */ --color-bg-light: rgb(251,250,254); /* Settings panel */ --color-bg-medium: rgb(246,245,249); /* Bible text panel */ --color-bg-dark: rgb(239,238,242); /* Commentary panel */ /* Accent Colors */ --color-accent: rgb(135, 80, 255); --color-accent-light: rgb(240, 220, 255); /* Borders & Dividers */ --color-border: rgb(231, 230, 234); /* Logo */ --logo-url: url('assets/logo.png'); /* ---------------------------------------------------------------------- §1.1.2 Typography ---------------------------------------------------------------------- */ --font-serif: 'IbarraRealNova', serif; --font-sans: 'Inter', sans-serif; --font-size-base: 1.2rem; --font-size-small: 0.8rem; /* ---------------------------------------------------------------------- §1.1.3 Spacing & Layout ---------------------------------------------------------------------- */ --spacing-xs: 5px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 30px; --spacing-xl: 40px; /* ---------------------------------------------------------------------- §1.1.4 Borders & Radii ---------------------------------------------------------------------- */ --border-radius: 5px; --border-width: 1px; /* ---------------------------------------------------------------------- §1.1.5 Shadows Four shadow levels for depth hierarchy: - S (small): Subtle elevation for buttons, inputs - M (medium): Hover states, moderate lift - L (large): Dropdowns, modals, significant elevation - IN (inset): Pressed/active states ---------------------------------------------------------------------- */ --shadow-s: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-m: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-l: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.1); --shadow-in: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); /* Toggle handle: lateral shadow indicating elevation above adjacent content */ --shadow-toggle-handle: 3px 0 8px rgba(0, 0, 0, 0.12), 1px 0 3px rgba(0, 0, 0, 0.08); /* ---------------------------------------------------------------------- §1.1.6 Gradients (Glassmorphism) - Neutral: White overlays for standard UI (cards, unselected items) - Accent: Overlays specifically tuned for Purple/Brand backgrounds Usage: background-image: var(--grad-neutral-hover); ---------------------------------------------------------------------- */ /* --- Neutral UI Gradients (Gray/White Buttons & Cards) --- */ --grad-neutral-normal: linear-gradient( to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.00) ); --grad-neutral-hover: linear-gradient( to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) ); --grad-neutral-active: linear-gradient( to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00) ); --grad-neutral-selected: linear-gradient( to bottom, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.10) ); /* --- Accent UI Gradients (Purple Buttons & Selected Verses) --- */ /* Tuned to be slightly more subtle so they don't wash out the purple */ --grad-accent-normal: linear-gradient( to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.00) ); --grad-accent-hover: linear-gradient( to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) ); --grad-accent-active: linear-gradient( to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00) ); --grad-accent-selected: linear-gradient( to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.0) ); /* --- Animations --- */ /* Used for the 'swipe' effect on selection */ --grad-shimmer: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.5), transparent ); --shimmer-opacity-peak: 0.33; } /* ========================================================================== §1.2 BASE TYPOGRAPHY ========================================================================== Foundational text styles. The application uses two font stacks: - Serif (Ibarra Real Nova): Scripture text, headings, body content - Sans-serif (Inter): UI elements, labels, metadata ========================================================================== */ /* ---------------------------------------------------------------------- §1.2.1 UI Text Classes Utility classes for consistent UI text styling throughout the app. ---------------------------------------------------------------------- */ .text-ui { font-family: var(--font-sans); font-size: var(--font-size-small); color: var(--color-text-primary); } .text-ui-muted { font-family: var(--font-sans); font-size: var(--font-size-small); color: var(--color-text-secondary); } /* ---------------------------------------------------------------------- §1.2.2 Headings H1: Primary chapter/book titles (large, centered, small-caps) H2: Section subtitles (muted, centered) H3/H4: Panel section headers (uppercase, left-aligned) ---------------------------------------------------------------------- */ h1 { font-family: var(--font-serif); font-size: calc(var(--font-size-base) * 3); font-weight: 400; font-variant: small-caps; letter-spacing: 1px; line-height: 1.0; color: var(--color-text-primary); text-align: center; margin: 0 0 var(--spacing-xs) 0; text-wrap: balance; } h2 { font-family: var(--font-serif); font-size: var(--font-size-base); font-weight: 400; font-variant: small-caps; letter-spacing: 1px; color: var(--color-text-secondary); text-align: center; margin: var(--spacing-lg) 0 0 0; } h3, h4 { font-family: var(--font-sans); font-size: var(--font-size-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--color-text-secondary); text-align: left; margin: var(--spacing-sm) 0; } /* ---------------------------------------------------------------------- §1.2.3 Horizontal Rules ---------------------------------------------------------------------- */ hr { border: none; height: 1px; background-color: var(--color-text-secondary); width: 100%; margin: var(--spacing-md) auto; } /* ************************************************************************** ************************************************************************** PART II: LAYOUT The application uses a three-panel grid layout: - Left: Settings panel (fixed width) - Center: Bible text panel (flexible) - Right: Commentary panel (flexible) ************************************************************************** ************************************************************************** */ /* ========================================================================== §2.0 THREE-PANEL GRID ========================================================================== The main application container. Uses CSS Grid for the three-column layout with full viewport height and hidden overflow (panels scroll independently). ========================================================================== */ .app-layout { display: grid; grid-template-columns: auto var(--bible-width, 1fr) 6px var(--commentary-width, 1fr); height: 100vh; overflow: hidden; } /* ========================================================================== §2.1 PANEL BASE STYLES ========================================================================== Each panel has: - Independent vertical scrolling - Distinct background color for visual separation - Appropriate padding for content - Border separators where panels meet ========================================================================== */ .bibletext-panel, .commentary-panel { overflow-y: auto; min-height: 0; /* allow grid items to shrink below content size so scroll kicks in */ } .settings-panel { position: relative; /* anchor for any in-flow children */ overflow: hidden; /* clip content; handle is position:fixed so it escapes regardless */ min-height: 0; background-color: var(--color-bg-light); border-right: var(--border-width) solid var(--color-border); width: 15rem; } .settings-content { height: 100%; overflow-y: auto; overflow-x: hidden; padding: var(--spacing-sm); } /* Edge tab — fixed to the viewport so it's always vertically centred */ .settings-toggle-handle { position: fixed; left: 15rem; /* tracks the expanded panel width */ top: 50vh; transform: translateY(-50%); width: 0.75rem; /* thin at rest — hint only, no chevron */ height: 33vh; z-index: 100; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border); border-left: none; /* flush left — sits against the panel border */ border-radius: 0 8px 8px 0; box-shadow: var(--shadow-toggle-handle); cursor: pointer; } .settings-collapse-btn { flex-shrink: 0; /* prevent squishing inside narrow handle */ width: 1.5rem; /* fixed so it doesn't reflow as handle expands */ height: 100%; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--font-size-small); font-weight: 800; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; opacity: 0; } .settings-panel.collapsed { width: 0; border-right-width: 0; } .settings-panel.collapsed .settings-content { display: none; } /* Collapsed: always full-width handle with chevron — signals hidden content */ .settings-panel.collapsed .settings-toggle-handle { left: 0; width: 1.5rem; } .settings-panel.collapsed .settings-collapse-btn { opacity: 1; } /* Responsive: Narrow the settings panel on smaller screens */ @media (max-width: 1080px) { .settings-panel:not(.collapsed) { width: 12.5rem; } .settings-toggle-handle { left: 12.5rem; } } .bibletext-panel { background-color: var(--color-bg-medium); padding: var(--spacing-xl); } .commentary-panel { background-color: var(--color-bg-dark); padding: var(--spacing-lg); border-left: var(--border-width) solid var(--color-border); } .panel-resizer { background-color: var(--color-bg-dark); border-left: var(--border-width) solid var(--color-border); cursor: col-resize; z-index: 10; } /* ************************************************************************** ************************************************************************** PART III: COMPONENTS Individual UI components organized by the panel they appear in, followed by shared form elements and the custom select dropdown. ************************************************************************** ************************************************************************** */ /* ========================================================================== §3.0 SETTINGS PANEL COMPONENTS ========================================================================== */ /* ---------------------------------------------------------------------- §3.0.1 Logo ---------------------------------------------------------------------- */ .app-logo { width: 100%; height: auto; margin-bottom: var(--spacing-md); padding: var(--spacing-xs); content: var(--logo-url); } /* ---------------------------------------------------------------------- §3.0.2 Font Size Control Horizontal layout with label, current size display, and +/- buttons. ---------------------------------------------------------------------- */ .font-control-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 15px 0; } #font-size-display { font-family: var(--font-sans); font-size: var(--font-size-small); font-weight: bold; color: var(--color-text-primary); } /* ---------------------------------------------------------------------- §3.0.3 Book/Chapter Selection Row Flex container for book picker (wider) and chapter picker (narrower). ---------------------------------------------------------------------- */ .selection-row { display: flex; flex-direction: row; gap: var(--spacing-sm); width: 100%; margin-bottom: var(--spacing-sm); } #book-picker { flex: 3 1; margin: 0; min-width: 0; } #chapter-picker { flex: 1 1; margin: 0; min-width: 0; } /* ---------------------------------------------------------------------- §3.0.4 Translation Metadata Information box displaying details about the selected translation. ---------------------------------------------------------------------- */ .meta-info-wrapper { background: var(--color-bg-dark); border-radius: var(--border-radius); padding: var(--spacing-sm); margin-top: var(--spacing-sm); } .meta-section-table { font-family: var(--font-sans); font-size: var(--font-size-small); color: var(--color-text-primary); } .meta-section-table strong { font-weight: 700; } .meta-section-description { font-family: var(--font-sans); font-size: var(--font-size-small); color: var(--color-text-secondary); margin-top: var(--spacing-sm); } /* ---------------------------------------------------------------------- §3.0.5 Credits ---------------------------------------------------------------------- */ .credits { font-family: var(--font-sans); font-size: var(--font-size-small); color: var(--color-text-secondary); } .credits a { color: inherit; text-decoration: none; } /* ========================================================================== §3.1 BIBLE TEXT PANEL COMPONENTS ========================================================================== */ /* ---------------------------------------------------------------------- §3.1.1 Chapter Header Displays the book name and chapter number at the top of the text panel. ---------------------------------------------------------------------- */ .chapter-header { text-align: center; margin: var(--spacing-lg) 0; } .book-supertitle, .book-subtitle { font-family: var(--font-serif); font-size: calc(var(--font-size-base) * 1.618); font-weight: 400; line-height: 1.2; color: var(--color-text-primary); margin: 0; text-wrap: balance; } .book-supertitle { margin-bottom: var(--spacing-xs); } /* ---------------------------------------------------------------------- §3.1.2 Verses Individual verse containers. Each verse is clickable and has hover and selected states (interactive styles defined in PART IV). Structure: - .verse: Container - .verse strong: Verse number (superscript style) - .verse.selected: Currently selected verse ---------------------------------------------------------------------- */ .verse { font-family: var(--font-serif); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); padding: var(--spacing-sm); margin-bottom: -20px; border-radius: var(--border-radius); position: relative; overflow: hidden; text-wrap: pretty; } .verse strong { font-family: var(--font-sans); font-size: var(--font-size-small); font-weight: 800; color: var(--color-text-secondary); vertical-align: top; margin-right: 4px; } .verse.selected { border-left: 3px solid var(--color-accent); margin-right: -3px; } .chapter-superscription { font-family: var(--font-serif); font-size: calc(var(--font-size-base)); line-height: 1.55; color: var(--color-text-secondary); padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) calc(var(--spacing-sm) + 1rem); margin-bottom: -16px; pointer-events: none; text-wrap: pretty; } .chapter-superscription b { font-style: normal; font-weight: 700; } /* ========================================================================== §3.2 COMMENTARY PANEL COMPONENTS ========================================================================== */ /* ---------------------------------------------------------------------- §3.2.1 Verse Context Display Shows which verse is currently selected at the top of the panel. ---------------------------------------------------------------------- */ #verse-context { font-family: var(--font-sans); font-size: var(--font-size-small)*1.5; color: var(--color-text-primary); margin-bottom: var(--spacing-sm); } /* ---------------------------------------------------------------------- §3.2.2 Filter Cockpit Row of filter dropdowns for narrowing commentary results. ---------------------------------------------------------------------- */ #filter-cockpit { display: flex; gap: var(--spacing-sm); width: 100%; margin-bottom: var(--spacing-sm); } #filter-cockpit .custom-select { min-width: 0; flex: 1 1 0; } #filter-cockpit .custom-select-trigger { min-width: 0; } /* ---------------------------------------------------------------------- §3.2.3 Commentary Cards Individual commentary entries with author, work title, text, and citation information. Structure: - .commentary-card: Container - .card-meta: Author and work title - .commentary-text: The actual commentary content - .citation-footnote: Reference information ---------------------------------------------------------------------- */ .commentary-card { margin-bottom: var(--spacing-md); } .commentary-card:first-child { margin-top: var(--spacing-md); } .card-meta { font-family: var(--font-sans); font-size: var(--font-size-small); line-height: 1.4; margin-bottom: 0; } .source-author { font-family: var(--font-sans); font-weight: 700; color: var(--color-text-primary); } .source-work { font-family: var(--font-sans); font-weight: 400; color: var(--color-text-primary); } .commentary-text { font-family: var(--font-serif); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); margin: var(--spacing-sm) 0 0 0; text-wrap: pretty; } .citation-footnote { font-family: var(--font-sans); font-size: var(--font-size-small); line-height: 1.4; color: var(--color-text-secondary); margin-top: var(--spacing-sm); text-wrap: pretty; } /* Commentary text paragraph spacing */ .commentary-text p { margin-bottom: -10px; } .commentary-text p:last-child { margin-bottom: 0; } .commentary-text p.commentary-indent { text-indent: 2rem; } /* ---------------------------------------------------------------------- §3.2.4 Placeholder State Displayed when no verse is selected or no commentary is available. ---------------------------------------------------------------------- */ .commentary-placeholder { font-family: var(--font-sans); color: var(--color-text-secondary); margin-top: var(--spacing-md); } /* ========================================================================== §3.3 FORM ELEMENTS ========================================================================== Base styles for native form controls. The custom select dropdown is defined separately in §3.4. ========================================================================== */ /* ---------------------------------------------------------------------- §3.3.1 Native Select Fallback styling for native