/* Theme Name: OutdoorOnly Theme URI: https://outdooronly.com Author: OutdoorOnly Author URI: https://outdooronly.com Description: Een verfijnd, redactioneel WordPress-thema voor OutdoorOnly – eerlijke gear-reviews, slimme tips en routes. Officiële huisstijl: Deep Forest (#162C12), Adventure Orange (#E06720), Moss Green (#ADC957), Sky Blue (#BCD7EA) en Off-White (#E9E9E1). Gebouwd voor leessnelheid, vertrouwen en conversie naar de nieuwsbrief. Version: 1.31.27 Requires at least: 6.3 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: outdooronly Tags: blog, magazine, outdoors, custom-menu, featured-images, full-width-template, translation-ready, custom-logo */ /* ================================================================= 0. FONTS — zelf-gehost (variabel, latin-subset) Eén woff2 per familie dekt alle gebruikte gewichten (400–700, incl. 550/650). Bricolage Grotesque = koppen (--oo-display), Inter = tekst (--oo-sans), Fraunces = citaten/logo/scores (--oo-serif). Geen Google Fonts-CSS of derde-partij-DNS; functions.php preload't koppen + tekst. ================================================================= */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/fraunces-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/bricolage-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ================================================================= 1. DESIGN TOKENS ================================================================= */ :root { /* ---- Official OutdoorOnly brand palette ---- Deep Forest #162C12 Tekst & logo (standaard tekstkleur) Adventure Orange #E06720 CTA (buttons, call-to-actions) Moss Green #ADC957 Accent (iconen, badges, actieve menu-items) Sky Blue #BCD7EA Contrast (dividers, secundaire achtergronden) Off-White #E9E9E1 Background (standaard achtergrondkleur) */ --oo-forest: #162C12; /* Deep Forest – text, logo, footer, hero overlay */ --oo-forest-700: #20401b; /* hover / depth */ --oo-forest-600: #2c5524; /* links */ --oo-pine: #ADC957; /* legacy alias → Moss accent */ --oo-moss: #ADC957; /* Moss Green accent */ --oo-moss-dark: #93b23e; /* moss hover / borders */ --oo-sky: #BCD7EA; /* Sky Blue – dividers, secondary backgrounds */ --oo-sky-soft: #d7e7f2; /* lighter sky tint */ --oo-cream: #E9E9E1; /* Off-White page background */ --oo-sand: #BCD7EA; /* alt section background → Sky Blue */ --oo-card: #ffffff; --oo-rust: #E06720; /* Adventure Orange – merk-accent (badges, iconen, randen) */ --oo-rust-dark: #c5571a; /* accent hover */ --oo-rust-soft: #f7e1d2; /* soft orange tint (icon backgrounds) */ /* WCAG-conforme CTA-vulling: witte tekst haalt hierop >=4.5:1 (AA). #E06720 zelf zakt naar 3.43:1 en is daarom alleen accent, geen knopvulling. */ --oo-cta: #b85214; /* knopvulling – wit = 4.94:1 */ --oo-cta-dark: #a34a12; /* knop hover – wit = 5.92:1 */ /* Oranje als TEKST: #E06720 haalt op cream maar 2.81:1 en op wit 3.43:1. Gebruik deze donkere variant voor alle oranje tekst (eyebrows, hovers, labels): 4.86:1 op cream, 5.92:1 op wit, 4.68:1 op sky-soft. */ --oo-rust-text: #a34a12; /* Moss als TEKST faalt overal (#93b23e = 1.9–2.2:1); deze haalt 5.17:1 op de lichtste moss-tint en 7:1 op wit. */ --oo-moss-text: #566f17; --oo-ink: #162C12; /* body text = Deep Forest */ --oo-ink-soft: #2e3f2a; --oo-muted: #4f5a49; /* secondary text – donkerder voor WCAG (5.95:1 op cream) */ --oo-line: #cdddc9; /* hairline borders (forest-tinted) */ --oo-line-strong: #6b7a66; /* veldranden op wit — haalt 3:1 (WCAG 1.4.11) */ --oo-line-dark: rgba(255,255,255,.16); /* Tekst op donkere (forest) vlakken — verving zes losse bijna-identieke hexen. */ --oo-on-forest: #e9efe6; /* Footer-tinten (op forest): basis, links en gedempte tekst. */ --oo-footer-text: #bcccbe; --oo-footer-link: #cdd9cf; --oo-footer-muted: #9fb1a1; /* Typography */ --oo-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; /* koppen */ --oo-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; /* citaten, logo, scores */ --oo-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Rhythm */ --oo-maxw: 1180px; --oo-maxw-narrow: 760px; --oo-radius: 14px; --oo-radius-sm: 9px; --oo-radius-xs: 10px; /* kleine UI-elementen — verving losse 7/8/10/12px */ --oo-radius-lg: 22px; --oo-gap: clamp(1rem, 2.5vw, 2rem); --oo-section-y: clamp(3.5rem, 7vw, 6rem); --oo-shadow-sm: 0 1px 2px rgba(22,44,18,.06), 0 4px 14px rgba(22,44,18,.07); --oo-shadow-md: 0 6px 18px rgba(22,44,18,.10), 0 18px 44px rgba(22,44,18,.11); --oo-shadow-lg: 0 24px 60px rgba(22,44,18,.20); --oo-ease: cubic-bezier(.2,.7,.2,1); } /* ================================================================= 2. RESET & BASE ================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--oo-sans); font-size: 1.0625rem; line-height: 1.7; color: var(--oo-ink); background: var(--oo-cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { max-width: 100%; display: block; height: auto; } a { color: var(--oo-forest-600); text-decoration: none; transition: color .18s var(--oo-ease); } a:hover { color: var(--oo-rust-text); } h1, h2, h3, h4, h5, h6 { font-family: var(--oo-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--oo-forest); } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1.1em; } ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; } li { margin-bottom: .35em; } strong { font-weight: 650; color: var(--oo-ink); } blockquote { margin: 1.8em 0; padding: 1.3em 1.5em 1.1em; border-top: 3px solid var(--oo-rust); background: var(--oo-sand); border-radius: var(--oo-radius-sm); font-family: var(--oo-serif); font-size: 1.2rem; font-style: italic; color: var(--oo-forest-700); } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } pre { background: var(--oo-forest); color: var(--oo-on-forest); padding: 1.1em 1.3em; border-radius: var(--oo-radius-sm); overflow:auto; } hr { border: 0; border-top: 1px solid var(--oo-line); margin: 2.5rem 0; } ::selection { background: var(--oo-cta); color: #fff; } /* ================================================================= 3. LAYOUT HELPERS ================================================================= */ .oo-wrap { width: 100%; max-width: var(--oo-maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); } .oo-wrap--narrow { max-width: var(--oo-maxw-narrow); } .oo-section { padding-block: var(--oo-section-y); } .oo-section--sand { background: var(--oo-sand); } .oo-section--forest { background: var(--oo-forest); color: var(--oo-on-forest); } .oo-section--forest h1, .oo-section--forest h2, .oo-section--forest h3 { color: #fff; } /* Sectie-padding-utilities (vervangen losse inline-styles in de templates). */ .oo-section--flush-top { padding-top: 0; } .oo-section--flush-bottom { padding-bottom: 0; } /* 404 – gecentreerde "verkeerd afgeslagen"-pagina (token-gedreven i.p.v. inline). */ .oo-404 { text-align: center; } .oo-404 .oo-eyebrow { justify-content: center; } .oo-404__title { margin: .5rem 0 1rem; } .oo-404 .oo-lead { margin-inline: auto; } .oo-404__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 2.5rem; } .oo-eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--oo-sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oo-rust-text); } .oo-eyebrow::before { content:""; width: 22px; height: 2px; background: var(--oo-rust); display:inline-block; } .oo-section--forest .oo-eyebrow { color: var(--oo-moss); } .oo-section--forest .oo-eyebrow::before { background: var(--oo-moss); } .oo-section--forest .oo-lead { color: rgba(255,255,255,.85); } .oo-section--forest .oo-why-cta .oo-link-arrow { color: var(--oo-moss); } .oo-lead { font-size: 1.18rem; color: var(--oo-ink-soft); max-width: 60ch; } .oo-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom: 2.2rem; } .oo-section-head__text { max-width: 58ch; } .oo-section-head h2 { margin-top:.35rem; } /* ================================================================= 4. BUTTONS ================================================================= */ .oo-btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--oo-sans); font-weight: 650; font-size: .98rem; line-height: 1; padding: .95em 1.5em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: all .2s var(--oo-ease); white-space: nowrap; } .oo-btn--primary { background: var(--oo-cta); color: #fff; box-shadow: 0 6px 18px rgba(184,82,20,.30); } .oo-btn--primary:hover { background: var(--oo-cta-dark); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,82,20,.38); } .oo-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .oo-btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; border-color:#fff; } .oo-btn--dark { background: var(--oo-forest); color:#fff; } .oo-btn--dark:hover { background: var(--oo-forest-700); color:#fff; transform: translateY(-2px); } .oo-btn--outline { background:transparent; color: var(--oo-forest); border-color: var(--oo-forest); } .oo-btn--outline:hover { background: var(--oo-forest); color:#fff; } .oo-btn__play { width: 2.4em; height: 2.4em; margin-left:-.6em; border-radius:999px; background: rgba(255,255,255,.16); display:grid; place-items:center; } .oo-btn--sm { padding:.7em 1.15em; font-size:.88rem; } .oo-link-arrow { display:inline-flex; align-items:center; gap:.4em; font-weight:650; color: var(--oo-forest-600); } .oo-link-arrow--soon { color: var(--oo-muted); cursor: default; } /* "Binnenkort" — geen link */ .oo-link-arrow svg { transition: transform .2s var(--oo-ease); } .oo-link-arrow:hover svg { transform: translateX(4px); } /* ================================================================= 5. HEADER / NAV ================================================================= */ .oo-topbar { background: var(--oo-forest); color:var(--oo-footer-link); font-size: .8rem; text-align:center; padding:.5rem 1rem; letter-spacing:.02em; } .oo-topbar strong { color:#fff; font-weight:600; } .oo-header { position: sticky; top: 0; z-index: 100; background: rgba(233,233,225,.86); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--oo-line); transition: transform .3s var(--oo-ease), box-shadow .3s var(--oo-ease); will-change: transform; } /* Smart sticky: verbergt bij scrollen omlaag, verschijnt bij scrollen omhoog. */ .oo-header.is-hidden { transform: translateY(-100%); } /* …maar nooit terwijl er met het toetsenbord in genavigeerd wordt (anders tab je naar onzichtbare links). */ .oo-header.is-hidden:focus-within { transform: none; } .oo-header.is-pinned { box-shadow: 0 6px 22px rgba(22,44,18,.10); } /* Vaste hoogte voorkomt layout-shift (CLS) tijdens het laden van het logo. */ .oo-header__inner { display:flex; align-items:center; gap:1.5rem; height: 72px; } .oo-logo { display:flex; align-items:center; gap:.6rem; font-family:var(--oo-serif); font-weight:600; font-size:1.3rem; color:var(--oo-forest); letter-spacing:-.02em; } .oo-logo:hover { color: var(--oo-forest); } .oo-logo__mark { width:30px; height:30px; border-radius:var(--oo-radius-xs); background:var(--oo-forest); display:grid; place-items:center; color:#fff; flex:none; } .oo-logo img { max-height: 46px; width:auto; } .oo-nav { margin-left:auto; } .oo-nav ul { list-style:none; display:flex; align-items:center; gap:.25rem; margin:0; padding:0; } .oo-nav a { position: relative; display:block; padding:.55rem .85rem; border-radius:999px; font-size:.95rem; font-weight:550; color:var(--oo-ink-soft); } .oo-nav a:hover { color:var(--oo-forest); background: rgba(22,44,18,.06); } /* Actieve pagina: subtiele moss-onderstreping + dikker (huidige locatie). */ .oo-nav .current-menu-item > a, .oo-nav .current_page_item > a, .oo-nav .current-menu-ancestor > a, .oo-nav .current-menu-parent > a { color: var(--oo-forest); font-weight: 700; } .oo-nav .current-menu-item > a::after, .oo-nav .current_page_item > a::after, .oo-nav .current-menu-ancestor > a::after, .oo-nav .current-menu-parent > a::after { content:""; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:2.5px; background:var(--oo-moss); border-radius:2px; } .oo-nav .menu-item-has-children > a::after { content:"⌄"; margin-left:.35em; opacity:.6; font-size:.85em; } /* dropdown */ .oo-nav .sub-menu { position:absolute; min-width: 220px; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius-sm); box-shadow: var(--oo-shadow-md); padding:.4rem; margin-top:.4rem; display:none; flex-direction:column; gap:2px; z-index:120; } .oo-nav li { position:relative; } .oo-nav li:hover > .sub-menu { display:flex; } /* Dropdowns ook zonder muis bereikbaar (WCAG 2.1.1): open zolang een menu-item binnen het submenu of de parent toetsenbordfocus heeft. */ .oo-nav li:focus-within > .sub-menu { display:flex; } .oo-nav .sub-menu a { padding:.5rem .7rem; border-radius:var(--oo-radius-xs); font-weight:500; } .oo-header__cta { display:flex; align-items:center; gap:.6rem; } /* Zoeken in de header */ .oo-search-toggle { width:44px; height:44px; border:1px solid var(--oo-line); border-radius:var(--oo-radius-xs); background:var(--oo-card); color:var(--oo-forest); display:grid; place-items:center; cursor:pointer; transition:.18s var(--oo-ease); flex:none; } .oo-search-toggle:hover { background:rgba(22,44,18,.06); color:var(--oo-forest); } .oo-search-panel { border-top:1px solid var(--oo-line); background:var(--oo-cream); animation:oo-search-in .22s var(--oo-ease); } .oo-search-panel[hidden] { display:none; } .oo-search-panel .oo-wrap { padding-block:1rem; } @keyframes oo-search-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } .oo-burger { display:none; width:44px; height:44px; border:1px solid var(--oo-line); border-radius:var(--oo-radius-xs); background:var(--oo-card); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; } .oo-burger span { width:18px; height:2px; background:var(--oo-forest); border-radius:2px; transition:.2s var(--oo-ease); } .oo-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .oo-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .oo-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Dimmende overlay achter het mobiele menu (buiten-klik sluit). */ .oo-nav-scrim { position:fixed; inset:0; z-index:90; background:rgba(22,44,18,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:oo-scrim-in .2s var(--oo-ease); } .oo-nav-scrim[hidden] { display:none; } @keyframes oo-scrim-in { from { opacity:0; } to { opacity:1; } } /* Voorkom scrollen van de pagina-achtergrond zolang het menu open is. */ body.oo-nav-open { overflow:hidden; } /* Op desktop bestaat het menu niet als paneel → nooit een overlay tonen. */ @media (min-width:761px) { .oo-nav-scrim { display:none !important; } body.oo-nav-open { overflow:visible; } } /* ================================================================= 6. HERO ================================================================= */ .oo-hero { position:relative; color:#fff; isolation:isolate; overflow:hidden; } .oo-hero__media { position:absolute; inset:0; z-index:-2; } .oo-hero__media img { width:100%; height:100%; object-fit:cover; } /* Subtiele Ken Burns: het beeld "ademt" heel langzaam. Transform-only (GPU); prefers-reduced-motion zet dit — net als alle fx hieronder — automatisch uit via de globale animation:none-regel. */ .oo-hero__media img { animation: oo-hero-zoom 36s ease-in-out infinite alternate; } @keyframes oo-hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } } /* ================================================================= 6b. HERO-FX — geanimeerde weer-/seizoenslaag (dynamische hero) Eén lege laag boven het beeld, onder de tekst-overlay. De body- klassen oo-weather--* (JS, Open-Meteo) en oo-season--* (server-side) bepalen wat er beweegt. Naadloze loops: de verschuiving per loop is altijd een veelvoud van de background-tile. ================================================================= */ .oo-hero__fx { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } /* — Losse, willekeurig vallende deeltjes (regen/sneeuw/blaadjes). main.js strooit ze met elk een eigen startpositie, snelheid, vertraging en zijwaartse zwiep (--dur/--delay/--drift/--size), dus geen herhalend raster meer. --fall = valafstand (≈ hero-hoogte), door JS gezet. Alles transform-only (GPU); prefers-reduced-motion zet de hele laag uit. — */ .oo-fx__p { position:absolute; top:-32px; left:0; will-change:transform; } .oo-fx--rain .oo-fx__p { width:2px; height:calc(16px * var(--size,1)); background:linear-gradient(transparent, rgba(255,255,255,.55)); border-radius:1px; animation: oo-fall-rain var(--dur) linear var(--delay) infinite; } @keyframes oo-fall-rain { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--drift), var(--fall,700px), 0); } } .oo-fx--snow .oo-fx__p { width:calc(8px * var(--size,1)); height:calc(8px * var(--size,1)); background:#fff; border-radius:50%; opacity:.9; animation: oo-fall-snow var(--dur) linear var(--delay) infinite; } @keyframes oo-fall-snow { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(var(--drift), calc(var(--fall,700px) * .5), 0); } 100% { transform: translate3d(0, var(--fall,700px), 0); } } .oo-fx--leaves .oo-fx__p { width:calc(13px * var(--size,1)); height:calc(9px * var(--size,1)); border-radius:60% 12% 60% 12%; opacity:.85; animation: oo-fall-leaf var(--dur) linear var(--delay) infinite; } @keyframes oo-fall-leaf { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(var(--drift), calc(var(--fall,700px) * .5), 0) rotate(180deg); } 100% { transform: translate3d(calc(var(--drift) * -.6), var(--fall,700px), 0) rotate(360deg); } } /* — Mist: twee zachte banden die langzaam heen en weer drijven (geen deeltjes; main.js laat de deeltjeslaag voor mist leeg). — */ body.oo-weather--mist .oo-hero__fx::before, body.oo-weather--mist .oo-hero__fx::after { content:""; position:absolute; left:-12%; width:124%; } body.oo-weather--mist .oo-hero__fx::before { opacity:.55; top:30%; bottom:30%; background: linear-gradient(90deg, transparent, rgba(233,233,225,.55) 35%, rgba(233,233,225,.4) 65%, transparent); animation: oo-fx-mist 26s ease-in-out infinite alternate; } body.oo-weather--mist .oo-hero__fx::after { opacity:.4; top:55%; bottom:8%; background: linear-gradient(90deg, transparent, rgba(233,233,225,.5) 40%, transparent 75%); animation: oo-fx-mist 34s ease-in-out infinite alternate-reverse; } @keyframes oo-fx-mist { from { transform: translate3d(-7%,0,0); } to { transform: translate3d(7%,0,0); } } /* — Dag/nacht: 's nachts (is_day=0, JS) wisselt main.js naar het zonloze nachtbeeld; deze laag legt er een maan + sterrenhemel overheen plus een lichte verdieping. Alles in % t.o.v. de zichtbare hero (niet weggesneden door object-fit:cover). Ligt onder de fx-laag, dus regen/sneeuw zichtbaar. — */ body.oo-time--night .oo-hero__media::after { content:""; position:absolute; inset:0; background-repeat:no-repeat; background: /* maan + zachte halo, rechtsboven */ radial-gradient(circle 30px at 84% 22%, rgba(253,247,230,.98) 0 68%, rgba(253,247,230,.45) 82%, rgba(253,247,230,0) 100%), radial-gradient(circle 72px at 84% 22%, rgba(226,234,255,.16), rgba(226,234,255,0) 72%), /* sterren (in de bovenste lucht-band) */ radial-gradient(2px 2px at 9% 13%, #fff, transparent), radial-gradient(1.5px 1.5px at 16% 26%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 23% 12%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 31% 31%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 38% 17%, rgba(255,255,255,.7), transparent), radial-gradient(2px 2px at 46% 27%, #fff, transparent), radial-gradient(1px 1px at 53% 13%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 60% 24%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 67% 11%, rgba(255,255,255,.65), transparent), radial-gradient(1.5px 1.5px at 73% 33%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 91% 15%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 95% 31%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 6% 31%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 43% 38%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 12% 40%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 78% 19%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.55), transparent), /* lichte verdieping (het basisbeeld is al een nachtbeeld) */ linear-gradient(180deg, rgba(8,13,30,.18) 0%, rgba(7,11,26,.26) 55%, rgba(5,9,22,.4) 100%); } /* TOEGANKELIJKHEID — respecteer prefers-reduced-motion expliciet voor de hero: geen Ken Burns-zoom en de hele weer-/seizoens-fx-laag verborgen, zodat er ook geen bevroren druppels/vlokken blijven staan. Het weer blijft afleesbaar uit het (statische) seizoens-/weerbeeld zelf. Vult de globale reduced-motion- regel aan voor wie slecht tegen beweging kan (o.a. bij epilepsie/vestibulair). */ @media (prefers-reduced-motion: reduce) { .oo-hero__fx { display: none; } .oo-hero__media img { animation: none; transform: none; } } /* — "Live"-pill: subtiel hoekje dat aangeeft dat de hero het echte seizoen/weer toont (main.js vult conditie + temperatuur aan). — */ .oo-hero__live { position: absolute; z-index: 3; right: clamp(1rem, 4vw, 2.2rem); bottom: clamp(.9rem, 2.5vw, 1.4rem); display: inline-flex; align-items: center; gap: .5em; padding: .34em .8em .34em .65em; border-radius: 999px; background: rgba(22,44,18,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.2); font-family: var(--oo-sans); font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); } .oo-hero__live-text { text-transform: uppercase; } .oo-hero__live-extra { opacity: .9; font-weight: 500; white-space: nowrap; } .oo-hero__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oo-moss); flex: none; box-shadow: 0 0 0 0 rgba(173,201,87,.6); animation: oo-live-pulse 2.4s ease-out infinite; } @keyframes oo-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(173,201,87,.6); } 70% { box-shadow: 0 0 0 8px rgba(173,201,87,0); } 100% { box-shadow: 0 0 0 0 rgba(173,201,87,0); } } @media (prefers-reduced-motion: reduce) { .oo-hero__live-dot { animation: none; } } .oo-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(105deg, rgba(22,44,18,.92) 0%, rgba(22,44,18,.72) 42%, rgba(22,44,18,.18) 78%), linear-gradient(0deg, rgba(22,44,18,.55), rgba(22,44,18,0) 45%); } .oo-hero__inner { padding-block: clamp(4rem, 10vw, 8rem); max-width: 660px; } .oo-hero__inner .oo-eyebrow { color: var(--oo-moss); } .oo-hero__inner .oo-eyebrow::before { background: var(--oo-moss); } .oo-hero h1 { color:#fff; margin:.6rem 0 1.1rem; font-size: clamp(2.4rem, 5.4vw, 4rem); text-wrap:balance; } .oo-hero p { font-size:1.18rem; color:rgba(255,255,255,.9); max-width:48ch; margin-bottom:1.8rem; } .oo-hero__actions { display:flex; flex-wrap:wrap; gap:.9rem; } /* ================================================================= 7. TRUST BAR ================================================================= */ .oo-trust { background: var(--oo-forest-700); color:var(--oo-on-forest); border-top:1px solid var(--oo-line-dark); } .oo-trust__inner { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; padding-block:1.05rem; } .oo-trust__item { display:flex; align-items:center; justify-content:center; gap:.55em; font-size:.9rem; font-weight:500; text-align:center; padding:.35rem 1.2rem; line-height:1.3; } .oo-trust__item + .oo-trust__item { border-left:1px solid var(--oo-line-dark); } .oo-trust__item svg { color: var(--oo-moss); flex:none; } @media (max-width:980px) { .oo-trust__inner { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); } .oo-trust__item:nth-child(odd) { border-left:0; } .oo-trust__item:nth-child(n+3) { border-top:1px solid var(--oo-line-dark); padding-top:.7rem; } } @media (max-width:520px) { .oo-trust__inner { grid-template-columns:1fr; } .oo-trust__item { justify-content:flex-start; border-left:0 !important; } .oo-trust__item:nth-child(n+2) { border-top:1px solid var(--oo-line-dark); padding-top:.7rem; } } /* ================================================================= 8. ARTICLE CARDS ================================================================= */ .oo-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } .oo-card-grid--2 { grid-template-columns:repeat(2,1fr); } .oo-card { background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--oo-shadow-sm); transition: transform .25s var(--oo-ease), box-shadow .25s var(--oo-ease), border-color .25s var(--oo-ease); } .oo-card:hover { transform:translateY(-5px); box-shadow:var(--oo-shadow-md); border-color:var(--oo-moss); } .oo-card__media { position:relative; aspect-ratio: 16/11; overflow:hidden; background:var(--oo-sand); } .oo-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--oo-ease); } .oo-card:hover .oo-card__media img { transform:scale(1.05); } .oo-badge { position:absolute; top:.8rem; left:.8rem; background: var(--oo-moss); color: var(--oo-forest); /* Moss = badge-accent */ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.4em .8em; border-radius:999px; } .oo-badge--rust { background: var(--oo-cta); color:#fff; } /* CTA-tint voor leesbaar wit (WCAG) */ /* Reviewscore-badge op kaarten (homepage/archief). */ .oo-card__score { position:absolute; top:.8rem; right:.8rem; display:inline-flex; align-items:center; gap:.3em; background:var(--oo-forest); color:#fff; font-family:var(--oo-sans); font-weight:700; font-size:.85rem; padding:.35em .7em; border-radius:999px; box-shadow:var(--oo-shadow-sm); } .oo-card__score svg { color:var(--oo-moss); width:13px; height:13px; } .oo-card__body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; } .oo-card__meta { font-size:.78rem; color:var(--oo-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; } .oo-card__title { font-size:1.3rem; line-height:1.18; margin-bottom:.55rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.36em; } .oo-card__title a { color:var(--oo-forest); } .oo-card__title a:hover { color:var(--oo-rust-text); } .oo-card__excerpt { color:var(--oo-muted); font-size:.96rem; margin-bottom:1.1rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .oo-card__foot { margin-top:auto; display:flex; align-items:center; gap:.6rem; padding-top:1rem; border-top:1px solid var(--oo-line); } .oo-avatar { width:30px; height:30px; border-radius:999px; object-fit:cover; background:var(--oo-sand); flex:none; } .oo-card__author { font-size:.85rem; color:var(--oo-ink-soft); font-weight:550; } .oo-card__author span { display:block; color:var(--oo-muted); font-weight:400; font-size:.78rem; } .oo-card__authorlink { display:inline-block; line-height:0; flex:none; } .oo-card__author > a { color:inherit; } .oo-card__author > a:hover { color:var(--oo-rust-text); } /* feature card (large) */ .oo-feature { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius-lg); overflow:hidden; box-shadow:var(--oo-shadow-sm); } .oo-feature__media { min-height:340px; } .oo-feature__media img { width:100%; height:100%; object-fit:cover; } .oo-feature__body { padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; } .oo-feature__body h3 { font-size:clamp(1.5rem,2.6vw,2.1rem); margin:.5rem 0 .8rem; } /* ================================================================= 9. "GEMAAKT OM GECITEERD TE WORDEN" + IN HET KORT ================================================================= */ .oo-cite { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; } .oo-cite__list { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.9rem; } .oo-cite__list li { display:flex; gap:.8rem; align-items:flex-start; font-size:1.02rem; } .oo-cite__check { width:24px; height:24px; border-radius:999px; background:var(--oo-moss); color:var(--oo-forest); display:grid; place-items:center; flex:none; margin-top:.15rem; } .oo-shortbox { background:var(--oo-forest); color:var(--oo-on-forest); font-family:var(--oo-sans); /* expliciet: identiek aan de artikeltekst, ook als de box buiten .oo-article staat */ border-radius:var(--oo-radius-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--oo-shadow-lg); } /* Ook als

gerenderd (single: semantisch anker voor AI-extractie) — daarom font-family expliciet. */ .oo-shortbox__tag { display:inline-flex; align-items:center; gap:.5em; font-family:var(--oo-sans); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--oo-moss); background:rgba(173,201,87,.16); padding:.4em .8em; border-radius:999px; margin:0 0 1.1rem; } .oo-shortbox p { color:var(--oo-on-forest); font-size:1.05rem; } .oo-shortbox strong { color:#fff; } .oo-shortbox .oo-pill { display:inline-block; background:rgba(255,255,255,.12); color:#fff; padding:.1em .55em; border-radius:6px; font-weight:600; font-size:.95em; } /* ================================================================= 10. NEWSLETTER ================================================================= */ .oo-newsletter { position:relative; background: radial-gradient(120% 140% at 100% 0%, rgba(44,85,36,.55), transparent 55%), var(--oo-forest); color:#fff; border-radius: var(--oo-radius-lg); border:1px solid rgba(173,201,87,.28); box-shadow: var(--oo-shadow-lg); padding: clamp(2rem, 5vw, 3.5rem); display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem 2.6rem; align-items:center; overflow:hidden; } /* Moss accent-streep bovenaan het nieuwsbriefblok. */ .oo-newsletter::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--oo-moss), var(--oo-cta)); } .oo-newsletter .oo-eyebrow { color:var(--oo-moss); } .oo-newsletter .oo-eyebrow::before { background:var(--oo-moss); } .oo-newsletter h2 { color:#fff; } .oo-newsletter p { color:rgba(255,255,255,.85); margin-bottom:0; } /* MailerLite-embedcontainers (universal.js vult deze in) */ .oo-newsletter__form { min-width:0; } .oo-nl-embed { margin:1.6rem 0 .4rem; max-width:520px; min-height:60px; } /* MailerLite universal-embed in de huisstijl. De embed laadt zijn eigen CSS ná de onze, dus hier bewust !important. Het formulier staat in een LICHT paneel: zo is alle tekst (incl. door MailerLite zelf ingestelde kleuren) altijd leesbaar, ongeacht de sectie-achtergrond. */ .oo-newsletter__form .ml-embedded, .oo-nl-embed .ml-embedded { display: block; background: var(--oo-card); border-radius: var(--oo-radius); padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--oo-shadow-sm); } .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: 520px; } .ml-embedded .ml-form-embedWrapper .ml-form-embedBody, .ml-embedded .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; } .ml-embedded .ml-form-embedBody .ml-form-embedContent, .ml-embedded .ml-form-embedBody .ml-form-embedContent p { margin: 0 0 .8rem !important; } .ml-embedded h4, .ml-embedded p, .ml-embedded label, .ml-embedded .ml-form-embedContent, .ml-embedded .ml-form-successBody .ml-form-successContent h4, .ml-embedded .ml-form-successBody .ml-form-successContent p { font-family: var(--oo-sans) !important; color: var(--oo-ink) !important; } .ml-embedded input[type=email], .ml-embedded input[type=text] { font-family: var(--oo-sans) !important; font-size: 1rem !important; padding: .9em 1.2em !important; height: auto !important; border-radius: 999px !important; border: 1.5px solid var(--oo-line-strong) !important; background: #fff !important; color: var(--oo-ink) !important; } .ml-embedded input[type=email]:focus, .ml-embedded input[type=text]:focus { outline: none !important; border-color: var(--oo-forest) !important; box-shadow: 0 0 0 4px rgba(173,201,87,.35) !important; } .ml-embedded button, .ml-embedded button.primary, .ml-embedded .ml-form-horizontalRow button { font-family: var(--oo-sans) !important; font-weight: 650 !important; font-size: .98rem !important; background: var(--oo-cta) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: .9em 1.5em !important; height: auto !important; cursor: pointer; transition: background .2s var(--oo-ease), transform .2s var(--oo-ease); } .ml-embedded button:hover { background: var(--oo-cta-dark) !important; transform: translateY(-2px); } .oo-form { display:flex; gap:.6rem; flex-wrap:wrap; } .oo-form input[type=email] { flex:1; min-width:200px; padding:.95em 1.2em; border-radius:999px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.95); color:var(--oo-ink); font-size:1rem; font-family:var(--oo-sans); } .oo-form input[type=email]:focus { outline:none; border-color:var(--oo-rust); box-shadow:0 0 0 4px rgba(224,103,32,.28); } .oo-form__note { font-size:.82rem; color:rgba(255,255,255,.8); margin-top:.8rem; width:100%; } /* ================================================================= 11. PAGE HEADER (interior pages) ================================================================= */ .oo-pagehead { background: radial-gradient(120% 160% at 88% -20%, rgba(44,85,36,.6), transparent 55%), var(--oo-forest); color:#fff; padding-block: clamp(3rem,6vw,4.5rem); position:relative; isolation:isolate; border-bottom: 3px solid var(--oo-moss); } .oo-pagehead .oo-eyebrow { color: var(--oo-moss); } .oo-pagehead .oo-eyebrow::before { background: var(--oo-moss); } .oo-pagehead--image { isolation:isolate; } .oo-pagehead--image::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(22,44,18,.7), rgba(22,44,18,.9)); } /* overflow:hidden + absolute img = de featured image kan nooit uit de header lopen. (height:100% lost niet betrouwbaar op tegen een inset-gesizede absolute container → de img viel terug op auto-hoogte en liep over de content/galerij heen.) */ .oo-pagehead__media { position:absolute; inset:0; z-index:-2; overflow:hidden; } .oo-pagehead__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .oo-pagehead h1 { color:#fff; margin:.5rem 0; max-width:18ch; } .oo-rotateword { display:inline-block; will-change:opacity; } .oo-hero__rest { display:block; } .oo-pagehead p { color:rgba(255,255,255,.85); max-width:60ch; margin:0; } .oo-breadcrumb { font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:.6rem; } .oo-breadcrumb a { color:rgba(255,255,255,.85); } .oo-breadcrumb a:hover { color:#fff; } /* Auteursarchief: foto van de auteur in de pagehead (E-E-A-T). */ .oo-pagehead__avatar { width:96px; height:96px; border-radius:999px; object-fit:cover; border:3px solid rgba(255,255,255,.3); box-shadow:var(--oo-shadow-sm); margin:0 0 1rem; } /* ================================================================= 12. SINGLE ARTICLE ================================================================= */ .oo-article-layout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem,5vw,3.5rem); align-items:start; } /* Anker-doelen (TOC, deeplinks, reacties) landen vrij van de sticky header (72px). */ [id] { scroll-margin-top: 96px; } .oo-article { font-size:1.12rem; } .oo-article > * { max-width: 70ch; } .oo-article h2 { margin:2rem 0 .8rem; } .oo-article h3 { margin:1.6rem 0 .6rem; } .oo-article img, .oo-article figure { max-width:100%; border-radius:var(--oo-radius); margin:1.8rem 0; } .oo-article figcaption { font-size:.85rem; color:var(--oo-muted); margin-top:.5rem; text-align:center; } .oo-article ul li::marker { color: var(--oo-rust-text); } /* Tekstlinks in artikelcontent duidelijk herkenbaar — onderstreping, niet alleen kleur (WCAG 1.4.1 + gewoon prettiger scannen). */ .oo-article p a, .oo-article td a, .oo-article ul li a, .oo-article ol li a, .oo-article blockquote a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--oo-moss-dark); transition: text-decoration-color .18s var(--oo-ease), color .18s var(--oo-ease); } .oo-article p a:hover, .oo-article td a:hover, .oo-article ul li a:hover, .oo-article ol li a:hover { text-decoration-color: currentColor; } /* …maar niet in componenten die in de content genest staan (TOC, affiliate- kaarten, FAQ, knoppen): daar is de link-vorm al duidelijk. */ .oo-article :is(.oo-toc, .cegg5-container, .cegg-list, .egg-module, .rank-math-list) a, .oo-article a:is(.oo-btn, .oo-link-arrow) { text-decoration: none; } .oo-article-meta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--oo-muted); font-size:.9rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--oo-line); } .oo-article-meta .oo-avatar { width:42px; height:42px; } .oo-article-meta strong { color:var(--oo-ink); display:block; } .oo-sidebar { position:sticky; top:96px; display:grid; gap:1.5rem; } .oo-widget { background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.4rem; box-shadow:var(--oo-shadow-sm); } .oo-widget__title { font-family:var(--oo-sans); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--oo-muted); margin-bottom:1rem; } .oo-widget ul { list-style:none; padding:0; margin:0; } .oo-widget li { margin-bottom:.7rem; padding-bottom:.7rem; border-bottom:1px solid var(--oo-line); } .oo-widget li:last-child { border:0; margin:0; padding:0; } /* "Meer lezen" — gerelateerde artikelen met thumbnail */ /* Vaste vierkante thumbs + verticaal gecentreerd: thumbnails rekten mee met lang wrappende titels en gaven een rommelig, ongelijk beeld. */ .oo-related { list-style:none; padding:0; margin:0; display:grid; } .oo-related li { margin:0; padding:0; border:0; } .oo-related li + li .oo-related__link { border-top:1px solid var(--oo-line); } .oo-related__link { display:grid; grid-template-columns:72px minmax(0,1fr); gap:.9rem; align-items:center; padding:.65rem 0; } .oo-related li:first-child .oo-related__link { padding-top:0; } .oo-related li:last-child .oo-related__link { padding-bottom:0; } .oo-related__thumb { width:72px; height:72px; flex:none; border-radius:var(--oo-radius-sm); overflow:hidden; background:var(--oo-sky-soft); } .oo-related__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--oo-ease); } .oo-related__link:hover .oo-related__thumb img { transform:scale(1.06); } .oo-related__body { min-width:0; display:grid; gap:.3rem; } .oo-related__cat { font-family:var(--oo-sans); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--oo-rust-text); } .oo-related__title { font-family:var(--oo-display); font-size:.98rem; line-height:1.3; color:var(--oo-forest); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .oo-related__link:hover .oo-related__title { color:var(--oo-rust-text); } .oo-related__empty { color:var(--oo-muted); font-size:.95rem; } /* Nieuwsbrief-kaart in de sidebar */ .oo-widget--nl { background:linear-gradient(165deg, var(--oo-forest), var(--oo-forest-700)); border-color:transparent; } .oo-widget__icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(173,201,87,.16); color:var(--oo-moss); margin-bottom:.9rem; } .oo-widget--nl .oo-widget__title { color:var(--oo-moss); margin-bottom:.5rem; } .oo-widget--nl p { color:var(--oo-cream); opacity:.85; font-size:.96rem; line-height:1.5; margin:0 0 1.15rem; } .oo-widget--nl .oo-btn { display:flex; justify-content:center; gap:.45em; } /* verdict / rating box for reviews */ .oo-verdict { background: linear-gradient(120deg, var(--oo-sky-soft), #fff); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.4rem 1.6rem; margin:0 0 1.6rem; box-shadow:var(--oo-shadow-sm); } .oo-verdict__top { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; } .oo-verdict__score { font-family:var(--oo-serif); font-weight:600; font-size:2.8rem; color:var(--oo-forest); line-height:1; } .oo-verdict__score span { font-size:1rem; color:var(--oo-muted); } .oo-verdict__label { font-family:var(--oo-serif); font-size:1.2rem; color:var(--oo-forest); } .oo-stars { color:var(--oo-rust-text); display:inline-flex; gap:2px; margin-bottom:.2rem; } .oo-stars .is-empty { color:var(--oo-line); } /* pros / cons */ .oo-proscons { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin:0 0 1.8rem; } .oo-proscons > div { border-radius:var(--oo-radius); padding:1.2rem 1.3rem; border:1px solid var(--oo-line); } .oo-pros { background:rgba(173,201,87,.16); border-color:rgba(147,178,62,.4)!important; } .oo-cons { background:rgba(224,103,32,.08); border-color:rgba(224,103,32,.28)!important; } .oo-proscons h4 { display:flex; align-items:center; gap:.45em; margin-bottom:.7rem; font-family:var(--oo-sans); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; } .oo-pros h4 { color:var(--oo-moss-text); } .oo-cons h4 { color:var(--oo-rust-text); } .oo-proscons ul { list-style:none; padding:0; margin:0; font-size:.97rem; } .oo-proscons li { margin-bottom:.5rem; padding-left:1.5em; position:relative; line-height:1.5; } .oo-proscons li:last-child { margin-bottom:0; } .oo-pros li::before { content:"+"; position:absolute; left:0; top:-1px; color:var(--oo-moss-dark); font-weight:700; font-size:1.05em; } /* 800 wordt niet geladen (faux bold) */ .oo-cons li::before { content:"–"; position:absolute; left:0; top:-1px; color:var(--oo-rust-text); font-weight:700; font-size:1.05em; } /* ================================================================= 13. ARCHIVE / LISTING ================================================================= */ .oo-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; } .oo-chip { display:inline-flex; align-items:center; gap:.4em; padding:.7em 1.2em; border-radius:999px; border:1.5px solid var(--oo-line); background:var(--oo-card); font-size:.9rem; font-weight:550; color:var(--oo-ink-soft); cursor:pointer; transition:.18s var(--oo-ease); } /* padding → ±38px tap-target */ .oo-chip:hover { border-color:var(--oo-forest); color:var(--oo-forest); } .oo-chip.is-active { background:var(--oo-forest); color:#fff; border-color:var(--oo-forest); } .oo-pagination { display:flex; justify-content:center; gap:.4rem; margin-top:3rem; } .oo-pagination .page-numbers { display:grid; place-items:center; min-width:42px; height:42px; padding:0 .5rem; border-radius:var(--oo-radius-xs); border:1px solid var(--oo-line); background:var(--oo-card); font-weight:600; color:var(--oo-ink-soft); } .oo-pagination .page-numbers.current { background:var(--oo-forest); color:#fff; border-color:var(--oo-forest); } .oo-pagination a.page-numbers:hover { border-color:var(--oo-forest); color:var(--oo-forest); } /* ================================================================= 14. TOOLS GRID (Gratis tools) ================================================================= */ .oo-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .oo-tool { background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.6rem; box-shadow:var(--oo-shadow-sm); transition:.22s var(--oo-ease); display:flex; flex-direction:column; } .oo-tool:hover { transform:translateY(-4px); box-shadow:var(--oo-shadow-md); } .oo-tool__icon { width:52px; height:52px; border-radius:14px; background:var(--oo-rust-soft); color:var(--oo-rust-text); display:grid; place-items:center; margin-bottom:1rem; } .oo-tool h3 { font-size:1.2rem; margin-bottom:.4rem; } .oo-tool p { color:var(--oo-muted); font-size:.95rem; margin-bottom:1.1rem; } .oo-tool .oo-link-arrow { margin-top:auto; } /* ================================================================= 15. DESTINATIONS / FEATURE TILES ================================================================= */ .oo-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .oo-tile { position:relative; border-radius:var(--oo-radius); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; } .oo-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s var(--oo-ease); } .oo-tile:hover img { transform:scale(1.06); } .oo-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(22,44,18,.9), rgba(22,44,18,.05) 70%); } .oo-tile__body { padding:1.4rem; } .oo-tile__body h3 { color:#fff; font-size:1.4rem; } .oo-tile__body p { color:rgba(255,255,255,.85); font-size:.9rem; margin:.3rem 0 0; } .oo-tile--lg { grid-column: span 2; min-height:340px; } /* ================================================================= 16. STATS / CONTENT BLOCKS ================================================================= */ .oo-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; text-align:center; } .oo-stat__num { font-family:var(--oo-serif); font-size:clamp(2rem,4vw,2.8rem); color:var(--oo-rust-text); line-height:1; } .oo-stat__label { font-size:.9rem; color:var(--oo-muted); margin-top:.4rem; } .oo-prose { max-width:var(--oo-maxw-narrow); } .oo-prose h2 { margin:2rem 0 .8rem; } /* ================================================================= 17. FOOTER ================================================================= */ .oo-footer { background:var(--oo-forest); color:var(--oo-footer-text); padding-block: clamp(3rem,6vw,4.5rem) 2rem; } .oo-footer a { color:var(--oo-footer-link); } .oo-footer a:hover { color:#fff; } .oo-footer__grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:2rem 1.6rem; padding-bottom:2.5rem; border-bottom:1px solid var(--oo-line-dark); } /* Tablet: merk over de volle breedte, linkkolommen in een 2x2-raster. */ @media (max-width:980px) { .oo-footer__grid { grid-template-columns:repeat(2,1fr); } .oo-footer__brand { grid-column:1 / -1; } } @media (max-width:560px) { .oo-footer__grid { grid-template-columns:1fr; } .oo-footer__brand { grid-column:auto; } } .oo-footer__brand .oo-logo { color:#fff; margin-bottom:1rem; } .oo-footer__brand .oo-logo__mark { background:#fff; color:var(--oo-forest); } /* Echt logo in de footer, groter en wit gerenderd (donker logo op donkere bg). */ .oo-footer__logo { display:inline-block; margin-bottom:1.2rem; } .oo-footer__logo img { max-height:96px; width:auto; filter:brightness(0) invert(1); } /* Award-badge (Website van het Jaar) — subtiele lichte chip zodat het zegel uitkomt. */ .oo-footer__award { display:inline-flex; align-items:center; gap:.85rem; margin-top:1.4rem; padding:.7rem 1rem .7rem .8rem; background:rgba(255,255,255,.07); border:1px solid var(--oo-line-dark); border-radius:14px; transition:background .2s var(--oo-ease), transform .2s var(--oo-ease); } .oo-footer__award:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); } .oo-footer__award img { width:72px; height:auto; display:block; flex:none; } .oo-footer__award::after { content:"Officieel gecertificeerd"; color:var(--oo-footer-link); font-size:.82rem; font-weight:600; line-height:1.3; max-width:9em; } .oo-footer__brand p { color:var(--oo-footer-muted); font-size:.95rem; max-width:36ch; } .oo-footer h4 { color:#fff; font-family:var(--oo-sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; } .oo-footer ul { list-style:none; padding:0; margin:0; } .oo-footer li { margin-bottom:.6rem; font-size:.95rem; } .oo-footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.85rem; color:var(--oo-footer-muted); } /* Bedrijfsgegevens (E-E-A-T) in de footer-brand. */ .oo-footer__biz { margin-top:1.2rem; font-style:normal; font-size:.85rem; line-height:1.7; color:var(--oo-footer-muted); } .oo-footer__biz strong { color:var(--oo-footer-link); font-weight:600; } .oo-footer__biz a { color:var(--oo-footer-link); } .oo-footer__biz a:hover { color:#fff; } /* Legal/secundair menu horizontaal naast elkaar (Reporter worden / Over / In de media). */ .oo-footer__legal { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; } .oo-footer__legal li { margin-bottom:0; } .oo-social { display:flex; gap:.6rem; } .oo-social a { width:38px; height:38px; border-radius:var(--oo-radius-xs); border:1px solid var(--oo-line-dark); display:grid; place-items:center; color:var(--oo-footer-link); } .oo-social a:hover { background:rgba(255,255,255,.1); color:#fff; } /* ================================================================= 18. WORDPRESS CORE / UTILITY ================================================================= */ .screen-reader-text { position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; } .skip-link { position:absolute; left:-999px; top:0; background:var(--oo-cta); color:#fff; padding:.6em 1em; border-radius:0 0 var(--oo-radius-xs) 0; z-index:999; } .skip-link:focus { left:0; color:#fff; } /* Branded toetsenbord-focus: forest-ring (>=3:1 op alle lichte vlakken) met witte binnenring zodat hij ook op donkere secties (footer/hero) zichtbaar is. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--oo-forest); outline-offset:2px; box-shadow:0 0 0 2px #fff; } .alignleft { float:left; margin:.4em 1.4em 1em 0; } .alignright { float:right; margin:.4em 0 1em 1.4em; } .aligncenter { margin-inline:auto; } .wp-caption-text { font-size:.85rem; color:var(--oo-muted); } .sticky, .gallery-caption, .bypostauthor { display:block; } .oo-searchform { display:flex; gap:.5rem; } .oo-searchform input[type=search] { flex:1; padding:.7em 1em; border-radius:999px; border:1px solid var(--oo-line); background:var(--oo-card); font-family:var(--oo-sans); font-size:1rem; } /* 1rem voorkomt iOS-zoom bij focus */ .oo-searchform input[type=search]:focus { outline:none; border-color:var(--oo-forest); } .oo-tags a { display:inline-block; font-size:.82rem; padding:.3em .8em; border-radius:999px; background:var(--oo-sand); color:var(--oo-ink-soft); margin:.2rem .2rem 0 0; } .oo-tags a:hover { background:var(--oo-forest); color:#fff; } /* ================================================================= 18b. CARD GRID WRAPPERS (equal height with filter wrappers) ================================================================= */ .oo-card-grid > [data-oo-cat] { display:flex; } .oo-card-grid > [data-oo-cat] > .oo-card { width:100%; } /* ================================================================= 18c. COMPACT ARTICLE HEADER ================================================================= */ .oo-pagehead--article { background:var(--oo-cream); color:var(--oo-ink); padding-block: clamp(1.8rem,4vw,3rem) clamp(1.2rem,3vw,2rem); border-bottom:1px solid var(--oo-line); } .oo-pagehead--article .oo-breadcrumb { color:var(--oo-muted); margin-bottom:.8rem; } .oo-pagehead--article .oo-breadcrumb a { color:var(--oo-forest-600); } .oo-pagehead--article h1 { color:var(--oo-forest); margin:.6rem 0 0; font-size:clamp(1.9rem,3.8vw,2.9rem); max-width:22ch; } .oo-badge--inline { position:static; display:inline-block; background:var(--oo-moss); color:var(--oo-forest); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.38em .8em; border-radius:999px; } .oo-article-byline { display:flex; align-items:center; gap:.75rem; margin-top:1.2rem; } .oo-article-byline .oo-avatar { width:46px; height:46px; } .oo-article-byline strong { display:block; color:var(--oo-ink); font-size:.98rem; } .oo-article-byline span { color:var(--oo-muted); font-size:.88rem; } .oo-section--tight { padding-block: clamp(1.6rem,3.5vw,2.6rem) var(--oo-section-y); } .oo-article-hero { margin:0 0 1.6rem; border-radius:var(--oo-radius); overflow:hidden; } /* Altijd liggend 16:9: ook staande featured images worden netjes bijgesneden i.p.v. de hele leeskolom verticaal te vullen. */ .oo-article-hero img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; } /* ================================================================= 18d. ARTICLE TOOLBAR – delen + voorlezen ================================================================= */ .oo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.7rem 0 1.3rem; margin-bottom:1.4rem; border-bottom:1px solid var(--oo-line); } .oo-share { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } .oo-toolbar__label { display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:650; color:var(--oo-muted); margin-right:.3rem; } .oo-share__btn { width:44px; height:44px; border-radius:999px; border:1px solid var(--oo-line); background:var(--oo-card); color:var(--oo-forest); display:grid; place-items:center; cursor:pointer; transition:.18s var(--oo-ease); } /* 44px = duim-vriendelijk tap-target */ .oo-share__btn:hover { transform:translateY(-2px); color:#fff; } .oo-share__btn--whatsapp:hover { background:#25d366; border-color:#25d366; color:var(--oo-forest); } /* wit op WhatsApp-groen = 1.98:1; forest haalt 7.5:1 */ .oo-share__btn--facebook:hover { background:#1877f2; border-color:#1877f2; } .oo-share__btn--x:hover { background:#000; border-color:#000; } .oo-share__btn--copy:hover { background:var(--oo-forest); border-color:var(--oo-forest); } .oo-share__btn.is-copied { background:var(--oo-moss); border-color:var(--oo-moss); color:var(--oo-forest); } .oo-tool-btn { display:inline-flex; align-items:center; gap:.55em; padding:.6em 1.1em; border-radius:999px; border:1.5px solid var(--oo-forest); background:transparent; color:var(--oo-forest); font-family:var(--oo-sans); font-weight:650; font-size:.9rem; cursor:pointer; transition:.18s var(--oo-ease); } .oo-tool-btn:hover { background:var(--oo-forest); color:#fff; } .oo-tool-btn.is-speaking { background:var(--oo-cta); border-color:var(--oo-cta); color:#fff; } /* Speaker-icoon in een subtiele cirkel (markup gebruikt .oo-tool-btn__play). */ .oo-tool-btn__play { display:inline-grid; place-items:center; width:1.7em; height:1.7em; margin-left:-.35em; border-radius:999px; background:rgba(22,44,18,.08); } .oo-tool-btn:hover .oo-tool-btn__play, .oo-tool-btn.is-speaking .oo-tool-btn__play { background:rgba(255,255,255,.18); } /* ================================================================= 18e. TABLE OF CONTENTS (auto + popular plugins) ================================================================= */ .oo-toc { background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1rem 1.3rem 1.2rem; margin:0 0 1.8rem; max-width:none; box-shadow:var(--oo-shadow-sm); } .oo-toc__head { display:flex; align-items:center; gap:.5em; width:100%; background:none; border:0; padding:.2rem 0; cursor:pointer; font-family:var(--oo-sans); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--oo-forest); } .oo-toc__chev { margin-left:auto; transition:transform .2s var(--oo-ease); } .oo-toc__head[aria-expanded="false"] .oo-toc__chev { transform:rotate(-90deg); } .oo-toc__list { list-style:none; padding:0; margin:.7rem 0 0; display:grid; gap:.15rem; } .oo-toc__list li { margin:0; } .oo-toc__list a { display:block; padding:.4em .6em; border-radius:var(--oo-radius-xs); color:var(--oo-ink-soft); font-size:.95rem; line-height:1.4; } .oo-toc__list a:hover { background:var(--oo-sky-soft); color:var(--oo-forest); } .oo-toc__sub a { padding-left:1.6em; font-size:.9rem; color:var(--oo-muted); } .oo-toc.is-collapsed .oo-toc__list { display:none; } /* common TOC plugins inherit the theme look */ #ez-toc-container, .lwptoc, .wp-block-rank-math-toc-block { background:var(--oo-card)!important; border:1px solid var(--oo-line)!important; border-radius:var(--oo-radius)!important; box-shadow:var(--oo-shadow-sm)!important; padding:1rem 1.3rem!important; } #ez-toc-container .ez-toc-title, .lwptoc-title { color:var(--oo-forest)!important; font-family:var(--oo-sans)!important; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem!important; } #ez-toc-container a, .lwptoc a, .wp-block-rank-math-toc-block a { color:var(--oo-ink-soft)!important; } #ez-toc-container a:hover, .lwptoc a:hover { color:var(--oo-rust-text)!important; } /* ================================================================= 18f. ARTICLE TABLES ================================================================= */ .oo-table-scroll { overflow-x:auto; margin:1.8rem 0; border:1px solid var(--oo-line); border-radius:var(--oo-radius); -webkit-overflow-scrolling:touch; } .oo-article table, .oo-article .oo-table-scroll table { width:100%; border-collapse:collapse; margin:0; font-size:.98rem; min-width:480px; } .oo-article table { max-width:none; } .oo-article th, .oo-article td { padding:.8em 1em; text-align:left; border-bottom:1px solid var(--oo-line); vertical-align:top; } .oo-article thead th { background:var(--oo-forest); color:#fff; font-family:var(--oo-sans); font-weight:600; font-size:.85rem; letter-spacing:.02em; } .oo-article tbody tr:nth-child(even) { background:var(--oo-sky-soft); } .oo-article tbody tr:hover { background:rgba(173,201,87,.14); } .oo-article td:first-child { font-weight:600; color:var(--oo-forest); } /* ================================================================= 18g. AUTHOR BOX ================================================================= */ .oo-authorbox { display:flex; gap:1.3rem; align-items:flex-start; background:var(--oo-sky-soft); border:1px solid var(--oo-line); border-radius:var(--oo-radius-lg); padding:1.6rem; margin:2.5rem 0; } .oo-authorbox__avatar { width:84px; height:84px; border-radius:999px; flex:none; border:3px solid #fff; box-shadow:var(--oo-shadow-sm); } .oo-authorbox__avatarlink { line-height:0; flex:none; } .oo-authorbox__body { min-width:0; } .oo-authorbox__body h3 a { color:inherit; } .oo-authorbox__body h3 a:hover { color:var(--oo-rust-text); } .oo-authorbox__kicker { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--oo-forest-600); } .oo-authorbox h3 { font-size:1.35rem; margin:.2rem 0 .5rem; } .oo-authorbox__bio { margin-bottom:.7rem; } .oo-authorbox__bio-text { color:var(--oo-ink-soft); margin:0; } .oo-authorbox__bio.is-clamped .oo-authorbox__bio-text { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .oo-authorbox__more { margin-top:.4rem; padding:0; background:none; border:0; font:inherit; font-weight:600; color:var(--oo-rust-text); cursor:pointer; } .oo-authorbox__more:hover { text-decoration:underline; } .oo-authorbox__socials { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .9rem; } .oo-authorbox__social { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:#fff; border:1px solid var(--oo-line); color:var(--oo-forest); transition:color .15s, background .15s, border-color .15s, transform .15s; } .oo-authorbox__social:hover { color:#fff; background:var(--oo-cta); border-color:var(--oo-cta); transform:translateY(-2px); } .oo-authorbox__social:focus-visible { outline:3px solid var(--oo-forest); outline-offset:2px; } /* ================================================================= 18h-0. GOOGLE-REVIEWS-BADGE (E-E-A-T) — Customizer: rating/aantal/URL ================================================================= */ .oo-gbadge { display:inline-flex; align-items:center; gap:.55em; font-family:var(--oo-sans); font-size:.92rem; font-weight:600; color:inherit; } .oo-gbadge__stars { display:inline-flex; gap:1px; color:#fbbc04; } /* Google-review-amber (merkkleur-uitzondering, decoratief naast de tekst) */ .oo-gbadge__stars svg { display:inline-block; width:14px; height:14px; } .oo-footer .oo-gbadge { margin-top:1.1rem; color:var(--oo-footer-link); } a.oo-gbadge:hover .oo-gbadge__text { text-decoration:underline; } .oo-google .oo-gbadge { flex:none; width:100%; margin-top:.2rem; color:var(--oo-ink-soft); } /* ================================================================= 18h. GOOGLE / FOLLOW BLOCK ================================================================= */ .oo-google { display:flex; align-items:center; gap:1rem; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.1rem 1.4rem; margin:2rem 0; flex-wrap:wrap; } .oo-google__icon { width:46px; height:46px; border-radius:var(--oo-radius-xs); background:var(--oo-sky-soft); color:var(--oo-forest); display:grid; place-items:center; flex:none; } .oo-google__body { flex:1; min-width:200px; } .oo-google__body strong { display:block; color:var(--oo-forest); font-size:1.02rem; } .oo-google__body p { margin:.15rem 0 0; color:var(--oo-muted); font-size:.92rem; } /* ================================================================= 18i. CONTENT EGG (affiliate offers) styling ================================================================= */ .egg-module, .product-offer, .egg_offer, .oo-offers { margin:2rem 0; } .egg-module .product-offer, .egg-fashion .product, .egg_offer_class, .egg-module .offer, .oo-offer-card { display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.1rem 1.3rem; margin-bottom:1rem; box-shadow:var(--oo-shadow-sm); transition:.2s var(--oo-ease); } .egg-module .product-offer:hover, .oo-offer-card:hover { box-shadow:var(--oo-shadow-md); transform:translateY(-2px); } .egg-module img, .product-offer img, .oo-offer-card img { max-width:90px; height:auto; border-radius:var(--oo-radius-xs); flex:none; } .egg-module .product-title, .product-offer .title, .oo-offer-card .title { font-family:var(--oo-serif); font-weight:600; color:var(--oo-forest); font-size:1.1rem; flex:1; min-width:160px; } .egg-module .price, .product-offer .price, .oo-offer-card .price { font-family:var(--oo-serif); font-size:1.4rem; color:var(--oo-forest); font-weight:600; } .egg-module .btn, .egg-module a.button, .product-offer .btn, .oo-offer-card .btn, .egg-module .btn-primary, .egg_button { display:inline-flex; align-items:center; gap:.4em; background:var(--oo-cta)!important; color:#fff!important; border:0!important; border-radius:999px!important; padding:.75em 1.4em!important; font-weight:650!important; font-family:var(--oo-sans)!important; text-decoration:none!important; box-shadow:0 6px 16px rgba(184,82,20,.28); transition:.2s var(--oo-ease); } .egg-module .btn:hover, .product-offer .btn:hover, .oo-offer-card .btn:hover, .egg_button:hover { background:var(--oo-cta-dark)!important; transform:translateY(-2px); } .oo-offers__title, .egg-module h3 { font-family:var(--oo-serif); color:var(--oo-forest); font-size:1.4rem; margin-bottom:1rem; } .oo-offer-badge { background:var(--oo-moss); color:var(--oo-forest); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.3em .7em; border-radius:999px; } /* ================================================================= 18j. HOMEPAGE: WAAROM-pijlers + ABOUT block + shortbox light ================================================================= */ .oo-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; } .oo-pillar { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--oo-radius); padding:1.5rem; } .oo-pillar__icon { width:48px; height:48px; border-radius:var(--oo-radius-xs); background:var(--oo-moss); color:var(--oo-forest); display:grid; place-items:center; margin-bottom:1rem; } .oo-pillar h3 { color:#fff; font-size:1.2rem; margin-bottom:.45rem; } .oo-pillar p { color:rgba(255,255,255,.82); font-size:.94rem; margin:0; } .oo-why-cta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:2.2rem; } .oo-aboutblock { display:grid; grid-template-columns:280px 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius-lg); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--oo-shadow-sm); } .oo-aboutblock__photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--oo-radius); } .oo-aboutblock__role { color:var(--oo-rust-text); font-weight:600; margin:.2rem 0 1rem; } .oo-aboutblock__body h2 { margin:.3rem 0 0; } /* "In het kort": prominent uitgelicht – conclusie-eerst (AEO). */ .oo-shortbox--light { background:linear-gradient(180deg, rgba(173,201,87,.12), rgba(173,201,87,.04)); color:var(--oo-ink); border:1px solid rgba(173,201,87,.45); border-radius:var(--oo-radius); box-shadow:var(--oo-shadow-sm); padding:clamp(1.3rem,2.5vw,1.8rem); margin:0 0 1.8rem; } .oo-shortbox--light .oo-shortbox__tag { color:var(--oo-moss-text); background:rgba(173,201,87,.24); } .oo-shortbox--light p { color:var(--oo-ink-soft); font-size:1.12rem; line-height:1.7; } /* zelfde maat/regelafstand als .oo-article */ .oo-shortbox--light p:last-child { margin-bottom:0; } .oo-shortbox--light strong { color:var(--oo-forest); } /* ================================================================= 18k. COMMENTS ================================================================= */ .oo-comments { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--oo-line); max-width:70ch; } .oo-comments__title { margin-bottom:1.6rem; } .oo-commentlist { list-style:none; padding:0; margin:0 0 2.5rem; } .oo-commentlist .children { list-style:none; margin:1rem 0 0 1.5rem; padding-left:1.2rem; border-left:2px solid var(--oo-line); } .oo-comment { margin-bottom:1.4rem; } .oo-comment__inner { display:flex; gap:1rem; background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius); padding:1.2rem 1.3rem; } .oo-comment__avatar { width:48px; height:48px; border-radius:999px; flex:none; } .oo-comment__body { flex:1; } .oo-comment__head { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.4rem; } .oo-comment__author { font-weight:650; color:var(--oo-forest); } .oo-comment__author a { color:var(--oo-forest); } .oo-comment__date { font-size:.82rem; color:var(--oo-muted); } .oo-comment__text { color:var(--oo-ink-soft); } .oo-comment__text p:last-child { margin-bottom:0; } .oo-comment__actions { margin-top:.6rem; } .oo-comment__actions a { font-size:.85rem; font-weight:650; color:var(--oo-rust-text); } .oo-comment__pending { font-size:.85rem; color:var(--oo-muted); } .oo-commentform { display:grid; gap:1rem; background:var(--oo-sky-soft); border:1px solid var(--oo-line); border-radius:var(--oo-radius-lg); padding:1.6rem; } .oo-commentform__title { margin:0 0 .5rem; } /* extra lucht tussen titel en het reactieveld */ .oo-commentform__note { font-size:.85rem; color:var(--oo-muted); margin:0; } .oo-commentform .comment-form-comment, .oo-commentform .comment-form-author, .oo-commentform .comment-form-email, .oo-commentform .comment-form-url { margin:0; } .oo-commentform label { display:block; font-size:.85rem; font-weight:600; color:var(--oo-ink-soft); margin-bottom:.35rem; } .oo-commentform input[type=text], .oo-commentform input[type=email], .oo-commentform input[type=url], .oo-commentform textarea { width:100%; padding:.8em 1em; border-radius:var(--oo-radius-sm); border:1px solid var(--oo-line); background:#fff; font-family:var(--oo-sans); font-size:1rem; color:var(--oo-ink); } .oo-commentform input:focus, .oo-commentform textarea:focus { outline:none; border-color:var(--oo-forest); box-shadow:0 0 0 3px rgba(173,201,87,.35); } .oo-commentform .form-submit { margin:0; } /* ================================================================= 19. RESPONSIVE ================================================================= */ @media (max-width: 980px) { .oo-card-grid, .oo-tools, .oo-tiles { grid-template-columns:repeat(2,1fr); } .oo-tile--lg { grid-column: span 2; } .oo-stats { grid-template-columns:repeat(2,1fr); } .oo-cite, .oo-newsletter, .oo-feature, .oo-article-layout { grid-template-columns:1fr; } .oo-sidebar { position:static; } .oo-feature__media { min-height:240px; } .oo-pillars { grid-template-columns:repeat(2,1fr); } .oo-aboutblock { grid-template-columns:160px 1fr; } } @media (max-width: 760px) { .oo-nav { position:fixed; inset:72px 0 auto 0; background:var(--oo-cream); border-bottom:1px solid var(--oo-line); padding:1rem; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .24s var(--oo-ease), transform .24s var(--oo-ease), visibility .24s var(--oo-ease); box-shadow:var(--oo-shadow-md); margin:0; max-height:calc(100vh - 72px); overflow-y:auto; } .oo-nav.is-open { opacity:1; visibility:visible; transform:translateY(0); } .oo-nav ul { flex-direction:column; align-items:stretch; gap:.2rem; } .oo-nav a { padding:.8rem 1rem; } .oo-nav .sub-menu { position:static; display:flex; box-shadow:none; border:0; padding-left:1rem; background:transparent; } .oo-burger { display:flex; } /* Nieuwsbrief-CTA blijft zichtbaar op mobiel (belangrijkste conversiedoel). */ .oo-header__inner { gap:.6rem; } .oo-header__cta .oo-btn--primary { display:inline-flex; padding:.62em 1em; font-size:.85rem; min-height:42px; } /* belangrijkste conversieknop: duim-vriendelijk */ .oo-card-grid, .oo-card-grid--2, .oo-tools, .oo-tiles, .oo-stats, .oo-proscons, .oo-pillars { grid-template-columns:1fr; } .oo-tile--lg { grid-column: span 1; } /* Hero a touch tighter */ .oo-hero__inner { padding-block: clamp(3rem,12vw,5rem); } .oo-hero__actions { flex-direction:column; align-items:stretch; } .oo-hero__actions .oo-btn { justify-content:center; } /* Article header + toolbar */ .oo-pagehead--article h1 { font-size:clamp(1.6rem,7vw,2.1rem); } .oo-toolbar { gap:.7rem; } .oo-tool-btn { width:100%; justify-content:center; } .oo-share { width:100%; } /* Filters: horizontal scroll on small screens */ .oo-filters--scroll { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.5rem; margin-inline:-1.1rem; padding-inline:1.1rem; scrollbar-width:none; } .oo-filters--scroll::-webkit-scrollbar { display:none; } .oo-chip { flex:0 0 auto; } /* About + author + google stack */ .oo-aboutblock { grid-template-columns:1fr; text-align:left; } .oo-aboutblock__photo img { max-width:180px; } .oo-authorbox { flex-direction:column; } .oo-google { flex-direction:column; align-items:flex-start; } .oo-section-head { flex-direction:column; align-items:flex-start; } /* Pagination + comments */ .oo-pagination { flex-wrap:wrap; } .oo-commentlist .children { margin-left:.6rem; padding-left:.8rem; } } @media (max-width: 420px) { .oo-card-grid { gap:1.1rem; } .oo-section { padding-block: clamp(2.4rem,9vw,3.5rem); } } @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } /* !important op html: wint anders niet van `html { scroll-behavior:smooth }`. */ html { scroll-behavior:auto !important; } } /* Windows High Contrast / forced colors: backgrounds worden gestript, dus geef puur-met-background getekende UI een zichtbare fallback. */ @media (forced-colors: active) { .oo-burger span { background: CanvasText; forced-color-adjust: none; } .oo-nav .current-menu-item > a::after, .oo-nav .current_page_item > a::after, .oo-nav .current-menu-ancestor > a::after, .oo-nav .current-menu-parent > a::after { background: CanvasText; forced-color-adjust: none; } .oo-checklist-block__body li::before { border: 1.5px solid CanvasText; } } /* ================================================================= 20. PLUGIN-INTEGRATIES – afstemmen op de OutdoorOnly-huisstijl ================================================================= */ /* --- ContentEgg: product-/aanbod-lijst (cegg-list) --- */ .oo-article .cegg-list, .oo-article .cegg5-container { margin: 1.8rem 0; } .oo-article .cegg-list-card { align-items: center; border: 1px solid var(--oo-line); border-radius: var(--oo-radius); box-shadow: var(--oo-shadow-sm); transition: box-shadow .25s var(--oo-ease), border-color .25s var(--oo-ease), transform .25s var(--oo-ease); } .oo-article .cegg-list-card:hover { box-shadow: var(--oo-shadow-md); border-color: var(--oo-moss); transform: translateY(-2px); } /* Productafbeelding terug in normale flow (ContentEgg zet 'm absolute → 0px). */ .oo-article .cegg-list-card-img-col { position: relative; padding: .6rem; } .oo-article .cegg-list-card-img-col img { position: static !important; width: 100% !important; height: auto !important; max-height: 92px; object-fit: contain; } /* "Bekijk hier"-knop naar de merk-CTA (leesbaar wit, WCAG). */ .oo-article .cegg-list .btn-primary, .oo-article .cegg-list a.btn-primary, .oo-article .cegg-list-card .btn { background: var(--oo-cta) !important; border-color: var(--oo-cta) !important; color: #fff !important; border-radius: 999px !important; font-weight: 650; } .oo-article .cegg-list .btn-primary:hover, .oo-article .cegg-list-card .btn:hover { background: var(--oo-cta-dark) !important; border-color: var(--oo-cta-dark) !important; } /* --- ContentEgg: price_comparison_card — compacte horizontale kaart --- */ .oo-article .cegg-price_comparison_card { margin: 1.8rem 0; } .oo-article .cegg-item-card { display: block !important; border-radius: var(--oo-radius) !important; box-shadow: var(--oo-shadow-sm); transition: box-shadow .25s var(--oo-ease), transform .25s var(--oo-ease); } .oo-article .cegg-item-card:hover { box-shadow: var(--oo-shadow-md); transform: translateY(-2px); } /* border_color=primary (ContentEgg-olive) → merk-accent (moss). */ .oo-article .cegg-item-card.border-primary { border-color: var(--oo-moss) !important; } /* Rij: beeld links (vaste breedte) + content rechts, verticaal gecentreerd. */ .oo-article .cegg-item-card .row { display: flex !important; flex-wrap: nowrap; align-items: center !important; gap: 1.4rem; padding: 1.3rem 1.5rem !important; margin: 0 !important; } .oo-article .cegg-item-card-img-col { flex: 0 0 180px !important; max-width: 180px !important; width: 180px !important; padding: 0 !important; position: relative; } .oo-article .cegg-item-card .row > *:not(.cegg-item-card-img-col) { flex: 1 1 auto !important; max-width: none !important; padding: 0 !important; } /* Bootstrap 1:1-ratio-hack uitschakelen (veroorzaakte enorme lege ruimte). */ .oo-article .cegg-item-card-img-col .ratio { height: auto !important; } .oo-article .cegg-item-card-img-col .ratio::before { display: none !important; padding-top: 0 !important; } .oo-article .cegg-item-card-img-col .ratio > * { position: static !important; } .oo-article .cegg-item-card-img-col img { position: static !important; width: auto !important; height: auto !important; max-height: 150px !important; max-width: 100%; margin: 0 auto; display: block; } @media (max-width: 600px) { .oo-article .cegg-item-card .row { flex-wrap: wrap; } .oo-article .cegg-item-card-img-col { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; } } /* "Bekijk"-knop → merk-CTA. */ .oo-article .cegg-price_comparison_card .btn-primary, .oo-article .cegg-item-card .btn { background: var(--oo-cta) !important; border-color: var(--oo-cta) !important; color: #fff !important; border-radius: 999px !important; font-weight: 650; } .oo-article .cegg-price_comparison_card .btn-primary:hover, .oo-article .cegg-item-card .btn:hover { background: var(--oo-cta-dark) !important; border-color: var(--oo-cta-dark) !important; } /* --- ContentEgg: Amazon-prijsdisclaimer --- */ /* Het info-icoon werd door de globale svg-reset (display:block) uit de rechts uitgelijnde tekst gebroken en belandde links op een eigen regel. */ .oo-article .cegg-price-disclaimer svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; } .oo-article .cegg-price-disclaimer { text-align: right; } .oo-article .cegg-price-disclaimer small { color: var(--oo-muted); font-size: .8rem; } .oo-article .cegg-price-disclaimer a { color: inherit; } /* --- FAQ (Rank Math FAQ-blok): accordion, geen zijstreep --- */ .oo-article .rank-math-list { margin: 2rem 0; display: grid; gap: .7rem; } .oo-article .rank-math-list-item { background: var(--oo-card); border: 1px solid var(--oo-line); border-radius: var(--oo-radius-sm); overflow: hidden; } .oo-article .rank-math-question { font-family: var(--oo-serif); font-size: 1.12rem; font-weight: 600; line-height: 1.3; color: var(--oo-forest); margin: 0; padding: 1.05rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Toggle-affordance (alleen wanneer JS de accordion activeert). */ .oo-article .rank-math-list.oo-faq-ready .rank-math-question { cursor: pointer; } .oo-article .rank-math-list.oo-faq-ready .rank-math-question::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2.5px solid var(--oo-moss-dark); border-bottom: 2.5px solid var(--oo-moss-dark); transform: rotate(45deg); transition: transform .25s var(--oo-ease); margin-top: -4px; } .oo-article .rank-math-list-item.is-open .rank-math-question::after { transform: rotate(225deg); margin-top: 2px; } .oo-article .rank-math-question:hover { color: var(--oo-cta); } .oo-article .rank-math-answer { color: var(--oo-ink-soft); padding: 0 1.2rem 1.1rem; } .oo-article .rank-math-answer p:last-child { margin-bottom: 0; } /* ================================================================= 21. NIEUWSBRIEF-LANDINGSPAGINA ================================================================= */ .oo-nl-form { display:flex; gap:.6rem; flex-wrap:wrap; max-width:480px; } .oo-nl-form input[type=email] { flex:1; min-width:220px; padding:.95em 1.2em; border-radius:999px; border:1.5px solid rgba(255,255,255,.3); background:#fff; color:var(--oo-ink); font-size:1rem; font-family:var(--oo-sans); } .oo-nl-form input[type=email]:focus { outline:none; box-shadow:0 0 0 4px rgba(173,201,87,.45); } .oo-nl-form .oo-btn { flex:none; } .oo-nl-microcopy { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .4rem; margin-top:1rem; font-size:.9rem; color:rgba(255,255,255,.9); } .oo-nl-microcopy svg { color:var(--oo-moss); vertical-align:-2px; } /* "Zo ziet een editie eruit" */ .oo-nl-preview { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; } .oo-checklist { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; } .oo-checklist li { display:flex; align-items:center; gap:.6em; font-weight:500; } .oo-checklist svg { color:var(--oo-moss-dark); flex:none; } .oo-nl-sample { background:#fff; border:1px solid var(--oo-line); border-radius:var(--oo-radius); box-shadow:var(--oo-shadow-md); padding:1.4rem 1.5rem; display:grid; gap:.7rem; } .oo-nl-sample__from { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--oo-muted); } .oo-nl-sample__subject { font-family:var(--oo-serif); font-size:1.25rem; color:var(--oo-forest); line-height:1.2; } .oo-nl-sample__row { display:flex; align-items:center; gap:.6em; color:var(--oo-ink-soft); padding-top:.7rem; border-top:1px solid var(--oo-line); font-size:.95rem; } .oo-nl-sample__row svg { color:var(--oo-moss-dark); flex:none; } /* Founder-belofte */ .oo-nl-promise { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; max-width:640px; margin-inline:auto; } .oo-nl-promise__avatar { width:84px; height:84px; border-radius:999px; } .oo-nl-promise blockquote { margin:0; } .oo-nl-promise blockquote p { font-family:var(--oo-serif); font-size:clamp(1.3rem,2.6vw,1.7rem); font-style:italic; color:var(--oo-forest); line-height:1.4; margin-bottom:.8rem; } .oo-nl-promise figcaption { color:var(--oo-muted); font-size:.95rem; } /* FAQ-accordion via
(newsletter-pagina) */ .oo-faq { display:grid; gap:.7rem; } .oo-faq__item { background:var(--oo-card); border:1px solid var(--oo-line); border-radius:var(--oo-radius-sm); overflow:hidden; } .oo-faq__q { list-style:none; cursor:pointer; padding:1.05rem 1.2rem; font-family:var(--oo-serif); font-size:1.12rem; font-weight:600; color:var(--oo-forest); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .oo-faq__q::-webkit-details-marker { display:none; } .oo-faq__q::after { content:""; flex:none; width:11px; height:11px; border-right:2.5px solid var(--oo-moss-dark); border-bottom:2.5px solid var(--oo-moss-dark); transform:rotate(45deg); transition:transform .25s var(--oo-ease); margin-top:-4px; } .oo-faq__item[open] .oo-faq__q::after { transform:rotate(225deg); margin-top:2px; } .oo-faq__q:hover { color:var(--oo-cta); } .oo-faq__a { padding:0 1.2rem 1.1rem; color:var(--oo-ink-soft); } .oo-faq__a p:last-child { margin-bottom:0; } @media (max-width:760px) { .oo-nl-preview { grid-template-columns:1fr; } } /* ================================================================= 22. ACF-BLOKKEN (update / key-takeaways / checklist / plus-min) ================================================================= */ .oo-article .oo-proscons--block { margin: 1.8rem 0; } /* Key takeaways — forest-kaart, identiek gestyled aan de "In het kort"- shortbox: pill-tag in Inter (geen grote serif-kop meer) en dezelfde tekstmaat/regelafstand als het artikel. Redacties gebruiken dit blok vaak mét de titel "In het kort", dus de twee moeten één geheel zijn. */ .oo-keytakeaways { background: var(--oo-forest); color: var(--oo-on-forest); font-family: var(--oo-sans); border-radius: var(--oo-radius); padding: clamp(1.4rem, 3vw, 2rem); margin: 1.8rem 0; box-shadow: var(--oo-shadow-sm); } .oo-keytakeaways__title { display: inline-flex; align-items: center; gap: .5em; font-family: var(--oo-sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oo-moss); background: rgba(173,201,87,.16); padding: .4em .8em; border-radius: 999px; margin: 0 0 1.1rem; } .oo-keytakeaways__body { color: #fff; font-size: 1.05rem; line-height: 1.7; } .oo-keytakeaways__body :where(p, li):last-child { margin-bottom: 0; } .oo-keytakeaways__body a { color: var(--oo-moss); text-decoration: underline; } /* Checklist — lichte kaart met afvinklijst + printknop. */ .oo-checklist-block { background: var(--oo-card); border: 1px solid var(--oo-line); border-radius: var(--oo-radius); padding: clamp(1.4rem, 3vw, 2rem); margin: 1.8rem 0; } .oo-checklist-block__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .oo-checklist-block__title { font-family: var(--oo-serif); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--oo-forest); margin: 0; } .oo-checklist-print { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1em; border-radius: 999px; border: 1.5px solid var(--oo-forest); background: transparent; color: var(--oo-forest); font-family: var(--oo-sans); font-weight: 650; font-size: .85rem; cursor: pointer; transition: .18s var(--oo-ease); } .oo-checklist-print:hover { background: var(--oo-forest); color: #fff; } .oo-checklist-block__body ul, .oo-checklist-block__body ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .oo-checklist-block__body li { position: relative; padding-left: 2em; line-height: 1.5; } .oo-checklist-block__body li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.15em; height: 1.15em; border-radius: 5px; background: var(--oo-moss); } .oo-checklist-block__body li::after { content: ""; position: absolute; left: .34em; top: .42em; width: .42em; height: .2em; border-left: 2px solid var(--oo-forest); border-bottom: 2px solid var(--oo-forest); transform: rotate(-45deg); } /* Update — moss-band met markeerstip. */ .oo-update { display: flex; align-items: flex-start; gap: 1rem; background: var(--oo-moss); color: var(--oo-forest); border-radius: var(--oo-radius); padding: 1rem 1.3rem; margin: 1.8rem 0; } .oo-update__dot { flex: none; width: 18px; height: 18px; margin-top: .35em; border-radius: 999px; border: 2px dashed var(--oo-forest); position: relative; } .oo-update__dot::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--oo-cta); } .oo-update__text { font-weight: 500; } .oo-update__text :where(p):last-child { margin-bottom: 0; } .oo-update__text strong { color: var(--oo-forest); } /* ================================================================= 23. PLUGIN-OPMAAK — Novashare pin, Gravity Forms, content-beeld ================================================================= */ /* Novashare: "Pin op afbeelding"-knop als nette horizontale pill. GLOBAAL gestyled (niet alleen binnen .oo-article): de knop verschijnt ook op de artikel-hero, die búiten .oo-article staat — daar viel hij terug op de Novashare-cirkel en duwde de globale svg-reset (display:block) de tekst "Pin" onder de knop uit. */ .ns-pinterest-image { position: relative; display: inline-block; max-width: 100%; } .ns-pinterest-image-button.ns-circular, .ns-pinterest-image-button { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: .4em; width: auto !important; height: auto !important; top: 12px !important; left: 12px !important; padding: .5em .85em !important; border-radius: 999px !important; background: #c92228 !important; color: #fff !important; font-family: var(--oo-sans) !important; font-weight: 650 !important; font-size: .8rem !important; line-height: 1 !important; text-decoration: none !important; box-shadow: var(--oo-shadow-sm); } .ns-pinterest-image-button svg { display: inline-block !important; width: 14px !important; height: 14px !important; margin: 0 !important; } /* Novashare zet site-breed een "Pin op afbeelding"-hoverknop én een inline span-wrapper (.ns-pinterest-image) om elk beeld. In overzichten (kaarten, tegels) en de sidebar willen we die knop niet — alleen in de artikelcontent. En de wrapper moet de hele media-box vullen, anders verliest de afbeelding haar height:100%/object-fit:cover en past hij niet meer perfect (witruimte). */ .oo-card__media .ns-pinterest-image-button, .oo-tile .ns-pinterest-image-button, .oo-sidebar .ns-pinterest-image-button { display: none !important; } .oo-card__media .ns-pinterest-image, .oo-tile .ns-pinterest-image, .oo-related__thumb .ns-pinterest-image, .oo-article-hero .ns-pinterest-image, .oo-aboutblock__photo .ns-pinterest-image { display: block; width: 100%; height: 100%; } /* Gravity Forms in de huisstijl (o.a. contactformulier). */ .gform_wrapper .gfield_label { font-family: var(--oo-sans); font-weight: 600; color: var(--oo-forest); margin-bottom: .4rem; } .gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=url], .gform_wrapper input[type=number], .gform_wrapper select, .gform_wrapper textarea { width: 100%; padding: .8em 1em; border: 1.5px solid var(--oo-line); border-radius: var(--oo-radius-xs); background: var(--oo-card); color: var(--oo-ink); font-family: var(--oo-sans); font-size: 1rem; } .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { outline: none; border-color: var(--oo-cta); box-shadow: 0 0 0 4px rgba(184,82,20,.18); } /* GF 2.5+ zet de knopkleur via inline custom properties; override met merk-CTA. */ .gform_wrapper { --gf-ctrl-btn-bg-color: var(--oo-cta); --gf-ctrl-btn-bg-color-hover: var(--oo-cta-dark); --gf-color-primary: var(--oo-cta); } .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_footer button, .gform_wrapper button.gform_button, .gform_wrapper .gform_button { background: var(--oo-cta) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: .9em 1.7em; font-family: var(--oo-sans); font-weight: 650; font-size: .98rem; cursor: pointer; transition: background .2s var(--oo-ease), transform .2s var(--oo-ease); } .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_footer button:hover, .gform_wrapper .gform_button:hover { background: var(--oo-cta-dark) !important; transform: translateY(-2px); } .gform_wrapper .gfield_required { color: var(--oo-cta); } /* Content-afbeeldingen in artikelen/pagina's: zachte hoeken + bijschrift. */ .oo-article :where(p, figure) > img, .oo-article .wp-block-image img { border-radius: var(--oo-radius-sm); } .oo-article figcaption, .oo-article .wp-element-caption { font-size: .85rem; color: var(--oo-muted); text-align: center; margin-top: .5rem; } /* Google Map (bv. contactpagina) — responsieve wrapper. */ .oo-map { position: relative; margin: 1.8rem 0; border-radius: var(--oo-radius); overflow: hidden; box-shadow: var(--oo-shadow-sm); border: 1px solid var(--oo-line); aspect-ratio: 16 / 9; } .oo-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ================================================================= 24. PAGINA-CONTENT: BREDE BLOKKEN, GALERIJEN, CONTACT ================================================================= */ /* --- Align-wide / -full: laat blokken uit de smalle leeskolom breken --- */ .oo-article .alignwide { width: min(1100px, 92vw); max-width: none; margin-left: 50%; transform: translateX(-50%); } .oo-article .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); border-radius: 0; } /* --- WP-blokgalerijen: 'justified' raster, gelijke hoogte, geen crop -------- Elke foto behoudt zijn EIGEN verhouding én elke rij is strak uitgelijnd op gelijke hoogte — zonder bijsnijden. Truc: per foto-figure staat `--oo-ar` (beeldverhouding W/H), gezet door outdooronly_gallery_justify(). De figures zijn flex-items met breedte ∝ hun verhouding (flex-grow:--oo-ar, basis 0), dus binnen een rij krijgen alle foto's dezelfde hoogte; een staande foto wordt simpelweg smaller dan een liggende (niets wordt weggesneden). De erft `--oo-ar` (custom properties erven) en gebruikt het als aspect-ratio: dat houdt `height:auto` betrouwbaar, want WP-core's `.is-cropped` (height:100%/object-fit:cover) + lazy-load (sizes=auto) + de Pinterest-wrapper maken het anders onbruikbaar (foto's rekken dan uit tot 1500px). Op brede paginasjablonen (.oo-prose) groeit de galerij tot 940px. Galerijen op deze site zijn 2–3 foto's → één nette rij; heel grote galerijen komen ook in één rij en worden dus kleiner (geen min-width, anders breekt de gelijke hoogte). */ .oo-article .wp-block-gallery { display: flex !important; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin: 1.8rem 0; padding: 0; list-style: none; } .oo-prose .wp-block-gallery { width: min(940px, 94vw); max-width: none; } /* Elke foto = flex-item, breedte ∝ verhouding zodat de rij gelijke hoogte krijgt. `figure.wp-block-image`-selector + !important wint van WP-core's flex/.is-cropped (…:not(#individual-image)). */ .oo-article .wp-block-gallery figure.wp-block-image { flex: var(--oo-ar, 1) 1 0 !important; min-width: 0 !important; height: auto !important; max-width: none !important; margin: 0 !important; align-self: flex-start !important; position: relative; overflow: hidden; border-radius: var(--oo-radius-sm); } /* Plugin-/lazy-load-wrappers (Pinterest-span, media-link) blok op volledige tegel, anders erft de wrapper de uitgerekte 100%-hoogte. */ .oo-article .wp-block-gallery figure.wp-block-image > .ns-pinterest-image, .oo-article .wp-block-gallery figure.wp-block-image > a, .oo-article .wp-block-gallery figure.wp-block-image > span { display: block !important; height: 100% !important; width: 100% !important; } /* Foto vult zijn tegel; `aspect-ratio` (geërfd van de figure via --oo-ar) houdt `height:auto` betrouwbaar. object-fit:cover is dan een no-op — de tegel hééft immers exact de fotoverhouding. Marge 0 (anders erft de foto de content-img- marge). */ .oo-article .wp-block-gallery figure.wp-block-image img { width: 100% !important; height: auto !important; margin: 0 !important; aspect-ratio: var(--oo-ar) !important; object-fit: cover !important; display: block; border-radius: var(--oo-radius-sm); transition: transform .45s var(--oo-ease); } .oo-article .wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.05); } .oo-article .wp-block-gallery > figcaption { flex-basis: 100%; margin-top: .2rem; } /* --- Contactpagina: volle breedte, gebalanceerde twee koloms, grote kaart --- */ /* (Legacy .oo-contact-cols/.oo-contact-info-CSS voor de oude Gutenberg- contactpagina is verwijderd in 1.31.6 — de display:grid !important hield het formulier in de nieuwe template gevangen in een halve kolom.) */ /* ================================================================= CONTACT — template-contact.php ================================================================= */ /* Compacte hero zonder fotokop: kruimelpad + intro op zachte achtergrond. */ .oo-contact-hero .oo-breadcrumb { color: var(--oo-muted); } .oo-contact-hero .oo-breadcrumb a { color: var(--oo-forest-600); } .oo-contact-hero .oo-breadcrumb a:hover { color: var(--oo-rust-text); } .oo-contact-hero .oo-eyebrow { color: var(--oo-rust-text); } .oo-contact-hero h1 { margin: .4rem 0 .8rem; } .oo-contact-hero .oo-lead { margin: 0; } /* Tweekoloms: formulier links, gegevens rechts. align-items:stretch zodat beide kolommen even hoog zijn en de onderkanten netjes gelijk lopen. */ .oo-contact { display: grid; grid-template-columns: 1.05fr .9fr; gap: 2.4rem; align-items: stretch; } .oo-contact__aside { display: flex; flex-direction: column; } /* --- Formulier-kaart (plugin-onafhankelijk gestileerd) --- */ .oo-contact__form { background: var(--oo-card); border: 1px solid var(--oo-line); border-radius: var(--oo-radius); box-shadow: var(--oo-shadow-sm); padding: clamp(1.5rem, 3vw, 2.2rem); } .oo-contact__form-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 1.3rem; } /* Formulier-velden: één consistente, uitgelijnde stijl, ongeacht de plugin (CF7, Fluent Forms, WPForms, Gravity). We stylen op generieke elementen. */ .oo-contact__form-body :is(label) { display: block; font-family: var(--oo-sans); font-weight: 600; color: var(--oo-ink); margin: 0 0 .35rem; font-size: .95rem; } .oo-contact__form-body :is(p) { margin: 0 0 1.05rem; } .oo-contact__form-body :is( input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea ) { display: block; width: 100%; box-sizing: border-box; padding: .8em 1em; font-size: 1rem; font-family: var(--oo-sans); color: var(--oo-ink); background: var(--oo-cream); border: 1.5px solid var(--oo-line); border-radius: var(--oo-radius-sm); transition: border-color .18s var(--oo-ease), box-shadow .18s var(--oo-ease); } .oo-contact__form-body textarea { min-height: 150px; resize: vertical; line-height: 1.6; } .oo-contact__form-body :is(input, select, textarea):focus { outline: none; border-color: var(--oo-rust); box-shadow: 0 0 0 4px rgba(224,103,32,.22); } .oo-contact__form-body ::placeholder { color: var(--oo-muted); opacity: .7; } /* Verzendknop in huisstijl (CTA-oranje, pill). */ .oo-contact__form-body :is(input[type=submit], button[type=submit], button:not([type])) { display: inline-flex; align-items: center; gap: .55em; font-family: var(--oo-sans); font-weight: 650; font-size: .98rem; line-height: 1; padding: .95em 1.6em; border: 1.5px solid transparent; border-radius: 999px; background: var(--oo-cta); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(184,82,20,.30); transition: all .2s var(--oo-ease); width: auto; } .oo-contact__form-body :is(input[type=submit], button[type=submit], button:not([type])):hover { background: var(--oo-cta-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,82,20,.38); } /* --- Gegevens-kaart (rechts) --- */ /* Zelfde padding als de formulier-kaart zodat beide H2's op gelijke hoogte beginnen; titel ook in dezelfde grootte als de formulier-titel. */ .oo-contact-card { background: var(--oo-sand); border-radius: var(--oo-radius); padding: clamp(1.5rem, 3vw, 2.2rem); } .oo-contact-card__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 1.3rem; } .oo-contact-details { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .oo-contact-details li { display: flex; align-items: flex-start; gap: .8em; line-height: 1.5; } .oo-contact-details__icon { flex: none; width: 38px; height: 38px; border-radius: var(--oo-radius-xs); background: var(--oo-card); color: var(--oo-rust-text); display: grid; place-items: center; box-shadow: var(--oo-shadow-sm); } .oo-contact-details a { color: var(--oo-forest-600); font-weight: 600; } .oo-contact-details a:hover { color: var(--oo-rust-text); } /* KvK/BTW als icoon-regel: zelfde lettertype/grootte/kleur als de overige regels. */ .oo-contact-details__legal { color: inherit; font-size: inherit; } /* Verwijzing naar de FAQ (nieuwsbriefpagina) onder de gegevens-lijst. */ .oo-contact-card__faq { margin: 1.1rem 0 0; font-size: .92rem; } .oo-contact-card__faq a { color: var(--oo-forest-600); font-weight: 600; } .oo-contact-card__faq a:hover { color: var(--oo-rust-text); } .oo-contact-card__social { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(22,44,18,.12); } .oo-contact-card__social-label { display: block; font-family: var(--oo-sans); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; } /* Lichte variant van .oo-social voor lichte achtergronden. */ .oo-social--light a { border-color: rgba(22,44,18,.18); color: var(--oo-forest); background: var(--oo-card); } .oo-social--light a:hover { background: var(--oo-forest); color: #fff; border-color: var(--oo-forest); } /* --- Kaart onder de gegevens-kaart: vult de resthoogte zodat de onderkant gelijk loopt met de formulier-kaart links. --- */ .oo-contact-map { margin-top: 1.3rem; border-radius: var(--oo-radius); overflow: hidden; box-shadow: var(--oo-shadow-sm); border: 1px solid var(--oo-line); background: var(--oo-sand); flex: 1 1 auto; min-height: 260px; } .oo-contact-map iframe { display: block; width: 100%; height: 100%; } /* --- Direct-mailen-kaarten: hergebruik .oo-tool, mailadres als link-arrow. --- */ .oo-contact-topic .oo-link-arrow { font-size: .92rem; word-break: break-word; } /* --- Gravity Forms in huisstijl --------------------------------- GF laadt een eigen ("orbital") thema-CSS die velden eigen styling geeft. We scopen op .oo-contact__form-body .gform_wrapper voor genoeg specificiteit om die te overrulen. */ /* KERN-FIX (live gemeten op staging 2026-06-11): als de pagina-inhoud nog het oude tweekoloms-blok (.oo-contact-cols / wp-block-columns) om het formulier heeft staan, zit het formulier in een halve grid-kolom (265px i.p.v. 504px) en kan geen breedte het overschrijden. Sla dat oude blok plat binnen de form-body zodat het formulier de hele kaart vult — ook als de editor niet is uitgekleed tot enkel de shortcode. */ .oo-contact__form-body .wp-block-columns, .oo-contact__form-body .oo-contact-cols { display: block; } .oo-contact__form-body .wp-block-column { width: 100%; flex-basis: auto; } /* En de GF-wrapper/form zelf op volle breedte (vult nu de hele form-body). */ .oo-contact__form-body .gform_wrapper, .oo-contact__form-body .gform_wrapper form, .oo-contact__form-body .gform_wrapper .gform_body, .oo-contact__form-body .gform_wrapper .gform_fields { width: 100% !important; max-width: 100% !important; } /* Eén volle kolom: slaat een eventuele 2-koloms GF-layout plat zodat elk veld de volle breedte krijgt. De voor/achternaam-subvelden (eigen .ginput_complex) blijven naast elkaar staan. */ .oo-contact__form-body .gform_wrapper .gform_fields { gap: 1.05rem; grid-template-columns: 1fr; } .oo-contact__form-body .gform_wrapper .gfield { margin-bottom: 0; grid-column: 1 / -1; } .oo-contact__form-body .gform_wrapper .gfield_label { font-family: var(--oo-sans); font-weight: 600; color: var(--oo-ink); font-size: .95rem; margin: 0 0 .35rem; } .oo-contact__form-body .gform_wrapper .gfield_required { color: var(--oo-rust-text); } .oo-contact__form-body .gform_wrapper :is( input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], textarea, select ) { width: 100%; box-sizing: border-box; padding: .8em 1em; font-size: 1rem; font-family: var(--oo-sans); color: var(--oo-ink); background: var(--oo-cream); border: 1.5px solid var(--oo-line); border-radius: var(--oo-radius-sm); transition: border-color .18s var(--oo-ease), box-shadow .18s var(--oo-ease); } .oo-contact__form-body .gform_wrapper textarea { min-height: 150px; line-height: 1.6; } /* GF veld-grootte (Small/Medium/Large) negeren: velden vullen altijd de kaart. Extra .gfield + size-class hieronder verslaat GF's eigen input.medium-regel. */ .oo-contact__form-body .gform_wrapper .ginput_container, .oo-contact__form-body .gform_wrapper .ginput_complex { width: 100%; max-width: 100%; } .oo-contact__form-body .gform_wrapper .gfield :is(input, textarea, select), .oo-contact__form-body .gform_wrapper .gfield :is(input, textarea, select):is(.small, .medium, .large) { width: 100%; max-width: 100%; } .oo-contact__form-body .gform_wrapper :is(input, textarea, select):focus { outline: none; border-color: var(--oo-rust); box-shadow: 0 0 0 4px rgba(224,103,32,.22); } .oo-contact__form-body .gform_wrapper .gfield_description { color: var(--oo-muted); font-size: .85rem; margin-top: .35rem; } .oo-contact__form-body .gform_wrapper .gform_footer { margin: 1.4rem 0 0; padding: 0; } .oo-contact__form-body .gform_wrapper .gform_button { display: inline-flex; align-items: center; gap: .55em; font-family: var(--oo-sans); font-weight: 650; font-size: .98rem; line-height: 1; padding: .95em 1.6em; width: auto; border: 1.5px solid transparent; border-radius: 999px; background: var(--oo-cta); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(184,82,20,.30); transition: all .2s var(--oo-ease); } .oo-contact__form-body .gform_wrapper .gform_button:hover { background: var(--oo-cta-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(184,82,20,.38); } /* Validatie: GF's rood is fel — temper de rand en gebruik onze rust-tint. */ .oo-contact__form-body .gform_wrapper .gfield_error :is(input, textarea, select) { border-color: var(--oo-rust); } .oo-contact__form-body .gform_wrapper .validation_message { color: var(--oo-rust-text); font-size: .85rem; margin-top: .35rem; } .oo-contact__form-body .gform_wrapper .gform_validation_errors { background: var(--oo-rust-soft); border: 1px solid var(--oo-rust); border-radius: var(--oo-radius-sm); box-shadow: none; } /* GF-bevestiging na verzenden. */ .oo-contact__form-body .gform_confirmation_message { background: var(--oo-sand); border-radius: var(--oo-radius-sm); padding: 1.1rem 1.3rem; line-height: 1.6; } @media (max-width: 860px) { .oo-contact { grid-template-columns: 1fr; gap: 1.6rem; } }