/* VetAgenda -- nieuw ontwerp, fase 1: CSS-only restyle. Wordt na main.css geladen. Datum: 2026-09-01 */ /* Fix: contactpagina - kaartcontainers gelijke breedte (2026-09-02) */ main#content > section.__bg-white .max-width-lg{ max-width:none !important; } /* Fix: lange URL/tekst in info-row (bedrijfskaart) liep buiten de kaart, met name op mobiel (2026-09-02) */ .info-row{ min-width:0; } .info-row a{ min-width:0; overflow-wrap:break-word; word-break:break-word; } /* Fix: witte "row" kaarten (tekst naast foto) overal consistent met de kaartstijl (2026-09-02) */ main#content section .row.__bg-white{ border-radius:18px; overflow:hidden; box-shadow:0 16px 40px -24px rgba(30,18,58,.18); border:1px solid var(--va-line); background:#fff !important; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --va-accent:#fc1458; --va-accent-d:#da0342; --va-accent-s:#fed0de; --va-purple:#5a0067; --va-purple-d:#43004d; --va-purple-s:#f4ecf5; --va-ink:#1e123a; --va-body:#48454f; --va-mut:#9385a8; --va-line:#e9e0f2; --va-soft:#f6f1fb; --va-bg:#f3f2f5; } body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--va-body); background-color:var(--va-bg); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:800; color:var(--va-ink); } a{ color:var(--va-ink); } a:hover{ color:var(--va-accent-d); } .section:not([class*="__bg-"]){ background-color:var(--va-bg); } .header{ box-shadow:0 1px 12px rgba(30,18,58,.08) !important; border-bottom:1px solid var(--va-line); } .btn{ border-radius:11px; font-weight:700; letter-spacing:0; } .btn-primary,.has-mailingreport form button[type=submit]{ background-color:var(--va-accent); border-color:var(--va-accent); } .btn-primary:hover,.has-mailingreport form button[type=submit]:hover{ background-color:var(--va-accent-d); border-color:var(--va-accent-d); } .btn-secondary,.btn-dark{ background-color:var(--va-ink); border-color:var(--va-ink); } .btn-outline-primary{ color:var(--va-accent); border-color:var(--va-accent); } .btn-outline-primary:hover{ background-color:var(--va-accent); border-color:var(--va-accent); } .btn-outline-dark{ color:var(--va-ink); border-color:var(--va-line); } .btn-outline-dark:hover{ background-color:var(--va-ink); border-color:var(--va-ink); } .card{ border:1.5px solid var(--va-line); border-radius:16px; transition:box-shadow .15s ease, transform .15s ease; } .card:hover{ box-shadow:0 14px 28px -12px rgba(28,27,38,.18); } a.card:hover, .card a:hover{ text-decoration:none; } .badge{ border-radius:20px; font-weight:700; padding:4px 10px; } .badge-primary,.label-primary,.__bg-pink{ background-color:var(--va-accent); } .footer{ color:var(--va-body); } .footer a{ color:var(--va-body); } .footer a:hover{ color:var(--va-accent-d); } .text-purple{ color:var(--va-purple) !important; } .bg-purple-soft{ background-color:var(--va-purple-s) !important; } /* Advertentie-blok (AdPlugg) - strakke ruimte i.p.v. standaard sectie-padding */ #addplug_snippet{ padding:10px 0; } /* Hero-content uitlijnen op de standaard site-container (zelfde breedte als header-logo / Mijn Vetagenda-knop) i.p.v. de smallere 880px-standaardbreedte. Alleen voor de paginakop-hero (course/company/contact), niet voor de homepage-hero-carousel. */ #leader .hero-content{ max-width:1140px; } @media (min-width:1600px){ #leader .hero-content{ max-width:1440px; } } /* Mobiele hero-padding: krappe ruimte boven (onder de fixed header) en te veel lucht onder rechttrekken */ @media (max-width: 767.98px){ .hero.size-sm{ padding-top:110px; padding-bottom:48px; } } /* Fix: !important op de basis td-regel (bedrijfspagina) blokkeerde de tr+tr divider-regel hieronder -- hier met hogere prioriteit opnieuw toegepast */ .card table.table td{ border-top:none !important; } .card table.table tr + tr td{ border-top:1px solid var(--va-line) !important; } /* Mobiele feedback-ronde 2: horizontale padding in de hero-content was 0 (sitewide regel elders zet #leader .hero-content{padding:2px 0}), waardoor titel/badges/prijs/knop tegen de randen aankwamen op mobiel en de Aanmelden-knop volledig randloos breed leek. Hersteld naar de standaard site-gutter. */ #leader .hero-content{ padding:2px 15px !important; } /* Tabel-lijnen bedrijfspagina: gebruiker vindt de scheidingslijnen tussen rijen nog steeds storend -- lijnen volledig weg, alleen witruimte tussen rijen. */ .card table.table td{ border-top:none !important; } .card table.table tr + tr td{ border-top:none !important; } .card table.table td{ padding:12px 8px !important; } /* Contactpagina op mobiel: alleen de paarse "Contact"-sectie (direct na de "Kan ik jullie ook bellen?"-kaart) wordt een volledige randloze banner -- specifiek gescoped op die ene sectie via het aangrenzende broertje-selector, NIET op .__bg-dblue in het algemeen (dat trof abusievelijk ook de "Overzichtelijk"-fototegels op de infopagina, die nu weer normale container-breedte/marge hebben). De witte foto+tekst-kaart zelf ("Kan ik jullie ook bellen?") is teruggezet naar de normale, nette kaart-weergave met gewone container-gutter -- de foto van de dame was anders te breed. */ @media (max-width: 767.98px){ #kan_ik_jullie_ook_bellen + section.__bg-dblue > .container{ padding-left:0; padding-right:0; max-width:100%; } #kan_ik_jullie_ook_bellen + section.__bg-dblue .row{ border-radius:0; } } /* Mobiele feedback-ronde 3 (2026-09-01): 1) .card.card-pad had nergens padding gedefinieerd -- kop, logo, tekst zaten strak tegen de randen van de kaart (bv. "Bedrijfsomschrijving" op de bedrijfspagina). Nu overal ruime binnenmarge. 2) .mb-30 (gebruikt in de feature-tegels op de homepage, o.a. de kaarten met foto's) had nergens een CSS-regel -- margin-bottom was dus altijd 0. Zodra de tegels op een kleiner scherm onder elkaar/in meerdere rijen vallen, stonden de foto's/kaarten daardoor strak tegen elkaar aan. Hersteld. 3) De ronde prev/next knopjes in de cursus-slider op de homepage weggehaald op verzoek -- .vazsl-outer heeft al flex:1, dus de tegel wordt vanzelf breder (net zo breed als de rest van de pagina) zodra de knoppen weg zijn. */ .card.card-pad{ padding:24px !important; } .mb-30{ margin-bottom:30px; } .vazsl-btn-prev, .vazsl-btn-next{ display:none !important; } /* Cursuspagina's op mobiel: bij sommige cursussen (o.a. Onderwijs voor Professionals Diergeneeskunde) liep de inhoud van de omschrijving-kaart over de rand van het scherm heen. Oorzaak: .content gebruikte op mobiel grid-template-columns:1fr, en een CSS-grid-kolom van 1fr heeft standaard een minimale breedte gelijk aan de intrinsieke ("min-content") breedte van de inhoud -- niet 0. Daardoor kon de kolom breder worden dan het scherm. minmax(0,1fr) dwingt de kolom om wel binnen de beschikbare breedte te blijven, ook op de desktop 2-koloms grid. */ .content{ grid-template-columns: minmax(0,1fr) minmax(0,300px) !important; } @media (max-width: 720px){ .content{ grid-template-columns: minmax(0,1fr) !important; } } /* Cursus/instantie-pagina: de .content-sectie (Omschrijving-kaart + sidebar) had een vaste padding van 32px, terwijl de header/hero .container/.hero-content juist meeschaalt (1140px vanaf 1200px, 1440px vanaf 1600px). Op brede schermen liep de inhoud daardoor niet meer gelijk met de hero erboven. Deze padding laten meeschalen met dezelfde breakpoints als .container. */ @media (min-width:992px){ .content{ padding-left:calc((100% - 960px)/2) !important; padding-right:calc((100% - 960px)/2) !important; } } @media (min-width:1200px){ .content{ padding-left:calc((100% - 1140px)/2) !important; padding-right:calc((100% - 1140px)/2) !important; } } @media (min-width:1600px){ .content{ padding-left:calc((100% - 1440px)/2) !important; padding-right:calc((100% - 1440px)/2) !important; } } /* Advertentiebanner (AdPlugg, #addplug_snippet) op de homepage: de aangeleverde banner-afbeelding heeft van zichzelf grote witruimte boven/onder de eigenlijke advertentie-inhoud ingebakken (de PNG is 1961x802px, terwijl de zichtbare advertentie zelf maar zo'n 190px hoog is bij volledige breedte). Daardoor oogde het blok veel te hoog, ook al staat de sectie-padding zelf al op 10px boven/onder. We snijden de witruimte weg met object-fit:cover op een vaste, smallere aspect-ratio (1110:190, zelfde verhouding als de zichtbare inhoud), verticaal gecentreerd zodat de volledige advertentie in beeld blijft -- het blok is nu een compacte banner in plaats van een groot wit vlak. Werkt responsive op alle breedtes omdat aspect-ratio meeschaalt met de containerbreedte. */ #addplug_snippet .adplugg-image-wrapper{ aspect-ratio: 1110 / 190; height: auto !important; overflow: hidden; } #addplug_snippet .adplugg-image-wrapper img{ width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } /* Bedrijfspagina's (/instanties/...): de "Bedrijfsomschrijving"-kaart gebruikt van oudsher float-lg-right op het logo (tekst loopt ernaast op desktop), maar de algemene .card-regel in main.css maakt van elke kaart een flex-column container. Floats hebben geen effect op flex-items, dus het logo "floatte" niet meer en de paragraaf met het logo werd net zo breed als de kaart -- het logo kwam daardoor los boven de tekst te staan zonder enige marge (op mobiel gold float-lg-right toch al niet, dus daar was dit nooit zichtbaar). We zetten deze specifieke kaart (herkenbaar aan .clearfix, alleen gebruikt op de bedrijfspagina) terug naar block-layout zodat de oorspronkelijke float-opmaak weer werkt. */ .card.card-pad.clearfix{ display: block; } /* Bedrijfspagina's: de Google Maps-widget (.maps-container) is absoluut gepositioneerd en bepaalt zijn eigen breedte/hoogte via JavaScript. Omdat de omliggende kaart ook via main.css een flex-column container is geworden, en position:absolute-elementen niet meetellen voor de hoogte van hun ouder, klapte die kaart in tot een paar pixels hoog. De kaart werd daardoor te breed en verkeerd gepositioneerd getoond, met een leeg grijs vlak ernaast waar de kaart eigenlijk had moeten staan. We geven deze specifieke kaart een vaste hoogte terug en dwingen de map-widget af om die volledig en correct te vullen. */ .card-pad:has(> .maps-container){ display: block; position: relative; height: 400px; padding: 0; overflow: hidden; } .card-pad:has(> .maps-container) .maps-container{ position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; } /* Bedrijfspagina's (/instanties/...): nieuwe sidebar met bedrijfsinfo (org-head/info-row, hergebruikt van de cursuspagina) gevolgd door de kaart. De .org-logo-badge is in main.css opgezet voor een tekst-initiaal (vaste 46x46 met flex-centering); nu we er ook een echt bedrijfslogo in tonen moet de afbeelding zelf op maat gedwongen worden, anders duwt de natuurlijke afbeeldingsgrootte de badge uit model. */ .org-logo{ margin-bottom: 12px; display: flex; justify-content: center; width: 100%; } .org-logo img{ display: block; width: auto; height: auto; max-width: 100%; max-height: 84px; object-fit: contain; } .org-logo.org-logo-placeholder{ width: 56px; height: 56px; border-radius: 12px; background: var(--va-purple-s); color: var(--va-purple); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; } /* Bedrijfspagina's: de kaart in de nieuwe sidebar staat nu in een smallere, compactere kolom (samen met het org-head-blok erboven) in plaats van als enige inhoud van de kolom. De eerder ingestelde vaste hoogte van 400px oogde daardoor te dominant; een compactere hoogte past beter bij het rustige, sidebar-achtige uiterlijk zoals op de cursuspagina. */ .side .card-pad:has(> .maps-container){ height: 220px; } /* Bedrijfspagina's: de nieuwe sidebar (org-head/info-row) hergebruikt exact dezelfde componentklassen als de sidebar op de cursuspagina. Die styling stond echter alleen in een