/* Theme Name: Manoir du Boscau Template: astra Description: Child theme van Astra voor boscau.com. Layout en content blijven in Elementor; hier alleen globale stijl en kleine functionele aanvullingen. Version: 1.0.0 Text Domain: manoir-du-boscau */ /* Alleen wat Elementor niet kan (globale kleuren/fonts staan in de Elementor Kit "Château du Boscau", zie tools/kit-setup.php en tasks/notes-bouw.md ## Taak 2). Gebruik de Elementor-kleur-variabelen (--e-global-color-), nooit hardgecodeerde hex, zodat de eigenaren kleuren in de Kit kunnen aanpassen. Bron: mockup/css/style.css en mockup/NOTES.md. */ /* Sticky header: ruimte boven een anker zodat het niet onder de header valt. --header-h wordt in taak 3 (Theme Builder-header) niet opnieuw gedefinieerd, alleen hier — dezelfde waarden als de mockup. */ :root{ --header-h:96px; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); } @media(max-width:1024px){ :root{ --header-h:84px; } } @media(max-width:767px){ :root{ --header-h:76px; } } /* Cijfers in een kop (afstanden, jaartallen, aantallen): Source Sans 3 600 in plaats van Marcellus, anders vallen twee opeenvolgende 1'en bijna samen met twee kleine letters l. Zet deze klasse om het cijfer (en een vaste eenheid erna) in elke kop die een getal bevat. Grootte en kleur volgen de kop. */ .num{ font-family:"Source Sans 3", sans-serif; font-weight:600; white-space:nowrap; } /* Hero-achtige secties (bovenaan een pagina): trek de sectie onder de transparante sticky header, net als mockup/css/style.css se "body.has-hero .hero/.page-hero/.stay-hero". Wij hoeven geen aparte body-klasse te schakelen (dat was nodig omdat de mockup één statisch stylesheet voor alle pagina's deelt): zet deze klasse gewoon direct op de hero-container zelf, in Elementor bewerkbaar via "CSS Classes" (Checkpoint A — verbeteringen). */ .hero-under-header{ margin-top:calc(-1 * var(--header-h)); } /* Zichtbare focusring: Nachtgroen op licht, Messing op een donkere sectie. Astra se eigen a:focus-visible (element+pseudo-class, specificiteit 0,1,1) won het anders van een kale ":focus-visible" (0,1,0) op elke link op de site — vandaar hier ook expliciet "a:focus-visible" (én button, voor de Elementor-menu-toggle en dergelijke div[role=button]-knoppen die geen zijn maar wel .elementor-menu-toggle:focus-visible in Astra se CSS staan). */ :focus-visible,a:focus-visible,button:focus-visible,[role="button"]:focus-visible{ outline:3px solid var(--e-global-color-primary); outline-offset:3px; } .on-dark :focus-visible,.surface-dark :focus-visible{ outline-color:var(--e-global-color-accent); } /* Donkere secties: h1-h6 en lopende tekst automatisch Perkament in plaats van het Kit-standaard Nachtgroen — nooit een losse inline "color" per pagina. .on-dark = alleen de tekstkleur (eigen achtergrond, bijv. een foto); .surface-dark = achtergrond Nachtgroen + tekstkleur. Zet de klasse via Elementor's "CSS Classes" (Advanced-tab) op de Container. !important is hier bewust: elke pagina krijgt een eigen post-.css met een ongescopete regel als ".elementor-widget-heading .elementor-heading-title {color:var(--e-global-color-primary)}" (2 klassen) — daar zonder !important consequent overheen komen zou een specificiteitswedloop tegen door Elementor gegenereerde, wisselende klassenamen worden. */ .on-dark,.surface-dark{ color:var(--e-global-color-perkament); } /* Letterlijke kleur i.p.v. "inherit": widget-wrappers (bv. .elementor-widget-text-editor) krijgen elders hun eigen directe kleurregel (Kit-tekstkleur), dus "inherit" zou van díe wrapper erven, niet van .surface-dark twee niveaus hoger. */ .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5,.on-dark h6,.on-dark p, .surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4,.surface-dark h5,.surface-dark h6,.surface-dark p{ color:var(--e-global-color-perkament) !important; } .surface-dark{ background:var(--e-global-color-primary); } /* Placeholder-blok (open inhoud die op Ester, Bob of Joost wacht) — eigen Kalk-licht vlak met gestippeld kader, altijd leesbaar, ook op een donkere sectie. Nooit cijfers of citaten verzinnen. */ .placeholder{ max-width:640px; background:var(--e-global-color-kalk-licht); border:2px dashed var(--e-global-color-olijf); color:var(--e-global-color-text); padding:24px 28px; font-size:15px; } .placeholder strong{ display:block; color:var(--e-global-color-olijf); font-weight:600; margin-bottom:6px; } .placeholder p{ max-width:none; color:inherit; margin:0; } /* Placeholder-stijl van formuliervelden (Elementor Pro Form-widget kan de ::placeholder-pseudo-class zelf niet stylen). */ ::placeholder{ color:var(--e-global-color-text); opacity:.82; } /* Visueel verborgen, wel voor schermlezers (bv. "Vaste lijn: " voor een telefoonnummer). Bron: mockup/css/style.css. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* --- Taak 3: header/footer (Theme Builder) --------------------------------- Alleen wat Elementor's eigen controls niet dekken: de vloeiende zijmarge (clamp, zoals de mockup) en de kolombreedtes van de footer-grid (per-child flex-basis heeft geen eigen Elementor-control zonder in de layout-CSS van elk kind te duiken). De rest (kleuren, flex-richting/-gap, sticky) staat in elementor/header.json en elementor/footer.json zelf. */ /* Checkpoint A — verbeteringen: de zijmarge hoort maar op ÉÉN niveau te staan (de buitenste header/footer-container, zoals mockup/css/style.css se ".site-header"/".site-footer" met padding-inline eenmalig). ".site-footer-grid" en ".site-footer-base" kregen 'm eerst óók, wat optelde bovenop hun eigen "max-width:1280px;margin-inline:auto" — de kolommen stonden daardoor verder naar binnen dan de mockup (x≈176/605/965 i.p.v. 86/571/982 op 1440px). */ .site-header-container,.site-footer-container{ padding-inline:clamp(20px,6vw,96px); } .site-header-container{ min-height:var(--header-h); z-index:50; background:var(--e-global-color-primary); /* Elementor's eigen ".e-con{transition:background .3s,...}" (frontend.min.css) geeft ALLE containers al een background-transition — ook zonder onze eigen (hierboven verwijderde) transition-regel liep de achtergrond hier dus alsnog vast, zie de toelichting bij ".elementor-sticky" hieronder. !important is nodig omdat Elementor's regel exact dezelfde specificiteit heeft (0,1,0: ".e-con") en de volgorde in de HTML-head niet gegarandeerd is. */ transition:none !important; } /* Het woordmerk mag nooit afbreken naar 2 regels (bv. bij een smalle tablet-breedte met alle 5 menu-items nog naast elkaar, vóór de mobiel-drempel van de Nav Menu-widget op 767px): flex-shrink:0 zodat de krapte bij het menu ernaast terechtkomt, niet bij de merknaam. */ .site-header-container .wordmark{ flex-shrink:0; } /* Logo en woordmerk linksboven (feedback 2026-10, punt 1): één link (de container .header-brand, html_tag "a" in elementor/header.json) naar de home van de taal. De afbeelding heeft vaste afmetingen (breedte en hoogte in de widget): geen layoutverschuiving; het woordmerk is voor schermlezers verborgen (de alt van het logo noemt de naam al) en verdwijnt op mobiel (geen ruimte naast taalkeuze en hamburger). De container krimpt niet: de krapte komt bij het menu terecht. */ .site-header-container .header-brand.e-con{ --width:auto; flex-shrink:0; } .site-header-container .header-brand .elementor-widget-image{ line-height:0; } /* Ruimtebudget van de header (inhoudsbreedte = viewport min 2x zijmarge): logo met woordmerk, menu, taalkeuze met vlaggen, Instagram en de Reserveren-knop passen samen vanaf 1440px. Daaronder verdwijnt het woordmerk (het logo blijft; de naam staat in de alt en in de pagina zelf), en tussen 1025 en 1179px krimpt ook de zijmarge, zodat het menu nooit naar twee regels breekt. Onder 1025px neemt de hamburger het menu over (Elementor-instelling "dropdown: tablet"). */ @media(min-width:1025px) and (max-width:1439px){ .site-header-container .wordmark{ display:none; } } @media(min-width:1025px) and (max-width:1179px){ .site-header-container{ padding-inline:clamp(20px,3vw,96px); } } @media(min-width:1025px) and (max-width:1099px){ .site-header-container .header-right.e-con{ --column-gap:12px; } } /* Tussen 1025 en 1279px past het menu in DE/FR (langere woorden) niet op één regel naast vlag+code: daar alleen de vlag. De vlag- houdt de taalnaam als alt, dus de link blijft een toegankelijke naam houden. */ @media(min-width:1025px) and (max-width:1279px){ .site-header-container .cpel-switcher__code{ display:none; } } /* Elementor's Sticky-motion-effect (header-container: Sticky=Top, Effects offset=80) zet deze twee klassen zelf via JS (modules/sticky/assets/js /frontend/handlers/sticky.js): ".elementor-sticky" meteen bij init — de header is sticky vanaf y=0 (offset 0), dus dit geldt vrijwel altijd zodra JS draait — en ".elementor-sticky--effects" pas voorbij de effects-offset (80px scroll). Zonder JS blijft alleen de basisregel hierboven gelden: solide Nachtgroen, de toegestane fallback. Volgorde in dit bestand bepaalt welke wint bij gelijke specificiteit (2 klassen): --effects moet ná .elementor-sticky blijven staan. Checkpoint A — verbeteringen, root cause gevonden: de eerdere versie had hier ook "transition:background .25s ease" op de basisregel staan. Elementor herschrijft op de ECHTE (niet de .elementor-sticky__spacer-kloon) stickyelement continu inline style="top/width/margin-top" (elke scroll/resize-tick, ook in rust via een ResizeObserver). Elke zo'n style-herberekening onderbrak de CSS-transition van "background" halverwege en liet 'm herstarten vanaf de ALLEREERSTE (solide) waarde — het element kwam z'n transparante/verlopende achtergrond dus nooit voorbij, ook niet na seconden wachten (geverifieerd met getComputedStyle: bij een gefronte tab bleef backgroundColor exact rgb(28,38,33) hangen, en zette transition:none het meteen recht). Elementor zet daarom zelf ook transition:none op de spacer-kloon — bewust geen transition hier, dus een instant kleurwissel bij scrollen, in plaats van een animatie die op dit element structureel vastloopt. */ .site-header-container.elementor-sticky{ background:linear-gradient(180deg,rgba(16,21,18,.82) 0%,rgba(16,21,18,.58) 100%); } .site-header-container.elementor-sticky--effects{ background:var(--e-global-color-primary); box-shadow:0 1px 0 rgba(0,0,0,.12); } /* Hero-achtige secties trekken zichzelf onder de header, zie ".hero-under-header" hierboven bij "Basis/reset". */ .site-footer-container{ background:var(--e-global-color-diep-woud); padding-top:72px; padding-bottom:26px; } .site-footer-grid{ max-width:1280px; margin-inline:auto; } /* flex-basis 0 (i.p.v. een vaste px-basis) + flex-grow-verhouding 1.2:1:1 is de flexbox-vertaling van mockup se "grid-template-columns:1.2fr 1fr 1fr" — met een vaste px-basis (240/280) groeiden alle 3 kolommen daarna evenveel (flex-grow:1 voor allemaal), niet in de 1.2:1:1-verhouding, en dat schoof de kolomkoppen "Verblijven"/"Contact" iets te ver naar binnen. */ .site-footer-grid .footer-col{ flex:1 0 0; } .site-footer-grid .footer-col-brand{ flex:1.2 0 0; } /* flex-basis:0 heeft geen eigen minimumbreedte (in tegenstelling tot de vorige "flex:1 1 240px"), dus zonder onderstaande regel bleven de 3 kolommen op mobiel naast elkaar oneindig doorkrimpen (elke kolom ±53px breed, tekst als "info@boscau.com" liep daardoor over de paginarand). Ga onder 767px terug naar volle breedte per kolom, zodat footer-grid se flex-wrap ze alsnog onder elkaar zet. */ @media(max-width:767px){ .site-footer-grid .footer-col, .site-footer-grid .footer-col-brand{ flex:1 1 100%; } } .site-footer-base{ max-width:1280px; margin:48px auto 0; padding-top:20px; border-top:1px solid #3a453d; font-size:13px; } /* Footer-kolom "Verblijven": Nav Menu-widget zonder eigen padding/gap-instelling valt terug op Elementor Pro se ingebouwde item-padding (~20px links/rechts) — dat gaf een onbedoelde inspring t.o.v. de kolomkop. header.json/footer.json zetten nu zelf padding_horizontal_menu_item/padding_vertical_menu_item op 0 en menu_space_between op de mockup-achtige regelafstand; deze regel is alleen een garantie tegen de kale