/* ===========================================================================
hsb-vorm.css — de asymmetrische vormentaal van SprekersburO
===========================================================================
DE REGEL
--------
Twee uitgesproken afgeronde hoeken, linksboven en rechtsonder. Twee
vrijwel rechte hoeken van 2 px, rechtsboven en linksonder. Altijd dezelfde
richting; nooit gespiegeld.
In CSS is de volgorde linksboven, rechtsboven, rechtsonder, linksonder.
De vorm is dus altijd: groot 2px groot 2px.
WAAROM DIT BESTAND ZO WERKT
---------------------------
In de code stonden 521 Bootstrap-klassen (rounded-5, rounded-pill,
rounded-4) verspreid over 93 bestanden. Die klassen zetten alle vier de
hoeken gelijk en kunnen deze vorm dus niet maken.
In plaats van 93 bestanden met de hand aan te passen, worden die klassen
hieronder opnieuw gedefinieerd. Eén bestand erbij, en de hele site
verandert mee. De HTML hoeft niet aangeraakt te worden.
Wat dit bestand NIET kan: losse border-radius in een style-attribuut.
Die wint altijd van een stylesheet, behalve waar het element ook een
rounded-klasse draagt. Die plekken staan in LEESMIJ.txt.
LETTERTYPEN
-----------
Dit bestand raakt geen enkel lettertype aan. Museo700 en Museo300 blijven
precies zoals ze zijn.
VOLGORDE
--------
Laad dit NA bootstrap.css en NA site.css, anders winnen die.
=========================================================================== */
:root {
/* De zes maten. Hier draai je aan, nergens anders. */
--radius-xs: 14px 2px 14px 2px; /* tags, filterknoppen, badges */
--radius-sm: 18px 2px 18px 2px; /* zoekvelden, formuliervelden */
--radius-button: 22px 2px 22px 2px; /* primaire en secundaire knop */
--radius-card: 24px 2px 24px 2px; /* spreker- en categoriekaarten */
--radius-large: 40px 2px 40px 2px; /* grote contentblokken, logo */
--radius-hero: 48px 2px 48px 2px; /* hero-panelen */
/* De kaart bestaat uit twee blokken tegen elkaar aan: de foto rondt
alleen bovenaan af, het tekstvlak alleen onderaan. Samen vormen ze
één buitenvorm, zonder dat er iets wordt afgeknipt. */
--radius-card-top: 24px 2px 0 0;
--radius-card-bottom: 0 0 24px 2px;
/* Kleuren komen uit site.css; hier alleen een terugval zodat dit
bestand ook los te bekijken is. */
--hsb-blauw: var(--brand-blue, #103856);
--hsb-oranje: var(--brand-orange, #f56c20);
/* De vulkleur van de primaire knop.
LET OP: witte tekst op #f56c20 haalt een contrast van 2,98 op 1,
terwijl de norm 4,5 is. Wil je dat oplossen zonder dat het op het oog
verandert, zet dan de regel hieronder aan:
--hsb-oranje-knop: #c24d16;
Die haalt 4,5. */
--hsb-oranje-knop: var(--hsb-oranje);
--hsb-oranje-knop-hover: #d9541a;
--hsb-lijn: #dce6ef;
--hsb-licht: #eef4f9;
--hsb-grijs: #5a6b7b;
}
/* Op een telefoon worden de grote afrondingen iets kleiner: een hoek van
48 px op een vlak van 340 breed vreet te veel van de inhoud. */
@media (max-width: 575.98px) {
:root {
--radius-card: 20px 2px 20px 2px;
--radius-large: 28px 2px 28px 2px;
--radius-hero: 32px 2px 32px 2px;
--radius-card-top: 20px 2px 0 0;
--radius-card-bottom: 0 0 20px 2px;
}
}
/* ===========================================================================
1. De bestaande Bootstrap-klassen omzetten
===========================================================================
Hiermee verandert in één keer wat er al in de HTML staat. De verhouding
blijft kloppen: rounded-4 was 16 px en wordt de kleine maat, rounded-5 was
32 px en wordt de kaartmaat.
!important is hier nodig omdat Bootstrap zijn eigen utilities ook met
!important zet. Zonder dat wint Bootstrap.
=========================================================================== */
.rounded,
.rounded-1,
.rounded-2 { border-radius: var(--radius-xs) !important; }
.rounded-3,
.rounded-4 { border-radius: var(--radius-sm) !important; }
.rounded-5 { border-radius: var(--radius-card) !important; }
/* rounded-pill zit 107 keer op een knop en 23 keer op een badge. Die twee
horen een andere maat te krijgen, dus ze worden apart behandeld. */
.btn.rounded-pill { border-radius: var(--radius-button) !important; }
.badge.rounded-pill { border-radius: var(--radius-xs) !important; }
/* De rest van de ovalen: kleine labels en chips. */
.rounded-pill:not(.btn):not(.badge):not(.rounded-circle) {
border-radius: var(--radius-xs) !important;
}
/* Alle knoppen die geen rounded-klasse dragen krijgen de vorm alsnog.
Geen !important: een utility in de HTML mag dit nog overrulen. */
.btn:not(.rounded-circle):not(.btn-close) {
border-radius: var(--radius-button);
}
/* Formulier- en zoekvelden. */
.form-control:not(.rounded-circle),
.form-select:not(.rounded-circle),
.input-group > .form-control,
.input-group > .form-select {
border-radius: var(--radius-sm);
}
/* Kaarten die nog geen eigen klasse hebben. */
.card:not(.rounded-circle) {
border-radius: var(--radius-card);
}
/* UITZONDERINGEN — deze blijven rond, zoals afgesproken.
Hartje, zoekicoon, sluitknop, kleine navigatiepijlen en avatars. */
.rounded-circle,
.btn-close,
.hsb-rond {
border-radius: 50% !important;
}
/* En deze blijven recht: strepen, voortgangsbalken, tabelranden. */
.progress,
.progress-bar,
hr {
border-radius: 0 !important;
}
/* ===========================================================================
2. De sprekerskaart
===========================================================================
Foto boven, compact tekstvlak er direct onder. Twee blokken, één vorm.
=========================================================================== */
.hsb-kaart {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.hsb-kaart__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
text-decoration: none;
color: inherit;
/* De kaart als geheel komt omhoog bij aanwijzen, niet de losse delen. */
transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}
.hsb-kaart__link:hover,
.hsb-kaart__link:focus-visible {
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(16, 56, 86, .13);
text-decoration: none;
color: inherit;
}
/* Het vak om de foto. Zonder dit vak hangt het taalblokje aan de onderkant
van de hele kaart in plaats van aan de onderkant van de foto -- het
hartje viel dat niet op, want de bovenkant van de kaart en de bovenkant
van de foto zijn wél dezelfde lijn. */
.hsb-kaart__beeldvak {
position: relative;
display: block;
}
.hsb-kaart__beeld {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
/* Het gezicht zit bij een portret vaak in de bovenste helft. Vierkant
afsnijden vanaf het midden hakt dan net de kruin eraf. */
object-position: center 22%;
border-radius: var(--radius-card-top);
background: var(--hsb-licht);
}
.hsb-kaart__tekst {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hsb-lijn);
border-top: 0;
border-radius: var(--radius-card-bottom);
padding: 1.15rem 1.25rem 1.25rem;
}
/* De donkerblauwe variant, voor uitgelichte sprekers. Bewust inzetten:
een paar per overzicht, niet willekeurig. */
.hsb-kaart--uitgelicht .hsb-kaart__tekst {
background: var(--hsb-blauw);
border-color: var(--hsb-blauw);
}
.hsb-kaart__naam {
margin: 0 0 .3rem;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.25;
color: var(--hsb-blauw);
}
.hsb-kaart--uitgelicht .hsb-kaart__naam { color: #fff; }
/* Afgekapt op twee regels, zodat alle kaarten in een rij even hoog blijven.
Zonder de regelhoogte vast te zetten wordt een rij net zo hoog als de
langste tekst erin. */
.hsb-kaart__onderwerpen {
margin: 0 0 1rem;
font-size: .875rem;
line-height: 1.45;
color: var(--hsb-grijs);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.9em;
}
.hsb-kaart--uitgelicht .hsb-kaart__onderwerpen { color: rgba(255, 255, 255, .78); }
.hsb-kaart__voet {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.hsb-kaart__tarief {
font-size: .9rem;
font-weight: 700;
color: var(--hsb-blauw);
}
.hsb-kaart--uitgelicht .hsb-kaart__tarief { color: #fff; }
/* Het ronde oranje pijltje rechtsonder. Dit is een van de uitzonderingen:
klein, functioneel, dus rond. */
.hsb-kaart__ga {
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--hsb-oranje-knop);
color: #fff;
transition: background-color .22s, transform .22s;
}
.hsb-kaart__link:hover .hsb-kaart__ga {
background: var(--hsb-oranje-knop-hover);
transform: translateX(3px);
}
/* Het hartje, linksboven op de foto. Ook rond. */
.hsb-kaart__hart {
position: absolute;
top: .85rem;
right: .85rem;
z-index: 2;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
/* 50% wit. Op een lichte foto zou dat vlakje bijna verdwijnen, dus er
gaat een vervaging achter: dan blijft het hartje leesbaar op elke
foto zonder dat het wit zwaarder wordt. Diezelfde truc staat al op de
prijsbadge in dagvoorzitters.php. */
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--hsb-blauw);
cursor: pointer;
transition: background-color .2s, color .2s;
}
.hsb-kaart__hart:hover,
.hsb-kaart__hart:focus-visible {
background: #fff;
color: var(--hsb-oranje-knop);
}
.hsb-kaart__hart.is-aan {
background: #fff;
color: var(--hsb-oranje-knop);
}
/* Het hartje heeft twee tekeningen in één knop: een open lijnhartje en een
gevuld. Welke je ziet hangt aan .is-aan, dus de knop hoeft bij het
aanklikken alleen die klasse om te wisselen -- geen SVG herschrijven.
*/
.hsb-kaart__hart .hsb-hart--vol { display: none; }
.hsb-kaart__hart.is-aan .hsb-hart--open { display: none; }
.hsb-kaart__hart.is-aan .hsb-hart--vol { display: block; }
/* --- de taal, linksonder op de foto -------------------------------------
Een vlag zegt strikt genomen iets over een land en niet over een taal.
Daarom staat er altijd ook een tekstregel in die alleen een schermlezer
voorleest: "Spreekt Nederlands en Engels". Zo weet iedereen het, ook wie
het vlaggetje niet ziet of niet herkent. */
.hsb-kaart__talen {
position: absolute;
bottom: .85rem;
left: .85rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .3rem .45rem;
/* Bewust GEEN huisvorm. Op een balkje van 30 bij 22 px wordt een hoek
van 14 px zo groot dat het er rommelig uitziet, en jullie briefing
zegt het zelf: houd kleine details rustig. Rond past bovendien bij
het ronde hartje in de andere hoek -- allebei functionele dingetjes,
allebei de uitzondering op de vormentaal. */
border-radius: 999px;
/* Zelfde 50% als bij het hartje, met dezelfde vervaging erachter. */
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(16, 56, 86, .12);
}
.hsb-kaart__vlag {
display: block;
width: 1.3rem;
height: auto;
border-radius: 2px;
/* Een witte vlag op een wit vlakje valt anders weg. */
outline: 1px solid rgba(16, 56, 86, .16);
outline-offset: -1px;
}
/* Een taal waar geen vlag voor getekend is, bijvoorbeeld omdat hij later in
de tabel `talen` is bijgekomen: dan de eerste twee letters in hetzelfde
formaat. Geen gat en geen vraagteken. */
.hsb-kaart__vlag--tekst {
display: flex;
align-items: center;
justify-content: center;
width: 1.3rem;
height: .87rem;
background: var(--hsb-licht);
color: var(--hsb-blauw);
font-size: .6rem;
font-weight: 700;
letter-spacing: .02em;
}
/* Spreekt iemand meer dan drie talen, dan wordt het een rijtje postzegels.
Vanaf de vierde komt er "+2" achter in plaats van nog meer vlaggen. */
.hsb-kaart__talen-meer {
font-size: .7rem;
font-weight: 700;
color: var(--hsb-grijs);
padding: 0 .15rem;
}
/* Een label op de foto. LET OP: niet voor de rol gebruiken op /sprekers of
/dagvoorzitters -- daar weet de bezoeker al waar hij is. Wel zinvol in een
gemengde lijst: zoekresultaten, favorieten, een landingspagina. En voor
"Uitgelicht". */
.hsb-kaart__label {
position: absolute;
top: .85rem;
left: .85rem;
z-index: 2;
padding: .35rem .7rem;
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, .94);
font-size: .72rem;
font-weight: 700;
color: var(--hsb-blauw);
}
/* ===========================================================================
3. Knoppen
=========================================================================== */
.hsb-knop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 3rem;
padding: .75rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--radius-button);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .22s, border-color .22s, color .22s, transform .1s;
}
.hsb-knop:active { transform: translateY(1px); }
.hsb-knop--pri {
background: var(--hsb-oranje-knop);
color: #fff;
}
.hsb-knop--pri:hover,
.hsb-knop--pri:focus-visible {
background: var(--hsb-oranje-knop-hover);
color: #fff;
}
.hsb-knop--sec {
background: var(--hsb-blauw);
color: #fff;
}
.hsb-knop--sec:hover,
.hsb-knop--sec:focus-visible {
background: #0b2740;
color: #fff;
}
.hsb-knop--lijn {
background: #fff;
border-color: #c3d4e2;
color: var(--hsb-blauw);
}
.hsb-knop--lijn:hover,
.hsb-knop--lijn:focus-visible {
background: var(--hsb-licht);
border-color: #a9c1d4;
color: var(--hsb-blauw);
}
/* Het pijltje schuift een duwtje mee. Meer beweging hoeft niet. */
.hsb-knop .hsb-pijl { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.hsb-knop:hover .hsb-pijl { transform: translateX(3px); }
/* Kleine ronde iconknoppen: hartje, zoeken, sluiten, navigatiepijl. */
.hsb-rond {
width: 2.75rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #c3d4e2;
background: #fff;
color: var(--hsb-blauw);
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.hsb-rond:hover,
.hsb-rond:focus-visible {
background: var(--hsb-blauw);
border-color: var(--hsb-blauw);
color: #fff;
}
/* ===========================================================================
4. Zoeken, filteren en formulieren
=========================================================================== */
.hsb-veld {
display: flex;
align-items: center;
gap: .7rem;
min-height: 3.25rem;
padding: 0 1.1rem;
border: 1px solid #c3d4e2;
border-radius: var(--radius-sm);
background: #fff;
transition: border-color .2s, box-shadow .2s;
}
.hsb-veld:focus-within {
border-color: var(--hsb-blauw);
box-shadow: 0 0 0 3px rgba(16, 56, 86, .12);
}
.hsb-veld input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font-size: 1rem;
color: inherit;
}
.hsb-filter {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 2.6rem;
padding: .55rem 1.1rem;
border: 1px solid #c3d4e2;
border-radius: var(--radius-xs);
background: #fff;
color: var(--hsb-grijs);
font-size: .9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.hsb-filter:hover,
.hsb-filter:focus-visible {
background: var(--hsb-licht);
border-color: #a9c1d4;
color: var(--hsb-blauw);
}
.hsb-filter.is-aan,
.hsb-filter[aria-pressed="true"] {
background: var(--hsb-blauw);
border-color: var(--hsb-blauw);
color: #fff;
}
.hsb-tag {
display: inline-block;
padding: .35rem .7rem;
border-radius: var(--radius-xs);
background: var(--hsb-licht);
color: var(--hsb-grijs);
font-size: .78rem;
font-weight: 600;
}
/* ===========================================================================
5. Panelen en grote vlakken
=========================================================================== */
.hsb-paneel {
border-radius: var(--radius-hero);
overflow: hidden;
}
.hsb-vlak {
border-radius: var(--radius-large);
}
.hsb-vlak--blauw {
background: var(--hsb-blauw);
color: #fff;
}
.hsb-vlak--licht {
background: var(--hsb-licht);
}
/* Het vlak achter het logo in de kopbalk. Het logo zelf blijft ongewijzigd. */
.hsb-logo-vlak {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-large);
background: var(--hsb-licht);
}
/* ===========================================================================
6. Beweging
===========================================================================
Wie in zijn systeem heeft staan dat hij minder beweging wil, krijgt die
ook niet. Dat is één regel en het scheelt mensen met evenwichtsklachten
een hoop.
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
.hsb-kaart__link,
.hsb-kaart__ga,
.hsb-knop,
.hsb-knop .hsb-pijl,
.hsb-filter,
.hsb-rond,
.hsb-veld {
transition: none;
}
.hsb-kaart__link:hover { transform: none; }
}