/* ================================================================== */ /* 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)); } }
18:14 18:14

Judges 18:15

18:16 18:16

Bible Versions

And they turned thitherward, and came to the house of the young man the Levite, [even] unto the house of Micah, and saluted him.
And they turned {H5493} thitherward, and came {H935} to the house {H1004} of the young man {H5288} the Levite {H3881}, even unto the house {H1004} of Micah {H4318}, and saluted {H7592}{H7965} 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.

Study Tools

Note: Commentary is generated by AI with a directive for Biblical fidelity. Always rely on the Holy Spirit for discernment. The Scripture text and cross-references are from verified, non-AI sources.
  • Genesis 43:27

    And he asked them of [their] welfare, and said, [Is] your father well, the old man of whom ye spake? [Is] he yet alive?
  • Matthew 10:12

    And when ye come into an house, salute it.
  • Matthew 10:13

    And if the house be worthy, let your peace come upon it: but if it be not worthy, let your peace return to you.
  • John 14:27

    Peace I leave with you, my peace I give unto you: not as the world giveth, give I unto you. Let not your heart be troubled, neither let it be afraid.
  • Luke 10:4

    Carry neither purse, nor scrip, nor shoes: and salute no man by the way.
  • Luke 10:6

    And if the son of peace be there, your peace shall rest upon it: if not, it shall turn to you again.
  • 2 Kings 4:26

    Run now, I pray thee, to meet her, and say unto her, [Is it] well with thee? [is it] well with thy husband? [is it] well with the child? And she answered, [It is] well.

Search Scripture