/* Theme Name: Peek Theme URI: https://www.peekbv.nl/ Author: Peek BV Description: Block theme voor de Krantz-site van Peek BV: "De Collectie", dark-first studio. Werkt samen met de plugin peek-core (blocks, producten, Pia). Version: 0.1.0 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.1 License: Proprietary Text Domain: peek */ /* ---------- Basis ---------- */ :root{ --peek-m:56px; /* marge (designsysteem §3) */ --peek-e:var(--wp--custom--motion--e-adem, cubic-bezier(.22,1,.36,1)); color-scheme:dark; } @media (max-width:1099px){ :root{ --peek-m:32px; } } @media (max-width:699px){ :root{ --peek-m:16px; } } *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--wp--preset--color--studio); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--wp--preset--color--studio); color:var(--wp--preset--color--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; } :focus-visible{ outline:2px solid var(--wp--preset--color--orange); outline-offset:3px; border-radius:4px; } ::selection{ background:rgba(0,154,215,.45); color:#fff; } img{ max-width:100%; height:auto; } .screen-reader-text, .sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link:focus{ z-index:100000; } .peek-tbc{ font:400 12px/1.4 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); letter-spacing:.02em; font-style:normal; } /* De site is een doorlopende studio: geen automatische ruimte tussen de grote vlakken. */ .wp-site-blocks > *, .peek-main > *, .peek-main--studio .wp-block-post-content > *{ margin-block-start:0; margin-block-end:0; } .peek-main{ position:relative; } /* ---------- Kop ---------- */ .peek-header{ position:fixed; z-index:40; top:0; left:0; right:0; display:flex; align-items:center; gap:18px; padding:calc(22px + env(safe-area-inset-top)) var(--peek-m) 0; pointer-events:none; } .peek-header > *{ pointer-events:auto; } .peek-header::before{ content:""; position:absolute; inset:0 0 -18px; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s var(--peek-e); background:linear-gradient(180deg, rgba(4,5,6,.92) 0%, rgba(4,5,6,.78) 70%, rgba(4,5,6,0) 100%); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-mask:linear-gradient(#000 75%, transparent); mask:linear-gradient(#000 75%, transparent); } .peek-header.is-solid::before{ opacity:1; } body:not(.home):not(.single-product) .peek-header::before{ opacity:1; } .admin-bar .peek-header{ top:32px; } @media (max-width:782px){ .admin-bar .peek-header{ top:46px; } } .peek-logo{ display:block; width:104px; line-height:0; color:#fff; } .peek-logo svg{ width:100%; height:auto; display:block; } .peek-sub{ font:500 12px/1.4 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-2); padding-left:18px; border-left:1px solid rgba(150,205,255,.16); } .peek-sp{ flex:1; } .peek-nav{ display:flex; gap:4px; } .peek-nav a{ font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-2); text-decoration:none; padding:10px 12px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; transition:color var(--wp--custom--motion--d-2, .28s), background var(--wp--custom--motion--d-2, .28s); } .peek-nav__short{ display:none; } /* Menubalk (07-10-2026, "Jouw ruimte" erbij): één rij pas vanaf 1280 px; daaronder menuknop met panel (alle items, ook Rookring). 1280-1599 px: compacte balk, "AR" i.p.v. "Augmented Reality" (lange naam blijft voor schermlezers), zonder "Krantz"-sublabel. Vanaf 1600 px de lange naam, vanaf 1800 px ook Rookring in de balk. */ @media (min-width:1280px) and (max-width:1599px){ .peek-nav__short{ display:inline; } .peek-nav__long{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } } .peek-nav a.peek-nav__wide{ } @media (min-width:1280px){ .peek-nav a.peek-nav__game{ margin-left:14px; } } @media (min-width:1280px) and (max-width:1799px){ .peek-nav a.peek-nav__wide{ display:none; } } .peek-nav__beta{ margin-left:4px; padding:1px 5px; border:1px solid currentColor; border-radius:999px; font-size:10px; letter-spacing:.08em; } .peek-nav a:hover, .peek-nav a[aria-current="page"]{ color:var(--wp--preset--color--ink); background:rgba(8,10,12,.45); } /* Taalschakelaar NL / EN (Polylang). Klein, naast het menu; 44px raakvlak. */ .peek-lang ul{ display:flex; gap:2px; margin:0; padding:0 0 0 10px; list-style:none; border-left:1px solid rgba(150,205,255,.16); } .peek-lang a{ font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; color:var(--wp--preset--color--ink-3); text-decoration:none; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; transition:color var(--wp--custom--motion--d-2, .28s); } .peek-lang a:hover{ color:var(--wp--preset--color--ink); } .peek-lang a[aria-current="true"]{ color:var(--wp--preset--color--ink); } .peek-lang a[aria-current="true"]::after{ content:""; display:block; width:4px; height:4px; margin-left:6px; border-radius:50%; background:var(--wp--preset--color--holo); } .peek-lang a:focus-visible, .peek-nav a:focus-visible{ outline:2px solid var(--wp--preset--color--holo); outline-offset:2px; } .pf-lang ul{ padding:0; border:0; margin-top:6px; } .pc-merk{ margin:0; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); } /* Op scènepagina's staan rechts de hoofdstukken of de scène-knoppen; het menu blijft klein. */ @media (max-width:760px){ .peek-sub{ display:none; } .peek-logo{ width:84px; } .peek-header{ padding-top:calc(16px + env(safe-area-inset-top)); } } .peek-logo{ flex-shrink:0; min-height:24px; } /* Smalle telefoons: Contact staat ook in de voet (#contact); het logo en de taalschakelaar krijgen voorrang. */ @media (max-width:420px){ .peek-header{ gap:10px; } } /* ---------- Gewone pagina's ---------- */ .peek-main--page{ padding:clamp(120px, 16vh, 180px) var(--peek-m) clamp(64px, 10vw, 144px); min-height:70vh; } .peek-main--page > .wp-block-post-title, .peek-main--page h1{ margin:0 0 24px; } .peek-main--page h1 em, .peek-section h2 em, .pc-head h1 em{ font-style:italic; color:var(--wp--preset--color--holo); } .peek-main--page p{ color:var(--wp--preset--color--ink-2); max-width:62ch; } /* ---------- De Collectie (archief) ---------- */ .peek-collectie{ max-width:1480px; margin:0 auto; } .pc-kicker{ font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--holo); margin:0 0 12px; } .pc-head h1{ font-size:var(--wp--preset--font-size--display); } .pc-intro{ color:var(--wp--preset--color--ink-2); max-width:52ch; } .pc-grid{ list-style:none; margin:clamp(40px, 6vw, 96px) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1px; background:var(--wp--preset--color--line); border:1px solid var(--wp--preset--color--line); } .pc-grid > li{ margin:0 !important; background:var(--wp--preset--color--studio); } .pc-card{ position:relative; height:100%; padding:28px 24px 26px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; background:radial-gradient(ellipse at 50% 0%, rgba(0,154,215,.10), transparent 60%); transition:background var(--wp--custom--motion--d-3, .56s) var(--peek-e); } .pc-card:hover{ background:radial-gradient(ellipse at 50% 0%, rgba(0,154,215,.22), transparent 70%); } .pc-title{ margin:0 !important; font-size:clamp(40px, 4vw, 64px) !important; line-height:.95 !important; letter-spacing:-.02em; } .pc-title a{ text-decoration:none; color:var(--wp--preset--color--ink); } .pc-title a::after{ content:""; position:absolute; inset:0; } /* hele kaart klikbaar */ .pc-excerpt, .pc-excerpt p{ margin:0; color:var(--wp--preset--color--ink-2); font-size:14px; line-height:1.45; } .pc-excerpt .wp-block-post-excerpt__more-text{ display:none; } .pc-terms{ margin:0; } .pc-terms a{ color:var(--wp--preset--color--ink-3); text-decoration:none; position:relative; z-index:1; } /* Collectie: uitgelicht, groepen per familie, filters (block peek/collectie) */ .pc-filters{ margin:clamp(28px, 4vw, 56px) 0 0; display:flex; flex-direction:column; gap:10px; } .pc-frow{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .pc-flabel{ font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); min-width:120px; } .pc-chip{ appearance:none; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--wp--preset--color--line); background:transparent; cursor:pointer; color:var(--wp--preset--color--ink-2); font:500 12px/1 var(--wp--preset--font-family--text); transition:color .2s, background .2s, border-color .2s; } .pc-chip:hover{ color:var(--wp--preset--color--ink); border-color:rgba(143,216,255,.4); } .pc-chip[aria-pressed="true"]{ color:#02121B; background:var(--wp--preset--color--holo); border-color:var(--wp--preset--color--holo); } .pc-chip:focus-visible{ outline:2px solid var(--wp--preset--color--orange); outline-offset:2px; } .pc-count{ margin:4px 0 0; font:400 12px/1.4 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } .pc-group{ margin-top:clamp(40px, 6vw, 88px); } .pc-group[hidden], .pc-item[hidden]{ display:none; } .pc-gh{ margin:0 0 16px; font:500 12px/1.3 var(--wp--preset--font-family--mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--holo); } .pc-gn{ color:var(--wp--preset--color--ink-3); margin-left:6px; } .pc .pc-grid{ margin-top:0; } .pc-grid--featured{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .pc-grid--featured .pc-card{ min-height:280px; background:radial-gradient(ellipse at 50% 0%, rgba(0,154,215,.18), transparent 65%); } .pc-item{ margin:0; background:var(--wp--preset--color--studio); } .pc-title--long{ font-size:clamp(24px, 2.2vw, 34px) !important; line-height:1.05 !important; overflow-wrap:anywhere; } .pc-terms{ font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); } .pc-empty{ margin-top:32px; color:var(--wp--preset--color--ink-2); } @media (max-width:600px){ .pc-flabel{ min-width:100%; } .pc-grid, .pc-grid--featured{ grid-template-columns:1fr 1fr; } .pc-card{ min-height:180px; padding:20px 16px; } .pc-title{ font-size:32px !important; } .pc-title--long{ font-size:20px !important; } } /* ---------- Secties onder een scène (productpagina, homepage) ---------- */ .peek-section{ position:relative; z-index:3; background:var(--wp--preset--color--studio); color:var(--wp--preset--color--ink); padding:clamp(64px, 9vw, 144px) var(--peek-m); border-top:1px solid var(--wp--preset--color--line); } .peek-section > *{ max-width:1480px; margin-left:auto !important; margin-right:auto !important; } .peek-section .peek-kicker{ font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--holo); margin-bottom:12px; } .peek-section h2{ margin:0 0 20px; max-width:18ch; } .peek-section p{ color:var(--wp--preset--color--ink-2); max-width:62ch; } .peek-section .peek-src, .peek-section .has-small-font-size{ font:400 12px/1.5 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } /* Drie noten: compacte kolommen */ .peek-notes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 48px); margin-top:32px; } .peek-notes > *{ margin:0 !important; border-top:1px solid var(--wp--preset--color--line); padding-top:16px; } .peek-notes h3{ font-size:var(--wp--preset--font-size--h-3); margin:0 0 8px; } .peek-notes h3 small{ display:block; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); margin-bottom:6px; } .peek-notes p{ font-size:15px; margin:0; } @media (max-width:899px){ .peek-notes{ grid-template-columns:1fr; } } /* Maten op schaal */ .peek-sizes{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(10px, 2vw, 28px); margin:28px 0; list-style:none; padding:0; } .peek-sizes li{ display:flex; flex-direction:column; align-items:center; gap:10px; font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.08em; color:var(--wp--preset--color--ink-2); } .peek-sizes li::before{ content:""; width:calc(var(--dn) * .32px); height:calc(var(--dn) * .32px); border-radius:50%; background:repeating-conic-gradient(from 8deg, rgba(201,204,207,.55) 0 5deg, rgba(4,5,6,.9) 5deg 15deg); box-shadow:0 0 0 1px rgba(201,204,207,.45), 0 0 24px rgba(0,154,215,.28), inset 0 0 0 calc(var(--dn) * .045px) rgba(201,204,207,.35); } /* Tabellen (verwant, referenties) */ .peek-section .wp-block-table{ margin:28px 0 0; overflow-x:auto; } .peek-section .wp-block-table table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; } .peek-section .wp-block-table th, .peek-section .wp-block-table td{ border:0; border-bottom:1px solid var(--wp--preset--color--line); padding:12px 16px 12px 0; text-align:left; vertical-align:baseline; } .peek-section .wp-block-table thead{ border-bottom:0; } .peek-section .wp-block-table thead th{ font:500 12px/1.2 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); } .peek-section .wp-block-table td{ color:var(--wp--preset--color--ink-2); } .peek-section .wp-block-table td:first-child{ color:var(--wp--preset--color--ink); } .peek-section .wp-block-table td a{ color:var(--wp--preset--color--ink); text-decoration-color:rgba(239,146,33,.6); text-underline-offset:3px; } .peek-section .wp-block-table figcaption{ font:400 12px/1.5 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); text-align:left; margin-top:12px; } .peek-two{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:24px clamp(24px, 4vw, 64px); align-items:start; } .peek-two > *{ margin:0 !important; } @media (max-width:899px){ .peek-two{ grid-template-columns:1fr; } .peek-section{ padding:64px 16px; } } .peek-section .wp-block-buttons{ margin-top:24px; } .peek-section .wp-block-button__link{ min-height:48px; display:inline-flex; align-items:center; padding:0 22px; } /* ---------- Voet ---------- */ .peek-footer{ position:relative; z-index:5; background:var(--wp--preset--color--studio); color:var(--wp--preset--color--ink-3); font-size:13px; line-height:1.55; padding:clamp(48px, 7vw, 96px) var(--peek-m) calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--wp--preset--color--line); } .pf-grid{ display:grid; grid-template-columns:2fr 2fr 1fr; gap:32px; max-width:1480px; margin:0 auto 40px; } .pf-logo{ width:132px; } .pf-payoff{ margin:12px 0 0; font:400 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--wp--preset--color--orange); } .pf-address{ font-style:normal; color:var(--wp--preset--color--ink-2); } .pf-address strong{ color:var(--wp--preset--color--ink); font-weight:500; } .pf-address a, .pf-nav a{ color:var(--wp--preset--color--ink); text-decoration:none; display:inline-block; min-height:24px; } .pf-address a:hover, .pf-nav a:hover{ color:var(--wp--preset--color--orange); } .pf-nav{ display:flex; flex-direction:column; gap:10px; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; } .pf-legal{ max-width:1480px; margin:0 auto; padding-top:24px; border-top:1px solid var(--wp--preset--color--line); } .pf-legal p{ margin:0 0 6px; max-width:90ch; } .pf-rep strong{ color:var(--wp--preset--color--ink-2); font-weight:500; } @media (max-width:760px){ .pf-grid{ grid-template-columns:1fr; } } /* ---------- Rust ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ scroll-behavior:auto !important; } } @media print{ .peek-header, #gl, .fb, .rs-tools, .pia, .chapters, .legend{ display:none !important; } body, html{ background:#fff; color:#111; } } /* Collectie: productfoto als flacon op een lichtbak, of een silhouet als er nog geen foto is. */ .pc-photo{ margin:0 0 auto; aspect-ratio:4 / 3; border-radius:10px; overflow:hidden; background:radial-gradient(120% 95% at 33% 30%, #23272c, #0e1012 62%, #090a0c); /* donkere studio, gelijk aan design/foto/donker (besluit Ruud 01-10-2026) */ box-shadow:0 18px 36px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(236,235,231,.10); transition:transform .6s var(--peek-e, ease); } .pc-photo__img{ display:block; width:100%; height:100%; object-fit:cover; } /* het studiobeeld is 4:3 en heeft zijn eigen achtergrond */ .pc-photo--sil{ background:radial-gradient(80% 80% at 40% 25%, rgba(236,235,231,.07), rgba(4,5,6,0) 70%); box-shadow:none; color:rgba(236,235,231,.26); padding:12% 22%; } .pc-photo__sil{ display:block; width:100%; height:100%; } .pc-card:hover .pc-photo{ transform:translateY(-3px); } .pc-card:hover .pc-photo--sil{ color:rgba(143,216,255,.45); } @media (prefers-reduced-motion: reduce){ .pc-photo{ transition:none; } .pc-card:hover .pc-photo{ transform:none; } } .pc-card .pc-photo + .pc-terms, .pc-card .pc-photo + .pc-title{ margin-top:18px !important; } /* Conceptpagina's (privacy, cookies) en interne notities */ .peek-concept{ display:inline-block; margin:0 0 28px !important; padding:6px 12px; border:1px solid rgba(239,146,33,.5); border-radius:999px; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.08em; text-transform:uppercase; color:#E9B77A !important; } .peek-intern{ display:inline-block; padding:2px 6px; border:1px dashed rgba(239,146,33,.5); border-radius:4px; font:400 12px/1.4 var(--wp--preset--font-family--mono); color:#E9B77A; } .peek-main--page h2{ margin:48px 0 12px; font-size:clamp(24px, 2.4vw, 34px); } .peek-main--page h3{ margin:28px 0 8px; font-size:18px; } .peek-main--page ul, .peek-main--page ol{ color:var(--wp--preset--color--ink-2); max-width:62ch; } .peek-main--page table{ font-size:14px; } .peek-main--page a{ color:var(--wp--preset--color--ink); } .pf-legal .pf-links{ margin:4px 0 8px; } .pf-links a{ color:inherit; display:inline-block; padding:4px 0; min-height:24px; text-underline-offset:2px; } .pf-legal .pf-credits{ margin-top:12px; } .pf-credits a{ color:inherit; display:inline-block; padding:4px 0; min-height:24px; text-underline-offset:2px; } .pf-credits{ opacity:.85; } /* Sinds 1949: tijdlijn met kleine kaders (de lijn is het verhaal, de kaders blijven compact) */ .ph-head{ padding-top:clamp(120px, 16vh, 180px) !important; } .ph-h1{ margin:8px 0 16px !important; font-size:clamp(44px, 6vw, 96px) !important; line-height:.95 !important; letter-spacing:-.02em; } .ph-h1 em, .pt-h em{ font-style:italic; color:var(--wp--preset--color--holo); } .ph-intro{ max-width:52ch; color:var(--wp--preset--color--ink-2); font-size:clamp(16px, 1.3vw, 19px); } .peek-timeline{ list-style:none; margin:0 auto; padding-left:var(--peek-m) !important; padding-right:var(--peek-m) !important; max-width:1100px; position:relative; } .peek-timeline::before{ content:""; position:absolute; top:0; bottom:0; left:calc(var(--peek-m) + 92px); width:1px; background:linear-gradient(var(--wp--preset--color--line), rgba(0,154,215,.5), var(--wp--preset--color--line)); } .pt-i{ display:grid; grid-template-columns:92px minmax(0, 560px); gap:0 32px; margin:0 0 clamp(40px, 6vw, 72px); position:relative; } .pt-i::before{ content:""; position:absolute; left:88px; top:10px; width:9px; height:9px; border-radius:50%; background:#009AD7; box-shadow:0 0 12px rgba(0,154,215,.7); } .pt-y{ margin:0 !important; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--ink); padding-top:6px; text-align:right; padding-right:14px; } .pt-card{ border:1px solid var(--wp--preset--color--line); border-radius:12px; padding:16px 18px; background:linear-gradient(180deg, rgba(14,17,20,.6), rgba(8,10,12,.4)); } .pt-card p{ margin:0 0 10px; color:var(--wp--preset--color--ink-2); font-size:15px; line-height:1.55; max-width:60ch; } .pt-name, .pt-kader{ font:500 12px/1.4 var(--wp--preset--font-family--mono) !important; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--ink-3) !important; } .pt-name{ color:#8FD8FF !important; margin-bottom:4px !important; } .pt-h{ margin:6px 0 10px !important; font-size:clamp(24px, 2.4vw, 34px) !important; line-height:1.05 !important; } .pt-links{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px !important; } .pt-links a{ color:var(--wp--preset--color--ink); min-height:24px; } .pt-btn{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid var(--wp--preset--color--line); border-radius:999px; text-decoration:none; } .pt-quote blockquote{ margin:0; font:italic 400 clamp(20px, 2vw, 28px)/1.3 var(--wp--preset--font-family--display); color:var(--wp--preset--color--ink); } .pt-quote cite{ display:block; margin-top:10px; font:400 12px/1.4 var(--wp--preset--font-family--mono); font-style:normal; color:var(--wp--preset--color--ink-3); } .pt-quote::before{ background:transparent; border:1px solid #009AD7; box-shadow:none; } .ph-slot{ max-width:760px; margin:0 auto; padding:0 var(--peek-m) clamp(48px, 8vw, 96px); } .ph-slot p{ color:var(--wp--preset--color--ink-2); font-size:17px; } .peek-more a{ font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink); display:inline-block; padding:8px 0; } @media (max-width:699px){ .peek-timeline::before{ left:calc(var(--peek-m) + 4px); } .pt-i{ grid-template-columns:1fr; padding-left:24px; } .pt-i::before{ left:0; } .pt-y{ text-align:left; padding:0 0 8px; } } /* Collectie: Pia-beeld als hoofdbeeld, de productfoto bij hover of focus */ .pc-photo--pia{ position:relative; background:#0b0e11; } .pc-photo__pia{ display:block; width:100%; height:100%; object-fit:cover; } .pc-photo__alt{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--peek-e, ease); background:#0e1012; } .pc-card:hover .pc-photo__alt, .pc-card:focus-within .pc-photo__alt{ opacity:1; } @media (prefers-reduced-motion: reduce){ .pc-photo__alt{ transition:none; } } /* Collectie-filter: twee niveaus; op mobiel een horizontaal scrollbare rij */ .pc-frow--sub{ padding-left:14px; border-left:1px solid var(--wp--preset--color--line); } .pc-frow--sub[hidden]{ display:none; } .pc-frow--sub .pc-chip{ min-height:32px; font-size:12px; } @media (max-width:760px){ .pc-frow{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-right:calc(-1 * var(--peek-m)); padding-right:calc(var(--peek-m) + 28px); position:relative; } /* QA 02-10 (bevinding 8): fade en pijl alleen zolang er rechts meer chips zijn; collectie.js zet .is-more. */ .pc-frow.is-more{ -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%); } .pc-frow.is-more::after{ content:"\203A"; position:sticky; right:0; flex:none; align-self:center; margin-left:-20px; width:20px; text-align:right; font:400 20px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--holo); pointer-events:none; } .pc-frow::-webkit-scrollbar{ display:none; } .pc-chip{ flex:none; } .pc-frow .pc-flabel{ flex:none; min-width:0; } /* borging K2: het label kromp tot 0 en viel achter de eerste chip */ .pc-frow--sub{ padding-left:10px; } } /* Hoofdmenu (30-09-2026, WCAG 1.4.10): boven 900 px één rij; daaronder een menuknop met een panel. .peek-menu omvat het menu en de taalwissel; op desktop is het een doorzichtige wrapper (display:contents). */ .peek-menu{ display:contents; } .peek-nav a{ flex:none; white-space:nowrap; } .peek-menu-btn{ display:none; } /* Zoeken (06-10-2026, inc/zoeken.php): icoon naast het menu, 44 px raakvlak; het label is er voor schermlezers. */ .peek-zoek-btn{ display:inline-flex; align-items:center; justify-content:center; flex:none; order:-1; min-width:44px; min-height:44px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--wp--preset--color--ink-2); cursor:pointer; transition:color var(--wp--custom--motion--d-2, .28s), background var(--wp--custom--motion--d-2, .28s); } .peek-zoek-btn:hover, .peek-zoek-btn[aria-expanded="true"]{ color:var(--wp--preset--color--ink); background:rgba(8,10,12,.45); } .peek-zoek-btn:focus-visible{ outline:2px solid var(--wp--preset--color--holo); outline-offset:2px; } .peek-zoek-btn__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .peek-header .peek-zoek-btn{ order:0; } @media (max-width:1279px){ .peek-header .peek-zoek-btn{ margin-right:2px; } } @media (max-width:1599px){ .peek-sub{ display:none; } .peek-nav a{ padding:10px 9px; letter-spacing:.1em; } } @media (max-width:1279px){ .peek-header{ flex-wrap:wrap; row-gap:0; } .peek-menu-btn{ display:inline-flex; align-items:center; gap:10px; min-width:44px; min-height:44px; padding:10px 12px; margin-right:-12px; border:0; border-radius:999px; background:transparent; color:var(--wp--preset--color--ink); cursor:pointer; font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; } .peek-menu-btn:focus-visible{ outline:2px solid var(--wp--preset--color--holo); outline-offset:2px; } .peek-menu-btn__bars{ display:grid; gap:4px; width:18px; } .peek-menu-btn__bars i{ display:block; height:1.5px; background:currentColor; border-radius:1px; transition:transform .28s var(--peek-e), opacity .28s var(--peek-e); } .peek-menu-btn[aria-expanded="true"] .peek-menu-btn__bars i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .peek-menu-btn[aria-expanded="true"] .peek-menu-btn__bars i:nth-child(2){ opacity:0; } .peek-menu-btn[aria-expanded="true"] .peek-menu-btn__bars i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } /* Het panel: onder de kopregel, volle breedte, eigen donkere achtergrond. Dicht = display:none (ook zonder script blijft het menu bereikbaar: dan is het gewoon open). */ .peek-menu{ display:flex; flex-direction:column; flex-basis:100%; width:100%; margin:12px 0 0; padding:8px 4px calc(16px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 150px); overflow-y:auto; border-top:1px solid rgba(150,205,255,.16); background:rgba(4,5,6,.96); } .peek-header.js .peek-menu:not(.is-open){ display:none; } .peek-header.js.is-open::before{ opacity:1; } .peek-header.js .peek-menu.is-open{ animation:peek-menu-in .32s var(--peek-e) both; } @keyframes peek-menu-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .peek-nav{ display:flex; flex-direction:column; gap:2px; overflow:visible; } .peek-nav a{ min-height:48px; padding:12px 14px; font-size:12px; border-radius:10px; white-space:normal; } .peek-menu .peek-lang ul{ border:0; padding:10px 6px 0; margin-top:6px; border-top:1px solid rgba(150,205,255,.16); } .peek-menu .peek-lang a{ min-width:56px; min-height:44px; font-size:12px; } .peek-menu{ overscroll-behavior:contain; } } /* Tablet en VR-bril (Ruud 07-10-2026: in de Vive-browser lukte scrollen in het panel slecht): twee kolommen, zodat alles zonder scrollen past. */ @media (min-width:600px) and (max-width:1279px){ .peek-nav{ display:grid; grid-template-columns:1fr 1fr; column-gap:8px; } } @media (prefers-reduced-motion: reduce){ .peek-header.js .peek-menu.is-open, .peek-menu-btn__bars i{ animation:none; transition:none; } } /* Inhoudspagina's (luchtprincipes, ruimtes, referenties, consult, downloads, contact, over peek) */ .ps-section{ max-width:1180px; margin:0 auto; } .ps-section > .wp-block-heading, .ps-section h2{ max-width:26ch; } .ps-notes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin:20px 0; } .ps-note, .ps-kader{ border:1px solid var(--wp--preset--color--line); border-radius:12px; padding:14px 16px; background:linear-gradient(180deg, rgba(14,17,20,.6), rgba(8,10,12,.4)); } .ps-note h3{ margin:0 0 6px !important; font:500 12px/1.3 var(--wp--preset--font-family--mono) !important; letter-spacing:.12em; text-transform:uppercase; color:#8FD8FF; } .ps-note p, .ps-kader p, .ps-kader li{ margin:0; color:var(--wp--preset--color--ink-2); font-size:14.5px; line-height:1.5; } .ps-kader{ max-width:620px; margin:16px 0; } .ps-kader ul{ margin:6px 0 0; padding-left:18px; } .ps-kt{ font:500 12px/1.3 var(--wp--preset--font-family--mono) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--ink-3) !important; margin-bottom:6px !important; } .ps-list{ max-width:68ch; padding-left:18px; color:var(--wp--preset--color--ink-2); } ol.ps-list li::marker{ font:500 12px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } .ps-kern{ font:400 clamp(28px, 4vw, 44px)/1.15 var(--wp--preset--font-family--display, serif); max-width:22ch; margin:24px 0 !important; color:var(--wp--preset--color--ink); } .ps-list li{ margin:0 0 10px; } .ps-links{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; } .ps-links a, .ps-section a{ color:var(--wp--preset--color--ink); text-underline-offset:3px; } .ps-scene{ margin-top:18px !important; } .ps-scene a{ font:500 12px/1 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:#8FD8FF; display:inline-block; padding:10px 0; } .ps-section .wp-block-table{ overflow-x:auto; } .ps-section table{ font-size:14px; min-width:560px; } /* Terugbelformulier (consult) en klik-om-te-laden-kaart (contact), 30-09-2026 */ .peek-cb{ display:grid; gap:14px; max-width:520px; margin:18px 0 0; } .peek-cb__f{ display:grid; gap:6px; margin:0; } .peek-cb label{ font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-2); } .peek-cb input, .peek-cb textarea{ font:inherit; font-size:16px; color:var(--wp--preset--color--ink); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.5); border-radius:10px; padding:12px 14px; width:100%; box-sizing:border-box; } /* rand >= 3:1 (WCAG 1.4.11) */ .peek-cb input:focus-visible, .peek-cb textarea:focus-visible{ outline:2px solid #009AD7; outline-offset:2px; border-color:transparent; } .peek-cb textarea::placeholder{ color:var(--wp--preset--color--ink-3); } .peek-cb__hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } .peek-cb__status{ min-height:1.4em; margin:0; color:var(--wp--preset--color--ink-2); } /* Borging B5 (02-10-2026): foutmelding per veld (assets/terugbellen.js zet aria-invalid en aria-describedby). */ .peek-cb__err{ margin:0; font:400 13px/1.4 var(--wp--preset--font-family--text, inherit); letter-spacing:0; text-transform:none; color:var(--wp--preset--color--orange, #EF9221); } .peek-cb__err:empty{ display:none; } .peek-cb [aria-invalid="true"]{ border-color:var(--wp--preset--color--orange, #EF9221); } .peek-cb.is-sent .peek-cb__f, .peek-cb.is-sent button{ opacity:.45; } .peek-map{ position:relative; aspect-ratio:16/9; max-width:820px; margin:16px 0 0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:radial-gradient(120% 90% at 30% 20%, rgba(0,154,215,.14), rgba(8,10,12,.6)); display:grid; place-content:center; justify-items:center; gap:10px; padding:16px; text-align:center; } .peek-map .peek-src{ max-width:34em; } .peek-map.is-loaded{ padding:0; display:block; } .peek-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.3) contrast(1.05); } /* Collectie: lijnen per kaart in plaats van een grijze rasterachtergrond, zodat een onvolle laatste rij geen grijs vlak geeft (30-09-2026) */ .pc-grid, .pc-grid--featured{ background:none; border:0; gap:1px; padding:1px; } .pc-grid > li, .pc-item{ box-shadow:0 0 0 1px var(--wp--preset--color--line); } /* Compacter (Ruud 30-09-2026: "veel zwarte vlakken, dit moet compacter"). Ruwweg de helft van de witruimte tussen secties. */ .peek-section{ padding-top:clamp(36px, 4.5vw, 72px); padding-bottom:clamp(36px, 4.5vw, 72px); } .peek-section + .peek-section, .ps-section + .ps-section{ padding-top:clamp(28px, 3.5vw, 56px); } .peek-section .peek-section{ padding-left:0; padding-right:0; } .ph-head{ padding-top:clamp(104px, 12vh, 140px) !important; padding-bottom:clamp(20px, 3vw, 40px) !important; } .peek-main--page{ padding-top:clamp(96px, 12vh, 140px); padding-bottom:clamp(40px, 5vw, 80px); min-height:0; } .peek-section h2{ margin-bottom:14px; } .peek-section .wp-block-table{ margin-top:18px; } @media (max-width:899px){ .peek-section{ padding:40px 16px; } .peek-section + .peek-section{ padding-top:32px; } } /* Vangnet (30-09-2026): koppen in inhoudsblokken op sectiemaat. Het thema verwees naar --font-size--h2, WordPress maakt daar --h-2 van. */ .peek-section h2.wp-block-heading, .ps-section h2{ font-size:var(--wp--preset--font-size--h-2, clamp(30px, 3.4vw, 52px)); line-height:1.08; } /* ---------- Overgang collectie → product (cross-document View Transitions, lab-overgang 30-09-2026) ---------- Opt-in alleen zonder bewegingsvoorkeur "minder"; browsers zonder ondersteuning navigeren gewoon. De namen "foto" en "code" zet inc/overgang.php (peek-core) alleen op de aangeklikte kaart; op de productpagina staan ze op het productbeeld en de h1 (rooster-scene). */ @media (prefers-reduced-motion: no-preference){ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.45s; animation-timing-function:var(--peek-e); } ::view-transition-group(foto), ::view-transition-group(code){ animation-duration:.72s; animation-timing-function:var(--peek-e); } ::view-transition-old(foto), ::view-transition-new(foto){ height:100%; width:100%; object-fit:cover; overflow:clip; } ::view-transition-old(code){ animation:peek-vt-uit .3s var(--peek-e) both; } ::view-transition-new(code){ animation:peek-vt-in .45s .12s var(--peek-e) both; } } @keyframes peek-vt-uit{ to{ opacity:0; } } @keyframes peek-vt-in{ from{ opacity:0; } } /* ---------- Grenzen-schuif in De Collectie (lab-grenzen, akkoord Ruud 30-09-2026) ---------- */ .pc-limits{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px 28px; align-items:end; margin-top:8px; padding:16px 18px 12px; border:1px solid var(--wp--preset--color--line); border-radius:14px; background:linear-gradient(180deg, rgba(14,17,20,.6), rgba(8,10,12,.4)); } .pc-slider{ min-width:0; } .pc-slider label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); } .pc-slider output{ font:400 clamp(24px, 2.2vw, 34px)/1 var(--wp--preset--font-family--display, var(--wp--preset--font-family--serif)); color:var(--wp--preset--color--ink); letter-spacing:0; text-transform:none; } .pc-slider output small{ font:400 12px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-2); margin-left:4px; } .pc-slider input[type=range]{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; margin:2px 0 0; background:transparent; cursor:pointer; } .pc-slider input[type=range]::-webkit-slider-runnable-track{ height:2px; background:linear-gradient(90deg, var(--wp--preset--color--holo) var(--pct, 0%), var(--wp--preset--color--line) var(--pct, 0%)); border-radius:1px; } .pc-slider input[type=range]::-moz-range-track{ height:2px; background:var(--wp--preset--color--line); border-radius:1px; } .pc-slider input[type=range]::-moz-range-progress{ height:2px; background:var(--wp--preset--color--holo); } .pc-slider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-10px; border-radius:50%; background:var(--wp--preset--color--ink); border:1px solid rgba(143,216,255,.5); box-shadow:0 0 0 6px rgba(0,154,215,.14), 0 0 18px rgba(0,154,215,.45); transition:box-shadow .3s var(--peek-e); } .pc-slider input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--wp--preset--color--ink); border:1px solid rgba(143,216,255,.5); box-shadow:0 0 0 6px rgba(0,154,215,.14), 0 0 18px rgba(0,154,215,.45); } .pc-slider input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 9px rgba(0,154,215,.2), 0 0 26px rgba(0,154,215,.6); } .pc-slider input[type=range]:focus-visible{ outline:none; } .pc-slider input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--wp--preset--color--orange); outline-offset:3px; } .pc-slider input[type=range]:focus-visible::-moz-range-thumb{ outline:2px solid var(--wp--preset--color--orange); outline-offset:3px; } .pc-scale{ display:flex; justify-content:space-between; margin-top:-6px; font:400 12px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } .pc-limits__actions{ align-self:end; padding-bottom:14px; } .pc-limits[hidden]{ display:none; } /* alleen bij "Alles" of Luchtroosters (A1) */ .pc-limits__only{ grid-column:1 / -1; margin:0 0 -4px; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--holo); } .pc-frow--ruimte{ padding-top:4px; } .pc-frow--ruimte .pc-flabel{ min-width:0; margin-right:4px; } .pc-chip[hidden]{ display:none; } @media (max-width:899px){ .pc-limits{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .pc-limits__actions{ grid-column:1 / -1; padding-bottom:0; } } @media (max-width:699px){ .pc-limits{ gap:6px 16px; padding:12px 14px 10px; } .pc-slider output{ font-size:22px; } .pc-scale{ display:none; } .pc-slider input[type=range]{ height:44px; } } @media (max-width:600px){ .pc-chip{ min-height:44px; } } /* Bereik en stand op de kaart. Zonder actieve schuif: alleen het bereik, geen stand. */ .pc-range{ margin:6px 0 0; font:400 12px/1.5 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); letter-spacing:.02em; } .pc-range b{ font-weight:500; color:var(--wp--preset--color--ink-2); } .pc-status{ margin:4px 0 0; font:500 12px/1.4 var(--wp--preset--font-family--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--wp--preset--color--ink-3); display:flex; align-items:center; gap:8px; } .pc-status[hidden]{ display:none; } .pc-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--wp--preset--color--line); flex:none; transition:background .56s var(--peek-e), box-shadow .56s var(--peek-e); } .pc-item, .pc-item .pc-photo{ transition:opacity 1.1s var(--peek-e), filter 1.1s var(--peek-e), transform .6s var(--peek-e); } .pc--limits .pc-item.is-binnen .pc-card{ background:radial-gradient(ellipse at 50% 0%, rgba(0,154,215,.22), transparent 70%); } .pc--limits .pc-item.is-binnen .pc-status{ color:var(--wp--preset--color--holo); } .pc--limits .pc-item.is-binnen .pc-status::before{ background:var(--wp--preset--color--holo); box-shadow:0 0 12px rgba(143,216,255,.8); } .pc--limits .pc-item.is-deels .pc-card{ background:radial-gradient(ellipse at 50% 0%, rgba(239,146,33,.14), transparent 70%); } .pc--limits .pc-item.is-deels .pc-status{ color:#F3C48A; } .pc--limits .pc-item.is-deels .pc-status::before{ background:var(--wp--preset--color--orange); } .pc--limits .pc-item.is-buiten{ opacity:.42; } .pc--limits .pc-item.is-buiten .pc-photo{ filter:grayscale(.6) brightness(.55); } .pc--limits .pc-item.is-buiten .pc-status::before{ background:var(--wp--preset--color--orange); opacity:.7; } .pc--limits .pc-item.is-onbekend{ opacity:.6; } .pc--limits .pc-item.is-onbekend .pc-photo{ filter:grayscale(.4) brightness(.7); } .pc--limits .pc-item.is-onbekend .pc-status::before{ border:1px dashed var(--wp--preset--color--ink-3); background:transparent; } /* Bij hover of focus komt een gedimde kaart tijdelijk terug in het licht, zodat je hem kunt lezen. */ .pc--limits .pc-item.is-buiten:hover, .pc--limits .pc-item.is-buiten:focus-within, .pc--limits .pc-item.is-onbekend:hover, .pc--limits .pc-item.is-onbekend:focus-within{ opacity:1; } .pc--limits .pc-item:hover .pc-photo, .pc--limits .pc-item:focus-within .pc-photo{ filter:none; } @media (prefers-reduced-motion: reduce){ .pc-item, .pc-item .pc-photo, .pc-status::before, .pc-slider input[type=range]::-webkit-slider-thumb{ transition:none; } } /* Kader onderaan: bron, vuistregel en "indicatief". */ .pc-note{ margin:clamp(28px, 4vw, 48px) 0 0; max-width:62ch; padding:14px 16px; border:1px solid var(--wp--preset--color--line); border-radius:12px; background:linear-gradient(180deg, rgba(14,17,20,.6), rgba(8,10,12,.4)); font:400 12px/1.6 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } .pc-note p{ margin:0 0 6px; } .pc-note p:last-child{ margin:0; } .pc-note strong{ color:var(--wp--preset--color--ink-2); font-weight:500; } /* Inhoudspagina's: kopje, titel, intro en secties op één linkerlijn in dezelfde kolom (Ruud 30-09-2026: tabblad Ruimtes stond scheef) */ .ph-head{ max-width:1180px; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; } .ph-head > *, .ps-section > *{ margin-left:0 !important; margin-right:0 !important; } .ps-section .wp-block-table, .ps-section table{ width:100%; } /* Collectie (Ruud 30-09-2026): raster op volle breedte, 4 kaarten naast elkaar op desktop; bij actieve schuiven 'Uitgelicht' verbergen (dezelfde roosters staan in hun eigen groep), zodat de treffers per groep bovenaan staan. */ .peek-main--page .pc-grid{ max-width:none; } .pc-grid, .pc-grid--featured{ grid-template-columns:repeat(4, minmax(0, 1fr)); } @media (max-width:1099px){ .pc-grid, .pc-grid--featured{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (max-width:799px){ .pc-grid, .pc-grid--featured{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } .pc--limits .pc-group--featured{ display:none; } /* ---------- Productpagina: één container (Ruud 30-09-2026: "veel te veel lege zwarte vlakken, de pagina-opmaak moet beter") ---------- Alle secties van de productpagina (hero, luchtprincipe, technische gegevens, uitvoeringen, verwant, Pia-podium) delen dezelfde linkerlijn en breedte: max. 1320 px, gecentreerd, met compacte verticale witruimte (hoogstens ca. 72 px tussen twee secties). De algemene regel `.peek-section > *{ max-width:1480px; margin:auto }` centreerde hier de kop (max. 18ch) los van de kolommen eronder; op de productpagina staat alles links op de containerlijn. Inhoudspagina's (.ph-head/.ps-section, 1180 px) en de homepage blijven zoals ze zijn. De hero (blocks/rooster-scene/studio.css) gebruikt dezelfde 1320 px. */ .peek-main--product{ --peek-wide:1320px; --peek-pad:max(var(--peek-m), calc((100% - var(--peek-wide)) / 2)); } .peek-main--product .peek-section, .peek-main--product .peek-ingr, .peek-main--product .peek-pia-section{ padding:clamp(24px, 2.6vw, 36px) var(--peek-pad); } .peek-main--product .peek-section .peek-section{ padding-left:0; padding-right:0; } .peek-main--product .peek-section > *{ max-width:none; margin-left:0 !important; margin-right:0 !important; } .peek-main--product .peek-section h2{ max-width:18ch; } .peek-main--product .peek-section p{ max-width:62ch; } .peek-main--product .peek-section .peek-two, .peek-main--product .peek-section .peek-notes{ max-width:none; } .peek-main--product .peek-podium{ max-width:var(--peek-wide); margin:0; } @media (max-width:899px){ .peek-main--product .peek-section, .peek-main--product .peek-ingr, .peek-main--product .peek-pia-section{ padding:32px 16px; } } /* ---------- Fase A2 (award-opdracht, 01-10-2026): visueel en mobiel ---------- */ /* 1. Kop: bij scrollen een donkere, vervagende achtergrond (is-solid komt nu al na 24 px). Zonder backdrop-filter een dekkender verloop. */ .peek-header::before{ inset:0 0 -28px; background:linear-gradient(180deg, rgba(4,5,6,.94) 0%, rgba(4,5,6,.86) 55%, rgba(4,5,6,0) 100%); -webkit-mask:linear-gradient(#000 70%, transparent); mask:linear-gradient(#000 70%, transparent); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .peek-header::before{ background:linear-gradient(180deg, rgba(4,5,6,.985) 0%, rgba(4,5,6,.96) 60%, rgba(4,5,6,0) 100%); } } @media (prefers-reduced-motion: reduce){ .peek-header::before{ transition:none; } } /* 4. Labels op de collectiekaarten als chips (de opdeling in .pc-term doet een klein script in functions.php). */ .pc-terms:has(.pc-term){ display:flex; flex-wrap:wrap; gap:4px 6px; } .pc-term{ display:inline-block; padding:3px 7px 2px; border:1px solid var(--wp--preset--color--line); border-radius:999px; line-height:1.2; white-space:nowrap; } .pc-terms:not(:has(.pc-term)){ text-wrap:balance; } /* 5. Filterchips: scrollbare rij met een fade aan de rechterrand; de fade verdwijnt aan het einde (scroll-timeline waar die bestaat). */ @media (max-width:760px){ .pc-frow{ -webkit-mask:linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask:linear-gradient(90deg, #000 calc(100% - 56px), transparent); scroll-padding-right:var(--peek-m); } .pc-frow > :last-child{ margin-right:28px; } /* de laatste chip komt helemaal uit de fade */ @supports (animation-timeline: scroll(self inline)){ .pc-frow{ animation:peek-frow-fade linear both; animation-timeline:scroll(self inline); } @keyframes peek-frow-fade{ 0%, 85%{ -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); } 100%{ -webkit-mask-image:linear-gradient(90deg, #000 100%, transparent); mask-image:linear-gradient(90deg, #000 100%, transparent); } } } } /* 6. Hulplijnen van de zaal (zaal.js) lopen door de koptekst van de homepage: een zachte donkere halo achter het eerste paneel laat ze daar wegvallen. */ .zr #punt .panel{ position:relative; } .zr #punt .panel::before{ content:""; position:absolute; z-index:-1; inset:-40px -56px -32px -40px; pointer-events:none; background:radial-gradient(ellipse at 40% 55%, rgba(2,6,10,.94), rgba(2,6,10,.78) 48%, rgba(2,6,10,.35) 72%, rgba(2,6,10,0) 92%); } @media (max-width:760px){ .zr #punt .panel::before{ inset:-28px -16px -20px -16px; } } /* niet breder dan de 16px-marge: anders wordt de pagina breder dan het scherm en zakt de chatknop eronder */ /* 3. Referenties: typen als chips; op mobiel gestapelde kaarten (project, plaats, typen). Markup via functions.php. */ .ref-chip{ display:inline-block; margin:2px 6px 2px 0; padding:3px 9px 2px; border:1px solid var(--wp--preset--color--line); border-radius:999px; font:500 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing:.06em; color:var(--wp--preset--color--ink-2); white-space:nowrap; } a.ref-chip{ color:var(--wp--preset--color--ink) !important; text-decoration:none !important; border-color:rgba(143,216,255,.38); min-height:28px; } a.ref-chip:hover{ border-color:var(--wp--preset--color--holo); color:var(--wp--preset--color--holo) !important; } a.ref-chip:focus-visible{ outline:2px solid var(--wp--preset--color--orange); outline-offset:2px; } .ps-section .ref-table table{ min-width:0; } .ref-table td.ref-types{ padding-top:8px; padding-bottom:8px; } @media (max-width:699px){ .ps-section .ref-table{ overflow:visible; } .ref-table table, .ref-table tbody{ display:block; width:100%; min-width:0; } .ref-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* koppen blijven voor schermlezers */ .ref-table tr{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; padding:12px 0 10px; border-bottom:1px solid var(--wp--preset--color--line); } .ref-table td{ display:block; border:0 !important; padding:0 !important; } .ref-table td:nth-child(1){ font-size:16px; color:var(--wp--preset--color--ink); } .ref-table td:nth-child(2){ justify-self:end; text-align:right; font:400 12px/1.6 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } .ref-table td.ref-types{ grid-column:1 / -1; margin-top:4px; } } /* Hoogte als invulveld naast de schuif (Ruud 01-10-2026) */ .pc-num{ display:inline-flex; align-items:baseline; gap:4px; margin-top:8px; } .pc-num input{ width:5.2em; min-height:40px; padding:6px 10px; font:500 15px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.35); border-radius:10px; } .pc-num input:focus-visible{ outline:2px solid #009AD7; outline-offset:2px; } .pc-num small{ font:500 12px/1 var(--wp--preset--font-family--mono); color:var(--wp--preset--color--ink-3); } /* Borging fase A (01-10-2026):