/** * Kind Recards — Static page composition (.kr-static-page) * ---------------------------------------------------------------------------- * The look of the site's plain informational pages (privacy, algemene * voorwaarden, verzending, ons verhaal, …) as drawn in the XD design: * * • a full-bleed patterned background filling the whole band between the * header and the (scalloped) footer, * • one centred cream sheet carrying the page title + editor content, * • a small decorative image straddling the sheet's top-right corner. * * Rendered by the page template `template-static.php` ("Statische pagina"); * both images come from ACF (see inc/acf-static-page.php). This is a *page * composition*, not a component — same category as account.css — so it lives in * its own layer rather than growing components.css. Loaded after components in * inc/enqueue.php. * * Contrast: the background image is arbitrary (an editor uploads it), so no * text is ever placed on it. Everything readable sits on the solid cream sheet, * where the pairing is the system default — navy #00009C / ink #0A0A2E on cream * #FFFBF8 (≈ 14:1 and ≈ 17:1). Nothing here puts text on pink. * * Theming hooks (set inline by the template, or by the style guide's demo): * --kr-static-bg-image background-image value (default: none) * --kr-static-bg-color colour behind/instead of it (default: cyan tint) * --kr-static-bg-size background-size (default: cover) * --kr-static-bg-repeat background-repeat (default: no-repeat) */ /* ---- The band ---------------------------------------------------------- */ .kr-static-page { /* The tint doubles as the graceful fallback when no background image is set (and as the colour behind a letterboxed / still-loading SVG), so the cream sheet never sits invisibly on the cream page background. */ background-color: var(--kr-static-bg-color, var(--kr-section-cyan)); background-image: var(--kr-static-bg-image, none); background-position: center top; background-size: var(--kr-static-bg-size, cover); background-repeat: var(--kr-static-bg-repeat, no-repeat); /* Scrolls with the page rather than `fixed`: a fixed attachment is broken on iOS Safari and repaints badly on long legal pages. */ background-attachment: scroll; /* Extra room on top so the decorative image can straddle the sheet's top edge without colliding with the header. */ padding-block: clamp(4rem, 6vw, 7rem) clamp(3rem, 5vw, 6rem); /* Short pages (a two-line contact page) should still show the pattern as a full band instead of a thin stripe. */ min-height: min(70vh, 720px); } /* ---- The content sheet -------------------------------------------------- */ .kr-static-page__panel { position: relative; /* positioning context for the decoration */ max-width: 880px; margin-inline: auto; padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 5vw, 4rem); /* Flat cream, no shadow — the sheet in the design is a plain paper plane on top of the pattern. The generous 32px radius is the brand's card corner. */ background: var(--kr-bg); border-radius: var(--kr-radius-xl); } /* ---- Title -------------------------------------------------------------- */ .kr-static-page__header { margin-bottom: var(--kr-space-6); } .kr-static-page__title { margin: 0; text-align: center; font-size: var(--kr-text-2xl); color: var(--kr-heading); } /* ---- Editor content ----------------------------------------------------- */ .kr-static-page__content { /* Readable measure. The design's placeholder copy was centred, but these pages carry long legal prose — centring it would wreck readability, so the body copy stays left-aligned under the centred title. */ max-width: 68ch; margin-inline: auto; color: var(--kr-text-body); text-align: start; } .kr-static-page__content > :first-child { margin-top: 0; } .kr-static-page__content > :last-child { margin-bottom: 0; } .kr-static-page__content :is(h2, h3, h4, h5, h6) { margin-top: var(--kr-space-6); margin-bottom: var(--kr-space-3); } .kr-static-page__content p, .kr-static-page__content li { line-height: var(--kr-leading-relaxed); } .kr-static-page__content ul, .kr-static-page__content ol { margin-bottom: var(--kr-space-5); } .kr-static-page__content li + li { margin-top: var(--kr-space-2); } /* Links must not be signalled by colour alone. */ .kr-static-page__content a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } .kr-static-page__content :is(img, iframe, video) { border-radius: var(--kr-radius-md); margin-block: var(--kr-space-5); } .kr-static-page__content table { display: block; overflow-x: auto; /* wide tables scroll inside the sheet, never the page */ } /* ---- Decorative image --------------------------------------------------- */ /* Straddles the sheet's top-right corner, as in the design. Purely decorative: the template emits alt="" + aria-hidden, and it never intercepts clicks. Deliberately over-specified (.kr-static-page .kr-static-page__decoration): Smush's lazy-load placeholder ships `.lazyload { width: var(--smush-image- width) }` at the same specificity but from a later stylesheet, which would otherwise blow the decoration up to the sheet's full width. The template also opts the image out of lazy-loading (skip-lazy / no-lazyload) — it is small and above the fold. */ .kr-static-page .kr-static-page__decoration { position: absolute; top: 0; right: clamp(var(--kr-space-5), 6%, var(--kr-space-8)); width: clamp(64px, 9vw, 132px); height: auto; transform: translateY(-55%); pointer-events: none; user-select: none; } /* ---- Small screens ------------------------------------------------------ */ @media (max-width: 620px) { .kr-static-page { min-height: 0; } .kr-static-page__panel { border-radius: var(--kr-radius-lg); } /* Narrow sheets make the centred title run nearly full width, so lift the decoration almost clear of the sheet instead of letting it land on the title. */ .kr-static-page .kr-static-page__decoration { width: clamp(52px, 18vw, 84px); right: var(--kr-space-4); transform: translateY(-70%); } }