/* Layout primitives. Containers, section spacing. */ .rehab-container { box-sizing: border-box; width: 100%; max-width: var(--rehab-container-max); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 1024px) { .rehab-container { padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 1440px) { .rehab-container { padding-left: 3rem; padding-right: 3rem; } } .rehab-container--narrow { max-width: var(--rehab-container-narrow); } .rehab-container--xs { max-width: var(--rehab-container-xs); } .rehab-container--text { max-width: var(--rehab-container-text); } /* Section padding scale */ .rehab-section { padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 768px) { .rehab-section { padding-top: 4rem; padding-bottom: 4rem; } } @media (min-width: 1024px) { .rehab-section { padding-top: 5rem; padding-bottom: 5rem; } .rehab-section--lg { padding-top: 7rem; padding-bottom: 7rem; } } /* Background utilities — token-driven */ .rehab-bg-white { background-color: var(--rehab-color-bg); } .rehab-bg-cream { background-color: var(--rehab-color-cream); } .rehab-bg-sage-mist { background-color: var(--rehab-ethereal-sage); } /* --------------------------------------------------------------------------- Dark band (REH-260) A section that sits on the brand's dark surface. The live afkickkliniek homepage gets its rhythm from full-width dark-green bands rather than from alternating light tones (REH-259), and until now only rehab/cta-band could produce one — so a page could not put a card grid or an image/text split on a dark surface without hand-written CSS. Everything inside inverts by REBINDING TOKENS rather than by restyling each element. Every text colour in cards-grid and feature-split already resolves through --rehab-warm-charcoal, --rehab-soft-charcoal, --rehab-sage-text and --rehab-sage-dark, so pointing those at light values here inverts the whole subtree — including any element added to those blocks later, which a list of selectors would silently miss. Same approach as the footer fix in REH-259. Purely additive: 19 blocks read a rehab-bg-* class, and none of them receives this one unless its `background` attribute is explicitly set to "dark". Cards need no special handling — .rehab-card is transparent with only a border, and that border resolves through --rehab-tan-rgb, which is rebound below. ------------------------------------------------------------------------- */ .rehab-bg-dark { /* Reads --rehab-color-dark ONLY. An earlier version fell back to --rehab-sage-dark, which this same rule rebinds two lines down — custom properties resolve on the element where they are declared, so the band painted itself translucent white and every contrast check collapsed to 1.00. Never fall back to a token the same rule overrides. */ background-color: var(--rehab-color-dark, #2C2C2C); /* Ink */ --rehab-warm-charcoal: #FFFFFF; --rehab-color-ink: #FFFFFF; --rehab-soft-charcoal: rgba(255, 255, 255, 0.82); --rehab-color-ink-soft: rgba(255, 255, 255, 0.82); /* Accents: eyebrows, small caps, the diamond glyph */ --rehab-sage-text: rgba(255, 255, 255, 0.74); --rehab-color-accent: rgba(255, 255, 255, 0.74); --rehab-sage-dark: rgba(255, 255, 255, 0.74); /* Rules, borders and card outlines */ --rehab-color-line: rgba(255, 255, 255, 0.22); --rehab-tan-rgb: 255, 255, 255; /* Surfaces nested inside the band (panels, chips) must not stay white. */ --rehab-color-white: rgba(255, 255, 255, 0.08); --rehab-color-cream: rgba(255, 255, 255, 0.08); --rehab-ethereal-sage: rgba(255, 255, 255, 0.12); } /* Links inside a dark band, which otherwise keep the light-surface green. */ .rehab-bg-dark a:not(.rehab-btn) { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.45); } /* --------------------------------------------------------------------------- Default-template page content (REH-243) rehab/* blocks bring their own .rehab-container; core blocks do not, so on a page mixing the two the core blocks ran full-bleed while the rehab ones sat in a 896px measure. Constrain only the core blocks, and only as direct children, so nested content and deliberate full-width blocks are untouched. --------------------------------------------------------------------------- */ .rehab-page-content > p, .rehab-page-content > h1, .rehab-page-content > h2, .rehab-page-content > h3, .rehab-page-content > h4, .rehab-page-content > ul, .rehab-page-content > ol, .rehab-page-content > blockquote, .rehab-page-content > figure, .rehab-page-content > .wp-block-table, .rehab-page-content > .wp-block-image, .rehab-page-content > .wp-block-quote, .rehab-page-content > .wp-block-buttons, .rehab-page-content > .wp-block-details { max-width: var(--rehab-container-text); margin-left: auto; margin-right: auto; padding-left: var(--rehab-space-md); padding-right: var(--rehab-space-md); /* A run the browser may not break (links glued by  , a long URL) wraps inside the column instead of widening the page on phones. */ overflow-wrap: break-word; } /* Core buttons have no block margin of their own; give them the rhythm of a paragraph so a button never butts against the image after it. */ .rehab-page-content > .wp-block-buttons { margin-top: 1.5rem; margin-bottom: 1.5rem; } /* * The page title sits in its own
, so it is not a direct child and * escaped the gutter above — leaving the H1 24px to the left of every * paragraph under it, which read as the prose being indented beneath the * heading (sheet row 86). It takes the same gutter so the column has one * left edge. */ .rehab-page-content > .rehab-page-title { max-width: var(--rehab-container-text); margin-left: auto; margin-right: auto; padding-left: var(--rehab-space-md); padding-right: var(--rehab-space-md); } /* Deliberate full-bleed still wins. */ .rehab-page-content > .alignfull, .rehab-page-content > .alignwide { max-width: none; padding-left: 0; padding-right: 0; } /* Tables carry hard column widths from imported content; let them scroll inside their own box rather than widening the page. */ .rehab-page-content > .wp-block-table { overflow-x: auto; } .rehab-page-content > .wp-block-table table { width: 100%; border-collapse: collapse; } .rehab-page-content > .wp-block-table th, .rehab-page-content > .wp-block-table td { border: 1px solid var(--rehab-color-line); padding: 0.625rem 0.75rem; text-align: left; vertical-align: top; } .rehab-page-content > .wp-block-table th { background: var(--rehab-ethereal-sage); font-family: var(--rehab-font-body); font-weight: 500; } /* --------------------------------------------------------------------------- Page title (REH-269) Rendered by page.php only when the page's own content supplies no

. Sized to sit with the section headings rather than shout over them. ------------------------------------------------------------------------- */ .rehab-page-title { max-width: var(--rehab-container-text, 56rem); margin: 0 auto; padding: 3rem 1.5rem 0; } .rehab-page-title h1 { font-family: var(--rehab-font-display); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 400; line-height: 1.15; color: var(--rehab-color-ink); margin: 0; /* Dutch compounds overflow a heading where English does not (REH-236). */ overflow-wrap: break-word; } @media (min-width: 1024px) { .rehab-page-title { padding-left: 2rem; padding-right: 2rem; } }