` * keeps the small caption (legacy default). `
` caption) * - Explicit CSS-grid column count driven by `--seamlessmd-logo-row-columns` * so 6 logos lay out as 6 even cells, not centered/wrapped flex. */ .seamlessmd-logo-row--variant-customer-strip { padding-block: var(--seamlessmd-space-6, 1.75rem); } /* Heading: target renders an H3 ("heading accent logo-space customers") that * is darker + larger than the legacy `
` caption. Override the generic * caption styling for the H3 inside customer-strip only. */ .seamlessmd-logo-row.seamlessmd-logo-row--variant-customer-strip .seamlessmd-logo-row__heading { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.01em; color: var(--seamlessmd-heading, #1e2a5c); margin: 0 0 var(--seamlessmd-space-6, 1.75rem); } /* Grid mode: only the customer-strip variant uses CSS grid. Legacy variants * (`customers`, `integrations`, `certifications`) keep their existing * `flex-wrap` layout — render.php emits `--seamlessmd-logo-row-columns` only * when `columns !== 'auto'`, but even when it did, those variants don't read * the var (no grid rule below them). No regression to existing instances. */ .seamlessmd-logo-row--variant-customer-strip .seamlessmd-logo-row__list { /* Default to 6 columns if no explicit value (covers the 6-logo common case * — Atrium, UAB, William Osler, etc.). The render-emitted var overrides. */ display: grid; grid-template-columns: repeat(var(--seamlessmd-logo-row-columns, 6), minmax(0, 1fr)); align-items: center; justify-items: center; column-gap: var(--seamlessmd-logo-row-gap, 2.5rem); row-gap: var(--seamlessmd-logo-row-gap, 2.5rem); } @media (max-width: 991px) { .seamlessmd-logo-row--variant-customer-strip .seamlessmd-logo-row__list { /* Tablet: collapse to 4 columns regardless of desktop column count. */ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 600px) { .seamlessmd-logo-row--variant-customer-strip .seamlessmd-logo-row__list { /* Mobile: 2 columns keeps logos legible at common phone widths. */ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--seamlessmd-space-4, 1rem); row-gap: var(--seamlessmd-space-5, 1.25rem); } } /* ---------- compact-strip variant ---------- * * Under-hero "trusted organizations" band from the Home design: ONE pale-blue * rounded strip holding up to four organization logos plus one optional * trailing text item ("and more" / "والمزيد"), with a small decorative dash * centred above the strip. No heading, no border, no shadow — the strip is the * whole section, and it must read as one unified surface rather than five * separate cards. * * Reference geometry (Home Option 2, 550 px wide, scaled to the 1216 px * container content box at ≥1280 px viewports): * strip height ≈ 9% of strip width → ~110 px * inline padding ≈ 5.5% of strip width → ~64 px * logo height ≈ 3.8% of strip width → ~46 px (editor-driven `logoHeight`) * gaps between the five items are EQUAL, and the outer items sit flush with * the strip's inline padding — i.e. `justify-content: space-between`, not an * equal-column grid (the logos have very different natural widths). * * Cascade note: `assets/css/seamlessmd-theme.css` is enqueued AFTER this file * and carries `.seamlessmd-logo-row` (0,1,0 — padding-block + background), * `.seamlessmd-logo-row__list` (0,1,0), `.seamlessmd-logo-row * .seamlessmd-logo-row__item` (0,2,0) and `.seamlessmd-logo-row * .seamlessmd-logo-row__logo` (0,2,0). At an equal specificity the later file * wins, so every rule below is escalated to 0,2,0 / 0,3,0 through the doubled * `.seamlessmd-logo-row.seamlessmd-logo-row--variant-compact-strip` root. That * makes the variant win on specificity instead of on load order — which is * also what keeps the block-editor canvas (different stylesheet stack) in * agreement with the frontend. */ .seamlessmd-logo-row.seamlessmd-logo-row--variant-compact-strip { /* Block-local tokens. Brand colours belong in global tokens, but the * palette has no blue — the accent below mirrors the value the completed * Home hero already uses, so both read as the same accent. If a global * blue token lands, these two definitions collapse into it. */ --seamlessmd-strip-surface: #edf4ff; --seamlessmd-strip-ink: var(--seamlessmd-text, #1e2a5c); --seamlessmd-strip-radius: 16px; /* ~44 px at 1440 — matches the reference's gap to the hero above and to * the next section below. Beats theme.css's generic * `clamp(1rem, 3.45vh, 3.5rem)` on specificity. */ padding-block: clamp(1.5rem, 3.2vw, 2.75rem); /* theme.css paints `background: var(--seamlessmd-surface)` (white) on * every logo-row section. This variant's surface is the strip itself, so * the section stays transparent and sits on whatever the page uses. */ background: transparent; } /* The strip itself is the `
` * keeps the small caption (legacy default). `