/* ================================================================== */
/* START: Page-Specific Styles for Verse Page (v2) */
/* ================================================================== */
:root {
--vp-sidebar-width: 320px;
--vp-header-height: 65px; /* Matches global header height */
}
/* --- Layout & Utilities --- */
.vp-layout { display: flex; flex-direction: column; gap: var(--space-xl); width: 100%; max-width: 1200px; }
.vp-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xl); }
.vp-sidebar { flex-shrink: 0; width: 100%; }
.message-box--error { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background-color: color-mix(in srgb, var(--color-danger) 15%, transparent); border: 1px solid var(--color-danger); border-radius: var(--radius-md); color: var(--color-text); }
.message-box--error h2 { font-size: 1.2rem; margin: 0 0 var(--space-sm) 0; color: var(--color-text); }
.commentary-loading-spinner { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.commentary-loading-spinner::after { content: ''; width: 40px; height: 40px; border: 4px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* --- Verse Header & Navigation --- */
.vp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-lg); }
.vp-header-title { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.75rem); color: var(--color-text); margin: 0; text-align: center; flex-grow: 1; }
.vp-nav-button { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; transition: all var(--transition-base); flex-shrink: 0; }
.vp-nav-button:hover { border-color: var(--color-primary); background-color: var(--color-surface-hover); color: var(--color-primary); }
.vp-nav-button .nav-text-desktop { display: none; }
.vp-nav-button .nav-text-mobile { display: inline; }
/* --- Verse Display Card & Version Tabs --- */
.vp-verse-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.vp-version-tabs-container { padding: var(--space-sm); background-color: color-mix(in srgb, var(--color-surface) 50%, transparent); border-bottom: 1px solid var(--color-border); }
.vp-version-tabs { display: none; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none;}
.vp-version-tabs::-webkit-scrollbar { display: none; }
.vp-version-tab { padding: var(--space-sm) var(--space-md); font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; cursor: pointer; transition: all var(--transition-base); white-space: nowrap; }
.vp-version-tab:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.vp-version-tab.active { font-weight: 600; color: var(--color-primary); border-bottom-color: var(--color-primary); background-color: var(--color-surface); }
.vp-version-select-mobile { display: block; width: 100%; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background-color: var(--color-surface-solid); padding: 0 var(--space-md); font-size: 1rem; color: var(--color-text); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25em 1.25em; padding-right: 2.5rem; }
.dark-mode .vp-version-select-mobile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); }
/* --- Verse Text & Actions --- */
.vp-verse-panels-wrapper { position: relative; }
.vp-version-panel { display: none; }
.vp-version-panel.active { display: block; animation: fadeInPanel 0.4s ease; }
@keyframes fadeInPanel { from { opacity: 0; } to { opacity: 1; } }
.vp-panel-content { padding: var(--space-lg); }
.vp-verse-text { font-family: var(--font-serif); font-size: clamp(1.1rem, 4vw, 1.35rem); line-height: 1.8; margin: 0; }
.vp-verse-text sup { line-height: 0; /* Prevents superscript from affecting line height */ }
.vp-verse-text .vp-strongs-link { font-family: var(--font-sans); font-size: 0.8em; font-weight: 600; color: var(--color-primary); text-decoration: none; border-bottom: 1px dotted var(--color-primary); }
.vp-verse-actions { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-sm); }
.vp-action-button { width: 40px; height: 40px; color: var(--color-text-muted); font-size: 1rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: none; background-color: transparent; cursor: pointer; transition: all var(--transition-base); }
.vp-action-button:hover { background-color: var(--color-surface-hover); color: var(--color-text); }
.vp-action-button.active { color: var(--color-primary); background-color: color-mix(in srgb, var(--color-primary) 15%, transparent); }
/* --- Study Tools (Tabs & Panels) --- */
.vp-study-tools { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); overflow: hidden; }
.vp-study-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.vp-study-tab { flex: 1; padding: var(--space-md); text-align: center; background-color: color-mix(in srgb, var(--color-surface) 50%, transparent); border: none; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--color-text-muted); transition: all var(--transition-base); position: relative; }
.vp-study-tab:not(:last-child) { border-right: 1px solid var(--color-border); }
.vp-study-tab.active { background-color: var(--color-surface); color: var(--color-text); font-weight: 600; }
.vp-study-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background-color: var(--color-primary); }
.vp-study-panel { display: none; padding: var(--space-lg); }
.vp-study-panel.active { display: block; animation: fadeInPanel 0.4s ease; }
/* --- Commentary Presentation Styling --- */
.vp-commentary details { border-bottom: 1px solid var(--color-border); }
.vp-commentary details:last-of-type { border-bottom: none; }
.vp-commentary summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-sm); cursor: pointer; list-style: none; transition: background-color var(--transition-base); border-radius: var(--radius-md); }
.vp-commentary summary:hover { background-color: var(--color-surface-hover); }
.vp-commentary summary::-webkit-details-marker { display: none; }
.vp-commentary summary::after { content: '▾'; font-weight: bold; color: var(--color-text-muted); transition: transform 0.2s; margin-left: var(--space-sm); }
.vp-commentary details[open] > summary::after { transform: rotate(180deg); }
.vp-commentary h2, .vp-commentary h3, .vp-commentary h4 { margin: 0; padding: 0; border: none; font-family: var(--font-display); }
.vp-commentary .commentary-main-section--accordion > summary h2 { font-size: 1.5rem; color: var(--color-text); }
.vp-commentary .commentary-subsection summary h4 { font-size: 1.1rem; color: var(--color-text); font-weight: 600; }
.vp-commentary .details-content { padding: var(--space-sm) var(--space-sm) var(--space-md) var(--space-sm); }
.vp-commentary p, .vp-commentary li { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.8; margin-bottom: var(--space-md); }
.vp-commentary ul { list-style: disc; padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.vp-commentary a { color: var(--color-primary); }
.vp-commentary blockquote { border-left: 3px solid var(--color-primary); padding: var(--space-sm) var(--space-lg); margin: var(--space-md) 0; background-color: var(--color-surface-hover); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.commentary-subsection-group { margin-top: var(--space-md); margin-left: var(--space-md); padding-left: var(--space-md); border-left: 2px solid var(--color-border); }
.commentary-note { margin-top: var(--space-lg); padding: var(--space-md); font-size: 0.9rem; color: var(--color-text-muted); background-color: var(--color-surface-hover); border-radius: var(--radius-md); border-left: 3px solid var(--color-primary); line-height: 1.6; }
/* --- Cross-References --- */
.vp-cross-refs-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.vp-cross-ref-item { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-md); }
.vp-cross-ref-item:last-child { border-bottom: none; }
.vp-cross-ref-title a { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--color-primary); text-decoration: none; }
.vp-cross-ref-title a:hover { text-decoration: underline; }
.vp-cross-ref-text { margin-top: var(--space-sm); font-family: var(--font-serif); color: var(--color-text-muted); line-height: 1.7; }
.vp-card-empty { color: var(--color-text-muted); text-align: center; font-style: italic; padding: var(--space-xl) 0; }
/* --- Sidebar & Lookup Forms --- */
.vp-sidebar-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.vp-sidebar-card:not(:last-child) { margin-bottom: var(--space-xl); }
.vp-sidebar-title { font-size: 1.25rem; margin: 0 0 var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.vp-lookup-form .lookup-row { margin-bottom: var(--space-md); }
.vp-lookup-form .lookup-row-compact { display: flex; gap: var(--space-md); }
.vp-lookup-form .form-group { flex-grow: 1; }
.vp-lookup-form select { width: 100%; height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); background-color: var(--color-surface-solid); font-size: 1rem; color: var(--color-text); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25em 1.25em; padding-right: 2.5rem; }
.dark-mode .vp-lookup-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); }
.vp-lookup-form button { width: 100%; padding: var(--space-sm) var(--space-md); height: 44px; background-color: var(--color-primary); color: var(--color-primary-contrast); border: none; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: background-color var(--transition-base); }
.vp-lookup-form button:hover { background-color: var(--color-primary-hover); }
.desktop-lookup-card { display: none; }
.related-articles-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.related-article-link { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: background-color var(--transition-base); }
.related-article-link:hover { background-color: var(--color-surface-hover); color: var(--color-primary); }
/* --- Mobile Lookup Modal --- */
#mobile-verse-lookup-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm); height: 44px; background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-weight: 500; cursor: pointer; }
.vp-lookup-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s linear; }
.vp-lookup-modal.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.vp-lookup-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 0%, 0%, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.vp-lookup-modal-content { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 400px; transform: translateY(20px); transition: transform 0.3s ease; }
.vp-lookup-modal.is-visible .vp-lookup-modal-content { transform: translateY(0); }
.vp-lookup-modal-close { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 32px; height: 32px; font-size: 1.5rem; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; z-index: 2; }
/* --- Strongs Tooltip --- */
#vp-strongs-tooltip { position: absolute; z-index: 1100; background-color: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 30px hsla(0,0%,0%,0.15); padding: var(--space-md); max-width: 350px; font-size: 0.9rem; line-height: 1.5; }
#vp-strongs-tooltip-close { position: absolute; top: 4px; right: 8px; font-size: 1.5rem; background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0; line-height: 1; }
#vp-strongs-tooltip-close:hover { color: var(--color-text); }
#vp-strongs-tooltip-content h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-sm); color: var(--color-text); }
#vp-strongs-tooltip-content p { font-family: var(--font-sans); margin-bottom: var(--space-xs); }
#vp-strongs-tooltip-content strong { color: var(--color-text); }
#vp-strongs-tooltip-content a.button { display: inline-block; margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background-color: var(--color-primary); color: var(--color-primary-contrast); text-decoration: none; border-radius: var(--radius-md); font-size: 0.8rem; }
#vp-strongs-tooltip-content a.button:hover { background-color: var(--color-primary-hover); }
/* --- Responsive Design --- */
@media (min-width: 768px) {
#mobile-verse-lookup-btn { display: none; }
.desktop-lookup-card { display: block; }
.vp-version-tabs { display: flex; }
.vp-version-select-mobile { display: none; }
.vp-nav-button .nav-text-desktop { display: inline; }
.vp-nav-button .nav-text-mobile { display: none; }
}
@media (min-width: 992px) {
.vp-layout { display: grid; grid-template-columns: 1fr var(--vp-sidebar-width); grid-template-areas: "content sidebar"; gap: var(--space-xl); align-items: flex-start; }
.vp-content { grid-area: content; }
.vp-sidebar { grid-area: sidebar; position: sticky; top: calc(var(--vp-header-height) + var(--space-lg)); }
}
Change Verse
Bible Versions
KJV
Strong's
CJB
BSB
ASV
King James Version
KJV (with Strong's)
Complete Jewish Bible
Berean Standard Bible
American Standard Version
And he made the middle bar to shoot through the boards from the one end to the other.
He made the middle crossbar so that it extended from one end of the planks to the other, halfway up.
He made the central crossbar to run through the center of the frames, from one end to the other.
And he made the middle bar to pass through in the midst of the boards from the one end to the other.