/* * pageHero — de donkerblauwe openingsband van een binnenpagina. * * Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440 / 1024 / 767 / 390px. */ /* ================================================================== De band zelf ------------------------------------------------------------------ Hij wordt 140px omhoog getrokken en is 452px hoog, dus loopt hij achter de header door: 118,69 - 140 = 21,31px van de band valt boven de bovenrand van het scherm weg. De inhoud staat tegen de onderrand. ================================================================== */ .pageHero { display: flex; align-items: flex-end; min-height: 452px; margin-top: -140px; background: var(--colorNavy); } .pageHeroContent { max-width: var(--pageHeroWidth, 585px); margin-bottom: 47px; color: var(--colorWhite); /* Onder de muis houdt een link hier zijn roze: #092041 is de achtergrond (main.css). */ --linkHoverColor: var(--colorPink); } /* * Boven 1024px verschilt de kopmaat per pagina: 59px op /offerte-aanvraag/ en * 55px op /contact/. Daaronder is hij overal gelijk aan .sectionTitleSmall, dus * staat daar niets. De letterafstand is -0,05em in plaats van een vaste px-maat, * want dat is precies wat samdesign.nl bij elke kopmaat neerzet. */ @media (min-width: 1025px) { .pageHeroTitle { font-size: var(--pageHeroTitleSize, 59px); letter-spacing: -0.05em; } } .pageHeroTitle { margin-bottom: 33px; } /* * Het streepje voor de inleiding staat hier 39px van de tekst en niet de 30px * van .sectionIntro; zo staat het op deze twee pagina's. */ .pageHeroIntro { margin-bottom: 24.5px; padding-left: 39px; } /* Het Google-cijfer, net als in de topbar en in de hero van de homepage. */ .pageHeroRating { display: flex; align-items: center; column-gap: 7px; margin: 0; color: var(--colorTopbarText); font-size: 16px; line-height: 24px; } .pageHeroRating > svg { flex: none; } /* Extra lucht tussen het Google-logo en het cijfer. */ .pageHeroRating > svg:first-child { margin-right: 3px; } .pageHeroRating a { color: var(--colorTopbarText); text-decoration: underline; } /* * Op tablet is de kolom 800px in plaats van 1280 — een eigen grens van * samdesign.nl, niet de containerbreedte van de rest van de site. 840 = 800 plus * de 20px lucht aan weerszijden die .container zelf meeneemt. */ @media (max-width: 1024px) { .pageHero > .container { max-width: 840px; } } @media (max-width: 767px) { .pageHero { min-height: 400px; } } /* ================================================================== De header boven een donkere band ------------------------------------------------------------------ De header heeft geen achtergrond, dus staat hij hier op donkerblauw en moet alles erin wit worden. Zodra hij vastgezet is heeft hij zijn eigen witte achtergrond en gaat alles terug naar donkerblauw — vandaar de :not() bij elke regel. Met :has() en niet met een class op de body: het component kan er zelf niet meer bij als geprint is, en main.css doet de vastgezette header ook al met :has(). De voorwaarde is de eerste sectie van de pagina, want alleen dan staat de band achter de header. De z-index hoort erbij: zonder stapelvolgorde tekent de achtergrond van de band over de tekst van de header heen, want die staat eerder in de boom. ================================================================== */ body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) { position: relative; z-index: 9; } /* * Het logo is een tweede bestand en geen ingekleurde versie van het eerste: op * samdesign.nl is de witte variant 230,213 x 43 in plaats van 247,016 x 44, en * die maten kan een filter niet maken. Met content: url() blijven de markup en * de gereserveerde ruimte in header.php gelijk (§9). */ body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .siteLogo img { content: url('../../img/logoLight.svg'); } body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .topbarRating, body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .topbarRating a, body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .topbarPhone, body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .navList > .navItem > .navLink { color: var(--colorWhite); } body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .topbarPhone svg path { fill: var(--colorWhite); } body:has(.mainContent > .pageHero:first-child) .headerZone:not(.headerZoneSticky) .navToggle svg line { stroke: var(--colorWhite); }