/** * Scroll The Word — Base Styles * Design tokens, reset, typography, and reusable components. * ───────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ THEMES • Secondary (default) — cool blue on light grey, original palette • Primary — logo palette: coral-red accent, steel-blue primary, warm cream background Toggle by adding data-theme="primary" to . Persisted in localStorage. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Secondary theme (default) ───────────────────────────────────────────────── */ :root { /* Colors */ --color-bg: #f1f4f8; --color-surface: #ffffff; --color-surface-alt: #f8fafc; --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-primary: #26668d; --color-primary-hover: #1d4e6b; --color-primary-light: #c8dde9; --color-accent: #f84e44; /* coral-red — bookmarks, highlights */ --color-accent-fill: #fde8e7; --color-text: #0f172a; --color-text-2: #475569; --color-text-3: #94a3b8; --color-success: #16a34a; --color-warning: #f59e0b; --color-danger: #dc2626; /* Hero gradient (landing page) — semi-transparent so bg image shows through */ --color-hero-gradient: linear-gradient(160deg, rgba(163,197,241,0.85) 0%, rgba(241,244,248,0.8) 50%, rgba(254,236,199,0.85) 100%); /* Layout */ --menu-width: 250px; --featured-width: 320px; --feed-max-width: 620px; --header-height: 56px; --bottom-nav-height: 64px; /* Shape */ --radius: 6px; --radius-sm: 4px; --radius-xs: 2px; /* Shadow */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04); /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Typography */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; --font-verse: Georgia, "Times New Roman", Times, serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Search highlight */ --color-highlight: rgba(255, 210, 50, 0.35); /* Frosted glass header/location bar background */ --color-glass-bg: rgba(241, 244, 248, 0.95); /* Theme meta */ --theme-name: "Secondary"; --theme-toggle-label: "Switch to Primary Theme"; } /* ── Primary theme ──────────────────────────────────────────────────────────── Coral-red brand accent · Steel-blue primary · Warm cream surfaces */ [data-theme="primary"] { --color-bg: #f1f0e9; /* warm cream */ --color-surface: #faf9f4; /* lighter cream for cards */ --color-surface-alt: #ede9d8; /* slightly deeper cream for alt surfaces */ --color-border: #d6cfa8; /* warm tan border */ --color-border-strong: #b8ae80; /* darker tan */ --color-primary: #26668d; /* logo steel blue */ --color-primary-hover: #1d4e6b; /* darker blue on hover */ --color-primary-light: #c8dde9; /* light blue tint */ --color-accent: #f84e44; /* logo coral-red — accent/brand only */ --color-accent-fill: #fde8e7; /* light red tint */ /* Text kept dark for contrast on cream (≥ 7:1 on --color-bg) */ --color-text: #1a2a36; --color-text-2: #4a5a66; --color-text-3: #8a9aa6; --color-success: #2e7d4f; --color-warning: #d97706; --color-danger: #c0392b; /* Hero gradient */ --color-hero-gradient: linear-gradient(160deg, rgba(200,221,233,0.85) 0%, rgba(241,240,233,0.8) 50%, rgba(253,232,231,0.50) 100%); /* Logo "The" highlight uses accent in primary theme */ --color-logo-em: #f84e44; /* Search highlight */ --color-highlight: rgba(255, 200, 40, 0.35); /* Frosted glass header/location bar background */ --color-glass-bg: rgba(241, 240, 233, 0.95); /* Theme meta */ --theme-name: "Primary"; --theme-toggle-label: "Switch to Secondary Theme"; } /* ── Dark theme ──────────────────────────────────────────────────────────── Deep navy-slate background · soft blue primary · muted text */ [data-theme="dark"] { --color-bg: #0f1117; --color-surface: #1a1d27; --color-surface-alt: #21253a; --color-border: #2e3349; --color-border-strong: #404670; --color-primary: #5b8dee; --color-primary-hover: #7aaaf5; --color-primary-light: #1e2d4a; --color-accent: #f59e0b; --color-accent-fill: #2d2208; --color-text: #e8eaf0; --color-text-2: #9aa3b8; --color-text-3: #5a6278; --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; --color-hero-gradient: linear-gradient(160deg, rgba(26,29,39,0.88) 0%, rgba(15,17,23,0.85) 50%, rgba(30,45,74,0.88) 100%); /* Search highlight */ --color-highlight: rgba(91, 141, 238, 0.3); /* Frosted glass header/location bar background */ --color-glass-bg: rgba(15, 17, 23, 0.95); } /* In primary theme the logo accent word uses the red */ [data-theme="primary"] .logo-text em { color: var(--color-accent); } /* Smooth colour transitions when theme switches. Applied only to elements that actually carry colour tokens — avoids overriding animation/transform transitions on cards, spinner, etc. */ html, body, .left-menu, .content-feed, .featured-panel, .verse-card, .verse-card__body, .verse-card__reference, .nav-link, .btn, .select-input, .feed-header, .feed-location, .bottom-nav, .mobile-header, .user-card, .study-card, .theme-toggle-btn { transition-property: background-color, border-color, color; transition-duration: 0.3s; transition-timing-function: ease; } /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-ui); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Prevent body scroll when a menu is open (mobile) */ body.menu-open, body.featured-open { overflow: hidden; } /* ── Accessibility ───────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ensure the hidden attribute always wins over display rules in component CSS */ [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); } /* ── Typography ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; color: var(--color-text); } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Logo ───────────────────────────────────────────────────────────────────── */ .logo-text { font-size: var(--text-xl); font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; } .logo-text em { font-style: normal; color: var(--color-primary); } /* ── Avatar ─────────────────────────────────────────────────────────────────── */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-primary); color: #fff; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; user-select: none; } /* ── Buttons ─────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; transition: background-color var(--transition), transform var(--transition); } .btn:active { transform: scale(0.97); } .btn--primary { background-color: var(--color-primary); color: #fff; } .btn--primary:hover { background-color: var(--color-primary-hover); } .btn--ghost { background-color: transparent; color: var(--color-text-2); border: 1px solid var(--color-border); } .btn--ghost:hover { background-color: var(--color-surface-alt); } /* Attention-glow — pulsing highlight for buttons that need attention */ @keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 0 4px 1px var(--color-primary); } 50% { box-shadow: 0 0 12px 4px var(--color-primary); } } .btn--glow { animation: btn-glow-pulse 1.5s ease-in-out infinite; border-color: var(--color-primary); color: var(--color-primary); } .btn--sm { padding: 5px 12px; font-size: var(--text-xs); } /* ── Form controls ───────────────────────────────────────────────────────────── */ .select-input { appearance: none; padding: 6px 28px 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-2); background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; cursor: pointer; transition: border-color var(--transition); } .select-input:hover, .select-input:focus { border-color: var(--color-primary); outline: none; } /* ── Custom Translation Dropdown ─────────────────────────────────────────────── */ .translation-dropdown { position: relative; display: inline-block; } .translation-dropdown__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background-image: none; /* override select-input background arrow */ } .translation-dropdown__arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; } .translation-dropdown[aria-expanded="true"] .translation-dropdown__arrow { transform: rotate(180deg); } .translation-dropdown__menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; max-height: 320px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 100; } .translation-dropdown[aria-expanded="true"] .translation-dropdown__menu { display: block; } .translation-dropdown__item { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: var(--text-sm); color: var(--color-text-2); transition: background .1s; } .translation-dropdown__item:hover { background: var(--color-hover); } .translation-dropdown__item--selected { color: var(--color-primary); font-weight: 600; } .translation-dropdown__abbr { font-weight: 600; min-width: 32px; } .translation-dropdown__full { color: var(--color-text-3); font-size: var(--text-xs); } /* ── Spinner ─────────────────────────────────────────────────────────────────── */ .spinner { width: 28px; height: 28px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Overlay ─────────────────────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity var(--transition-slow), visibility var(--transition-slow); } .overlay.is-visible { opacity: 1; visibility: visible; } /* ── Shared dialog (replaces browser alert/confirm) ────────────────────────── */ .stw-dialog-overlay { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .stw-dialog-overlay.is-open { opacity: 1; pointer-events: auto; } .stw-dialog { position: relative; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e0e0e0); border-radius: 16px; padding: 32px 28px 28px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.18); transform: translateY(12px); transition: transform .2s ease; } .stw-dialog-overlay.is-open .stw-dialog { transform: translateY(0); } .stw-dialog__icon { width: 40px; height: 40px; margin-bottom: 12px; } .stw-dialog__icon--info { color: var(--color-primary); } .stw-dialog__icon--warning { color: #f59e0b; } .stw-dialog__icon--error { color: #ef4444; } .stw-dialog__icon--success { color: #22c55e; } .stw-dialog--wide { max-width: 480px; } @media (max-width: 600px) { .stw-dialog--fs-mobile { max-width: none; width: 100%; height: 100%; border-radius: 0; margin: 0; display: flex; flex-direction: column; } .stw-dialog--fs-mobile .stw-dialog__text { flex: 1; overflow-y: auto; padding: 4px 4px; margin: 0 -4px 16px; } .stw-dialog--fs-mobile .stw-event-form-scroll { max-height: none !important; } .stw-dialog-overlay:has(.stw-dialog--fs-mobile) { padding: 0; } } .stw-dialog__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-1); margin: 0 0 8px; } .stw-dialog__text { font-size: var(--text-sm); color: var(--color-text-2); line-height: 1.6; margin: 0 0 24px; } .stw-dialog__actions { display: flex; gap: 10px; justify-content: center; } .stw-dialog__btn { flex: 1; max-width: 180px; padding: 11px 20px; border-radius: 10px; font-size: var(--text-sm); font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: opacity .12s; box-sizing: border-box; border: none; } .stw-dialog__btn:hover { opacity: .85; } .stw-dialog__btn--primary { background: var(--color-primary); color: #fff; } .stw-dialog__btn--danger { background: #ef4444; color: #fff; } .stw-dialog__btn--cancel { background: transparent; color: var(--color-text-2); border: 1.5px solid var(--color-border); } .stw-dialog__close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--color-text-3); cursor: pointer; padding: 4px 8px; } .stw-dialog__close:hover { color: var(--color-text-1); }