/** * Pattern: Labeled divider list (P5) — patterns/divider-list(.php / -on-band.php) * * Repeated rows of (label + short paragraph) with a 1px hairline divider BETWEEN * items only — n items → n−1 dividers, never before the first or after the last. * Two colour skins driven by context; the STRUCTURE + RHYTHM are identical, the * on-band skin is a colour-only modifier. * * Design source (file g3BMymX7x188yz0AGwEMkL): * On-cream — About "My approach", group 2:995 (Clarity / Composition / Communication) * Label 2:999/1000/1001 Public Sans Medium 20/26, tracking 0.15px, #900000 * Paragraph 2:996/997/998 Inter Regular 15/22, black, measure ~484px * Divider 2:1002/1003 (SVG) stroke #D62609, 1px, 495px wide * On-band — Home "Who I work with", right column of band 2:801 (P6 owns the band) * Label 2:807/808/809 Public Sans Medium 20/26, tracking 0.15px, WHITE * Paragraph 2:802/803/804 Inter Regular 15/22, WHITE * Divider 2:810/811 (SVG) stroke white, stroke-opacity 0.5, 1px, 495px wide * * Spacing rhythm (identical both skins, from About + Home y-coords): * label → paragraph ≈ 7px (2:999→2:996 / 2:807→2:802) * paragraph → divider ≈ 18px (mapped to --kd-space-sm 16px — nearest token; see flags) * divider → next label ≈ 13px (mapped to --kd-gap-normal 12px — nearest token; see flags) * row pitch ≈ 108–113px * * The maroon band on Home is NOT baked in here — this partial keeps the on-band * skin transparent (white text on nothing). P6 (highlight band) wraps it on Home; * the P5 demo page wraps it in a maroon block in PAGE content, not in this CSS. * * TOKEN-DRY: every colour/size/font flows through a --kd-* token. The 7px * label→paragraph gap, the 0.15px label tracking, the 22/15 paragraph line-height * and the ~495px list measure are pattern-specific one-offs (commented literals). * Namespace: .kd-dividerlist* (distinct from P3 .kd-mediasplit*, P4 .kd-logo-strip*, * P7 .kd-ctaband*, P9 .kd-values*). SQUARE design — dividers are lines, no radius. */ /* ── List column ───────────────────────────────────────────────────────────── The list is placed inside a column by page-assembly (About: right half of a 2-col split; Home: right side of the P6 band). Cap it at the node's list column width so a standalone/full-width drop still reads right; inside a narrower parent (or <768) the container wins and the list fills it. The divider spans this width (node 2:1002/2:810 = 495px). overflow-wrap guards a long label ("Corporate Secretaries & Governance Professionals") against any h-scroll. */ .kd-dividerlist { max-width: 495px; /* node list-column / divider width (2:1002, 2:810) */ overflow-wrap: break-word; } /* Neutralise WP flow block-gap so the border + padding model fully controls the vertical rhythm. theme.json emits 0-specificity :where() flow rules → these 0,1,0 selectors win without !important (same mechanism as P9). */ .kd-dividerlist > * { margin-block: 0; /* no gap between item groups — rhythm comes from padding/border below */ } .kd-dividerlist__item > * { margin-block: 0; /* reset; the label re-adds its 7px below (defined after this) */ } /* ── Row: space below the content before its divider (paragraph → divider) ────── Last item has no divider after it → no trailing space. */ .kd-dividerlist__item:not(:last-child) { padding-block-end: var(--kd-space-sm); /* 16px — paragraph → divider (node ~18px) */ } /* ── Divider: 1px hairline BETWEEN items only ─────────────────────────────────── `.item + .item` = every item after the first → n−1 dividers, none before the first or after the last. The gap below the line to the next label rides here. */ .kd-dividerlist__item + .kd-dividerlist__item { border-block-start: 1px solid var(--kd-color-primary); /* #d62609 — SVG 2:1002 stroke */ padding-block-start: var(--kd-gap-normal); /* 12px — divider → next label (node ~13px) */ } /* ── Label (h3) ───────────────────────────────────────────────────────────────── Public Sans Medium 20/26, tracking 0.15px, maroon. theme.json h3 default is SemiBold-600 BLACK, so weight + colour are re-pointed locally (h3 is already Public Sans). LOCAL scope — the global h3 is untouched. */ .kd-dividerlist__label { font-size: var(--kd-size-contact-info); /* 20px — the P4/P9 label size */ font-weight: var(--kd-fw-medium); /* 500 — overrides h3's 600 */ line-height: var(--kd-lh-mid); /* 1.3 → 26px */ letter-spacing: 0.15px; /* comp 2:999 tracking (matches the H2 tracking) */ color: var(--kd-color-secondary); /* maroon #900000 — overrides h3's black */ margin-block-end: 0.4375rem; /* 7px — label → paragraph (comp 2:999→2:996) */ } /* ── Paragraph ────────────────────────────────────────────────────────────────── Inter Regular 15/22 black. Inter + 400 are the body defaults; size (15, not the 16 default) + line-height + colour are set explicitly. */ .kd-dividerlist__para { font-size: var(--kd-size-sub-label); /* 15px */ line-height: 1.4667; /* 22/15 — comp 2:996 (no clean --kd-lh token) */ color: var(--kd-color-body); /* black */ } /* ── On-band skin — white text + white-50% divider, transparent background ─────── Colour-only modifier. P6 (highlight band) owns the maroon rectangle behind it on Home; nothing here paints a background (baking one would double up under P6). */ .kd-dividerlist--on-band .kd-dividerlist__label { color: var(--kd-color-white); } .kd-dividerlist--on-band .kd-dividerlist__para { color: var(--kd-color-white); } .kd-dividerlist--on-band .kd-dividerlist__item + .kd-dividerlist__item { /* white @ 50% alpha — SVG 2:810 stroke="white" stroke-opacity="0.5" */ border-block-start-color: color-mix(in srgb, var(--kd-color-white) 50%, transparent); } /* Responsive: no P5-internal breakpoint needed. The list is column-driven — it caps at 495px on desktop and fills its parent below that (at 375 the 20px-gutter column is ~335px, so the list is 335px, the long label wraps, the paragraph stays 15px). Section rhythm (100→64px) + gutter (→20px) are global (tokens.css). On mobile the parent 2-col section stacks and the list goes full-width. */