/* =============================================================================
noordmanhout-nieuws.css
Nieuw stylesheet voor de NIEUWSSECTIE van noordmanhout.nl
-----------------------------------------------------------------------------
Dit is het ENIGE nieuwe CSS-bestand. noordmanhout.css en bootstrap.min.css
blijven volledig ongewijzigd.
Inladen ALS LAATSTE stylesheet, na noordmanhout.css:
SPELREGELS die hier zijn aangehouden:
1. Alle nieuwe klassen hebben de prefix .nws-
2. Er wordt GEEN bestaande selector overschreven. Waar een globale regel uit
noordmanhout.css ongewenst meelift op de nieuwe markup, wordt die alleen
BINNEN de nieuwssectie geneutraliseerd (zie blok 2). Buiten de
nieuwssectie verandert er dus niets.
3. Bootstrap 4.3.1 (geverifieerd). Dus GEEN BS5-klassen:
geen row-cols, text-end, ms- of me-, gap-, d-grid, visually-hidden.
Wel: col-*, order-md-*, mb-*, mr-*, sr-only, pagination, d-flex.
4. Font Awesome 6.5.2 is aanwezig; 'fa fa-xxx' werkt.
INHOUD
1. Tokens
2. Neutralisaties van globale regels (scoped)
3. Beeldkaders
4. Categorie-badge
5. Nieuwskaart
6. Sectiekop (homepage)
7. Categoriefilter
8. Overzichtspagina
9. Detailpagina + contentblokken
10. Artikeltypografie (.nws-prose)
11. CTA
12. Actief menu-item
13. Reduced motion
============================================================================= */
/* -----------------------------------------------------------------------------
1. TOKENS
Alleen kleuren die al in de huisstijl bestaan (overgenomen uit
noordmanhout.css), plus twee afgeleide waarden voor leesbaarheid.
Het project gebruikt zelf al CSS custom properties (var(--bs-body-color) in
de CMS-editor), dus dit is veilig.
-------------------------------------------------------------------------------- */
:root {
--nws-bruin: #473828; /* koppen, links */
--nws-bruin-donker: #322616; /* diepste bruin */
--nws-taupe: #a1937d; /* footer / dropdown / hover*/
--nws-beige: #eae7e3; /* usp-balk, vlakken */
--nws-grijs: #f4f4f4; /* topnav */
--nws-geel: #feda17; /* CTA-accent */
--nws-tekst: #212529; /* bodytekst (Bootstrap) */
/* Afgeleid, nieuw: */
--nws-tekst-zacht: #6b6257; /* meta/datum - 5,98:1 op wit, haalt AA */
--nws-lijn: #e3ded8; /* fijne scheidingslijn in beige-familie */
--nws-geel-donker: #e5c400; /* hoverstate CTA, alleen binnen .nws-cta */
/* Zelfde schaduw en easing die de site al gebruikt, zodat het nieuwe
onderdeel exact hetzelfde aanvoelt als de bestaande kaarten:
.product-list -> box-shadow: 0 0 10px rgba(0,0,0,.1)
.card-advise -> transition: .3s cubic-bezier(.25,.8,.25,1) */
--nws-schaduw: 0 0 10px rgba(0, 0, 0, .10);
--nws-schaduw-hoog: 0 8px 26px rgba(50, 38, 22, .18);
--nws-easing: .3s cubic-bezier(.25, .8, .25, 1);
/* Breedte van de leeskolom op de detailpagina.
De container is 1600px; tekst over die volle breedte is onleesbaar. */
--nws-kolom: 1180px;
}
/* -----------------------------------------------------------------------------
2. NEUTRALISATIES VAN GLOBALE REGELS (uitsluitend binnen de nieuwssectie)
Dit blok is nodig omdat noordmanhout.css een paar erg brede selectors heeft.
Zonder deze regels ziet de nieuwssectie er kapot uit.
-------------------------------------------------------------------------------- */
/* (a) noordmanhout.css: div:not(.style-blocks) a:hover { text-decoration: underline }
Een nieuwskaart is 1 grote . Zonder deze regel wordt bij hover ALLE
tekst in de kaart onderstreept (datum, titel, samenvatting).
Specificiteit moet hoger zijn dan 0-2-2, daarom twee klassen + element. */
.nws-kaart .nws-kaart__link:hover,
.nws-kaart .nws-kaart__link:focus {
text-decoration: none;
}
/* (b) noordmanhout.css: .fa { margin-right: .25em }
Onze pijl-iconen staan ACHTER de tekst, dus marge aan de andere kant. */
.nws-lees .fa,
.nws-sectiekop__link .fa,
.nws-terug .fa {
margin-right: 0;
margin-left: .4em;
}
/* (c) Bootstrap 4 zet border-radius:.25rem op .card, .badge, .btn, .breadcrumb,
.pagination, .page-link, .form-control en .list-group-item. In
noordmanhout.css wordt dat alleen PER COMPONENT genuld (.sidebar .card,
.nav-item .btn, .dropdown-menu, .card-advise/-customer/-locations); een
globale reset bestaat niet. Elk Bootstrap-component dat je hier nieuw
inzet komt dus met ronde hoeken in een verder consequent hoekig ontwerp.
Daarom één scoped reset, zodat dat ook geldt voor componenten die later
worden toegevoegd - betrouwbaarder dan overal rounded-0 in de markup. */
.nws-home,
.nws-overzicht,
.nws-artikel {
/* ankerpunt voor de reset hieronder */
}
.nws-home .card, .nws-overzicht .card, .nws-artikel .card,
.nws-home .badge, .nws-overzicht .badge, .nws-artikel .badge,
.nws-home .btn, .nws-overzicht .btn, .nws-artikel .btn,
.nws-home .breadcrumb, .nws-overzicht .breadcrumb, .nws-artikel .breadcrumb,
.nws-home .pagination, .nws-overzicht .pagination, .nws-artikel .pagination,
.nws-home .page-link, .nws-overzicht .page-link, .nws-artikel .page-link,
.nws-home .form-control,.nws-overzicht .form-control,.nws-artikel .form-control,
.nws-kaart img,
.nws-beeld img,
.nws-kaart,
.nws-blok img {
border-radius: 0;
}
/* (d) De bestaande helper .u-image zet WEL width:100% maar GEEN height.
Bij een bronafbeelding die breder is dan 3:2 (zoals de bestaande
banners, 16:9) ontstaat daardoor een lege strook onder de afbeelding.
Binnen de nieuwssectie vullen we het kader netjes met object-fit.
Buiten de nieuwssectie blijft .u-image ongewijzigd werken. */
.nws-kaart .u-image img,
.nws-beeld img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* -----------------------------------------------------------------------------
3. BEELDKADERS
Vaste beeldverhoudingen volgens hetzelfde padding-bottom-principe als de
bestaande .u-image, zodat er geen layout-shift optreedt tijdens het laden.
-------------------------------------------------------------------------------- */
.nws-beeld {
position: relative;
overflow: hidden;
background-color: var(--nws-beige); /* rustige plaatshouder tijdens laden */
}
.nws-beeld--hero { padding-bottom: 42%; } /* ~21:9 - hero detailpagina */
.nws-beeld--breed { padding-bottom: 45%; } /* ~20:9 - paginabreed blok */
.nws-beeld--media { padding-bottom: 72%; } /* ~4:3 - naast tekst */
.nws-beeld__caption {
margin: .75rem 0 0;
font-size: .8125rem;
line-height: 1.5;
color: var(--nws-tekst-zacht);
}
/* Ultrabrede kaders werken niet op een telefoon: het beeld wordt een streepje.
Onder md vallen ze terug op 3:2 - exact de verhouding die de site al
gebruikt in .u-image (66.53%). */
@media (max-width: 767.98px) {
.nws-beeld--hero,
.nws-beeld--breed { padding-bottom: 66.53%; }
.nws-beeld--media { padding-bottom: 66.53%; }
}
/* -----------------------------------------------------------------------------
4. CATEGORIE-BADGE
Kleur per categorie, uitsluitend uit het bestaande palet.
Alle combinaties zijn op contrast doorgerekend (WCAG AA, >= 4,5:1):
Nieuws #473828 op wit -> 9,0:1
Vacatures #322616 op taupe#a1937d -> 4,9:1 (witte tekst zou 3,0:1
zijn en dus FALEN, daarom hier donkerbruine tekst)
Aanbiedingen #212529 op geel #feda17 -> 11,2:1
Circulair wit op #322616 -> 15,4:1
-------------------------------------------------------------------------------- */
.nws-badge {
display: inline-block;
padding: .3rem .625rem;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .6875rem;
letter-spacing: .06em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
background-color: var(--nws-bruin);
color: #fff;
}
.nws-badge--nieuws { background-color: var(--nws-bruin); color: #fff; }
.nws-badge--vacatures { background-color: var(--nws-taupe); color: var(--nws-bruin-donker); }
.nws-badge--circulair { background-color: var(--nws-bruin-donker); color: #fff; }
/* Aanbiedingen krijgt bewust GEEN geel vlak maar een gele onderrand.
Reden: filter je het overzicht op Aanbiedingen, dan staan er twaalf gele
blokjes over het raster verspreid. Dat leest als een stippelpatroon en het
verwatert het geel, dat op deze site de betekenis "hier moet je klikken"
heeft (.btn-success). Het geel blijft dus voorbehouden aan CTA's en de kleine
accentstreepjes; de onderrand geeft de categorie toch zijn eigen signatuur. */
.nws-badge--aanbiedingen {
background-color: var(--nws-bruin);
color: #fff;
box-shadow: inset 0 -3px 0 var(--nws-geel);
}
/* Badge over de afbeelding heen, linksboven. */
.nws-badge--op-beeld {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
/* -----------------------------------------------------------------------------
5. NIEUWSKAART
Bewust GEEN .card / .style-blocks:
- .card van Bootstrap brengt border-radius .25rem mee (past niet in de
hoekige huisstijl) en we zouden die weer moeten wegpoetsen;
- .style-blocks .card .card-body is een dichte taupe balk met gecentreerde
titel; daar past geen datum + samenvatting + leesprikkel in.
Het bestaande beeldkader .u-image WORDT hergebruikt, zodat je collega
vertrouwde markup ziet.
-------------------------------------------------------------------------------- */
.nws-kaart {
position: relative;
height: 100%; /* gelijke hoogte binnen een .row */
background-color: #fff;
box-shadow: var(--nws-schaduw);
transition: transform var(--nws-easing), box-shadow var(--nws-easing);
}
.nws-kaart__link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
}
.nws-kaart__beeld {
position: relative;
overflow: hidden;
}
.nws-kaart__body {
display: flex;
flex-direction: column;
flex: 1 1 auto; /* duwt de leesprikkel naar onderen */
padding: 1.25rem 1.25rem 1.125rem;
}
.nws-kaart__meta {
margin: 0 0 .5rem;
font-size: .8125rem;
line-height: 1.3;
color: var(--nws-tekst-zacht);
}
/* De titel is een . Uppercase Archivo is hier juist GOED: het is een korte
labelachtige kop en sluit aan op .style-blocks .card-title elders op de site.
In de artikeltekst maken we die keuze anders (zie blok 10). */
.nws-kaart__titel {
margin: 0 0 .625rem;
font-size: 1.0625rem;
line-height: 1.25;
color: var(--nws-bruin);
transition: color var(--nws-easing);
/* Vangnet voor lange samenstellingen zonder spatie
("kozijnverbindingsprofielen") die anders uit de kaart lopen. */
overflow-wrap: break-word;
/* Vangt extreem lange titels op zonder de rasterhoogte te laten ontsporen */
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nws-kaart__samenvatting {
margin: 0 0 1rem;
font-size: .9rem; /* zelfde maat als bestaande .card-body */
line-height: 1.6;
color: var(--nws-tekst);
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nws-lees {
margin-top: auto; /* altijd onderaan uitgelijnd */
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .8125rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nws-bruin);
}
.nws-lees .fa {
transition: transform var(--nws-easing);
}
/* Hoverstate: subtiel optillen, pijl schuift mee. */
.nws-kaart:hover {
transform: translateY(-4px);
box-shadow: var(--nws-schaduw-hoog);
}
.nws-kaart:hover .nws-kaart__titel { color: var(--nws-bruin-donker); }
.nws-kaart:hover .nws-lees { text-decoration: underline; }
.nws-kaart:hover .nws-lees .fa { transform: translateX(4px); }
/* Toetsenbordgebruikers: duidelijke focusring in het geel van de huisstijl. */
.nws-kaart__link:focus {
outline: 3px solid var(--nws-geel);
outline-offset: -3px;
}
.nws-kaart__link:focus:not(:focus-visible) { outline: none; }
.nws-kaart__link:focus-visible {
outline: 3px solid var(--nws-geel);
outline-offset: -3px;
}
/* -----------------------------------------------------------------------------
6. SECTIEKOP (homepage: "Nieuws" + link naar het overzicht)
-------------------------------------------------------------------------------- */
.nws-home {
padding: 4rem 0 3.5rem;
background-color: #fff;
}
.nws-sectiekop {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--nws-lijn);
}
.nws-sectiekop__titel {
margin: 0;
font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
line-height: 1.15;
color: var(--nws-bruin);
}
/* Kleine gele markering boven de sectiekop: het accent van de huisstijl,
spaarzaam ingezet. */
.nws-sectiekop__titel::before {
content: "";
display: block;
width: 44px;
height: 4px;
margin-bottom: .75rem;
background-color: var(--nws-geel);
}
.nws-sectiekop__link {
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .875rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nws-bruin);
white-space: nowrap;
}
.nws-sectiekop__link .fa { transition: transform var(--nws-easing); }
.nws-sectiekop__link:hover .fa { transform: translateX(4px); }
@media (max-width: 575.98px) {
.nws-sectiekop { display: block; }
.nws-sectiekop__link { display: inline-block; margin-top: .75rem; }
}
/* -----------------------------------------------------------------------------
7. CATEGORIEFILTER
Bewuste keuze: een horizontale pillenbalk, GEEN sidebar met checkboxes zoals
op /aanbieding. Redenen:
- Categorie is enkelvoudige keuze ("toon alle vacatures"), geen combinatie
van meerdere assen zoals lengte/breedte/dikte in de catalogus.
- Het zijn gewone links met een querystring: deelbaar, indexeerbaar,
werkt zonder JavaScript en is in Razor 1 foreach.
- Op mobiel belandt een col-md-3 sidebar boven of onder de lijst; een
pillenbalk staat op elke schermbreedte direct onder de titel.
Tapdoel is minimaal 44px hoog (werkhandschoenen).
-------------------------------------------------------------------------------- */
.nws-filter {
display: flex;
flex-wrap: wrap;
margin: 0 0 2.5rem;
padding: 0;
list-style: none;
}
.nws-filter__item {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: 0 .5rem .5rem 0;
padding: .5rem 1.125rem;
border: 1px solid var(--nws-lijn);
background-color: #fff;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .8125rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nws-bruin);
transition: background-color var(--nws-easing), border-color var(--nws-easing), color var(--nws-easing);
}
.nws-filter__item:hover {
background-color: var(--nws-beige);
border-color: var(--nws-taupe);
color: var(--nws-bruin-donker);
text-decoration: none;
}
.nws-filter__item:focus-visible {
outline: 3px solid var(--nws-geel);
outline-offset: 2px;
}
/* Actieve categorie */
.nws-filter__item.is-actief {
background-color: var(--nws-bruin);
border-color: var(--nws-bruin);
color: #fff;
}
.nws-filter__item.is-actief:hover {
background-color: var(--nws-bruin-donker);
border-color: var(--nws-bruin-donker);
color: #fff;
}
/* Aantal berichten per categorie */
.nws-filter__aantal {
margin-left: .5rem;
font-size: .75rem;
font-weight: 700;
opacity: .65;
}
/* -----------------------------------------------------------------------------
8. OVERZICHTSPAGINA
-------------------------------------------------------------------------------- */
.nws-overzicht { padding-bottom: 4rem; }
.nws-paginakop { margin: 1.5rem 0 2rem; }
.nws-paginakop h1 {
margin: 0 0 .75rem;
font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
line-height: 1.1;
color: var(--nws-bruin);
}
.nws-paginakop__intro {
max-width: 68ch;
margin: 0;
font-size: 1.0625rem;
line-height: 1.65;
color: var(--nws-tekst);
}
/* Lege staat: wanneer een filter niets oplevert. */
.nws-leeg {
padding: 3.5rem 1.5rem;
background-color: var(--nws-grijs);
text-align: center;
}
.nws-leeg__titel {
margin: 0 0 .5rem;
font-size: 1.125rem;
color: var(--nws-bruin);
}
.nws-leeg p { margin: 0; color: var(--nws-tekst-zacht); }
/* Paginering: .page-item/.page-link zijn al in noordmanhout.css gestyled
(actief = #212529). Wat daar ONTBREEKT is het nullen van de hoeken:
Bootstrap zet border-radius .25rem op .pagination en op de eerste/laatste
.page-link. In een verder consequent hoekig ontwerp valt dat op. */
.nws-paginering {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
.nws-paginering .pagination { border-radius: 0; }
.nws-paginering .page-link,
.nws-paginering .page-item:first-child .page-link,
.nws-paginering .page-item:last-child .page-link {
border-radius: 0;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Archivo", sans-serif;
font-weight: 800;
}
/* --- Kruimelpad ---------------------------------------------------------------
noordmanhout.css maakt .breadcrumb al plat (witte achtergrond, geen padding),
maar Bootstrap's grijs #6c757d voor het scheidingsteken en het actieve item
blijft staan. Dat grijs staat kil naast het bruine palet, dus scoped
bijgesteld. Ook hier de ronde hoek weggehaald. */
.nws-kruimels .breadcrumb {
border-radius: 0;
margin-bottom: 0;
font-size: .875rem;
}
.nws-kruimels .breadcrumb-item + .breadcrumb-item::before { color: var(--nws-taupe); }
.nws-kruimels .breadcrumb-item.active { color: var(--nws-tekst-zacht); }
.nws-kruimels .breadcrumb-item a { color: var(--nws-bruin); }
/* -----------------------------------------------------------------------------
9. DETAILPAGINA + CONTENTBLOKKEN
Opbouw: alle blokken zijn ZUSTERELEMENTEN. Het CMS mag ze in willekeurige
volgorde en willekeurig aantal uitschrijven; er is geen wrapper per groep.
Drie breedtes, zodat "paginabreed" ook echt paginabreed is:
.nws-kolom -> max 1180px, gecentreerd (kop, tekst, beeld+tekst)
(geen .nws-kolom) -> volle breedte van .container--alt (paginabreed beeld)
.nws-prose -> tekst binnen de kolom max 72 tekens breed
Alle tekst houdt daardoor dezelfde linkerrand; het volle-breedte beeld is
het bewuste accent.
-------------------------------------------------------------------------------- */
.nws-artikel { padding-bottom: 4rem; }
.nws-kolom {
max-width: var(--nws-kolom);
margin-left: auto;
margin-right: auto;
}
/* --- Artikelkop ---
LET OP: hier bewust margin-top/margin-bottom en NIET de margin-shorthand.
.nws-artikel__kop draagt ook .nws-kolom, en die zet margin-left/right:auto
om de kolom te centreren. Een shorthand 'margin: 1.5rem 0 2rem' zou die
auto-marges terugzetten op 0, waardoor de artikeltitel 178px links van alle
bodytekst uitkomt. */
.nws-artikel__kop {
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.nws-artikel__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1rem;
}
.nws-artikel__meta .nws-badge { margin-right: .75rem; }
.nws-artikel__datum {
font-size: .875rem;
color: var(--nws-tekst-zacht);
}
/* H1 blijft WEL uppercase Archivo 800: dat is het handelsmerk van de site
en op één regel-blok werkt het krachtig. Zie blok 10 voor h2/h3. */
.nws-artikel__titel {
max-width: 30ch; /* op 24ch liep deze titel over 3 regels; 30ch geeft 2 */
margin: 0 0 1.25rem;
/* Bovengrens bewust 3rem (48px) en niet groter: de bestaande h1 op de
CMS-pagina's is de Bootstrap-standaard van 2.5rem (40px). Verder
opschalen zou zwaarder worden dan wat het merk elders laat zien. */
font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
line-height: 1.08;
color: var(--nws-bruin);
}
.nws-artikel__lead {
max-width: 62ch;
margin: 0;
font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
line-height: 1.6;
color: var(--nws-bruin);
}
/* --- Hero-afbeelding --- */
.nws-artikel__hero { margin-bottom: 3rem; }
/* --- Blokken --- */
.nws-blok { margin-bottom: 3.5rem; }
.nws-blok:last-child { margin-bottom: 0; }
/* Blok B/C: beeld naast tekst.
Op mobiel staat het beeld altijd BOVEN de tekst, ongeacht links/rechts,
zodat de leesrichting voorspelbaar blijft. Dat regelen de order-md-*
klassen in de HTML (order-* bestaat in Bootstrap 4). */
.nws-blok--media .nws-beeld { margin-bottom: 0; }
@media (max-width: 767.98px) {
.nws-blok--media .nws-beeld { margin-bottom: 1.5rem; }
}
/* Paginabreed beeld: geen .nws-kolom, dus volle breedte van de container. */
.nws-blok--beeld { margin-bottom: 3.5rem; }
.nws-blok--beeld figcaption { max-width: var(--nws-kolom); margin-left: auto; margin-right: auto; }
/* Terug-link onderaan het artikel */
.nws-terug {
display: inline-block;
margin-top: 1rem;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .8125rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--nws-bruin);
}
.nws-terug .fa { margin-left: 0; margin-right: .4em; }
/* Blok "Meer nieuws" onder het artikel.
Bewust GEEN border-top: de sectiekop heeft zelf al een onderlijn plus het
gele accentstreepje, dus een extra scheidingslijn erboven werd dubbelop. */
.nws-meer {
margin-top: 4rem;
padding-top: 3rem;
}
/* -----------------------------------------------------------------------------
10. ARTIKELTYPOGRAFIE (.nws-prose)
Alles wat de redacteur in het CMS in een tekstblok typt, valt hieronder.
DE UPPERCASE-KEUZE
noordmanhout.css bevat:
h1,h2,h3,h4,h5,.h1..h5,.nav-item a {
font-family:"Archivo"; font-weight:800; text-transform:uppercase }
In een lang artikel worden h2/h3 daardoor blokken kapitalen: dat leest
zwaar en trager, en bij lange Nederlandse samenstellingen loopt het over
meerdere regels. Daarom BINNEN .nws-prose:
- lettertype Archivo blijft (herkenbaar de huisstijl)
- gewicht 800 (h2) / 700 (h3) blijft (zelfde stem)
- text-transform wordt none (leesbaarheid)
De H1 van het artikel blijft wél uppercase, zodat de merkuitstraling
bovenaan de pagina intact is.
Wil de merkeigenaar toch overal kapitalen? Dan is dit terug te draaien
door in dit blok de twee regels 'text-transform: none' te verwijderen.
-------------------------------------------------------------------------------- */
.nws-prose {
/* Geen eigen maximum: de breedte wordt bepaald door .nws-kolom (1180px),
dus ongeveer 3/4 van de paginabreedte. Bij een beeld-naast-tekstblok is
dat de halve kolom.
Wil je de regels korter (typografisch leest 65-85 tekens het prettigst),
zet hier dan max-width: 90ch. Dat is de enige knop die je hoeft te draaien. */
max-width: none;
font-size: 1rem;
line-height: 1.75;
color: var(--nws-tekst);
/* De redacteur levert willekeurige tekst aan; lange samenstellingen mogen
de layout niet openbreken. */
overflow-wrap: break-word;
}
.nws-prose > *:first-child { margin-top: 0; }
.nws-prose > *:last-child { margin-bottom: 0; }
.nws-prose h2 {
margin: 2.75rem 0 1rem;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
line-height: 1.2;
text-transform: none; /* <- de bewuste afwijking, zie boven */
color: var(--nws-bruin);
}
/* Zelfde gele markering als de sectiekop: bindt de pagina's aan elkaar. */
.nws-prose h2::before {
content: "";
display: block;
width: 36px;
height: 3px;
margin-bottom: .75rem;
background-color: var(--nws-geel);
}
.nws-prose h3 {
margin: 2rem 0 .75rem;
font-family: "Archivo", sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
line-height: 1.3;
text-transform: none; /* <- de bewuste afwijking, zie boven */
color: var(--nws-bruin-donker);
}
.nws-prose p { margin: 0 0 1.25rem; }
.nws-prose a {
color: var(--nws-bruin);
text-decoration: underline;
text-underline-offset: .15em;
text-decoration-thickness: 1px;
}
.nws-prose a:hover,
.nws-prose a:focus {
color: var(--nws-bruin-donker);
text-decoration-thickness: 2px;
}
.nws-prose strong { font-weight: 700; color: var(--nws-bruin-donker); }
/* Opsommingen. Vierkante gele opsommingstekens: rond zou botsen met de
consequent hoekige huisstijl (border-radius: 0 overal). */
.nws-prose ul,
.nws-prose ol {
margin: 0 0 1.5rem;
padding: 0;
list-style: none;
}
.nws-prose ul > li,
.nws-prose ol > li {
position: relative;
padding-left: 1.75rem;
margin-bottom: .625rem;
}
.nws-prose ul > li::before {
content: "";
position: absolute;
left: .25rem;
top: .6875rem;
width: 7px;
height: 7px;
background-color: var(--nws-geel);
}
.nws-prose ol { counter-reset: nws-teller; }
.nws-prose ol > li { counter-increment: nws-teller; }
.nws-prose ol > li::before {
content: counter(nws-teller) ".";
position: absolute;
left: 0;
top: 0;
font-family: "Archivo", sans-serif;
font-weight: 800;
color: var(--nws-bruin);
}
/* Genest lijstje */
.nws-prose li > ul { margin: .625rem 0 0; }
/* Afbeelding die de redacteur middenin een tekstblok zet */
.nws-prose img {
max-width: 100%;
height: auto;
margin: 1.5rem 0;
}
/* -----------------------------------------------------------------------------
11. CTA
Hergebruikt de bestaande knop .btn.btn-success (geel #feda17, zwarte tekst).
De hoverstate van de site is background-color:#feda1745 (geel op 27%
dekking) waardoor de knop uitgeschakeld lijkt. Dat wordt hier ALLEEN binnen
.nws-cta gecorrigeerd naar een verzadigder geel; buiten de nieuwssectie
blijft het bestaande gedrag ongemoeid.
-------------------------------------------------------------------------------- */
.nws-cta {
margin: 2.5rem 0 0;
padding: 2rem 2rem 2.125rem;
background-color: var(--nws-beige);
}
.nws-cta__titel {
margin: 0 0 .5rem;
font-size: 1.25rem;
color: var(--nws-bruin);
}
.nws-cta__tekst {
max-width: 60ch;
margin: 0 0 1.5rem;
line-height: 1.65;
color: var(--nws-tekst);
}
.nws-cta .btn-success {
padding: .875rem 2rem;
border-radius: 0;
font-family: "Archivo", sans-serif;
font-weight: 800;
font-size: .9375rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.nws-cta .btn-success:hover,
.nws-cta .btn-success:focus {
background-color: var(--nws-geel-donker) !important;
border-color: var(--nws-geel-donker) !important;
color: #000 !important;
}
/* Op een telefoon veroorzaakte deze knop horizontale overflow. Oorzaak: een
inline-block krimpt nooit onder zijn min-content-breedte, en die wordt bepaald
door het langste woord. "TRANSPORTMOGELIJKHEDEN" is in Archivo 800 uppercase
al 264px, plus 2x2rem padding = 329px in een viewport van 375px.
Nederlandse samenstellingen zijn lang, dus dit komt met echte CMS-teksten
terug. Daarom: minder padding, knop over de volle breedte, en toestaan dat
een extreem lang woord alsnog afbreekt. */
@media (max-width: 575.98px) {
.nws-cta { padding: 1.5rem 1.25rem 1.625rem; }
.nws-cta .btn-success {
display: block;
width: 100%;
padding: .875rem 1rem;
overflow-wrap: break-word;
}
}
/* -----------------------------------------------------------------------------
12. ACTIEF MENU-ITEM
Zet in Razor class="btn w-100 nws-nav-actief" op het Nieuws-item wanneer
de huidige route /nieuws is.
-------------------------------------------------------------------------------- */
.navbar-nav .nav-item .nws-nav-actief {
background-color: var(--nws-taupe);
box-shadow: inset 0 -4px 0 var(--nws-geel);
}
/* -----------------------------------------------------------------------------
13. REDUCED MOTION
Respecteert de systeeminstelling van de bezoeker.
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.nws-kaart,
.nws-kaart__titel,
.nws-lees .fa,
.nws-sectiekop__link .fa,
.nws-filter__item {
transition: none;
}
.nws-kaart:hover { transform: none; }
.nws-kaart:hover .nws-lees .fa { transform: none; }
.nws-sectiekop__link:hover .fa { transform: none; }
}