/* ════════════════════════════════════════════════════════════════════════════════════════ Estilo Zion Presenter para el Diario bíblico Misma identidad que zionpresenter.com: fondo oscuro con aurora violeta/cian y cuadrícula, letra Inter, vidrio oscuro con borde fino, índigo de marca y botones sólidos. Es una capa: se carga después de todas las hojas de cada página y solo actúa con la clase zion-style en (la pone estilo-zion.js). No cambia HTML, datos del editor ni funciones: buscador, comparación, destacados, voz, examen y editor local siguen igual. Quitar el enlace a este archivo y a estilo-zion.js devuelve el diseño anterior. ════════════════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('fonts/Inter-ExtraBold.ttf') format('truetype'); } /* ── Tokens: la paleta de Zion sobre las variables que ya usan todas las páginas ──────────── */ html.zion-style, html.zion-style.dark { color-scheme: dark; --zion-violet: #b37cff; --zion-indigo: #7c83ff; --zion-cyan: #34d8f0; --zion-brand: #5b5ff0; --zion-brand-rgb: 91, 95, 240; --zion-brand-hover: #6a6ef5; --zion-grad: linear-gradient(115deg, #c38bff 0%, #8b8dff 42%, #3fd6f2 100%); --zion-surface: rgba(255, 255, 255, 0.035); --zion-surface-strong: rgba(14, 14, 24, 0.72); --zion-border: rgba(255, 255, 255, 0.09); --zion-border-strong: rgba(255, 255, 255, 0.18); --zion-text: #f4f4f8; --zion-text-soft: #d6d7e3; --zion-text-dim: #a4a6b8; --zion-ease: cubic-bezier(0.16, 1, 0.3, 1); --bg-color: #06060b; --bg-color-alt: rgba(255, 255, 255, 0.04); --text-main: #f4f4f8; --text-muted: #d6d7e3; --accent: #9b9eff; --accent-light: rgba(255, 255, 255, 0.06); --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #06060b !important; } /* ── Fondo: aurora + cuadrícula fijas (en : index.html ya usa body::before) ─────────── */ html.zion-style::before { content: ""; position: fixed; inset: -20vh -10vw auto -10vw; height: 95vh; z-index: -1; pointer-events: none; background: radial-gradient(40% 55% at 18% 30%, rgba(179, 124, 255, 0.2), transparent 70%), radial-gradient(38% 50% at 82% 25%, rgba(52, 216, 240, 0.14), transparent 70%), radial-gradient(30% 40% at 50% 0%, rgba(124, 131, 255, 0.18), transparent 70%); filter: blur(20px); } html.zion-style::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(85% 70% at 50% 12%, #000 20%, transparent 78%); mask-image: radial-gradient(85% 70% at 50% 12%, #000 20%, transparent 78%); } html.zion-style body, html.zion-style main, html.zion-style .hero, html.zion-style .testimony-section, html.zion-style body.study-ambient-page { background: transparent !important; background-color: transparent !important; } html.zion-style body { color: var(--zion-text); font-family: var(--font-body); letter-spacing: -0.011em; } html.zion-style ::selection { background: rgba(139, 141, 255, 0.45); color: #fff; } /* El cielo de estrellas y la portada de fondo dejan su lugar al fondo de Zion. */ html.zion-style .study-ambient-backdrop, html.zion-style .study-stars-veil, html.zion-style .study-stars-outro { display: none !important; } /* ── Encabezado flotante: la cápsula y el botón en vidrio de Zion ────────────────────────── */ html.zion-style #themeButton { display: none !important; } html.zion-style .header.mobile-header .mobile-menu-toggle, html.zion-style .header.mobile-header .logo { border: 1px solid rgba(255, 255, 255, 0.12) !important; background: linear-gradient(180deg, rgba(20, 20, 34, 0.72), rgba(11, 11, 20, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px -18px rgba(0, 0, 0, 0.9) !important; color: var(--zion-text) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.zion-style .header.mobile-header .logo { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; } html.zion-style .header.mobile-header .mobile-menu-toggle:hover, html.zion-style .header.mobile-header .logo:hover { border-color: rgba(var(--zion-brand-rgb), 0.55) !important; } html.zion-style .header.mobile-header .mobile-menu-toggle:focus-visible { outline: 2px solid rgba(var(--zion-brand-rgb), 0.8); } html.zion-style .header.mobile-header .mobile-menu-toggle::before { filter: drop-shadow(0 0 0.45rem rgba(139, 141, 255, 0.45)); } html.zion-style .header.mobile-header .nav-links { padding: 6px; border: 1px solid transparent !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(18, 18, 32, 0.97), rgba(10, 10, 18, 0.98)) padding-box, var(--zion-grad) border-box !important; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 20px 60px -34px rgba(91, 95, 240, 0.6) !important; } html.zion-style .header.mobile-header .nav-links a { padding: 11px 14px; border-radius: 12px; color: var(--zion-text-soft) !important; font-family: var(--font-body); font-size: 14px; font-weight: 500; } html.zion-style .header.mobile-header .nav-links a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; } html.zion-style .header.mobile-header .nav-links a.active { background: var(--zion-brand); color: #fff !important; } /* ── Portadas: insignia, título con degradado de la marca y regreso ──────────────────────── */ html.zion-style .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.04) !important; color: var(--zion-text-soft) !important; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.zion-style .badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--zion-grad); box-shadow: 0 0 10px rgba(139, 141, 255, 0.8); } html.zion-style .hero-title { color: #fff !important; font-family: var(--font-heading); font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.04 !important; text-shadow: none !important; } html.zion-style .hero-title .highlight, html.zion-style .highlight-gradient { background: var(--zion-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* Entrada del estudio (el párrafo bajo el título) */ html.zion-style .study-kicker { color: var(--zion-text-dim) !important; text-shadow: none !important; } html.zion-style .back-link { color: var(--zion-text-dim) !important; font-weight: 500; text-shadow: none !important; transition: color 150ms ease; } html.zion-style .back-link:hover { color: #fff !important; opacity: 1; } /* ── Enlaces y botones ───────────────────────────────────────────────────────────────────── */ html.zion-style .testimony-content a:not([class]), html.zion-style .editor-text-wrapper a { color: #b4b6ff; text-decoration: underline; text-decoration-color: rgba(180, 182, 255, 0.35); text-underline-offset: 3px; } html.zion-style .testimony-content a:not([class]):hover, html.zion-style .editor-text-wrapper a:hover { color: #fff; text-decoration-color: currentColor; } /* ── Paneles de los estudios: vidrio oscuro con borde fino ───────────────────────────────── */ html.zion-style body.study-ambient-page { --study-panel-fill: rgba(14, 14, 24, 0.62); --study-panel-border: rgba(255, 255, 255, 0.09); } html.zion-style .testimony-content :is(.study-text-block, .text-block) { border-left-color: rgba(var(--zion-brand-rgb), 0.75) !important; border-radius: 18px !important; color: var(--zion-text-soft) !important; } html.zion-style .testimony-content :is( .study-meta, .study-heading-block, .lead-box, .principle-box, .verse-block, .note-box, .warning-box, .opinion-box, .doctrine-card, .reality-card, .truth-map, .truth-point, .history-map, .timeline-step, .evidence-card, .final-summary, .highlight-box, .quote-block, .intro-card, .law-card, .comparison-card, .definition-card, .letter-card, .contrast-card ) { border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html.zion-style .testimony-content :is(.study-text-block, .text-block, .lead-box, .note-box, .principle-box, .final-summary) p { color: var(--zion-text-soft); line-height: 1.7; } /* Títulos de sección dentro del estudio */ html.zion-style .testimony-content .section-label, html.zion-style .testimony-content .standalone-section-heading { color: #fff !important; font-family: var(--font-heading); font-weight: 700 !important; letter-spacing: -0.02em !important; } /* Citas bíblicas */ html.zion-style .testimony-content .verse-block { border-left: 3px solid transparent !important; border-image: var(--zion-grad) 1 !important; border-image-slice: 0 0 0 1 !important; } html.zion-style .testimony-content .verse-version { color: var(--zion-text-dim) !important; font-weight: 600; letter-spacing: 0.02em; } /* Datos del estudio (fecha, tema, enfoque) */ html.zion-style .testimony-content .meta-item :is(span, small, .meta-label):first-child { color: #b4b6ff !important; letter-spacing: 0.12em; } /* Cierre: el marco con el degradado de la marca, como las ventanas de Zion */ html.zion-style .testimony-content .final-summary { border: 1px solid transparent !important; background: linear-gradient(180deg, rgba(18, 18, 32, 0.92), rgba(10, 10, 18, 0.94)) padding-box, var(--zion-grad) border-box !important; } /* ── Índice de investigaciones: tarjetas ─────────────────────────────────────────────────── */ html.zion-style .topic-card { border: 1px solid var(--zion-border) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(20, 20, 34, 0.7), rgba(11, 11, 20, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -40px rgba(0, 0, 0, 0.9) !important; transition: border-color 200ms ease, box-shadow 200ms ease !important; } html.zion-style .topic-card:hover { border-color: rgba(var(--zion-brand-rgb), 0.55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -36px rgba(91, 95, 240, 0.55) !important; transform: none !important; } html.zion-style .topic-title { color: #fff !important; font-family: var(--font-heading); font-weight: 700 !important; letter-spacing: -0.02em !important; } html.zion-style .topic-date, html.zion-style .topic-number { color: #b4b6ff !important; font-weight: 600; letter-spacing: 0.1em; } html.zion-style .topic-desc { color: var(--zion-text-dim) !important; } html.zion-style .topic-arrow { color: #b4b6ff !important; font-weight: 600; } /* ── Lector bíblico (index.html) ─────────────────────────────────────────────────────────── */ /* El texto de los versículos conserva su letra de lectura; la interfaz toma la de Zion. */ html.zion-style body.bible-ambient-page { --reader-accent: #9b9eff; --reader-accent-soft: rgba(var(--zion-brand-rgb), 0.18); --reader-line: rgba(255, 255, 255, 0.1); --reader-card: rgba(255, 255, 255, 0.05); } html.zion-style .reader-controls { border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(20, 20, 34, 0.74), rgba(11, 11, 20, 0.86)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -40px rgba(0, 0, 0, 0.9) !important; } html.zion-style :is(.reader-controls, .mobile-reader-panel, .all-versions-dialog, .verse-actions, .mobile-number-picker) :is(button, input, select, textarea) { font-family: var(--font-body); } html.zion-style :is(.reader-controls, .mobile-reader-panel) :is(.scripture-input, .scripture-select) { border: 1px solid rgba(255, 255, 255, 0.1) !important; background-color: rgba(0, 0, 0, 0.28) !important; color: #fff !important; transition: border-color 150ms ease, box-shadow 150ms ease; } html.zion-style :is(.reader-controls, .mobile-reader-panel) :is(.scripture-input, .scripture-select):hover { border-color: rgba(255, 255, 255, 0.2) !important; } html.zion-style :is(.reader-controls, .mobile-reader-panel) :is(.scripture-input, .scripture-select):focus, html.zion-style :is(.reader-controls, .mobile-reader-panel) :is(.scripture-input, .scripture-select):focus-visible { border-color: rgba(var(--zion-brand-rgb), 0.8) !important; box-shadow: 0 0 0 3px rgba(var(--zion-brand-rgb), 0.22) !important; outline: none !important; } html.zion-style .search-submit-button { border: 1px solid transparent !important; background: var(--zion-brand) !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(var(--zion-brand-rgb), 0.9) !important; font-weight: 700; } html.zion-style .search-submit-button:hover { background: var(--zion-brand-hover) !important; } html.zion-style .search-clear-button { border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--zion-text-soft) !important; } html.zion-style .search-scope-label, html.zion-style .setting-field > label, html.zion-style .toggle-row > span { color: var(--zion-text-dim) !important; } html.zion-style .search-scope button { border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--zion-text-soft) !important; font-weight: 600; } html.zion-style .search-scope button:hover { border-color: rgba(var(--zion-brand-rgb), 0.5) !important; color: #fff !important; } html.zion-style .search-scope button[aria-pressed="true"], html.zion-style .search-scope button.active { border-color: var(--zion-brand) !important; background: var(--zion-brand) !important; color: #fff !important; } html.zion-style .toggle-control[aria-pressed="true"], html.zion-style .toggle-control[aria-checked="true"] { background: var(--zion-brand) !important; } html.zion-style .plain-button, html.zion-style .reader-listen { border-color: rgba(255, 255, 255, 0.12) !important; color: var(--zion-text-soft) !important; } html.zion-style .plain-button:hover, html.zion-style .reader-listen:hover { border-color: rgba(var(--zion-brand-rgb), 0.55) !important; color: #fff !important; } html.zion-style .passage-kicker { color: #b4b6ff !important; letter-spacing: 0.14em; } html.zion-style .verse-number { color: #9b9eff !important; } /* Ventanas del lector (versículo, todas las versiones): marco con el degradado de la marca */ html.zion-style :is(.verse-actions, .all-versions-dialog) { border: 1px solid transparent !important; background: linear-gradient(180deg, rgba(18, 18, 32, 0.97), rgba(10, 10, 18, 0.98)) padding-box, var(--zion-grad) border-box !important; box-shadow: 0 50px 120px -40px rgba(91, 95, 240, 0.55), 0 30px 80px -20px rgba(0, 0, 0, 0.9) !important; } html.zion-style :is(.verse-actions, .all-versions-dialog)::backdrop { background: rgba(4, 4, 10, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.zion-style .verse-actions__eyebrow, html.zion-style .verse-actions__studies-label { color: #b4b6ff !important; } html.zion-style .verse-actions__note-save { border-color: transparent !important; background: var(--zion-brand) !important; color: #fff !important; } /* Barra flotante y paneles del lector en el celular */ html.zion-style :is(.mobile-reader-float, .mobile-reader-panel-shell, .mobile-number-picker-sheet) { border: 1px solid rgba(255, 255, 255, 0.12) !important; background: linear-gradient(180deg, rgba(20, 20, 34, 0.86), rgba(11, 11, 20, 0.92)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.95) !important; } /* Carga del lector: la cápsula con el degradado de la marca */ html.zion-style .bible-loader { background: transparent !important; } html.zion-style .bible-loader-capsule { border-color: rgba(255, 255, 255, 0.12) !important; background: linear-gradient(180deg, rgba(20, 20, 34, 0.72), rgba(11, 11, 20, 0.82)) !important; box-shadow: 0 0 38px rgba(91, 95, 240, 0.18), 0 8px 24px rgba(0, 0, 0, 0.3) !important; } html.zion-style .bible-loader-track::after { background: var(--zion-grad) !important; box-shadow: 0 0 12px rgba(139, 141, 255, 0.7) !important; } html.zion-style .bible-loader span { color: var(--zion-text-dim) !important; font-family: var(--font-body); } /* ── Botones y buscadores de Destacados, Interlineal e Investigaciones ───────────────────── */ html.zion-style :is(.highlights-primary-link, .highlights-skip, .interlinear-page .search-button, #searchButton.search-button, #loadVersionsButton) { border: 1px solid transparent !important; background: var(--zion-brand) !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(var(--zion-brand-rgb), 0.9) !important; font-family: var(--font-body); font-weight: 700; } html.zion-style :is(.highlights-primary-link, .interlinear-page .search-button, #searchButton.search-button, #loadVersionsButton):hover { background: var(--zion-brand-hover) !important; opacity: 1 !important; } html.zion-style .highlights-empty-symbol { border-color: rgba(var(--zion-brand-rgb), 0.45) !important; background: rgba(var(--zion-brand-rgb), 0.14) !important; color: #c7c8ff !important; } html.zion-style .highlights-text-button { color: #b4b6ff !important; } html.zion-style :is(#clearSearchButton.plain-button, .nav-button) { border: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.05) !important; color: var(--zion-text-soft) !important; font-family: var(--font-body); } html.zion-style :is(#clearSearchButton.plain-button, .nav-button):hover { border-color: rgba(var(--zion-brand-rgb), 0.55) !important; color: #fff !important; } html.zion-style :is(.topics-search, .topics-sort) { border: 1px solid rgba(255, 255, 255, 0.1) !important; background-color: rgba(0, 0, 0, 0.28) !important; color: #fff !important; font-family: var(--font-body); } html.zion-style :is(.topics-search, .topics-sort):focus { border-color: rgba(var(--zion-brand-rgb), 0.8) !important; box-shadow: 0 0 0 3px rgba(var(--zion-brand-rgb), 0.22) !important; outline: none !important; } /* ── Pie de página ───────────────────────────────────────────────────────────────────────── */ html.zion-style .footer { border-top: 1px solid var(--zion-border); background: rgba(6, 6, 11, 0.6) !important; color: var(--zion-text-dim) !important; } @media (prefers-reduced-motion: reduce) { html.zion-style .topic-card { transition: none !important; } } /* ── Encabezado de la enseñanza: título, subtítulo y entrada ────────────────────────────── */ /* El subtítulo (heroHighlight) deja de competir con el título: baja de tamaño, va en su propia línea y lo anuncia una raya corta con el degradado de la marca. */ html.zion-style .hero-content { max-width: 920px; margin-inline: auto; } html.zion-style .hero-title { max-width: 18ch; margin: 1.1rem auto 0 !important; font-size: clamp(2.15rem, 4.7vw, 3.7rem) !important; line-height: 1.06 !important; text-wrap: balance; } html.zion-style .hero-title br { display: none; } html.zion-style .hero-title .highlight { display: block; max-width: 30ch; margin: 1.05rem auto 0; font-size: clamp(1.08rem, 2.1vw, 1.45rem); font-weight: 600 !important; letter-spacing: -0.012em !important; line-height: 1.35; text-wrap: balance; } html.zion-style .hero-title .highlight::before { content: ""; display: block; width: 44px; height: 3px; margin: 0 auto 1rem; border-radius: 3px; background: var(--zion-grad); box-shadow: 0 0 14px rgba(139, 141, 255, 0.55); } html.zion-style .study-kicker { max-width: 58ch !important; margin: 1.6rem auto 0 !important; font-size: clamp(0.98rem, 1.4vw, 1.08rem) !important; line-height: 1.7 !important; text-wrap: pretty; } /* La serie y el número viajan en la etiqueta de arriba (lo arma estilo-zion.js). */ html.zion-style .badge .badge-serie { color: #fff; } html.zion-style .badge .badge-punto { opacity: 0.5; margin: 0 0.45em; } @media (max-width: 640px) { html.zion-style .hero-title { max-width: 14ch; } html.zion-style .hero-title .highlight { max-width: 24ch; } }