/* ───────────────────────────────────────────────────────────── MARTELAARSSPIEGEL — DESIGNSYSTEEM Museum-catalogus, geen wiki. Editorial, ingehouden, premium. Bron: PLAN.md § 8 + voorbeeld-weynken-1527.html ───────────────────────────────────────────────────────────── */ /* Licht is de standaard (van een 17e-eeuws papier). Dark wordt geactiveerd via [data-theme="dark"], gezet door inline JS in . Wanneer de gebruiker nog geen voorkeur heeft, leest de inline JS prefers-color-scheme. */ :root { --vellum: #F4EEE2; --vellum-soft: #EDE5D4; --inkt: #1B1714; --zaal-grijs: #6F665C; --hairline: #D8CFBE; --gloed: #7A2A1E; --gloed-donker: #5A1F16; --ff-serif: 'EB Garamond', 'Source Serif 4', Georgia, 'Times New Roman', serif; --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --maxw-tekst: 36em; --maxw-pagina: 1480px; --pad-zaal: clamp(20px, 4vw, 56px); } :root[data-theme="dark"] { --vellum: #15110D; --vellum-soft: #1F1A14; --inkt: #E8E0D0; --zaal-grijs: #9A8F82; --hairline: #2E2820; --gloed: #C84A38; --gloed-donker: #DD5C49; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--vellum); color: var(--inkt); font-family: var(--ff-serif); font-size: 19px; line-height: 1.55; font-feature-settings: "kern", "liga", "onum"; font-variant-numeric: oldstyle-nums; } a { color: var(--gloed); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: color 200ms ease; } a:hover { color: var(--gloed-donker); } /* ── Zaal-navigatie (edge-to-edge) ──────────────────────────── */ .zaal-nav { border-bottom: 1px solid var(--hairline); padding: 22px var(--pad-zaal) 18px; display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap; max-width: none; margin: 0; } .zaal-nav .merk { font-family: var(--ff-serif); font-weight: 600; font-size: 0.80rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--inkt); } .zaal-nav .merk a { color: inherit; background: none; padding: 0; } .zaal-nav .merk em { font-style: normal; color: var(--zaal-grijs); display: block; font-size: 0.66rem; letter-spacing: 0.12em; margin-top: 2px; font-weight: 400; } .zaal-nav nav { margin-left: auto; display: flex; gap: 22px; font-family: var(--ff-sans); font-size: 0.80rem; letter-spacing: 0.04em; } .zaal-nav nav a { color: var(--zaal-grijs); background: none; padding: 0; } .zaal-nav nav a:hover, .zaal-nav nav a[aria-current] { color: var(--gloed); } /* Thema-toggle */ .zaal-nav .toggle { appearance: none; background: transparent; border: 1px solid var(--hairline); color: var(--zaal-grijs); font-family: var(--ff-sans); font-size: 0.74rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 6px 12px; cursor: pointer; border-radius: 999px; transition: color 200ms, border-color 200ms; } .zaal-nav .toggle:hover { color: var(--inkt); border-color: var(--zaal-grijs); } .zaal-nav .toggle .ico { font-size: 0.85rem; margin-right: 6px; } /* ── Pagina-omhulsel ────────────────────────────────────────── */ main { max-width: var(--maxw-pagina); margin: 0 auto; padding: 56px var(--pad-zaal) 96px; } /* ── Kruimel ────────────────────────────────────────────────── */ .kruimel { font-family: var(--ff-sans); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zaal-grijs); margin-bottom: 28px; } .kruimel a { color: inherit; background: none; padding: 0; } .kruimel a:hover { color: var(--gloed); } .kruimel .scheiding { padding: 0 8px; color: var(--hairline); } /* ── Titel-blok ─────────────────────────────────────────────── */ .titel { margin: 0 0 6px; font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.01em; } .titel .voornaam, .titel .achternaam { display: block; } .ondertitel { font-family: var(--ff-serif); font-style: italic; font-size: 1.12rem; color: var(--zaal-grijs); margin: 0 0 6px; } .zaal-citaat { font-family: var(--ff-sans); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--zaal-grijs); margin: 0 0 36px; } .titel-rule { border: 0; border-top: 1px solid var(--hairline); margin: 36px 0 48px; max-width: 7em; } /* ── Hoofd-grid: prent + objectkaart ────────────────────────── */ .hoofd { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 56px; margin-bottom: 56px; align-items: start; } @media (max-width: 880px) { .hoofd { grid-template-columns: 1fr; gap: 36px; } } /* ── Plaat-kader ────────────────────────────────────────────── */ .plaat { border: 1px solid var(--hairline); padding: 22px 22px 18px; background: var(--vellum); } .plaat figure { margin: 0; } .plaat img { display: block; width: 100%; height: auto; filter: sepia(0.18) contrast(1.04) brightness(0.97); } .plaat figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--ff-serif); font-style: italic; font-size: 0.84rem; color: var(--zaal-grijs); line-height: 1.45; } .plaat figcaption .label { font-style: normal; font-variant: small-caps; letter-spacing: 0.10em; color: var(--inkt); margin-right: 10px; } .plaat .geen-prent { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--zaal-grijs); font-style: italic; border: 1px dashed var(--hairline); } /* ── Object-kaart ───────────────────────────────────────────── */ .objectkaart { font-family: var(--ff-serif); font-size: 0.96rem; line-height: 1.4; } .objectkaart .kop { font-family: var(--ff-serif); font-variant: small-caps; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--zaal-grijs); padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin: 0 0 4px; } .objectkaart dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; gap: 0; } .objectkaart dt, .objectkaart dd { padding: 12px 0; border-bottom: 1px solid var(--hairline); margin: 0; } .objectkaart dt { font-variant: small-caps; letter-spacing: 0.10em; font-size: 0.78rem; color: var(--zaal-grijs); align-self: center; } .objectkaart dd { color: var(--inkt); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .objectkaart dd .stil { color: var(--zaal-grijs); } .objectkaart .voet { margin-top: 14px; font-family: var(--ff-sans); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--zaal-grijs); } /* ── Audio-balk ─────────────────────────────────────────────── */ .audio { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; margin: 0 0 40px; display: flex; align-items: center; gap: 16px; font-family: var(--ff-sans); font-size: 0.86rem; color: var(--zaal-grijs); } .audio button { appearance: none; background: transparent; border: 1px solid var(--inkt); color: var(--inkt); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; padding: 0 0 0 2px; } .audio button:hover { background: var(--inkt); color: var(--vellum); } .audio .titel-veld { color: var(--inkt); font-style: italic; } .audio .scheiding { color: var(--hairline); } /* ── Hoofdtekst ─────────────────────────────────────────────── */ .lezing { max-width: var(--maxw-tekst); margin: 0 auto; } .lezing-kop { font-family: var(--ff-serif); font-variant: small-caps; letter-spacing: 0.20em; font-size: 0.78rem; color: var(--zaal-grijs); text-align: center; margin: 0 0 28px; } .lezing-kop::before, .lezing-kop::after { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--hairline); vertical-align: 0.32em; margin: 0 14px; } .lezing p { margin: 0 0 1.2em; text-align: justify; hyphens: auto; } /* Drop cap: alleen op hertaling-pagina's */ .lezing--dropcap > p:first-of-type::first-letter { font-family: var(--ff-serif); font-weight: 600; float: left; font-size: 4.2em; line-height: 0.86; padding: 0.06em 0.10em 0 0; color: var(--gloed); } .lezing .alinea-marker { float: right; margin-right: -7em; margin-top: 0.3em; font-family: var(--ff-sans); font-size: 0.70rem; letter-spacing: 0.10em; color: var(--zaal-grijs); text-transform: uppercase; } @media (max-width: 1100px) { .lezing .alinea-marker { display: none; } } .lezing .alinea-marker a { color: inherit; background: none; padding: 0; } .lezing .alinea-marker a:hover { color: var(--gloed); } .fleuron { text-align: center; color: var(--zaal-grijs); margin: 1.6em 0; font-size: 1.2rem; } /* Lezing-tussenkoppen (over, colofon, vrije pagina's) */ .lezing h2 { font-family: var(--ff-serif); font-variant: small-caps; letter-spacing: 0.18em; font-weight: 500; font-size: 1.08rem; color: var(--inkt); margin: 2.4em 0 0.6em; } .lezing h3 { font-family: var(--ff-serif); font-style: italic; font-weight: 500; font-size: 1.06rem; color: var(--inkt); margin: 1.8em 0 0.4em; } .lezing ul, .lezing ol { padding-left: 1.4em; } .lezing li { margin: 0.3em 0; } /* ── Citaat ─────────────────────────────────────────────────── */ blockquote { margin: 1.6em 0; padding: 0 0 0 1.4em; border-left: 1px solid var(--hairline); font-style: italic; color: var(--inkt); } blockquote .bron { display: block; margin-top: 0.6em; font-style: normal; font-variant: small-caps; letter-spacing: 0.10em; font-size: 0.78rem; color: var(--zaal-grijs); } /* ── Sectie ─────────────────────────────────────────────────── */ section.zaal { max-width: var(--maxw-tekst); margin: 80px auto 0; padding-top: 56px; border-top: 1px solid var(--hairline); } section.zaal > h2 { font-family: var(--ff-serif); font-variant: small-caps; letter-spacing: 0.18em; font-weight: 500; font-size: 1.08rem; color: var(--inkt); margin: 0 0 6px; } section.zaal > .h2-onderschrift { font-family: var(--ff-serif); font-style: italic; color: var(--zaal-grijs); font-size: 0.94rem; margin: 0 0 36px; } /* ── Origineel ──────────────────────────────────────────────── */ .origineel { font-family: var(--ff-serif); font-size: 1.02rem; line-height: 1.7; color: var(--inkt); } .origineel p { margin: 0 0 1.1em; } .origineel .pagina-marker { display: inline-block; font-family: var(--ff-sans); font-size: 0.72rem; letter-spacing: 0.10em; color: var(--zaal-grijs); vertical-align: 0.2em; margin: 0 0.3em; } /* ── Verbanden / register ───────────────────────────────────── */ .verbanden ul, .register ul { list-style: none; margin: 0; padding: 0; } .verbanden li, .register li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; } .verbanden li:first-child, .register li:first-child { border-top: 1px solid var(--hairline); } .verbanden .naam, .register .naam { font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.02rem; } .verbanden .naam a, .register .naam a { background: none; padding: 0; color: var(--inkt); } .verbanden .naam a:hover, .register .naam a:hover { color: var(--gloed); } .verbanden .meta, .register .meta { color: var(--zaal-grijs); font-style: italic; font-size: 0.92rem; font-variant-numeric: tabular-nums; } /* Het hele register — eerste pagina-niveau lijst is wijder */ .register { max-width: var(--maxw-pagina); margin: 0 auto; } /* ── Tijdlijn ───────────────────────────────────────────────── */ .tijdlijn { max-width: var(--maxw-pagina); margin: 0 auto; } .tijdlijn .decennium { margin: 0 0 48px; } .tijdlijn .decennium-kop { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin: 0 0 16px; font-family: var(--ff-serif); } .tijdlijn .decennium-kop .jaar { font-size: 1.6rem; font-weight: 500; color: var(--inkt); letter-spacing: -0.01em; } .tijdlijn .decennium-kop .lijn { height: 1px; background: var(--hairline); } .tijdlijn .decennium-kop .aantal { font-family: var(--ff-sans); font-size: 0.78rem; letter-spacing: 0.10em; color: var(--zaal-grijs); text-transform: uppercase; } .tijdlijn ul { list-style: none; margin: 0; padding: 0; } .tijdlijn li { display: grid; grid-template-columns: 11em 1fr auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; } .tijdlijn li:first-child { border-top: 1px solid var(--hairline); } .tijdlijn li .naam { font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.02rem; } .tijdlijn li .naam a { background: none; padding: 0; color: var(--inkt); } .tijdlijn li .naam a:hover { color: var(--gloed); } .tijdlijn li .meta, .tijdlijn li .meta-r { color: var(--zaal-grijs); font-style: italic; font-size: 0.92rem; font-variant-numeric: tabular-nums; } .tijdlijn li .meta-r { text-align: right; } @media (max-width: 700px) { .tijdlijn li { grid-template-columns: 1fr; gap: 4px; } .tijdlijn li .meta-r { text-align: left; } } /* ── Bijbelplaatsen ─────────────────────────────────────────── */ .bijbel { font-family: var(--ff-sans); font-size: 0.86rem; color: var(--zaal-grijs); letter-spacing: 0.02em; } .bijbel .label { font-variant: small-caps; letter-spacing: 0.10em; color: var(--inkt); margin-right: 10px; } .bijbel .scheiding { color: var(--hairline); padding: 0 6px; } /* ── Brief ──────────────────────────────────────────────────── */ .brief { max-width: var(--maxw-tekst); margin: 0 auto; } .brief header { font-family: var(--ff-serif); font-style: italic; color: var(--zaal-grijs); margin-bottom: 1.2em; font-size: 0.96rem; } .brief header .kop { display: block; font-variant: small-caps; font-style: normal; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--inkt); margin-bottom: 4px; } /* ── Voettekst (edge-to-edge) ───────────────────────────────── */ footer { max-width: none; margin: 96px 0 0; padding: 32px var(--pad-zaal) 56px; border-top: 1px solid var(--hairline); font-family: var(--ff-sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--zaal-grijs); display: flex; gap: 28px; flex-wrap: wrap; } footer a { color: var(--zaal-grijs); background: none; padding: 0; } footer a:hover { color: var(--gloed); } footer .rechts { margin-left: auto; } /* ── Voortgangsteller (homepage) ────────────────────────────── */ .voortgang { font-family: var(--ff-sans); font-size: 0.86rem; color: var(--zaal-grijs); text-align: center; margin: 36px auto; letter-spacing: 0.04em; } .voortgang strong { color: var(--inkt); font-weight: 500; } /* ── Redactie-banner (alleen op redactie/.html-previews) ─ */ .redactie-banner { background: var(--vellum-soft); border-bottom: 1px solid var(--hairline); padding: 12px var(--pad-zaal); font-family: var(--ff-sans); font-size: 0.80rem; color: var(--zaal-grijs); letter-spacing: 0.04em; } .redactie-banner .lijn { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; } .redactie-banner strong { color: var(--gloed); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.70rem; } .redactie-banner .scheiding { color: var(--hairline); } .redactie-banner .rechts { margin-left: auto; } .redactie-banner a { color: var(--zaal-grijs); } .redactie-banner a:hover { color: var(--inkt); } .redactie-banner .status { font-variant: small-caps; letter-spacing: 0.10em; color: var(--inkt); font-size: 0.78rem; } .redactie-banner .status--klaar_voor_correctie { color: var(--gloed); } .redactie-banner details { margin-top: 8px; } .redactie-banner details summary { cursor: pointer; font-size: 0.78rem; color: var(--zaal-grijs); letter-spacing: 0.04em; } .redactie-banner details ul { margin: 6px 0 0 18px; padding: 0; } .redactie-banner details li { font-family: var(--ff-serif); font-size: 0.92rem; color: var(--inkt); margin: 2px 0; } .redactie-banner details pre { font-family: var(--ff-serif); font-size: 0.92rem; color: var(--inkt); white-space: pre-wrap; margin: 6px 0 0; } /* Status-pill in /redactie/index */ .status-pill { display: inline-block; font-family: var(--ff-sans); font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--zaal-grijs); vertical-align: 2px; } .status-pill.s--klaar_voor_correctie { color: var(--gloed); border-color: var(--gloed); } .status-pill.s--goedgekeurd { color: var(--inkt); border-color: var(--zaal-grijs); } .status-pill.s--in_bewerking { color: var(--zaal-grijs); } .status-pill.s--onbewerkt { color: var(--zaal-grijs); border-style: dashed; } /* ── Reduceren animatie ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }