/* =========================================================================== Visual builder -- frontend --------------------------------------------------------------------------- Alles staat onder .bs (builder section), los van het oude skel-grid uit style4.css/skel.css. Zo kan deze stylesheet nooit bestaande pagina's raken. Zie docs/visual-builder.md. =========================================================================== */ :root { /* Palet -- overgenomen uit css/mrreset.css, de huidige huisstijl. */ --bs-gold: #cc9966; --bs-gold-light: #e3be99; --bs-sand: #e5dbd7; --bs-white: #ffffff; --bs-grey: #7c8081; --bs-dark: #2b2d2f; --bs-darker: #1c2021; /* Afstandsschaal tussen secties. */ --bs-sp-none: 0rem; --bs-sp-small: 1.5rem; --bs-sp-normal: 3.5rem; --bs-sp-large: 5.5rem; --bs-sp-xlarge: 8rem; /* WhatsApp-icoon voor .bs__button--whatsapp, als masker zodat het de kleur van de knop volgt. */ --bs-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.12-.41-2.13-1.32-.79-.7-1.32-1.57-1.47-1.87-.15-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.21-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.47 1.06 2.88 1.21 3.08.15.2 2.09 3.34 5.08 4.55.71.29 1.26.46 1.69.59.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35zM12.05 21.8h-.01a9.75 9.75 0 0 1-4.96-1.36l-.36-.21-3.69.97.99-3.6-.23-.37a9.73 9.73 0 0 1-1.49-5.19c0-5.38 4.38-9.76 9.77-9.76a9.7 9.7 0 0 1 6.9 2.86 9.68 9.68 0 0 1 2.86 6.9c0 5.39-4.39 9.76-9.78 9.76zM12.05 0h-.01C5.4 0 0 5.4 0 12.04c0 2.12.55 4.2 1.6 6.03L0 24l6.09-1.6a12 12 0 0 0 5.95 1.56h.01c6.64 0 12.04-5.4 12.04-12.04A11.96 11.96 0 0 0 12.05 0z'/%3E%3C/svg%3E"); --bs-container: 1180px; --bs-gap: 2.5rem; --bs-radius: 3px; /* Ruimte onder een kop. Bewust in rem en niet in em: css/mrreset.css zet `h2 { font-size: 1.1em }`, dus koppen zijn hier maar iets groter dan de lopende tekst en valt een marge in em onverwacht klein uit. Let op bij het bijstellen: rem rekent vanaf de -grootte (16 px), terwijl de lopende tekst op 15pt (20 px) staat. 1rem is hier dus 16 px, niet 20. Onderstaande waarden komen neer op 32 px onder een sectietitel en 24 px onder een kop in een tekstblok. */ --bs-title-gap: 2rem; /* onder een sectietitel -> 32 px */ --bs-heading-gap: 1.5rem; /* onder een kop in een blok -> 24 px */ --bs-item-gap: 0.75rem; /* onder een kopje in een kaart -> 12 px */ } @media screen and (max-width: 736px) { :root { --bs-sp-small: 1rem; --bs-sp-normal: 2.25rem; --bs-sp-large: 3.25rem; --bs-sp-xlarge: 4.5rem; --bs-gap: 1.75rem; } } /* --------------------------------------------------------------------------- Sectie: de buitenkant --------------------------------------------------------------------------- */ /* css/mrreset.css zet `#main { padding: 3em 0 }` én `body.index #main { padding-top: 1.5em }`. Op een builder-pagina bepaalt elke sectie zelf zijn afstand boven en onder, dus die ruimte levert alleen een donkere strook op tussen het menu en de eerste sectie, en boven de footer. De selector hieronder moet zwaarder wegen dan `body.index #main` (1,1,1); met `.builder-page` erbij komt hij op (1,2,0) en wint hij. `#main.builder-main` alleen (1,1,0) was niet genoeg -- dan bleef de bovenruimte staan. */ .builder-page #main.builder-main { padding: 0; } .builder-main { overflow-x: hidden; } /* Eigen box-model binnen de secties. De site zet border-box alleen in css/skel.css, en die wordt met JavaScript aan uitsluitend via