/* -------------------------------------------------- */ /* Generic section layout */ /* -------------------------------------------------- */ /* The white sections carry the page's breathing room. The banner sections below override this with their own vertical padding, because they have a wave to clear as well — so this figure effectively sets how much air the plain white ones get, and how far apart the gradient blocks end up sitting. Stepped down again on mobile in 23-mobile.css. */ .section { padding: 10rem 2rem; position: relative; } /* The hero's own bottom padding is 3rem flat plus the wave height (--wave-height, 01-base.css) — but the wave itself is a curved graphic eating into that space, not clear air the way a section's padding is, so the visual gap to the section below read thinner than the 10rem gap between any other two sections on the page. Matching that 10rem instead of shaving it down is what makes this join read the same as every other section boundary. */ .hero + .section { padding-top: 8rem; } .section__intro, .section__content { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 1; } .section--kontaktformular { padding-top: 5rem; } /* -------------------------------------------------- */ /* Scroll reveal */ /* -------------------------------------------------- */ /* reveal.js toggles .is-visible once each of these scrolls into view. Scoped to .section__intro/.section__content — the wrapper every section already funnels its actual content through — so only that flies/fades in; .section itself, .section__bg-photo and the wave layer are structure, not content, and stay put. Gated behind .js-reveal (set on by an inline script in header.php before first paint) so a no-JS visitor never gets stuck with content pinned at opacity 0. */ .js-reveal .section__intro, .js-reveal .section__content { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 0.7s ease; } .js-reveal .section__intro.is-visible, .js-reveal .section__content.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .section__intro, .js-reveal .section__content { opacity: 1; transform: none; transition: none; } } .section__subheading { font-size: var(--text-subheading); /* Between the headings' 1.18 and body's 1.65: at this size the lead line wraps to two lines in a split column, and body leading opens that up far enough that it stops reading as one unit. */ line-height: 1.35; font-weight: 700; color: var(--color-ink); } /* A plain lead paragraph under a heading/subheading, for sections that print their text straight into .section__content rather than through a dedicated part — same measure and colour as .page-title__text (04-hero.css) so it reads the same whether it's leading a section or a sub-page hero. */ .section__text { margin: 0; max-width: 68ch; font-size: var(--text-lg); line-height: 1.5; color: var(--color-body); } /* Kept its name so the wave selectors and the templates don't have to change, but it now paints a brand-colour blend rather than a photograph — the templates no longer pass one in. Photos elsewhere (hero, Warum Let'sDoo, Kontakt, cards) are untouched. */ .section__bg-photo { position: absolute; inset: 0; background-image: var(--section-blend); background-size: cover; background-position: center; opacity: 1; } /* -------------------------------------------------- */ /* Wave dividers */ /* -------------------------------------------------- */ /* Every full-bleed photo section is sandwiched between white ones, so instead of a hard horizontal line the white is carried a little way into the photo as a shallow two-layer wave (shapes and height live in 01-base.css). Keying off .section__bg-photo means any future photo section picks the treatment up automatically. Where :has() is unsupported the rules drop out and the edges simply stay straight. */ .section:has(> .section__bg-photo) { /* Clears the deepest point of the wave — the solid curve bottoms out around 80 of the 110px and the translucent layer trailing it around 100 — and then leaves the same order of air the white sections get, so the banners don't read as tighter inside just because the wave is eating the top of the box. Stepped up from 5rem alongside .section's own bump to 10rem above, same reasoning. */ padding-top: calc(7rem + var(--wave-height)); padding-bottom: calc(7rem + var(--wave-height)); } /* Block-built pages (single-standort etc.) can land a photo section right after the hero too; the top wave still has nothing to clear there since the hero, not white space, sits above it. Extra class in the selector over .hero + .section above so it wins the tie rather than losing to source order. */ .hero + .section:has(> .section__bg-photo) { padding-top: 0; } .section:has(> .section__bg-photo)::before, .section:has(> .section__bg-photo)::after { content: ""; position: absolute; left: 0; right: 0; height: var(--wave-height); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 2; } .section:has(> .section__bg-photo)::before { top: 0; background-image: var(--wave-top); } /* The bottom wave is flipped horizontally so the two ends of a section don't read as a tracing of each other. Fallback for browsers without the masking below, and the only behaviour at all where that's unsupported. */ .section:has(> .section__bg-photo)::after { bottom: 0; transform: scaleX(-1); background-image: var(--wave-bottom); } /* Where masking is supported, clip .section__bg-photo itself to the wave outline at each edge instead of painting a wave shape over a flat-topped-and-bottomed rectangle — same idea as the hero (see 04-hero.css), applied twice. Three mask layers: a plain rectangle for the middle (everything between the two wave bands, fully opaque so the blend there is untouched), the top wave sized to the band at the top, and the bottom wave sized to the band at the bottom — composited with "add" (union), so the visible area is the middle rectangle PLUS wherever either wave shape covers. The bottom layer uses --wave-bottom-section-mirrored rather than --wave-bottom: a mask layer can't carry the scaleX(-1) that ::after above applies at its own usage site, so that flip has to already be baked into the file (see the comment on that variable in 01-base.css). ::before/ ::after become redundant once this is active, since the clip already does their job; removed rather than left to double up. */ @supports (mask-composite: add) or (-webkit-mask-composite: source-over) { .section__bg-photo { -webkit-mask-image: linear-gradient(#000, #000), var(--wave-top), var(--wave-bottom-section-mirrored); mask-image: linear-gradient(#000, #000), var(--wave-top), var(--wave-bottom-section-mirrored); -webkit-mask-repeat: no-repeat, no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat, no-repeat; -webkit-mask-position: 0 var(--wave-height), 0 0, 0 100%; mask-position: 0 var(--wave-height), 0 0, 0 100%; -webkit-mask-size: 100% calc(100% - 2 * var(--wave-height)), 100% var(--wave-height), 100% var(--wave-height); mask-size: 100% calc(100% - 2 * var(--wave-height)), 100% var(--wave-height), 100% var(--wave-height); -webkit-mask-composite: source-over, source-over; mask-composite: add, add; } .section:has(> .section__bg-photo)::before, .section:has(> .section__bg-photo)::after { content: none; } } /* Which of the three shapes a wave gets — and which of the three background blends the section behind it gets — is (section position + page seed) % 3. The position alone would vary the shapes down a page but hand every page the same one at the top, since the hero is always the first section — so functions.php adds a wave-seed-0/1/2 class per page to rotate the whole sequence. Sections are counted among their siblings rather than under main, because single.php nests them in an
. Only the two custom properties are reassigned; the rules above do the drawing either way. :not(.hero) — the hero is literally
, so it counts toward the nth-of-type position above (that's why the comment above says "the hero is always the first section"), but it never reads --wave-top or --section-blend, and 04-hero.css points its own --wave-bottom at the plain white pair, not the -a/-b/-c gradient aliases these rules assign. Before, reassigning them here was harmless — -a/-b/-c were the same white pair. Now that they're the gradient-tinted pair for sections, letting this cascade onto the hero would silently override its --wave-bottom with the gradient one, which is exactly the wrong wave for a hero that's meant to stay white — so it's excluded rather than left to rely on losing a specificity fight it was never supposed to be in. */ .wave-seed-0 section:not(.hero):nth-of-type(3n + 1), .wave-seed-1 section:not(.hero):nth-of-type(3n + 3), .wave-seed-2 section:not(.hero):nth-of-type(3n + 2) { --wave-top: var(--wave-top-a); --wave-bottom: var(--wave-bottom-a); --section-blend: var(--blend-a); } .wave-seed-0 section:not(.hero):nth-of-type(3n + 2), .wave-seed-1 section:not(.hero):nth-of-type(3n + 1), .wave-seed-2 section:not(.hero):nth-of-type(3n + 3) { --wave-top: var(--wave-top-b); --wave-bottom: var(--wave-bottom-b); --section-blend: var(--blend-b); } .wave-seed-0 section:not(.hero):nth-of-type(3n + 3), .wave-seed-1 section:not(.hero):nth-of-type(3n + 2), .wave-seed-2 section:not(.hero):nth-of-type(3n + 1) { --wave-top: var(--wave-top-c); --wave-bottom: var(--wave-bottom-c); --section-blend: var(--blend-c); }