in nav.topnav
NL-pagina:
NL ·
EN
EN-pagina:
NL ·
EN
In space-between nav: toggle vloeit mee als laatste flex-item (rechts).
In topnav-centered nav: toggle staat absoluut rechts (zie .topnav-centered regels).
────────────────────────────────────────────────────────────── */
.lang-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: 'Cinzel', serif;
font-size: 0.52rem;
letter-spacing: 0.35em;
text-transform: uppercase;
}
.lang-toggle a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
padding: 0.2rem 0.1rem;
}
.lang-toggle a:hover { color: var(--gold-light); }
.lang-toggle .lang-active {
color: var(--gold);
cursor: default;
pointer-events: none;
}
.lang-toggle .lang-sep {
color: var(--text-muted);
opacity: 0.4;
pointer-events: none;
}
/* ── ARTICLE ── */
article {
max-width: var(--max);
margin: 0 auto;
padding: 3rem 2rem 6rem;
text-align: left;
}
/* ── ORNAMENT ── */
.ornament {
display: flex; align-items: center; gap: 1rem;
max-width: var(--max);
margin: 0 auto;
padding: 0 2rem;
}
.orn-line {
flex: 1; height: 1px;
background: linear-gradient(to right, transparent, var(--gold-dim));
}
.orn-line:last-child {
background: linear-gradient(to left, transparent, var(--gold-dim));
}
.orn-sym { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.3em; }
/* ── FLOATING TOC (desktop) ── */
.toc-float {
position: fixed; right: 1.6rem; top: 50%;
transform: translateY(-50%);
z-index: 150;
display: flex; flex-direction: column; gap: 0.65rem;
opacity: 0; transition: opacity 0.5s;
}
.toc-float.shown { opacity: 1; }
.toc-dot { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; text-decoration: none; }
.toc-dot-pip {
width: 7px; height: 7px; border-radius: 50%;
border: 1px solid rgba(201,148,58,0.35);
background: transparent;
transition: all 0.25s; flex-shrink: 0; margin-left: auto;
}
.toc-dot.active .toc-dot-pip {
background: var(--gold); border-color: var(--gold);
box-shadow: 0 0 7px rgba(201,148,58,0.55);
}
.toc-dot-label {
font-family: 'Cinzel', serif; font-size: 0.47rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--text-bright);
opacity: 0; transform: translateX(5px);
transition: opacity 0.2s, transform 0.2s;
white-space: nowrap; pointer-events: none; order: -1;
}
.toc-float:hover .toc-dot-label { opacity: 1; transform: translateX(0); }
.toc-dot:hover .toc-dot-pip { background: rgba(201,148,58,0.45); border-color: var(--gold); }
@media(max-width:980px) { .toc-float { display: none; } }
/* ── MOBILE INLINE TOC ── */
.toc-inline {
background: var(--smoke);
border: 1px solid rgba(201,148,58,0.15);
padding: 1.6rem 1.8rem;
margin: 0 0 2.5rem;
position: relative;
}
.toc-inline::before {
content: 'Inhoud';
position: absolute; top: -0.6rem; left: 1.2rem;
background: var(--smoke);
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.45em; text-transform: uppercase;
color: var(--gold); padding: 0 0.5rem;
}
.toc-inline li { list-style: none; margin-bottom: 0.5rem; }
.toc-inline li a {
text-decoration: none; color: var(--gold-light);
font-family: 'Cinzel', serif; font-size: 0.62rem;
letter-spacing: 0.2em;
display: flex; align-items: baseline; gap: 0.6rem;
transition: color 0.2s;
border-bottom: 1px solid rgba(201,148,58,0.2);
padding-bottom: 0.4rem;
}
.toc-inline li:last-child a { border-bottom: none; padding-bottom: 0; }
.toc-inline li a::before {
content: '→'; color: var(--gold); font-size: 0.65rem;
flex-shrink: 0; transition: transform 0.2s;
}
.toc-inline li a:hover { color: var(--gold); }
.toc-inline li a:hover::before { transform: translateX(3px); }
.toc-inline li a:active { color: var(--gold); background: rgba(201,148,58,0.06); }
.toc-inline .toc-group-label {
font-family: 'Cinzel', serif; font-size: 0.47rem;
letter-spacing: 0.45em; text-transform: uppercase;
color: var(--gold-dim); margin: 0.8rem 0 0.25rem; display: block;
}
@media(min-width:981px) { .toc-inline { display: none; } }
/* ── STUDY HERO ── */
.study-hero {
min-height: 60vh;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-end;
padding: 9rem 2rem 4rem;
text-align: center;
position: relative; overflow: hidden;
}
.hero-glow {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 55% at 50% 85%, rgba(45,74,30,0.25), transparent),
radial-gradient(ellipse 50% 40% at 50% 10%, rgba(139,90,15,0.12), transparent);
}
.study-type {
font-family: 'Cinzel', serif; font-size: 0.6rem;
letter-spacing: 0.6em; text-transform: uppercase;
color: var(--gold); margin-bottom: 0.6rem;
animation: fadeUp 0.8s ease both;
}
.study-theme {
font-family: 'Cinzel', serif; font-size: 0.6rem;
letter-spacing: 0.6em; text-transform: uppercase;
color: var(--gold); margin-bottom: 1rem;
animation: fadeUp 0.8s ease both;
}
.study-date {
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 1.2rem;
animation: fadeUp 0.8s 0.05s ease both;
}
.study-hebrew {
font-family: 'Noto Serif Hebrew', serif;
font-size: clamp(3.5rem, 10vw, 6.5rem);
color: var(--gold); line-height: 1; margin-bottom: 0.4rem;
text-shadow: 0 0 80px rgba(201,148,58,0.4);
animation: fadeUp 0.8s 0.1s ease both;
}
.study-title {
font-family: 'Cinzel', serif;
font-size: clamp(1.2rem, 3.5vw, 1.75rem);
color: var(--text-bright); font-weight: 600;
line-height: 1.2; margin-bottom: 1.2rem;
animation: fadeUp 0.8s 0.2s ease both;
}
.study-subtitle {
font-family: 'EB Garamond', serif;
font-style: italic; font-size: 1rem;
color: var(--text-muted); margin-bottom: 1.4rem;
animation: fadeUp 0.8s 0.25s ease both;
}
.study-meta {
display: flex; gap: 2rem; align-items: center;
justify-content: center; flex-wrap: wrap;
animation: fadeUp 0.8s 0.3s ease both;
}
.meta-item {
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--text-muted);
display: flex; align-items: center; gap: 0.4rem;
}
.meta-dot { color: var(--gold); }
/* Classification badges in hero */
.classif-badge-row {
display: flex; gap: 0.6rem; flex-wrap: wrap;
justify-content: center; margin-top: 1.2rem;
animation: fadeUp 0.8s 0.35s ease both;
}
/* ── PARDES BADGES ── */
.pardes-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.45em; text-transform: uppercase;
padding: 0.35rem 0.9rem; border: 1px solid;
margin-bottom: 1.5rem;
}
.badge-pshat { color: #8ab4f8; border-color: rgba(138,180,248,0.3); background: rgba(138,180,248,0.05); }
.badge-remez { color: #d4a853; border-color: rgba(212,168,83,0.3); background: rgba(212,168,83,0.05); }
.badge-drash { color: #7ec87e; border-color: rgba(126,200,126,0.3); background: rgba(126,200,126,0.05); }
.badge-sod { color: #c084fc; border-color: rgba(192,132,252,0.3); background: rgba(192,132,252,0.05); }
/* Study type badges (also used on index.html) */
.badge-woord { color: #8ab4f8; border-color: rgba(138,180,248,0.35); background: rgba(138,180,248,0.05); }
.badge-halacha { color: #7ec87e; border-color: rgba(126,200,126,0.35); background: rgba(126,200,126,0.05); }
.badge-context { color: #c084fc; border-color: rgba(192,132,252,0.35); background: rgba(192,132,252,0.05); }
.badge-parasha { color: #c9943a; border-color: rgba(201,148,58,0.35); background: rgba(201,148,58,0.05); }
/* ── SECTION ACCORDION (PaRDeS / context studies) ── */
.sec-accordion { margin: 3rem 0 0; }
.sec-trigger {
width: 100%; background: none; border: none; border-top: 1px solid;
padding: 1rem 0;
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; text-align: left; transition: opacity 0.2s;
}
.sec-trigger:hover { opacity: 0.8; }
.sec-trigger-inner { display: flex; align-items: center; gap: 1rem; }
.sec-chevron {
flex-shrink: 0; transition: transform 0.35s ease;
display: flex; align-items: center; opacity: 0.5;
}
.sec-trigger[aria-expanded="false"] .sec-chevron { transform: rotate(-90deg); }
.sec-body { overflow: hidden; max-height: 0; transition: max-height 0.5s ease; }
.sec-body.open { max-height: 999999px; }
.sec-body-inner { padding: 0.5rem 0 1rem; }
.sec-body.open .reveal { opacity: 1 !important; transform: none !important; }
/* ── FUND ACCORDION (fundamentstudie — volledig omlijnd kader) ── */
.fund-section { margin: 1.5rem 0; }
.fund-accordion {
border: 1px solid rgba(232,213,160,0.2);
background: var(--smoke);
overflow: hidden;
}
.fund-trigger {
width: 100%; background: none;
border: none; border-bottom: 1px solid rgba(232,213,160,0.15);
padding: 1rem 1.4rem;
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; text-align: left;
transition: background 0.2s;
}
.fund-trigger:hover { background: rgba(232,213,160,0.04); }
.fund-trigger[aria-expanded="false"] { border-bottom: none; }
.fund-trigger[aria-expanded="false"] .fund-chevron { transform: rotate(-90deg); }
.fund-trigger-inner { display: flex; align-items: center; gap: 1rem; }
.fund-chevron {
flex-shrink: 0; transition: transform 0.35s ease;
display: flex; align-items: center;
color: rgba(232,213,160,0.5);
}
.fund-body { overflow: hidden; max-height: 0; transition: max-height 0.5s ease; }
.fund-body.open { max-height: 999999px; }
.fund-body-inner { padding: 1.4rem 1.6rem 1.6rem; }
.fund-body-inner p { font-size: 0.95rem; line-height: 1.75; }
.fund-body.open .reveal { opacity: 1 !important; transform: none !important; }
/* PaRDeS trigger colors */
.sec-trigger.trigger-pshat { border-color: rgba(138,180,248,0.3); }
.sec-trigger.trigger-pshat .sec-chevron { color: rgba(138,180,248,0.7); }
.sec-trigger.trigger-remez { border-color: rgba(212,168,83,0.3); }
.sec-trigger.trigger-remez .sec-chevron { color: rgba(212,168,83,0.7); }
.sec-trigger.trigger-drash { border-color: rgba(126,200,126,0.3); }
.sec-trigger.trigger-drash .sec-chevron { color: rgba(126,200,126,0.7); }
.sec-trigger.trigger-sod { border-color: rgba(192,132,252,0.3); }
.sec-trigger.trigger-sod .sec-chevron { color: rgba(192,132,252,0.7); }
.sec-trigger.trigger-overdenking { border-color: rgba(201,148,58,0.3); }
.sec-trigger.trigger-overdenking .sec-chevron { color: rgba(201,148,58,0.7); }
/* ── INSIGHT BOX ── */
.insight {
display: flex; gap: 1rem; align-items: flex-start;
background: rgba(201,148,58,0.05);
border-left: 2px solid var(--gold);
padding: 1.2rem 1.4rem; margin: 2rem 0;
}
.insight-icon { color: var(--gold); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.insight p { margin: 0; font-size: 0.95rem; color: var(--text-bright); }
/* ── PULLQUOTE ── */
.pullquote {
margin: 2.5rem 0; padding: 1.5rem 2rem;
background: rgba(45,74,30,0.12);
border: 1px solid rgba(90,138,58,0.2);
text-align: center;
}
.pullquote p { font-style: italic; font-size: 1.2rem; color: var(--text-bright); margin: 0; line-height: 1.55; }
.pullquote cite {
display: block; margin-top: 0.6rem;
font-family: 'Cinzel', serif; font-size: 0.58rem;
letter-spacing: 0.3em; color: var(--gold); font-style: normal;
}
/* ── VERSE BLOCK ── */
.verse-block {
background: linear-gradient(135deg, var(--ash), var(--smoke));
border-left: 3px solid var(--gold);
padding: 1.4rem 1.6rem; margin: 1.2rem 0; position: relative;
}
.verse-block::before {
content: '"';
position: absolute; top: -0.5rem; left: 1rem;
font-family: serif; font-size: 4rem;
color: rgba(201,148,58,0.1); line-height: 1; pointer-events: none;
}
.verse-block p {
font-style: italic; font-size: 1.05rem;
color: var(--text-bright); margin: 0 0 0.4rem;
position: relative; line-height: 1.65;
}
.verse-block .heb-verse {
font-family: 'Noto Serif Hebrew', serif;
font-style: normal; font-size: 1.3rem;
line-height: 1.5; direction: rtl; margin-bottom: 0.5rem;
}
.verse-block cite {
font-family: 'Cinzel', serif; font-size: 0.58rem;
letter-spacing: 0.3em; color: var(--gold); font-style: normal;
}
/* ── STORY BLOCK ── */
.story-block {
background: var(--ash);
border: 1px solid rgba(201,148,58,0.12);
padding: 1.8rem 2rem; margin: 2.5rem 0; position: relative;
}
/* ── WORD STUDY BOX ── */
.word-study {
background: var(--smoke);
border: 1px solid rgba(201,148,58,0.18);
padding: 1.5rem 1.8rem; margin: 2rem 0; position: relative;
}
.word-study::before {
content: 'Woordstudie';
position: absolute; top: -0.55rem; left: 1rem;
background: var(--smoke);
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--gold); padding: 0 0.5rem;
}
.word-row {
display: grid; grid-template-columns: 9rem 1fr;
gap: 0.4rem 1.2rem; align-items: baseline; margin-bottom: 0.6rem;
}
.word-row:last-child { margin-bottom: 0; }
.word-lang {
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--text-body);
}
.word-val { color: var(--text-body); font-size: 0.95rem; }
/* ── MODAL ── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(8,10,6,0.88);
z-index: 500;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.3s; padding: 1rem;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
background: var(--ash);
border: 1px solid rgba(201,148,58,0.2);
max-width: 540px; width: 100%;
max-height: 90vh; overflow-y: auto;
}
.modal-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 1.4rem 1.6rem;
border-bottom: 1px solid rgba(201,148,58,0.12);
}
.modal-title {
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.45em; text-transform: uppercase;
color: var(--gold); margin-bottom: 0.3rem;
}
.modal-subtitle { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--text-bright); }
.modal-close {
background: none; border: 1px solid rgba(201,148,58,0.2);
color: var(--text-muted); font-size: 0.8rem;
cursor: pointer; padding: 0.3rem 0.6rem;
transition: all 0.2s; flex-shrink: 0;
}
.modal-close:hover { color: var(--gold); border-color: var(--gold); }
.modal-body { padding: 1.4rem 1.6rem; }
.modal-section { margin-bottom: 1.8rem; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section-title {
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--gold); margin-bottom: 0.8rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(201,148,58,0.1);
}
.modal-section p { font-size: 0.9rem; color: var(--text-body); line-height: 1.65; margin-bottom: 0.7rem; }
.modal-section p:last-child { margin-bottom: 0; }
.modal-layers { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-layer { display: flex; align-items: flex-start; gap: 0.8rem; }
.modal-layer-badge {
font-family: 'Cinzel', serif; font-size: 0.48rem;
letter-spacing: 0.3em; padding: 0.25rem 0.6rem;
border: 1px solid; flex-shrink: 0; white-space: nowrap;
}
.modal-layer-badge.l-pshat { color:#8ab4f8; border-color:rgba(138,180,248,0.3); background:rgba(138,180,248,0.05); }
.modal-layer-badge.l-remez { color:#d4a853; border-color:rgba(212,168,83,0.3); background:rgba(212,168,83,0.05); }
.modal-layer-badge.l-drash { color:#7ec87e; border-color:rgba(126,200,126,0.3); background:rgba(126,200,126,0.05); }
.modal-layer-badge.l-sod { color:#c084fc; border-color:rgba(192,132,252,0.3); background:rgba(192,132,252,0.05); }
.modal-layer-text { font-size: 0.88rem; color: var(--text-body); line-height: 1.5; }
.modal-tip {
background: rgba(201,148,58,0.05);
border-left: 2px solid var(--gold-dim);
padding: 0.8rem 1rem; margin: 0.8rem 0;
}
.modal-tip p { font-size: 0.85rem; margin: 0; }
.modal-link {
display: inline-block;
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.3em; text-transform: uppercase;
color: var(--gold-light); text-decoration: none;
border-bottom: 1px solid rgba(201,148,58,0.25);
padding-bottom: 0.2rem; margin-top: 0.8rem;
transition: color 0.2s;
}
.modal-link:hover { color: var(--gold); }
/* ── BRONNEN & VERWIJZINGEN ── */
.bronnen-wrap {
max-width: var(--max); margin: 0 auto;
padding: 2rem 2rem 5rem;
border-top: 1px solid rgba(201,148,58,0.08);
}
.bronnen-header {
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.5em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 1.2rem;
}
.bronnen-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bronnen-list li {
font-size: 0.82rem; color: var(--text-muted);
line-height: 1.5; display: flex; gap: 0.7rem; align-items: baseline;
}
.bron-key {
font-family: 'Cinzel', serif; font-size: 0.47rem;
letter-spacing: 0.2em; color: var(--gold-dim);
flex-shrink: 0; white-space: nowrap;
min-width: 7rem;
}
/* ── STUDY NAVIGATION ── */
.study-nav {
max-width: var(--max); margin: 0 auto;
padding: 0 2rem 3rem;
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.study-nav-item {
background: var(--smoke);
border: 1px solid rgba(201,148,58,0.12);
padding: 1.2rem 1.4rem;
text-decoration: none; transition: all 0.3s;
display: flex; flex-direction: column; gap: 0.3rem;
}
.study-nav-item:hover { background: var(--ash); border-color: rgba(201,148,58,0.25); }
.study-nav-item.next { text-align: right; }
/* ── Thema-afsluiter: gouden next-knop ── */
.study-nav-item.next.thema-einde {
background: rgba(201,148,58,0.07);
border-color: rgba(201,148,58,0.45);
box-shadow: 0 0 18px rgba(201,148,58,0.12);
}
.study-nav-item.next.thema-einde:hover {
background: rgba(201,148,58,0.13);
border-color: var(--gold);
box-shadow: 0 0 28px rgba(201,148,58,0.22);
}
.study-nav-item.next.thema-einde .nav-dir { color: rgba(201,148,58,0.7); }
.study-nav-item.next.thema-einde .nav-title { font-size: 0.9rem; color: var(--gold); }
.study-nav-item.next.thema-einde .nav-sub {
font-family: 'Cinzel', serif; font-size: 0.46rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: rgba(201,148,58,0.5); margin-top: 0.15rem;
}
.nav-dir {
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.35em; text-transform: uppercase;
color: var(--text-muted);
}
.nav-title { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--gold); line-height: 1.3; }
.back-to-tree {
display: block; text-align: center;
max-width: var(--max); margin: 0 auto;
padding: 0 2rem 4rem;
}
.back-to-tree a {
font-family: 'Cinzel', serif; font-size: 0.6rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--text-muted); text-decoration: none;
transition: color 0.3s;
border-bottom: 1px solid rgba(201,148,58,0.15);
padding-bottom: 0.3rem;
}
.back-to-tree a:hover { color: var(--gold); }
/* ── GOLD LINK ── */
.gold-link {
color: var(--gold-light); text-decoration: none;
border-bottom: 1px solid rgba(201,148,58,0.25);
transition: color 0.2s, border-color 0.2s;
}
.gold-link:hover { color: var(--gold); border-color: var(--gold); }
/* ── REVEAL ANIMATIONS ── */
.reveal {
opacity: 0; transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── MOBILE BASE ── */
@media(max-width:600px) {
nav.topnav { padding: 0.9rem 1.2rem; }
article { padding: 2rem 1.2rem 4rem; }
.study-nav { grid-template-columns: 1fr; }
.bronnen-wrap { padding: 2rem 1.2rem 4rem; }
.bronnen-list li { flex-direction: column; gap: 0.15rem; }
.bron-key { font-size: 0.44rem; letter-spacing: 0.25em; }
.word-row { grid-template-columns: 1fr; gap: 0.1rem; }
.word-lang { white-space: normal; line-height: 1.3; }
}
/* ============================================================
ELEMENT I — INLEIDING & LEERDOELEN (gedeeld patroon)
Gebruik: .intro-block als eerste element in
Referentie: studie-bouwopdracht.md Blok 3 · Element I
============================================================ */
/* Omhullend blok */
.intro-block {
background: linear-gradient(135deg, var(--smoke), var(--ash));
border: 1px solid rgba(201,148,58,0.15);
padding: 2rem 2.2rem;
margin: 0 0 2.5rem;
position: relative;
}
.intro-block::before {
content: 'Inleiding & Leerdoelen';
position: absolute;
top: -0.6rem;
left: 1.2rem;
background: var(--smoke);
font-family: 'Cinzel', serif;
font-size: 0.5rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--gold);
padding: 0 0.6rem;
}
.intro-block p {
font-size: 0.97rem;
margin-bottom: 1rem;
}
/* Leerdoelen-lijst */
.leerdoel-label {
font-family: 'Cinzel', serif;
font-size: 0.5rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--text-muted);
display: block;
margin: 1.2rem 0 0.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(201,148,58,0.1);
}
.leerdoelen {
list-style: none;
padding: 0;
margin: 0;
}
.leerdoelen li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
font-size: 0.92rem;
color: var(--text-body);
margin-bottom: 0.45rem;
line-height: 1.5;
}
.leerdoelen li::before {
content: '→';
color: var(--gold);
flex-shrink: 0;
font-family: 'Cinzel', serif;
}
/* Voorbereiding-blok (optioneel, binnen .intro-block) */
.voorbereiding-block {
margin-top: 2rem;
border: 1px solid var(--context-dim, rgba(201,148,58,0.15));
background: var(--context-bg, rgba(201,148,58,0.02));
position: relative;
}
.voorb-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1.4rem;
border-bottom: 1px solid var(--context-dim, rgba(201,148,58,0.1));
}
.voorb-icon { color: var(--context, var(--gold)); font-size: 0.7rem; }
.voorb-title {
font-family: 'Cinzel', serif;
font-size: 0.55rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--context, var(--gold));
}
.voorb-body { padding: 1.2rem 1.4rem 1.4rem; }
.voorb-body p {
font-size: 0.88rem;
color: var(--text-body);
line-height: 1.65;
margin-bottom: 1rem;
}
.voorb-body p:last-child { margin-bottom: 0; }
.voorb-body p strong { color: var(--text-body); }
.voorb-btn {
font-family: 'Cinzel', serif;
font-size: 0.5rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold-light);
border: 1px solid rgba(201,148,58,0.3);
background: rgba(201,148,58,0.05);
padding: 0.55rem 1.1rem;
cursor: pointer;
transition: all 0.2s;
display: inline-block;
margin-bottom: 1.2rem;
text-decoration: none;
}
.voorb-btn:hover {
background: rgba(201,148,58,0.1);
border-color: rgba(201,148,58,0.6);
}
.voorb-schrift {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--context-dim, rgba(201,148,58,0.1));
}
.voorb-schrift-label {
font-family: 'Cinzel', serif;
font-size: 0.47rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--text-body);
}
.voorb-schrift-item {
font-size: 0.85rem;
color: var(--text-body);
font-style: italic;
}
/* Leesduur-meta (optioneel naast voorbereiding) */
.leesduur-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(201,148,58,0.1);
margin: 0 0 2.5rem;
}
.leesduur-col {
background: var(--smoke);
padding: 1.2rem 1.4rem;
}
.leesduur-col-label {
font-family: 'Cinzel', serif;
font-size: 0.5rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 0.7rem;
}
.leesduur-col p {
font-size: 0.88rem;
color: var(--text-body);
line-height: 1.65;
margin: 0;
}
@media(max-width:600px) {
.intro-block { padding: 1.6rem 1.4rem; }
.leesduur-meta { grid-template-columns: 1fr; }
}
/* ============================================================
STUDIESOORT-KLEURCASCADES — geborgd in styles.css
Doel: hero, intro-block, toc, nav-wandel, context-badge
en leerdoelen pijl reageren automatisch op body-klasse.
Geen kleur-overschrijving meer nodig in pagina-CSS.
Protocol: studie-bouwopdracht.md Blok 6
============================================================ */
/* ── NAV-WANDEL (topnav rechtsknop) ── */
.nav-wandel {
margin-left: auto;
font-family: 'Cinzel', serif;
font-size: 0.58rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-body);
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(201,148,58,0.35);
padding: 0.35rem 0.85rem;
transition: all 0.3s;
}
.nav-wandel:hover { color: var(--gold); border-color: var(--gold); }
/* ── PARASHA TOPNAV — kalender + begrippen + studiewandel ──
Drie links verticaal en horizontaal gecentreerd zodat de tekst
"Studiewandel" op exact dezelfde verticale lijn staat als de
anderen. Gebruik via: body.studie-parasha .topnav
─────────────────────────────────────────────────────────── */
.parasha-nav-links {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.6rem;
}
.parasha-nav-link {
font-family: 'Cinzel', serif;
font-size: 0.58rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-body);
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(201,148,58,0.35);
padding: 0.35rem 0.85rem;
transition: all 0.3s;
/* Zelfde hoogte als .nav-wandel zodat tekst op dezelfde lijn zit */
line-height: 1;
display: inline-flex;
align-items: center;
}
.parasha-nav-link:hover { color: var(--gold); border-color: var(--gold); }
/* nav-wandel binnen parasha-nav-links: geen margin-left:auto meer
want de container zelf regelt de positionering */
.parasha-nav-links .nav-wandel {
margin-left: 0;
}
.nav-link {
font-family: 'Cinzel', serif; font-size: 0.52rem;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--text-muted); text-decoration: none;
transition: color 0.2s;
}
.nav-link:hover { color: var(--gold); }
/* ── HERO-GLOW per studiesoort ── */
body.studie-context .hero-glow { background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(90,30,120,0.18),transparent),radial-gradient(ellipse 45% 35% at 50% 15%,rgba(139,58,15,0.08),transparent); }
body.studie-woord .hero-glow { background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(30,60,120,0.18),transparent),radial-gradient(ellipse 45% 35% at 50% 15%,rgba(139,58,15,0.08),transparent); }
body.studie-halacha .hero-glow { background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(20,80,20,0.22),transparent),radial-gradient(ellipse 45% 35% at 50% 15%,rgba(139,90,15,0.1),transparent); }
body.studie-parasha .hero-glow { background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(100,65,10,0.25),transparent),radial-gradient(ellipse 45% 35% at 50% 15%,rgba(180,120,20,0.1),transparent); }
body.studie-fundament .hero-glow { background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(80,65,30,0.22),transparent),radial-gradient(ellipse 45% 35% at 50% 15%,rgba(139,90,15,0.1),transparent); }
/* ── STUDY-THEME kleur per studiesoort ── */
body.studie-context .study-theme { color: var(--context); }
body.studie-woord .study-theme { color: var(--context); }
body.studie-halacha .study-theme { color: var(--context); }
body.studie-parasha .study-theme { color: var(--context); }
body.studie-fundament .study-theme { color: var(--context); }
/* ── WANDEL-BADGE — VERVALLEN
Een studie staat op zichzelf. De wandeling-context hoort
in studiewandel.html, niet in de studie zelf.
Klasse behouden voor backward-compat maar niet meer gebruiken. ── */
.wandel-badge { display: none; }
/* ── INTRO-BLOCK kleur per studiesoort ── */
body.studie-context .intro-block { border-color: rgba(192,132,252,0.2); }
body.studie-context .intro-block::before { color: var(--context); }
body.studie-context .leerdoel-label { border-top-color: rgba(192,132,252,0.12); }
body.studie-context .leerdoelen li::before { color: var(--context); }
body.studie-woord .intro-block { border-color: rgba(138,180,248,0.2); }
body.studie-woord .intro-block::before { color: var(--context); }
body.studie-woord .leerdoel-label { border-top-color: rgba(138,180,248,0.12); }
body.studie-woord .leerdoelen li::before { color: var(--context); }
body.studie-halacha .intro-block { border-color: rgba(126,200,126,0.2); }
body.studie-halacha .intro-block::before { color: var(--context); }
body.studie-halacha .leerdoel-label { border-top-color: rgba(126,200,126,0.12); }
body.studie-halacha .leerdoelen li::before { color: var(--context); }
body.studie-parasha .intro-block { border-color: rgba(201,148,58,0.2); }
body.studie-parasha .intro-block::before { color: var(--context); }
body.studie-parasha .leerdoel-label { border-top-color: rgba(201,148,58,0.12); }
body.studie-parasha .leerdoelen li::before { color: var(--context); }
body.studie-fundament .intro-block { border-color: rgba(232,213,160,0.2); }
body.studie-fundament .intro-block::before { color: var(--context); }
body.studie-fundament .leerdoel-label { border-top-color: rgba(232,213,160,0.12); }
body.studie-fundament .leerdoelen li::before { color: var(--context); }
/* ── TOC-INLINE kleur per studiesoort ── */
body.studie-context .toc-inline { border-color: rgba(192,132,252,0.15); }
body.studie-context .toc-inline::before { color: var(--context); }
body.studie-context .toc-inline li a { color: var(--context); border-bottom-color: rgba(192,132,252,0.15); }
body.studie-context .toc-inline li a::before { color: var(--context); }
body.studie-context .toc-inline .toc-group-label { color: rgba(192,132,252,0.45); }
body.studie-woord .toc-inline { border-color: rgba(138,180,248,0.15); }
body.studie-woord .toc-inline::before { color: var(--context); }
body.studie-woord .toc-inline li a { color: var(--context); border-bottom-color: rgba(138,180,248,0.15); }
body.studie-woord .toc-inline li a::before { color: var(--context); }
body.studie-woord .toc-inline .toc-group-label { color: rgba(138,180,248,0.45); }
body.studie-halacha .toc-inline { border-color: rgba(126,200,126,0.15); }
body.studie-halacha .toc-inline::before { color: var(--context); }
body.studie-halacha .toc-inline li a { color: var(--context); border-bottom-color: rgba(126,200,126,0.15); }
body.studie-halacha .toc-inline li a::before { color: var(--context); }
body.studie-halacha .toc-inline .toc-group-label { color: rgba(126,200,126,0.45); }
body.studie-parasha .toc-inline { border-color: rgba(201,148,58,0.2); }
body.studie-parasha .toc-inline::before { color: var(--context); }
body.studie-parasha .toc-inline li a { color: var(--context); border-bottom-color: rgba(201,148,58,0.2); }
body.studie-parasha .toc-inline li a::before { color: var(--context); }
body.studie-parasha .toc-inline .toc-group-label { color: rgba(201,148,58,0.45); }
body.studie-fundament .toc-inline { border-color: rgba(232,213,160,0.15); }
body.studie-fundament .toc-inline::before { color: var(--context); }
body.studie-fundament .toc-inline li a { color: var(--context); border-bottom-color: rgba(232,213,160,0.15); }
body.studie-fundament .toc-inline li a::before { color: var(--context); }
body.studie-fundament .toc-inline .toc-group-label { color: rgba(232,213,160,0.45); }
/* ── TOC-DOT (floating, desktop) kleur per studiesoort ── */
body.studie-context .toc-dot-pip { border-color: rgba(192,132,252,0.3); }
body.studie-context .toc-dot.active .toc-dot-pip { background: var(--context); border-color: var(--context); box-shadow: 0 0 7px rgba(192,132,252,0.5); }
body.studie-context .toc-dot:hover .toc-dot-pip { background: rgba(192,132,252,0.35); border-color: var(--context); }
body.studie-woord .toc-dot-pip { border-color: rgba(138,180,248,0.3); }
body.studie-woord .toc-dot.active .toc-dot-pip { background: var(--context); border-color: var(--context); box-shadow: 0 0 7px rgba(138,180,248,0.5); }
body.studie-woord .toc-dot:hover .toc-dot-pip { background: rgba(138,180,248,0.35); border-color: var(--context); }
body.studie-halacha .toc-dot-pip { border-color: rgba(126,200,126,0.3); }
body.studie-halacha .toc-dot.active .toc-dot-pip { background: var(--context); border-color: var(--context); box-shadow: 0 0 7px rgba(126,200,126,0.5); }
body.studie-halacha .toc-dot:hover .toc-dot-pip { background: rgba(126,200,126,0.35); border-color: var(--context); }
body.studie-parasha .toc-dot-pip { border-color: rgba(201,148,58,0.35); }
body.studie-parasha .toc-dot.active .toc-dot-pip { background: var(--context); border-color: var(--context); box-shadow: 0 0 7px rgba(201,148,58,0.55); }
body.studie-parasha .toc-dot:hover .toc-dot-pip { background: rgba(201,148,58,0.35); border-color: var(--context); }
body.studie-fundament .toc-dot-pip { border-color: rgba(232,213,160,0.3); }
body.studie-fundament .toc-dot.active .toc-dot-pip { background: var(--context); border-color: var(--context); box-shadow: 0 0 7px rgba(232,213,160,0.5); }
body.studie-fundament .toc-dot:hover .toc-dot-pip { background: rgba(232,213,160,0.35); border-color: var(--context); }
/* ── CONTEXT-BADGE (sectie-accordion header) ── */
.context-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: 'Cinzel', serif; font-size: 0.55rem;
letter-spacing: 0.45em; text-transform: uppercase;
padding: 0.35rem 0.9rem;
border: 1px solid var(--context-dim);
background: var(--context-bg);
color: var(--context);
margin-bottom: 0;
}
/* ── LABEL INLINE (canoniciteitsmarkeringen) ── */
.label-inline {
font-family: 'Cinzel', serif; font-size: 0.44rem;
letter-spacing: 0.28em; text-transform: uppercase;
padding: 0.15rem 0.5rem; border: 1px solid;
display: inline-block; vertical-align: middle;
margin-left: 0.35rem; line-height: 1.6;
}
.label-canoniek { color: var(--leaf-glow); border-color: rgba(90,138,58,0.35); background: rgba(90,138,58,0.05); }
.label-rabbijns { color: #d4a853; border-color: rgba(212,168,83,0.3); background: rgba(212,168,83,0.04); }
.label-populair { color: #f87171; border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.04); }
.label-verlies { color: #c05a2a; border-color: rgba(192,90,42,0.35); background: rgba(192,90,42,0.04); }
/* ── MAANDAG-BLOCK (Element VIII — Maandagochtendtest) ── */
.maandag-block {
background: linear-gradient(135deg, var(--context-bg), rgba(201,148,58,0.03));
border: 1px solid var(--context-dim);
margin: 2rem 0; padding: 1.6rem 1.8rem;
}
.maandag-label {
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.55em; text-transform: uppercase;
color: var(--context); margin-bottom: 0.7rem; display: block;
}
.maandag-vraag {
font-family: 'EB Garamond', serif; font-size: 1.05rem;
color: var(--text-bright); font-style: italic;
line-height: 1.7; margin-bottom: 0.8rem;
}
.maandag-stap { font-size: 0.93rem; color: var(--text-body); line-height: 1.7; }
/* ── PARDES-GRID (Element IX) ── */
.pardes-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; margin: 1.5rem 0;
background: var(--context-dim);
}
.pardes-cel {
background: var(--smoke); padding: 1.3rem 1.4rem;
}
.pardes-letter {
font-family: 'Noto Serif Hebrew', serif; font-size: 1.6rem;
color: var(--gold); display: block; margin-bottom: 0.3rem; line-height: 1;
}
.pardes-naam {
font-family: 'Cinzel', serif; font-size: 0.5rem;
letter-spacing: 0.4em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 0.5rem; display: block;
}
.pardes-tekst { font-size: 0.9rem; color: var(--text-body); line-height: 1.65; }
@media(max-width:600px) { .pardes-grid { grid-template-columns: 1fr; } }
/* ── BRONNEN-WRAP (gedeeld stijlpatroon) ── */
.bronnen-wrap .bronnen-header {
font-family: 'Cinzel', serif; font-size: 0.6rem;
letter-spacing: 0.6em; text-transform: uppercase;
color: var(--gold); text-align: center;
margin-bottom: 2rem;
display: flex; align-items: center; gap: 1.2rem;
}
.bronnen-wrap .bronnen-header::before,
.bronnen-wrap .bronnen-header::after {
content: ''; flex: 1; height: 1px;
}
.bronnen-wrap .bronnen-header::before { background: linear-gradient(to right,transparent,rgba(201,148,58,0.3)); }
.bronnen-wrap .bronnen-header::after { background: linear-gradient(to left,transparent,rgba(201,148,58,0.3)); }
.bronnen-wrap .bronnen-list li {
display: grid; grid-template-columns: 9rem 1fr;
gap: 0 1rem; font-size: 0.88rem; color: var(--text-body);
line-height: 1.6; padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(201,148,58,0.06);
}
.bronnen-wrap .bronnen-list li:last-child { border-bottom: none; }
.bronnen-wrap .bron-key {
font-family: 'Cinzel', serif; font-size: 0.62rem;
letter-spacing: 0.08em; color: var(--gold);
font-weight: 600; padding-top: 0.15rem;
}
/* ── TABELLEN — mobiel-veilig (fallback voor alle bestaande studies) ──
display:block activeert overflow-x:auto zonder HTML-wijzigingen.
Dekt alle binnen automatisch. */
article table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* ── TABLE-WRAP — optionele wrapper voor nieuwe studies ──
Gebruik:
Toont scroll-hint op mobiel. */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.5rem 0;
}
.table-wrap::after {
content: '← scroll →';
display: none;
text-align: center;
font-family: 'Cinzel', serif;
font-size: 0.45rem;
letter-spacing: 0.35em;
color: var(--text-muted);
margin-top: 0.35rem;
}
@media(max-width:600px) { .table-wrap::after { display: block; } }
/* ── KOMPAS-LINK — alleen desktop ── */
.nav-kompas { display: none; }
@media(min-width:768px) { .nav-kompas { display: list-item; } }
/* ── SITE FOOTER ── */
.site-footer {
border-top: 1px solid rgba(201,148,58,0.1);
padding: 2rem 2rem 3rem;
margin-top: 0;
}
.footer-inner {
max-width: var(--max); margin: 0 auto;
display: flex; align-items: center; justify-content: center;
gap: 0.8rem; flex-wrap: wrap;
font-family: 'Cinzel', serif; font-size: 0.58rem;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--text-muted);
}
.footer-heb {
font-family: 'Noto Serif Hebrew', serif;
font-size: 1rem; letter-spacing: 0;
color: var(--gold-dim); text-transform: none;
}
.footer-sep { color: rgba(201,148,58,0.3); }
.footer-inner a {
color: var(--text-muted); text-decoration: none;
transition: color 0.2s;
}
.footer-inner a:hover { color: var(--gold); }