/* ByGiel — de opmaak van de locatiepagina's, het blogoverzicht en de plaatsenlijst. * * ========================================================================== * DE KLEURVARIABELEN, EN WAT ER MIS WAS * * Deze stonden op `.byg-locatie, .byg-blog, .byg-locatielijst`. Dat leek netjes — geen * lekkage naar de rest van de pagina — maar de helft van mijn eigen blokken staat NAAST * die elementen en niet erin: de filterknoppen, de inhoudsopgave, de oproep en de * omhulling van de gerelateerde artikelen. * * Daar was elke `var(--byg-*)` dus ongedefinieerd, en een declaratie met een * ongedefinieerde variabele gooit de browser weg. Gevolgen, allemaal zichtbaar: * * - `.byg-pil.is-actief` verloor zijn achtergrond maar hield `color: #fff` * -> de knop "Alles" stond er als WITTE TEKST OP WIT * - de rand om de knoppen verdween * - mijn hover verdween, dus de hover-achtergrond van het thema won: roze * - de inhoudsopgave en de oproep hadden helemaal geen vlak * * Nu staan ze op `body`. Niet op `:root`: Elementor zet zijn kit-klasse * (`elementor-kit-5`) op de BODY, dus op `:root` zijn de globals nog niet bekend en zou * hij stilletjes op mijn terugvalwaarden draaien. Dat is dezelfde fout een niveau hoger. * * ========================================================================== * WELKE KLEUR VAN WIE * * Het accent volgt de site: dat is de knopkleur, en die hoort mee te veranderen als de * klant hem in Elementor aanpast. * * Kop- en tekstkleur volgen de site NIET meer. De kit van deze site heeft `primary` op * het accentblauw staan, dus elke kaarttitel werd blauw terwijl het ontwerp daar bijna * zwart heeft. En `text` is er zo licht dat de datumregel met `opacity: .65` vrijwel * onleesbaar werd. Deze twee komen daarom uit het ontwerp zelf: #0A2342 is de donkere * kleur uit de hero, gemeten in de Magic Patterns-bundel. */ body { --byg-tekst: #475569; /* de kit heeft hier #EEF4FF: bijna wit, dus onleesbaar op wit */ --byg-zacht: #64748b; /* datum en leestijd; geen opacity meer */ --byg-kop: #0A2342; /* de donkere kleur uit het ontwerp */ /* PRIMARY, niet accent. Gemeten in de browser op de live site: * primary #4A9FFF <- de knop "Plan kennismaking" meet exact rgb(74,159,255) * secondary #2B5EAD het donkerdere blauw van de kopbanden * text #EEF4FF bijna wit; bedoeld voor tekst op een donkere achtergrond * accent #1F2937 bijna zwart * Deze kit gebruikt "accent" dus niet voor het accent. Dat was niet te raden en ik * had het ook niet moeten raden: ik las de rolnamen en nam aan wat ze betekenden. */ --byg-accent: var(--e-global-color-primary, #4A9FFF); --byg-rand: rgba(15, 23, 42, .12); --byg-vlak: rgba(15, 23, 42, .04); } .byg-locatie, .byg-blog, .byg-locatielijst { color: var(--byg-tekst); } /* ------------------------------------------------------------------ kop */ .byg-kop { margin-bottom: 2.5rem; } .byg-ref { margin: 0 0 1.25rem; opacity: .75; } .byg-feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1px; background: var(--byg-rand); border: 1px solid var(--byg-rand); border-radius: 12px; overflow: hidden; } .byg-feiten li { flex: 1 1 12rem; min-width: 0; /* min-width 0: anders wil een flexitem niet krimpen */ background: #fff; padding: .85rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; } .byg-feiten strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; } /* -------------------------------------------------------------- secties */ .byg-locatie section { margin: 0 0 2.75rem; } .byg-locatie h2 { color: var(--byg-kop); margin: 0 0 .75rem; } .byg-context p { margin: 0 0 1rem; } .byg-varianten h2 { margin-top: 2rem; font-size: 1.25rem; } .byg-varianten h2:first-child { margin-top: 0; } /* -------------------------------------------------------------- kaarten */ .byg-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .byg-kaart { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem; text-decoration: none; color: inherit; border: 1px solid var(--byg-rand); border-radius: 12px; background: #fff; transition: border-color .15s, transform .15s; } .byg-kaart:hover { border-color: var(--byg-accent); transform: translateY(-2px); } .byg-kaart strong { color: var(--byg-kop); } .byg-kaart span { font-size: .92rem; opacity: .8; } /* ---------------------------------------------------------------- vragen */ .byg-vraag { border-bottom: 1px solid var(--byg-rand); padding: .9rem 0; } .byg-vraag summary { cursor: pointer; font-weight: 600; color: var(--byg-kop); list-style: none; } .byg-vraag summary::-webkit-details-marker { display: none; } .byg-vraag summary::before { content: "+"; margin-right: .6rem; color: var(--byg-accent); } .byg-vraag[open] summary::before { content: "–"; } .byg-vraag > div { padding-top: .5rem; } /* ---------------------------------------------------------------- buren */ .byg-buren ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .byg-buren a { display: inline-block; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--byg-rand); text-decoration: none; color: inherit; font-size: .93rem; } .byg-buren a:hover { border-color: var(--byg-accent); color: var(--byg-accent); } /* ------------------------------------------------------------------ cta */ .byg-cta { background: var(--byg-vlak); border-radius: 16px; padding: 2rem; } .byg-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; } .byg-knop { display: inline-block; padding: .8rem 1.5rem; border-radius: 999px; background: #1d4ed8; background: var(--byg-accent); color: #fff; text-decoration: none; font-weight: 600; } .byg-knop-licht { background: transparent; color: #1d4ed8; color: var(--byg-accent); border: 1px solid #1d4ed8; border-color: var(--byg-accent); } /* ----------------------------------------------------------------- blog * * Nagebouwd naar de kaart uit het ontwerp: beeld van 16:9 bovenaan, categorie als * badge erover, datum en leestijd, titel, samenvatting van drie regels, en "Lees * artikel" met een pijl die meebeweegt. * * De kaart is een met -elementen erin en geen
's: een blok-element in * een link is geldig in HTML5, maar een
in een geeft in sommige * screenreaders een rare voorlezing. Spans met display:block doen hetzelfde zonder * dat bezwaar. */ /* De secties van de locatiepagina, zodat ze niet tegen elkaar aan lopen. */ .byg-diensten, .byg-faq { margin-top: 3rem; } .byg-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 2.5rem; } /* Elke regel hieronder staat er TWEE keer: eerst met een vaste waarde, dan met de * variabele. Valt de variabele ooit weer weg, dan gooit de browser alleen de tweede weg * en blijft de eerste staan. Dat is precies wat hier eerder ontbrak: `is-actief` hield * `color: #fff` over zonder achtergrond, en dan lees je niets meer. */ .byg-pil { appearance: none; cursor: pointer; padding: .55rem 1.35rem; border-radius: 999px; font: inherit; font-size: .93rem; border: 1px solid rgba(15, 23, 42, .12); border-color: var(--byg-rand); background: #fff; color: #475569; color: var(--byg-tekst); transition: background .15s, color .15s, border-color .15s; } .byg-pil:hover { /* De achtergrond MOET hier staan. Zonder eigen waarde wint de hover die het thema aan * elke