/* Stijl van de plekpagina's en het plekoverzicht. Handgeschreven en niet gegenereerd: build.py schrijft alleen de HTML eromheen. Dezelfde kleuren als de voorpagina, maar met een smalle leeskolom – dit zijn leespagina's, geen landingspagina's. */ :root { --bg: #0b0d10; --paneel: #161b20; --rand: #313a43; --tekst: #f3f6f9; --lopend: #dbe3ea; --zacht: #a9b4bf; --accent: #ffd166; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--tekst); font: 17px/1.68 -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } img { display: block; max-width: 100%; } .binnen { width: min(720px, 100% - 44px); margin-inline: auto; } .breed { width: min(1060px, 100% - 44px); } /* ---- de balk bovenaan (en het zoekveld erin) staat in /balk.css: die wordt ook door de voorpagina en de kaart geladen, en daar zit geen plek.css. */ main { padding: 46px 0 76px; } /* ---- de kaart onder de pagina (sinds 3 september 2026, zie step_achtergrond in build.py). :root krijgt --achtergrond van de pagina zelf; zonder die variabele verandert er niets. Het vlak is smaller dan het scherm, zodat de kaart ernaast zichtbaar blijft; op een telefoon vult het de breedte en zie je de kaart boven en onder de tekst. `fixed` doet iOS niet – daar scrolt de kaart gewoon mee, en dat is prima. */ body { background: var(--bg) var(--achtergrond, none) center top / cover no-repeat fixed; } main.opkaart { padding: 26px 0 60px; } main.opkaart > .binnen { width: min(820px, 100% - 24px); background: rgba(11, 13, 16, .84); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 14px; padding: 34px 50px 40px; box-shadow: 0 0 0 1px #ffffff14, 0 10px 40px #00000080; } main.opkaart > .binnen > article { width: min(720px, 100%); margin-inline: auto; } .kaartnoot { color: var(--zacht); font-size: 13.4px; margin: 12px 0 0; } .kruimel { color: var(--zacht); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; font-weight: 650; } h1 { font-size: clamp(29px, 4.6vw, 42px); line-height: 1.13; letter-spacing: -.02em; margin: 0 0 14px; font-weight: 700; } .soortregel { color: var(--zacht); font-size: 14.5px; margin: 0 0 30px; } .soortregel .scheiding { opacity: .5; padding: 0 7px; } figure { margin: 0 0 30px; } /* `height: auto` is hier geen opsmuk maar noodzaak: de kop-kaart van een plaatspagina draagt width="1200" height="600" in de HTML (dat voorkomt verspringen tijdens het laden), en zonder deze regel houdt de browser die 600 px vast terwijl de breedte naar 100% krimpt. Op een telefoon van 375 px werd de kaart daardoor 345 bij 600 in plaats van 345 bij 173 – ruim drie keer te hoog uitgerekt. Gemeten en verholpen op 16 augustus 2026. */ figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rand); } figcaption { color: var(--zacht); font-size: 13.4px; margin-top: 9px; } figcaption a { color: var(--accent); text-decoration: none; } /* Een prent midden in het verhaal krijgt lucht bovenaan; het kopbeeld heeft die niet nodig, want daar staat de titel boven. */ .verhaal figure { margin: 30px 0 32px; } /* Een prent of portret dat van zichzelf klein is, wordt niet tot de volle kolombreedte uitgerekt: 300 px op 720 px is zichtbaar onscherp. */ figure.klein img { width: auto; max-width: min(100%, 340px); } /* Plaatspagina: tussenkoppen in het verhaal, en een foto midden in de tekst krijgt lucht */ .verhaal h2 { font-size: 21px; letter-spacing: -.01em; margin: 34px 0 12px; } .verhaal figure { margin: 26px 0; } .verhaal p { color: var(--lopend); margin: 0 0 20px; } .verhaal p:last-child { margin-bottom: 0; } .aanname { background: var(--paneel); border: 1px solid var(--rand); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 26px; color: var(--lopend); font-size: 15px; } .naarkaart { margin: 34px 0 0; } .knop { display: inline-block; background: var(--accent); color: #14181c; font-weight: 650; padding: 12px 22px; border-radius: 9px; text-decoration: none; font-size: 16px; } .knop:hover { filter: brightness(1.07); } /* /lijn/: één kaartje per wandeling, het hele kaartje is de link naar de wandeling op de kaart. Foto bovenin als de lijn er een heeft, de knop onderaan op één hoogte (margin-top: auto). */ .wandelingen { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .wandelingen li { background: var(--paneel); border: 1px solid var(--rand); border-radius: 11px; overflow: hidden; } .wandelingen li:hover { border-color: var(--accent); } .wandelingen a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tekst); } .wandelingen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .wandelingen .tekst { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; } .wandelingen .titel { font-weight: 620; font-size: 16.5px; line-height: 1.3; } .wandelingen .onder { color: var(--zacht); font-size: 13.6px; line-height: 1.45; margin: 6px 0 16px; } .wandelingen .knop { margin-top: auto; align-self: flex-start; color: #14181c; font-size: 15px; padding: 10px 18px; } .blok { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--rand); } .blok h2 { font-size: 14px; letter-spacing: .07em; text-transform: uppercase; color: var(--zacht); font-weight: 650; margin: 0 0 14px; } .blok ul { margin: 0; padding-left: 19px; } .blok li { color: var(--lopend); font-size: 15px; margin-bottom: 7px; } .feiten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; font-size: 15px; } .feiten dt { color: var(--zacht); } .feiten dd { margin: 0; color: var(--lopend); } .meldlink { font-size: 14.6px; } footer { border-top: 1px solid var(--rand); padding: 30px 0 60px; color: var(--zacht); font-size: 13.6px; } footer a { color: #dbe3ea; } footer p { margin: 0 0 8px; } /* ---- /credits/: de bronnenlijst, gegroepeerd op de site waar ze vandaan komen */ .bronnen h3 { font-size: 15.5px; margin: 26px 0 8px; display: flex; align-items: baseline; gap: 9px; border-bottom: 1px solid var(--rand); padding-bottom: 6px; } .bronnen h3 .aantal { color: var(--zacht); font-size: 13px; font-weight: 400; margin: 0; } .bronnen ul { list-style: none; margin: 0; padding: 0; } .bronnen li { margin: 0 0 10px; font-size: 14.6px; line-height: 1.45; } .bronnen li > a { color: var(--lopend); text-decoration: none; word-break: break-word; } .bronnen li > a:hover { color: var(--accent); } .bronnen .bij { display: block; color: var(--zacht); font-size: 13.2px; margin-top: 1px; } .bronnen .bij a { color: var(--zacht); text-decoration: none; } .bronnen .bij a:hover { color: var(--accent); } .bronnen .zacht { opacity: .7; } /* ---- overzicht */ .intro { color: var(--zacht); max-width: 66ch; margin: 0 0 40px; } .gebied { margin-bottom: 40px; } .gebied h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.01em; } .gebied .aantal { color: var(--zacht); font-size: 13.5px; margin: 0 0 16px; } .plekken { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .plekken li { background: var(--paneel); border: 1px solid var(--rand); border-radius: 11px; } .plekken a { display: block; padding: 13px 16px; text-decoration: none; color: var(--tekst); } .plekken a:hover { border-color: var(--accent); } .plekken .titel { display: block; font-weight: 620; font-size: 15.4px; line-height: 1.35; } .plekken .onder { display: block; color: var(--zacht); font-size: 13.2px; margin-top: 3px; } .plekken li.kaal a { color: var(--lopend); } /* Het plaatsoverzicht heeft geen vierkantje links, dus hier geen rij maar een blok: de naam met zijn aantal erachter, en daaronder de eerste zinnen van het plaatsverhaal. */ .plekken.plaatslijst a { display: block; padding: 15px 17px 16px; } .plekken.plaatslijst .titel { display: flex; align-items: baseline; gap: 10px; font-size: 17px; } .plekken.plaatslijst .titel .aantal { color: var(--zacht); font-size: 12.8px; font-weight: 400; margin: 0; white-space: nowrap; } .plekken.plaatslijst .onder { margin-top: 6px; font-size: 13.4px; line-height: 1.5; } @media (max-width: 620px) { .binnen, .breed { width: calc(100% - 30px); } body { font-size: 16px; background-attachment: scroll; } main { padding: 34px 0 54px; } main.opkaart { padding: 14px 0 40px; } main.opkaart > .binnen { width: calc(100% - 14px); padding: 24px 16px 28px; border-radius: 10px; } } /* Overzicht: elke regel krijgt links een vierkant. Is er een foto, dan staat die erin; anders de stip van de soort, gelijk aan de kaart. 63% van de regels heeft geen foto, en een raster met gaten leest onrustiger dan een raster waarin elk vak iets zegt. */ .plekken a { display: flex; align-items: center; gap: 13px; } .mini { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #0e1216; border: 1px solid var(--rand); display: flex; align-items: center; justify-content: center; } .mini img { width: 100%; height: 100%; object-fit: cover; display: block; } .mini .stip { width: 14px; height: 14px; border-radius: 50%; display: block; border: 3px solid #0b0d10; box-shadow: 0 0 0 1px #ffffff33; } .mini .stip.ring { border-color: var(--accent); box-shadow: none; } .tekst { min-width: 0; } /* De tijdlijn is één kolom, en dat is geen smaakkwestie: .plekken is standaard een raster van drie kolommen, en dan leest een chronologische keten van links naar rechts en staat een cultuur naast zijn periode in plaats van eronder. In één kolom loopt de tijd naar beneden en betekent de inspringing wat ze moet betekenen. */ .tijdlijst { grid-template-columns: 1fr; max-width: 720px; } /* Een cultuur springt in onder de periode waar hij in valt: de nesting is dan te zien zonder dat er iets bij hoeft te staan. Het streepje links markeert het verband; op een smal scherm valt de inspringing terug tot een klein zetje. */ .tijdterm.cultuur-in-periode { margin-left: 34px; position: relative; } .tijdterm.cultuur-in-periode::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px; height: 1px; background: var(--rand); } @media (max-width: 520px) { .mini { width: 46px; height: 46px; } .tijdterm.cultuur-in-periode { margin-left: 16px; } .tijdterm.cultuur-in-periode::before { left: -11px; width: 7px; } } /* --------------------------------------------------------------------------------------- De tijdband op /tijdlijn/: de keten als iets waar je horizontaal door schuift. Tijd is een as, en een as die je aflegt laat de afstanden voelen die een lijst wegpoetst - tussen de Hamburgcultuur en de middeleeuwen zit dertienduizend jaar. De lijst eronder blijft staan voor wie liever leest dan schuift, en voor een crawler. Twee dingen bewust zo: de band is `tabindex="0"` zodat hij ook met het toetsenbord te verschuiven is, en `scroll-snap` zet elke halte netjes aan de linkerrand. */ /* De band loopt tot de rand van het scherm door, en de uitloop moet exact de goot van `.binnen` zijn: 22 px hier en 15 px onder 520 px. Was hij groter, dan wordt de band breder dan de pagina en scrolt de héle pagina horizontaal mee - dat gebeurde op mobiel met -20 px tegen een goot van 15. */ .tijdband { overflow-x: auto; overflow-y: hidden; margin: 4px -22px 6px; padding: 4px 22px 18px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .tijdband:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* De strook 'In de buurt' onderaan een plekpagina gebruikt dezelfde band: hetzelfde schuiven, dezelfde schuifbalk, hetzelfde snappen. Wat eraf gaat is de tijdas – hier hangen de kaartjes nergens aan, ze staan alleen op volgorde van afstand. */ .buurtspoor::before { display: none; } .buurthalte { flex-basis: 216px; } .buurthalte a::after { display: none; } .buurthalte .halte-beeld { height: 116px; margin-bottom: 0; } .buurthalte .halte-tekst { padding-top: 10px; } .buurthalte .halte-naam { font-size: 15.4px; } /* Dezelfde zin als in een zoekresultaat. Op drie regels afgekapt: de mediaan is 140 tekens en dat is in een kaartje van 216 px een lap van zeven regels - dan is de strook geen strook meer maar een lijst die toevallig opzij staat. */ .buurt-oms { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--lopend); font-size: 13.2px; line-height: 1.4; margin-top: 5px; } .buurthalte .halte-aantal { color: var(--zacht); font-variant-numeric: tabular-nums; margin-top: 6px; } /* De schuifbalk in de kleuren van de site. Zonder dit zet de browser er zijn eigen grijs op wit neer, en dat is op een donkere pagina een lichte streep die harder schreeuwt dan de band zelf. Twee schrijfwijzen nodig: `scrollbar-color` voor Firefox en de nieuwere Chromium's, `::-webkit-scrollbar` voor Safari en de oudere. */ .tijdband { scrollbar-width: thin; scrollbar-color: var(--accent) var(--paneel); } .tijdband::-webkit-scrollbar { height: 10px; } .tijdband::-webkit-scrollbar-track { background: var(--paneel); border-radius: 6px; } .tijdband::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; border: 2px solid var(--paneel); } .tijdband::-webkit-scrollbar-thumb:hover { background: #ffe09a; } .tijdspoor { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; align-items: stretch; position: relative; } /* de lijn waar de haltes aan hangen; loopt door de hele band en stopt niet bij de laatste halte */ .tijdspoor::before { content: ""; position: absolute; left: 0; right: 0; top: 152px; height: 1px; background: var(--rand); } .halte { flex: 0 0 232px; scroll-snap-align: start; position: relative; padding-right: 18px; } .halte a { display: block; text-decoration: none; color: var(--tekst); height: 100%; } /* de stip op de lijn: het punt in de tijd waar deze halte staat */ .halte a::after { content: ""; position: absolute; left: 0; top: 147px; width: 11px; height: 11px; border-radius: 50%; background: var(--paneel); border: 2px solid var(--rand); z-index: 1; } .halte a:hover::after, .halte a:focus-visible::after { border-color: var(--accent); background: var(--accent); } .halte-beeld { display: block; height: 132px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rand); background: #0e1216; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .halte-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } /* een term zonder foto krijgt het stip-vierkantje uit een plekkenlijst; dat mag klein blijven */ .halte-beeld .mini { width: 56px; height: 56px; border: 0; background: none; } .halte-tekst { display: block; padding-top: 12px; } .halte-jaar { display: block; color: var(--zacht); font-size: 12.5px; letter-spacing: .02em; margin-bottom: 3px; } /* geel en onderstreept, zodat te zien is dat de naam een link is */ .halte-naam { display: block; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 650; font-size: 16.5px; line-height: 1.25; } .halte a:hover .halte-naam { text-decoration-thickness: 2px; } .halte-binnen { display: block; color: var(--zacht); font-size: 12.5px; margin-top: 4px; font-style: italic; } .halte-aantal { display: block; color: var(--lopend); font-size: 13.2px; margin-top: 5px; } /* Alle beelden even hoog: een cultuur met een lager kaartje leek een tweederangs halte, en het verband met zijn periode staat er toch al onder als "binnen het …". */ .bandhint { color: var(--zacht); font-size: 13.2px; margin: 0 0 26px; } /* in de lijst eronder ook geel en onderstreept, om dezelfde reden */ .tijdterm .titel { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 520px) { .tijdband { margin-inline: -15px; padding-inline: 15px; } .halte { flex-basis: 182px; padding-right: 14px; } .halte-beeld { height: 108px; } .tijdspoor::before { top: 128px; } .halte a::after { top: 123px; } } /* ---- kaartfiguren op /methodologie/ Panelen van dezelfde uitsnede naast elkaar, met per paneel een label en één onderschrift onder de hele figuur. Ze staan in een `.binnen` van 720 px maar mogen breder: twee panelen van 620 px naast elkaar is de hele bedoeling – je moet ze kunnen vergelijken zonder te scrollen. Vandaar de negatieve marge, tot waar de kolom het toelaat. */ /* `.verhaal figure` hierboven zet een eigen marge en is even specifiek, dus deze regel moet het van de selector hebben: figure.kaartfiguur wint van .verhaal figure. Gemeten toen de figuur 170 px buiten het scherm hing. */ .verhaal figure.kaartfiguur { margin: 32px 0 34px; width: min(1060px, 100vw - 44px); margin-left: calc(50% - min(1060px, 100vw - 44px) / 2); } .kaartfiguur .panelen { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kaartfiguur.kolommen-2 .panelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kaartfiguur .panelen figure { margin: 0; } .kaartfiguur .panelen img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rand); } .kaartfiguur .panelen figcaption { font-size: 13px; margin-top: 6px; color: var(--lopend); } .kaartfiguur > figcaption { color: var(--zacht); font-size: 13.6px; line-height: 1.55; margin-top: 14px; } .kaartlegenda { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.2px; color: var(--lopend); } .kaartlegenda li { display: flex; align-items: center; gap: 8px; } .kaartlegenda .staal { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; border: 2px solid var(--k); } .kaartlegenda .staal.vol { background: color-mix(in srgb, var(--k) 30%, transparent); } @media (max-width: 760px) { .kaartfiguur { width: 100%; margin-inline: 0; } .kaartfiguur .panelen { grid-template-columns: 1fr; } } /* --- de tijdwijzer ----------------------------------------------------------------- Een tijdsterm in de lopende tekst krijgt jaartallen in een popup. Bewust géén link- opmaak: gewone links in het verhaal zijn `color: var(--accent)` met onderstreping, en dit is geen navigatie maar een woordenboekwoord. Daarom de tekstkleur van de alinea en alleen een gestippelde lijn eronder. De popup is een echt