/* ===================================================== New Yard Framework — basis-CSS ===================================================== In dit bestand staat geen enkele hardgecodeerde sitekleur. Alles loopt via de --nyf-* tokens, die per site door de Customizer worden ingevuld (zie inc/tokens.php). De waarden hieronder zijn alleen een vangnet: mocht de inline :root-override om wat voor reden dan ook niet meekomen, dan blijft de site leesbaar in plaats van kleurloos. ===================================================== */ :root{ --nyf-primary:#1e293b; --nyf-primary-deep:#0f172a; --nyf-accent:#64748b; --nyf-accent-strong:#475569; --nyf-bg:#ffffff; --nyf-bg-alt:#f1f5f9; --nyf-surface:#ffffff; --nyf-text:#334155; --nyf-line:#e2e8f0; --nyf-header-bg:#ffffff; --nyf-header-text:#1e293b; --nyf-footer-bg:#0f172a; --nyf-footer-text:#cbd5e1; --nyf-button-bg:#1e293b; --nyf-button-text:#ffffff; --nyf-status-ok:#2f8f5b; --nyf-status-warn:#b7791f; --nyf-status-alert:#b4452f; /* Afgeleide tokens. Deze zijn er zodat de regels verderop leesbaar blijven — je leest "de knopkleur", niet "de hoofdkleur die hier toevallig ook voor knoppen gebruikt wordt". */ --nyf-ink:var(--nyf-primary); --nyf-ink-soft:var(--nyf-text); --nyf-font-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --nyf-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; /* De hoogte van de header. Wordt hieronder gebruikt voor zowel de balk zelf als de scroll-margin van de ankers, zodat een sprong naar #contact de kop niet onder de balk parkeert. */ --nyf-header-h:92px; --nyf-wrap:1120px; --nyf-block-pad:104px; /* De leesmaat, per site instelbaar. Alles wat geen eigen grootte heeft gekozen hangt hieraan. */ --nyf-font-size:15.5px; /* De afronding van knoppen volgt die van de rest zolang hij niet apart is ingesteld; PHP vult hem altijd in. */ --nyf-radius-btn:var(--nyf-radius,0); /* De golflijn boven een sectiekop. Staat hier als masker en niet als gekleurde afbeelding, want een data-URI kan geen CSS-variabele bevatten — met een masker kleurt de lijn wél mee met de site. */ --nyf-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12'%3E%3Cpath d='M3 8C8 1 13 1 18 8s10 7 15 0 10-7 15 0 10 7 15 0 10-7 15 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ===================================================== Basis ===================================================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } body{ margin:0; background:var(--nyf-bg); color:var(--nyf-ink); font-family:var(--nyf-font-body); font-size:var(--nyf-font-size,15.5px); font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; } img,svg{display:block; max-width:100%;} img{height:auto;} a{color:inherit;} p{margin:0;} h1,h2,h3,h4{ font-family:var(--nyf-font-heading); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em; } .nyf-wrap{max-width:var(--nyf-wrap); margin:0 auto; padding:0 32px;} /* Een blok met "Volle breedte" moet uit de contentkolom kunnen breken, ook als het binnen een .nyf-wrap staat — anders kan een iconenbalk of een gekleurde band nooit tot de rand van het scherm lopen. overflow-x:clip op de pagina vangt de horizontale scrollbalk af die 100vw anders veroorzaakt zodra er een verticale scrollbalk is. Bewust clip en niet hidden: hidden maakt een scroll-container, en daar zou de meescrollende header zijn positie tegenaan plakken in plaats van tegen het venster. */ /* De pagina is minstens zo hoog als het venster, en de inhoud duwt de voet naar beneden. Zonder dit staat de voet op een korte pagina — de contactpagina bijvoorbeeld — halverwege het scherm met een strook achtergrondkleur eronder, alsof de site daar ophoudt en er nog iets moet komen. */ .nyf-page{ overflow-x:clip; display:flex; flex-direction:column; min-height:100vh; } #nyf-main{flex:1 0 auto;} /* Twee niveaus, want de inhoud van een pagina zit nog een laag dieper: .nyf-wrap > .nyf-entry-content > het blok. Alleen op de directe kinderen mikken betekende dat een blok op "volle breedte" netjes binnen de contentkolom bleef staan — precies niet wat die knop belooft. */ .nyf-wrap > .alignfull, .nyf-wrap > * > .alignfull{ width:100vw; max-width:100vw; /* !important omdat de blok-CSS van WordPress zelf ook marges op deze elementen zet, en die komt na het themastylesheet. */ margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } .nyf-wrap > .alignwide, .nyf-wrap > * > .alignwide{margin-left:-32px; margin-right:-32px; max-width:none;} /* Staat een volle-breedte blok boven- of onderaan een sectie, dan hoort het tegen de rand van die sectie aan te sluiten. Zonder dit blijft er een strook sectiekleur onder een band staan, wat eruitziet als een tweede, leeg vlak. */ .nyf-entry-content > .alignfull:first-child{margin-top:calc(var(--nyf-block-pad) * -1) !important;} .nyf-entry-content > .alignfull:last-child{margin-bottom:calc(var(--nyf-block-pad) * -1) !important;} .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } /* De overslaanlink hoort onzichtbaar te zijn tot hij focus krijgt — dan moet hij juist heel goed zichtbaar zijn. */ .nyf-skip-link:focus{ position:fixed; top:12px; left:12px; z-index:100; width:auto; height:auto; clip:auto; background:var(--nyf-surface); color:var(--nyf-ink); border:2px solid var(--nyf-accent-strong); padding:12px 18px; } /* ===================================================== Knoppen — eigen markup én de Gutenberg-knopblokken, zodat een knop in de editor er hetzelfde uitziet als een knop uit een template. "Fill" en "Outline" zijn de twee stijlen die WordPress zelf in de blokwerkbalk aanbiedt. ===================================================== */ /* De selectors zijn met opzet zwaarder dan nodig lijkt. WordPress genereert zelf een regel voor .wp-element-button uit theme.json, en die staat inline in de — dus ná dit stylesheet. Met alleen .wp-block-button__link verloor de tekstkleur dat gevecht en kregen knoppen in de content donkere tekst terwijl die in de header wit was. */ .nyf-btn, .wp-block-button .wp-block-button__link, .wp-block-button__link.wp-element-button{ display:inline-flex; align-items:center; gap:10px; font-family:var(--nyf-font-body); font-size:14px; font-weight:600; letter-spacing:0.01em; text-decoration:none; padding:13px 24px; border:1.5px solid transparent; cursor:pointer; border-radius:var(--nyf-radius-btn,var(--nyf-radius,0)); background:var(--nyf-button-bg); color:var(--nyf-button-text); transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* De hover is een donkerder versie van de knopkleur zelf, niet een sprong naar het accent. Anders zou een site die zijn knoppen een eigen kleur geeft, bij het aanwijzen ineens een andere tint krijgen dan hij heeft ingesteld. */ .nyf-btn:hover, .wp-block-button .wp-block-button__link:hover, .wp-block-button__link:hover{ background:color-mix(in srgb, var(--nyf-button-bg) 82%, #000); color:var(--nyf-button-text); transform:translateY(-1px); } .nyf-btn-outline, .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent; border-color:var(--nyf-button-bg); color:var(--nyf-button-bg); } .nyf-btn-outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:var(--nyf-button-bg); background:var(--nyf-button-bg); color:var(--nyf-button-text); } /* De knop in de header is een zonder .wp-element-button. Daardoor pakt de linkkleur uit theme.json hem wél — die staat inline in de , dus ná dit bestand, en woog met :root :where(a…) even zwaar als .nyf-btn. Bij gelijke specificiteit wint wie later komt, dus stond er inktkleurige tekst op een gekleurde knop. Eén element voor de klasse is genoeg om dat te kantelen. Dit gold ook voor de knoppen in de content, tot die .wp-element-button in hun selector kregen; dit is dezelfde reparatie voor de laatste knop die nog buiten de boot viel. */ a.nyf-btn, a.nyf-btn:hover, a.nyf-btn-outline:hover{color:var(--nyf-button-text);} a.nyf-btn-outline{color:var(--nyf-button-bg);} .wp-block-buttons{gap:16px; margin-top:34px;} /* Blokstijl "Met pijl" — zie inc/block-styles.php. */ .wp-block-button.is-style-arrow .wp-block-button__link::after, .nyf-btn.is-style-arrow::after{content:"→"; font-size:1.15em; line-height:1;} /* ===================================================== Bovenbalk Een smalle strook boven de header, voor een taalwisselaar en een contactregel. Die twee horen niet in het hoofdmenu thuis: een vlaggetje tussen je pagina's leest als een pagina, en dat is het niet. Neemt de kleuren van de footer over in plaats van eigen tokens te krijgen. Dat scheelt twee instellingen en zet de pagina tussen twee gelijke stroken. ===================================================== */ /* Koppen op een donkere ondergrond moeten de tekstkleur van dat vlak erven. WordPress genereert uit theme.json een regel die álle koppen de hoofdkleur geeft, en die is hier precies de achtergrondkleur — dan staat er een onzichtbare kop. Geldt voor de bovenbalk, de footer en elke baan die iemand een eigen achtergrondkleur geeft. */ .nyf-topbar h1, .nyf-topbar h2, .nyf-topbar h3, .nyf-topbar h4, .nyf-footer h1, .nyf-footer h2, .nyf-footer h3, .nyf-footer h4, .nyf-topbar .nyf-widget-title, .nyf-footer .nyf-widget-title, .has-background .wp-block-heading{color:inherit;} .nyf-topbar{background:var(--nyf-footer-bg); color:var(--nyf-footer-text); font-size:13px;} /* De lichte variant. Donker bovenaan én onderaan zet de pagina netjes tussen twee gelijke stroken, maar op een site die verder licht en luchtig is drukt die donkere balk de header weg. Dan is een lichte strook met een haarlijn eronder beter: hij hoort bij de header in plaats van ertegen te vechten. */ .nyf-topbar.is-light{ background:var(--nyf-bg-alt); color:var(--nyf-ink-soft); border-bottom:1px solid var(--nyf-line); } .nyf-topbar.is-light a:hover{color:var(--nyf-accent-strong);} .nyf-topbar .nyf-wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px; flex-wrap:wrap; } .nyf-topbar a{text-decoration:none; opacity:0.82;} .nyf-topbar a:hover{opacity:1; color:var(--nyf-accent);} .nyf-topbar .nyf-widget-area{flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap;} .nyf-topbar ul{list-style:none; display:flex; gap:16px; margin:0; padding:0; flex-wrap:wrap;} .nyf-topbar .nyf-widget-title{display:none;} /* ===================================================== Header ===================================================== */ .nyf-header{ position:relative; z-index:40; background:var(--nyf-header-bg); border-bottom:1px solid var(--nyf-line); } .nyf-header.is-sticky{position:sticky; top:0;} .nyf-header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--nyf-header-h); gap:24px;} /* De header als zwevende kaart. De strook eromheen krijgt de paginakleur en niet transparant. Dat lijkt een detail, maar bij een vastgezette header is het het verschil tussen een kaart die zweeft en inhoud die zichtbaar onder de randen door schuift. De kaart zelf houdt de headerkleur, dus op een site met een lichtgrijze achtergrond staat hij er los op. */ .nyf-header.is-kaart{ background:var(--nyf-bg); border-bottom:0; padding-block:14px; } .nyf-header.is-kaart .nyf-header-inner{ background:var(--nyf-header-bg); border-radius:var(--nyf-radius,0); box-shadow:0 10px 30px rgba(15,23,42,0.09); padding-inline:28px; height:calc(var(--nyf-header-h) - 12px); } @media (max-width: 860px){ .nyf-header.is-kaart{padding-block:10px;} .nyf-header.is-kaart .nyf-header-inner{padding-inline:18px;} } /* flex:none plus een expliciete auto-hoogte houdt een geüpload logo op zijn eigen verhouding. Zonder dat knijpt de flexrij de afbeelding smaller dan zijn natuurlijke breedte, wat het beeldmerk vervormt en bovendien de aspect-ratio-controle van Lighthouse laat afgaan. */ .nyf-brand-logo{display:flex; align-items:center; flex:none;} .nyf-brand-logo img{max-height:var(--nyf-logo-h,60px); width:auto; height:auto; object-fit:contain;} /* Alles in de header kleurt mee met één token, zodat een donkere headerachtergrond niet betekent dat het menu onleesbaar wordt. De rustende staat van een menulink is diezelfde kleur op 72% — dat scheelt een tweede instelling en houdt het contrast voorspelbaar. */ .nyf-brand{display:flex; flex-direction:column; line-height:1.15; text-decoration:none; color:var(--nyf-header-text);} .nyf-brand-name{font-family:var(--nyf-font-heading); font-size:23px; font-weight:700; letter-spacing:-0.01em;} .nyf-brand-tag{margin-top:5px; font-size:12.5px; font-weight:500; letter-spacing:0.02em; opacity:0.72;} .nyf-nav{display:flex; align-items:center; gap:32px;} .nyf-nav ul{list-style:none; display:flex; align-items:center; gap:32px; margin:0; padding:0;} .nyf-nav a{ text-decoration:none; font-size:var(--nyf-nav-size,14px); font-weight:500; color:var(--nyf-header-text); opacity:0.72; position:relative; padding:6px 0; white-space:nowrap; transition:opacity 0.15s ease; } .nyf-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--nyf-accent); transform:scaleX(0); transform-origin:left; transition:transform 0.2s ease; } /* Welk item als "hier ben je" leest. Op een one-pager verlaat de browser de voorpagina nooit, dus zou WordPress het hele bezoek lang Home als actueel markeren en de onderstreping daar vastpinnen. assets/js/nav.js kijkt in plaats daarvan naar de scrollpositie. De eigen .current-menu-item van WordPress telt daarom alleen buiten de voorpagina, waar die wél klopt. */ .nyf-nav a:hover, .nyf-nav a:focus-visible, .nyf-nav a.is-current{opacity:1;} .nyf-nav a:hover::after, .nyf-nav a:focus-visible::after, .nyf-nav a.is-current::after{transform:scaleX(1);} body:not(.is-front-page) .nyf-nav .current-menu-item > a{opacity:1;} body:not(.is-front-page) .nyf-nav .current-menu-item > a::after{transform:scaleX(1);} /* Submenu's. Het theme legt geen diepte op; maakt een site een submenu aan, dan klapt het hier open. Openen gebeurt met :hover én :focus-within, dus ook met de tab-toets, zonder JavaScript. De regel hierboven zet elke ul op flex — een genest lijstje moet daar weer uit, anders staan de subitems naast elkaar in het paneel. */ .nyf-nav .menu-item-has-children{position:relative;} .nyf-nav .menu-item-has-children > a{padding-right:15px;} .nyf-nav .menu-item-has-children > a::before{ content:""; position:absolute; right:0; top:calc(50% - 2px); width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-50%) rotate(45deg); opacity:0.8; } .nyf-nav ul ul{ position:absolute; left:-18px; top:100%; z-index:40; display:block; min-width:210px; padding:8px; gap:0; background:var(--nyf-surface); border-top:3px solid var(--nyf-accent); border-radius:var(--nyf-radius,0); box-shadow:0 14px 34px rgba(15,23,42,0.16); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } /* Drie manieren om het paneel te openen, en alle drie zijn nodig. :hover is de muis. :focus-within houdt het open terwijl je er met de tab-toets doorheen loopt. En a:focus + ul is de enige manier om er überhaupt in te kómen met een toetsenbord: een element met visibility:hidden kan geen focus krijgen, dus zolang het paneel dicht is, is er niets binnenin om :focus-within mee af te laten gaan. Het moet dus opengaan zodra de bovenliggende link zelf focus heeft. */ .nyf-nav li:hover > ul, .nyf-nav li:focus-within > ul, .nyf-nav .menu-item-has-children > a:focus + ul{opacity:1; visibility:visible; transform:translateY(0);} .nyf-nav ul ul a{ display:block; padding:9px 12px; white-space:normal; opacity:0.86; color:var(--nyf-text); } .nyf-nav ul ul a::after{display:none;} .nyf-nav ul ul a:hover, .nyf-nav ul ul a:focus-visible{opacity:1; background:var(--nyf-bg-alt);} /* Een derde niveau schuift naast zijn ouder in plaats van eronder. */ .nyf-nav ul ul ul{left:100%; top:-8px;} .nyf-nav ul ul .menu-item-has-children > a::before{transform:translateY(-50%) rotate(-45deg);} .nyf-header-cta{flex:none; font-size:var(--nyf-nav-size,14px);} .nyf-nav-toggle{ display:none; background:none; color:var(--nyf-header-text); border:1.5px solid currentColor; opacity:0.72; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; flex:none; } .nyf-nav-toggle:hover, .nyf-nav-toggle:focus-visible{opacity:1;} /* ===================================================== Secties ===================================================== */ .nyf-block{padding:var(--nyf-block-pad) 0; border-bottom:1px solid var(--nyf-line);} .nyf-block.is-alt{background:var(--nyf-bg-alt);} /* Elke sectie met een id is een ankerdoel; die moeten allemaal onder de vaste header uit springen. Eén regel in plaats van een lijst met sectienamen, zodat een nieuwe sectie hier niets vraagt. */ .nyf-block[id]{scroll-margin-top:var(--nyf-header-h);} .nyf-entry-title{font-size:clamp(26px,3vw,38px); color:var(--nyf-ink);} .nyf-entry-head + .nyf-entry-content{margin-top:32px;} .nyf-entry-image{margin:32px 0 0;} /* De inleidende alinea. Bewust groter en donkerder dan lopende tekst: hij is ook smaller, en een regel die zich anders gedraagt zonder er anders uit te zien leest als een fout. Zet je er per ongeluk je hele verhaal in, dan zie je nu meteen dat dit niet de bodytekst is. */ .nyf-intro{ margin-top:18px; font-size:17.5px; line-height:1.5; color:var(--nyf-ink); max-width:64ch; } .nyf-section-title{font-size:clamp(26px,3vw,36px); color:var(--nyf-ink); margin-bottom:28px; max-width:24ch;} /* Een gewone H2 in de inhoud krijgt dezelfde maat als een sectietitel. Zonder deze regel viel hij terug op de browserstandaard — anderhalf keer de tekstgrootte, zo'n 23px — en moest een redacteur bij elke kop zelf een lettergrootte kiezen om hem als sectiekop te laten lezen. In :where(), dus zonder gewicht: elke kop die al een eigen maat heeft (in een patroon, of met een lettergrootte uit de werkbalk) houdt die. */ .nyf-entry-content :where(h2.wp-block-heading){font-size:clamp(26px,3vw,36px);} /* De contentbreedte zit op de tekst, niet op de container. Zou .nyf-entry-content zelf op 70ch staan, dan zouden ook kolommen, groepen en banden daarin gevangen zitten en kon een patroon nooit breder worden dan een alinea. Nu leest lopende tekst prettig terwijl alles met een eigen indeling de volle breedte houdt. */ .nyf-entry-content{font-size:15.5px; color:var(--nyf-ink-soft);} .nyf-entry-content > * + *{margin-top:18px;} .nyf-entry-content > p, .nyf-entry-content > ul, .nyf-entry-content > ol, .nyf-entry-content > blockquote, .nyf-entry-content > .wp-block-heading{max-width:70ch;} /* Een leeslengte van 70 tekens is goed voor lopende tekst, maar een opsomming die als lijst is bedoeld — een publicatielijst, een overzicht — is geen lopende tekst en hoort de volle kolom te vullen. In twee kolommen was 70 tekens bovendien de helft van wat nodig is. */ .nyf-entry-content > .nyf-biblio{max-width:none;} .nyf-entry-content h2, .nyf-entry-content h3{color:var(--nyf-ink); margin-top:34px;} .nyf-entry-content a{color:var(--nyf-ink); text-decoration-color:var(--nyf-accent);} .nyf-entry-content ul, .nyf-entry-content ol{padding-left:1.2em;} /* Blokken die vol- of breeduit staan mogen de contentbreedte doorbreken; dat is precies waar align-wide voor bedoeld is. */ .nyf-entry-content .alignwide{max-width:var(--nyf-wrap);} .nyf-entry-content .alignfull{max-width:none;} .nyf-entry-list{display:grid; gap:32px; margin-top:40px;} .nyf-entry-card{border-top:1px solid var(--nyf-line); padding-top:24px;} .nyf-entry-card-title{font-size:20px;} .nyf-entry-card-title a{text-decoration:none;} .nyf-entry-card-title a:hover{color:var(--nyf-accent-strong);} .nyf-entry-card-excerpt{margin-top:10px; color:var(--nyf-ink-soft); font-size:15px;} /* Een artikel met uitsnede. De afbeelding staat links en heeft een vaste verhouding, zodat een rij artikelen met verschillend hoge foto's toch een rechte kantlijn houdt. has-beeld staat op het artikel en niet op de afbeelding: een artikel zónder uitgelichte afbeelding blijft zo precies wat het was, een kop met een samenvatting over de volle breedte. */ .nyf-entry-card.has-beeld{ display:grid; grid-template-columns:200px 1fr; gap:26px; align-items:start; } .nyf-entry-card-beeld{display:block; border-radius:var(--nyf-radius,0); overflow:hidden;} .nyf-entry-card-beeld img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; transition:transform 0.3s ease; } .nyf-entry-card.has-beeld:hover .nyf-entry-card-beeld img{transform:scale(1.03);} .nyf-page-links, .nyf-404-actions{margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;} /* Alleen zichtbaar voor ingelogde redacteuren — zie nyf_admin_hint(). */ .nyf-admin-hint{ position:relative; display:inline-block; margin-top:2px; max-width:26ch; font-size:10.5px; font-weight:600; line-height:1.4; color:#7a5b00; background:#fff8de; border:1px dashed #d4a017; padding:6px 10px; } /* ===================================================== Sectiebibliotheek Generieke opmaak voor de blokpatronen die het theme meelevert. Elke site kan ze gebruiken, geen enkele site is eraan gebonden: de klassen worden door de patronen op de blokken gezet, dus wat een site niet invoegt, matcht hier nergens op. ===================================================== */ /* Klein genummerd label boven een kop, plus het streepje eronder. */ .nyf-kicker{ display:inline-flex; align-items:baseline; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--nyf-accent-strong); font-variant-numeric:tabular-nums; } .nyf-kicker .num{font-weight:700; color:var(--nyf-ink-soft); opacity:0.55;} .nyf-rule{width:44px; height:3px; background:var(--nyf-accent); border:none; margin:18px 0 0;} /* Hero: tekst naast beeld, met een fijn raster op de achtergrond. */ .nyf-hero{position:relative; overflow:hidden;} .nyf-hero.has-grid::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(var(--nyf-line) 1px, transparent 1px), linear-gradient(90deg, var(--nyf-line) 1px, transparent 1px); background-size:56px 56px; opacity:0.5; mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 38%, transparent 92%); -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 38%, transparent 92%); pointer-events:none; } .nyf-hero > .nyf-wrap{position:relative;} .nyf-hero .wp-block-columns{align-items:center !important;} .nyf-hero h1{font-size:clamp(34px,4.4vw,50px); line-height:1.12; max-width:22ch;} .nyf-hero .nyf-lede{margin-top:22px; font-size:16.5px; color:var(--nyf-ink-soft); max-width:56ch;} .nyf-hero .nyf-payoff{margin-top:26px; font-size:21px; font-weight:600; color:var(--nyf-ink); letter-spacing:-0.01em;} /* Iconenrij: gelijke kolommen met een rond icoon en een korte regel. Als volle-breedte band onder de hero, of ergens midden op een pagina. */ .nyf-icon-columns.wp-block-columns{margin-top:0 !important; gap:0 !important;} .nyf-icon-columns .wp-block-column{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:0 28px; border-left:1px solid var(--nyf-line); } .nyf-icon-columns .wp-block-column:first-child{border-left:none;} .nyf-icon-columns p{font-size:14px; font-weight:500; color:var(--nyf-ink); margin:0; max-width:20ch;} .nyf-icon-badge{ width:46px; height:46px; margin:0 0 4px; box-sizing:border-box; padding:10px; border-radius:50%; border:1.5px solid var(--nyf-ink); display:flex; align-items:center; justify-content:center; flex:none; } .nyf-icon-badge img{width:100%; height:100%; object-fit:contain;} /* Bandje over de volle breedte, iets afwijkend van zijn buren. */ .nyf-band{background:var(--nyf-bg-alt); border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line);} .nyf-band > .nyf-wrap{padding-top:44px; padding-bottom:44px;} /* Rij: icoon, titel, omschrijving. Herhaal hem voor een dienstenlijst, een programma of een opsomming van edities. */ .nyf-feature-row.wp-block-columns{ margin-top:0 !important; gap:24px !important; align-items:flex-start !important; padding:30px 0; border-top:1px solid var(--nyf-line); } .nyf-feature-row .nyf-icon-badge{width:48px; height:48px; border-color:var(--nyf-accent-strong); margin:0;} .nyf-feature-row .wp-block-heading{font-size:17px; font-weight:600; color:var(--nyf-ink); margin:0;} .nyf-feature-row p{font-size:14.5px; color:var(--nyf-ink-soft); margin:0;} /* Uitgelicht blok met een zin en een knop ernaast. */ .nyf-callout.wp-block-group{ margin-top:52px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--nyf-surface); border:1px solid var(--nyf-line); padding:32px 36px; } .nyf-callout p{font-size:16px; font-weight:500; color:var(--nyf-ink); max-width:46ch; margin:0;} .nyf-callout .wp-block-buttons{margin-top:0;} /* Contactkolom: adres als grote link, daaronder een opsomming. */ .nyf-contact-info .nyf-email a{ display:inline-flex; align-items:baseline; gap:10px; font-size:18px; font-weight:600; padding-bottom:4px; border-bottom:1.5px solid var(--nyf-accent); text-decoration:none; color:var(--nyf-ink); } .nyf-contact-info ul.wp-block-list{list-style:none; margin:36px 0 0; padding:0; display:flex; flex-direction:column; gap:13px;} .nyf-contact-info li{display:flex; align-items:baseline; gap:12px; font-size:14.5px; color:var(--nyf-ink-soft);} .nyf-contact-info li::before{content:""; width:6px; height:6px; background:var(--nyf-accent); flex:none; transform:translateY(-2px);} /* Het vak voor een reviewplugin. De plugin tekent zijn eigen widget; het theme geeft alleen de ruimte eromheen. Het lettertype wordt niet overschreven: een plugin kan pictogrammen als lettertype tekenen, en die veranderen dan in losse letters. */ .nyf-entry-content > .nyf-reviews{margin-top:36px; max-width:none;} .nyf-reviews + .wp-block-buttons{margin-top:28px;} /* Contactkaart: één groot aanspreekpunt met daaronder de gegevens in twee kolommen. Bedoeld naast een kop met een korte uitnodiging. */ .nyf-contact-card{ background:var(--nyf-surface); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:34px; } .nyf-lead-link{margin:0;} .nyf-lead-link a{ font-family:var(--nyf-font-heading); font-size:27px; font-weight:600; color:var(--nyf-accent-strong); text-decoration:none; } .nyf-lead-link a:hover{text-decoration:underline;} /* Een tabel zonder tabelstreken: links het label, rechts de waarde. Het tabelblok van WordPress is hier het handigst — een redacteur voegt een rij toe met de knop in de werkbalk, zonder opmaak te hoeven kennen. */ .nyf-detail-table.wp-block-table{margin-top:22px;} .nyf-detail-table.wp-block-table table{border-collapse:collapse; width:100%;} .nyf-detail-table.wp-block-table td, .nyf-detail-table.wp-block-table th{ border:0; padding:7px 0; vertical-align:top; font-size:15.5px; text-align:left; } .nyf-detail-table.wp-block-table tr > *:first-child{ color:var(--nyf-ink-soft); padding-right:24px; white-space:nowrap; width:1%; font-weight:400; } .nyf-detail-table.wp-block-table tr > *:last-child{color:var(--nyf-ink); font-weight:600;} /* Paneel voor een formulier-shortcode. */ .nyf-panel.wp-block-column, .nyf-panel.wp-block-group{background:var(--nyf-surface); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:40px;} .nyf-panel .wp-block-shortcode{ display:block; border:1.5px dashed var(--nyf-line); padding:28px; text-align:center; font-size:13.5px; color:var(--nyf-ink-soft); line-height:1.6; } /* Beeldkader met hoekmarkeringen, ook bruikbaar als lege plaatshouder zolang er nog geen foto is. */ /* Het kader heeft een eigen verhouding nodig. De afbeelding erin staat absoluut gepositioneerd, dus zonder aspect-ratio heeft het kader geen hoogte en wordt het een streep. Een andere verhouding zet je per blok met de bijsnijhulp, of met een eigen CSS-klasse. */ .nyf-frame{ position:relative; aspect-ratio:4 / 3; border:1px solid var(--nyf-line); background:linear-gradient(155deg, var(--nyf-bg-alt) 0%, var(--nyf-line) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; overflow:hidden; } .nyf-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .nyf-frame::before, .nyf-frame::after{content:""; position:absolute; width:22px; height:22px; border:1.5px solid var(--nyf-accent-strong); opacity:0.65;} .nyf-frame::before{top:16px; left:16px; border-right:none; border-bottom:none;} .nyf-frame::after{bottom:16px; right:16px; border-left:none; border-top:none;} .nyf-frame.has-photo::before, .nyf-frame.has-photo::after{display:none;} .nyf-frame .nyf-frame-label{ font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--nyf-accent-strong); opacity:0.85; max-width:22ch; position:relative; } /* Sectie met het label in de kantlijn. Het label staat naast de kop op een dikke streep, zoals een kopregel in een boek. Daardoor is er onder de kop geen accentstreepje meer nodig — dat deed hetzelfde werk dubbel. */ .nyf-margin-label.wp-block-columns{gap:56px !important; align-items:flex-start !important;} .nyf-margin-label .nyf-label{ font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--nyf-accent-strong); padding-top:12px; border-top:2px solid var(--nyf-primary); margin:0; } /* Genummerde stappen. De nummers komen uit een CSS-teller, niet uit de tekst. Een stap ertussen zetten of eentje weghalen hernummert de rest dus vanzelf — met ingetypte cijfers is dat gegarandeerd een keer vergeten. */ .nyf-steps{counter-reset:nyf-step; margin-top:44px;} .nyf-steps > .nyf-step{ counter-increment:nyf-step; display:grid; grid-template-columns:74px 1fr; gap:24px; padding:26px 0; margin:0; border-top:1px solid var(--nyf-line); } .nyf-steps > .nyf-step::before{ content:counter(nyf-step,decimal-leading-zero); font-family:var(--nyf-font-heading); font-size:30px; font-weight:600; color:var(--nyf-accent); line-height:1; } .nyf-steps .wp-block-heading{font-size:20px; color:var(--nyf-ink); margin:0;} .nyf-steps p{margin-top:8px; color:var(--nyf-ink-soft); max-width:60ch;} /* Feitenband: grote cijfers tussen haarlijnen. margin-block en niet margin: de horizontale marges zijn hier juist wat de band over de volle breedte trekt (zie de alignfull-regel bovenaan). Die met een kortschrift op nul zetten haalde die breedte er weer af — de band begon dan bij de tekstkolom en liep rechts het scherm uit. */ .nyf-facts.wp-block-columns{ gap:0 !important; margin-block:0 !important; /* De band loopt door tot de schermrand, de cijfers erin blijven op de contentbreedte staan. Zonder die tweede stap staan drie getallen over twee meter beeldscherm uitgesmeerd. */ padding-block:46px; padding-inline:max(32px, calc((100vw - var(--nyf-wrap)) / 2 + 32px)); border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line); background:var(--nyf-surface); } .nyf-facts .wp-block-column{ padding:0 34px; border-left:1px solid var(--nyf-line); text-align:center; } .nyf-facts .wp-block-column:first-child{border-left:none;} .nyf-fact-number{ font-family:var(--nyf-font-heading); font-size:44px; font-weight:600; color:var(--nyf-primary); line-height:1; margin:0; } .nyf-fact-label{ margin-top:10px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--nyf-accent-strong); font-weight:600; } /* Oproepbaan over de volle breedte. Standaard licht en niet donker. Een donkere baan pal boven de donkere footer loopt daarmee samen tot één zwart blok waarin de scheiding wegvalt — en juist onderaan de pagina staat zo'n oproep bijna altijd. Wil een site hem toch donker, dan zet je de achtergrondkleur van het groepsblok zelf om in de blokinstellingen; het palet staat er al. De baan is zelf de flexrij. De zijruimte komt uit padding in plaats van uit een binnenwrapper, want die wrapper zit niet in de blokmarkup: padding-inline knijpt de inhoud naar dezelfde contentbreedte als de rest van de pagina, terwijl de achtergrond doorloopt tot de rand. */ .nyf-cta-band.wp-block-group, .nyf-dark.wp-block-group{ background:var(--nyf-bg-alt); border-top:1px solid var(--nyf-line); border-bottom:1px solid var(--nyf-line); padding-block:56px; padding-inline:max(32px, calc((100vw - var(--nyf-wrap)) / 2 + 32px)); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } /* Blokken die WordPress met de indeling "constrained" heeft opgeslagen krijgen van core margin-inline:auto. Een kop met een kleinere max-width dan de alinea eronder raakt daardoor gecentreerd, en dan begint hij een stuk verder naar rechts dan de tekst. In een baan waar alles links uitlijnt is dat altijd fout. */ .nyf-cta-band > *, .nyf-dark > *, .nyf-cta-band .wp-block-group > *, .nyf-dark .wp-block-group > *{margin-inline:0;} .nyf-cta-band .wp-block-heading, .nyf-dark .wp-block-heading{max-width:22ch;} .nyf-cta-band p, .nyf-dark p{margin-top:10px; color:var(--nyf-ink-soft); max-width:52ch;} .nyf-cta-band .wp-block-buttons, .nyf-dark .wp-block-buttons{margin-top:0;} /* Zet iemand de baan alsnog op een donkere achtergrondkleur, dan moet de tekst meekleuren. has-background is de klasse die WordPress erop zet. */ .nyf-cta-band.has-background.has-text-color .wp-block-heading, .nyf-cta-band.has-background.has-text-color p{color:inherit;} /* Bibliografie: hangende inspringing, titel cursief. De titel is een gewoon vetgedrukt stuk tekst — dat kan een redacteur met de knop in de werkbalk, zonder dat er een eigen opmaakformaat geregistreerd hoeft te worden. */ .nyf-biblio.wp-block-list{list-style:none; margin-top:36px; padding:0;} .nyf-biblio li{ padding:16px 0 16px 2.2em; text-indent:-2.2em; border-top:1px solid var(--nyf-line); font-size:15px; color:var(--nyf-ink-soft); } /* Een lange lijst in twee kolommen. break-inside houdt een regel die over twee regels loopt bij elkaar in plaats van hem over de kolomrand te knippen. */ .nyf-biblio.is-two-column{columns:2; column-gap:56px;} .nyf-biblio.is-two-column li{break-inside:avoid;} .nyf-biblio li b, .nyf-biblio li strong{ font-family:var(--nyf-font-heading); font-style:italic; font-weight:400; font-size:18px; color:var(--nyf-ink); } /* Menukaart: categorieën die als krantenkolommen doorlopen. Geen raster met vaste vakken maar CSS-kolommen: een korte categorie laat geen gat achter, de volgende schuift gewoon op. Hoeveel categorieën er ook zijn, de kolommen blijven ongeveer even lang. Er staan geen prijzen in en dus ook geen stippellijnen of tweede kolom — de namen krijgen de ruimte. Een toelichting bij een gerecht is cursief gezette tekst in het lijstitem (Ctrl+I in de editor). Die verschijnt hier klein en op een eigen regel, zodat een redacteur geen tweede blok of eigen opmaak hoeft te kennen — hetzelfde idee als de vetgedrukte titel in de publicatielijst. */ .nyf-menukaart{columns:3; column-gap:56px; margin-top:44px;} .nyf-menukaart > .nyf-menukaart-cat{ break-inside:avoid; margin:0 0 38px; } .nyf-menukaart-cat > .wp-block-heading{ margin:0; padding-bottom:10px; font-size:20px; color:var(--nyf-accent-strong); border-bottom:2px solid var(--nyf-accent); } .nyf-menukaart-cat ul.wp-block-list{list-style:none; margin:14px 0 0; padding:0;} .nyf-menukaart-cat li{padding:7px 0; margin:0; font-size:16px; color:var(--nyf-ink);} .nyf-menukaart-cat li em{ display:block; margin-top:2px; font-style:normal; font-size:14px; color:var(--nyf-ink-soft); } .nyf-menukaart-cat > p{margin:10px 0 0; font-size:14px; color:var(--nyf-ink-soft);} /* Een beeldmerk of illustratie in plaats van een foto. Het verschil met .nyf-frame: geen kader, geen achtergrond, en de afbeelding wordt volledig getoond in plaats van bijgesneden. Een foto vult zijn kader en mag aan de randen wegvallen; een logo mag dat nooit. */ .nyf-mark{margin:0;} .nyf-mark img{ width:auto; max-width:100%; max-height:340px; height:auto; margin-inline:auto; object-fit:contain; } /* Ondertekening onder een persoonlijk stuk tekst. */ .nyf-signature{margin-top:30px; padding-top:24px; border-top:1px solid var(--nyf-line); font-size:14px; font-weight:600; color:var(--nyf-ink);} .nyf-signature span{display:block; margin-top:3px; font-size:12.5px; font-weight:400; color:var(--nyf-ink-soft);} /* Sectielabel met doorlopende lijn. Het label staat links, de lijn loopt eruit weg tot de rand van de contentkolom. Een alternatief voor de sectiekop met kicker: minder nadrukkelijk, en het verbindt de kop met de rest van de regel in plaats van er alleen boven te hangen. */ .nyf-rule-label{display:flex; align-items:center; gap:20px; margin-bottom:26px;} .nyf-rule-label > *{margin:0;} .nyf-rule-label p{ font-size:12px; letter-spacing:0.19em; text-transform:uppercase; font-weight:700; color:var(--nyf-accent-strong); white-space:nowrap; } .nyf-rule-label::after{ content:""; height:1px; background:var(--nyf-accent); flex:1; opacity:0.55; } /* Kolommen met een gekleurde bovenlijn in plaats van een kaartvlak. Lichter dan .nyf-cards: geen omkadering, alleen een streep boven en haarlijnen ertussen. */ .nyf-topline-columns.wp-block-columns{gap:0 !important; align-items:stretch !important;} /* De eerste kolom heeft links geen padding, zodat de tekst gelijk staat met de rand van de contentkolom. Zijn buitenmaat is daardoor 34px smaller dan die van de andere, maar de inhoud is even breed — dat is wat je ziet. */ .nyf-topline-columns > .wp-block-column{ border-top:2px solid var(--nyf-accent); padding:32px 34px 32px 0; } .nyf-topline-columns > .wp-block-column + .wp-block-column{ padding-left:34px; border-left:1px solid var(--nyf-line); } .nyf-topline-columns .wp-block-heading{font-size:23px; color:var(--nyf-ink); margin:0;} .nyf-topline-columns p{margin-top:12px; font-size:15.5px; color:var(--nyf-ink-soft);} /* Sectiekop: het genummerde label, de kop en de intro als één geheel. */ .nyf-section-head{max-width:640px;} .nyf-section-head .wp-block-heading{margin-top:16px; font-size:clamp(26px,3vw,36px); color:var(--nyf-ink);} /* Hero zonder beeld, alles gecentreerd. */ .nyf-hero.is-centered{text-align:center;} .nyf-hero.is-centered h1{margin-left:auto; margin-right:auto;} .nyf-hero.is-centered .nyf-lede{margin-left:auto; margin-right:auto;} .nyf-hero.is-centered .wp-block-buttons{justify-content:center;} /* Kaartenrij: gelijke kaarten naast elkaar. Bruikbaar voor diensten, publicaties, edities of wat een site verder in drieën wil zetten. */ .nyf-cards.wp-block-columns{gap:24px !important; align-items:stretch !important;} .nyf-card.wp-block-column{ background:var(--nyf-surface); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:32px 28px; display:flex; flex-direction:column; gap:12px; } .nyf-card .wp-block-heading{font-size:19px; color:var(--nyf-ink); margin:0;} .nyf-card p{font-size:14.5px; color:var(--nyf-ink-soft); margin:0;} .nyf-card .wp-block-buttons{margin-top:auto; padding-top:16px;} /* Een opsomming in een kaart: wat er in een arrangement zit. Streepjes in de accentkleur in plaats van bolletjes, in de maat van de kaarttekst. */ .nyf-card ul.wp-block-list{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;} .nyf-card ul.wp-block-list li{position:relative; padding-left:18px; font-size:14.5px; color:var(--nyf-ink-soft);} .nyf-card ul.wp-block-list li::before{content:""; position:absolute; left:0; top:0.72em; width:8px; height:2px; background:var(--nyf-accent);} /* De prijsregel onderin een kaart. Staat hij er, dan zakt hij naar de voet van de kaart, zodat de prijzen in een rij op één hoogte staan hoe lang de omschrijvingen ook zijn. Een tweede regel (per persoon, een extra) komt er klein onder via een zachte regelafbreking. */ .nyf-card p.nyf-prijs{ margin-top:auto; padding-top:16px; border-top:1px solid var(--nyf-line); font-family:var(--nyf-font-heading); font-size:22px; font-weight:600; line-height:1.3; color:var(--nyf-accent-strong); } .nyf-card p.nyf-prijs em{ display:block; margin-top:2px; font-family:var(--nyf-font-body); font-style:normal; font-size:13.5px; font-weight:400; color:var(--nyf-ink-soft); } .nyf-card p.nyf-prijs + .wp-block-buttons{margin-top:0;} .nyf-card .wp-block-table{margin:4px 0 0;} /* Twee kaartenrijen onder elkaar krijgen lucht ertussen. */ .nyf-cards.wp-block-columns + .nyf-cards.wp-block-columns{margin-top:24px;} /* Regel met datum, tijd en plaats boven een kaartkop. */ .nyf-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--nyf-accent-strong); font-variant-numeric:tabular-nums; } /* Logobalk. De logo's krijgen een vaste hoogte zodat een rij met wisselende bestandsformaten toch rustig oogt. */ .nyf-logos.wp-block-columns{gap:40px !important; align-items:center !important;} .nyf-logos .wp-block-image{margin:0;} .nyf-logos img{ max-height:56px; width:auto; margin:0 auto; object-fit:contain; filter:grayscale(1); opacity:0.65; transition:filter 0.2s ease, opacity 0.2s ease; } .nyf-logos img:hover{filter:grayscale(0); opacity:1;} /* Veelgestelde vragen, op het uitklapblok van WordPress zelf. */ .nyf-faq{margin-top:40px; max-width:760px;} .nyf-faq .wp-block-details{border-top:1px solid var(--nyf-line); padding:20px 0;} .nyf-faq .wp-block-details summary{ font-family:var(--nyf-font-heading); font-size:16.5px; font-weight:600; color:var(--nyf-ink); cursor:pointer; list-style:none; position:relative; padding-right:32px; } .nyf-faq .wp-block-details summary::-webkit-details-marker{display:none;} .nyf-faq .wp-block-details summary::after{ content:""; position:absolute; right:4px; top:50%; width:10px; height:10px; margin-top:-6px; border-right:2px solid var(--nyf-accent-strong); border-bottom:2px solid var(--nyf-accent-strong); transform:rotate(45deg); transition:transform 0.2s ease; } .nyf-faq .wp-block-details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;} .nyf-faq .wp-block-details p{margin-top:14px; font-size:15px; color:var(--nyf-ink-soft); max-width:64ch;} /* ===================================================== Widgetgebieden ===================================================== */ .nyf-widget-area{display:flex; flex-direction:column; gap:12px;} .nyf-widget-title{font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;} .nyf-widget-area ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;} /* ===================================================== Footer ===================================================== */ .nyf-footer{background:var(--nyf-footer-bg); color:var(--nyf-footer-text); padding:56px 0 30px;} .nyf-footer a{color:inherit;} /* De merknaam krijgt dubbele ruimte, de kolommen ernaast verdelen de rest. Met flexbox en niet met grid: een grid-tracklijst mag na een flexibele track (2fr) geen auto-repeat meer bevatten, dus die declaratie was ongeldig en werd stilzwijgend genegeerd — waarna alles onder elkaar kwam te staan. Flex heeft die beperking niet en past zich net zo goed aan het aantal kolommen aan. */ .nyf-footer-top{ display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start; padding-bottom:36px; border-bottom:1px solid color-mix(in srgb, var(--nyf-footer-text) 30%, transparent); } .nyf-footer-brand{flex:2 1 280px;} .nyf-footer-col, .nyf-footer-top .nyf-widget-area{flex:1 1 150px;} .nyf-footer-name{display:block; font-family:var(--nyf-font-heading); font-size:20px; font-weight:700; color:var(--nyf-bg);} .nyf-footer-tag{display:block; margin-top:8px; font-size:14px; opacity:0.85; max-width:44ch;} .nyf-footer-col ul, .nyf-footer-top .nyf-widget-area ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin:0; padding:0; } /* Een submenu in de voet klapt niet open — het staat ingesprongen onder zijn bovenliggende link. Zonder deze regel zou de gap van de lijst hierboven de subitems even ver uit elkaar zetten als de hoofditems, en las de rangorde niet meer. */ .nyf-footer-col li > ul{margin-top:9px; padding-left:14px; gap:7px; opacity:0.82;} .nyf-footer-col a, .nyf-footer-top .nyf-widget-area a{font-size:14.5px; text-decoration:none;} .nyf-footer-col a:hover, .nyf-footer-top .nyf-widget-area a:hover{color:var(--nyf-accent);} .nyf-footer-top .nyf-widget-title{ font-family:var(--nyf-font-body); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; margin:0 0 14px; opacity:0.7; } .nyf-footer-bottom{margin-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px;} /* De juridische regel: copyright, dan de links uit het menu Juridisch, met een middenpunt ertussen. Het punt staat in CSS en niet in het menu, zodat een redacteur alleen de pagina's hoeft toe te voegen. */ .nyf-footer-legal{display:flex; flex-wrap:wrap; align-items:baseline;} .nyf-legal-nav{display:contents;} .nyf-legal-menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;} .nyf-legal-menu li{margin:0;} .nyf-legal-menu li::before{content:"\00B7"; margin:0 0.55em; opacity:0.7;} .nyf-legal-menu a{text-decoration:none;} .nyf-legal-menu a:hover, .nyf-legal-menu a:focus-visible{text-decoration:underline;} /* ===================================================== Formulieren — losse resets zodat een ingeplakte shortcode van een formulierplugin de look van het theme overneemt in plaats van zijn eigen grijze standaard mee te brengen. ===================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select{ font-family:inherit; font-size:14.5px; color:var(--nyf-ink); background:var(--nyf-bg); border:1px solid var(--nyf-line); border-radius:var(--nyf-radius,0); padding:12px 14px; width:100%; max-width:100%; } input[type="submit"], button[type="submit"]{ font-family:inherit; font-size:14px; font-weight:600; background:var(--nyf-button-bg); color:var(--nyf-button-text); border:1.5px solid transparent; border-radius:var(--nyf-radius-btn,var(--nyf-radius,0)); padding:13px 24px; cursor:pointer; } /* ===================================================== Statuslabel — het stoplicht Een klein label dat een toestand toont: in orde, let op, actie nodig, onbekend. Hangt aan klassen en niet aan een blok, zodat het net zo goed in een tabelcel past als in een kaart. De kleur is nooit het enige dat het zegt — er staat altijd tekst in het label. Dat is geen extra moeite en het scheelt iedereen die kleuren slecht onderscheidt het giswerk. ===================================================== */ .nyf-badge{ display:inline-flex; align-items:center; font-family:var(--nyf-font-body); font-size:12px; font-weight:600; letter-spacing:0.02em; line-height:1; white-space:nowrap; padding:6px 11px; border-radius:999px; background:var(--nyf-bg-alt); color:var(--nyf-ink-soft); border:1px solid var(--nyf-line); } .nyf-badge-ok, .nyf-badge-warn, .nyf-badge-alert{color:#ffffff; border-color:transparent;} .nyf-badge-ok{background:var(--nyf-status-ok,#2f8f5b);} .nyf-badge-warn{background:var(--nyf-status-warn,#b7791f);} .nyf-badge-alert{background:var(--nyf-status-alert,#b4452f);} /* ===================================================== Koppen met een teken erbij ===================================================== */ /* De golflijn. Een masker in de accentkleur, dus hij volgt de site. */ .wp-block-heading.is-style-golflijn::before{ content:""; display:block; width:84px; height:12px; margin-bottom:16px; background:var(--nyf-accent); -webkit-mask:var(--nyf-wave) no-repeat left center / 84px 12px; mask:var(--nyf-wave) no-repeat left center / 84px 12px; } .wp-block-heading.is-style-golflijn.has-text-align-center::before{margin-inline:auto;} .wp-block-heading.is-style-golflijn.has-text-align-right::before{margin-inline:auto 0;} /* Een vet woord in de kop krijgt de accentkleur. De redacteur zet het woord vet; de kleur komt hiervandaan en loopt dus mee als de site ooit een ander accent krijgt. */ .wp-block-heading.is-style-accentwoord strong, .wp-block-heading.is-style-accentwoord b{color:var(--nyf-accent-strong); font-weight:inherit;} /* ===================================================== Archief — de opmaak bij de patronen uit inc/patterns.php Deze regels hangen aan klassen die in de patronen staan, niet aan blokselectors van WordPress. Daardoor blijft een blok dat een redacteur zelf toevoegt gewoon een gewoon blok, en verandert er niets aan pagina's die deze patronen niet gebruiken. ===================================================== */ /* Het jaartal als rond label. Komt uit de meta van het item, dus als het veld leeg is drukt WordPress een lege paragraaf af — vandaar :empty, anders staat er een gekleurd bolletje zonder inhoud. */ .nyf-jaarbadge{ display:inline-block; margin:0 0 12px; font-family:var(--nyf-font-heading); font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; background:var(--nyf-accent); color:var(--nyf-primary-deep); padding:6px 15px; border-radius:999px; } .nyf-jaarbadge:empty{display:none;} .nyf-ondertitel{margin:6px 0 0; font-size:17px; opacity:0.82;} .nyf-ondertitel:empty{display:none;} .nyf-uitgelicht{margin:16px 0 0; font-size:19px; font-style:italic; max-width:34ch;} .nyf-uitgelicht:empty{display:none;} .nyf-archief-uitgelicht .wp-block-post-title{margin:0;} /* De staatsiefoto in een vaste verhouding. * * Zo'n foto komt aan als een staande opname van pakweg 1600 bij 2400, * en die duwt de hele band uit elkaar. Zelf verkleinen in de editor is * geen oplossing: dan staat er een klein plaatje in een groot vak. * Het theme snijdt hem daarom bij op 3:4 — dezelfde verhouding als de * portretten in de gallerie, zodat de prins op de voorpagina en in het * raster hetzelfde formaat heeft. Wat er buiten valt is de onderkant; * bij een staatsiefoto is dat de mantel en niet het gezicht. */ .nyf-archief-uitgelicht .wp-block-post-featured-image img{ aspect-ratio:3 / 4; object-fit:cover; object-position:center top; width:100%; height:auto; } /* Het raster van portretten. De kolomindeling komt van het blok zelf (post-template met layout grid), dus die staat hier niet: anders zouden een instelling in de editor en een regel hier elkaar tegenspreken en wint degene die toevallig later staat. */ .nyf-archief-kaart{ background:var(--nyf-surface); border-radius:var(--nyf-radius,0); padding:0 0 22px; overflow:hidden; height:100%; box-shadow:0 3px 16px rgba(15,23,42,0.09); } .nyf-archief-kaart > *{margin-left:20px; margin-right:20px;} .nyf-archief-kaart > .wp-block-post-featured-image{margin:0 0 18px;} .nyf-archief-kaart .wp-block-post-featured-image img{width:100%; height:auto;} .nyf-archief-kaart .wp-block-post-title{margin:0; font-size:20px;} .nyf-archief-kaart .nyf-uitgelicht{font-size:15px; margin-top:10px;} .nyf-archief-kaart .nyf-ondertitel{font-size:14.5px;} /* De indeling van één item: de uitgelichte regel op een gekleurde kaart naast de lopende tekst. */ .nyf-uitgelicht-kaart{ background:var(--nyf-accent); color:var(--nyf-primary-deep); border-radius:var(--nyf-radius,0); padding:26px 28px; } .nyf-uitgelicht-kaart .nyf-uitgelicht{ margin-top:8px; font-family:var(--nyf-font-heading); font-size:24px; font-style:normal; font-weight:700; line-height:1.2; } .nyf-kaart-label{ margin:0; font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.7; } /* Ronde en omlijnde portretten, als blokstijl te kiezen. De maximumbreedte is er omdat een rond portret in een brede tekstkolom anders een cirkel van bijna duizend pixels wordt. In een raster is de kolom smaller dan dit maximum, dus daar vult hij nog steeds zijn vak. */ .is-style-rond img{ border-radius:50%; aspect-ratio:1; object-fit:cover; display:block; width:100%; max-width:340px; margin-inline:auto; } .is-style-omlijst img{ border-radius:var(--nyf-radius,0); border:6px solid var(--nyf-accent); box-shadow:0 10px 28px rgba(15,23,42,0.18); } .is-style-rond.is-style-omlijst img{border-radius:50%;} /* ===================================================== Fotoalbums Een album is een gewone pagina met één Galerij-blok erin. Er zit dus geen plugin tussen, en dat scheelt de redacteur een tweede mediabibliotheek met eigen begrippen. Klikken om te vergroten doet WordPress zelf; dat staat aan in theme.json. ===================================================== */ .nyf-album-kaart{ background:var(--nyf-surface); border-radius:var(--nyf-radius,0); overflow:hidden; height:100%; padding:0 0 20px; box-shadow:0 3px 16px rgba(15,23,42,0.1); transition:transform 0.15s ease, box-shadow 0.15s ease; } .nyf-album-kaart:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(15,23,42,0.17);} .nyf-album-kaart > *{margin-left:20px; margin-right:20px;} .nyf-album-kaart > .wp-block-post-featured-image{margin:0 0 16px;} .nyf-album-kaart .wp-block-post-featured-image img{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; } /* Het seizoen op de albumkaart. * * Niet het jaartal van de publicatiedatum: een vastelaovesseizoen begint * op de elfde van de elfde en loopt door tot in maart, dus een album van * 11 november 2025 hoort bij 2025/2026. Het theme rekent dat uit; zie * inc/bindings.php. De redacteur zet alleen de datum van een album op de * dag van de gelegenheid zelf, wat hij toch al wil omdat daar ook de * volgorde aan hangt. Zo hoeft het seizoen niet in de titel, en blijft * die kort genoeg om op de kaart te passen. */ .nyf-album-kaart .nyf-seizoen, .nyf-album-kaart .wp-block-post-date{ display:inline-block; margin:0 0 10px; font-family:var(--nyf-font-heading); font-size:13px; font-weight:700; letter-spacing:0.14em; background:var(--nyf-accent); color:var(--nyf-primary-deep); padding:5px 14px; border-radius:999px; } .nyf-album-kaart .wp-block-post-date time{text-decoration:none;} .nyf-album-kaart .wp-block-post-title{margin:0; font-size:20px;} .nyf-album-kaart .wp-block-post-title a{text-decoration:none;} .nyf-album-tekst{margin-top:8px; font-size:14.5px; color:var(--nyf-ink-soft);} /* Het Galerij-blok van WordPress zelf. * * De hoekafronding volgt de site; dat mag altijd. * * De vierkante uitsnede is een blokstijl en dus een keuze. Bij een * fotoalbum wil je hem: foto's van een optocht komen liggend én staand * binnen, en een raster met wisselende hoogtes leest als een puinhoop. * Bij een site die een galerij voor iets anders gebruikt, zou hetzelfde * bijsnijden juist schade aanrichten — en dit theme draait op meer sites * dan één. Eerst stond het hier als vaste regel; dat was een keuze van * één site die aan alle andere werd opgelegd. */ .nyf-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img{ border-radius:var(--nyf-radius,0); } .wp-block-gallery.is-style-vierkant figure.wp-block-image img{ aspect-ratio:1; object-fit:cover; width:100%; } /* ===================================================== Logo's in rangen De rangorde zit in de grootte van het vak. Elke rang is een gewone kolommenrij; alleen het maximum per vak verschilt. Eén hoofdsponsor vult zo de hele breedte en drie verdelen hem, zonder dat er iets aan de opmaak veranderd hoeft te worden. ===================================================== */ .nyf-rangen{padding:56px 0;} .nyf-rangen h3{ display:flex; align-items:center; gap:14px; font-size:21px; margin:38px 0 16px; } .nyf-rangen h3::after{ content:""; flex:1; height:3px; background:var(--nyf-line); border-radius:2px; } .nyf-rangen h3:first-child{margin-top:0;} .nyf-rang{align-items:center;} .nyf-rang .wp-block-column{ background:var(--nyf-surface); border-radius:var(--nyf-radius,0); padding:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(15,23,42,0.08); } .nyf-rang img{width:100%; height:auto; object-fit:contain;} .nyf-rang.is-rang-1 .wp-block-column{padding:38px;} .nyf-rang.is-rang-1 img{max-height:120px;} .nyf-rang.is-rang-2 img{max-height:82px;} .nyf-rang.is-rang-3 img{max-height:58px;} /* Een rang als galerijblok. * * Dit is de vorm die het geworden is. Met kolommen moet de redacteur zelf * vakken bijmaken of weghalen als er een sponsor bij komt, en dan blijven * er lege witte kaarten staan — precies wat er gebeurde. Een galerijblok * neemt zoveel logo's als je erin sleept en vult de rijen zelf. * * Logo's komen in alle vormen binnen: brede banners, vierkante wapens, * zwarte vlakken. Daarom object-fit:contain en een vaste hoogte per rang. * Dat overschrijft de vierkante uitsnede die fotoalbums hierboven wél * krijgen — daar wil je bijsnijden, hier zou je een logo doorsnijden. */ /* Een rang kan logo's én namen bevatten — bij zilver is dat hier het geval. Beide blokken staan daarom klaar. Blijft er een leeg, dan mag hij geen gat in de pagina achterlaten; vandaar deze twee regels. Niet met :empty, want zodra WordPress het blok een keer opnieuw wegschrijft staat er witruimte in en telt dat als inhoud. */ .nyf-rangen .wp-block-gallery.has-nested-images:not(:has(img)){display:none;} .nyf-namen:not(:has(li)){display:none;} .nyf-rangen .wp-block-gallery.has-nested-images{gap:16px;} .nyf-rangen .wp-block-gallery.has-nested-images figure.wp-block-image{ background:var(--nyf-surface); border-radius:var(--nyf-radius,0); box-shadow:0 3px 12px rgba(15,23,42,0.08); padding:20px 24px; display:flex; align-items:center; justify-content:center; margin:0; } .nyf-rangen .wp-block-gallery.has-nested-images figure.wp-block-image img{ aspect-ratio:auto; object-fit:contain; width:auto; max-width:100%; border-radius:0; } /* De hoogte van het logo bepaalt de rang. Niet de breedte: een breed logo en een vierkant logo horen even zwaar te wegen, en dat lezen ze alleen als ze even hoog zijn. */ .nyf-rangen .is-rang-1 figure.wp-block-image img{max-height:104px;} .nyf-rangen .is-rang-2 figure.wp-block-image img{max-height:72px;} .nyf-rangen .is-rang-3 figure.wp-block-image img{max-height:52px;} .nyf-rangen .is-rang-4 figure.wp-block-image img{max-height:38px;} .nyf-rangen .is-rang-1 figure.wp-block-image{padding:32px 36px;} .nyf-rangen .is-rang-4 figure.wp-block-image{padding:14px 16px;} .nyf-rang-namen{ margin-top:14px; font-size:15px; opacity:0.8; line-height:2; } /* Sponsors zonder logo. * * De lagere rangen zijn vaak particulieren: mensen die de vereniging * geld geven zonder dat daar een bedrijf achter zit. Die horen geen leeg * logovak te krijgen. Eén naam per regel in een gewone lijst is voor de * redacteur het eenvoudigst wat er is; hieronder wordt dat een rij * naamplaatjes die vanzelf doorloopt, hoeveel het er ook zijn. * * Werkt ook op een gekleurde band: het plaatje pakt daar de * kaartachtergrond en de tekst de hoofdkleur, dus het blijft leesbaar. */ .nyf-namen{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } /* ul ervoor, en dat is nodig: verderop staat .has-background li op color:inherit, zodat lopende tekst op een gekleurde band de bandkleur pakt. Die regel weegt even zwaar als .nyf-namen li en staat later, dus won hij — met witte tekst op een wit naamplaatje tot gevolg, precies wat er op de optochtband gebeurde. Een naamplaatje is een kaartje en geen lopende tekst, dus het hoort die regel te overrulen. */ ul.nyf-namen li{ background:var(--nyf-surface); color:var(--nyf-primary); border-radius:999px; padding:9px 18px; font-family:var(--nyf-font-heading); font-size:15px; font-weight:600; line-height:1.3; box-shadow:0 2px 8px rgba(15,23,42,0.07); } ul.nyf-namen.is-klein li{font-size:13.5px; padding:7px 15px;} /* ===================================================== Paginakop met kleurvlak Staat bovenaan een pagina, over de volle breedte. De kleur kiest de redacteur op het blok zelf; hier staat alleen de ruimte eromheen en de regel dat kop en tekst de kleur van het vlak erven — anders zou de donkerblauwe koptekst uit theme.json op een donkerblauwe band verdwijnen. ===================================================== */ /* De band loopt door tot de schermrand, de tekst erin blijft op de contentbreedte staan. Dezelfde aanpak als .nyf-facts en .nyf-cta-band, en met opzet niet de constrained-indeling van core: die geldt alleen als de redacteur die instelling op het blok laat staan, en dan hangt de opmaak af van een vinkje in de editor. */ .nyf-paginakop{ padding-block:60px 56px; padding-inline:max(32px, calc((100vw - var(--nyf-wrap)) / 2 + 32px)); } .nyf-paginakop .wp-block-heading{margin:0; color:inherit;} .nyf-paginakop .nyf-lede{margin-top:14px; color:inherit; opacity:0.9; max-width:56ch;} /* Aansluiten op de header regelt de bestaande alignfull-regel hierboven al: die pakt elk eerste volle-breedte blok in de inhoud. Geen tweede regel voor hetzelfde. */ /* ===================================================== Slinger — een streep in de kleuren van de site. Puur versiering. Er stond eerst aria-hidden op, maar een Groep-blok schrijft dat attribuut nooit weg en dan keurt Gutenberg het blok af met "onverwachte of ongeldige inhoud". Een lege div zonder tekst wordt door een schermlezer toch al overgeslagen. De kleuren komen uit de tokens; een site die de extra kleuren niet invult, ziet een streep in vier tinten van zijn eigen palet en niet iets willekeurigs. ===================================================== */ .nyf-slinger{ /* Breedte en hoogte van één vlaggetje. Begonnen op 38 bij 26 en dat las niet als een slinger maar als een gestreepte lijn — te klein om de driehoekjes te herkennen. Een echte slinger boven een straat heeft vlaggetjes die je van afstand ziet; op een scherm betekent dat ruim veertig pixels hoog. */ --nyf-vlag-b:58px; --nyf-vlag-h:44px; height:var(--nyf-vlag-h); padding:0; margin:0; /* Hier stond eerst een mask met een conisch verloop, en dat was fout gerekend. Het middelpunt lag op het midden van de bovenrand en de kwartslag wees naar bóven — dus buiten het vak. Er bleef niets over dan de draad, en dat is precies wat er op het scherm stond: een dun streepje in plaats van een slinger. Nu zonder mask. Drie lagen over elkaar, de eerste bovenop: 1. de draad waar de vlaggetjes aan hangen; 2. een conisch verloop dat alles búiten het vlaggetje terugzet naar de paginakleur — het middelpunt ligt nu onderaan in het midden en de punt wijst omhoog, zodat het vlaggetje met zijn brede kant aan de draad hangt; 3. de kleuren, die zich per vijf vlaggetjes herhalen zodat elk vlaggetje één kleur krijgt in plaats van een verloop over de hele schermbreedte. De hoek van 67 graden hoort bij de verhouding hierboven: de zijkant van een vlaggetje loopt van de bovenhoek naar het punt eronder. Verander je de breedte of de hoogte, dan hoort deze hoek mee te veranderen — arctangens van de halve breedte gedeeld door de hoogte, maal twee. */ background: linear-gradient(var(--nyf-primary-deep) 0 3px, transparent 3px), conic-gradient( from -33.5deg at 50% 100%, transparent 0 67deg, var(--nyf-bg) 67deg ), linear-gradient( to right, var(--nyf-primary) 0 20%, var(--nyf-accent) 20% 40%, var(--nyf-accent-2, var(--nyf-primary-deep)) 40% 60%, var(--nyf-accent-3, var(--nyf-accent-strong)) 60% 80%, var(--nyf-accent-strong) 80% 100% ); background-size: auto, var(--nyf-vlag-b) 100%, calc(var(--nyf-vlag-b) * 5) 100%; background-repeat:no-repeat, repeat-x, repeat-x; } /* ===================================================== Knoppen op een gekleurd vlak De knopkleur uit de Customizer is één kleur voor de hele site. Op een gekleurde band valt die weg: een rode knop op een rode band is onzichtbaar, en dat was hij ook — op de eerste voorpagina die met deze blokken gebouwd werd. De blokstijl "Op een gekleurd vlak" draait het om. De omlijnde stijl erft de tekstkleur van de band in plaats van de vaste knopkleur te gebruiken, want die is daar per definitie de verkeerde. Het gewicht van de selectoren is met opzet hoog genoeg om te winnen van wat WordPress uit theme.json genereert; dat komt als