/*********************************************/ /* theme.css */ /*-------------------------------------------*/ /* This file is part of: */ /* NIKBS5 */ /* based on Hope4Kids BS5 / 2shine BS5 */ /*-------------------------------------------*/ /* Runtime design tokens. Aanpasbaar op de */ /* server zonder rebuild. Waarden zijn */ /* gemeten uit de ontwerp-exports: */ /* zie docs/design-tokens.md */ /*********************************************/ :root, [data-bs-theme="default-theme"] { /* ============ MERKKLEUREN ============ */ /* De drie kleuren van de balk onder de footer. Dit is de huisstijl van Kenniscentrum Kinderpalliatieve Zorg, waar NIK onderdeel van is. */ --bond-navy: #303890; /* knoppen, actieve navigatie, CTA-vlak */ --bond-orange: #FF9500; /* streep in de footer */ --bond-red: #F71011; /* streep in de footer, regio-accent */ /* Actieknoppen. Iets lichter dan de streep-oranje; gemeten op "Zorg in mijn buurt" en "Bekijk de agenda". */ --bond-accent: #FF9F18; --bond-accent-600: #E88A00; /* Navy-varianten, afgeleid van #303890 (staan niet als eigen kleur in het ontwerp: er is maar één navy-vlak en dat kent geen hover-staat). */ --bond-navy-600: #262E77; --bond-navy-100: #C0BDD8; /* ============ ACHTERGRONDEN ============ */ --bond-bg: #FFFCF9; /* paginaachtergrond, warm gebroken wit */ --bond-surface: #FFFFFF; /* kaarten, nieuws- en agenda-items */ --bond-peach: #FFEFDA; /* citaatblok, "Help andere ouders", gedichtkader */ --bond-pink: #F8CCCB; /* bijschrift onder video's */ --bond-lime: #BDD380; /* actieve themachip op de Wegwijzer */ /* ============ REGIOKLEUREN ============ */ /* De zeven netwerkregio's. Elke regiokaart heeft links een balkje in zijn eigen kleur; dezelfde kleuren staan op de kaart van Nederland. Ze zijn decoratief: er staat geen tekst op, dus contrast speelt niet. */ --bond-regio-noord-oost: #F4D344; /* geel */ --bond-regio-zuid-oost: #CC3BFF; /* paars */ --bond-regio-utrecht: #F71011; /* rood */ --bond-regio-noord-holland: #67CBCB; /* cyaan */ --bond-regio-holland-rijnland: #303890; /* navy */ --bond-regio-zuid-west: #32CC66; /* groen */ --bond-regio-limburg: #FF6633; /* oranjerood */ /* ============ SEMANTISCH ============ */ /* Gebruik deze in componenten, niet de kleuren hierboven. */ --bond-text: #000000; --bond-heading: #000000; --bond-on-dark: #FFFFFF; --bond-border: #E4E0DC; /* LET OP, contrast: wit op --bond-accent haalt 2,05:1 en is dus onbruikbaar. zwart op --bond-accent haalt 10,2:1. De oranje knop heeft in het ontwerp daarom zwarte tekst. Verander dit niet naar wit zonder de kleur donkerder te maken. Zie docs/design-tokens.md, bevinding 1. */ --bond-on-accent: #000000; /* ============ TYPOGRAFIE ============ */ /* Proxima Nova wordt via Adobe Fonts geladen; de URL van de kit staat in App_LocalResources/NIK.resx onder Fonts.WebfontUrl, zodat hij zonder rebuild te wijzigen is. Staat die leeg, dan valt de site terug op de systeemletters hieronder: dat is bewust leesbaar gehouden. */ --bond-font-body: "proxima-nova", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --bond-font-heading: var(--bond-font-body); /* Type-schaal. clamp() = mobiel -> desktop, gemeten op de exports van 1440px breed en teruggerekend naar een mobiele stap. */ --bond-h1: clamp(2.25rem, 1.82rem + 1.83vw, 3.375rem); /* 36 -> 54 */ --bond-h2: clamp(1.75rem, 1.51rem + 1.02vw, 2.375rem); /* 28 -> 38 */ --bond-h3: clamp(1.375rem, 1.23rem + 0.61vw, 1.75rem); /* 22 -> 28 */ --bond-h4: clamp(1.125rem, 1.03rem + 0.41vw, 1.375rem); /* 18 -> 22 */ --bond-h5: 1.125rem; /* 18 */ --bond-body: 1rem; /* 16 */ --bond-body-lg: 1.125rem; /* 18: introtekst onder een h1 */ --bond-small: 0.875rem; /* 14: datums, bijschriften */ --bond-line-height-heading: 1.15; --bond-line-height-body: 1.6; --bond-weight-heading: 700; --bond-weight-body: 400; --bond-weight-strong: 600; /* ============ RADII ============ */ /* Het ontwerp is hoekig: kaarten en vlakken hebben kleine of geen afronding. Alleen knoppen en chips zijn volledig rond. */ --bond-radius-card: 8px; --bond-radius-media: 4px; --bond-radius-pill: 999px; /* ============ SPACING ============ */ /* Gelijk aan de Bootstrap-standaardschaal, net als in de KPAL- en Hope4Kids-skin. mb-3 doet dus 1rem, zoals je verwacht. De twee grootste stappen bestaan niet in Bootstrap en zijn toegevoegd voor de sectie-afstanden. */ --bond-space-xs: 0.5rem; /* 8 = spacer 2 */ --bond-space-sm: 1rem; /* 16 = spacer 3 */ --bond-space-md: 1.5rem; /* 24 = spacer 4 */ --bond-space-lg: 3rem; /* 48 = spacer 5 */ --bond-space-xl: 6rem; /* 96 = spacer 6 */ /* ============ VERTICALE RITMIEK ============ */ /* Ruimte boven en onder elk blok. Twee blokken op elkaar geven het dubbele. Dit is de enige plek waar die ruimte staat, zodat container, band en hero dezelfde afstand aanhouden. */ --bond-block-space: 1.5rem; --bond-hero-space-after: 0; /* ============ COMPONENT: NAVIGATIE ============ */ /* Gemeten: 128px hoog op desktop, met een topregel (zoeken + taal) boven de hoofdnavigatie. De actieve pagina krijgt een navy streep van 4px. */ --bond-nav-height: 128px; --bond-nav-marker: 4px; /* Logo (component "Navigation", laag "image 6"): 192x118, 9px van de bovenkant en onderaan tegen de rand van de balk. Het beeld staat 56px van de linkerrand, 24px vóór de container (80px); de witruimte links zit in het plaatje zelf. */ --bond-nav-logo-width: 192px; --bond-nav-logo-width-mobile: 140px; --bond-nav-logo-top: 9px; --bond-nav-logo-offset: -24px; /* ============ COMPONENT: HERO ============ */ /* Het ronde beeldvlak met gekleurde vormen erachter. Bovengrens voor de hoogte, zodat de hero op een breed scherm niet het hele beeld vult. */ --bond-hero-max-height: 70vh; --bond-hero-image-position: center 30%; /* De drie vormen achter de foto. Kleuren zoals aangeleverd: de merkkleuren met transparantie, in acht-cijferige hex (de laatste twee tekens zijn de doorzichtigheid). #FF9500 op 50% -> 80 #2C298B op 30% -> 4D #DA0E15 op 20% -> 33 Ze overlappen elkaar; daar waar dat gebeurt mengen de kleuren vanzelf -- dat paarse vlak linksonder is navy over rood. */ --bond-hero-blob-orange: #FF950080; --bond-hero-blob-navy: #2C298B4D; --bond-hero-blob-red: #DA0E1533; /* Ondergrond in de fotouitsnede: alleen zichtbaar bij een afbeelding met doorzichtige delen. Zo schijnen de vormen er niet doorheen. */ --bond-hero-media-bg: var(--bond-bg); /* Waar de drie vormen staan. Deze waarden zijn overgenomen uit het Figma-bestand "NIK website (extern)", frame "NIK - homepage", groep 15586. Het zijn geen cirkels: rood en navy zijn onregelmatige vlekken en oranje is een liggende pil. De omtrek van de twee vlekken staat als masker in _bond-hero.scss -- dat is meetkunde en hoort niet in een token. Maten in het ontwerp, met het fotovlak (670 x 498) als nulpunt: rood 397,8 x 505,9 op (-119,7 , 35,4) navy 461,0 x 451,7 op ( 0 , 170 ) oranje 670,0 x 524,0 op ( 0 , 16 ) Rood en navy krijgen hun maat als percentage van de HOOGTE van het fotovlak, niet van de breedte. Dat is bewust: het fotovlak loopt op een breed scherm door tot de schermrand, dus met breedte-percentages zouden ze meerekken en uit verhouding raken. Ze hangen aan de ronde kap links, en die kap is een halve cirkel -- dus hoogte bepaalt alles. Oranje is de uitzondering en volgt wel de breedte: die pil hoort even breed te zijn als de foto en er onderlangs vandaan te komen. De verschuiving is een percentage van de vorm zelf. Negatief = naar links of omhoog. Bijstellen kan hier, zonder rebuild. */ --bond-hero-blob-red-size: 101.59%; --bond-hero-blob-red-ratio: 0.7863; --bond-hero-blob-red-move: -30.09% 7%; --bond-hero-blob-navy-size: 90.7%; --bond-hero-blob-navy-ratio: 1.0206; --bond-hero-blob-navy-move: 0% 37.64%; --bond-hero-blob-orange-size: 105.22%; --bond-hero-blob-orange-move: 0% 3.05%; /* ============ COMPONENT: BEELDMERK OP FOTO'S ============ */ /* Op bijna elke kaartfoto staat rechtsboven een blokje van vier vlakjes in de merkkleuren. Het is decoratie, dus het staat als los element in de HTML en krijgt aria-hidden -- een schermlezer heeft er niets aan. De maat is de zijde van een vlakje; het hele merk is twee keer zo breed. */ --bond-mark-size: 18px; --bond-mark-1: var(--bond-red); /* linksboven */ --bond-mark-2: var(--bond-orange); /* rechtsboven */ /* Linksonder blijft leeg en is doorzichtig, zodat de foto erdoorheen loopt. Stond eerst op wit (var(--bond-surface)), maar dat gaf een wit blokje op de foto; NIK wilde dat weg (27 okt 2026). */ --bond-mark-3: transparent; --bond-mark-4: var(--bond-navy); /* rechtsonder */ /* Het gele label op een kaartfoto ("Voor zorgprofessionals"). Zwarte tekst: geel is te licht voor wit. Kleur uit Figma (NIK - Agenda). */ --bond-badge-bg: #F4D344; --bond-badge-color: var(--bond-text); /* ============ COMPONENT: KAART ============ */ --bond-card-padding-x: 1.5rem; --bond-card-padding-y: 1.5rem; --bond-card-gap: 1.5rem; --bond-card-bg: var(--bond-surface); /* ============ COMPONENT: OVERZICHTSKAART (NIEUWS, AGENDA) ============ */ /* Uit Figma, frames "NIK - Nieuws" en "NIK - Agenda" (1440 breed): kaarten van 405 breed, foto 405x231, 30px tussen de kaarten, tekstvlak met 24px rondom en 32px onder. */ --bond-overview-gap: 1.875rem; /* 30 */ --bond-overview-title: clamp(1.25rem, 1.13rem + 0.51vw, 1.5rem); /* 20 -> 24 */ --bond-overview-text: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem); /* 17 -> 20, teaser en "Lees verder" */ --bond-overview-meta: 1.125rem; /* 18 op 28px regelhoogte: datum en tijd in de agenda */ --bond-overview-date: #969697; /* datum boven een nieuwsbericht */ --bond-overview-border: rgba(112, 111, 111, 0.2); /* #706F6F op 20% */ --bond-overview-mark-size: 32px; /* merkblokje op deze foto's is groter dan op andere kaarten */ /* ============ COMPONENT: COMPACTE KAART (HOMEPAGE: AGENDA, NIEUWS) ============ */ /* Uit Figma, frame "NIK - homepage": vierkante foto van ca. 200px links, tekst rechts, de kaarten zonder eigen rand in het witte paneel. */ --bond-compact-media: clamp(6rem, 4rem + 10vw, 12.5rem); /* 96 -> 200, foto */ --bond-compact-gap: clamp(1rem, 0.6rem + 1.2vw, 2rem); /* 16 -> 32, tussen foto en tekst */ --bond-compact-list-gap: 2rem; /* 32, tussen de kaarten */ --bond-compact-title: 1.125rem; /* 18 */ --bond-compact-text-lines: 3; /* teaser afkappen na zoveel regels */ /* ============ COMPONENT: OPROEPVLAK ALS BAND (TEKSTBLOK: OPROEP) ============ */ /* "Partner worden van Netwerk Integrale Kindzorg?": tekst begint ca. 40px van de rand en loopt tot ca. 440px breed. */ --bond-cta-band-padding-x: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); /* 24 -> 40 */ --bond-cta-band-text: 28rem; /* 448 */ /* ============ COMPONENT: WEGWIJZER ============ */ /* Uit Figma, frame "NIK - Wegwijzer". De opmaak zelf staat in Portals/0/2sxc/Content/wegwijzer/wegwijzer.css. */ --bond-chip-size: clamp(1rem, 0.89rem + 0.45vw, 1.25rem); /* 16 -> 20, themaknoppen */ --bond-ww-intro-title: clamp(1.625rem, 1.45rem + 0.73vw, 2rem); /* 26 -> 32 */ --bond-ww-intro-text: clamp(1.125rem, 0.95rem + 0.73vw, 1.5rem); /* 18 -> 24 */ --bond-ww-card-title: clamp(1.25rem, 1.13rem + 0.51vw, 1.5rem); /* 20 -> 24 */ --bond-ww-card-text: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem); /* 17 -> 20 */ --bond-ww-quote: clamp(1.5rem, 1.26rem + 1.02vw, 2rem); /* 24 -> 32 */ --bond-ww-gap: 2.5rem; /* 40 tussen de kaarten */ --bond-ww-bar: 6px; /* gekleurde balk links van de themakop */ /* Kleur van de balk per thema; in 2sxc het veld Kleur van een thema. */ --bond-ww-groen: #BDD380; --bond-ww-oranje: #FF9F18; --bond-ww-turkoois: #67CCCC; --bond-ww-geel: #F4D344; --bond-ww-blauw: #12479C; --bond-ww-paars: #CA91D1; --bond-ww-rood: #E42135; /* Breedte van het gekleurde balkje links op een regiokaart of citaat. */ --bond-accent-bar: 8px; /* ============ COMPONENT: ZOEKHERO ============ */ /* Het zoekveld op "Zorg in jouw buurt", frame 97:61630: 542x54, hoek 8, rand 1px zwart, plaatshouder #595959, tekst 20px. */ --bond-search-border: #000000; --bond-search-placeholder: #595959; --bond-search-font: 1.25rem; /* 20px */ /* ============ COMPONENT: ZORGKAART ============ */ /* "Zorg in jouw buurt": links de lijst met zorglocaties, rechts de kaart. Maten uit het Figma-frame "NIK - Zorg in jouw buurt" (97:61620): paneel 496 breed, kaart 779 breed, allebei 673 hoog. */ --bond-zorgkaart-paneel: 31rem; /* 496px */ --bond-zorgkaart-hoogte: 42rem; /* 673px */ --bond-zorgkaart-gap: 1.5rem; /* De streep onder de filterrij, boven de resultaten. */ --bond-zorgkaart-lijn: #000000; /* Onder lg staat de kaart boven de lijst en is hij lager. Er is geen mobiel ontwerp; dit is eigen invulling. */ --bond-zorgkaart-kaarthoogte-sm: 20rem; /* De spelden en de rondjes met een cijfer. Ook in zorgkaart.js -- pas je de kleur hier aan, pas hem daar dan ook aan (fillColor). */ --bond-zorgkaart-speld: var(--bond-navy); --bond-zorgkaart-speld-tekst: var(--bond-on-dark); /* Het kaartje van een zorglocatie: 218 breed met een beeld van 218x87. */ --bond-zorgloc-beeld-ratio: 218 / 87; /* ============ COMPONENT: PARTNERS ============ */ /* Logoraster onderaan "Zorg in jouw buurt" (frame 97:61852). Tegel 240x118, het logo erin maximaal 176x104. */ --bond-partner-tegel: 15rem; /* 240px */ --bond-partner-hoogte: 7.375rem; /* 118px */ --bond-partner-logo: 11rem; /* 176px */ --bond-partner-gap: 1.25rem; /* 20px tussen de tegels */ --bond-partner-gap-rij: 2.5rem; /* 40px tussen de rijen */ /* ============ BOOTSTRAP KOPPELEN ============ */ --bs-primary: var(--bond-navy); --bs-secondary: var(--bond-accent); --bs-body-bg: var(--bond-bg); --bs-body-color: var(--bond-text); --bs-body-font-family: var(--bond-font-body); --bs-body-font-size: var(--bond-body); --bs-body-font-weight: var(--bond-weight-body); --bs-body-line-height: var(--bond-line-height-body); --bs-border-radius: var(--bond-radius-card); --bs-border-radius-sm: var(--bond-radius-media); --bs-border-radius-lg: var(--bond-radius-card); --bs-border-radius-xl: 16px; --bs-border-radius-xxl: 24px; --bs-border-color: var(--bond-border); --bs-link-color: var(--bond-text); --bs-link-hover-color: var(--bond-navy); /* Thema-vlakken (bestaande hooks van dit thema) */ --theme-backdrop-bg: var(--bond-bg); --theme-page-main-bg: var(--bond-bg); --theme-breadcrumb-bg: transparent; --theme-nav-bg: var(--bond-bg); --theme-footer-bg: var(--bond-bg); --theme-font: var(--bond-font-body); --theme-font-headlines: var(--bond-font-heading); /* ============ SCHADUWEN ============ */ /* Het ontwerp gebruikt vlakken met een dunne rand in plaats van schaduw. Deze waarden zijn er voor DNN-onderdelen die om een schaduw vragen. */ --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --bs-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07); --bs-box-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10); /* ============ COMPONENTEN ============ */ .breadcrumb { --bs-breadcrumb-font-size: var(--bond-small); --bs-breadcrumb-divider-color: var(--bond-text); --bs-breadcrumb-item-active-color: var(--bond-text); } /* Navy pill: "Neem contact op met jouw regiocoordinator", "Lees meer over ons" */ .btn-primary { --bs-btn-color: var(--bond-on-dark); --bs-btn-bg: var(--bond-navy); --bs-btn-border-color: var(--bond-navy); --bs-btn-hover-color: var(--bond-on-dark); --bs-btn-hover-bg: var(--bond-navy-600); --bs-btn-hover-border-color: var(--bond-navy-600); --bs-btn-active-color: var(--bond-on-dark); --bs-btn-active-bg: var(--bond-navy-600); --bs-btn-active-border-color: var(--bond-navy-600); --bs-btn-disabled-color: var(--bond-on-dark); --bs-btn-disabled-bg: var(--bond-navy-100); --bs-btn-disabled-border-color: var(--bond-navy-100); } /* Oranje pill: "Zorg in mijn buurt", "Bekijk de agenda", "Bekijk al het nieuws". Zwarte tekst; wit haalt hier geen enkele contrastnorm. */ .btn-secondary { --bs-btn-color: var(--bond-on-accent); --bs-btn-bg: var(--bond-accent); --bs-btn-border-color: var(--bond-accent); --bs-btn-hover-color: var(--bond-on-accent); --bs-btn-hover-bg: var(--bond-accent-600); --bs-btn-hover-border-color: var(--bond-accent-600); --bs-btn-active-color: var(--bond-on-accent); --bs-btn-active-bg: var(--bond-accent-600); --bs-btn-active-border-color: var(--bond-accent-600); --bs-btn-disabled-color: var(--bond-on-accent); --bs-btn-disabled-bg: var(--bond-accent); --bs-btn-disabled-border-color: var(--bond-accent); } /* Witte pill met dunne rand: "Waar kan NIK mij bij helpen?", "Neem contact op met jouw coordinator", "Zoek jouw regio" */ .btn-outline-primary { --bs-btn-color: var(--bond-text); --bs-btn-bg: var(--bond-surface); --bs-btn-border-color: var(--bond-border); --bs-btn-hover-color: var(--bond-on-dark); --bs-btn-hover-bg: var(--bond-navy); --bs-btn-hover-border-color: var(--bond-navy); --bs-btn-active-color: var(--bond-on-dark); --bs-btn-active-bg: var(--bond-navy); --bs-btn-active-border-color: var(--bond-navy); --bs-btn-disabled-color: var(--bond-text); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bond-border); } /* Witte pill op het navy CTA-vlak: "Ga naar de contactpagina" */ .btn-outline-light { --bs-btn-color: var(--bond-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bond-on-dark); --bs-btn-hover-color: var(--bond-navy); --bs-btn-hover-bg: var(--bond-on-dark); --bs-btn-hover-border-color: var(--bond-on-dark); --bs-btn-active-color: var(--bond-navy); --bs-btn-active-bg: var(--bond-on-dark); --bs-btn-active-border-color: var(--bond-on-dark); } .navbar-nav { --bs-nav-link-color: var(--bond-text); --bs-nav-link-hover-color: var(--bond-navy); --bs-navbar-active-color: var(--bond-navy); } .table { --bs-table-bg: var(--bond-surface); } }