.strongs-word-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 30%, transparent);
cursor: help;
position: relative;
}
.strongs-word-link:hover,
.strongs-word-link.active {
background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-bottom-color: var(--color-primary);
}
.no-strongs-underline .strongs-word-link,
.no-strongs-underline .strongs-word-link:hover,
.no-strongs-underline .strongs-word-link.active {
border-bottom-color: transparent;
}
.strongs-ref {
font-family: var(--font-sans, sans-serif);
font-size: 0.65em;
color: var(--color-text-muted);
vertical-align: super;
margin-left: 2px;
user-select: text;
font-weight: 600;
opacity: 0.7;
}
#strongs-def-tooltip {
position: absolute;
z-index: 200;
display: none;
width: 380px;
max-width: calc(100vw - 24px);
max-height: 62vh;
overflow-y: auto;
box-sizing: border-box;
background-color: var(--color-surface-solid);
border: 1px solid var(--color-border);
color: var(--color-text);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
font-family: var(--font-sans, sans-serif);
text-align: left;
opacity: 1;
transition: opacity 0.16s ease;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
#strongs-def-tooltip.is-pending {
opacity: 0;
}
#strongs-def-tooltip::-webkit-scrollbar {
width: 8px;
}
#strongs-def-tooltip::-webkit-scrollbar-track {
background: transparent;
}
#strongs-def-tooltip::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: var(--radius-sm);
}
#strongs-def-content .strongs-header {
padding: 1.15rem 3rem 1rem 1.25rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
#strongs-def-content .strongs-chip {
display: inline-block;
font-family: var(--font-sans, sans-serif);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
padding: 3px 10px;
border-radius: var(--radius-full);
}
#strongs-def-content .strongs-lemma {
font-family: "SBL Hebrew", "SBL Greek", "Times New Roman", serif;
font-size: 2rem;
line-height: 1.2;
color: var(--color-text);
font-weight: 700;
margin-top: 0.55rem;
overflow-wrap: break-word;
}
#strongs-def-content .strongs-translit-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-top: 0.4rem;
font-size: 0.9rem;
color: var(--color-text-muted);
}
#strongs-def-content .strongs-xlit {
font-style: italic;
font-weight: 600;
color: var(--color-text);
}
#strongs-def-content .strongs-pronounce {
color: var(--color-text-muted);
}
#strongs-def-content .strongs-xlit + .strongs-pronounce::before {
content: "·";
margin: 0 0.5rem;
color: var(--color-text-muted);
opacity: 0.7;
}
.strongs-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
padding: 0.6rem 1.25rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
user-select: none;
}
.strongs-page-indicator {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text-muted);
letter-spacing: 0.03em;
min-width: 3.5em;
text-align: center;
}
.strongs-page-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
font-weight: 700;
line-height: 1;
transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.strongs-page-arrow:hover:not(.disabled) {
border-color: var(--color-primary);
color: var(--color-primary);
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.strongs-page-arrow.disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
#strongs-def-content .strongs-body {
padding: 1.1rem 1.25rem;
font-size: 0.95rem;
line-height: 1.7;
font-family: var(--font-sans, sans-serif);
color: var(--color-text);
}
.strongs-etymology {
font-style: italic;
color: var(--color-text-muted);
}
.strongs-hebrew-text {
font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
font-size: 1.2em;
color: var(--color-primary);
direction: rtl;
display: inline-block;
padding: 0 4px;
font-weight: 600;
}
.strongs-greek-text {
font-family: "SBL Greek", "Times New Roman", serif;
font-size: 1.15em;
color: var(--color-accent);
font-weight: 700;
padding: 0 2px;
}
.strongs-keyword {
color: var(--color-text-muted);
font-style: italic;
font-size: 0.9em;
}
.strongs-source-note {
font-weight: 600;
color: var(--color-text-muted);
font-size: 0.9em;
}
.strongs-meta-tag {
font-size: 0.9em;
font-style: italic;
color: var(--color-text-muted);
text-transform: lowercase;
}
.strongs-meta-tag::before { content: '['; }
.strongs-meta-tag::after { content: ']'; }
.strongs-tech-note {
margin: 0.75rem 0;
padding: 0.5rem 0.7rem;
background-color: color-mix(in srgb, var(--color-text-muted) 7%, transparent);
border-radius: var(--radius-sm);
font-size: 0.85em;
font-style: italic;
color: var(--color-text-muted);
}
.strongs-usage-block {
margin-top: 1.1rem;
padding-top: 0.95rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.strongs-usage-label {
display: block;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.45rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.strongs-usage-text {
display: block;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-text);
}
#strongs-def-content .strongs-structured {
display: flex;
flex-direction: column;
}
#strongs-def-content .strongs-section + .strongs-section {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
#strongs-def-content .strongs-section-label {
display: block;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.3rem;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.07em;
}
#strongs-def-content .strongs-section-body {
display: block;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-text);
}
#strongs-def-content .strongs-section--ety .strongs-section-body {
font-style: italic;
color: var(--color-text-muted);
}
#strongs-def-content .strongs-footer {
padding: 0.9rem 1.25rem 1.05rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
#strongs-def-content .strongs-full-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
#strongs-def-content .strongs-full-link:hover {
color: var(--color-primary-hover);
}
.strongs-full-link-arrow {
font-size: 1.05em;
line-height: 1;
}
#strongs-def-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
width: 30px;
height: 30px;
background: transparent;
border: none;
padding: 0;
font-size: 1.35rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
#strongs-def-close:hover {
background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
color: var(--color-text);
}
#strongs-def-close:focus-visible {
outline: none;
box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent));
}
.strongs-loading-spinner {
padding: 2.5rem 1rem;
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.strongs-loading-spinner i {
font-size: 1.5rem;
color: var(--color-primary);
animation: spin 1s linear infinite;
}
@media (width <= 768px) {
#strongs-def-tooltip {
width: 350px;
max-height: 70vh;
}
#strongs-def-content .strongs-lemma {
font-size: 1.7rem;
}
#strongs-def-content .strongs-body {
font-size: 0.9rem;
}
}
@media (width <= 480px) {
#strongs-def-tooltip {
width: calc(100vw - 20px);
max-width: 100%;
}
}
.dark-mode #strongs-def-tooltip {
box-shadow: var(--shadow-xl);
border-color: color-mix(in srgb, var(--color-border) 85%, transparent);
}
@media (prefers-reduced-motion: reduce) {
#strongs-def-tooltip {
animation: none;
}
}
@media print {
#strongs-def-tooltip {
display: none !important;
}
.strongs-word-link {
border-bottom: none;
text-decoration: underline;
}
}