/* ============================================================ CHA CHI VERSACI — site-brede opmaak (header, footer, subpagina's) Bewust terughoudend. De kleuren van de losse Elementor-widgets zijn in de database omgezet (zie _local/remap-kleuren.php), dus hier staat alleen wat CSS beter kan: typografie en knoppen. Er staat expres GEEN blanket-regel op .elementor-section zijn achtergrond — dat zou het licht/donker-ritme van de subpagina's platslaan. ============================================================ */ body{ font-family:'Nunito',sans-serif; font-weight:600; color:var(--text); } h1,h2,h3,h4,h5,h6, .elementor-heading-title{ font-family:'Fredoka',sans-serif; font-weight:600; } /* Knoppen krijgen de "indrukbare" look uit de sandbox: een pil met een massieve schaduw eronder die bij het indrukken wegzakt. LET OP: --on-accent is berekend uit de echte helderheid van het groen. Bij #5AEA01 is dat DONKERE tekst, niet wit — wit is op dit groen onleesbaar. Niet handmatig op #fff zetten. De schaduw staat bewust in een halfdoorzichtig donker in plaats van een vaste kleur: zo werkt hij op een witte knop, een groene knop én op de groene banden, zonder per geval een uitzondering. */ .elementor-button, .elementor-button-link, .elementor-button-wrapper .elementor-button{ font-family:'Fredoka',sans-serif; font-weight:500; border-radius:var(--r-pill); box-shadow:0 5px 0 rgba(20,33,10,.22); transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease; } .elementor-button:hover, .elementor-button-wrapper .elementor-button:hover{ transform:translateY(3px); box-shadow:0 2px 0 rgba(20,33,10,.22); } .elementor-button:active, .elementor-button-wrapper .elementor-button:active{ transform:translateY(5px); box-shadow:0 0 0 rgba(20,33,10,.22); } /* Op een diepe sectie mag de schaduw wat dieper, anders valt hij weg. */ .ccv-deep .elementor-button{box-shadow:0 5px 0 rgba(0,0,0,.38)} .ccv-deep .elementor-button:hover{box-shadow:0 2px 0 rgba(0,0,0,.38)} /* Focus zichtbaar houden in de nieuwe kleuren */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible{ outline:3px solid var(--pop); outline-offset:3px; border-radius:8px; } /* ============================================================ CCV Media Archief — één geheel, geen losse blokken Stond hiervoor in themes/hello-elementor/style.css, dus in het ouder-thema zelf. Daar wordt het bij elke Hello Elementor-update overschreven; vandaar dat het hier staat. Kleuren omgezet naar het logo-palet, en Cinzel/Inter vervangen door Fredoka/Nunito zodat het bij de rest van de site past. ============================================================ */ .ccv-archive-list{ max-width:880px; margin:0 auto; background:var(--deep-bg); border:1px solid rgba(124,242,36,.18); border-radius:var(--r-md); overflow:hidden; } .ccv-archive-item{ display:block; padding:28px 32px; border-bottom:1px solid rgba(246,236,255,.08); color:var(--deep-text); text-decoration:none; transition:background .25s ease,padding-left .25s ease; } .ccv-archive-item:last-child{border-bottom:none} .ccv-archive-item:hover{ background:rgba(124,242,36,.05); padding-left:40px; color:var(--deep-text); } .ccv-archive-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; } .ccv-cat{ font-family:'Nunito',sans-serif; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-pill); border:1px solid; background:transparent; } .ccv-outlet, .ccv-date, .ccv-excerpt{ font-family:'Nunito',sans-serif; color:var(--deep-muted); } .ccv-outlet{font-size:10px;letter-spacing:.15em;text-transform:uppercase} .ccv-date{font-size:10px;margin-left:auto;letter-spacing:.05em} .ccv-excerpt{font-size:14px;margin:0 0 12px;line-height:1.65} .ccv-archive-item h3{ font-family:'Fredoka',sans-serif; font-size:clamp(16px,2.2vw,20px); font-weight:600; color:var(--deep-text); margin:0 0 10px; line-height:1.4; transition:color .25s ease; } .ccv-archive-item:hover h3{color:var(--accent-bright)} .ccv-read-more{ font-family:'Nunito',sans-serif; font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--deep-accent); transition:color .25s ease; } .ccv-archive-item:hover .ccv-read-more{color:var(--accent-bright)} /* ============================================================ Diepe secties (.ccv-deep) Elke landingspagina heeft één diep paarse sectie als accent. Koppen en tekst die daar geen eigen kleur hebben, erven de donkere inkt van de lichte basis — en dat is op paars onleesbaar. Hier krijgen ze de lichte set als standaard. Widgets MET een eigen kleur winnen hiervan: Elementor zet die met een hogere specificiteit (.elementor-1583 .elementor-element-x .titel). Daardoor houden witte kaarten binnen zo'n sectie hun donkere tekst. ============================================================ */ /* Een diepe sectie is diep, ook als niemand dat heeft ingesteld. De klasse ccv-deep zet de tekst op de lichte set. Staat er dan geen donkere achtergrond onder, dan krijg je lichte letters op een lichte pagina - onleesbaar, en dat was op /diensten/workshops/ precies wat er gebeurde: sectie 7bb9d77 heeft ccv-deep maar in de gegenereerde CSS staat alleen padding, geen background-color. Deze regel is een vangnet, geen dwang. Elementor zet een ingestelde kleur weg als `.elementor-2416 .elementor-element.elementor-element-x` - drie klassen tegen mijn ene - dus elke sectie die zelf een kleur heeft houdt die gewoon. Alleen wie er geen heeft valt hierop terug, en krijgt de kleur die bij ccv-deep hoort. Waarom dit hier moet en niet in de database: een sectie kan zijn achtergrond op tien manieren kwijtraken - een beeld dat 404 geeft, een overlay, een instelling die bij een import sneuvelt. Een vangnet in CSS vangt ze allemaal, een reparatie per sectie alleen die ene. */ .ccv-deep{ background-color:var(--deep-bg); } .ccv-deep h1, .ccv-deep h2, .ccv-deep h3, .ccv-deep h4, .ccv-deep h5, .ccv-deep h6, .ccv-deep .elementor-heading-title{ color:var(--deep-text); } .ccv-deep p, .ccv-deep li, .ccv-deep .elementor-widget-text-editor, .ccv-deep .elementor-icon-list-text{ color:var(--deep-muted); } .ccv-deep a:not(.elementor-button){color:var(--deep-accent)} .ccv-deep a:not(.elementor-button):hover{color:var(--accent-bright)} /* Kaarten binnen een diepe sectie blijven licht met donkere tekst. */ .ccv-deep .elementor-element[class*="elementor-element-"] > .elementor-widget-wrap[style*="background-color: #FFF" i]{color:var(--ink)} /* * Rijtjes met kleine icoonkaartjes (bv. de activiteiten bij de vakantiewoning) * vielen uiteen in 7 + 1. Op breed scherm passen ze op één rij; daaronder * schalen ze netjes mee in plaats van er eentje los te laten hangen. */ @media(min-width:1100px){ .ccv-deep > .elementor-container, .ccv-icon-rij > .elementor-container{ flex-wrap:nowrap !important; } .ccv-deep > .elementor-container > .elementor-column, .ccv-icon-rij > .elementor-container > .elementor-column{ flex:1 1 0 !important; min-width:0; } } @media(max-width:1099px){ .ccv-deep > .elementor-container > .elementor-column, .ccv-icon-rij > .elementor-container > .elementor-column{ flex:1 1 clamp(150px, 22%, 240px) !important; } } /* ============================================================ Productkaarten (WooCommerce + Essential Addons) De productlijst kwam met een eigen zwarte kaart en een felgroen binnenvlak — dat vocht met de rest van de site. Hier krijgt hij dezelfde witte kaart met zachte schaduw als de kaarten op de homepage, en een groene knop. ============================================================ */ .eael-product-list-wrapper, .eael-product-list-wrapper .eael-product-list-item, .woocommerce ul.products li.product, .wc-block-grid__product{ background:var(--card) !important; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; } .eael-product-list-wrapper{box-shadow:none;background:transparent !important} .eael-product-list-wrapper .eael-product-list-item{padding:20px} .eael-product-list-title, .eael-product-list-title a, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:'Fredoka',sans-serif; color:var(--ink) !important; } .eael-product-list-price, .woocommerce ul.products li.product .price{ color:var(--accent-deep) !important; font-weight:700; } /* De knop volgt de sandbox: groene pil met donkere tekst. */ .eael-product-list-add-to-cart-button a, .woocommerce ul.products li.product .button, .wc-block-grid__product-add-to-cart .wp-block-button__link{ background:var(--accent) !important; color:var(--on-accent) !important; font-family:'Fredoka',sans-serif !important; border-radius:var(--r-pill) !important; box-shadow:0 5px 0 var(--accent-deep); text-transform:none !important; letter-spacing:.01em !important; } .eael-product-list-add-to-cart-button a:hover, .woocommerce ul.products li.product .button:hover{ transform:translateY(3px); box-shadow:0 2px 0 var(--accent-deep); } /* De twee knoppen onder een productkaart als paar. Essential Addons zet de tussenruimte met margin-right op de link zelf; die valt weg zodra iets anders de marge overschrijft. Een gap op de rij eromheen kan dat niet overkomen. */ .eael-product-list-content-footer .eael-product-list-buttons{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; } .eael-product-list-content-footer .eael-product-list-add-to-cart-button a{ margin-right:0 !important; } /* Het winkelwagentje stond bovenop de eerste letter. Essential Addons plaatst dat icoon absoluut op left:23px en houdt er 40px linkerpadding voor vrij. De WooCommerce-knopregel in de Customizer zet die padding terug naar 14px 28px !important, dus de tekst begon op 28px en liep onder het icoon door. Hier komt de ruimte terug, en alleen bij deze knop: die is de enige met icoon. De selector loopt bewust helemaal uit tot a.button. Een kortere versie haalde het niet: die had exact dezelfde specificiteit als de Customizer-regel, en Customizer-CSS staat later in de pagina dan de thema-stylesheets. Bij gelijkspel wint de laatste, dus viel de padding alsnog terug op 28px. Nu ligt hij er een klasse bovenop. */ .eael-product-list-wrapper .eael-product-list-content-footer .eael-product-list-buttons .eael-product-list-add-to-cart-button a.button{ padding-left:46px !important; padding-right:24px !important; } /* "Bekijk product" was een kale tekstlink naast een volle knop. Nu de omlijnde pil uit de hero, zodat het paar zich leest zoals overal op de site: gevuld groen is de hoofdactie, omlijnd de bijzaak. Dezelfde vorm, hetzelfde lettertype, ander gewicht. */ .eael-product-list-quick-view-button a.open-popup-link{ display:inline-flex; align-items:center; font-family:'Fredoka',sans-serif; font-size:15px; font-weight:500; line-height:1.2; color:var(--accent-deep); background:transparent; box-shadow:inset 0 0 0 3px var(--accent); border-radius:var(--r-pill); padding:12px 26px; text-decoration:none; cursor:pointer; transition:transform .22s cubic-bezier(.2,.9,.3,1.4),background .22s ease; } /* De onderstreping bleef staan, ook al zet de pil hierboven al text-decoration:none. Essential Addons zet text-decoration-line:underline via een selector met vier klassen; de pil hierboven heeft er drie en geen !important, en verloor dus alleen op dit ene punt. De vorm kwam er wel door — er was geen concurrentie op box-shadow of padding — waardoor de knop de pilvorm had maar de tekst onderstreept bleef. */ .eael-product-list-wrapper .eael-product-list-content-footer .eael-product-list-buttons .eael-product-list-quick-view-button a.open-popup-link{ text-decoration:none !important; } .eael-product-list-quick-view-button a.open-popup-link:hover{ transform:translateY(-3px); background:var(--pill); text-decoration:none; } /* ============================================================ De witte balk met het logo, boven de footer Het logo stond eerst als los vlak in de linkerkolom. Als brede witte band leest het rustiger en komt het kleurenlogo beter uit tegen het paars eronder. ============================================================ */ .ccv-footer-balk{ background:#fff; padding:26px 20px; text-align:center; } .ccv-footer-balk img{ display:inline-block; width:auto; max-width:min(300px,72vw); height:auto; transition:transform .3s cubic-bezier(.2,.9,.3,1.4); } .ccv-footer-balk a:hover img{transform:translateY(-3px) rotate(-2deg)} /* ============================================================ Socials in de footer — dezelfde tegels als op de homepage De footer had drie verschillende socials-rijen: grote cirkels, een losse rij in de linkerkolom en nog een set eronder. Nu één blok, met handle en platform erbij zodat je ziet waar je heen gaat. ============================================================ */ /* Ook op de voorpagina. Hier stond het omgekeerde: body.ccv-front .elementor-element-ccvfs1{display:none} Dat was op 4 augustus bewust zo gezet. Het socialsblok staat in het footersjabloon en verschijnt dus op elke pagina; op de voorpagina landde het direct onder de inhoud en oogde het als een stuk van de pagina in plaats van als footer. Die reden is vervallen. De tellerrij is sindsdien naar de footer verhuisd, dus daar staat nu een eigen blok tussen de inhoud en de socials. Het leest niet meer als een losse sectie maar als wat het is, en juist op de voorpagina wil je die kanalen kunnen vinden. */ .ccv-footer-socials{padding:52px 0 44px;font-family:'Nunito',sans-serif;text-align:center} .ccv-footer-socials .wrap{max-width:1000px;margin:0 auto;padding:0 26px} .ccv-footer-socials .eyebrow{ display:inline-block;font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--deep-bg);background:var(--deep-accent); padding:6px 15px;border-radius:var(--r-pill);margin-bottom:14px; } .ccv-footer-socials h3{ font-family:'Fredoka',sans-serif;font-size:clamp(22px,3vw,32px);font-weight:700; color:var(--deep-text);margin:0 0 26px;letter-spacing:-.01em; } .ccv-footer-socials .soc-grid{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px; } .ccv-footer-socials .soc{ display:block;background:var(--card);border-radius:var(--r-lg); padding:22px 14px;text-align:center;text-decoration:none; box-shadow:var(--shadow); transition:transform .32s cubic-bezier(.2,.9,.3,1.4),box-shadow .32s ease; } /* In rust al een slagje scheef, om en om. Vijf kaarten strak naast elkaar lezen als een tabel. Een halve graad heen en weer maakt er een plankje stickers van, en dat is precies de taal die de site elders al spreekt: .korting, .show-tag en .ccv-choco-sticker staan ook scheef. Hover blijft wat hij was, alleen nu vanaf die stand. */ .ccv-footer-socials .soc:nth-child(odd){transform:rotate(calc(var(--tilt) * .5))} .ccv-footer-socials .soc:nth-child(even){transform:rotate(calc(var(--tilt) * -.5))} .ccv-footer-socials .soc:hover{transform:translateY(-7px) rotate(calc(var(--tilt) * 1.4))} .ccv-footer-socials .soc .si{ width:52px;height:52px;margin:0 auto 12px;border-radius:18px; display:grid;place-items:center;font-size:22px; background:var(--accent);color:var(--on-accent); box-shadow:0 4px 0 var(--accent-deep); /* Zachtjes op en neer, elk blokje net iets later dan zijn buurman. Dezelfde beweging als de hero gebruikt, maar met een kleinere uitslag: die staat op 9px en dat is hier te veel. */ animation:ccv-bob 3.4s ease-in-out infinite; } .ccv-footer-socials .soc:nth-child(1) .si{animation-delay:0s} .ccv-footer-socials .soc:nth-child(2) .si{animation-delay:.45s} .ccv-footer-socials .soc:nth-child(3) .si{animation-delay:.9s} .ccv-footer-socials .soc:nth-child(4) .si{animation-delay:1.35s} .ccv-footer-socials .soc:nth-child(5) .si{animation-delay:1.8s} .ccv-footer-socials .soc:nth-child(even) .si{background:var(--pop);color:var(--on-pop);box-shadow:0 4px 0 var(--pop-deep)} /* Bij aanraking licht het blokje op, net als op de voorpagina. */ .ccv-footer-socials .soc:hover .si{box-shadow:0 4px 0 var(--accent-deep),var(--glow-accent)} .ccv-footer-socials .soc:nth-child(even):hover .si{box-shadow:0 4px 0 var(--pop-deep),var(--glow-pop)} /* Wie beweging liever niet heeft, krijgt hem niet. De bestaande regel daarvoor staat in ccv-hero.css en geldt alleen binnen .ccv-hero. */ @media(prefers-reduced-motion:reduce){ .ccv-footer-socials .soc .si{animation:none} .ccv-footer-socials .soc{transition-duration:.01ms} } .ccv-footer-socials .soc .cnt{ font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--ink); word-break:break-word; } .ccv-footer-socials .soc .plat{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:2px} @media(max-width:820px){ .ccv-footer-socials .soc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:520px){ .ccv-footer-socials .soc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ============================================================ Nieuwsbriefblok in de footer ============================================================ */ .ccv-footer-nieuwsbrief{ background:var(--deep-bg); padding:56px 0 60px; } /* Boven uitlijnen, niet centreren: het formulier is een stuk hoger dan de tekst, waardoor de kop anders halverwege de velden bleef hangen. */ .ccv-footer-nieuwsbrief .wrap{ max-width:1180px;margin:0 auto;padding:0 26px; display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start; } .ccv-footer-nieuwsbrief .nb-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600; letter-spacing:.08em;text-transform:uppercase; color:var(--deep-bg);background:var(--deep-accent); padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px; } .ccv-footer-nieuwsbrief h3{ font-family:'Fredoka',sans-serif;font-size:clamp(24px,3.2vw,34px);font-weight:700; color:var(--deep-text);margin:0 0 10px;letter-spacing:-.01em;line-height:1.14; } .ccv-footer-nieuwsbrief p{ font-family:'Nunito',sans-serif;font-size:15.5px;line-height:1.7; color:var(--deep-muted);margin:0; } .ccv-footer-nieuwsbrief .nb-punten{ list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px; } .ccv-footer-nieuwsbrief .nb-punten li{ display:flex;align-items:flex-start;gap:11px; font-family:'Nunito',sans-serif;font-size:14.5px;line-height:1.55;color:var(--deep-text); } .ccv-footer-nieuwsbrief .nb-punten i{ color:var(--deep-accent);font-size:13px;width:18px;text-align:center;margin-top:3px;flex-shrink:0; } .ccv-footer-nieuwsbrief .nb-klein{ display:flex;align-items:center;gap:8px; margin-top:20px;font-size:12.5px;color:var(--deep-muted); } .ccv-footer-nieuwsbrief .nb-klein i{color:var(--deep-accent);font-size:11px} /* Het formulier op een eigen kaart, zodat het loskomt van het paars. */ .ccv-footer-nieuwsbrief .nb-formulier{ background:rgba(255,255,255,.06); border:1px solid var(--deep-border); border-radius:var(--r-lg); padding:28px 26px; } /* Op het paars zijn de labels licht en de velden blijven wit. De specificiteit moet hier hoger dan die van de site-brede labelregel verderop, anders wint de donkere inkt en lees je niets meer. */ body .ccv-footer-nieuwsbrief .gform_wrapper .gform_fields .gfield .gfield_label, body .ccv-footer-nieuwsbrief .gform_wrapper .gfield_label, .ccv-footer-nieuwsbrief .gform_wrapper .gfield_label{ color:var(--deep-text) !important; } body .ccv-footer-nieuwsbrief .gform_wrapper .gfield .gfield_description, body .ccv-footer-nieuwsbrief .gform_wrapper .gfield_consent_label, .ccv-footer-nieuwsbrief .gform_wrapper .gfield_description, .ccv-footer-nieuwsbrief .gform_wrapper .gfield_consent_label{ color:var(--deep-muted) !important; text-transform:none !important; letter-spacing:0 !important; } .ccv-footer-nieuwsbrief .gform_wrapper .gform_fields{gap:12px} @media(max-width:860px){ .ccv-footer-nieuwsbrief .wrap{grid-template-columns:1fr;gap:24px} } /* ============================================================ Gravity Forms in de huisstijl De formulieren kwamen met hun eigen grijze velden en blauwe knop. Hier krijgen ze dezelfde vormtaal als de rest: zachte velden met een groene rand bij focus, en de groene pil-knop uit de sandbox. ============================================================ */ /* Een formulier dat nog niet in een kaart staat, krijgt er zelf een. Op /contact/ en /vakantiewoningen-spanje/ zit het formulier in een witte kaart - .ccv-contact-kaart en .ccv-boeken-formulier - met dezelfde radius en schaduw als de rest van de site. Elders, zoals op /stage/, staat het formulier als kale shortcode op de achtergrond: dezelfde velden, maar zonder vlak eromheen zweven ze los op het lichtgroen en is niet te zien waar het formulier begint of eindigt. Dus: elk formulier in een shortcode-widget krijgt het vlak, en de plekken die al een kaart HEBBEN zetten het daarbinnen weer uit. Dat is een regel erbij in plaats van per pagina een uitzondering, en het werkt ook voor formulieren die er later bij komen. */ .elementor-widget-shortcode .gform_wrapper, .elementor-widget-gravityforms .gform_wrapper{ background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:32px 30px; } /* En binnen een bestaande kaart geen tweede vlak: dat is precies de dubbele kaart die bij de icon-boxen ook al misging. De popup en de nieuwsbrief in de footer hebben hun eigen achtergrond en horen er evenmin bij. */ .ccv-contact-kaart .gform_wrapper, .ccv-boeken-formulier .gform_wrapper, .ccv-footer-nieuwsbrief .gform_wrapper, .ccv-popup .gform_wrapper{ background:transparent; border-radius:0; box-shadow:none; padding:0; } @media (max-width:767px){ .elementor-widget-shortcode .gform_wrapper, .elementor-widget-gravityforms .gform_wrapper{padding:24px 20px} } .gform_wrapper form{margin:0} .gform_wrapper .gform_fields{gap:16px} /* De oude thema-CSS zette labels op groene kapitalen met !important; daarom staat dat hier ook zo. */ .gform_wrapper .gfield_label, body .gform_wrapper .gform_fields .gfield .gfield_label{ font-family:'Fredoka',sans-serif !important; font-size:13.5px !important; font-weight:600 !important; color:var(--ink) !important; text-transform:none !important; letter-spacing:.01em !important; margin-bottom:6px; } /* Sublabels (Voornaam / Achternaam onder één veld) stonden nog in groene kapitalen uit de oude huisstijl. */ .gform_wrapper .gform-field-label--type-sub, body .gform_wrapper .ginput_complex label, body .gform_wrapper .gfield .gform-field-label--type-sub{ font-family:'Nunito',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; color:var(--muted) !important; text-transform:none !important; letter-spacing:0 !important; } /* Beschrijvingen zijn geen invoervelden: geen kader eromheen. */ .gform_wrapper .gfield_description, body .gform_wrapper .gfield .gfield_description{ border:0 !important; background:transparent !important; padding:4px 0 0 !important; font-family:'Nunito',sans-serif !important; text-transform:none !important; letter-spacing:0 !important; } .gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=number], .gform_wrapper input[type=date], .gform_wrapper select, .gform_wrapper textarea{ width:100%; font-family:'Nunito',sans-serif !important; font-size:15px !important; font-weight:600; color:var(--ink) !important; background:var(--card) !important; border:2px solid var(--border) !important; border-radius:var(--r-md) !important; padding:13px 16px !important; transition:border-color .2s ease,box-shadow .2s ease; } .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 4px var(--pill) !important; } .gform_wrapper ::placeholder{color:var(--muted);opacity:1} .gform_wrapper .gfield_consent_label, .gform_wrapper .gfield_description{ font-size:13.5px; color:var(--muted); line-height:1.5; } .gform_wrapper input[type=checkbox], .gform_wrapper input[type=radio]{accent-color:var(--accent);width:18px;height:18px} .gform_wrapper .gform_footer{margin-top:18px;padding:0} /* De oude thema-CSS zette knoppen met !important in kapitalen. */ body .gform_wrapper .gform_footer input[type=submit], body .gform_wrapper .gform_footer .gform_button, .gform_wrapper .gform_button, .gform_wrapper input[type=submit]{ font-family:'Fredoka',sans-serif !important; font-size:16px !important; font-weight:500 !important; text-transform:none !important; letter-spacing:.01em !important; background:var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:var(--r-pill) !important; padding:14px 30px !important; text-transform:none !important; letter-spacing:.01em !important; cursor:pointer; box-shadow:0 6px 0 var(--accent-deep); transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease; } .gform_wrapper .gform_button:hover, .gform_wrapper input[type=submit]:hover{ transform:translateY(3px); box-shadow:0 3px 0 var(--accent-deep),var(--glow-accent); } .gform_wrapper .gfield_required{color:var(--pop)} .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea{border-color:var(--pop) !important} .gform_wrapper .validation_message{ font-size:13px;color:var(--pop-deep); background:transparent;border:0;padding:4px 0 0; } .gform_confirmation_message{ font-family:'Fredoka',sans-serif; color:var(--accent-deep); background:var(--pill); border-radius:var(--r-md); padding:16px 20px; } /* Op een diepe sectie draait het contrast om. */ .ccv-deep .gform_wrapper .gfield_label{color:var(--deep-text) !important} .ccv-deep .gform_wrapper .gfield_description, .ccv-deep .gform_wrapper .gfield_consent_label{color:var(--deep-muted)} .ccv-archive-leeg{ font-family:'Nunito',sans-serif; color:var(--muted); text-align:center; padding:40px 0; } @media(max-width:768px){ .ccv-archive-item{padding:20px} .ccv-archive-item:hover{padding-left:26px} .ccv-date{margin-left:0} } /* ============================================================ Cijferstrook op de samenwerkpagina Verving de tellers die het aantal samenwerkende partijen en mediavermeldingen noemden — getallen die niemand kan nachecken. Wat overblijft: volgers, give-aways en de media in woorden. ============================================================ */ .ccv-cijfers{font-family:'Nunito',sans-serif} .ccv-cijfers .wrap{max-width:1080px;margin:0 auto;padding:0 26px} .ccv-cijfers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ccv-cijfer{ background:var(--card);border-radius:var(--r-lg);padding:28px 26px;text-align:center; box-shadow:var(--shadow);border-bottom:4px solid var(--accent); } .ccv-cijfer .getal{ display:block;font-family:'Fredoka',sans-serif;font-weight:700; font-size:clamp(34px,4.4vw,50px);line-height:1;color:var(--ink);letter-spacing:-.02em; } .ccv-cijfer .getal .u{color:var(--accent-deep);font-size:.55em;margin-left:2px} .ccv-cijfer .getal-tekst{font-size:clamp(26px,3.2vw,36px);color:var(--accent-deep)} .ccv-cijfer .label{ display:block;margin-top:10px;font-family:'Fredoka',sans-serif;font-size:15px; font-weight:600;color:var(--ink); } .ccv-cijfer .noot{display:block;margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--muted)} @media(max-width:820px){.ccv-cijfers-grid{grid-template-columns:1fr}} /* ============================================================ Mediaoverzicht Was een lijst met alleen tekst; nu kaarten met de voorpagina van het artikel of een still uit de uitzending. ============================================================ */ .ccv-mediagrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px; max-width:1180px;margin:0 auto;font-family:'Nunito',sans-serif; } .ccv-mediakaart{ display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg); overflow:hidden;text-decoration:none;box-shadow:var(--shadow); transition:transform .32s cubic-bezier(.2,.9,.3,1.35),box-shadow .32s ease; } .ccv-mediakaart:hover{transform:translateY(-6px);box-shadow:0 26px 48px -22px rgba(70,150,0,.45)} /* De beelden zijn schermafdrukken en zenderlogo's van sterk uiteenlopende verhoudingen. Bijsnijden hakt er letters af, dus ze passen zich in het vlak in plaats van het te vullen. */ .ccv-mediakaart-beeld{ aspect-ratio:16/10;overflow:hidden;background:#ffffff; border-bottom:3px solid var(--accent); display:flex;align-items:center;justify-content:center;padding:18px; } .ccv-mediakaart-beeld img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block; transition:transform .5s cubic-bezier(.2,.9,.3,1.2); } .ccv-mediakaart:hover .ccv-mediakaart-beeld img{transform:scale(1.05)} .ccv-mediakaart-beeld.is-leeg{ display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--deep-bg),var(--pop-deep)); } .ccv-mediakaart-beeld.is-leeg span{ font-family:'Fredoka',sans-serif;font-size:19px;font-weight:600; color:var(--deep-accent);letter-spacing:.04em;text-align:center;padding:0 18px; } .ccv-mediakaart-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px} .ccv-mediakaart-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px} .ccv-mediakaart-meta .soort{ font-family:'Fredoka',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-deep);background:var(--pill); padding:4px 10px;border-radius:var(--r-pill); } .ccv-mediakaart-meta .outlet{ font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pop-deep); } .ccv-mediakaart-meta .datum{margin-left:auto;font-size:12px;color:var(--muted)} .ccv-mediakaart h3{ font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;line-height:1.32; color:var(--ink);margin:0 0 9px; } .ccv-mediakaart p{font-size:14px;line-height:1.62;color:var(--muted);margin:0 0 16px;flex:1} .ccv-mediakaart-link{ display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif; font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--accent-deep); } .ccv-mediakaart:hover .ccv-mediakaart-link{color:var(--pop-deep)} .ccv-media-leeg{text-align:center;padding:40px;color:var(--muted)} @media(max-width:640px){.ccv-mediagrid{grid-template-columns:1fr}} /* ============================================================ Chocolade — aankondiging De oude repen zijn uit de verkoop. Tot de nieuwe er is staat hier één kaart met wat er wél te melden valt. ============================================================ */ .ccv-choco{font-family:'Nunito',sans-serif} .ccv-choco .wrap{max-width:1080px;margin:0 auto;padding:0 26px} .ccv-choco-kaart{ display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center; background:var(--card);border-radius:var(--r-xl);padding:46px 46px;box-shadow:var(--shadow); } .ccv-choco .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:'Fredoka',sans-serif; font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--pop-deep); background:rgba(196,51,240,.12);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px; } .ccv-choco h2{ font-family:'Fredoka',sans-serif;font-size:clamp(27px,3.7vw,42px);font-weight:700; color:var(--ink);line-height:1.12;letter-spacing:-.01em;margin:0 0 14px; } .ccv-choco .squiggle{position:relative;display:inline-block;color:var(--accent-deep)} .ccv-choco .squiggle::after{ content:'';position:absolute;left:0;right:0;bottom:-.1em;height:.14em; border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent); } .ccv-choco p{font-size:16.5px;line-height:1.72;color:var(--text);margin:0 0 14px} .ccv-choco .ccv-choco-klein{font-size:14px;color:var(--muted)} .ccv-choco-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .ccv-choco-knoppen a{ display:inline-flex;align-items:center;gap:9px;font-family:'Fredoka',sans-serif; font-size:15.5px;font-weight:500;padding:14px 26px;border-radius:var(--r-pill); text-decoration:none;transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease; } .ccv-choco-knoppen .kn-groen{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 var(--accent-deep)} .ccv-choco-knoppen .kn-groen:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-deep)} .ccv-choco-knoppen .kn-rand{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--border)} .ccv-choco-knoppen .kn-rand:hover{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-2px)} .ccv-choco-beeld{position:relative} .ccv-choco-beeld img{ width:100%;border-radius:var(--r-lg);display:block; box-shadow:0 22px 40px -22px rgba(20,33,10,.5); transform:rotate(calc(var(--tilt) * .8)); transition:transform .4s cubic-bezier(.2,.9,.3,1.3); } .ccv-choco-beeld img:hover{transform:rotate(0deg)} .ccv-choco-sticker{ position:absolute;left:-10px;bottom:16px;background:var(--pop);color:var(--on-pop); font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;padding:8px 16px; border-radius:var(--r-pill);box-shadow:0 5px 0 var(--pop-deep);transform:rotate(-4deg); } @media(max-width:880px){ .ccv-choco-kaart{grid-template-columns:1fr;gap:28px;padding:30px 24px} .ccv-choco-beeld{max-width:320px;margin:0 auto} } /* ============================================================ Het logo in de header Was de site-logo-widget van Elementor, die een bijlage-ID leest. Bij een verhuizing bestaat dat bestand niet meer en levert de widget een gebroken afbeelding op. Een gebroken afbeelding heeft geen eigen hoogte, dus de balk klapte open tot een witte lap over het halve scherm. Nu een gewone afbeelding uit het thema, met een vaste maximumhoogte zodat de balk niet meer van het beeld afhangt. ============================================================ */ .ccv-headerlogo{ display:inline-flex;align-items:center;line-height:0; max-height:86px;overflow:hidden; } .ccv-headerlogo img{ max-height:86px;width:auto;height:auto;display:block; transition:transform .3s cubic-bezier(.2,.9,.3,1.3); } .ccv-headerlogo:hover img{transform:scale(1.04)} @media(max-width:767px){ .ccv-headerlogo, .ccv-headerlogo img{max-height:52px} } /* De header op één regel houden: logo links, menu in het midden, knop rechts. De vaste kolomverdeling van Elementor (20/60/20) klopt niet meer zodra er een menu-item bij of af gaat: het menu breekt af of de knop schuift over het laatste item heen. Daarom bepalen de kolommen hier hun eigen breedte en pakt alleen het menu de resterende ruimte. */ .ccv-header > .elementor-container{ flex-wrap:nowrap !important; align-items:center; gap:18px; } .ccv-header > .elementor-container > .elementor-column:first-child, .ccv-header > .elementor-container > .elementor-column:last-child{ width:auto !important; flex:0 0 auto !important; } .ccv-header > .elementor-container > .elementor-column:nth-child(2){ width:auto !important; flex:1 1 auto !important; min-width:0; } .ccv-header .elementor-nav-menu--main > .elementor-nav-menu{flex-wrap:nowrap} .ccv-header .elementor-nav-menu--main > .elementor-nav-menu > li > a{white-space:nowrap} /* De knop mag niet over het laatste menu-item vallen en niet afbreken. */ .ccv-header .elementor-button{white-space:nowrap} @media(max-width:1100px){ .ccv-header > .elementor-container{gap:10px} } /* ============================================================ ccv-header-uitlijning De koptekst volgde zijn eigen breedte en kwam daardoor smaller en meer naar het midden te staan dan de inhoud eronder: op een scherm van 1440px begon de titel op 157px en het logo pas op 245px. Hieronder krijgt de balk dezelfde maatvoering als .wrap, zodat het logo recht boven de titel staat en de knop rechts gelijk valt met de rechterrand van de inhoud. ============================================================ */ .ccv-header > .elementor-container{ /* Elementor zet hier zelf 1620px neer met vier klassen; vandaar important. */ /* De sectie eromheen is een flexbox; zonder width:100% krimpt deze container tot de breedte van logo, menu en knop samen (956px) en komt de balk smaller uit dan de inhoud eronder. */ width:100%; max-width:1180px !important; margin-left:auto; margin-right:auto; padding-left:26px; padding-right:26px; justify-content:space-between; } /* De zijruimte zat eerst op de kolommen zelf (32px links en rechts). Die duwde het logo nog eens naar binnen; de container regelt het nu. */ .ccv-header > .elementor-container > .elementor-column:first-child > .elementor-element-populated, .ccv-header > .elementor-container > .elementor-column:last-child > .elementor-element-populated{ padding-left:0; padding-right:0; } @media(max-width:767px){ /* Op een telefoon houdt de inhoud 18px aan; de koptekst volgt. */ .ccv-header > .elementor-container{ max-width:100% !important; padding-left:18px; padding-right:18px; } } /* ============================================================ Iconen die eerst emoji waren De kaartjes op contact, Spanje en de dienstenpagina's hadden een emoji als icoon. Die zijn vervangen door Font Awesome, omdat emoji vier bytes zijn en bij het minste tekensetprobleem uit elkaar vallen - op de doelomgeving stond er "≡ƒñ¥" waar een handdruk hoorde. Een emoji brengt zijn eigen kleur mee, een icoon niet. Vandaar het accent, zodat de kaartjes er hetzelfde uitzien als eerst. .ccv-emoji is er destijds doorheen geglipt. Dat is de houder van de voorzieningenkaarten op /vakantiewoningen-spanje/ - veertien iconen die daardoor als enige op die pagina het donkere --ink erfden, terwijl .ccv-ruimte, .ccv-vraag, .ccv-omgeving-kaart en .ccv-boeken-punten er allemaal wel het accent kregen. Naast elkaar op dezelfde pagina zag je dus twee soorten iconen. ============================================================ */ .em > .fa-solid, .em > .fa-brands, .ccv-emoji > .fa-solid, .ccv-emoji > .fa-brands, .ccv-ruimte > .fa-solid{ color:var(--accent-deep); } /* Binnen een gekleurd vierkantje volgt het icoon de kleur van dat vierkantje; die is daar al gezet. */ .si > .fa-solid, .si > .fa-brands{color:inherit} /* In een diepe sectie mag het icoon het lichte accent pakken. */ .ccv-deep .em > .fa-solid, .ccv-deep .em > .fa-brands{color:var(--deep-accent)} /* ============================================================ Icon-boxen van Elementor Deze stonden tot nu toe helemaal niet in het thema: alle opmaak kwam uit de Customizer-CSS. Dat leverde een kader-in-kader op. De Elementor-kolom is een wit vlak met radius 4px zonder schaduw, en daarbinnen tekende die CSS nog een tweede kader met een eigen radius en 1px rand. Twee randen om dezelfde inhoud. Het icoon was een lege cirkel van 72px met een rand in --accent en een glyph in het lichte #7CF224 op wit. Gemeten contrast: 1,4 op 1. Dat is niet licht maar onzichtbaar. Hier krijgen ze de taal die de rest van de site al spreekt, en die staat een paar honderd regels hierboven ook op .ccv-home .svc: een kaart met schaduw en var(--r-lg), een gevuld icoonvlak van 64px met 0 5px 0 var(--accent-deep) eronder, en bij hover omhoog met een slagje scheefstand via var(--tilt). De oude regels zijn uit de database gehaald met _local/haal-oude-iconbox-css-weg.php. Dat moest wel: de Customizer-CSS wordt na alle stylesheets afgedrukt en had het anders gewonnen van alles wat hier staat. ============================================================ */ /* Waarom hier !important staat, en niet uit luiheid. Elementor schrijft de instellingen van elke widget apart weg, als `.elementor-2307 .elementor-element-abc123 .elementor-icon{...}`. Dat zijn drie klassen tegen mijn twee, dus zonder !important verlies ik van iets wat per widget is ingesteld en nergens centraal staat. Gemeten voordat dit erbij kwam: het icoonvlak pakte wel de accentkleur en de schaduw, maar bleef 60px met een radius van 50% en een rand van 1px - precies de drie dingen die Elementor per widget zet. De kaart hield radius 4px en een groene waas in plaats van var(--shadow). Het alternatief is 197 widgets in de database bijstellen. Dit is dezelfde afweging als in ccv-mobiel.css bij de kolombreedtes. */ /* Eén witte kaart, niet twee. De kolom waar een icon-box in staat heeft zelf al een witte achtergrond, per element ingesteld in Elementor. Legt de icon-box daar zijn eigen kaart overheen, dan zie je twee witte blokken over elkaar: een grote met vierkante hoeken en daarbinnen een kleinere met ronde. De kaart hoort bij de icon-box, want die weet wat hij is. De kolom stapt terug. */ /* Eén kaart, en wel de kolom. De kolom waar een icon-box in staat kwam als wit vlak met vierkante hoeken, en mijn icon-box legde daar een tweede witte kaart met ronde hoeken overheen. Twee blokken over elkaar. Ik heb geprobeerd de kolom te laten terugtreden, maar dat lukte niet: er staat geen enkele regel die hem wit maakt - Elementor zet er alleen padding en een transitie op - en toch mat ik hem drie keer op rgb(255,255,255). Waar dat wit vandaan komt heb ik niet gevonden. Dus andersom, en dat is sowieso robuuster: de kolom IS de kaart. Hier wordt hij expliciet wit met radius en schaduw, en de icon-box erbinnen is doorzichtig. Dan maakt het niet meer uit wat er elders over die kolom wordt beweerd - er staat er altijd precies één. :has(>) kijkt naar een direct kind, want zo staat de widget erin. */ .elementor-widget-wrap:has(> .elementor-widget-icon-box){ background:var(--card) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow) !important; border:0 !important; overflow:hidden; transition:transform .34s cubic-bezier(.2,.9,.3,1.35),box-shadow .4s ease; } .elementor-widget-wrap:has(> .elementor-widget-icon-box):hover{ transform:translateY(calc(var(--lift) * -1)) rotate(var(--tilt)); box-shadow:0 26px 44px -22px var(--accent) !important; } /* Een losse video midden in zijn sectie. De sectie op Mentale ondersteuning heeft precies een kolom, en die staat op vijftig procent. Er is geen tweede kolom - de andere helft is niets - en omdat een Elementor-kolom een flex-item is, gaat hij vanzelf tegen de linkerrand staan. De kop erboven en het bijschrift eronder staan wel gecentreerd, en dan lijkt de video scheef te hangen. `margin-inline:auto` lost dat op: bij een flex-item slokken automatische marges de vrije ruimte op, links en rechts evenveel. De video houdt zijn breedte en verschuift alleen. Welke kolom dit betreft hoeft niet in de database aangewezen te worden: `:has()` kan het zelf zien. De voorwaarde is een container met precies een kolom, en in die kolom een videowidget. Die eerste eis doet het werk. Home, Trainingen en Speelgoed Uitkiezen hebben secties met twee kolommen van vijftig procent, elk met een video, en die horen naast elkaar - daar is de kolom geen enig kind. Video's die de volle breedte al vullen merken er niets van: bij honderd procent is er geen vrije ruimte, en dan doet een automatische marge niets. */ .elementor-container:has(> .elementor-column:only-child .elementor-widget-video) > .elementor-column{ margin-inline:auto; } /* De dienstenblokken krijgen dezelfde kaartvorm. "Wat doen wij nog meer?" op /diensten/content-creator/ is een rij van zes witte blokken met een icoon erin. Ze zien er plat uit naast de kaarten van bijvoorbeeld "Meer dan een gesprek." op /diensten/coaching/, en dat komt door twee dingen: vier pixels radius, en geen schaduw. Die blokken zijn geen icon-boxen maar losse HTML in een tekstwidget, met hun eigen opmaak ernaast in de pagina-inhoud: .ccv-diensten .ccv-card{background:#ffffff;border-radius:4px;...} Die inline stijl wordt na alle stylesheets afgedrukt, dus met twee klassen tegen twee klassen zou het thema verliezen. Vandaar de wrapper erbij: drie klassen wint, ongeacht de volgorde. Radius en schaduw komen uit dezelfde tokens als de icon-box-kaart, dus ze blijven vanzelf gelijk als die ooit verandert. */ .ccv-diensten-wrap .ccv-diensten .ccv-card{ border-radius:var(--r-lg); box-shadow:var(--shadow); transition:transform .34s cubic-bezier(.2,.9,.3,1.35),box-shadow .4s ease; } .ccv-diensten-wrap .ccv-diensten .ccv-card:hover{ transform:translateY(calc(var(--lift) * -1)) rotate(var(--tilt)); box-shadow:0 26px 44px -22px var(--accent); } /* En dan doet de binnenwikkel niets meer. Hier stond precies het omgekeerde van wat de opmerking hierboven afspreekt: de wrapper kreeg zelf ook background:var(--card), een radius, een schaduw EN een eigen hover met dezelfde translate en rotate. Dat zijn dus twee kaarten over elkaar die allebei bewegen - en omdat rotate(var(--tilt)) om verschillende middelpunten draait, schuift de een onder de ander vandaan. Bij het aanwijzen zag je een tweede kaart achter de eerste uitkomen, met de gloed op de verkeerde rand. De kaart is de kolom, eenmalig, zoals hierboven beschreven. De wrapper houdt alleen wat hij echt moet doen: de inhoud lucht geven en de kaart vullen. */ .elementor-widget-icon-box .elementor-icon-box-wrapper{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:30px 26px; box-shadow:none !important; text-align:center; height:100%; } /* Het icoonvlak: gevuld, niet een lege cirkel. Zelfde maatvoering als .ccv-home .svc .sym, zodat de twee naast elkaar niet uit de toon vallen. De glyphkleur is --on-accent en niet --accent-deep. Op het accentgroen geeft --accent-deep 3,4 op 1 en --on-accent ruim 11 op 1; de norm is 4,5. Dat scheelt tussen "ik zie een vorm" en "ik zie welk icoon het is". */ .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon{ width:64px !important;height:64px !important; margin:0 auto 18px !important; border:0 !important; border-radius:22px !important; display:grid !important;place-items:center; background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:0 5px 0 var(--accent-deep) !important; transition:box-shadow .3s ease; } .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon{ box-shadow:0 5px 0 var(--accent-deep),var(--glow-accent); } /* Om en om het accent en de pop-kleur, net als bij de socialkaarten. Een rij van vier wordt daarmee een ritme in plaats van vier keer hetzelfde. */ .elementor-column:nth-child(even) .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon{ background:var(--pop) !important;color:var(--on-pop) !important;box-shadow:0 5px 0 var(--pop-deep) !important; } .elementor-column:nth-child(even) .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon{ box-shadow:0 5px 0 var(--pop-deep),var(--glow-pop); } .elementor-widget-icon-box .elementor-icon i, .elementor-widget-icon-box .elementor-icon svg{ font-size:26px !important;width:26px !important;height:26px !important; color:inherit !important;fill:currentColor !important; } .elementor-widget-icon-box .elementor-icon-box-title{ font-family:'Fredoka',sans-serif;font-weight:600; color:var(--ink);margin:0 0 10px; } .elementor-widget-icon-box .elementor-icon-box-description{ font-family:'Nunito',sans-serif;color:var(--muted); font-size:15px;line-height:1.65;margin:0; } @media(prefers-reduced-motion:reduce){ .elementor-widget-icon-box .elementor-icon-box-wrapper{transition-duration:.01ms} } /* ============================================================ Kleurritme op de doneerpagina Op /steentje-bijdragen/ stonden vier secties op rij met exact dezelfde achtergrond #eff9dd: de tellers, "Waarom doneren?", "Manieren om bij te dragen" en het formulier. Gemeten op 375px is dat 4451 pixels ononderbroken kleur op een pagina van 9076 - bijna de helft in één tint, waardoor je niet ziet waar het ene blok ophoudt en het volgende begint. De middelste van die vier wordt hier diep paars. Juist die, omdat de kaarten erin wit zijn: wit op paars springt eruit, en het blok zit precies in het midden van de reeks. DIT STOND EERST IN DE DATABASE, en is bewust verhuisd. Een achtergrondkleur is opmaak, geen inhoud - dan hoort hij hier, waar hij meereist met git en niemand een script hoeft te draaien. De inhoudelijke ingrepen (een widget weghalen, een dode beeld-URL, een kapotte shortcode) blijven wel scripts: die kán CSS niet repareren. Het element-ID is stabiel zolang de sectie niet opnieuw wordt aangemaakt in Elementor. Wordt hij dat wel, dan verliest deze regel zijn doel en valt de kleur terug op het groen uit de sectie-instelling - zichtbaar, niet stuk. ============================================================ */ .elementor-element-38650fa0{ background-color:var(--deep-bg) !important; } /* En dan de tekst, want de donkere inkt van de lichte basis is op paars onleesbaar. Dit is wat de klasse ccv-deep elders doet; hier zetten we het rechtstreeks, zodat er niets in de database hoeft. */ .elementor-element-38650fa0 h1, .elementor-element-38650fa0 h2, .elementor-element-38650fa0 h3, .elementor-element-38650fa0 h4, .elementor-element-38650fa0 .elementor-heading-title{ color:var(--deep-text) !important; } .elementor-element-38650fa0 p, .elementor-element-38650fa0 li, .elementor-element-38650fa0 .elementor-widget-text-editor{ color:var(--deep-muted) !important; } /* Behalve binnen de witte kaarten: die houden hun donkere tekst. */ .elementor-element-38650fa0 .elementor-icon-box-wrapper .elementor-icon-box-title{ color:var(--ink) !important; } .elementor-element-38650fa0 .elementor-icon-box-wrapper .elementor-icon-box-description{ color:var(--muted) !important; } /* ============================================================ Losse icoon-widgets krijgen hetzelfde vlak als de icon-boxen Naast de icon-boxen staan er op verschillende pagina's losse icoon-widgets: een kale glyph in donkere inkt op een witte kaart. Op de brandbrief-pagina zijn dat er 22. Naast de icon-boxen, die sinds vandaag een gevuld vlak hebben, vallen die uit de toon. Zelfde maatvoering en dezelfde afwisseling groen/paars, zodat een rij kaarten één taal spreekt. NIET meegenomen: iconen die als kale ín een kop staan, zoals op de brandbrief. Die zitten in de tekst van een heading-widget, en een generieke regel daarop zou ook iconen in lopende tekst raken - precies wat de README verbiedt. Die horen omgezet te worden naar een echte icoon-widget. ============================================================ */ .elementor-widget-icon .elementor-icon{ width:64px !important;height:64px !important; margin:0 auto !important; border:0 !important; border-radius:22px !important; display:grid !important;place-items:center; background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:0 5px 0 var(--accent-deep) !important; transition:box-shadow .3s ease; } .elementor-widget-icon .elementor-icon i, .elementor-widget-icon .elementor-icon svg{ font-size:26px !important;width:26px !important;height:26px !important; color:inherit !important;fill:currentColor !important; } .elementor-column:nth-child(even) .elementor-widget-icon .elementor-icon{ background:var(--pop) !important;color:var(--on-pop) !important; box-shadow:0 5px 0 var(--pop-deep) !important; } .elementor-widget-icon:hover .elementor-icon{ box-shadow:0 5px 0 var(--accent-deep),var(--glow-accent) !important; } .elementor-column:nth-child(even) .elementor-widget-icon:hover .elementor-icon{ box-shadow:0 5px 0 var(--pop-deep),var(--glow-pop) !important; } /* ============================================================ Dezelfde tegel voor de kaarten die géén Elementor-widget zijn Drie blokken zijn met de hand geschreven en zetten hun kaarten in een eigen raster: .ccv-diensten (zes diensten op /diensten/ en /diensten/content-creator/), .ccv-stichting (zes activiteiten van de stichting) en .ccv-brow (vier behandelingen op /contact/the-brow-boss/). Zestien kaarten bij elkaar. Ze zijn goed gebouwd - eigen auto-fit raster, en onder 767px klappen ze om in een veegrij met scroll-snap. Alleen: hun icoon staat als kale in een div, dus de regels hierboven pakken niet aan en ze misten als enige de gevulde tegel. Naast een rij icon-boxen zag je twee soorten kaarten. Deze regels geven ze dezelfde tegel. Niet door de blokken om te bouwen naar Elementor-kolommen: dan gooi je drie werkende rasters inclusief hun slider weg, en dat is precies waar de opmerking bij .ccv-ruimtes in ccv-mobiel.css voor waarschuwt. GEEN !important, in tegenstelling tot het socialblok hieronder. Daar was het nodig omdat de inline