/* ============================================================ mbs — typography.css Laag 2: alles wat WORDPRESS zelf genereert en het concept niet kent. Het concept (global.css) is leidend voor .h-sec / .lead / .eyebrow; hier staat uitsluitend redactionele content (the_content, .prose), WP-kernklassen en formulier-basis. Geen !important in deze laag. ============================================================ */ /* ── WP-kernklassen ─────────────────────────────────────── */ .screen-reader-text{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px; } .screen-reader-text:focus{ position:fixed;top:12px;left:12px;z-index:11001;width:auto;height:auto; clip:auto;clip-path:none;padding:12px 20px;background:var(--ink);color:#fff; font-size:12px;letter-spacing:.14em;text-transform:uppercase; } .skip-link{position:absolute;left:-9999px} .alignleft{float:left;margin:0 28px 20px 0} .alignright{float:right;margin:0 0 20px 28px} .aligncenter{margin-inline:auto} .alignwide,.alignfull{margin-inline:auto} .wp-caption{max-width:100%} .wp-caption-text,figcaption{ margin-top:10px;font-size:12px;font-weight:300;color:var(--mocha);line-height:1.6; } .sticky,.gallery-caption,.bypostauthor{display:block} /* WordPress zet dit op de zodra de adminbalk meedoet. */ body.admin-bar .site-top{top:32px} @media (max-width:782px){body.admin-bar .site-top{top:46px}} /* ── redactionele tekst (the_content / .prose) ──────────── */ .prose,.entry-content{ font-size:15.5px;font-weight:300;line-height:1.9;color:var(--ink); } .prose > *:first-child,.entry-content > *:first-child{margin-top:0} .prose > *:last-child,.entry-content > *:last-child{margin-bottom:0} .entry-content h2,.prose h2{ font-size:clamp(21px,2.3vw,28px);font-weight:300;letter-spacing:-.025em; line-height:1.2;margin:54px 0 16px;color:var(--ink); } .entry-content h3,.prose h3{ font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.01em; line-height:1.35;margin:34px 0 10px;color:var(--ink); } .entry-content h4,.prose h4{ font-size:14px;font-weight:600;letter-spacing:.04em;margin:26px 0 8px;color:var(--ink); } .entry-content p,.prose p{margin:0 0 18px} .entry-content strong,.prose strong,.entry-content b,.prose b{font-weight:600} .entry-content em,.prose em{font-style:italic} .entry-content a,.prose a{ color:var(--cocoa);text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .35s var(--ease); } .entry-content a:hover,.prose a:hover{background-size:0 1px;background-position:100% 100%} .entry-content ul,.prose ul,.entry-content ol,.prose ol{margin:0 0 20px;padding-left:0;list-style:none} .entry-content ol,.prose ol{counter-reset:mbs-ol} .entry-content li,.prose li{position:relative;padding-left:26px;margin:0 0 10px} .entry-content ul > li::before,.prose ul > li::before{ content:'';position:absolute;left:2px;top:.75em;width:9px;height:1px;background:var(--sand); } .entry-content ol > li,.prose ol > li{counter-increment:mbs-ol} .entry-content ol > li::before,.prose ol > li::before{ content:counter(mbs-ol);position:absolute;left:0;top:.05em; font-size:11px;font-weight:600;color:var(--sand);letter-spacing:.1em; } .entry-content li > ul,.prose li > ul,.entry-content li > ol,.prose li > ol{margin:10px 0 0} .entry-content blockquote,.prose blockquote{ margin:30px 0;padding:4px 0 4px 26px;border-left:1px solid var(--sand); font-size:17px;font-weight:200;font-style:italic;line-height:1.7;color:var(--ink); } .entry-content blockquote p:last-child,.prose blockquote p:last-child{margin-bottom:0} .entry-content hr,.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0} .entry-content img,.prose img{height:auto} .entry-content figure,.prose figure{margin:30px 0} .entry-content code,.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:var(--shell);padding:2px 6px; } .entry-content pre,.prose pre{ background:var(--shell);padding:20px;overflow:auto;font-size:13px;line-height:1.6; } .entry-content table,.prose table{ width:100%;border-collapse:collapse;margin:26px 0;font-size:14px; } .entry-content th,.prose th{ text-align:left;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--cocoa);padding:12px 14px;border-bottom:1px solid var(--line); } .entry-content td,.prose td{padding:13px 14px;border-bottom:1px solid var(--line-soft);font-weight:300} .entry-content tr:last-child td,.prose tr:last-child td{border-bottom:0} /* ── formulier-basis (het concept stylet .fld/.cform zelf) ─ */ input,select,textarea{font:inherit;color:inherit} input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password], input[type=number],input[type=search],input[type=date],select,textarea{ width:100%;padding:14px 16px;background:var(--white); border:1px solid var(--line);border-radius:var(--r); font-size:14px;font-weight:300;line-height:1.5; transition:border-color .3s var(--ease-s),background .3s var(--ease-s); } input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)} input::placeholder,textarea::placeholder{color:var(--mocha);opacity:.75} textarea{min-height:150px;resize:vertical} select{ appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23241805' stroke-width='1.3'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center; } label{font-size:12px;font-weight:500;letter-spacing:.04em} :focus-visible{outline:2px solid var(--cocoa);outline-offset:3px} /* ── paginering ─────────────────────────────────────────── */ .pager{ display:flex;align-items:center;justify-content:center;gap:6px; margin:56px 0 0;flex-wrap:wrap; } .pager .page-numbers{ min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center; padding:0 12px;border:1px solid var(--line);font-size:13px;font-weight:400; color:var(--ink);transition:border-color .3s var(--ease-s),background .3s var(--ease-s),color .3s var(--ease-s); } .pager .page-numbers:hover{border-color:var(--ink)} .pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff} .pager .page-numbers.dots{border-color:transparent} /* ── content-pagina zonder TOC (page.php fallback) ──────── */ .legal.legal--solo{grid-template-columns:minmax(0,1fr);max-width:920px;margin:0 auto} /* ── blog / archief (index.php fallback) ────────────────── */ .postlist{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,48px) clamp(20px,2vw,32px);padding:8px 0 8px; } .postcard{display:flex;flex-direction:column;gap:14px;color:var(--ink)} .postcard__media{ position:relative;overflow:hidden;background:var(--shell); aspect-ratio:4/3; } .postcard__media img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.1s var(--ease); } .postcard:hover .postcard__media img{transform:scale(1.045)} .postcard__meta{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha); } .postcard__title{ font-size:clamp(17px,1.5vw,20px);font-weight:400;line-height:1.32;letter-spacing:-.01em;margin:0; } .postcard__excerpt{font-size:14px;line-height:1.7;color:var(--mocha);margin:0} .postcard__more{ margin-top:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--cocoa);display:inline-flex;align-items:center;gap:8px; } .postcard__more::after{ content:'';width:18px;height:1px;background:currentColor; transition:width .4s var(--ease); } .postcard:hover .postcard__more::after{width:30px} @media (max-width:1000px){.postlist{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.postlist{grid-template-columns:minmax(0,1fr)}} /* ── gecentreerde sectiekop (concept had inline styles) ──── */ .sec__center{display:flex;flex-direction:column;align-items:center;text-align:center} .lead--c{margin-inline:auto;text-align:center} /* ── losse blokjes die in het concept inline-styles hadden ─ */ .seo__head{margin-bottom:40px} .brand__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} .nl__embed{margin:0 0 10px} .nl__msg{ display:none;margin:12px 0 0;font-size:13px;font-weight:300;line-height:1.7;color:#4A6139; } .nl__msg.is-on{display:block} .nl__msg.is-err{color:#7a2418} /* foutmelding-tegenhanger van .cform__ok */ .cform__err{ display:none;border:1px solid rgba(122,36,24,.35);padding:22px 24px;margin:0 0 26px; font-size:13.5px;font-weight:300;line-height:1.8;color:#7a2418;background:rgba(122,36,24,.05); } .cform__err.is-on{display:block} /* honeypot: nooit zichtbaar, nooit focusbaar */ .fld--hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── inline emoji uit oude productteksten ───────────────────────────────── Een deel van de productomschrijvingen bevat van s.w.org (ooit door de emoji-parser vastgelegd in de content). Zonder deze regel rendert zo'n SVG op ware grootte — een sterretje van 1000px in de Kenmerken-uitklap. Core geeft ze normaal inline-stijlen mee; die ontbreken hier omdat het gaat om opgeslagen HTML. */ img.emoji,img.wp-smiley{ display:inline-block!important;width:1em!important;height:1em!important; margin:0 .07em!important;padding:0!important;border:0!important; vertical-align:-.1em;background:none;box-shadow:none; }