/* ================================================================== */
/* 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 they turned thitherward, and came to the house of the young man the Levite, [even] unto the house of Micah, and saluted him.
They turned off the road and went to the house of the young Levi, that is, to Mikhah's house, and asked how he was doing.
So they turned aside there and went to the home of the young Levite, the house of Micah, and greeted him.
And they turned aside thither, and came to the house of the young man the Levite, even unto the house of Micah, and asked him of his welfare.