/* Theme Name: Speurtochtenplein Theme URI: https://www.speurtochtenplein.nl/ Author: Speurtochtenplein Description: Eigen, code-gebouwd WooCommerce-thema voor speurtochtenplein.nl. Warme, speelse huisstijl voor kinderfeestjes (NL/BE). Version: 0.2.0 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 8.0 Text Domain: speurtochtenplein Tags: woocommerce, custom, responsive */ /* ========================================================================= Caveat (handschrift) — lokaal in het thema, zodat font-plugins zoals OMGF het niet kunnen wegoptimaliseren en het ook op productie zeker werkt. ========================================================================= */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-latin.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; } /* ========================================================================= Design tokens ========================================================================= */ :root { /* Kleuren */ --groen: #1f7a4d; --groen-donker: #155c39; --groen-licht: #e8f3ec; --oranje: #f5911e; --oranje-donker: #e07d0a; --geel: #ffcc3f; --roze: #ec6a9c; --blauw: #3a86d4; --tekst: #263a30; --tekst-zacht: #5c6b62; --rand: #ece5d8; --wit: #ffffff; --creme: #fbf5ea; --creme-diep: #f6ecd9; --vlak: #f4f7f2; /* Vorm */ --container: 1180px; --radius: 16px; --radius-groot: 28px; --radius-pil: 999px; /* Voor foutmeldingen. Rood genoeg om te alarmeren, niet zo fel dat een vergeten postcode als een ramp voelt. */ --fout: #c0392b; /* Hoogte van de plakkende menubalk: 34px logo, 12px lucht boven en onder, plus de randlijn. Alles wat onder die balk uit moet blijven rekent hiermee. */ --kop-hoogte: 71px; --schaduw: 0 6px 24px rgba(31, 122, 77, .08); --schaduw-diep: 0 14px 40px rgba(31, 122, 77, .14); /* Typografie */ --font-kop: "Baloo 2", system-ui, sans-serif; --font-tekst: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-hand: "Caveat", "Baloo 2", cursive; } /* ========================================================================= Basis ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-tekst); color: var(--tekst); background: var(--wit); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--groen); text-decoration: none; transition: color .15s; } a:hover { color: var(--groen-donker); } h1, h2, h3, h4 { font-family: var(--font-kop); line-height: 1.15; color: var(--tekst); margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2rem, 4vw, 3.1rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .sectie { padding: clamp(48px, 7vw, 88px) 0; } .sectie--creme { background: var(--creme); } .sectie--groen { background: var(--groen); color: #eaf6ef; } .sectie--groen h2 { color: #fff; } .sectie-kop { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); } .sectie-kop p { color: var(--tekst-zacht); font-size: 1.1rem; margin: 0; } /* ========================================================================= Knoppen ========================================================================= */ .knop { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-kop); font-weight: 600; font-size: 1.02rem; padding: 13px 26px; border-radius: var(--radius-pil); border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; line-height: 1; text-align: center; } .knop:hover { transform: translateY(-2px); } .knop--groen { background: var(--groen); color: #fff; box-shadow: 0 6px 18px rgba(31,122,77,.28); } .knop--groen:hover { background: var(--groen-donker); color: #fff; } .knop--oranje { background: var(--oranje); color: #fff; box-shadow: 0 6px 18px rgba(245,145,30,.3); } .knop--oranje:hover { background: var(--oranje-donker); color: #fff; } .knop--wit { background: #fff; color: var(--groen); border-color: var(--rand); } .knop--wit:hover { color: var(--groen-donker); border-color: var(--groen); } .knop--groot { padding: 16px 32px; font-size: 1.1rem; } .knop--pill { padding: 10px 20px; font-size: .95rem; } /* ========================================================================= Header ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand); } .header-binnen { display: flex; align-items: center; gap: 22px; padding: 12px 20px; max-width: var(--container); margin-inline: auto; } .site-logo { font-family: var(--font-kop); font-weight: 800; font-size: 1.35rem; color: var(--groen); display: inline-flex; align-items: center; flex: 0 0 auto; } .site-logo img, .site-logo .custom-logo { height: 34px; width: auto; max-width: 210px; display: block; object-fit: contain; } .site-logo .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } .hoofdmenu { flex: 1; display: flex; justify-content: center; } .hoofdmenu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; align-items: center; } .hoofdmenu a { font-weight: 700; color: var(--tekst); font-size: 1rem; } .hoofdmenu a:hover { color: var(--groen); } .hoofdmenu .belangrijk > a { color: var(--groen); font-weight: 800; } .hoofdmenu .belangrijk > a:hover { color: var(--groen-donker); } .header-acties { display: flex; align-items: center; gap: 14px; } .header-cart { position: relative; font-size: 1.4rem; color: var(--tekst); line-height: 1; } .header-cart .telling { position: absolute; top: -8px; right: -10px; background: var(--oranje); color: #fff; font-size: .72rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; font-family: var(--font-tekst); } .menu-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--tekst); } /* Fullscreen mobiel menu */ .mobiel-menu { position: fixed; inset: 0; z-index: 300; background: var(--creme); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 24px; opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity .25s ease, transform .25s ease, visibility .25s; } body.menu-open { overflow: hidden; } body.menu-open .mobiel-menu { opacity: 1; visibility: visible; transform: scale(1); } .mobiel-sluit { position: absolute; top: 18px; right: 20px; background: #fff; border: 1px solid var(--rand); border-radius: 999px; width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--tekst); } .mobiel-nav ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 4px; text-align: center; } .mobiel-nav a { font-family: var(--font-kop); font-weight: 700; font-size: 1.7rem; color: var(--tekst); display: block; padding: 10px 16px; } .mobiel-nav a:hover { color: var(--groen); } .mobiel-pills { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; } .mobiel-pills .knop { width: 100%; justify-content: center; } /* ========================================================================= Hero ========================================================================= */ .hero { position: relative; background: var(--creme-diep); min-height: clamp(420px, 46vw, 560px); display: flex; align-items: center; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Zachte lichtgloed achter de tekst: een warme halo links, terwijl het groene bos er luchtig doorheen blijft schijnen. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(58% 78% at 26% 50%, rgba(255,255,255,.9) 0%, rgba(255,252,244,.62) 38%, rgba(251,245,234,0) 72%), linear-gradient(90deg, rgba(251,245,234,.6) 0%, rgba(251,245,234,.28) 42%, rgba(251,245,234,0) 66%); } /* Extra zachte witte bloom onderaan zodat de USP-kaart mooi aansluit. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; background: linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%); } .hero-inhoud { position: relative; z-index: 2; width: 100%; padding: clamp(36px, 5vw, 64px) 20px; } .hero-tekst { max-width: 560px; } .hero-tekst h1 { position: relative; margin-bottom: .35em; color: #123f26; text-shadow: 0 2px 16px rgba(255,255,255,.7), 0 1px 2px rgba(255,255,255,.9); } .hero-tekst h1 .accent { color: var(--groen-donker); } .hero-tekst p { font-size: 1.15rem; color: var(--tekst); max-width: 28em; text-shadow: 0 1px 10px rgba(255,255,255,.8); } .hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } .hero-usps-wrap { background: transparent; } /* De drie streepjes stonden als tekstteken \|/ middenin de kop. Daardoor liepen ze mee in de regel en drukten ze 'speurtocht kinderfeestje' naar beneden. Nu is het een tekening die los boven de kop hangt. */ .hero-sparkle { position: absolute; top: -.34em; right: 4px; width: 46px; height: 32px; color: var(--oranje); pointer-events: none; } .hero-sparkle svg { width: 100%; height: 100%; } /* Het play-driehoekje was het teken ▶, dat op veel apparaten als blauw emoji-blokje verschijnt. Nu een gewoon icoon in de kleur van de knop. */ .knop .ico { width: 20px; height: 20px; flex: 0 0 20px; } .hero-usps-wrap { padding-bottom: clamp(20px, 3vw, 32px); } .hero-usps { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 18px 10px; box-shadow: var(--schaduw-diep); margin-top: -48px; position: relative; z-index: 3; } .hero-usp { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 4px 20px; } .hero-usp + .hero-usp { border-left: 1px solid var(--rand); } .hero-usp-ico { grid-row: 1 / 3; align-self: center; color: var(--ico, var(--groen)); } .hero-usp-ico svg { width: 30px; height: 30px; display: block; } .hero-usp b { font-family: var(--font-kop); font-size: .98rem; line-height: 1.2; } .hero-usp small { color: var(--tekst-zacht); font-size: .82rem; } /* Algemene bloktitels */ .blok-titel { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); } .blok-titel--links { text-align: left; margin-bottom: 0; } .blok-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(24px, 3vw, 36px); gap: 16px; flex-wrap: wrap; } .blok-link { font-family: var(--font-kop); font-weight: 700; color: var(--groen); white-space: nowrap; } .sectie--strak { padding: clamp(44px, 6vw, 76px) 0; } /* ========================================================================= Themategels ========================================================================= */ .tegels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .tegel { position: relative; display: flex; flex-direction: column; align-items: center; border-radius: var(--radius-groot); overflow: hidden; aspect-ratio: 4 / 5; padding: 18px 14px; text-align: center; box-shadow: var(--schaduw); transition: transform .15s, box-shadow .15s; } .tegel:hover { transform: translateY(-4px); box-shadow: var(--schaduw-diep); } .tegel-naam { color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 2; } .tegel-beeld { position: absolute; left: 6px; right: 6px; top: 40px; bottom: 54px; display: grid; place-items: center; z-index: 1; } .tegel-beeld img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.18)); } .tegel-knop { margin-top: auto; z-index: 2; background: #fff; color: var(--tekst); font-family: var(--font-kop); font-weight: 700; font-size: .82rem; padding: 7px 16px; border-radius: var(--radius-pil); box-shadow: 0 2px 8px rgba(0,0,0,.12); } /* Themakleuren */ .tegel--roze { background: linear-gradient(160deg, #f6a5c6, #ec6a9c); } .tegel--groen { background: linear-gradient(160deg, #7fce8a, #3fa15a); } .tegel--blauw { background: linear-gradient(160deg, #5aa6e6, #3a6fd4); } .tegel--turkoois { background: linear-gradient(160deg, #57d6d0, #22a7b8); } .tegel--geel { background: linear-gradient(160deg, #ffd76a, #f5b028); } .tegel--roze .tegel-knop, .tegel--geel .tegel-knop { color: var(--tekst); } /* ========================================================================= Voordelen ========================================================================= */ .voordelen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .voordeel { text-align: center; } .voordeel-icoon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; } .voordeel-icoon svg { width: 36px; height: 36px; } .voordeel-icoon--groen { background: var(--groen-licht); color: var(--groen); } .voordeel-icoon--oranje { background: #fdedd8; color: var(--oranje-donker); } .voordeel-icoon--blauw { background: #e2eefb; color: var(--blauw); } .voordeel-icoon--roze { background: #fbe4ee; color: var(--roze); } .voordeel h3 { margin-bottom: .3em; } .voordeel p { color: var(--tekst-zacht); font-size: .96rem; margin: 0; } /* ========================================================================= Productraster ========================================================================= */ /* Geen crème vlak meer achter de kaarten: dat trok de aandacht naar het blok in plaats van naar de speurtochten. De kaarten staan nu los op wit en krijgen hun vorm van hun eigen schaduw. De wrap blijft bestaan als houvast voor de knoppen van de slider op een telefoon. */ .producten-wrap { position: relative; } .producten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .product-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(31,122,77,.12); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; } .product-kaart:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(31,122,77,.18); } .product-kaart-beeld { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--vlak); } .product-kaart-beeld img { width: 100%; height: 100%; object-fit: cover; } .product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: var(--tekst); font-family: var(--font-kop); font-weight: 700; font-size: .76rem; padding: 4px 11px; border-radius: var(--radius-pil); box-shadow: var(--schaduw); } .product-hart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--roze); font-size: 1.1rem; box-shadow: var(--schaduw); } .product-kaart-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; } .product-kaart-body h3 { font-size: 1.05rem; margin-bottom: .15em; } .product-kaart-sub { color: var(--tekst-zacht); font-size: .88rem; margin-bottom: 10px; flex: 1; } .product-sterren { color: var(--geel); font-size: .95rem; margin-bottom: 8px; } .product-sterren small { color: var(--tekst-zacht); margin-left: 6px; font-family: var(--font-tekst); } .product-prijs { font-family: var(--font-kop); font-weight: 800; font-size: 1.35rem; color: var(--tekst); margin-bottom: 12px; } .product-kaart .knop { justify-content: center; width: 100%; } /* --- Slider op een telefoon ------------------------------------------- Vier kaarten onder elkaar werden een muur van bijna twee schermen hoog. Op een telefoon staan ze daarom in een strook die je opzij veegt. Het schuiven doet de browser met scroll-snap, dus vegen werkt ook als er iets met de scripts misgaat; de pijltjes zijn alleen het handwerk eromheen. */ .slider-bediening { display: none; } @media (max-width: 680px) { /* Bewust binnen .producten-wrap: op de winkelpagina en in vertaalde shortcodes staat ook een .producten-raster, en dat moet gewoon een raster blijven. */ .producten-wrap .producten { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; /* Ruimte rondom, anders knipt de strook de schaduw van de kaarten af. */ padding: 8px 4px 14px; margin-inline: -4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 4px; } .producten-wrap .producten::-webkit-scrollbar { display: none; } .producten-wrap .producten > .product-kaart { flex: 0 0 78%; scroll-snap-align: start; } .producten-wrap .producten > .product-kaart:hover { transform: none; } .slider-bediening { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; } .slider-pijl { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--rand); background: #fff; color: var(--groen); box-shadow: var(--schaduw); cursor: pointer; padding: 0; transition: opacity .2s, transform .15s; } .slider-pijl svg { width: 20px; height: 20px; } .slider-pijl:active { transform: scale(.94); } .slider-pijl[disabled] { opacity: .35; cursor: default; } .slider-stippen { display: flex; align-items: center; gap: 7px; } .slider-stip { width: 8px; height: 8px; border-radius: 999px; background: var(--rand); transition: background .2s, width .2s; } .slider-stip.is-nu { background: var(--groen); width: 20px; } } /* ========================================================================= Stappen ========================================================================= */ /* --- Zo makkelijk werkt het ------------------------------------------ Eén laag blok met drie kaartjes naast elkaar: illustratie links, nummer en tekst rechts, met een gestippeld pijltje ertussen. Het waren drie hoge kaarten onder een sectiekop, en dat werd een blok van bijna 400px voor een boodschap die je in één blik moet kunnen zien. De kop staat op twee regels met de tweede in handschrift, en onder de rij staat een groene pil met de belofte. Dat maakt van drie losse stappen één verhaaltje met een begin en een eind. Er zat een getint vak omheen, met blaadjes op de hoeken en een papieren vliegtuigje bij de kop. Dat viel als een grote vierkante plaat op de pagina, en de losse versiering las zonder dat vak alsnog als een blok achter de kaartjes. De witte kaartjes houden het geheel al bij elkaar; er hoort niets achter te staan. */ .stappen-blok { position: relative; padding: clamp(6px, 1.2vw, 14px) 0; } .stappen-kop { position: relative; text-align: center; margin: 0 0 clamp(24px, 3.2vw, 38px); } .stappen-titel { margin: 0; color: var(--groen-donker); line-height: 1.02; font-size: clamp(1.55rem, 3.5vw, 2.5rem); } .stappen-hand { display: block; font-family: var(--font-hand); font-weight: 700; color: var(--oranje); font-size: 1.14em; line-height: 1.1; } .stappen-streep { display: block; width: clamp(120px, 16vw, 190px); height: auto; margin: 4px auto 0; color: var(--groen); } .stappen-rij { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: clamp(6px, 1.1vw, 14px); align-items: stretch; } .stapje { background: #fff; border: 1px solid #eef3ea; border-radius: 24px; padding: clamp(14px, 1.8vw, 22px); display: grid; grid-template-columns: auto 1fr; gap: clamp(10px, 1.4vw, 18px); align-items: center; box-shadow: 0 10px 26px rgba(31, 122, 77, .08); } .stapje-beeld { width: clamp(64px, 7vw, 92px); height: auto; object-fit: contain; display: block; } .stapje-nr { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 999px; background: var(--groen); color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: .95rem; margin-bottom: 8px; } /* Een geschreven streepje onder de stapnaam. Het loopt precies zo breed als de tekst, dus de b krijgt fit-content; anders liep het door tot de kaartrand. */ .stapje-tekst b { position: relative; display: block; width: fit-content; max-width: 100%; font-family: var(--font-kop); font-size: clamp(.98rem, 1.35vw, 1.14rem); padding-bottom: 9px; margin-bottom: 6px; } .stapje-tekst b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C22 2.6 52 1.8 98 3.4' fill='none' stroke='%23f5911e' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .stapje-uitleg { display: block; color: var(--tekst-zacht); font-size: .87rem; line-height: 1.55; } .stapje-pijl { align-self: center; color: var(--groen); opacity: .55; } .stapje-pijl svg { width: clamp(30px, 3.4vw, 44px); height: 22px; display: block; } /* De belofte onder de rij. Geen pil eromheen: die maakte er een knop van, en er valt hier niets te klikken. Het handschrift zegt al genoeg. */ .stappen-pil { margin: clamp(20px, 2.8vw, 30px) auto 0; width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--groen-donker); text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); } .stappen-pil .ico { width: 22px; height: 22px; flex: 0 0 22px; color: var(--groen); } @media (max-width: 900px) { /* Onder elkaar. Het pijltje verdween hier eerst, maar dan vallen de drie kaartjes uiteen in drie losse mededelingen. Een kwartslag gedraaid wijst het naar het volgende kaartje en blijft het een route. */ .stappen-rij { grid-template-columns: 1fr; gap: 4px; } .stapje { padding: 12px 14px; border-radius: 18px; gap: 12px; } .stapje-pijl { justify-self: center; transform: rotate(90deg); } .stapje-pijl svg { width: 26px; height: 16px; } .stapje-beeld { width: 54px; } /* Het nummer stond op een eigen regel boven de stapnaam. Op een breed scherm mag dat, daar is de kaart hoog genoeg; op een telefoon kost het een hele regel voor één cijfer. Naast de naam is het net zo duidelijk en scheelt het drie keer een regel. */ .stapje-tekst { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; } .stapje-nr { width: 24px; height: 24px; font-size: .82rem; margin-bottom: 0; } .stapje-tekst b { grid-column: 2; font-size: .98rem; padding-bottom: 7px; margin-bottom: 0; } .stapje-uitleg { grid-column: 1 / -1; margin-top: 5px; font-size: .86rem; line-height: 1.45; } .stappen-kop { margin-bottom: 18px; } /* Het hartje stond als eigen kolom links van een gecentreerde tekst, en dan zweeft het los naast twee regels. Als het gewoon voor het eerste woord staat, loopt het mee met de zin. */ .stappen-pil { display: block; font-size: 1.08rem; line-height: 1.4; } .stappen-pil .ico { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; } } /* ========================================================================= Reviews ========================================================================= */ .reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* Geen kaart met een randje eromheen. Wat iemand zegt hoeft niet in een doosje; het staat gewoon op de pagina, met de foto van de speurtocht erbij. Zonder die omlijsting oogt de band lichter en gaat de aandacht naar de tekst. */ .review { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 6px 4px; } .review-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .review-avatar { width: 40px; height: 40px; border-radius: 999px; flex: 0 0 40px; background: var(--groen); color: #fff; font-family: var(--font-kop); font-weight: 800; display: grid; place-items: center; font-size: 1.1rem; } .review-naam { font-family: var(--font-kop); font-weight: 700; color: var(--tekst); } /* Rond in plaats van een vierkantje: dat leest als een portretje bij een naam. */ .review-thumb { width: 54px; height: 54px; flex: 0 0 54px; border-radius: var(--radius-pil); overflow: hidden; box-shadow: var(--schaduw); background: var(--vlak); } .review-thumb img { width: 100%; height: 100%; object-fit: cover; } .review-kop-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .review-product { font-size: .8rem; color: var(--tekst-zacht); font-weight: 700; } .review-product:hover { color: var(--groen); } .review-sterren { color: var(--geel); letter-spacing: 2px; margin-bottom: 8px; } .review p { font-size: .95rem; line-height: 1.6; color: var(--tekst); font-style: italic; margin: 0; } /* Doorlopende, schuivende reviews (marquee) */ .reviews-marquee { overflow: hidden; margin: 0 -20px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .reviews-track { display: flex; align-items: stretch; width: max-content; padding: 6px 20px; animation: reviews-scroll 70s linear infinite; } .reviews-marquee:hover .reviews-track, .reviews-track:focus-within { animation-play-state: paused; } /* Geen 'gap' maar margin-right, zodat de lus naadloos op -50% aansluit. */ .reviews-track .review { flex: 0 0 330px; width: 330px; margin-right: 22px; } @keyframes reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; flex-wrap: wrap; } } /* ========================================================================= FAQ ========================================================================= */ .faq-tips { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; } .faq-kolom .blok-titel { margin-bottom: 20px; } .faq-kolom > .knop { margin-top: 18px; } .faq-lijst { margin: 0; } .faq-item { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .faq-item summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-kop); font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--groen); font-size: 1.5rem; font-weight: 700; } .faq-item[open] summary::after { content: "–"; } .faq-item .faq-antwoord { padding: 0 22px 20px; color: var(--tekst-zacht); } /* Tips-kaarten */ .tips-kolom .blok-kop { margin-bottom: 20px; } .tips { display: grid; gap: 16px; } .tip { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); transition: transform .15s, box-shadow .15s; } .tip:hover { transform: translateY(-2px); box-shadow: var(--schaduw-diep); } .tip-beeld { align-self: stretch; } .tip-beeld img { width: 96px; height: 100%; min-height: 84px; object-fit: cover; } .tip-body { padding: 12px 16px 12px 0; } .tip-titel { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 1rem; color: var(--tekst); line-height: 1.25; } .tip-lees { display: inline-block; margin-top: 6px; color: var(--groen); font-weight: 700; font-size: .88rem; } /* ========================================================================= Footer ========================================================================= */ /* De footer liep met een harde lijn uit de witte pagina. Het verloop laat het wit over ruim honderd pixels in het crème overgaan; de laatste kleurstop loopt daarna gewoon door, dus de rest van de footer blijft crème. */ .site-footer { background: linear-gradient(180deg, #fff 0, var(--creme) 150px); padding: clamp(64px, 8vw, 100px) 0 0; margin-top: 0; position: relative; overflow: hidden; --footer-lijn: rgba(38,58,48,.14); --gras-waas: #dcead0; --gras-licht: #c2d9a9; --gras: #a8c78a; --gras-diep: #8bb271; --footer-balk: #f8e9d7; } .site-footer .container { position: relative; z-index: 2; } /* De decoratie hoort bij het bovenste deel. Zonder deze laag zouden de routes zich naar de hele footer richten en belandde de onderste in het gras. */ .footer-boven { position: relative; } /* Speld, pad en kruisje zitten per route in één tekening, dus ze blijven altijd bij elkaar. Ze lopen achter de tekst door: z-index 1 en geen muisvang. */ .footer-route { position: absolute; z-index: 1; pointer-events: none; color: var(--oranje); opacity: .45; } .footer-route svg { width: 100%; height: 100%; } .footer-route--boven { top: -20px; right: 20px; width: 320px; height: 120px; } .footer-route--onder { bottom: -4px; left: 16px; width: 360px; height: 110px; } /* Onder deze breedte schuiven de kolommen tegen de routes aan en loopt het pad dwars door de tekst. Dan liever geen decoratie. */ @media (max-width: 1180px) { .footer-route { display: none; } } /* Icoon boven elke kolomkop. */ .footer-kop-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; margin-bottom: 16px; } .footer-kop-ico .ico { width: 26px; height: 26px; } .footer-kop-ico--groen { background: var(--groen-licht); color: var(--groen); } .footer-kop-ico--oranje { background: #fdf0e0; color: var(--oranje-donker); } .footer-kop-ico--blauw { background: #e6f0fb; color: var(--blauw); } .footer-kop-ico--roze { background: #fbe4ee; color: var(--roze); } /* Alleen een max-height liet dit svg-logo op de breedte schalen; met een vaste hoogte blijft het net zo groot als in de header. */ .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr .9fr; gap: 44px 52px; align-items: start; } /* De vierde kolom: volgen, en waar we nog meer te koop zijn. De tweede kop moet zwaarder wegen dan .footer-col h4, anders wint diens marge en plakt "Ook te koop bij" tegen de iconen aan. */ .footer-col h4.footer-kop--tweede { margin-top: 30px; } .footer-bol { display: inline-block; margin-top: 14px; transition: opacity .15s, transform .15s; } .footer-bol:hover { opacity: .8; transform: translateY(-2px); } /* Geen wit vlak eromheen: het logo is doorzichtig en staat prima op de crème achtergrond van de footer. Dat vlak was van mij, niet van het logo. */ .footer-bol img { display: block; width: 104px; height: auto; } .footer-social { display: flex; gap: 10px; } /* Onderaan de bedrijfsgegevens, met lucht boven het e-mailadres. */ .footer-social { display: flex; gap: 10px; margin-top: 16px; } .site-footer .footer-social a { width: 40px; height: 40px; border-radius: 999px; color: #fff; display: grid; place-items: center; transition: filter .15s, transform .15s, box-shadow .15s; } .site-footer .footer-social a:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); } /* De iconen zelf altijd wit, ongeacht de algemene footer-linkkleur. */ .site-footer .footer-social a svg { color: #fff; } .site-footer .footer-social a svg [fill="currentColor"] { fill: #fff; } /* Echte merkkleuren */ .soc--fb { background: #1877F2; box-shadow: 0 4px 12px rgba(24,119,242,.32); } .soc--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 4px 12px rgba(214,36,159,.32); } .soc--pin { background: #E60023; box-shadow: 0 4px 12px rgba(230,0,35,.32); } .footer-social svg { width: 20px; height: 20px; } .footer-betaal { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* De logo's van Mollie zijn zelf al afgeronde kaartjes met een eigen kleur, dus die krijgen geen extra vak. Alleen een kaal beeldmerk (iDEAL) zetten we op een wit plaatje van dezelfde afmeting, anders valt het uit de toon. */ .betaal-vak { display: grid; place-items: center; height: 24px; } .betaal-vak img { height: 24px; width: auto; max-width: 62px; object-fit: contain; display: block; } .betaal-vak--plaat { background: #fff; border-radius: 5px; padding: 2px 5px; height: 24px; box-shadow: 0 1px 2px rgba(38,58,48,.10); } .betaal-vak--plaat img { height: 20px; } .footer-col h4 { font-family: var(--font-kop); font-size: 1.2rem; font-weight: 700; color: var(--tekst); margin: 0 0 1.05em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 11px; } .footer-col a { color: var(--tekst-zacht); font-weight: 600; } .footer-col a:hover { color: var(--groen); } .footer-intro p { color: var(--tekst-zacht); font-size: .95rem; max-width: 26em; } .footer-usps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; } .footer-usps span { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; } .footer-usps span::before { content: "✓"; color: var(--groen); } .footer-mail { margin-top: 12px; } /* Onderste balk: copyright, juridische links en betaallogo's op één regel. De scheidingsstreepjes zijn opmaak, geen tekst, dus ze staan in CSS. */ /* De onderbalk loopt over de volle breedte en heeft een iets warmere tint, zodat hij als aparte strook leest in plaats van als voetnoot onder de kolommen. */ .footer-balk { position: relative; z-index: 2; margin-top: clamp(46px, 6vw, 72px); background: linear-gradient(180deg, var(--creme) 0, var(--footer-balk) 60px); } .footer-onder { padding-block: 22px; position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 34px; color: var(--tekst-zacht); font-size: .88rem; } .footer-copy { line-height: 1.5; } .footer-onder > * { position: relative; } /* Verticale streepjes tussen de drie groepen. Opmaak, geen tekst, dus een schermlezer leest ze niet voor. */ .footer-onder > * + *::before { content: ""; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 1px; height: 17px; background: var(--footer-lijn); } .footer-juridisch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-juridisch a { color: var(--tekst-zacht); font-weight: 600; } .footer-juridisch a:hover { color: var(--groen); } .footer-juridisch .scheider { color: var(--tekst-zacht); opacity: .5; } /* ========================================================================= Algemene content (pagina's, blog) ========================================================================= */ .site-main { padding: clamp(36px, 5vw, 64px) 0; } .pagina-titel { text-align: center; margin-bottom: 32px; } .entry-content { max-width: 780px; margin-inline: auto; } .entry-content img { border-radius: var(--radius); margin: 1rem 0; } .entry-content h2, .entry-content h3 { margin-top: 1.6em; } /* ========================================================================= Responsief ========================================================================= */ @media (max-width: 980px) { .hero { min-height: 420px; } .hero-media img { object-position: 78% center; } .hero::before { background: radial-gradient(70% 60% at 34% 42%, rgba(255,255,255,.92) 0%, rgba(255,252,244,.7) 45%, rgba(251,245,234,.35) 80%), linear-gradient(90deg, rgba(251,245,234,.7) 0%, rgba(251,245,234,.45) 60%, rgba(251,245,234,.2) 100%); } .hero-usps { grid-template-columns: repeat(2, 1fr); margin-top: 24px; gap: 6px 0; } .hero-usp:nth-child(3) { border-left: 0; } .hero-usp { padding: 8px 14px; } .tegels { grid-template-columns: repeat(3, 1fr); } .voordelen, .producten, .reviews { grid-template-columns: repeat(2, 1fr); } .stappen::before { display: none; } .faq-tips { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .hero-sparkle { display: none; } /* De koptekst regelen we bij 900px, zie het blok onderaan. */ .hero-usps { grid-template-columns: 1fr; } .hero-usp { border-left: 0 !important; } .tegels { grid-template-columns: repeat(2, 1fr); } /* Binnen .producten-wrap wordt dit een veegbare strook (zie het productraster hierboven); overal elders blijft het één kaart per rij. */ .producten { grid-template-columns: 1fr; } .reviews { grid-template-columns: 1fr; } /* Niet alles onder elkaar: merk bovenaan, daarna twee bij twee. */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; } .footer-onder { flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-block: 26px; } .footer-onder > * + *::before { display: none; } .footer-juridisch { justify-content: center; } .footer-betaal { justify-content: center; } .gras-plant { width: 32px; height: 46px; } .footer-kop-ico { width: 46px; height: 46px; border-radius: 15px; margin-bottom: 12px; } } /* ========================================================================= Paginakop + inhoudspagina's (nieuw ontwerp) ========================================================================= */ .pagina-hero { background: var(--creme); text-align: center; padding: clamp(48px,7vw,84px) 0 clamp(34px,5vw,50px); } .pagina-hero h1 { margin-bottom: .3em; } .pagina-hero p { color: var(--tekst-zacht); font-size: 1.15rem; max-width: 42em; margin: 0 auto; } .prose { max-width: 760px; margin-inline: auto; } .prose p { margin: 0 0 1.1rem; } .prose h2 { margin: 1.6em 0 .5em; } /* stretch, niet center: de linkerkolom is een gekleurd vak met een tekening erin en de rechter een lange lijst. Met center zweefde dat vak klein in het midden naast een kolom die drie keer zo hoog was. Nu zijn de twee even hoog en staat de tekening netjes in het midden van het vak. */ .pg-2kol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: stretch; } .pg-2kol img { border-radius: var(--radius-groot); box-shadow: var(--schaduw); } .pg-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pg-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 28px 24px; box-shadow: var(--schaduw); text-align: center; } .pg-kaart .voordeel-icoon { margin-bottom: 14px; } .pg-kaart h3 { margin-bottom: .3em; } .pg-kaart p { color: var(--tekst-zacht); font-size: .96rem; margin: 0; } .pg-cta { text-align: center; } .pg-prijs { font-family: var(--font-kop); font-weight: 800; font-size: clamp(2.4rem,5vw,3.4rem); color: var(--groen); line-height: 1; } @media (max-width: 860px){ .pg-2kol { grid-template-columns: 1fr; } .pg-kaarten { grid-template-columns: 1fr; } } /* ========================================================================= Speelse paginakop met confetti + moderne icoon-cirkels ========================================================================= */ .pagina-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--groen-licht), var(--creme)); } .pagina-hero .container { position: relative; z-index: 2; } .pagina-hero .confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .pagina-hero .confetti span { position: absolute; display: block; border-radius: 3px; opacity: .8; } .pagina-hero .confetti span:nth-child(1){left:6%;top:24%;width:14px;height:14px;background:var(--oranje);transform:rotate(20deg);} .pagina-hero .confetti span:nth-child(2){left:16%;top:62%;width:10px;height:10px;background:var(--roze);border-radius:50%;} .pagina-hero .confetti span:nth-child(3){left:27%;top:18%;width:9px;height:9px;background:var(--blauw);border-radius:50%;} .pagina-hero .confetti span:nth-child(4){right:10%;top:22%;width:16px;height:16px;background:var(--geel);transform:rotate(35deg);} .pagina-hero .confetti span:nth-child(5){right:20%;top:64%;width:11px;height:11px;background:var(--groen);transform:rotate(15deg);} .pagina-hero .confetti span:nth-child(6){right:6%;top:52%;width:9px;height:9px;background:var(--oranje);border-radius:50%;} .pagina-hero .confetti span:nth-child(7){left:44%;top:12%;width:8px;height:8px;background:var(--roze);transform:rotate(30deg);} .pagina-hero .confetti span:nth-child(8){right:34%;top:74%;width:12px;height:12px;background:var(--blauw);transform:rotate(20deg);} .pagina-hero .kop-emoji { font-size: 0; } /* placeholder */ /* Moderne icoon-cirkel (SVG) */ .ico { width: 1em; height: 1em; display: block; } .icoon-cirkel { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 16px; } .icoon-cirkel .ico { width: 34px; height: 34px; } .icoon-cirkel--groen { background: var(--groen-licht); color: var(--groen); } .icoon-cirkel--oranje{ background: #fdedd8; color: var(--oranje-donker); } .icoon-cirkel--blauw { background: #e2eefb; color: var(--blauw); } .icoon-cirkel--roze { background: #fbe4ee; color: var(--roze); } .icoon-cirkel--geel { background: #fff4d1; color: #d69b0a; } /* Kaart met modern icoon */ .pg-kaart .icoon-cirkel { margin-bottom: 14px; } .pg-kaart .ico { } /* Zachte golf-scheiding onder een sectie */ .golf { display:block; width:100%; height:40px; } .ico-inline { display:inline-block; width:.85em; height:.85em; vertical-align:-.08em; color:var(--roze); } .prose ul .ico { width:20px; height:20px; } /* ========================================================================= Prijstabellen, papierformaten en icoonlijsten ========================================================================= */ .prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; } .prijskaart { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--rand); border-radius: var(--radius-groot); padding: 30px 26px 28px; box-shadow: var(--schaduw); text-align: center; transition: transform .18s, box-shadow .18s, border-color .18s; } .prijskaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw-diep); } .prijskaart--populair { border-color: var(--oranje); box-shadow: 0 16px 44px rgba(245,145,30,.22); } .prijskaart--gratis { border-color: var(--groen); background: linear-gradient(180deg,#fff, var(--groen-licht)); } .prijskaart-lint { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--oranje); color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: .8rem; padding: 6px 16px; border-radius: var(--radius-pil); white-space: nowrap; box-shadow: 0 4px 12px rgba(245,145,30,.35); } .prijskaart--gratis .prijskaart-lint { background: var(--groen); box-shadow: 0 4px 12px rgba(31,122,77,.3); } .prijskaart-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 4px auto 14px; } .prijskaart-ico .ico { width: 28px; height: 28px; } .prijskaart h3 { font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tekst-zacht); margin-bottom: .35em; font-size: .92rem; } .prijskaart .bedrag { font-family: var(--font-kop); font-weight: 800; font-size: clamp(2.2rem,4vw,2.9rem); line-height: 1; color: var(--tekst); } .prijskaart .bedrag small { display:block; font-family: var(--font-tekst); font-size: .8rem; font-weight: 700; color: var(--tekst-zacht); margin-top: 6px; } .prijskaart--gratis .bedrag { color: var(--groen); } .prijskaart-omschrijving { color: var(--tekst-zacht); font-size: .95rem; margin: 14px 0 18px; } .prijskaart ul { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; } .prijskaart li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--rand); font-size: .95rem; } .prijskaart li:first-child { border-top: 0; } .prijskaart li .ico { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; color: var(--groen); } /* Kanttekening: een nuance die je niet als kenmerk wilt laten lezen. Bewust anders opgemaakt dan een lijst met vinkjes, want die betekent 'inbegrepen'. */ .let-op { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 0 0 18px; padding: 10px 12px; background: var(--creme); border-radius: 12px; color: var(--tekst-zacht); font-size: .85rem; line-height: 1.45; } .let-op .ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--oranje-donker); } .prijskaart .knop { margin-top: auto; justify-content: center; } /* Papierformaten-diagram */ /* De drie vellen delen de breedte van het vak in plaats van vaste pixels te krijgen. Reden: tussen 860px en 1180px schermbreedte wordt deze kolom flink smaller, en met vaste maten liep de rij er dan uit. De verhoudingen kloppen met de echte papiermaten: A5 is een A4 die op de helft is gevouwen, dus 0,707 keer zo breed, en A6 is daar weer de helft van. Van de 2,207 delen die dat samen is krijgt A4 er 1, A5 0,707 en A6 0,5. */ .papier { background: #fdf0e6; border-radius: var(--radius-groot); padding: clamp(30px, 4vw, 48px) 24px; display: grid; place-items: center; } .papier > * { width: 100%; } .papier-titel { font-family: var(--font-kop); font-weight: 700; text-align: center; margin-bottom: 26px; color: var(--tekst); font-size: 1.08rem; } .papier-rij, .papier-maten { display: flex; justify-content: center; gap: 18px; width: 100%; max-width: 400px; margin-inline: auto; } .papier-rij { align-items: flex-end; } .papier-vel { background: #fff; border: 2px solid var(--oranje); border-radius: 8px; display: grid; place-items: center; font-family: var(--font-kop); font-weight: 700; color: var(--oranje); box-shadow: var(--schaduw); aspect-ratio: 21 / 29.7; } .papier-vel--a4, .papier-maten span:nth-child(1) { width: calc((100% - 36px) * .453); } .papier-vel--a5, .papier-maten span:nth-child(2) { width: calc((100% - 36px) * .320); } .papier-vel--a6, .papier-maten span:nth-child(3) { width: calc((100% - 36px) * .227); } .papier-vel--a4 { font-size: 1.05rem; } .papier-vel--a5 { font-size: .95rem; } .papier-vel--a6 { font-size: .82rem; } .papier-maten { margin-top: 12px; color: var(--tekst-zacht); font-size: .78rem; text-align: center; } /* Icoonlijst (Formaten & inhoud enz.) */ .icolijst { list-style: none; margin: 0; padding: 0; } .icolijst li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rand); } .icolijst li:last-child { border-bottom: 0; } .icolijst .icolijst-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; } .icolijst .icolijst-ico .ico { width: 20px; height: 20px; } .icolijst b { display: block; font-family: var(--font-kop); font-size: 1rem; } .icolijst span.uitleg { color: var(--tekst-zacht); font-size: .93rem; } /* Opsomming binnen een uitklapantwoord: de naam van het onderdeel vet, de uitleg erachter in een rustiger kleur, zodat je de lijst kunt scannen. */ .pakketlijst { list-style: none; margin: 0 0 1rem; padding: 0; } .pakketlijst li { position: relative; padding: 6px 0 6px 24px; color: var(--tekst-zacht); } .pakketlijst li + li { border-top: 1px solid var(--rand); } .pakketlijst li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 7px; height: 7px; border-radius: 999px; background: var(--groen); } .pakketlijst b { color: var(--tekst); } .blok-titel--accent { color: var(--oranje-donker); } /* Op een smal scherm onder elkaar, maar wel compacter. In de maten van een breed scherm werd elke kaart bijna een half scherm hoog en moest je flink scrollen voordat je het derde pakket zag. Alleen de ruimte en de tekstmaten krimpen; de opbouw blijft gelijk, zodat het dezelfde kaart blijft. */ @media (max-width: 900px) { .prijzen { grid-template-columns: 1fr; gap: 18px; max-width: 420px; margin-inline: auto; } .prijskaart { padding: 22px 18px 20px; } .prijskaart-ico { width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 10px; } .prijskaart-ico .ico { width: 22px; height: 22px; } .prijskaart .bedrag { font-size: 2rem; } .prijskaart .bedrag small { margin-top: 4px; } .prijskaart-omschrijving { font-size: .9rem; margin: 10px 0 14px; } .prijskaart ul { margin: 0 0 16px; } .prijskaart li { padding: 5px 0; font-size: .9rem; } /* Optillen bij aanwijzen doet op een aanraakscherm niets nuttigs. */ .prijskaart:hover { transform: none; } } /* ========================================================================= Cijferbalk, verhaalkaart en mascotte ========================================================================= */ .cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cijfer { text-align: center; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 26px 18px; box-shadow: var(--schaduw); } .cijfer b { display: block; font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.8rem,3.4vw,2.5rem); color: var(--groen); line-height: 1; } .cijfer span { display: block; color: var(--tekst-zacht); font-size: .92rem; margin-top: 6px; } .cijfer .sterren { color: var(--geel); font-size: 1rem; margin-top: 4px; } /* Verhaalkaart met foto */ .verhaal { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw-diep); overflow: hidden; display: grid; grid-template-columns: .85fr 1.15fr; } .verhaal-foto { position: relative; min-height: 100%; } .verhaal-foto img { width: 100%; height: 100%; object-fit: cover; } .verhaal-tekst { padding: clamp(28px,4vw,44px); } .verhaal-tekst h2 { margin-bottom: .5em; } .verhaal-onder { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rand); } .verhaal-namen { font-family: var(--font-kop); font-weight: 700; color: var(--groen); font-size: 1.05rem; } .verhaal-namen small { display: block; font-family: var(--font-tekst); font-weight: 600; color: var(--tekst-zacht); font-size: .84rem; } /* Mascotte-blok */ .mascotte-blok { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,3vw,40px); align-items: center; background: linear-gradient(135deg, var(--groen-licht), #fff); border: 1px solid #d3e8da; border-radius: var(--radius-groot); padding: clamp(24px,3vw,40px); } .mascotte-blok img { width: clamp(110px,14vw,170px); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.14)); } .mascotte-blok h2 { margin-bottom: .35em; } .mascotte-blok p { color: var(--tekst-zacht); margin: 0; max-width: 40em; } @media (max-width: 900px){ .cijfers { grid-template-columns: repeat(2,1fr); } .verhaal { grid-template-columns: 1fr; } .verhaal-foto { max-height: 340px; } .mascotte-blok { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .footer-adres { font-style: normal; color: var(--tekst-zacht); font-size: .95rem; line-height: 1.65; display: grid; gap: 13px; } .footer-adres > span { display: flex; gap: 10px; align-items: flex-start; } .footer-adres .ico { flex: 0 0 19px; width: 19px; height: 19px; color: var(--groen); margin-top: 2px; } .footer-adres .bedrijf { font-weight: 700; color: var(--tekst); } .footer-adres a { color: var(--tekst-zacht); font-weight: 600; } .footer-adres a:hover { color: var(--groen); } /* Tekst die alleen voor een schermlezer is. Niet met display: none, want dan leest een schermlezer hem ook niet meer. WooCommerce gebruikt deze klasse ook in zijn eigen sjablonen (bij het aantalveld bijvoorbeeld), dus hij hoort hoe dan ook in dit thema te staan. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; } /* ========================================================================= Sfeer-elementen: handschrift-labels, blobs, polaroid ========================================================================= */ .eyebrow { font-family: var(--font-hand); font-size: 1.5rem; font-weight: 700; color: var(--oranje); display: inline-flex; align-items: center; gap: 8px; margin-bottom: .2em; } .eyebrow--groen { color: var(--groen); } .eyebrow .ico { width: 20px; height: 20px; } /* Sfeerkaart: witte kaart met ronde hoeken waarin een sectie leeft */ .sfeerkaart { background: #fff; border-radius: 32px; box-shadow: 0 10px 40px rgba(31,122,77,.08); padding: clamp(28px,4vw,52px); position: relative; overflow: hidden; } /* Foto in organische blob-vorm */ .blob-foto { position: relative; } .blob-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 58% 42% 46% 54% / 44% 48% 52% 56%; box-shadow: 0 16px 44px rgba(31,122,77,.16); } .blob-foto--zacht img { border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; } /* De banner is bijna drie keer zo breed als hoog. In een blob van 4:3 blijft daar het midden van over, en dat is bij deze foto een stuk bos. De kinderen staan rechts, dus schuiven we de uitsnede die kant op. */ .blob-foto--rechts img { object-position: 68% center; } /* Beeld dat laat zien wat 'per mail' en 'per post' betekenen. Het staat in de kop van de prijzenpagina, in de kolom naast de tekst. Bewust geen blobvorm zoals bij de andere koppen: de woorden 'per mail' en 'per post' staan in het beeld zelf, aan de linker- en rechterkant. Een blob snijdt precies daar weg en dan is de uitleg juist verdwenen. */ .levering-beeld { margin: 0; border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw-diep); } .levering-beeld img { display: block; width: 100%; height: auto; } /* --- Lees meer ------------------------------------------------------- Voor de lange zoekmachineteksten. De tekst staat volledig in de HTML; alleen de hoogte is begrensd tot iemand hem openklapt. Dat is bewust, want tekst die pas na een klik wordt opgehaald leest Google niet mee. Het schuift met een verborgen selectievakje in plaats van met javascript, dus het blijft werken als er iets misgaat met scripts. */ .inklap { position: relative; text-align: center; } .inklap-schakel { position: absolute; width: 1px; height: 1px; opacity: 0; } .inklap-tekst { position: relative; max-height: 320px; overflow: hidden; text-align: left; } /* Vervaging onderaan, zodat het duidelijk is dat er meer staat. De kleur volgt de achtergrond van het vlak eromheen. */ /* Een ruime vervaging, zodat het afbreken er bedoeld uitziet in plaats van afgesneden. Waar de tekst precies stopt hangt van de inhoud af, dus er valt niet te voorkomen dat er soms midden in een kop wordt geknipt; met een lange vervaging valt dat nauwelijks op. */ .inklap-tekst::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; background: linear-gradient(0deg, var(--inklap-achtergrond, var(--wit)) 14%, rgba(255,255,255,0) 100%); } .inklap-schakel:checked ~ .inklap-tekst { max-height: none; } .inklap-schakel:checked ~ .inklap-tekst::after { opacity: 0; } .inklap-knop { margin-top: 20px; cursor: pointer; } .inklap-minder { display: none; } .inklap-schakel:checked ~ .inklap-knop .inklap-meer { display: none; } .inklap-schakel:checked ~ .inklap-knop .inklap-minder { display: inline; } /* Het vakje zelf is onzichtbaar, dus de focusrand hoort om de knop te staan. */ .inklap-schakel:focus-visible ~ .inklap-knop { outline: 2px solid var(--groen); outline-offset: 3px; } /* Polaroid */ .polaroid { background: #fff; padding: 14px 14px 46px; border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.16); transform: rotate(-3deg); position: relative; display: inline-block; } .polaroid img { display: block; width: 100%; border-radius: 3px; } /* Zwevende badge */ .zwevende-badge { position: absolute; z-index: 4; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: 0 12px 34px rgba(0,0,0,.14); text-align: center; max-width: 150px; } .zwevende-badge .icoon { width: 40px; height: 40px; margin: 0 auto 6px; display: grid; place-items: center; color: var(--groen); } .zwevende-badge .icoon .ico { width: 26px; height: 26px; } .zwevende-badge b { display: block; font-family: var(--font-kop); font-size: .88rem; line-height: 1.25; } /* Missie-kaarten (getinte kaartjes met een tekening erin) Vier gelijke vlakken met een lijntje-icoon lazen zakelijk, terwijl dit een winkel voor kinderfeestjes is. Elke kaart is nu een tafereeltje: een verloop van wit naar de tint van de kaart, een bol icoon met een witte ring, een stippellijn onder de kop en tekeningen in de hoeken (speur_decor()). De kleur loopt via --accent, zodat rand, icoon, kop en streep meekleuren. */ .missie { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; align-items: start; } /* De kaarten liggen los neergelegd in plaats van in het gelid: elke kaart een graadje gedraaid en de tweede en vierde iets lager. Klein houden is hier het werk; bij meer dan twee graden ziet het er niet speels uit maar scheef. De maten staan als variabele per kaart, zodat het onderin met één regel uit kan op een smal scherm. */ .missie-kaart { --draai: 0deg; --zak: 0px; } .missie--speels > .missie-kaart:nth-child(1) { --draai: -1.6deg; } .missie--speels > .missie-kaart:nth-child(2) { --draai: 1.2deg; --zak: 20px; } .missie--speels > .missie-kaart:nth-child(3) { --draai: -1deg; } .missie--speels > .missie-kaart:nth-child(4) { --draai: 1.8deg; --zak: 14px; } .missie-kaart { /* Een rooster laat een kolom standaard niet smaller worden dan zijn inhoud. Bij vier kaarten naast elkaar kan één lang woord de hele rij dan buiten de pagina duwen, en dat zie je pas op een bepaalde schermbreedte. */ min-width: 0; position: relative; z-index: 0; padding: 34px 22px 40px; text-align: center; border-radius: 30px; border: 2px solid var(--rand-kleur); background: linear-gradient(180deg, var(--wit) 0%, var(--wit) 22%, var(--vlak-kleur) 100%); color: var(--accent); box-shadow: 0 12px 30px rgba(38,58,48,.09); transform: translateY(var(--zak)) rotate(var(--draai)); transition: transform .28s ease, box-shadow .28s ease; } /* Tekeningen mogen over de rand steken, dus de kaart mag niet afknippen. Bij het aanwijzen komt de kaart naar voren en dus boven zijn buren. */ /* Bij het aanwijzen komt de kaart recht te liggen en een stukje omhoog, alsof je hem oppakt. Dat leest prettiger dan een kaart die scheef blijft hangen. */ .missie-kaart:hover { transform: translateY(calc(var(--zak) - 10px)) rotate(0deg); box-shadow: 0 22px 44px rgba(38,58,48,.15); z-index: 2; } /* Icoon als een bol knoopje: verloop, witte ring, zachte schaduw en een glans. */ .missie-kaart .ring { position: relative; z-index: 1; width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 999px; background: radial-gradient(circle at 33% 26%, var(--accent-licht), var(--accent) 66%); border: 5px solid var(--wit); color: var(--wit); display: grid; place-items: center; box-shadow: 0 10px 22px rgba(38,58,48,.18), 0 0 0 2px var(--rand-kleur); transition: transform .28s ease; } /* Lichtvlekje, hetzelfde trucje als bij een glanzende sticker. */ .missie-kaart .ring::after { content: ""; position: absolute; top: 13px; left: 17px; width: 18px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.42); transform: rotate(-32deg); } .missie-kaart:hover .ring { transform: scale(1.06); } .missie-kaart .ring .ico { width: 38px; height: 38px; position: relative; z-index: 1; } .missie-kaart h3 { position: relative; z-index: 1; font-size: 1.16rem; margin: 0; color: inherit; } /* Stippellijn onder de kop, in plaats van een strak scheidingslijntje. */ .missie-kaart h3::after { content: ""; display: block; width: 120px; max-width: 78%; margin: 14px auto 15px; border-top: 3px dashed var(--rand-kleur); } .missie-kaart p { position: relative; z-index: 1; color: var(--tekst-zacht); font-size: .95rem; margin: 0; } .missie-kaart--groen { --accent: var(--groen); --accent-licht: #4aa876; --vlak-kleur: #e6f5ed; --rand-kleur: #c3e2d3; } .missie-kaart--oranje{ --accent: var(--oranje-donker); --accent-licht: #f9ab4b; --vlak-kleur: #fef2e2; --rand-kleur: #f6d6a8; } .missie-kaart--blauw { --accent: var(--blauw); --accent-licht: #6aa8e6; --vlak-kleur: #e7f0fc; --rand-kleur: #bfd7f4; } .missie-kaart--roze { --accent: var(--roze); --accent-licht: #f591b9; --vlak-kleur: #fdebf2; --rand-kleur: #f6c5d7; } /* Tekeningen in en om een kaart. Ze vangen geen muis, want er zit een link noch tekst in; de plek van elk stuk staat hieronder per naam. */ .kaart-decor { position: absolute; inset: 0; pointer-events: none; } .kaart-decor .decor { position: absolute; display: block; line-height: 0; } .kaart-decor .decor svg { width: 100%; height: 100%; display: block; } /* Alleen de grond loopt mee met de ronde hoeken; de rest steekt eroverheen. */ .kaart-grond { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; } /* De maten lopen via --ds (decor-schaal), zodat de tekeningen in een kleinere kaart in verhouding meekrimpen zonder dat elke regel apart terug moet komen. */ .kaart-decor { --ds: 1; } .decor--blad { top: -10px; left: -10px; width: calc(62px * var(--ds)); height: calc(62px * var(--ds)); } .decor--ster { bottom: 34px; right: 16px; width: calc(30px * var(--ds)); height: calc(30px * var(--ds)); } .decor--wegwijzer { bottom: 2px; left: -4px; width: calc(58px * var(--ds)); height: calc(48px * var(--ds)); } .decor--heuvel { left: 0; right: 0; bottom: 0; height: calc(58px * var(--ds)); } .decor--gras { left: 0; right: 0; bottom: 0; height: calc(42px * var(--ds)); } .decor--zon-wolk { top: 4px; right: 2px; width: calc(84px * var(--ds)); height: calc(56px * var(--ds)); } .decor--bloem { bottom: 12px; right: 26px; width: calc(24px * var(--ds)); height: calc(30px * var(--ds)); } .decor--kroon { top: -12px; right: 6px; width: calc(56px * var(--ds)); height: calc(42px * var(--ds)); } .decor--sprankels { top: 40px; left: 8px; width: calc(42px * var(--ds)); height: calc(42px * var(--ds)); } .decor--schatkist { bottom: -8px; right: -4px; width: calc(60px * var(--ds)); height: calc(46px * var(--ds)); } .decor--confetti-a{ top: 30px; left: 6px; width: calc(60px * var(--ds)); height: calc(44px * var(--ds)); } .decor--confetti-b{ top: 14px; right: 4px; width: calc(54px * var(--ds)); height: calc(42px * var(--ds)); } .decor--boekje { bottom: 2px; right: 2px; width: calc(68px * var(--ds)); height: calc(46px * var(--ds)); } /* De vaartstrepen staan links en rechts van het icoon; rechts is dezelfde tekening, gespiegeld. Ze kleuren mee met de kaart via currentColor. */ .decor--vaart { top: 52px; left: 14px; width: calc(24px * var(--ds)); height: calc(32px * var(--ds)); } .decor--vaart ~ .decor--vaart { left: auto; right: 14px; transform: scaleX(-1); } @media (prefers-reduced-motion: reduce){ .missie-kaart, .missie-kaart .ring { transition: none; } /* Wie geen beweging wil, wil ook geen scheve kaarten. */ .missie--speels > .missie-kaart { --draai: 0deg; --zak: 0px; } } /* Organische groene sectie */ /* Alles in wolken. De vormen komen uit tools/wolkvorm.py: één gesloten pad per wolk, als achtergrond van het vak. Als los element erin zou de wolk de opmaak nodig hebben om te weten hoe groot hij mag worden, en spant hij zich over de hele pagina op zodra die even niet meekomt. Een achtergrond volgt altijd het vak, en staat bovendien achter de tekst in plaats van eroverheen. */ .blob-sectie { /* Geen grote wolk meer als achtergrond; de vier wolkjes staan los op de pagina. De ruimte eromheen kon daardoor een stuk kleiner: die was er om de inhoud binnen de vorm te houden. */ position: relative; padding: clamp(18px, 2.4vw, 30px) 0 clamp(10px, 1.4vw, 18px); } .blob-sectie > .blok-titel { position: relative; z-index: 1; } .blob-rij { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px, 2vw, 26px); } /* Elk punt in zijn eigen wolkje. De kleur zit in de achtergrond en niet in een rand, want een lijn om een wolk heen maakt hem hard. */ .blob-item { display: flex; flex-direction: column; align-items: center; text-align: center; /* Ruim binnen de vorm blijven. De onderste bollen krullen naar binnen weg, dus een derde tekstregel valt er zo onderuit; dat gebeurde bij "Compleet verzorgd". De ruimte staat in procenten van de breedte, dus hij schaalt mee met het wolkje. */ gap: 4px; padding: 13% 15% 18%; background: url("data:image/svg+xml,") center / 100% 100% no-repeat; } .blob-item .ring { flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--radius-pil); background: #fff; border: 2px solid currentColor; display: grid; place-items: center; margin-bottom: 6px; } .blob-item .ring .ico { width: 21px; height: 21px; } .blob-item b { display: block; font-family: var(--font-kop); font-size: .96rem; color: var(--tekst); } .blob-item span.uitleg { color: var(--tekst-zacht); font-size: .84rem; line-height: 1.5; } /* Elk wolkje een eigen tint, in dezelfde volgorde als de iconen. Heel licht houden: het wolkje draagt de tekst, het is niet het onderwerp. De vorm is dezelfde tekening met een andere vulkleur; dat is een paar regels langer dan een masker, maar het werkt overal en valt nooit terug op een blokje kleur. */ .blob-rij > .blob-item:nth-child(1) { background-image: url("data:image/svg+xml,"); } /* groen */ .blob-rij > .blob-item:nth-child(2) { background-image: url("data:image/svg+xml,"); } /* oranje */ .blob-rij > .blob-item:nth-child(3) { background-image: url("data:image/svg+xml,"); } /* blauw */ .blob-rij > .blob-item:nth-child(4) { background-image: url("data:image/svg+xml,"); } /* roze */ /* De tekeningen rond de band. Ze staan buiten de tekst en mogen over de rand van de wolk heen steken, dus geen overflow: hidden op de band. */ .wolk-decor { position: absolute; inset: 0; pointer-events: none; } /* Zacht houden: de tekeningen zijn sfeer, geen inhoud. */ .wolkje { position: absolute; display: block; line-height: 0; opacity: .5; } .wolkje svg { width: 100%; height: 100%; display: block; } .wolkje--ster-links { top: 14%; left: 4%; width: 26px; height: 26px; } .wolkje--sprankels-boven { top: 8%; left: 17%; width: 30px; height: 30px; color: #bcdcc8; } .wolkje--sprankels-rechts { top: 11%; right: 5%; width: 34px; height: 34px; color: #bcdcc8; } .wolkje--ster-onder { bottom: 12%; right: 9%; width: 24px; height: 24px; } /* Score-rozet */ @media (max-width: 980px){ /* Twee wolkjes naast elkaar; vier naast elkaar wordt hier te smal voor de tekst. */ .blob-rij { grid-template-columns: repeat(2,1fr); gap: 10px; } .missie { grid-template-columns: repeat(2,1fr); } /* Twee naast elkaar in plaats van vier: dan gaat het scheefliggen tegenwerken, want de kaarten staan dichter op elkaar en het zakken maakt de rijen ongelijk. Hier gewoon recht en op één lijn. */ .missie--speels > .missie-kaart { --draai: 0deg; --zak: 0px; } } @media (max-width: 640px){ /* Op een telefoon blijven het er twee naast elkaar, dus twee bij twee. Vier kaarten onder elkaar werden een lange sliert waar je doorheen moest scrollen; naast elkaar zie je in een oogopslag wat je krijgt. Alles krimpt mee: de kaart, het icoon, de tekst en via --ds ook de tekeningen. */ .missie { gap: 12px; } .missie-kaart { padding: 20px 10px 26px; border-radius: 22px; } .missie-kaart .kaart-decor { --ds: .66; } .missie-kaart .kaart-grond { border-radius: 20px; } .missie-kaart .ring { width: 58px; height: 58px; border-width: 4px; margin-bottom: 12px; } .missie-kaart .ring::after { top: 9px; left: 11px; width: 12px; height: 7px; } .missie-kaart .ring .ico { width: 25px; height: 25px; } .missie-kaart h3 { font-size: .94rem; line-height: 1.25; } .missie-kaart h3::after { width: 64px; margin: 9px auto 10px; border-top-width: 2px; } .missie-kaart p { font-size: .78rem; line-height: 1.5; } /* De tekeningen die het dichtst bij de tekst komen, staan in een smalle kaart in de weg. */ .decor--ster, .decor--bloem, .decor--confetti-b { display: none; } .decor--vaart { top: 34px; left: 4px; } .decor--vaart ~ .decor--vaart { right: 4px; } .decor--sprankels { top: 26px; left: 2px; } .decor--confetti-a { top: 18px; left: 2px; } /* Op een telefoon een strook waar je doorheen veegt, in plaats van vier wolkjes naast of onder elkaar. In twee smalle kolommen persen werkte niet: de vorm rekt mee met het vak, dus een smal en hoog vak levert een uitgerekte pluim op en geen wolk meer. Zo houdt elk wolkje zijn eigen verhouding en blijft het een wolk. Het volgende steekt half in beeld, wat meteen laat zien dat er meer is. */ .blob-rij { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } .blob-rij::-webkit-scrollbar { display: none; } .blob-item { flex: 0 0 74%; scroll-snap-align: center; aspect-ratio: 410 / 340; justify-content: center; padding: 8% 13% 12%; } .zwevende-badge { display: none; } } /* ========================================================================= Over ons — layout ========================================================================= */ .over-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px,4vw,54px); align-items: center; } .over-hero-tekst h1 { font-size: clamp(2.1rem,4.4vw,3.4rem); color: var(--groen-donker); margin-bottom: .4em; } .over-hero-tekst h1 .accent-oranje { color: var(--oranje); } .over-hero-tekst p { color: var(--tekst-zacht); max-width: 30em; margin-bottom: 24px; } .over-hero-beeld { position: relative; } .over-hero-beeld .blob-foto img { aspect-ratio: 4/3; } /* Even voorstellen */ .voorstel-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,70px); align-items: center; } .voorstel-foto { position: relative; display: grid; place-items: center; } .voorstel-foto .polaroid { max-width: 330px; } .voorstel-tekst { position: relative; } .voorstel-tekst h2 { color: var(--groen); margin-bottom: .6em; } .voorstel-tekst p { color: var(--tekst-zacht); } .voorstel-tekst strong { color: var(--tekst); } .voorstel-slot { color: var(--groen) !important; font-weight: 800; font-family: var(--font-kop); font-size: 1.05rem; } /* Missie */ .missie-sectie { position: relative; } .missie-sectie .sectie-kop .eyebrow { display: block; } /* Scoreblok */ @media (max-width: 980px){ .over-hero-grid { grid-template-columns: 1fr; } .over-hero-beeld { order: -1; } .voorstel-grid { grid-template-columns: 1fr; } } /* ========================================================================= Homepage — stijl gelijkgetrokken met de sfeerstijl ========================================================================= */ .sectie-kop .eyebrow { display: block; } .blok-kop .eyebrow { display: block; margin-bottom: 0; } /* FAQ-blok krijgt zelf een zachte tint nu de sectie wit is */ .faq-tips { background: var(--creme); border-radius: 32px; padding: clamp(26px,4vw,48px); } .faq-tips .faq-item, .faq-tips .tip { background: #fff; } /* Reviews-band op wit: kaartjes iets meer contrast */ /* ========================================================================= Hoe werkt het — stappenkaarten, uitleglijst, startrij, hulpblok ========================================================================= */ /* Kleine badge boven de titel */ .mini-badge { display:inline-flex; align-items:center; gap:7px; background:var(--groen-licht); color:var(--groen); font-family:var(--font-kop); font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pil); margin-bottom:14px; } .mini-badge::before { content:""; width:7px; height:7px; border-radius:999px; background:var(--groen); } /* Uitleglijst in twee kolommen */ /* align-items:start is hier het punt. Zonder die regel rekt een dichtgeklapt blok mee met de hoogte van een opengeklapt blok ernaast. Je krijgt dan een kaart met een grote lege onderkant, en die ruimte hoort niet bij de summary en reageert dus niet op een klik. */ .uitleg-lijst { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } .uitleg-item { background:#fff; border:1px solid var(--rand); border-radius:18px; overflow:hidden; box-shadow:var(--schaduw); } .uitleg-item summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:16px 18px; user-select:none; } .uitleg-item summary::-webkit-details-marker{display:none} .uitleg-item .vak { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; } .uitleg-item .vak .ico { width:22px; height:22px; } .uitleg-item b { display:block; font-family:var(--font-kop); font-size:1rem; } .uitleg-item .sub { color:var(--tekst-zacht); font-size:.85rem; } .uitleg-item .chev { color:var(--tekst-zacht); transition:transform .15s; } .uitleg-item[open] .chev { transform:rotate(180deg); } .uitleg-item .meer { padding:0 18px 18px 78px; color:var(--tekst-zacht); font-size:.93rem; } /* Start-rij met verbindingspijlen */ .start-rij { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative; } .start-kaart { position:relative; background:#fff; border:1px solid var(--rand); border-radius:22px; padding:34px 24px 26px; text-align:center; box-shadow:var(--schaduw); } .start-kaart .nr { position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:999px; display:grid; place-items:center; color:#fff; font-family:var(--font-kop); font-weight:800; border:4px solid #fff; } .start-kaart .beeld { width:74px; height:74px; margin:6px auto 14px; display:grid; place-items:center; border-radius:20px; } .start-kaart .beeld .ico { width:38px; height:38px; } .start-kaart p { color:var(--tekst-zacht); font-size:.92rem; margin:0; } .start-rij .verbind { position:absolute; top:50%; width:34px; border-top:2px dashed #c9d6cd; } .start-rij .verbind--1 { left:calc(33.33% - 17px); } .start-rij .verbind--2 { left:calc(66.66% - 17px); } /* Hulpblok */ .hulp-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; } .hulp-kaart { background:var(--creme); border-radius:26px; padding:clamp(24px,3vw,36px); position:relative; overflow:hidden; } .hulp-punt { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; } .hulp-punt .ring { flex:0 0 38px; width:38px; height:38px; border-radius:999px; background:#fff; border:2px solid currentColor; display:grid; place-items:center; } .hulp-punt .ring .ico { width:18px; height:18px; } .hulp-punt b { display:block; font-family:var(--font-kop); font-size:.98rem; color:var(--tekst); } .hulp-punt span.uitleg { color:var(--tekst-zacht); font-size:.87rem; } .hulp-mascotte { position:absolute; right:-10px; bottom:-8px; width:120px; height:auto; } @media (max-width:900px){ .uitleg-lijst{grid-template-columns:1fr} .start-rij{grid-template-columns:1fr} .start-rij .verbind{display:none} .hulp-grid{grid-template-columns:1fr} } @media (max-width:600px){ .hulp-mascotte{display:none} } /* ===================================================================== ONDERDELEN VOOR DE HELE SITE (v0.3) Paginakoppen, leestypografie, winkel en de vertaalde oude opmaak. ===================================================================== */ /* --- Smallere leeskolom voor juridische en informatieve pagina's ---- */ .container--smal { max-width: 860px; } /* --- Sfeerkop boven een gewone pagina ------------------------------- */ .pagina-kop { text-align: center; position: relative; overflow: hidden; padding: clamp(38px,5vw,64px) clamp(20px,4vw,56px); } .pagina-kop--smal { padding-block: clamp(34px,4vw,54px); } .pagina-kop h1 { margin: .1em 0 .25em; } .pagina-kop-intro { color: var(--tekst-zacht); font-size: 1.12rem; max-width: 46em; margin: 0 auto; } .pagina-kop .eyebrow { justify-content: center; } /* --- Kruimelpad ----------------------------------------------------- */ .kruimels { padding: 14px 0 0; } .kruimels ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--tekst-zacht); } .kruimels li + li::before { content: "›"; margin-right: 6px; opacity: .6; } .kruimels a { color: var(--tekst-zacht); text-decoration: none; } .kruimels a:hover { color: var(--groen); text-decoration: underline; } .kruimels [aria-current] { color: var(--tekst); font-weight: 700; } @media (max-width: 760px) { /* Op een telefoon viel het kruimelpad over twee regels, en dat voor informatie die je grotendeels al hebt: "Home" en de titel van de pagina waar je op dat moment staat. Wat overblijft is de enige stap die je er echt mee kunt zetten, namelijk terug naar het overzicht. Dat past op één regel en krijgt de vorm van de knopjes die elders op de site staan, zodat het er niet meer bij hangt als losse tekst. Voor Google verandert er niets: het volledige kruimelpad staat als aparte gegevens in de pagina en niet in deze opsomming. */ .kruimels ol { flex-wrap: nowrap; gap: 0; } /* Alleen de stap direct boven je: dat is de enige die je hier echt gebruikt. Op een artikel staan er drie boven elkaar (home, blog, onderwerp) en dan zou je met drie terugknopjes eindigen. */ .kruimels li { display: none; } .kruimels li:nth-last-child(2) { display: block; } .kruimels li + li::before { content: none; } .kruimels a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px 6px 11px; border-radius: var(--radius-pil); background: rgba(255,255,255,.72); border: 1px solid var(--rand); color: var(--groen); font-weight: 700; font-size: .84rem; } .kruimels a::before { content: "\2039"; font-size: 1.2em; line-height: 1; margin-top: -2px; } } /* --- Papieren blad om lopende tekst -------------------------------- */ .papier-blad { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: clamp(26px,4vw,54px); } /* --- Leestypografie ------------------------------------------------- */ .prose { color: var(--tekst); font-size: 1.04rem; line-height: 1.75; } .prose > *:first-child { margin-top: 0; } .prose > *:last-child { margin-bottom: 0; } .prose h2 { font-family: var(--font-kop); font-size: clamp(1.35rem,2.4vw,1.8rem); color: var(--groen-donker); } .prose h3 { font-family: var(--font-kop); font-size: 1.2rem; margin: 1.5em 0 .4em; } .prose h4 { font-family: var(--font-kop); font-size: 1.05rem; margin: 1.3em 0 .3em; } .prose a { color: var(--groen); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--oranje-donker); } /* Een knop in lopende tekst blijft een knop. De regel hierboven maakt van elke link in een tekstblok een groene onderstreepte link, en dan werd de witte tekst op een oranje knop ineens groen met een streep eronder. */ .prose a.knop, .oud-tekst a.knop { text-decoration: none; } .prose a.knop--oranje, .prose a.knop--groen, .oud-tekst a.knop--oranje, .oud-tekst a.knop--groen { color: #fff; } .prose a.knop--oranje:hover, .prose a.knop--groen:hover, .oud-tekst a.knop--oranje:hover, .oud-tekst a.knop--groen:hover { color: #fff; } .prose a.knop--wit, .oud-tekst a.knop--wit { color: var(--groen); } .prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.3em; } .prose li { margin-bottom: .4rem; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius); } .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--rand); padding: 9px 12px; text-align: left; } .prose th { background: var(--creme); font-family: var(--font-kop); } .prose blockquote { margin: 0 0 1.2rem; padding: 14px 18px; background: var(--creme); border-left: 4px solid var(--geel); border-radius: 0 var(--radius) var(--radius) 0; } .prose hr { border: 0; border-top: 1px dashed var(--rand); margin: 2em 0; } /* Juridische tekst mag wat rustiger en compacter. */ .prose--juridisch { font-size: .99rem; } .prose--juridisch h2 { font-size: 1.25rem; margin-top: 1.9em; } /* Losse regel met een vinkje (kwam uit [bullet_item]). */ .vinkregel { display: flex; gap: 9px; align-items: flex-start; margin-bottom: .5rem; } .vinkregel .ico { flex: 0 0 20px; width: 20px; height: 20px; color: var(--groen); margin-top: 3px; } /* --- Hulpstrook onderaan informatiepagina's ------------------------- */ .hulp-strook { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px; padding: 20px 24px; background: var(--creme); border-radius: var(--radius-groot); } .hulp-strook .ring { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 999px; background: #fff; border: 2px solid var(--groen); color: var(--groen); display: grid; place-items: center; } .hulp-strook div { flex: 1 1 240px; } .hulp-strook b { display: block; font-family: var(--font-kop); } .hulp-strook span { color: var(--tekst-zacht); font-size: .92rem; } /* --- Sterren -------------------------------------------------------- */ .sterren { color: var(--geel); letter-spacing: 1px; font-size: .95rem; } .sterren-leeg { color: var(--rand); } .sterren-aantal { color: var(--tekst-zacht); font-size: .82rem; margin-left: 5px; } /* --- Productkaart: onderrand met prijs en knop ---------------------- */ .product-kaart-onder { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; } .product-kaart-onder .knop { width: auto; padding-inline: 18px; } .product-badge--actie { background: var(--roze); color: #fff; } /* --- Vertrouwensstrook --------------------------------------------- */ /* Vijf punten in één strook. Ze zijn ongelijk van lengte, dus geen vaste kolommen maar een rij die netjes afbreekt als er geen ruimte meer is. */ .usp-blok { background: var(--creme); border-radius: var(--radius-groot); padding: clamp(20px,3vw,30px); } .usp-strook { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; } .usp-punt { display: flex; gap: 10px; align-items: center; } .usp-punt .ring { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px; background: #fff; border: 2px solid var(--groen); color: var(--groen); display: grid; place-items: center; } .usp-punt .ring .ico { width: 17px; height: 17px; } .usp-punt b { font-family: var(--font-kop); font-weight: 700; font-size: .93rem; } @media (max-width: 760px) { /* Onder elkaar en links uitgelijnd, zodat de regels niet gaan slingeren. */ .usp-strook { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ===================================================================== WOOCOMMERCE ===================================================================== */ .woo .winkel-kop { margin-bottom: clamp(28px,4vw,44px); } .woo ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; } .woo ul.products::before, .woo ul.products::after { content: none; } .woo ul.products li.product { margin: 0; width: auto; float: none; } .winkel-usp { margin: clamp(34px,5vw,56px) auto 0; max-width: var(--container); padding-inline: 20px; } /* Terug-link boven een product */ .terug-link { display: inline-block; margin-bottom: 14px; color: var(--tekst-zacht); text-decoration: none; font-size: .92rem; } .terug-link:hover { color: var(--groen); } /* Productpagina */ .woo .product .summary h1 { font-size: clamp(1.6rem,3vw,2.3rem); margin-bottom: .3em; } .woo .product .price { font-family: var(--font-kop); font-size: 1.5rem; color: var(--groen-donker); } .woo .product .single_add_to_cart_button { background: var(--oranje); color: #fff; border: 0; border-radius: var(--radius-pil); font-family: var(--font-kop); font-size: 1.05rem; padding: 13px 26px; cursor: pointer; } .woo .product .single_add_to_cart_button:hover { background: var(--oranje-donker); } /* Tabbladen */ .woo .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; } .woo .woocommerce-tabs ul.tabs li { margin: 0; } .woo .woocommerce-tabs ul.tabs a { display: block; padding: 10px 20px; border-radius: var(--radius-pil); background: var(--creme); font-family: var(--font-kop); color: var(--tekst); text-decoration: none; } .woo .woocommerce-tabs ul.tabs li.active a { background: var(--groen); color: #fff; } .woo .woocommerce-tabs .panel { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(22px,3vw,36px); margin-top: 16px; } /* ===================================================================== BESTELROUTE: winkelwagen en afrekenen Allebei dezelfde vorm: links waar je iets doet, rechts wat het kost en de knop om door te gaan. Die rechterkolom loopt mee in beeld, zodat het bedrag en de knop nooit uit zicht raken. Het stond eerder onder elkaar, en dan scrol je op een gevulde bestelling naar een knop die je niet ziet. ===================================================================== */ /* --- Formuliervelden en tabellen elders in de winkel ------------------ */ .woo table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; } .woo table.shop_table th, .woo table.shop_table td { padding: 14px; border-bottom: 1px solid var(--rand); text-align: left; } .woo table.shop_table th { background: var(--creme); font-family: var(--font-kop); } /* WooCommerce kleurt zijn knoppen paars. De belangrijke variant heet daar .alt en weegt met drie klassen zwaarder dan een regel met er twee. Daarom noemen we .alt hier ook met zoveel woorden: zonder dat staat er bijvoorbeeld een paarse downloadknop in een groen-oranje winkel. */ .woo a.button, .woo button.button, .woo input.button, .woo a.button.alt, .woo button.button.alt, .woo input.button.alt { background: var(--groen); color: #fff; border: 0; border-radius: var(--radius-pil); font-family: var(--font-kop); padding: 12px 24px; cursor: pointer; text-decoration: none; display: inline-block; } .woo a.button:hover, .woo button.button:hover, .woo input.button:hover, .woo a.button.alt:hover, .woo button.button.alt:hover, .woo input.button.alt:hover { background: var(--groen-donker); color: #fff; } .woo form .form-row { margin: 0 0 14px; } .woo form .form-row label { display: block; font-family: var(--font-kop); font-size: .92rem; margin-bottom: 5px; } .woo form .form-row input.input-text, .woo form .form-row textarea, .woo form .form-row select, .woo .select2-selection { width: 100%; padding: 11px 14px; border: 1px solid var(--rand); border-radius: var(--radius); font-family: var(--font-tekst); font-size: .98rem; background: #fff; } .woo form .form-row input.input-text:focus, .woo form .form-row textarea:focus, .woo form .form-row select:focus { outline: 3px solid var(--groen-licht); outline-offset: 1px; border-color: var(--groen); } /* WooCommerce zet hier een streep bovenlangs; daarom eerst alle randen weg en dan onze eigen streep aan de zijkant. Alleen border-left zetten liet die blauwe streep gewoon staan. */ .woo .woocommerce-message, .woo .woocommerce-info, .woo .woocommerce-error { background: var(--creme); border: 0; border-left: 4px solid var(--groen); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 0 0 20px; list-style: none; color: var(--tekst); } .woo .woocommerce-message::before, .woo .woocommerce-info::before, .woo .woocommerce-error::before { content: none; } .woo .woocommerce-error { border-left-color: var(--roze); } .woo .woocommerce-message .button, .woo .woocommerce-info .button { float: none; } /* --- Winkelwagen ----------------------------------------------------- */ .wagen { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: start; } .wagen-regels { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .wagen-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: clamp(12px, 1.6vw, 18px); align-items: center; background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 14px; box-shadow: var(--schaduw); } .wagen-beeld { display: block; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--vlak); } .wagen-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } .wagen-tekst { display: grid; gap: 2px; min-width: 0; } .wagen-naam { font-family: var(--font-kop); font-weight: 700; font-size: 1.02rem; color: var(--tekst); text-decoration: none; } .wagen-naam:hover { color: var(--groen); } /* De gekozen bezorgwijze staat in een definitielijst. Op één regel achter elkaar leest dat als een label, niet als een lijstje. */ .wagen-tekst .variation { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 2px 0 0; font-size: .86rem; color: var(--tekst-zacht); } .wagen-tekst .variation dt, .wagen-tekst .variation dd { margin: 0; } .wagen-tekst .variation dd p { margin: 0; } .wagen-stuksprijs { font-size: .84rem; color: var(--tekst-zacht); } .wagen-aantal { display: flex; align-items: center; gap: 4px; } .wagen-stap { width: 32px; height: 32px; border-radius: 999px; cursor: pointer; border: 1px solid var(--rand); background: #fff; color: var(--tekst); font-size: 1.05rem; line-height: 1; } .wagen-stap:hover { border-color: var(--groen); color: var(--groen); } .wagen-aantal .quantity { margin: 0; } .wagen-aantal input.qty { width: 48px; height: 34px; text-align: center; border: 1px solid var(--rand); border-radius: 10px; background: #fff; font-family: var(--font-kop); font-size: .95rem; } .wagen-bedrag { font-family: var(--font-kop); font-weight: 800; font-size: 1.05rem; white-space: nowrap; } .wagen-weg a.remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--vlak); color: var(--tekst-zacht); text-decoration: none; font-size: 1.15rem; line-height: 1; } .wagen-weg a.remove:hover { background: #fdeef4; color: var(--roze); } .wagen-acties { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-top: 16px; } /* De min-width hoort erbij: een flexonderdeel mag standaard niet kleiner worden dan zijn eigen inhoud, en het invoerveld voor de kortingscode rekent zichzelf op zo'n twintig tekens. Zonder deze regel houdt het blok een ondergrens van 348 beeldpunten vast, ook op een telefoon van 360. */ .wagen-acties .coupon { flex: 1 1 280px; min-width: 0; } .wagen-acties label { display: block; font-family: var(--font-kop); font-size: .9rem; margin-bottom: 6px; } .coupon-veld { display: flex; gap: 8px; } .coupon-veld input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; font-family: var(--font-tekst); font-size: .95rem; } /* Met javascript telt een gewijzigd aantal meteen mee, dan is deze knop alleen nog verwarrend. Zonder javascript is hij de enige manier. De markering staat op de body en niet op het formulier: WooCommerce vervangt dat formulier na elke wijziging, en dan kwam de knop weer tevoorschijn. */ body.wagen-js .wagen-bijwerken { display: none; } .wagen-verder { display: inline-block; margin-top: 18px; color: var(--tekst-zacht); text-decoration: none; font-size: .92rem; } .wagen-verder:hover { color: var(--groen); } /* --- Het overzicht ernaast ------------------------------------------- */ .wagen-zij { position: sticky; top: 96px; } /* WooCommerce laat dit blok zweven op 48% breedte, uit de tijd dat het onder de winkelwagen hing in plaats van ernaast. In onze kolom moet het gewoon de hele breedte pakken, anders staat er een smal kaartje met een knop waar de tekst op drie regels in past. */ .woo .wagen-zij, .woo .wagen-zij .cart_totals { float: none; width: 100%; } .wagen-overzicht, .afreken-zij { background: var(--creme); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.2vw, 26px); } .wagen-overzicht h2 { font-size: 1.15rem; margin: 0 0 10px; } /* De tabel eronder komt van WooCommerce en houdt zijn rijen. We halen alleen de doos eromheen weg, zodat het een lijstje bedragen wordt. Overal .woo ervoor. WooCommerce heeft voor deze cellen een regel met drie klassen (.woocommerce-cart .cart-collaterals .cart_totals tr th) en zonder dat extra woord weegt die van hem zwaarder dan die van ons. Dan staan er grijze streepjes tussen de bedragen die wij niet gevraagd hebben. */ .woo .wagen-overzicht table.shop_table, .woo .afreken-zij table.shop_table { background: none; border: 0; border-radius: 0; padding: 0; } .woo .wagen-overzicht table.shop_table th, .woo .wagen-overzicht table.shop_table td, .woo .afreken-zij table.shop_table th, .woo .afreken-zij table.shop_table td { background: none; border: 0; padding: 7px 0; vertical-align: top; font-family: var(--font-tekst); font-weight: 400; font-size: .94rem; } .woo .wagen-overzicht table.shop_table th, .woo .afreken-zij table.shop_table th { color: var(--tekst-zacht); text-align: left; } .woo .wagen-overzicht table.shop_table td, .woo .afreken-zij table.shop_table td { text-align: right; color: var(--tekst); } /* Achter het totaal zet WooCommerce nog "(inclusief x btw)". Dat mag afbreken, anders wordt de tabel breder dan het kaartje en loopt het bedrag eruit. */ .woo .wagen-overzicht table.shop_table small, .woo .afreken-zij table.shop_table small { display: block; font-size: .78rem; font-weight: 400; color: var(--tekst-zacht); white-space: normal; } /* In het overzicht van de winkelwagen staan alleen bedragen; daar mag de eerste kolom een vaste verhouding krijgen. Bij het afrekenen staan de producten in dezelfde tabel, en dan zou een vaste verhouding de productnaam de halve breedte geven. Daar krimpt de bedragkolom in plaats daarvan tot precies wat hij nodig heeft (width: 1% doet dat bij een tabel), zodat de naam de rest krijgt. */ .woo .wagen-overzicht table.shop_table { table-layout: fixed; } .woo .wagen-overzicht table.shop_table th { width: 55%; } /* Een tabel deelt zijn kolombreedte over alle rijen. Liet ik de bedragkolom krimpen tot wat de productprijs nodig heeft, dan kreeg de regel "(inclusief x btw)" onder het totaal diezelfde smalle kolom en kwam die er woord voor woord onder te staan. Vandaar een vaste verhouding. De productnaam lijnt links uit; de algemene regel hierboven zet alle cellen rechts, en die telt zwaarder dan een regel zonder de tabel erin. */ .woo .afreken-zij table.shop_table { table-layout: fixed; } .woo .afreken-zij table.shop_table tbody td.product-name { width: 62%; text-align: left; } .woo .afreken-zij table.shop_table tbody td.product-total { width: 38%; white-space: nowrap; } .woo .wagen-overzicht tr.order-total th, .woo .wagen-overzicht tr.order-total td, .woo .afreken-zij tr.order-total th, .woo .afreken-zij tr.order-total td { padding-top: 12px; border-top: 1px solid var(--rand); font-family: var(--font-kop); font-weight: 800; font-size: 1.15rem; color: var(--tekst); } .wagen-overzicht ul#shipping_method, .afreken-zij ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; } .wagen-overzicht ul#shipping_method li, .afreken-zij ul#shipping_method li { margin: 0 0 4px; } .wc-proceed-to-checkout { margin-top: 16px; } /* WooCommerce kleurt zijn eigen knoppen paars met .woocommerce a.button.alt. Daar moeten we in gewicht overheen, anders staat er een paarse knop in een groen-oranje winkel. */ .woo .wagen-overzicht a.checkout-button.button { display: block; width: 100%; min-height: 50px; line-height: 26px; text-align: center; padding: 12px 20px; background: var(--oranje); color: #fff; border-radius: var(--radius-pil); font-family: var(--font-kop); text-decoration: none; } .woo .wagen-overzicht a.checkout-button.button:hover { background: var(--oranje-donker); } /* --- Lege winkelwagen ------------------------------------------------- */ .wagen-leeg { max-width: 540px; margin: 0 auto; text-align: center; padding: clamp(16px, 3vw, 34px) 0; } .wagen-leeg .ring { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); } .wagen-leeg .ring .ico { width: 34px; height: 34px; } .wagen-leeg h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 .3em; } .wagen-leeg p { color: var(--tekst-zacht); margin: 0 0 22px; } .wagen-leeg-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* --- Afrekenen op één pagina ------------------------------------------ */ .afreken { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: start; } .afreken-kolom { display: grid; gap: 16px; } #customer_details { display: grid; gap: 16px; } /* De kolommen col-1 en col-2 zijn alleen een aanknopingspunt voor WooCommerce; de doos zetten we om de blokken zelf, want die bestaan alleen als er ook echt iets in staat. Bij een bestelling per mail is er geen verzendadres, en een lege witte kaart zou dan raar staan. */ /* WooCommerce geeft deze twee kolommen 48% en laat ze zweven, uit de tijd dat het factuur- en verzendadres naast elkaar stonden. In onze indeling staan ze onder elkaar in de linkerkolom, dus ze pakken gewoon de volle breedte. */ .woo .afreken .col2-set .col-1, .woo .afreken .col2-set .col-2 { width: 100%; float: none; min-width: 0; } .afreken .woocommerce-billing-fields, .afreken .woocommerce-shipping-fields, .afreken .woocommerce-additional-fields, .afreken .woocommerce-account-fields { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.4vw, 28px); } .afreken .woocommerce-account-fields { margin-top: 16px; } /* Bij een bestelling per mail is er geen verzendadres. WooCommerce zet het omhulsel er dan alsnog neer, leeg, en dat werd hier een leeg wit kaartje tussen de blokken. :empty helpt niet, want er staat witruimte in. */ .woo .afreken .woocommerce-shipping-fields:not(:has(*)), .woo .afreken .woocommerce-additional-fields:not(:has(*)), .woo .afreken .woocommerce-account-fields:not(:has(*)) { display: none; } /* Genummerde stappen boven de blokken, geteld door de opmaak zelf. Zo klopt de nummering ook als het verzendblok er niet is. */ .afreken-kolom { counter-reset: afrekenstap; } .afreken h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; margin: 0 0 16px; } .afreken .woocommerce-billing-fields > h3::before, .afreken .woocommerce-shipping-fields > h3::before, .afreken .woocommerce-additional-fields > h3::before { counter-increment: afrekenstap; content: counter(afrekenstap); display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 999px; background: var(--groen); color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: .88rem; } .afreken .woocommerce-shipping-fields > h3 label { display: flex; align-items: center; gap: 10px; font-family: var(--font-kop); cursor: pointer; margin: 0; } .afreken-zij { position: sticky; top: 96px; } .afreken-zij-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .afreken-zij-kop h3 { margin: 0; font-size: 1.15rem; } .afreken-wijzig { font-size: .88rem; color: var(--tekst-zacht); text-decoration: underline; } .afreken-wijzig:hover { color: var(--groen); } /* De regels van je bestelling, met een fotootje en het aantal erop. */ .bestelregel { display: flex; gap: 10px; align-items: center; } .bestelregel-beeld { position: relative; display: block; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--vlak); } .bestelregel-beeld img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; } .bestelregel-aantal { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--groen); color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: .72rem; } .bestelregel-tekst { display: grid; gap: 1px; min-width: 0; } .bestelregel-naam { font-family: var(--font-kop); font-weight: 700; font-size: .95rem; color: var(--tekst); line-height: 1.3; } .bestelregel-tekst .variation { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; font-size: .82rem; color: var(--tekst-zacht); } .bestelregel-tekst .variation dt, .bestelregel-tekst .variation dd { margin: 0; } .bestelregel-tekst .variation dd p { margin: 0; } .woo .afreken-zij tbody tr { border-bottom: 1px solid var(--rand); } .woo .afreken-zij tbody td { padding: 10px 0; } .woo .afreken-zij tfoot tr:first-child th, .woo .afreken-zij tfoot tr:first-child td { padding-top: 14px; } /* Betaalwijzen */ .woocommerce-checkout-payment { margin-top: 16px; } ul.wc_payment_methods { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; } ul.wc_payment_methods li { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 12px 14px; } ul.wc_payment_methods li label { font-family: var(--font-kop); font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; margin: 0; } ul.wc_payment_methods li img { max-height: 24px; width: auto; vertical-align: middle; } .payment_box { margin: 10px 0 0; font-size: .87rem; color: var(--tekst-zacht); } .payment_box p { margin: 0; } .woo #payment #place_order.button { width: 100%; min-height: 52px; float: none; font-size: 1.05rem; padding: 13px 20px; background: var(--oranje); color: #fff; border: 0; border-radius: var(--radius-pil); font-family: var(--font-kop); cursor: pointer; } .woo #payment #place_order.button:hover { background: var(--oranje-donker); } /* Het betaalblok van WooCommerce heeft een grijze doos met een puntje eraan. In onze zijkolom staat dat blok al in een kaartje, dus die doos kan weg. */ .woo #payment { background: none; border-radius: 0; padding: 0; } .woo #payment ul.payment_methods { border: 0; padding: 0; } .woo #payment div.form-row { padding: 0; } /* De uitleg onder een betaalwijze zit bij WooCommerce in een lila blok met een puntje erboven. Hun regel noemt het element erbij (div.payment_box) en weegt daarmee zwaarder dan de onze; vandaar dat wij dat hier ook doen. */ .woo .afreken #payment div.payment_box { background: none; padding: 0; margin: 10px 0 0; width: 100%; color: var(--tekst-zacht); font-size: .87rem; } .woo .afreken #payment div.payment_box::before { content: none; } .woocommerce-terms-and-conditions-wrapper { font-size: .87rem; color: var(--tekst-zacht); } /* Het vinkje waarmee je afstand doet van je herroepingsrecht bij een download. Precies dezelfde vorm als het vinkje voor de voorwaarden erboven: het zijn twee keuzes van dezelfde soort, en dan hoort de ene er niet als een apart kaartje uit te springen. */ .woo .afreken .stp-directe-levering { background: none; border: 0; padding: 0; margin: 10px 0 0; } /* Het vakje links met de tekst ernaast, en de tekst als gewone lopende regel. Met een flexbox werd het sterretje een los onderdeel en kwam het met een gat achter de zin te zweven. Nu loopt het gewoon mee met het laatste woord. */ .woo .afreken .stp-directe-levering label, .woo .afreken .woocommerce-terms-and-conditions-wrapper .form-row label { display: block; position: relative; padding-left: 27px; margin: 0; font-family: var(--font-tekst); font-size: .87rem; color: var(--tekst-zacht); line-height: 1.5; cursor: pointer; } .woo .afreken .stp-directe-levering input, .woo .afreken .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { position: absolute; left: 0; top: 3px; margin: 0; } .woo .afreken .stp-directe-levering .required, .woo .afreken .woocommerce-terms-and-conditions-wrapper .required { color: var(--fout); text-decoration: none; border: 0; } /* --- Aankoop ongedaan maken -------------------------------------------- */ /* De wettelijk verplichte ontbindingsfunctie. Bewust een gewoon, rustig formulier: er mogen geen drempels in zitten, dus geen stappen, geen captcha en niets wat op een account lijkt. */ .stp-herroep { max-width: 560px; margin: 0 auto; } .stp-herroep-form { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(20px, 2.6vw, 30px); } .stp-herroep-veld { display: grid; gap: 6px; margin: 0 0 18px; } .stp-herroep-veld label { font-family: var(--font-kop); font-size: .95rem; } .stp-herroep-ster { color: var(--fout); } .stp-herroep-optioneel { font-family: var(--font-tekst); font-weight: 400; color: var(--tekst-zacht); font-size: .88rem; } .stp-herroep-veld input, .stp-herroep-veld textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; font-family: var(--font-tekst); font-size: .98rem; } .stp-herroep-veld input:focus, .stp-herroep-veld textarea:focus { outline: 3px solid var(--groen-licht); outline-offset: 1px; border-color: var(--groen); } .stp-herroep-hulp { color: var(--tekst-zacht); font-size: .85rem; } /* Het lokveld voor robots. Uit beeld, maar niet met display: none, want dan vullen sommige robots het juist wel in. */ .stp-herroep-lokveld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .stp-herroep-versturen { margin: 0; } .stp-herroep-versturen .knop { width: 100%; text-align: center; } .stp-herroep-kleine-letters { margin: 16px 0 0; color: var(--tekst-zacht); font-size: .88rem; line-height: 1.6; } /* Het blok met de knop op de retourpagina. */ .stp-herroep-blok { background: var(--creme); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(20px, 2.8vw, 32px); margin: 28px 0 0; } .stp-herroep-blok h2 { font-size: 1.25rem; margin: 0 0 .4em; } .stp-herroep-blok p { margin: 0 0 14px; } .stp-herroep-blok p:last-child { margin-bottom: 0; } /* De uitleg boven het formulier: dit is het antwoord op de vraag waarmee iemand hier komt, dus die staat vóór de velden en niet in de kleine lettertjes eronder. */ .stp-herroep-uitleg { background: var(--creme); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.2vw, 24px); margin: 0 0 20px; } .stp-herroep-uitleg h2 { font-size: 1.1rem; margin: 0 0 10px; } .stp-herroep-uitleg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .stp-herroep-uitleg li { color: var(--tekst-zacht); font-size: .92rem; line-height: 1.55; } .stp-herroep-uitleg li strong { color: var(--tekst); } .stp-herroep-melding { border-radius: 0 var(--radius) var(--radius) 0; padding: 13px 17px; margin: 0 0 18px; background: var(--creme); border-left: 4px solid var(--groen); } .stp-herroep-melding--fout { border-left-color: var(--fout); } .stp-herroep--klaar { text-align: left; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(20px, 2.8vw, 34px); } .stp-herroep--klaar h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .4em; } .stp-herroep--klaar h3 { font-size: 1.08rem; margin: 22px 0 10px; } .stp-herroep--klaar ul { margin: 0; padding-left: 20px; color: var(--tekst-zacht); line-height: 1.7; } /* De verwijzing op de bedankpagina en bij een bestelling. */ .stp-herroep-verwijzing { margin: 18px 0 0; color: var(--tekst-zacht); font-size: .9rem; } /* --- De balk onderaan met je keuze en de bestelknop -------------------- */ /* Het meetpunt vlak onder de bestelknop. Het staat er wel, maar het is niets: geen hoogte, niets te zien. */ .koop-balk-grens { display: block; height: 1px; margin-top: -1px; } /* Zodra de bestelknop uit beeld is blijft je keuze bij je. Hij schuift van onderen in en gaat weer weg zodra de echte knop of de voettekst in beeld komt: over de voettekst heen blijven liggen leest als een reclamebalk die je niet weg krijgt. */ .koop-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--rand); box-shadow: 0 -6px 24px rgba(31, 122, 77, .1); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .22s ease; } .koop-balk.is-zichtbaar { transform: translateY(0); } @supports (backdrop-filter: blur(8px)) { .koop-balk { backdrop-filter: blur(8px); } } .koop-balk-binnen { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); } .koop-balk-beeld { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--vlak); } .koop-balk-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } .koop-balk-tekst { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; } .koop-balk-naam { font-family: var(--font-kop); font-weight: 700; font-size: .98rem; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .koop-balk-keuze { font-size: .84rem; color: var(--tekst-zacht); } .koop-balk-keuze:empty { display: none; } .koop-balk-bedrag { font-family: var(--font-kop); font-weight: 800; font-size: 1.15rem; color: var(--tekst); white-space: nowrap; } .koop-balk-bedrag .woocommerce-Price-amount { font-size: inherit; } .koop-balk-knop { flex: 0 0 auto; min-height: 46px; padding: 12px 26px; } @media (max-width: 620px) { /* Op een telefoon telt elke pixel: de foto en de naam eruit, het bedrag en de knop erin. Waar je bent weet je al, je staat op de pagina van dat product. */ .koop-balk-beeld { display: none; } .koop-balk-naam { display: none; } .koop-balk-knop { flex: 1 1 auto; text-align: center; } .koop-balk-binnen { gap: 12px; } } /* --- Mijn account ------------------------------------------------------ */ /* Menu links, inhoud rechts. WooCommerce laat die twee zweven; in een raster houden ze naast elkaar gelijke hoogte en blijft het menu meelopen. */ .woo .woocommerce-MyAccount-navigation, .woo .woocommerce-MyAccount-content { float: none; width: auto; } .account-raster { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } .account-menu { position: sticky; top: 96px; } .account-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .account-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 14px; color: var(--tekst); text-decoration: none; font-family: var(--font-kop); font-weight: 700; font-size: .95rem; } .account-menu a:hover { background: var(--creme); } .account-menu .ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--groen); } .account-menu li.is-active > a { background: var(--groen); color: #fff; } .account-menu li.is-active > a .ico { color: #fff; } .woo .woocommerce-MyAccount-content { min-width: 0; } .account-hallo { color: var(--tekst-zacht); margin: 0 0 clamp(18px, 2.4vw, 26px); } .account-uitloggen { margin-left: 6px; } .account-snel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .account-kaart { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 18px; text-decoration: none; box-shadow: var(--schaduw); transition: border-color .15s, transform .15s; } .account-kaart:hover { border-color: var(--groen); transform: translateY(-2px); } .account-kaart .ring { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); } .account-kaart .ring .ico { width: 21px; height: 21px; } .account-kaart-tekst { display: grid; gap: 2px; min-width: 0; } .account-kaart-tekst b { font-family: var(--font-kop); font-size: 1rem; color: var(--tekst); } .account-kaart-tekst span { font-size: .87rem; color: var(--tekst-zacht); line-height: 1.5; } /* Inloggen */ .account-inloggen { max-width: 520px; margin: 0 auto; } .account-inloggen--twee { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); } .account-vak { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(20px, 2.6vw, 30px); } .account-vak h2 { font-size: 1.25rem; margin: 0 0 .4em; } /* WooCommerce zet zelf een kader om het inlogformulier. Binnen ons kaartje is dat een doos in een doos. */ .woo .account-vak form.login, .woo .account-vak form.register { border: 0; border-radius: 0; padding: 0; margin: 0; } .account-uitleg { color: var(--tekst-zacht); font-size: .92rem; margin: 0 0 18px; } .account-versturen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; } .account-versturen label { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-tekst); font-size: .9rem; color: var(--tekst-zacht); } .woo .woocommerce-LostPassword { margin: 0; font-size: .9rem; } /* De lijsten met bestellingen en downloads */ .woo .woocommerce-MyAccount-content table.shop_table { border-radius: var(--radius-groot); } .woo .woocommerce-MyAccount-content table.shop_table td { vertical-align: middle; } .woo .woocommerce-MyAccount-content table.shop_table .button { padding: 8px 16px; font-size: .88rem; } .woo .woocommerce-MyAccount-content h2, .woo .woocommerce-MyAccount-content h3 { font-size: 1.15rem; margin: 0 0 14px; } .woo .woocommerce-Address { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.4vw, 26px); } .woo .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .woo .woocommerce-Address address { font-style: normal; color: var(--tekst-zacht); line-height: 1.7; } .woo .addresses .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 24px); } .woo .addresses .col-1, .woo .addresses .col-2 { width: auto; float: none; } /* --- Als er iets niet klopt ------------------------------------------- */ /* WooCommerce zet de foutmeldingen bovenin het formulier, en dat formulier is bij ons een raster van twee kolommen. Zonder deze regel wordt die melding het eerste vak en schuiven de gegevens naar de rechterkolom. */ .woo .afreken > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .woo .woocommerce-error { border-left-color: var(--fout); color: var(--tekst); } .woo .woocommerce-error li { margin: 0 0 6px; } .woo .woocommerce-error li:last-child { margin-bottom: 0; } .woo .woocommerce-error strong { color: var(--tekst); } /* WooCommerce zet de aandacht op dit blok zodra het verschijnt. Dat is nuttig voor wie met een schermlezer werkt, maar het is niets om op te klikken, dus het hoeft er geen rand omheen te krijgen. */ .woo .woocommerce-NoticeGroup:focus, .woo .woocommerce-error:focus { outline: none; } /* Het veld zelf en het regeltje eronder. WooCommerce kleurt een fout veld donkerrood met een regel die het formulier en de rij erbij noemt; om daar overheen te gaan moeten wij dat ook doen. */ .woo form .form-row.woocommerce-invalid input.input-text, .woo form .form-row.woocommerce-invalid textarea, .woo form .form-row.woocommerce-invalid select, .woo form .form-row.woocommerce-invalid .select2-selection { border-color: var(--fout); } .woo form .form-row.woocommerce-invalid label { color: var(--fout); } .woo .form-row .woocommerce-error, .woo .form-row span.error { display: block; background: none; border: 0; border-radius: 0; padding: 4px 0 0; margin: 0; color: var(--fout); font-size: .84rem; } /* Een groene rand om elk veld dat wel klopt maakt er een kerstboom van, zeker naast de rode. Een ingevuld veld hoort er gewoon uit te zien. */ .woo form .form-row.woocommerce-validated input.input-text, .woo form .form-row.woocommerce-validated textarea, .woo form .form-row.woocommerce-validated select, .woo form .form-row.woocommerce-validated .select2-selection { border-color: var(--rand); } /* Terwijl WooCommerce het overzicht bijwerkt legt het er een laag overheen. Die laag krijgt zijn kleur uit javascript, vandaar dat het hier met !important moet: anders is er geen manier om er overheen te gaan. */ .woo .blockUI.blockOverlay { background-color: rgba(255, 255, 255, .72) !important; opacity: 1 !important; } /* De regel over een kortingscode bovenaan. Compact: het is een zijpad, geen mededeling waar iedereen mee moet beginnen. */ .woo .woocommerce-form-coupon-toggle .woocommerce-info, .woo .woocommerce-form-login-toggle .woocommerce-info { padding: 10px 16px; font-size: .92rem; margin-bottom: 14px; } .woo form.checkout_coupon, .woo form.woocommerce-form-login { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(16px, 2vw, 24px); margin-bottom: 18px; } /* --- Na het betalen --------------------------------------------------- */ .bedankt { max-width: 780px; margin: 0 auto; } .bedankt-kop { text-align: center; margin-bottom: clamp(22px, 3vw, 32px); } .bedankt-kop .ring { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); } .bedankt-kop .ring .ico { width: 36px; height: 36px; } .bedankt-kop--mis .ring { background: #fdeef4; color: var(--roze); } .bedankt-kop h2 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); margin: 0 0 .35em; } .bedankt-kop p { color: var(--tekst-zacht); margin: 0 auto; max-width: 52ch; } .bedankt-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; } /* De feiten van de bestelling als losse kaartjes, niet als opsomming. */ .bedankt-feiten { list-style: none; margin: 0 0 clamp(22px, 3vw, 32px); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .bedankt-feiten li { background: #fff; border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; display: grid; gap: 3px; } .bedankt-feiten span { font-size: .82rem; color: var(--tekst-zacht); } .bedankt-feiten strong { font-family: var(--font-kop); font-weight: 700; font-size: 1rem; color: var(--tekst); } .bedankt-hierna { background: var(--creme); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.4vw, 28px); margin-bottom: clamp(22px, 3vw, 32px); } .bedankt-hierna h3 { font-size: 1.12rem; margin: 0 0 14px; } .bedankt-hierna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .bedankt-hierna li { display: flex; gap: 11px; align-items: flex-start; font-size: .93rem; color: var(--tekst-zacht); line-height: 1.55; } .bedankt-hierna li b { color: var(--tekst); } .bedankt-hierna .ico { width: 19px; height: 19px; flex: 0 0 19px; color: var(--groen); margin-top: 3px; } /* De downloadlijst en de besteldetails komen van WooCommerce zelf; die krijgen hier alleen dezelfde koppen als de rest van de pagina. */ .bedankt .woocommerce-order-details h2, .bedankt .woocommerce-customer-details h2, .bedankt .woocommerce-order-downloads h2 { font-size: 1.12rem; margin: clamp(22px, 3vw, 30px) 0 12px; } /* ===================================================================== VERTAALDE OUDE OPMAAK (uit de Flatsome-shortcodes) ===================================================================== */ .oud-raster { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 22px; margin-bottom: 1.4rem; } /* Een rij uit de oude opmaak is een raster van twaalf kolommen. De breedte komt uit de --kolom die de vertaler meegeeft. Zonder dit raster deed die waarde niets en stond een foto die naast de tekst hoorde er ineens onder, over de volle breedte. */ .oud-rij { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-bottom: 1.6rem; } .oud-rij:last-child { margin-bottom: 0; } .oud-kolom { grid-column: span var(--kolom, 12); min-width: 0; } .oud-kolom > *:last-child { margin-bottom: 0; } .oud-figuur { margin: 0; } .oud-beeld { width: 100%; height: auto; border-radius: var(--radius-groot); box-shadow: var(--schaduw); } /* Een foto die alleen op een regel staat niet eindeloos oprekken. */ .oud-rij > .oud-kolom[style*="--kolom:12"] .oud-beeld, .prose > .oud-figuur .oud-beeld { max-width: 560px; margin-inline: auto; } .oud-knop { margin: 1.1rem 0; } .oud-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw); margin-bottom: 1.3rem; } .oud-kaart-beeld img { width: 100%; height: auto; display: block; } .oud-kaart-body { padding: 18px 20px; } .oud-uitgelicht { background: var(--creme); border-radius: var(--radius-groot); padding: clamp(20px,3vw,30px); margin-bottom: 1.4rem; } .oud-prijskaart { background: #fff; border: 2px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(20px,3vw,30px); margin-bottom: 1.4rem; } .oud-quote { margin: 0 0 1.4rem; padding: 18px 22px; background: var(--creme); border-left: 4px solid var(--geel); border-radius: 0 var(--radius) var(--radius) 0; } .oud-quote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-hand); font-size: 1.2rem; color: var(--groen); } .sectie-kop--oud { text-align: left; margin: 1.8em 0 .8em; max-width: none; } /* Uitklapvraag zonder pictogram (zo komt hij uit de oude opmaak). */ .uitleg-item summary { font-family: var(--font-kop); } .uitleg-item > summary:not(:has(.vak)) { display: block; padding: 15px 18px; } .uitleg-antwoord { padding: 0 18px 16px; color: var(--tekst-zacht); } .uitleg-antwoord > *:last-child { margin-bottom: 0; } /* --- Mobiel --------------------------------------------------------- */ @media (max-width: 900px) { .usp-strook { grid-template-columns: repeat(2,1fr); } .woo ul.products { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px) { .usp-strook { grid-template-columns: 1fr; } .woo ul.products { grid-template-columns: 1fr; } .hulp-strook { flex-direction: column; align-items: flex-start; } .product-kaart-onder { flex-direction: column; align-items: stretch; } .product-kaart-onder .knop { width: 100%; justify-content: center; } } /* ===================================================================== THEMAFEESTJES EN KNUTSELPAGINA'S ===================================================================== */ /* Themakleuren. Elk thema zet één variabele; alle onderdelen eronder gebruiken die, zodat een nieuw thema alleen een regel hier nodig heeft. */ :root { --paars: #8b5cf6; --turkoois: #14b8a6; } .thema--groen { --thema: var(--groen); --thema-zacht: #e8f3ec; } .thema--oranje { --thema: var(--oranje-donker); --thema-zacht: #fdf0e0; } .thema--geel { --thema: #c99700; --thema-zacht: #fdf5dd; } .thema--roze { --thema: var(--roze); --thema-zacht: #fdeaf2; } .thema--blauw { --thema: var(--blauw); --thema-zacht: #e6f0fb; } .thema--paars { --thema: var(--paars); --thema-zacht: #f0eafd; } .thema--turkoois { --thema: var(--turkoois); --thema-zacht: #e2f7f4; } /* --- Hero van een thema- of knutselpagina --------------------------- */ .thema-hero { background: linear-gradient(160deg, var(--thema-zacht), var(--creme) 70%); position: relative; overflow: hidden; } /* Sfeerfoto als achtergrond van de hero. De foto staat in de opmaak buiten de inhoudskolom, want die kolom is 1180px breed en houdt de foto anders precies daar tegen. Nu hangt hij aan de band eromheen en loopt hij van rand tot rand. Er ligt een warme sluier overheen: links dekkend, zodat de tekst leesbaar blijft, en vanaf ongeveer de helft doorschijnend, zodat de foto zelf te zien is. De tekstkolom eindigt op elk schermformaat rond 49% van de band, dus daar mag de sluier pas beginnen te verdwijnen. */ .thema-hero-foto { position: absolute; inset: 0; z-index: 0; } .thema-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .thema-hero-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255,253,248,.96) 0%, rgba(255,253,248,.93) 34%, rgba(255,252,245,.78) 50%, rgba(255,251,242,.26) 66%, rgba(255,251,242,0) 82%); } /* Boven- en onderrand zacht laten uitlopen, zodat de foto niet hard tegen de koptekstbalk en de volgende sectie aan botst. Bovenin de kleur van de pagina zelf, onderin het wit waar de band toch al naartoe liep. */ .thema-hero-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--hero-tint, var(--creme)) 0%, rgba(251,245,234,0) 15%), linear-gradient(0deg, var(--wit) 0%, rgba(255,255,255,0) 22%); } /* Alleen de stapelvolgorde regelen: de tekst hoort boven de sfeerfoto en de sluier te staan. */ .thema-hero--foto .over-hero-grid { position: relative; z-index: 2; } .thema-hero--foto .over-hero-tekst h1, .thema-hero--foto .over-hero-tekst p { text-shadow: 0 1px 12px rgba(255,255,255,.85); } /* Zonder illustratie heeft de rechterkolom geen inhoud meer. Deze hoogte houdt de foto ruim in beeld en geeft de zwevende badge iets om aan te hangen. */ .thema-hero--foto .over-hero-beeld { min-height: 300px; } .thema-hero .eyebrow { color: var(--thema); } .thema-kreet { font-family: var(--font-hand); font-size: 1.5rem; color: var(--thema); margin: 0 0 .5em; } .thema-illu { width: min(340px, 82%); height: auto; display: block; margin-inline: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,.14)); } /* --- Snelkoppelingen naar de drie onderdelen ------------------------ */ .thema-stappen { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .thema-stap { display: block; text-align: center; text-decoration: none; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 22px 18px; box-shadow: var(--schaduw); transition: transform .15s; } .thema-stap:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); } .thema-stap .ring { width: 52px; height: 52px; border-radius: 999px; background: var(--thema-zacht, var(--creme)); color: var(--thema, var(--groen)); display: grid; place-items: center; margin: 0 auto 10px; } .thema-stap .ring .ico { width: 24px; height: 24px; } .thema-stap b { display: block; font-family: var(--font-kop); color: var(--tekst); } .thema-stap span { color: var(--tekst-zacht); font-size: .88rem; } /* --- Uitgelicht product --------------------------------------------- */ .thema-product { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px,4vw,46px); align-items: center; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); box-shadow: var(--schaduw); padding: clamp(22px,3vw,38px); } .thema-product-beeld { position: relative; } .thema-product-beeld img { width: 100%; height: auto; display: block; border-radius: var(--radius-groot); } .thema-product-tekst h3 { font-family: var(--font-kop); font-size: clamp(1.25rem,2.2vw,1.7rem); margin: 0 0 .3em; } .thema-punten { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 9px; } .thema-punten li { display: flex; gap: 10px; align-items: center; font-size: .95rem; } .thema-punten .ico { flex: 0 0 20px; width: 20px; height: 20px; color: var(--thema, var(--groen)); } .thema-product-onder { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .thema-product-onder .product-prijs { font-family: var(--font-kop); font-size: 1.45rem; color: var(--groen-donker); } /* --- Gratis materiaal ------------------------------------------------ */ .gratis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .gratis-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw); display: flex; flex-direction: column; } .gratis-beeld { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--creme); } .gratis-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; } .gratis-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .gratis-label { display: inline-block; align-self: flex-start; background: var(--geel); color: #6b4e00; font-family: var(--font-kop); font-size: .78rem; padding: 3px 12px; border-radius: var(--radius-pil); margin-bottom: 8px; } .gratis-body h3 { font-family: var(--font-kop); font-size: 1.25rem; margin: 0 0 .35em; } .gratis-body p { color: var(--tekst-zacht); margin: 0 0 16px; } .gratis-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } .gratis-knoppen .ico { width: 18px; height: 18px; } /* --- Themakaarten op het overzicht ----------------------------------- */ /* Een echte foto van zo'n feestje zegt meer dan een tekenfiguur alleen. De tekening blijft wel, als sticker op de rand tussen foto en tekst, zodat het thema meteen herkenbaar is. */ .thema-kaarten { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; } .thema-kaart { position: relative; display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw); transition: transform .15s, box-shadow .15s; } .thema-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-diep); } .thema-kaart-foto { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--thema-zacht, var(--creme)); } .thema-kaart-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .thema-kaart-vlag { position: absolute; top: 12px; left: 12px; display: inline-flex; gap: 5px; align-items: center; background: #fff; color: var(--thema, var(--groen)); font-family: var(--font-kop); font-size: .72rem; padding: 4px 10px; border-radius: var(--radius-pil); box-shadow: var(--schaduw); } .thema-kaart-vlag .ico { width: 14px; height: 14px; } /* De tekening zit op de naad tussen foto en tekst. Hij staat binnen de tekstbalk en niet binnen de kaart: die balk begint precies onder de foto, dus dan klopt de plaats ongeacht hoe hoog die foto uitvalt. */ .thema-kaart-sticker { position: absolute; top: 0; right: 16px; width: 74px; height: 74px; border-radius: 999px; background: #fff; box-shadow: var(--schaduw-diep); display: grid; place-items: center; transform: translateY(-52%); z-index: 2; } .thema-kaart-sticker img { width: 62%; height: 62%; object-fit: contain; } .thema-kaart-body { position: relative; padding: 18px 20px 22px; background: var(--thema-zacht, var(--creme)); flex: 1; } .thema-kaart-body b { display: block; font-family: var(--font-kop); font-size: 1.2rem; color: var(--tekst); } .thema-kaart-kreet { display: block; font-family: var(--font-hand); font-size: 1.2rem; color: var(--thema); margin-bottom: 8px; } .thema-kaart-meer { display: block; font-size: .88rem; color: var(--tekst-zacht); } .tegel--paars { background: #f0eafd; } .tegel--oranje { background: #fdf0e0; } /* --- Knutselpagina --------------------------------------------------- */ .knutsel-intro p { margin: 0 0 .8rem; } .knutsel-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px,4vw,44px); align-items: start; } .knutsel-stappen .blok-titel { margin-bottom: .6em; } .prose--stappen h3 { display: flex; gap: 10px; align-items: baseline; color: var(--groen-donker); margin: 1.7em 0 .5em; } .prose--stappen ol { padding-left: 1.2em; } .prose--stappen > *:first-child { margin-top: 0; } .knutsel-zij { position: sticky; top: 96px; display: grid; gap: 20px; } .benodigd-kaart { background: var(--creme); border-radius: var(--radius-groot); padding: 24px; } .benodigd-kaart .ring { width: 46px; height: 46px; border-radius: 999px; background: #fff; border: 2px solid var(--groen); color: var(--groen); display: grid; place-items: center; margin-bottom: 12px; } .benodigd-kaart h3 { font-family: var(--font-kop); font-size: 1.15rem; margin: 0 0 .5em; } .prose--kort { font-size: .95rem; line-height: 1.6; } .prose--kort ul { padding-left: 1.1em; } .download-kaart { background: var(--groen); color: #fff; border-radius: var(--radius-groot); padding: 24px; } .download-kaart h3 { font-family: var(--font-kop); font-size: 1.15rem; margin: 0 0 .4em; color: #fff; } .download-kaart p { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0 0 16px; } .download-kaart .knop .ico { width: 18px; height: 18px; } /* --- Mobiel ---------------------------------------------------------- */ @media (max-width: 980px) { .thema-kaarten { grid-template-columns: repeat(2,1fr); } .knutsel-grid { grid-template-columns: 1fr; } .knutsel-zij { position: static; } .thema-product { grid-template-columns: 1fr; } .gratis-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .thema-kaarten { grid-template-columns: 1fr; } .thema-stappen { grid-template-columns: 1fr; } .thema-product-onder { flex-direction: column; align-items: stretch; } .thema-product-onder .knop { justify-content: center; } } /* ===================================================================== VEELGESTELDE VRAGEN, CONTACT, BLOG EN 404 ===================================================================== */ /* --- Uitklapvraag in de eenvoudige vorm (tekst + plusje) ------------- */ .faq-vragen { display: grid; gap: 12px; } .faq-vragen .uitleg-item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; font-family: var(--font-kop); font-size: 1.02rem; } .faq-vragen .uitleg-item summary .chev { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; background: var(--creme); color: var(--groen); display: grid; place-items: center; font-size: 1.25rem; line-height: 1; transition: transform .18s; } .faq-vragen .uitleg-item[open] summary .chev { transform: rotate(45deg); } .faq-vragen .uitleg-item[open] summary { border-bottom: 1px solid var(--rand); } /* --- Groepen vragen -------------------------------------------------- */ .faq-groep { margin-bottom: clamp(30px,4vw,46px); } .faq-groep-kop { display: flex; gap: 12px; align-items: center; font-family: var(--font-kop); font-size: 1.35rem; margin: 0 0 18px; } .faq-groep-kop .ring { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); display: grid; place-items: center; } .faq-groep-kop .ring .ico { width: 21px; height: 21px; } /* --- Blok onderaan de FAQ -------------------------------------------- */ .faq-contact { position: relative; text-align: center; background: var(--creme); border-radius: var(--radius-groot); padding: clamp(28px,4vw,44px); } .faq-contact .ring { width: 56px; height: 56px; border-radius: 999px; background: #fff; border: 2px solid var(--groen); color: var(--groen); display: grid; place-items: center; margin: 0 auto 14px; } .faq-contact h3 { font-family: var(--font-kop); font-size: 1.4rem; margin: 0 0 .3em; } .faq-contact p { color: var(--tekst-zacht); margin: 0 auto 20px; max-width: 34em; } .faq-contact-knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .faq-contact-knoppen .ico { width: 18px; height: 18px; } /* ===================================================================== CONTACT ===================================================================== */ .contact-hero { background: linear-gradient(160deg, var(--groen-licht), var(--creme) 70%); } .polaroid-bijschrift { display: block; text-align: center; padding: 10px 0 4px; font-family: var(--font-hand); font-size: 1.4rem; color: var(--groen); } .contact-kaarten { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .contact-kaart { display: flex; flex-direction: column; text-align: center; text-decoration: none; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 28px 24px; box-shadow: var(--schaduw); transition: transform .15s, box-shadow .15s; } a.contact-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-diep); } .contact-kaart .ring { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 14px; background: #fff; border: 2px solid currentColor; } .ring--groen { color: var(--groen); } .ring--oranje { color: var(--oranje-donker); } .ring--blauw { color: var(--blauw); } .contact-kaart b { font-family: var(--font-kop); font-size: 1.12rem; color: var(--tekst); margin-bottom: 4px; } .contact-detail { color: var(--groen); font-weight: 700; font-size: .96rem; margin-bottom: 6px; word-break: break-word; } .contact-meta { color: var(--tekst-zacht); font-size: .86rem; } .contact-kaart--stil { background: var(--creme); box-shadow: none; } /* --- Bedrijfsgegevens ------------------------------------------------ */ .gegevens-blok { background: var(--creme); border-radius: var(--radius-groot); padding: clamp(26px,4vw,40px); } .gegevens-blok h3 { font-family: var(--font-kop); font-size: 1.3rem; margin: .2em 0 .4em; } .gegevens-adres { color: var(--tekst-zacht); line-height: 1.6; margin: 0 0 22px; } .gegevens-rij { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding-top: 20px; border-top: 1px dashed var(--rand); } .gegevens-rij b { display: block; font-family: var(--font-kop); font-size: .9rem; color: var(--tekst); } .gegevens-rij span { color: var(--tekst-zacht); font-size: .92rem; } .gegevens-rij a { color: var(--groen); } .gegevens-noot { margin: 20px 0 0; font-size: .87rem; color: var(--tekst-zacht); font-style: italic; } /* ===================================================================== BLOG ===================================================================== */ .artikel-meta { display: flex; gap: 7px; align-items: center; justify-content: center; color: var(--tekst-zacht); font-size: .92rem; margin: 0; } .artikel-meta .ico { width: 17px; height: 17px; } .artikel-beeld { position: relative; margin: 0 0 28px; } .artikel-beeld img { width: 100%; height: auto; display: block; border-radius: var(--radius-groot); } /* ========================================================================= Blogoverzicht ========================================================================= */ /* Het nieuwste artikel groot, met de foto links. Eén blik en je weet waar het over gaat; de rest van de artikelen staat eronder in een raster. */ .blog-groot { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; text-decoration: none; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw); transition: box-shadow .2s, transform .2s; } .blog-groot > * { min-width: 0; } .blog-groot:hover { box-shadow: var(--schaduw-diep); transform: translateY(-3px); } .blog-groot-beeld { display: block; align-self: stretch; } .blog-groot-beeld img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .blog-groot-tekst { display: block; padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(22px, 3vw, 40px) 0; } .blog-groot-tekst h2 { font-size: clamp(1.3rem, 2.3vw, 1.8rem); margin: 0 0 .3em; color: var(--groen-donker); } .blog-groot-sub { display: block; color: var(--tekst-zacht); margin: 10px 0 18px; line-height: 1.6; } /* De onderwerpen als rij knopjes. Ze wijzen naar het archief van die categorie, dus je kunt er echt op verder. */ .blog-onderwerpen { display: flex; flex-wrap: wrap; gap: 10px; } .blog-onderwerpen a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-pil); background: var(--wit); border: 1px solid var(--rand); color: var(--tekst); font-family: var(--font-kop); font-weight: 700; font-size: .88rem; text-decoration: none; transition: border-color .15s, color .15s; } .blog-onderwerpen a:hover { border-color: var(--groen); color: var(--groen); } .blog-onderwerpen a span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pil); background: var(--groen-licht); color: var(--groen); font-size: .74rem; } /* De overige artikelen. */ .blog-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); } .blog-raster > * { min-width: 0; } .blog-kaart { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-groot); overflow: hidden; box-shadow: var(--schaduw); transition: box-shadow .2s, transform .2s; } .blog-kaart:hover { box-shadow: var(--schaduw-diep); transform: translateY(-3px); } .blog-kaart-beeld { display: block; } .blog-kaart-beeld img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .blog-kaart-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .blog-kaart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; } .blog-label { padding: 3px 10px; border-radius: var(--radius-pil); background: var(--groen-licht); color: var(--groen); font-family: var(--font-kop); font-weight: 700; font-size: .72rem; } .blog-datum { display: block; color: var(--tekst-zacht); font-size: .8rem; } .blog-kaart h3 { font-size: 1.06rem; line-height: 1.3; margin: 0 0 .45em; } .blog-kaart h3 a { color: var(--tekst); text-decoration: none; } .blog-kaart h3 a:hover { color: var(--groen); } .blog-kaart p { color: var(--tekst-zacht); font-size: .9rem; line-height: 1.55; margin: 0 0 12px; } /* De leesregel onderaan, ook als de ene kaart meer tekst heeft dan de andere. */ .blog-lees { margin-top: auto; color: var(--groen); font-family: var(--font-kop); font-weight: 700; font-size: .88rem; } /* De kop van een onderwerppagina. Compact: een naam, hoeveel artikelen erbij horen en waar je verder kunt kijken. */ .onderwerp-kop { padding: clamp(20px, 2.6vw, 34px) 0 clamp(22px, 3vw, 36px); text-align: center; } .onderwerp-kop h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: .1em 0 0; } .onderwerp-intro { color: var(--tekst-zacht); margin: .5em auto 0; max-width: 60ch; } .onderwerp-aantal { color: var(--tekst-zacht); font-size: .88rem; margin: 8px 0 0; } .onderwerp-kop .blog-onderwerpen { justify-content: center; margin-top: 18px; } /* Het onderwerp waar je nu op staat is geen knop om heen te gaan, maar een markering van waar je bent. */ .blog-onderwerpen a.is-nu { background: var(--groen); border-color: var(--groen); color: #fff; } .blog-onderwerpen a.is-nu span { background: rgba(255,255,255,.24); color: #fff; } .blog-onderwerpen a.is-nu:hover { color: #fff; } /* Smallere schermen. Deze regels staan bewust hier, direct onder de basisregels van dit blok: een media-regel die eerder in het bestand staat dan de regel die hij moet overrulen doet niets. */ @media (max-width: 980px) { .blog-raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { /* Het uitgelichte artikel onder elkaar: de foto boven, de tekst eronder. */ .blog-groot { grid-template-columns: 1fr; } .blog-groot-beeld img { min-height: 0; aspect-ratio: 16 / 9; } .blog-groot-tekst { padding: 20px 22px 24px; } } @media (max-width: 560px) { .blog-raster { grid-template-columns: 1fr; } .blog-onderwerpen { gap: 8px; } .blog-onderwerpen a { font-size: .82rem; padding: 7px 13px; } } .paginering { margin-top: 40px; text-align: center; } .paginering .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 3px; border-radius: var(--radius-pil); background: var(--creme); font-family: var(--font-kop); color: var(--tekst); text-decoration: none; } .paginering .page-numbers.current { background: var(--groen); color: #fff; } .paginering .page-numbers:hover { background: var(--geel); } .paginering .screen-reader-text { position: absolute; left: -9999px; } .geen-resultaat { text-align: center; background: var(--creme); border-radius: var(--radius-groot); padding: clamp(34px,5vw,56px); } .geen-resultaat .ring { width: 60px; height: 60px; border-radius: 999px; background: #fff; border: 2px solid var(--groen); color: var(--groen); display: grid; place-items: center; margin: 0 auto 16px; } .geen-resultaat h2 { font-family: var(--font-kop); margin: 0 0 .3em; } .geen-resultaat p { color: var(--tekst-zacht); margin: 0 0 22px; } /* --- Mobiel ---------------------------------------------------------- */ @media (max-width: 900px) { .contact-kaarten { grid-template-columns: 1fr; } .tips--overzicht { grid-template-columns: repeat(2,1fr); } .gegevens-rij { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 640px) { .tips--overzicht { grid-template-columns: 1fr; } .faq-contact-knoppen .knop { width: 100%; justify-content: center; } } /* --- Gras als afsluiting van de pagina -------------------------------- */ /* Het gras komt rechtstreeks uit de onderbalk omhoog. Zonder deze achtergrond bleef er een crèmestrook tussen de balk en het gras staan, waardoor de footer in losse lagen uiteenviel. */ .footer-gras { position: relative; z-index: 2; line-height: 0; background: var(--footer-balk); } /* Nog een zacht verloop over de bovenkant van het gras, zodat het perzik niet pardoes in het groen overgaat. */ .footer-gras::before { content: ""; position: absolute; inset: 0 0 auto; height: 46%; background: linear-gradient(180deg, var(--footer-balk) 0, rgba(248,233,215,0) 100%); z-index: 1; pointer-events: none; } /* Alleen de stapelvolgorde; .gras-plant is al absoluut gepositioneerd en dat moet zo blijven. */ .footer-gras .gras-golf { position: relative; z-index: 2; } .footer-gras .gras-plant { z-index: 2; } .gras-golf { display: block; width: 100%; height: clamp(76px, 8vw, 120px); } .gras-plant { position: absolute; bottom: 0; width: 44px; height: 62px; } .gras-plant svg { width: 100%; height: 100%; } .gras-plant--links { left: 4%; } .gras-plant--rechts { right: 5%; transform: scaleX(-1); } /* --- Kop boven de bestelroute ----------------------------------------- */ /* Compact, want het gaat hier om wat eronder staat. De grote paginakop die hier eerst stond duwde de winkelwagen zelf onder de vouw. */ .bestel-kop { padding: clamp(22px, 3vw, 38px) 0 clamp(16px, 2.2vw, 26px); text-align: center; } /* De kop en wat eronder staat horen bij elkaar. De gewone sectieruimte gaf hier een gat van bijna honderd pixels tussen de stappenbalk en de winkelwagen. */ .bestel-kop + .sectie { padding-top: clamp(6px, 1.2vw, 16px); } .bestel-kop h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: .05em 0 0; } .bestelstappen { display: flex; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; justify-content: center; flex-wrap: wrap; } .bestelstappen li { display: flex; gap: 8px; align-items: center; color: var(--tekst-zacht); font-size: .9rem; padding: 7px 15px; background: var(--creme); border-radius: var(--radius-pil); } .bestelstap-bol { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #fff; color: var(--tekst-zacht); font-family: var(--font-kop); font-weight: 700; font-size: .78rem; } .bestelstap-bol .ico { width: 13px; height: 13px; } .bestelstappen li.nu { background: var(--groen); color: #fff; } .bestelstappen li.nu .bestelstap-bol { background: #fff; color: var(--groen); } .bestelstappen li.gedaan { background: var(--groen-licht); color: var(--groen-donker); } .bestelstappen li.gedaan .bestelstap-bol { background: var(--groen); color: #fff; } /* ===================================================================== MOBIEL Negen van de tien bezoekers komt op een telefoon, dus dit is niet het sluitstuk maar de belangrijkste weergave. Alles hieronder staat bewust achteraan: zo wint het van de regels erboven zonder !important. ===================================================================== */ /* Niets mag de pagina breder maken dan het scherm. 'clip' en niet 'hidden', want 'hidden' zet position:sticky buiten werking (de knutselzijbalk). */ html { overflow-x: clip; } body { overflow-x: clip; } /* Beeld en media nooit breder dan hun kolom. */ img, svg, video, iframe, table { max-width: 100%; } /* --- Tablet ---------------------------------------------------------- */ @media (max-width: 1024px) { .usp-strook { grid-template-columns: repeat(2, 1fr); } .thema-stappen { gap: 14px; } } /* --- Telefoon -------------------------------------------------------- */ @media (max-width: 760px) { /* Meer inhoud in beeld: secties en kaarten compacter. */ .sectie { padding: clamp(32px, 7vw, 52px) 0; } .sectie--strak { padding: clamp(26px, 6vw, 44px) 0; } .sfeerkaart { padding: 24px 20px; border-radius: 24px; } .papier-blad { padding: 22px 18px; border-radius: 22px; } .inklap-tekst { max-height: 260px; } .container, .container--smal { padding-inline: 18px; } /* Koppen: op een smal scherm oogde 2rem als schreeuwen. */ h1 { font-size: clamp(1.75rem, 7.2vw, 2.25rem); } h2 { font-size: clamp(1.4rem, 5.6vw, 1.85rem); } h3 { font-size: 1.12rem; } .hero-tekst p, .pagina-kop-intro, .prose { font-size: 1rem; } .thema-kreet { font-size: 1.3rem; } /* Knoppen over de volle breedte en hoog genoeg om met een duim te raken. */ .knop { min-height: 48px; } .hero-knoppen, .gratis-knoppen, .faq-contact-knoppen, .thema-product-onder { flex-direction: column; align-items: stretch; } .hero-knoppen .knop, .gratis-knoppen .knop, .faq-contact-knoppen .knop, .thema-product-onder .knop { width: 100%; justify-content: center; } .thema-product-onder .product-prijs { text-align: center; } /* Hero op een telefoon: de foto krijgt een eigen strook bovenaan en de tekst staat eronder. Op een breed scherm staat de tekst links naast de kinderen en is er ruimte genoeg voor allebei. Op een smal scherm valt de tekst er middenop, en dan moet de sluier zo dekkend zijn dat er van de foto niets overblijft. Precies dat probleem hadden de themapagina's ook. Zo hoeft er niets bleek gemaakt te worden en zie je de kinderen gewoon. */ .hero { display: block; min-height: 0; padding-block: 0; background: var(--creme-diep); } .hero-media { position: relative; inset: auto; height: 200px; } .hero-media img { object-position: 62% center; } /* De sluier en de witte gloed lagen over de hele hero. Nu de tekst niet meer op de foto staat, hebben ze geen werk meer. */ .hero::before, .hero::after { display: none; } /* De onderrand zacht laten uitlopen, maar echt alleen de rand. Dit liep eerst over de onderste 44% van de strook, en omdat de foto verticaal niet wordt bijgesneden viel dat precies over de kinderen: ze losten halverwege op in de achtergrond en er bleef onder hen geen gras meer over. */ .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--creme-diep) 0%, rgba(251,245,234,0) 18%); } /* Wel ruimte onder de knoppen. Op nul liep de gekleurde achtergrond van de kop precies tot de onderrand van de knop, waardoor het blok er afgekapt uitzag en de kaart eronder er tegenaan plakte. */ .hero-inhoud { padding: 22px 20px 30px; } .hero-tekst { max-width: none; } /* De gloed onder de letters was er om ze op de foto leesbaar te houden. */ .hero-tekst h1, .hero-tekst p { text-shadow: none; } .hero-usps { margin-top: 18px; } /* Themapagina: de foto is nu de achtergrond van de hele band, dus de strook erboven hoeft alleen nog een glimp te laten zien. Hij was 190px hoog, en onder 640px valt de badge er ook nog uit, waardoor er een leeg vlak van bijna 250px boven de tekst stond. */ .thema-hero--foto .over-hero-beeld { min-height: 150px; } .over-hero-grid { gap: 16px; } /* De knoppen staan onder elkaar en vullen toch al de breedte; de extra hoogte leverde niets op en duwde de rest van de pagina weg. Ze blijven ruim boven de 48px die je met een duim wilt raken. */ .hero-knoppen { gap: 10px; margin-top: 18px; } .hero-knoppen .knop--groot { padding: 13px 22px; font-size: 1.02rem; } /* Op een telefoon staat de tekst onder de foto in plaats van ernaast. Een sluier over de hele band maakte de foto daardoor spierwit terwijl de tekst er toch al buiten viel: de sluier was juist bovenaan het dikst, precies waar geen letter staat. De foto krijgt nu een eigen strook bovenaan waar hij gewoon te zien is, en de tekst staat eronder op de rustige achtergrond van de band. Zo hoeft er niets meer bleek gemaakt te worden om leesbaar te blijven. */ .thema-hero-foto { bottom: auto; height: 210px; } .thema-hero-foto::before { background: none; } /* Zelfde verhaal als bij de homepage: alleen de rand, niet de halve foto. */ .thema-hero-foto::after { background: linear-gradient(0deg, var(--hero-tint, var(--creme)) 0%, rgba(251,245,234,0) 20%); } /* De tekst ligt niet meer op de foto, dus de gloed eronder mag weg. */ .thema-hero--foto .over-hero-tekst h1, .thema-hero--foto .over-hero-tekst p { text-shadow: none; } /* Op een rij naast elkaar deelden de titel en de omschrijving de breedte, en braken ze allebei over twee regels af: '1. De / speurtocht' naast 'Kant-en-klaar, / direct printen'. In een rooster staat het pictogram links en de tekst er netjes onder elkaar naast, en wordt het kaartje ook nog een stuk lager. */ .thema-stappen { grid-template-columns: 1fr; gap: 10px; } .thema-stap { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 12px 16px; } .thema-stap .ring { grid-row: span 2; margin: 0; width: 44px; height: 44px; } .thema-stap b { align-self: end; } .thema-stap span { align-self: start; } /* Stappen op 'hoe werkt het': zes kaartjes blijven twee naast elkaar, dat scrollt prettiger dan zes onder elkaar. */ /* Reviews wat smaller, anders raakt de kaart de schermrand. */ .reviews-track .review { flex-basis: 284px; width: 284px; margin-right: 14px; } /* Knutselpagina */ .knutsel-grid { gap: 26px; } .benodigd-kaart, .download-kaart { padding: 20px; } /* Footer: twee bij twee, maar met minder ruimte ertussen. */ .footer-grid { gap: 28px 20px; } .footer-col h4 { font-size: 1.08rem; } .footer-col li { margin-bottom: 9px; } .footer-kop-ico { width: 42px; height: 42px; border-radius: 14px; } .betaal-vak img { height: 21px; } /* Kruimelpad en paginering compacter. */ .paginering .page-numbers { min-width: 38px; height: 38px; } } /* --- Kleine telefoon ------------------------------------------------- */ /* Let op de plek: dit blok staat bewust ná dat van 760px. Bij gelijke zwaarte wint de laatste regel, dus andersom zouden de waarden hierboven hier alsnog winnen. */ @media (max-width: 640px) { /* Op een kleine telefoon mag de fotostrook wat lager, anders duwt hij de kop onder de vouw. De badge valt hier toch al weg. */ .thema-hero-foto { height: 180px; } .hero-media { height: 170px; } .thema-hero--foto .over-hero-beeld { min-height: 142px; } /* Twee kolommen werd te smal voor de koppen in deze kaartjes. */ .voordelen { grid-template-columns: 1fr; } } @media (max-width: 400px) { .tegels { grid-template-columns: repeat(2, 1fr); gap: 12px; } .bestelstappen li { font-size: .84rem; padding: 7px 12px; } } /* ===================================================================== WOOCOMMERCE OP MOBIEL ===================================================================== */ /* WooCommerce zet zijn eigen kleine-schermregels in met een 48%-breedte en een float op elke productkaart. Dat is bedoeld voor de standaardlay-out en botst met ons raster: de kaarten werden half zo breed als hun kolom. */ .site-main.woo ul.products[class*="columns-"] li.product { width: auto; float: none; clear: none; margin: 0; } @media (max-width: 760px) { /* De kolommen uit de oude opmaak onder elkaar. */ .oud-kolom { grid-column: 1 / -1; } .oud-rij { gap: 20px; } /* Bestellen moet met één duim kunnen. */ .woo .product .single_add_to_cart_button, .woo .checkout-button, .woo #place_order { width: 100%; text-align: center; min-height: 50px; } .woo .product form.cart { display: block; } .woo .product form.cart .quantity { margin-bottom: 12px; } .woo .product form.cart .quantity input { width: 88px; height: 48px; text-align: center; } /* Formuliervelden: WooCommerce zet ze op halve breedte, op een telefoon moeten ze de volle breedte pakken. */ .woo .form-row-first, .woo .form-row-last, .woo .form-row-first, .woo .form-row-last { width: 100%; float: none; margin-right: 0; } .woo form .form-row input.input-text, .woo form .form-row select, .woo .select2-selection { min-height: 48px; } /* De gestapelde tabelrijen van WooCommerce in onze opmaak. */ .woo table.shop_table tr td { padding: 12px 14px; } .woo table.shop_table tr td::before { font-family: var(--font-kop); font-weight: 700; color: var(--tekst); } .woo .woocommerce-tabs ul.tabs { gap: 6px; } .woo .woocommerce-tabs ul.tabs a { padding: 9px 15px; font-size: .94rem; } .woo .woocommerce-tabs .panel { padding: 20px 18px; } } /* ===================================================================== MOBIELE CORRECTIES NA CONTROLE OP EEN ECHT TOESTEL ===================================================================== */ /* Lange, onbreekbare stukken tekst (een e-mailadres, een plaatsnaam met koppelteken) liepen op een telefoon buiten beeld. Ze mogen afbreken. */ .footer-adres, .footer-adres a, .contact-detail, .faq-contact-knoppen a, .gegevens-rij span { overflow-wrap: anywhere; } @media (max-width: 560px) { /* Twee kolommen bleek te smal voor het adresblok: het adres en het e-mailadres vielen buiten het scherm. De twee linkkolommen blijven naast elkaar staan, de bedrijfsgegevens krijgen de volle breedte eronder. */ .footer-bedrijf { grid-column: 1 / -1; } .footer-adres { grid-template-columns: 1fr 1fr; display: grid; gap: 12px 18px; } .footer-adres > span:last-child { grid-column: 1 / -1; } } @media (max-width: 420px) { /* Op de smalste toestellen alles onder elkaar. */ .footer-adres { grid-template-columns: 1fr; } .footer-adres > span:last-child { grid-column: auto; } } /* De knop met het e-mailadres erin mag over twee regels lopen. */ @media (max-width: 760px) { .faq-contact-knoppen .knop, .hero-knoppen .knop { white-space: normal; text-align: center; line-height: 1.3; } } /* ===================================================================== KOPTEKST OP TELEFOON EN TABLET Boven de 900 pixels staat het volledige menu met de twee pillen. Daaronder houden we alleen het logo, de winkelwagen en het hamburgermenu over: op een telefoon verdrong 'Bekijk alle speurtochten' anders het logo. Die knop staat in het menu zelf, boven aan de lijst, dus hij blijft één tik weg. ===================================================================== */ /* Het winkelwagentje is nu een lijnicoon in plaats van een emoji, dat op elk toestel anders werd getekend. */ .header-cart { display: grid; place-items: center; width: 44px; height: 44px; font-size: 0; color: var(--tekst); } .header-cart .ico { width: 25px; height: 25px; } .header-cart:hover { color: var(--groen); } .menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--tekst); } .menu-toggle svg { width: 26px; height: 26px; } .mobiel-sluit svg { width: 24px; height: 24px; } @media (max-width: 900px) { .hoofdmenu { display: none; } .menu-toggle { display: flex; } /* Beide pillen naar het menu; de koptekst blijft zo rustig. */ .header-acties .knop { display: none; } /* Menuknop links, logo in het midden, winkelwagen rechts. De buitenste kolommen zijn allebei 44px, precies de maat van de twee knoppen. Daardoor staat het logo écht midden op het scherm en niet net ernaast, wat wel zou gebeuren als de kolommen mee zouden ademen met hun inhoud (het winkelwagentje krijgt er bij een gevulde mand een telling bij). De winkelwagen en de menuknop zitten in de HTML in één wikkel. Met display: contents valt die wikkel uit de opmaak weg en komen ze zelf in het rooster te staan, zodat ze naar de buitenkanten kunnen zonder dat de HTML anders hoeft. */ .header-binnen { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding-inline: 14px; } .header-acties { display: contents; } /* De regel staat er bewust bij. De menuknop komt in de HTML ná de winkelwagen, en een rooster zet een onderdeel dat naar een eerdere kolom wil op de volgende regel. Zonder deze regel valt de menuknop dus onder de balk in plaats van ernaast. */ .menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; } .site-logo { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; } .header-cart { grid-column: 3; grid-row: 1; justify-self: end; } /* min(), niet 100%: deze regel staat later in het bestand en zou de 210px van hierboven anders helemaal overrulen, waardoor het logo op een telefoon juist groter werd dan op een laptop. */ .site-logo img, .site-logo .custom-logo { max-width: min(210px, 100%); } } /* ===================================================================== FOOTER OP TELEFOON Op een toestel besloeg de footer drie schermen: alles onder elkaar, met een fors logo en een icoonvak boven elke kop. Compacter, en het merk in het midden zodat het als afsluiting voelt in plaats van als een lijst. ===================================================================== */ @media (max-width: 560px) { /* Merk over de volle breedte, links uitgelijnd met de rest. */ /* De twee linkblokken naast elkaar; dat scheelt een half scherm scrollen. */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; } /* Het icoon naast de kop in plaats van erboven: scheelt per blok zo'n zestig pixels hoogte en leest even duidelijk. */ .footer-col { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; } .footer-col > h4 { margin: 0; flex: 1 1 auto; font-size: 1.02rem; } .footer-kop-ico { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 0; flex: 0 0 34px; } .footer-kop-ico .ico { width: 17px; height: 17px; } .footer-col > ul, .footer-col > address { flex: 0 0 100%; margin-top: 14px; } .footer-col li { margin-bottom: 10px; } /* Bedrijfsgegevens onder de twee kolommen, over de volle breedte. */ .footer-bedrijf { grid-column: 1 / -1; } } /* ===================================================================== FOOTER OP TELEFOON Alles op één linkerlijn, met dunne scheidingslijnen in plaats van grote gaten. Drie dingen waren hier scheef: 1. Het icoonvakje bij elke kop duwde de koptekst 44px naar rechts, terwijl de links eronder tegen de rand begonnen. Elke kop stond dus net naast zijn eigen lijstje. Op een smal scherm laten we dat vakje weg. 2. Twee linkkolommen naast elkaar pasten niet: 'Verzenden & retourneren' brak dan af. Onder 560px dus altijd één kolom. 3. De onderbalk stond nog gecentreerd. text-align haalde dat niet weg, want de balk is een flex-kolom en dan bepaalt align-items de uitlijning. ===================================================================== */ @media (max-width: 560px) { /* Eén kolom, en de scheidingslijnen maken de blokken herkenbaar. */ .footer-grid { grid-template-columns: 1fr; gap: 0; } .footer-col { display: block; text-align: left; border-top: 1px solid var(--rand); margin-top: 18px; padding-top: 18px; } /* De bovenste kolom heeft niets boven zich om van te scheiden. */ .footer-col:first-child { border-top: 0; margin-top: 0; padding-top: 0; } /* Zonder het icoonvakje begint de kop op dezelfde lijn als zijn links. */ .footer-kop-ico { display: none; } .footer-col > h4 { margin: 0 0 10px; font-size: 1.05rem; } .footer-col > ul, .footer-col > address { margin-top: 0; } /* De hele regel is aantikbaar, en de tussenruimte komt uit die ruimte zelf in plaats van uit een marge. Zo staat alles op een vast ritme. */ .footer-col li { margin: 0; } /* 8px boven en onder plus de regelhoogte komt op ongeveer 43px uit; dat is de maat die je met een duim betrouwbaar raakt. */ .footer-col li a { display: block; padding: 8px 0; } .footer-social { justify-content: flex-start; margin-top: 16px; } /* Adresregels op een vaste pictogramkolom, zodat de tekst overal op dezelfde plek begint en de tussenruimte gelijk blijft. */ .footer-adres { display: grid; gap: 12px; text-align: left; grid-template-columns: max-content; justify-content: start; } .footer-adres > span { display: grid; grid-template-columns: 19px 1fr; column-gap: 10px; align-items: start; text-align: left; } .footer-adres > span:last-child { grid-column: auto; } /* --- De onderbalk --------------------------------------------------- Drie losse groepen onder elkaar: betaallogo's, juridische links en het copyright. align-items is hier de bepalende regel voor de uitlijning; met alleen text-align bleef alles gecentreerd staan. De volgorde is omgedraaid ten opzichte van de HTML. Op een breed scherm staan de drie naast elkaar en leest het van links naar rechts, maar onder elkaar wil je eerst de logo's (die zeggen iets), dan de links en pas onderaan de copyrightregel als afsluiting. */ .footer-onder { align-items: flex-start; text-align: left; gap: 20px; padding-block: 26px; } .footer-betaal { order: 1; justify-content: flex-start; gap: 8px; } .footer-copy { order: 3; font-size: .88rem; opacity: .8; } /* De drie juridische links naast elkaar over de volle breedte. Op de vaste tekstgrootte pasten ze net niet: samen zo'n 333px terwijl er op een scherm van 360px maar 320px beschikbaar is. Ze braken dan af, en omdat de puntjes ertussen gewone tekst zijn bleef er eentje aan het eind van de regel hangen. De tekst schaalt nu mee met de schermbreedte, waardoor ze vanaf 360px op één regel passen. De puntjes kunnen daardoor weg: de verdeling over de breedte scheidt ze duidelijk genoeg. flex-wrap blijft aan staan als vangnet, zodat het op een nog smaller scherm netjes afbreekt in plaats van buiten beeld te lopen. */ .footer-juridisch { order: 2; width: 100%; justify-content: space-between; gap: 4px 10px; font-size: clamp(.78rem, 3.5vw, .88rem); } .footer-juridisch .scheider { display: none; } .footer-juridisch a { padding: 5px 0; white-space: nowrap; } } /* ===================================================================== WINKELOVERZICHT De belangrijkste pagina van de winkel: hier landen de meeste bezoekers uit Google en advertenties. Alles is erop gericht dat iemand binnen één blik weet wat dit is, voor wie het is en wat het kost. ===================================================================== */ .winkel-hero { position: relative; overflow: hidden; text-align: center; } .winkel-hero-foto { position: absolute; inset: 0; z-index: 0; } .winkel-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Warme sluier zodat de tekst leesbaar blijft en de foto er zacht doorheen komt. De sluier zit op de fotolaag zelf, want die staat buiten de inhoudskolom en loopt dus van rand tot rand. De tekst staat hier gecentreerd, dus de sluier is het dekst in het midden. */ .winkel-hero-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(56% 82% at 50% 46%, rgba(255,253,248,.95) 0%, rgba(255,252,245,.86) 48%, rgba(255,251,242,.28) 100%), linear-gradient(180deg, rgba(251,245,234,.32) 0%, rgba(251,245,234,.12) 100%); } /* Boven- en onderrand zacht laten uitlopen. */ .winkel-hero-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--hero-tint, var(--creme)) 0%, rgba(251,245,234,0) 15%), linear-gradient(0deg, var(--wit) 0%, rgba(255,255,255,0) 22%); } .winkel-hero-tekst { position: relative; z-index: 2; max-width: 46em; margin-inline: auto; } .winkel-hero .eyebrow { justify-content: center; } .winkel-hero h1 { margin: .1em 0 .3em; } .winkel-hero-intro { color: var(--tekst-zacht); font-size: 1.12rem; margin: 0 auto; max-width: 42em; } /* Bewijs direct onder de belofte. */ .winkel-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 22px; } .trust-punt { display: inline-flex; align-items: center; gap: 7px; color: var(--tekst-zacht); font-size: .94rem; } .trust-punt b { color: var(--tekst); } .trust-punt .ico { width: 18px; height: 18px; color: var(--groen); } .trust-punt .sterren { font-size: 1rem; } /* Thema's als snelkoppeling. */ .winkel-filter-kop { text-align: center; color: var(--tekst-zacht); margin: 0 0 14px; font-size: .96rem; } .winkel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-pil); font-family: var(--font-kop); font-size: .95rem; color: var(--tekst); text-decoration: none; transition: transform .14s, border-color .14s; } .chip img { width: 30px; height: 30px; object-fit: contain; } .chip:hover { transform: translateY(-2px); border-color: var(--groen); color: var(--groen-donker); } .chip--groen:hover { border-color: var(--groen); } .chip--oranje:hover { border-color: var(--oranje); } .chip--roze:hover { border-color: var(--roze); } .chip--blauw:hover { border-color: var(--blauw); } .chip--geel:hover { border-color: var(--geel); } .chip--paars:hover { border-color: var(--paars); } .chip--turkoois:hover { border-color: var(--turkoois); } /* Productraster van de winkel. */ .producten--winkel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* Prijs op de kaart: 'vanaf' klein, het bedrag groot. */ .product-prijs { display: inline-flex; align-items: baseline; gap: 5px; } .product-prijs .vanaf { font-family: var(--font-tekst); font-weight: 600; font-size: .8rem; color: var(--tekst-zacht); } .product-prijs b { font-family: var(--font-kop); font-size: 1.25rem; color: var(--groen-donker); line-height: 1; } .product-badge--top { background: var(--geel); color: #6b4e00; } /* Drie stappen. */ .winkel-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .winkel-stap { position: relative; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: 30px 22px 24px; text-align: center; box-shadow: var(--schaduw); } .winkel-stap .nr { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 999px; background: var(--oranje); color: #fff; display: grid; place-items: center; font-family: var(--font-kop); font-size: .95rem; } .winkel-stap .ring { width: 54px; height: 54px; border-radius: 999px; background: var(--groen-licht); color: var(--groen); display: grid; place-items: center; margin: 6px auto 12px; } .winkel-stap .ring .ico { width: 25px; height: 25px; } .winkel-stap b { display: block; font-family: var(--font-kop); font-size: 1.1rem; margin-bottom: 5px; } .winkel-stap span { color: var(--tekst-zacht); font-size: .94rem; } /* Afsluiting onder de vragen. */ .winkel-slot { position: relative; text-align: center; background: var(--creme); border-radius: var(--radius-groot); padding: clamp(26px,4vw,40px); margin-top: 30px; } .winkel-slot h3 { font-family: var(--font-kop); font-size: 1.3rem; margin: 0 0 .3em; } .winkel-slot p { color: var(--tekst-zacht); margin: 0 0 20px; } .winkel-slot-knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* --- Mobiel ---------------------------------------------------------- */ @media (max-width: 980px) { .producten--winkel { grid-template-columns: repeat(2, 1fr); } .winkel-stappen { grid-template-columns: 1fr; } } @media (max-width: 760px) { .winkel-hero-intro { font-size: 1rem; } .winkel-trust { gap: 8px 16px; font-size: .9rem; } .trust-punt { font-size: .88rem; } .winkel-chips { gap: 8px; } .chip { padding: 6px 13px 6px 6px; font-size: .9rem; } .chip img { width: 26px; height: 26px; } .winkel-slot-knoppen { flex-direction: column; } .winkel-slot-knoppen .knop { width: 100%; justify-content: center; } } @media (max-width: 560px) { .producten--winkel { grid-template-columns: 1fr; gap: 18px; } } /* --- Zoekmachinetekst onder de winkel -------------------------------- */ /* Staat onderaan: bovenaan zou hij de speurtochten uit beeld duwen. Iets rustiger opgemaakt dan de rest, want dit is doorleesstof en geen wervende tekst. */ .catekst .prose > h2:first-child { margin-top: 0; font-size: clamp(1.4rem,2.6vw,1.9rem); } .catekst .prose h3 { color: var(--groen-donker); margin-top: 1.7em; font-size: 1.22rem; } /* De vinkjeslijst verdeelt zich over de breedte. Het blok is nu net zo breed als de blokken erboven, en een lijst van korte regels onder elkaar liet daar een halve kolom leeg. */ .catekst .prose ul { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 9px 30px; margin: 1rem 0 1.3rem; } .catekst .prose ul li { position: relative; padding-left: 30px; margin: 0; } .catekst .prose ul li::before { content: ""; position: absolute; left: 0; top: .34em; width: 19px; height: 19px; border-radius: 999px; background: var(--groen-licht); /* Vinkje, als tekening zodat het op elk toestel gelijk oogt. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 13px 13px; background-position: center; background-repeat: no-repeat; } /* --- Tekstblok onderaan een pagina ----------------------------------- */ /* Zonder omlijsting oogde dit als tekst die er los onder was geplakt. Een klein kopje erboven en minder lucht maakt er een afgebakend onderdeel van. */ .sectie--tekst { padding-top: 0; padding-bottom: clamp(34px, 5vw, 64px); } .sectie-kop--tekst { text-align: center; margin-bottom: 18px; max-width: none; } .sectie-kop--tekst .eyebrow { justify-content: center; } /* Geen vlak eromheen. Onderaan de homepage stonden vier gekleurde vlakken op een rij: de reviews, het vragenblok, dit tekstvlak en de footer. Als gewone tekst op de witte pagina valt dit blok daar tussenuit, en dat leest rustiger dan weer een kader. */ /* Wat er ook bovenaan staat, het begint tegen de bovenrand. De regel hierboven gold alleen voor een h2, terwijl deze teksten met een h3 beginnen. Die kreeg de marge van een tussenkop en dat gaf ruim honderd pixels lege ruimte bovenin het vlak. */ /* .prose staat standaard op 760px breed, want dat is de prettige leesmaat voor een blogartikel. Dit blok is geen artikel maar de tekst onderaan een pagina, en die hoort even breed te zijn als de blokken erboven. */ .catekst .prose { max-width: none; margin-inline: 0; } .catekst .prose > :first-child { margin-top: 0; } .catekst .prose h2 { color: var(--groen-donker); } .catekst .prose p:last-child { margin-bottom: 0; } /* --- Winkelpagina: sneller bij de producten -------------------------- */ /* Iemand die op 'Bekijk alle speurtochten' klikt wil speurtochten zien, geen halve pagina aanloop. De marges boven het raster liepen op tot ruim duizend pixels: hoofdinhoud, sectie, hero, sectie en tussenkop stapelden allemaal hun eigen ruimte op elkaar. */ /* Geen ruimte boven de band. De sfeerfoto loopt van rand tot rand, en met een marge erboven bleef er een witte strook tussen de menubalk en de foto staan. De band zag er daardoor uit als een los blok in plaats van als de kop van de pagina, anders dan overal elders op de site. */ .site-main.winkel { padding-top: 0; } /* De herosectie geeft aan beide kanten ruimte weg: bovenaan doet de koptekst dat al, en onderaan sluit het productraster er direct op aan. */ .winkel > .sectie:first-of-type { padding-top: 0; padding-bottom: clamp(14px, 2vw, 22px); } .winkel .winkel-hero { padding-block: clamp(26px, 3.4vw, 42px); } .winkel .winkel-hero-tekst > .eyebrow { margin-bottom: 2px; } .winkel .winkel-trust { margin-top: 16px; } /* De sectie met de producten sluit direct op de hero aan. */ .winkel #speurtochten { padding-top: clamp(16px, 2.2vw, 28px); } .sectie-kop--krap { margin-bottom: clamp(18px, 2.6vw, 26px); } .sectie-kop--krap .blok-titel { margin-bottom: 0; margin-top: .1em; } .sectie-kop--krap .eyebrow { margin-bottom: 0; line-height: 1.2; } @media (max-width: 760px) { .site-main.winkel { padding-top: 10px; } .winkel .winkel-hero { padding-block: 22px; } .winkel > .sectie:first-of-type { padding-bottom: 12px; } .winkel #speurtochten { padding-top: 16px; } } /* --- Handgeschreven label boven een sectiekop ------------------------ */ /* .sectie-kop maakte het label een blok, en omdat .ico zelf ook een blok is sprong het pictogram naar een eigen regel erboven. Dat kostte op elke pagina zo'n veertig pixels en zag eruit als een zwevend icoontje. Nu staat het gewoon naast de tekst. */ .sectie-kop .eyebrow { display: inline-flex; align-items: center; gap: 8px; } /* Op de winkelpagina mag de kop over de volle breedte, anders breekt 'Bekijk alle speurtochten om uit te kiezen' onnodig over twee regels. */ .sectie-kop--krap { max-width: none; } /* --- Knop op een themategel ------------------------------------------ */ /* 'Ontdek thema →' was net te breed voor een tegel van twee naast elkaar, waardoor het pijltje op een eigen regel belandde en de knop dubbel zo hoog werd. Het pijltje staat nu in een eigen element met een vaste tussenruimte, en de tekst mag niet meer afbreken. */ .tegel-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; max-width: 100%; line-height: 1.2; } .tegel-knop .pijl { font-size: .92em; transform: translateY(.5px); } @media (max-width: 760px) { /* Iets kleiner, zodat het geheel ruim binnen de tegel blijft passen. */ .tegel-knop { font-size: .76rem; padding: 6px 12px; gap: 5px; } .tegel { padding: 14px 10px; } .tegel-naam { font-size: 1rem; } } /* ===================================================================== HEROBAND OVER DE VOLLE BREEDTE De hero stond op elke pagina als een witte kaart in het midden, met wit eromheen. Dat oogde als een los blok op de pagina. Nu is het een band die van rand tot rand loopt, met per pagina een eigen tint. De homepage deed dit al; de rest volgt nu hetzelfde principe. ===================================================================== */ .sectie--hero { position: relative; overflow: hidden; padding: clamp(30px, 4.4vw, 56px) 0; background: linear-gradient(168deg, var(--hero-tint, var(--creme)) 0%, var(--creme) 62%, var(--wit) 100%); } .sectie--hero > .container { position: relative; z-index: 2; } /* De kaart eronder is geen kaart meer: de band is nu de drager. Let op de position: static, dat is hier het scharnierpunt. Alles wat absoluut in de hero staat (de sfeerfoto en de sluier eroverheen) hangt zich daardoor aan de band vast in plaats van aan de kaart, en loopt dus netjes over de volle breedte mee. */ .sectie--hero .sfeerkaart { position: static; background: transparent; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; } /* Tinten per pagina. */ .hero--groen { --hero-tint: var(--groen-licht); } .hero--geel { --hero-tint: #fdf3d6; } .hero--oranje { --hero-tint: #fdeedd; } .hero--blauw { --hero-tint: #e6f0fb; } .hero--roze { --hero-tint: #fdeaf2; } .hero--paars { --hero-tint: #f0eafd; } .hero--creme { --hero-tint: var(--creme-diep); } /* Thema- en knutselpagina's volgen de kleur van hun eigen thema. De klasse thema-- staat op de band zelf, zodat --thema-zacht daar al bekend is; dat werkt overal, ook waar :has() niet beschikbaar is. */ .hero--thema { --hero-tint: var(--thema-zacht, var(--creme)); } /* De achtergrond van de kaart zelf vervalt; de band doet dat werk. */ .sectie--hero .thema-hero, .sectie--hero .contact-hero, .sectie--hero .winkel-hero { background: none; } @media (max-width: 760px) { .sectie--hero { padding: clamp(22px, 5vw, 34px) 0; } } /* ===================================================================== PRODUCTPAGINA De sfeer komt van het thema zelf: de band achter het koopblok krijgt de kleur van het feestje en de illustratie staat in de hoeken. Zonder die koppeling ziet elke speurtocht er hetzelfde uit, terwijl juist het thema is waar een ouder op klikt. ===================================================================== */ /* --- De band achter het koopblok ------------------------------------- */ /* Geen witte strook tussen de menubalk en de band. .site-main geeft overal ruimte bovenaan, wat klopt voor een pagina die met een kop begint, maar hier begint de pagina met een gekleurde band van rand tot rand. Die hoort tegen het menu aan te sluiten, net als op de winkelpagina; anders ziet hij eruit als een los blok in plaats van als de kop van de pagina. */ .site-main.productpagina { padding-top: 0; } /* Geen overflow: hidden hier. Dat stond er voor de thema-illustraties die in de hoeken staken; die zijn weg. Belangrijker: overflow: hidden op een voorouder maakt position: sticky binnenin stil onmogelijk, en de fotokolom moet juist blijven staan terwijl je verder leest. */ .sectie--hero.koop-band { overflow: visible; } .koop-band .kruimels { padding: 0 0 clamp(14px, 2vw, 22px); } .koop-band .kruimels .container { padding-inline: 0; } .koop-band > .container { position: relative; z-index: 2; } /* De fotokolom is bewust ruimer dan de koopkolom: het beeld verkoopt hier, en de koopkolom heeft aan zo'n 440px genoeg voor de twee bezorgkaarten naast elkaar. align-items: start is niet alleen opmaak maar de voorwaarde waaronder de fotokolom kan blijven plakken. */ .koop { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 34px); align-items: start; } /* min-width: 0 is hier geen detail maar het verschil tussen werken en niet. Een kolom in een rooster mag standaard niet smaller worden dan zijn inhoud, en de productfoto's zijn 1500px breed. Zonder deze regel duwt de foto de hele indeling open en loopt hij dwars over de pagina heen. Dat geldt voor elk rooster hieronder waar een foto of een lange tekst in kan staan. */ .koop > *, .avontuur-rij > *, .bewijs-rij > * { min-width: 0; } /* --- Het beeld ------------------------------------------------------- */ /* De foto blijft staan terwijl je de koopkolom verder leest. Dat mag die kolom dus ook langer maken dan de foto; zolang je leest blijft zichtbaar waar het over gaat. De afstand tot boven is de menubalk plus wat lucht, want die balk plakt zelf ook en zou er anders overheen komen. */ .koop-beeld { position: sticky; top: calc(var(--kop-hoogte) + 18px); --duim-breedte: 76px; --duim-gat: 12px; } /* De duimnagelstrook staat buiten de normale stroom, tegen de zijkant van het fotokader geplakt. Dat is niet mooi-doenerij maar noodzaak: stond hij gewoon naast de foto, dan bepaalde de langste van de twee de hoogte, en bij tien of twaalf foto's is dat de strook. Die liep dan meters onder de foto door. Nu bepaalt alleen de foto de hoogte en past de strook zich daaraan aan. */ .koop-beeld-rij { position: relative; padding-left: calc(var(--duim-breedte) + var(--duim-gat)); } .koop-hoofdbeeld { position: relative; min-width: 0; } /* WooCommerce schaalt zijn galerij normaal via regels die aan div.product hangen. Dat omhulsel zetten we hier niet neer, dus doen we het zelf. */ /* WooCommerce verbergt de galerij tot zijn eigen script hem vrijgeeft, met een opacity: 0 in de tag zelf. Wij gebruiken dat script niet meer voor de galerij, dus zetten we hem zelf aan. Een inline stijl wint van een gewone regel, dus dit is een van de weinige plekken waar !important het juiste middel is. */ .koop-beeld .woocommerce-product-gallery { margin: 0; width: 100%; max-width: 100%; opacity: 1 !important; } /* De fotostrook. Elke foto is precies zo breed als de strook en klikt vast als je loslaat, dus je ziet er altijd één en nooit een randje van de buur. Het schuiven doet de browser; er komt geen enkele breedteberekening aan te pas. */ .koop-beeld .woocommerce-product-gallery__wrapper { margin: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius-groot); background: #fff; box-shadow: 0 16px 44px rgba(31,122,77,.12); border: 1px solid rgba(255,255,255,.8); scrollbar-width: none; -ms-overflow-style: none; } .koop-beeld .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; } /* Elke foto in hetzelfde vierkante kader, en daarbinnen zo groot mogelijk zonder dat er iets afvalt. De foto's zijn niet even hoog: van de 132 zijn er 64 precies vierkant (de platen van het pakket) en zo'n 55 liggend 4:3 (de sfeerfoto's). Zonder vast kader werd het kader zo hoog als de hoogste foto, en stond er bij de liggende een lap wit onder terwijl de foto zelf van maat leek te veranderen zodra je doorschoof. Nu staat elke foto midden in hetzelfde kader: de vierkante vullen het precies, de liggende krijgen boven en onder een gelijke witte rand die eruitziet als een passe-partout. Bewust passend en niet vullend: deze platen tonen wat er in het pakket zit, met tekst tot aan de rand. Bijsnijden zou er zomaar de helft van een kaart of een prijskaartje afhalen. */ .koop-beeld .woocommerce-product-gallery__image { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: clamp(6px, 1.4vw, 16px); } .koop-beeld .woocommerce-product-gallery__image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(var(--radius-groot) - 14px); } .koop-beeld img { display: block; width: 100%; height: auto; } /* De duimnagels staan op een breed scherm rechtop links van de foto. Dat scheelt hoogte onder de foto en laat de foto zelf breder zijn, en de strook is precies zo hoog als de foto: hij rekt mee in plaats van dat we een hoogte verzinnen. Wat er niet in past schuift, met de pijltjes boven en onder. */ .duim-strook { position: absolute; left: 0; top: 0; bottom: 0; width: var(--duim-breedte); display: flex; flex-direction: column; min-height: 0; } .duimen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; /* De balk zelf hoeft niet in beeld, daar zijn de pijltjes voor. */ scrollbar-width: none; -ms-overflow-style: none; } .duimen::-webkit-scrollbar { display: none; } .duimen li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; } /* De duimnagels zelf wel allemaal even groot en vierkant. Zij hoeven niets te bewijzen, ze wijzen alleen aan; een gelijke rij leest veel rustiger dan een trapje van hoge en lage plaatjes. Hier mag dus wel bijgesneden worden. */ .duim { display: block; width: 100%; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 14px; border: 2px solid var(--rand); background: #fff; opacity: .8; transition: opacity .15s, border-color .15s; } .duim img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; } .duim:hover, .duim.is-actief { opacity: 1; border-color: var(--thema, var(--groen)); } /* De pijltjes staan op de foto, links en rechts, en zetten de foto verder. Ze stonden eerst bij de duimnagels en bladerden die rij; tikken op een pijltje en dan de balk eronder zien schuiven is niet wat iemand verwacht. */ .foto-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pil); border: 1px solid var(--rand); background: rgba(255,255,255,.94); color: var(--tekst); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.16); transition: opacity .15s, background .15s; } .foto-pijl:hover { background: #fff; } .foto-pijl svg { width: 19px; height: 19px; } .foto-pijl--terug { left: 12px; } .foto-pijl--verder { right: 12px; } /* Aan het begin en het eind heeft de pijl geen functie meer; weg in plaats van grijs, dan is het beeld ook meteen rustiger. */ .foto-pijl[disabled] { opacity: 0; pointer-events: none; } /* --- De koopkolom ---------------------------------------------------- */ /* De naam op de maat waarop veruit de meeste er op één regel op passen, en de ondertitel er klein onder in de gewone letter. Samen halen ze de kop terug van drie regels naar anderhalve, zonder dat er een woord verdwijnt. */ .koop-titel { margin: .1em 0 .5em; color: var(--groen-donker); } .koop-titel-naam { display: block; font-size: clamp(1.38rem, 2.4vw, 1.82rem); line-height: 1.14; } /* De ondertitel is de naam van het avontuur zelf, en dat is precies het soort zin dat met de hand geschreven hoort te zijn. Het handschrift stond eerst boven de titel als label met de themanaam erin, wat naast de titel eronder dubbelop was; hier voegt het wel iets toe. Caveat is klein slecht leesbaar, dus hij staat een stuk groter dan gewone tekst. */ .koop-titel-onder { display: block; margin-top: .18em; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.25; color: var(--oranje-donker); } /* De beoordeling als eigen blokje boven de titel. Als losse regel tekst viel het weg tegen de rest; in een kaartje met een randje eromheen is het het eerste wat je ziet, en dat is precies de bedoeling bij een winkel die de bezoeker nog niet kent. Het is een link naar de ervaringen verderop, vandaar de hover. */ .koop-sterren { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 7px 14px; border-radius: var(--radius-pil); background: var(--wit); border: 1px solid var(--rand); box-shadow: 0 2px 10px rgba(31,122,77,.06); color: var(--tekst-zacht); font-size: .9rem; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .koop-sterren:hover { border-color: var(--geel); box-shadow: 0 4px 14px rgba(31,122,77,.1); } .koop-sterren .sterren { font-size: 1.02rem; } .koop-sterren b { font-family: var(--font-kop); font-size: 1.02rem; color: var(--tekst); } .koop-sterren b { color: var(--tekst); font-family: var(--font-kop); font-size: 1.05rem; } .koop-sterren:hover span { color: var(--groen); } .koop-belofte { color: var(--tekst); margin-bottom: 18px; } /* --- Per mail of per post -------------------------------------------- */ /* De twee bezorgwijzen als gestapelde regels en niet als twee brede kaarten. Naast elkaar in een kolom van ruim 400px werd elke kaart zo'n 195px breed, en dan moet de tekst over meerdere regels en oogt het blok log. Onder elkaar heeft elke regel de volle breedte, past alles op één regel en is het geheel lager. */ .levering-keuze { display: grid; gap: 8px; margin-bottom: 16px; } .levering-kaart { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; background: #fff; border: 2px solid var(--rand); border-radius: 14px; padding: 9px 14px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, background .15s; } .levering-kaart:hover { border-color: #cfd9c6; } .levering-kaart.is-gekozen { border-color: var(--groen); background: var(--groen-licht); } /* Het keuzerondje. Een echt rondje in plaats van een lintje erboven: het is de vorm die iedereen herkent en het kost geen extra hoogte. */ .levering-bol { flex: 0 0 18px; width: 18px; height: 18px; border-radius: var(--radius-pil); border: 2px solid #cbd6c9; background: #fff; display: grid; place-items: center; transition: border-color .15s; } .levering-kaart.is-gekozen .levering-bol { border-color: var(--groen); } .levering-kaart.is-gekozen .levering-bol::after { content: ""; width: 9px; height: 9px; border-radius: var(--radius-pil); background: var(--groen); } .levering-ico { flex: 0 0 auto; color: var(--groen); display: grid; place-items: center; } .levering-ico .ico { width: 19px; height: 19px; } .levering-tekst { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } .levering-naam { font-family: var(--font-kop); font-weight: 700; font-size: .95rem; line-height: 1.25; } .levering-tijd { color: var(--tekst-zacht); font-size: .78rem; line-height: 1.3; } .levering-prijs { flex: 0 0 auto; font-family: var(--font-kop); font-weight: 800; font-size: 1.08rem; } /* --- Het bestelformulier --------------------------------------------- */ .koop-prijs { margin-bottom: 16px; } /* Vrijwel iedereen bestelt één speurtocht, dus het aantalveld staat alleen maar in de weg. Het veld blijft in het formulier staan (WooCommerce stuurt dan gewoon 1 mee), we laten het niet zien. Wie er toch meer wil, past het aantal in de winkelwagen aan. Hier staat wel een !important, en dat is met opzet: zodra je een variant kiest roept de variantcode van WooCommerce jQuery's .show() aan op dit veld, en die schrijft een inline "display: block" in de tag zelf. Een inline stijl wint altijd van een stylesheet, hoe specifiek je de selector ook maakt, dus dit is het enige middel dat werkt. */ .koop-form .quantity { display: none !important; } /* De prijs staat al op de keuzekaart erboven; hier zou hij twee keer staan. */ .productpagina .woocommerce-variation-price { display: none; } /* WooCommerce kleurt zijn knoppen zelf met een regel van twee klassen plus een element, dus we moeten er minstens even zwaar overheen om oranje te winnen. */ .productpagina .koop-form button.single_add_to_cart_button { display: block; width: 100%; background: var(--oranje); color: #fff; border: 0; cursor: pointer; font-family: var(--font-kop); font-weight: 700; font-size: 1.08rem; /* 48px hoog: 24px tekst met 12px lucht boven en onder. Genoeg om met een duim te raken, zonder dat de knop de halve kolom vult. */ padding: 11px 28px; border-radius: var(--radius-pil); min-height: 48px; box-shadow: 0 10px 26px rgba(245,145,30,.34); transition: background .15s, transform .12s; } .productpagina .koop-form button.single_add_to_cart_button:hover { background: var(--oranje-donker); transform: translateY(-2px); } .productpagina .koop-form button.single_add_to_cart_button.disabled { opacity: .5; box-shadow: none; transform: none; } .productpagina .woocommerce-variation-availability { color: var(--tekst-zacht); font-size: .9rem; } .productpagina .reset_variations { display: none; } /* De omschrijving die WooCommerce bij de gekozen variant toont. Die tekst staat per variant in WooCommerce zelf en zegt hetzelfde als de keuzekaartjes erboven: hoe snel je hem hebt. Twee keer hetzelfde vlak boven elkaar leest rommelig, dus hier verbergen we hem. De tekst blijft gewoon in WooCommerce staan; weghalen van deze regel laat hem weer zien. */ .productpagina .woocommerce-variation-description { display: none; } /* De beloftes onder de bestelknop. Welke regels je ziet hangt af van de bezorgwijze die aanstaat: het script zet data-toon op deze lijst. Zonder javascript blijft de stand staan die de server meegeeft, en die klopt met de optie die standaard geselecteerd is. */ .koop-beloftes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; } .koop-beloftes li { display: none; align-items: center; gap: 10px; font-size: .9rem; color: var(--tekst); } .koop-beloftes li[data-soort="alle"], .koop-beloftes[data-toon="digitaal"] li[data-soort="digitaal"], .koop-beloftes[data-toon="fysiek"] li[data-soort="fysiek"] { display: flex; } .belofte-ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--groen-licht); border-radius: var(--radius-pil); color: var(--groen); } .belofte-ico .ico { width: 17px; height: 17px; } /* Het logo van de betaalmethode op hetzelfde vlak als de pictogrammen, zodat de tekst ernaast op één lijn blijft staan. */ .belofte-logo { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #ffb3c7; } /* --- Vaak samen gekocht ---------------------------------------------- */ .erbij { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rand); } .erbij-kop { font-size: 1.12rem; margin: 0 0 12px; color: var(--groen-donker); } .erbij-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .erbij-item { position: relative; display: flex; align-items: center; gap: 12px; background: var(--wit); border: 1px solid var(--rand); border-radius: 14px; padding: 8px 12px; } .erbij-beeld { flex: 0 0 52px; width: 52px; border-radius: 10px; overflow: hidden; background: #fff; } .erbij-beeld img { display: block; width: 100%; height: 52px; object-fit: cover; } .erbij-tekst { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } .erbij-naam { font-family: var(--font-kop); font-weight: 700; font-size: .93rem; line-height: 1.25; color: var(--tekst); text-decoration: none; } .erbij-naam:hover { color: var(--groen); } /* Even groot als de bedragen bij de bezorgkeuze erboven. speur_prijs_html() levert .product-prijs, en die staat elders op 1,25rem afgestemd op een productkaart; in deze smalle regel is dat te groot. De marge eronder hoort ook bij die kaart en moet hier weg. */ .erbij-prijs { font-size: .88rem; color: var(--tekst-zacht); } .erbij-prijs .product-prijs { margin: 0; } .erbij-prijs .product-prijs b { font-size: 1.08rem; font-weight: 800; color: var(--tekst); } .erbij-prijs .product-prijs .vanaf { font-size: .76rem; } .erbij-plus { cursor: pointer; flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--radius-pil); background: var(--oranje); color: #fff; display: grid; place-items: center; text-decoration: none; box-shadow: 0 4px 12px rgba(245,145,30,.32); transition: background .15s; } .erbij-plus:hover { background: var(--oranje-donker); color: #fff; } .erbij-plus svg { width: 18px; height: 18px; grid-area: 1 / 1; } /* Plus of vinkje: allebei liggen ze op hetzelfde plekje in de knop, we laten er één zien. Zo verspringt er niets als hij van kleur wisselt. */ .plus-vink { display: none; } /* Het keuzevakje zelf is uit beeld; het label eromheen is de knop. Verbergen met opacity en niet met display: none, want dan kun je er niet meer met de tabtoets naartoe. */ .erbij-vink { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .erbij-vink:checked ~ .erbij-plus { background: var(--groen); box-shadow: 0 4px 12px rgba(31,122,77,.28); } .erbij-vink:checked ~ .erbij-plus .plus-teken { display: none; } .erbij-vink:checked ~ .erbij-plus .plus-vink { display: block; } .erbij-vink:checked ~ .erbij-plus:hover { background: var(--groen-donker); } .erbij-vink:focus-visible ~ .erbij-plus { outline: 3px solid var(--blauw); outline-offset: 2px; } .erbij-item:has(.erbij-vink:checked) { border-color: var(--groen); background: var(--groen-licht); } /* Alleen tonen wat past bij de gekozen bezorgwijze. Wat de klant al heeft aangevinkt blijft wel staan: iets laten verdwijnen dat net is gekozen zou het bedrag hierboven onverklaarbaar maken. */ .erbij-lijst .erbij-item { display: none; } .erbij-lijst .erbij-item[data-soort="alle"], .erbij-lijst .erbij-item:has(.erbij-vink:checked), .erbij-lijst[data-toon="digitaal"] .erbij-item[data-soort="digitaal"], .erbij-lijst[data-toon="fysiek"] .erbij-item[data-soort="fysiek"] { display: flex; } /* --- Wat je nu bij elkaar hebt --------------------------------------- */ /* Alleen het bedrag, zonder bijschrift. Het verandert mee met de bezorgwijze en met wat je erbij kiest, maar het hoeft daarom niet te schreeuwen: het is de prijs van wat je nu voor je hebt. */ .koop-totaal { margin: 0 0 14px; } .totaal-bedrag { font-family: var(--font-kop); font-weight: 700; font-size: 1.22rem; color: var(--tekst); } .totaal-bedrag .woocommerce-Price-amount { font: inherit; color: inherit; } /* --- Handgeschreven sectiekoppen ------------------------------------- */ /* Ligt het pakket op de plank, dan mag je dat weten op het moment dat je voor per post kiest. Bij per mail zegt het kaartje al "Direct na je betaling", dus daar zou het dubbelop zijn: de melding luistert mee met de keuze. */ .direct-leverbaar { display: none; } .direct-leverbaar[data-toon="fysiek"] { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--groen); font-family: var(--font-kop); font-weight: 700; font-size: .92rem; } .direct-leverbaar .ico { width: 17px; height: 17px; flex: 0 0 17px; } /* Op een productpagina staan veel losse blokken onder elkaar. Een handschrift maakt de overgang vriendelijk zonder dat er weer een kader omheen hoeft. */ .hand-titel { font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--groen); margin: 0 0 clamp(18px, 2.4vw, 28px); display: flex; align-items: center; gap: 10px; } .hand-titel .ico { width: 22px; height: 22px; color: var(--oranje); } .hand-titel--klein { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 16px; } .hand-titel--midden { justify-content: center; text-align: center; margin-bottom: 18px; } /* --- Wat krijg je ---------------------------------------------------- */ /* De inhoud van het pakket als opsomming naast het verhaal. Tien korte regels met een vinkje ervoor: dat leest als een paklijst, en dat is precies wat een ouder hier zoekt. */ .pakket-kort { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .pakket-kort li { display: flex; align-items: center; gap: 9px; font-size: .94rem; color: var(--tekst); } .pakket-vink { flex: 0 0 21px; width: 21px; height: 21px; display: grid; place-items: center; background: var(--groen-licht); border-radius: var(--radius-pil); color: var(--groen); } .pakket-vink .ico { width: 13px; height: 13px; stroke-width: 3; } /* Wat de aantallen betekenen per bezorgwijze. Dezelfde pictogrammen als bij de keuze bovenaan, zodat je meteen ziet waar het over gaat. In het oranje, en niet in hetzelfde groen als de vinkjes erboven. Groen op groen las als nog twee regels van de paklijst, terwijl dit iets anders is: niet wat er in de doos zit, maar wat het betekent voor de manier waarop je hem krijgt. */ .pakket-hoe { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rand); display: grid; gap: 10px; } .pakket-regel { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--tekst-zacht); font-size: .84rem; line-height: 1.45; } .pakket-regel b { color: var(--oranje-donker); font-family: var(--font-kop); } .pakket-ico { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; display: grid; place-items: center; background: #fef1e3; border-radius: var(--radius-pil); color: var(--oranje-donker); } .pakket-ico .ico { width: 14px; height: 14px; } /* Staat het pakketblok er niet, dan pakt het verhaal de volle breedte in plaats van een lege kolom naast zich te houden. */ .avontuur-blok:only-child { grid-column: 1 / -1; } /* --- Het avontuur en waarom ouders kiezen ---------------------------- */ .avontuur-rij { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(20px, 2.6vw, 34px); align-items: start; } .avontuur-blok { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--thema-zacht, var(--creme)), #fff 78%); border-radius: var(--radius-groot); padding: clamp(24px, 3.2vw, 42px); } .avontuur-tekst { position: relative; z-index: 1; } .avontuur-blok h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: .1em 0 .6em; } .avontuur-blok .catekst .prose { max-width: none; margin-inline: 0; } .avontuur-blok .inklap-tekst { max-height: 230px; } .avontuur-blok .catekst { --inklap-achtergrond: #fdfaf3; } .avontuur-punten { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .avontuur-punten li { display: grid; justify-items: center; text-align: center; gap: 4px; } .avontuur-punten .ring { width: 42px; height: 42px; border-radius: 999px; background: #fff; display: grid; place-items: center; color: var(--thema, var(--groen)); box-shadow: var(--schaduw); } .avontuur-punten .ring .ico { width: 20px; height: 20px; } .avontuur-punten b { font-family: var(--font-kop); font-size: .95rem; } .avontuur-punten span:last-child { color: var(--tekst-zacht); font-size: .82rem; line-height: 1.4; } .waarom-blok { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--schaduw); } .waarom-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .waarom-item { display: grid; gap: 4px; } .waarom-item .ring { width: 38px; height: 38px; border-radius: 12px; background: var(--groen-licht); display: grid; place-items: center; color: var(--groen); margin-bottom: 4px; } .waarom-item .ring .ico { width: 19px; height: 19px; } .waarom-item b { font-family: var(--font-kop); font-size: .96rem; } .waarom-item span:last-child { color: var(--tekst-zacht); font-size: .85rem; line-height: 1.5; } /* --- Naar het themafeestje --------------------------------------------- */ /* Een brede band in de kleur van het thema, met de twee foto's ernaast die laten zien wat er gratis klaarstaat. Zonder die foto's is het een zin met een knop, en dan klikt niemand. */ .feestje-band { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; background: linear-gradient(140deg, var(--thema-zacht, var(--groen-licht)), #fff 82%); border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(24px, 3.2vw, 40px) clamp(24px, 3.2vw, 44px); } .feestje-band > * { min-width: 0; } .feestje-tekst h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 .35em; color: var(--groen-donker); } .feestje-tekst p { color: var(--tekst-zacht); margin: 0 0 18px; max-width: 46ch; } .feestje-tekst .eyebrow { color: var(--thema, var(--oranje)); } .feestje-beelden { display: flex; gap: 14px; } .feestje-beelden figure { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; } .feestje-beelden img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: var(--schaduw); } .feestje-beelden figcaption { margin-top: 7px; font-family: var(--font-kop); font-weight: 700; font-size: .84rem; color: var(--tekst-zacht); } /* --- Ervaringen en vragen naast elkaar ------------------------------- */ .bewijs-rij { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3.4vw, 46px); align-items: start; } .ervaring-score { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-zacht); font-size: .95rem; margin: 0 0 18px; } .ervaring-score b { color: var(--tekst); font-family: var(--font-kop); } /* Eén beoordeling tegelijk. De strook schuift horizontaal en klikt per kaart vast, dus je ziet er altijd precies één en nooit een randje van de volgende. Alle kaarten zijn even hoog als de langste, waardoor er niets verspringt als hij doorschuift. */ /* Geen overflow: auto maar hidden. Daarmee kun je er zelf niet doorheen vegen, terwijl het script de strook nog wel kan verschuiven: een element met verborgen overloop blijft van binnenuit gewoon te scrollen. Je wacht dus netjes op de volgende, zoals bedoeld. */ .ervaringen { display: flex; gap: 0; overflow: hidden; } .ervaring { flex: 0 0 100%; min-width: 0; background: #fff; border: 1px solid var(--rand); border-radius: 18px; padding: 20px 22px; box-shadow: var(--schaduw); } .ervaring p { color: var(--tekst); font-style: italic; font-size: .98rem; line-height: 1.55; margin: 8px 0 10px; } /* Geen stippenrij meer, alleen een rustige teller. Zo blijft zichtbaar dat er meer beoordelingen zijn en hoeveel, zonder dat er een rij bolletjes onder hangt. Vegen of scrollen brengt je zelf vooruit en terug. */ /* Het balkje onder de beoordelingen: het loopt leeg tot de volgende komt. In plaats van "3 van 6", wat om gelezen worden vraagt terwijl je juist de beoordeling wilt lezen. */ .ervaring-voortgang { width: 120px; height: 4px; margin: 16px auto 0; background: var(--rand); border-radius: 999px; overflow: hidden; } .ervaring-balk { display: block; width: 100%; height: 100%; background: var(--groen); border-radius: 999px; transform-origin: left center; animation: ervaring-aflopen 7s linear infinite; } @keyframes ervaring-aflopen { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Vraagt iemand om zo min mogelijk beweging, dan wisselt er niets vanzelf en heeft een lopend balkje geen betekenis meer. */ @media (prefers-reduced-motion: reduce) { .ervaring-balk { animation: none; } } .ervaring-teller { text-align: center; color: var(--tekst-zacht); font-size: .85rem; margin: 14px 0 0; } .ervaring-teller .teller-nu { font-family: var(--font-kop); font-weight: 700; color: var(--tekst); } .ervaring-naam { font-family: var(--font-kop); font-weight: 700; font-size: .9rem; } /* Ons antwoord onder een beoordeling. Ingesprongen met een streepje ervoor, zodat meteen duidelijk is dat dit de winkel is die reageert en niet de klant. */ .ervaring-antwoord { margin-top: 14px; padding: 12px 14px; background: var(--groen-licht); border-left: 3px solid var(--groen); border-radius: 0 12px 12px 0; } .ervaring-antwoord b { display: flex; align-items: center; gap: 6px; font-family: var(--font-kop); font-size: .84rem; color: var(--groen-donker); } .ervaring-antwoord b .ico { width: 15px; height: 15px; } .ervaring-antwoord p { margin: 5px 0 0; font-style: normal; font-size: .88rem; color: var(--tekst); } /* Het bedankje na het versturen. Groen en met een vinkje, zodat je meteen ziet dat het gelukt is; dat was het hele probleem, want je kwam terug op een pagina die deed alsof er niets was gebeurd. */ .beoordeling-bedankt { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 14px 16px; background: var(--groen-licht); border: 1px solid var(--groen); border-radius: 14px; color: var(--tekst); font-size: .93rem; line-height: 1.45; } .bedankt-ico { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--groen); border-radius: var(--radius-pil); color: #fff; } .bedankt-ico .ico { width: 14px; height: 14px; stroke-width: 3; } .beoordeling-bedankt b { display: block; font-family: var(--font-kop); } .ervaring-leeg { color: var(--tekst-zacht); font-size: .95rem; margin: 0 0 4px; } .ervaring-knop { margin-top: 18px; } /* --- Venster om een beoordeling te schrijven -------------------------- */ /* Zolang javascript het venster niet heeft overgenomen staat het formulier gewoon op de pagina. Pas als de knop echt werkt verdwijnt het erachter. */ .venster { display: block; width: 100%; max-width: none; border: 0; padding: 0; background: none; } .venster--klaar { display: none; } .venster--klaar[open] { display: block; } .venster--klaar { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border-radius: var(--radius-groot); background: var(--wit); box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden; } .venster--klaar::backdrop { background: rgba(38,58,48,.55); backdrop-filter: blur(3px); } .venster-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--rand); } .venster-kop h2 { margin: 0; font-size: 1.25rem; color: var(--groen-donker); } .venster-kop p { margin: 2px 0 0; color: var(--tekst-zacht); font-size: .88rem; } .venster-sluit { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; cursor: pointer; border: 1px solid var(--rand); border-radius: var(--radius-pil); background: var(--wit); color: var(--tekst); display: grid; place-items: center; } .venster-sluit:hover { background: var(--vlak); } .venster-sluit svg { width: 17px; height: 17px; } .venster-inhoud { padding: 18px 22px 22px; overflow-y: auto; max-height: calc(100vh - 190px); } /* Het formulier zelf. WooCommerce levert kale velden aan; hier krijgen ze de vorm van de rest van de site. */ .venster .comment-reply-title { display: none; } .venster .comment-form { margin: 0; } .venster .comment-form p { margin: 0 0 14px; } .venster .comment-form label { display: block; margin-bottom: 5px; font-family: var(--font-kop); font-weight: 700; font-size: .9rem; color: var(--tekst); } .venster .comment-form input[type="text"], .venster .comment-form input[type="email"], .venster .comment-form textarea { width: 100%; padding: 11px 14px; font: inherit; font-size: .95rem; background: var(--wit); border: 1px solid var(--rand); border-radius: 12px; color: var(--tekst); } .venster .comment-form textarea { min-height: 120px; resize: vertical; } .venster .comment-form input:focus, .venster .comment-form textarea:focus { outline: 0; border-color: var(--groen); box-shadow: 0 0 0 3px rgba(31,122,77,.14); } .venster .required { color: var(--roze); } /* De sterren die WooCommerce van het keuzelijstje maakt. */ .venster .comment-form-rating { margin-bottom: 16px; } .venster p.stars { margin: 0; } .venster p.stars a { color: var(--geel); } .venster .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; } .venster .comment-form-cookies-consent label { margin: 0; font-family: var(--font-tekst); font-weight: 400; font-size: .84rem; color: var(--tekst-zacht); } .venster .form-submit { margin: 4px 0 0; } .venster .form-submit input[type="submit"] { width: 100%; min-height: 48px; padding: 11px 28px; cursor: pointer; border: 0; background: var(--oranje); color: #fff; border-radius: var(--radius-pil); font-family: var(--font-kop); font-weight: 700; font-size: 1.08rem; box-shadow: 0 10px 26px rgba(245,145,30,.34); transition: background .15s; } .venster .form-submit input[type="submit"]:hover { background: var(--oranje-donker); } .product-reviews .commentlist { display: none; } .product-reviews #review_form_wrapper { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius-groot); padding: clamp(18px, 2.6vw, 26px); } .product-reviews #reply-title { font-family: var(--font-kop); font-size: 1.1rem; display: block; margin-bottom: .6em; } .product-reviews .comment-form label { display: block; font-weight: 700; margin-bottom: 4px; } .product-reviews .comment-form input[type="text"], .product-reviews .comment-form input[type="email"], .product-reviews .comment-form textarea { width: 100%; border: 1px solid var(--rand); border-radius: 14px; padding: 11px 14px; font: inherit; background: #fff; } .product-reviews .comment-form textarea { min-height: 110px; } .product-reviews .comment-form p { margin-bottom: 13px; } .product-reviews .comment-form .submit { background: var(--groen); color: #fff; border: 0; cursor: pointer; font-family: var(--font-kop); font-weight: 700; padding: 13px 28px; border-radius: var(--radius-pil); min-height: 48px; } .product-reviews .comment-form .submit:hover { background: var(--groen-donker); } @media (max-width: 1100px) { .avontuur-rij { grid-template-columns: 1fr; } .bewijs-rij { grid-template-columns: 1fr; } } @media (max-width: 1000px) { } @media (max-width: 900px) { .koop { grid-template-columns: 1fr; } /* De band naar het themafeestje onder elkaar, en een maat kleiner. Op een telefoon werd de tekstkolom anders zo'n 180px breed: dan valt elke zin uit elkaar en breekt zelfs de knoptekst over drie regels. */ .feestje-band { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; } .feestje-tekst h2 { font-size: 1.24rem; } .feestje-tekst p { font-size: .92rem; margin-bottom: 14px; } .feestje-tekst .knop { width: auto; } .feestje-beelden { gap: 12px; max-width: 320px; } .feestje-beelden figcaption { font-size: .8rem; } /* Op een telefoon is de kaart smal, dus dezelfde tekst kost er twee keer zoveel regels. Wat lucht eraf, anders vult dit blok het halve scherm. */ .ervaring { padding: 16px 17px; } .ervaring p { font-size: .92rem; line-height: 1.5; margin: 6px 0 8px; } /* Eén kolom: er is niets meer om langs te blijven staan, en een plakkende foto zou de halve telefoon vullen. */ .koop-beeld { position: static; } /* De duimnagels weer liggend onder de foto: rechtop naast een foto die al de volle breedte pakt, blijft er te weinig voor de foto over. */ .koop-beeld-rij { padding-left: 0; } .duim-strook { position: static; width: auto; flex-direction: row; margin-top: 12px; } .duimen { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; } /* Vier stuks met drie tussenruimtes van 10px ertussen. */ .duimen li { flex: 0 0 calc((100% - 30px) / 4); } } @media (max-width: 760px) { .ervaringen { grid-template-columns: 1fr; } } @media (max-width: 560px) { .avontuur-punten { grid-template-columns: 1fr; } .avontuur-punten li { grid-template-columns: 42px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 12px; } .avontuur-punten .ring { grid-row: span 2; } .waarom-rij { grid-template-columns: 1fr; } } /* --- De bestelroute op een telefoon ----------------------------------- */ @media (max-width: 900px) { /* Onder elkaar, en dan heeft meelopen geen zin meer: er is niets om langs te scrollen. Het overzicht komt netjes onder de regels te staan. minmax(0, 1fr) en niet 1fr: een 1fr-kolom mag niet smaller worden dan de inhoud, en dan wordt het rooster breder dan het scherm in plaats van dat de inhoud meekrimpt. Op de brede weergave hierboven staat daarom ook al minmax(0, ...). */ .wagen, .afreken { grid-template-columns: minmax(0, 1fr); } .wagen-zij, .afreken-zij { position: static; } } @media (max-width: 900px) { /* Mijn account: het menu boven de inhoud in plaats van ernaast, en dan als een strook knoppen waar je doorheen veegt. Onder elkaar zou het een halve pagina kosten voordat je bij je downloads bent. */ .account-raster { grid-template-columns: 1fr; gap: 18px; } .account-menu { position: static; margin: 0 -20px; } .account-menu ul { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 8px; scrollbar-width: none; } .account-menu ul::-webkit-scrollbar { display: none; } .account-menu li { flex: 0 0 auto; } .account-menu a { background: var(--creme); white-space: nowrap; padding: 9px 14px; } .account-inloggen--twee { grid-template-columns: 1fr; } .woo .addresses .col2-set { grid-template-columns: 1fr; } } @media (max-width: 620px) { .account-snel { grid-template-columns: 1fr; } /* De regel wordt twee lagen: bovenin de foto met de naam, eronder het aantal en het bedrag. Vijf kolommen naast elkaar is op deze breedte niet te doen. Het kruisje blijft rechtsboven, waar je het verwacht. */ .wagen-regel { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "beeld tekst weg" "beeld aantal bedrag"; row-gap: 10px; } .wagen-beeld { grid-area: beeld; width: 64px; height: 64px; align-self: start; } .wagen-tekst { grid-area: tekst; } .wagen-weg { grid-area: weg; align-self: start; } .wagen-aantal { grid-area: aantal; } .wagen-bedrag { grid-area: bedrag; text-align: right; align-self: center; } /* nowrap hoort bij de kolomrichting. Met wrap erbij mag een onderdeel breder blijven dan de rij, en dan stak het kortingsblok rechts buiten beeld. */ .wagen-acties { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .wagen-acties .coupon { flex: 1 1 auto; } /* Bestellen moet met één duim kunnen. */ .wagen-stap { width: 38px; height: 38px; } .wagen-aantal input.qty { height: 38px; width: 52px; } .woo .checkout-button, .woo #place_order { min-height: 52px; } }