/* ========================================================================== SOLUTIONS SUB-PAGES — SECTION 3: "WHAT [SOLUTION] ENABLES" APPROVED SET: designs 2, 3, 4, 8, 10 (selected 2026-07-31) ========================================================================== Preview-only. When Phase 2 starts, the five approved blocks move into styles.css and this file plus its preview page are deleted. STYLE CONTRACT — the five approved blocks conform; read before editing. The base is site/index.html, NOT the Solutions/Services component library (.dx-item / .gw-row / .iq-card). Those are why solutions.html reads as overdone, and building on them got two earlier rounds rejected. RADIUS var(--radius) = 4px. Media 8px. Bento none. BORDERS neutral #c4c4c4 on cards, var(--c-line) on rules. NOT --fam-line. SHADOWS neutral. 0 14px 30px rgba(20,20,40,.08) on cards, 0 30px 60px rgba(0,0,0,.35) on media. NEVER --fam-shadow. HOVER .22s, and only border-colour + translateY(-2px) + arrow translateX(4px). No wipes, blooms, dimming or sheen. MOTIF the 60x60 outlined arrow box, 48x48 in row lists. GRADIENT large numerals and thin accent rules only. Never a hover wipe. ROW LISTS .svc-cards--rows: 1px var(--c-line) bottom rule; hover recolours ONLY that rule. Nothing moves. The one substitution: var(--c-accent) -> var(--fam-700). Geometry, weights, shadows and timings stay exactly as index.html has them. Sibling reference implementation: site/css/sol-02-intro.css. NOT SELECTED — designs 1, 5, 6, 7 and 9. Their blocks are still below and still work, but they were built before this contract was applied and have NOT been reworked to it (family-tinted borders, --fam-shadow, hover wipes). Do not lift one without fixing it first. They no longer appear in the preview page. SCOPING Everything is namespaced .s3vN- (section 3, variant N) so this file can never reach a live page, and so six parallel design sessions cannot collide. The only shared rules are .s3-eyebrow / .s3-h2 / .s3-lede / .s3-count, plus the two home-page devices .s3-link-arrow and .s3-num / .s3-num-l — lifting a winner means taking those plus that variant's block. Preview chrome is .s3-flag / .s3-label / .s3-note. COLOUR Every colour is a --fam-* role token, resolved by .pg-solutions on . No literal hex outside the preview chrome. Swap the family and all ten re-theme. RESPONSIVE Authored MOBILE-FIRST at 390px, stepping up with min-width. This is the inverse of styles.css (desktop-first, max-width) — deliberate, and safe because nothing here shares a selector with it. Note .container drops from 32px to 20px side padding at <=600px, so the base column is 350px wide at 390px viewport; every base rule below is sized against that number. Steps: 390 base · 561 · 761 · 941 · 1081 THE CONTENT PROBLEM THIS SECTION HAS Nine capability groups, six to eight bullets each — 68 atoms in the SAP CX worst case. The bullets are short noun phrases, not sentences, which is what makes chips, inline runs and multi-column flow viable here where they would fail on a prose section. Two of the ten (3 and 7) treat 68 atoms as something to compress rather than something to lay out; the other eight print all of it and differ in how they keep it scannable. HOME-PAGE DNA (handoff section 6, a stated requirement) .svc-card + .card-arrow ......... design 1 eyebrow -> H2 -> lede rhythm .... all ten .feat-tile bento ................ design 6 .services-tabs hover explorer ... design 7 scrimmed --img band ............. design 8 .glance-stat data-count ......... designs 6 and 8 .link-arrow ..................... designs 4, 6, 8 .ind-panel expanding slider ..... NOT used, deliberately. The device gives an active panel ~2.7 of 9 shares, i.e. about 265px at 1240px, and eight bullets do not read in a 265px column beside eight vertical name strips. Design 7 already occupies the one-at-a-time slot with a layout that does survive the content. MOTION — live in this preview, not deferred to build time. include.js APPENDS /js/main.js itself (include.js:33), so any page that loads include.js also gets the reveal observer and the [data-count] counters. An earlier version of this file said main.js was not loaded and omitted .reveal on that basis; that was simply wrong. .reveal reveal-soft sits on the repeating group wrappers only, never on individual bullets, and never on a sticky container (.s3v4-aside, .s3v8-panel) — .reveal animates `transform`, and a transform on the sticky element fights its own offset. Design 10 reveals .s3v10-card rather than .s3v10-node for the same reason: the node owns the spine dot and connector, which must not leave the spine. data-delay cycles 0/60/120 rather than ramping. A linear 60ms step over nine groups leaves the ninth waiting 480ms after the first; three waves of three keeps the whole list inside 120ms and still staggers. Design 10 uses a 0/60 cycle because its nodes are laid out two per row. ========================================================================== */ /* ========================================================================== PREVIEW CHROME (not part of any design — do not lift) ========================================================================== */ /* NOT sticky: .site-header is position:fixed below 941px and sticky above it, both at z-index 100, so a top:0 flag just slides underneath and shows a sliver of clipped text. Each design carries its own .s3-label anyway. */ .s3-flag { background: #14141c; color: #fff; font-size: 13px; } .s3-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 10px; } .s3-flag b { font-weight: 700; } .s3-flag span { color: rgba(255,255,255,.62); } .s3-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 26px 4px; } .s3-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; } .s3-label h2 b { color: var(--fam-700); font-weight: 800; } .s3-label p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 74ch; } .s3-label code { font-size: 13px; background: var(--fam-chip); color: var(--fam-700); padding: 1px 5px; } .s3-label .s3-cost { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; margin-top: 9px; font-size: 12.5px; font-weight: 500; color: var(--fam-ink-3); font-variant-numeric: tabular-nums; } .s3-label .s3-cost b { font-weight: 800; color: var(--fam-700); } .s3-label .s3-cost span { color: var(--c-muted); font-weight: 600; } .s3-note { background: var(--fam-tint); } .s3-note .container { padding-block: 34px; } .s3-note h3 { font-size: 17px; margin: 0 0 8px; color: var(--c-ink); } .s3-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 76ch; } .s3-note p + p { margin-top: 12px; } .s3-note b { color: var(--c-ink); } .s3-note ul { margin: 14px 0 0; display: grid; gap: 6px; } .s3-note li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.6; color: var(--c-body); } .s3-note li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--fam-grad); } /* ========================================================================== SHARED TYPE — lift these four with whichever variants win ========================================================================== */ .s3-eyebrow { display: inline-block; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fam-700); } .s3-h2 { margin: 0; /* .services-title, stepped down: 700 not 800, line-height 1.0 not 1.12, -.025em not -.02em. Same ramp as sol-02-intro's .s2-h2 so a page carrying a Section 2 winner and a Section 3 winner has ONE heading size. */ font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0; letter-spacing: -.025em; color: var(--c-ink); text-wrap: balance; } .s3-lede { margin: 16px 0 0; max-width: 60ch; font-size: 16px; font-weight: 300; line-height: 1.68; color: var(--c-body); } .s3-count { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fam-ink-3); } .s3-count b { font-size: 15px; font-weight: 800; color: var(--fam-700); letter-spacing: 0; } /* ---- home-page devices, recoloured violet. Lift with designs 4, 6, 8 ---- .s3-link-arrow is index.html's .link-arrow (nudge on hover). .s3-num is .glance-stat / .why-glance-num. The markup carries data-count / data-suffix so main.js animates the count-up on the real page; the element also holds the final value as text, so it reads correctly here in the preview where main.js is not loaded, and for anyone with JS off. */ .s3-link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; /* index.html's .link-arrow is a bare 19px-tall text link. Kept the look, but given a 44px hit box here — the handoff's mobile bar is a hard one, and a thumb-sized target costs nothing but a min-height. */ min-height: 44px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--fam-700); transition: color .2s var(--ease); } .s3-link-arrow svg { width: 18px; height: 16px; flex: none; transition: transform .2s var(--ease); } .s3-link-arrow:hover svg, .s3-link-arrow:focus-visible svg { transform: translateX(4px); } .s3-num { display: block; font-size: clamp(30px, 7vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; } .s3-num-l { display: block; margin-top: 8px; max-width: 15ch; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35; color: var(--fam-200); } /* TABULAR FIGURES on every 01-09 marker in this file. Inter ships proportional figures by default, so "1" is narrower than "2". In the variants that set the numeral beside the title with flex or baseline alignment rather than in a fixed column (3, 4, 6, 7, 10) that shifted every title by a pixel or two and left the stack visibly ragged down the left. */ .s3v2-n, .s3v3-n, .s3v4-index .n, .s3v4-group h3 .n, .s3v6-n, .s3v7-tab .n, .s3v9-group h3 .n, .s3v10-card h3 .n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @media (min-width: 761px) { .s3-lede { font-size: 17px; } } /* ========================================================================== DESIGN 1 — CAPABILITY CARDS [NOT SELECTED — not on the style contract] -------------------------------------------------------------------------- The workhorse, and the closest thing here to index.html: .svc-card's border, square corners and lift-on-hover, plus the same .card-arrow corner box and the identical arrow glyph, recoloured violet. The arrow is honest rather than decorative. The CX doc's nine Section 3 capability groups map 1:1 onto Section 4's sub-modules (context->4.1, engagement->4.2, sales->4.3, commerce->4.5, service->4.6, loyalty->4.7, lead-to-cash->4.4, intelligence->4.8, AI->4.9), so each card is a real link down the page and Section 3 becomes the way into Section 4. The anchors are the ones Section 4 will own at build time, so they are inert in preview. If a future solution page has no such mapping, drop the anchor AND the arrow together — an arrow that goes nowhere is worse than no arrow. Worst case, MEASURED: 1889px at 1440px (3 x 3) and 4696px at 390px, where nine cards stack. Grid rows equalise card heights for free, so a 6-bullet group and an 8-bullet group still line up — and because the arrow is pinned with margin-top:auto, the arrows line up across a row regardless. ========================================================================== */ .s3v1-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; } @media (min-width: 561px) { .s3v1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 941px) { .s3v1-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; } } .s3v1-card { display: flex; flex-direction: column; padding: 22px 20px 24px; background: #fff; border: 1px solid var(--fam-line); border-radius: var(--radius); transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } @media (min-width: 761px) { .s3v1-card { padding: 26px 24px 28px; } } .s3v1-card:hover { border-color: var(--fam-400); box-shadow: 0 16px 34px rgba(var(--fam-shadow), .12); transform: translateY(-2px); } .s3v1-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-bottom: 16px; background: var(--fam-chip); border-radius: var(--radius); color: var(--fam-700); transition: background .22s var(--ease), color .22s var(--ease); } .s3v1-ic svg { width: 22px; height: 22px; } .s3v1-card:hover .s3v1-ic { background: var(--fam-700); color: #fff; } .s3v1-card h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.28; letter-spacing: -.012em; color: var(--c-ink); } .s3v1-list { display: grid; gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--fam-rule); } .s3v1-list li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--fam-ink-2); } .s3v1-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 2px; background: var(--fam-grad); } /* .card-arrow: 60px bordered square, bottom-right, glyph nudges on hover. margin-top:auto pins it to the bottom of the flex card so the arrows line up across a row whatever each card's bullet count is. */ .s3v1-arrow { align-self: flex-end; margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; box-sizing: content-box; color: var(--fam-700); transition: color .22s var(--ease); } .s3v1-arrow svg { width: 52px; height: 52px; padding: 13px; border: 1px solid var(--fam-line-2); border-radius: var(--radius); transition: transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease); } .s3v1-card:hover .s3v1-arrow svg, .s3v1-card:focus-visible .s3v1-arrow svg { border-color: var(--fam-700); background: var(--fam-700); color: #fff; transform: translateX(3px); } .s3v1-card:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; } /* ========================================================================== DESIGN 2 — NUMBERED LEDGER -------------------------------------------------------------------------- No boxes at all. Hairline rows, a pale numeral that lights to the primary on hover, and the bullets set as one INLINE run separated by middots rather than nine stacked lists. That single decision is what makes this the most compact full-disclosure option in the set: an 8-bullet group costs two lines of text, not eight rows. Worst case, MEASURED: 1269px at 1440px — 410px less than Design 1 for the same 68 items — and 2286px at 390px, the cheapest full-disclosure option at phone width by a wide margin. The trade is scannability: a run reads as a sentence, so an individual capability is harder to pick out. ========================================================================== */ .s3v2-rows { margin-top: 32px; border-top: 1px solid var(--c-line); } @media (min-width: 941px) { .s3v2-rows { margin-top: 42px; } } .s3v2-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0 19px; border-bottom: 1px solid var(--c-line); transition: border-color .22s var(--ease); } /* .svc-cards--rows exactly: the ONLY thing hover does is recolour the bottom rule. This block previously carried a tinted row background and a 2px gradient wipe that grew from the left edge — both are the Solutions-library idiom the home page does not use, and the wipe is specifically ruled out. */ .s3v2-row:hover { border-bottom-color: var(--fam-700); } .s3v2-n { grid-row: 1; grid-column: 1; font-size: 15px; font-weight: 800; letter-spacing: .02em; line-height: 1.5; color: var(--fam-num); } .s3v2-row h3 { grid-row: 1; grid-column: 2; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.012em; color: var(--c-ink); } /* inline, not flex — a wrapped flex run leaves orphan separators at the start of a line, whereas real inline flow breaks exactly like a sentence */ .s3v2-caps { grid-column: 2; margin-top: 7px; font-size: 14px; line-height: 1.62; color: var(--fam-ink-3); } .s3v2-caps li { display: inline; } .s3v2-caps li:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--fam-dot); font-weight: 700; } @media (min-width: 941px) { .s3v2-row { grid-template-columns: 54px minmax(0, 300px) minmax(0, 1fr); gap: 0 26px; padding: 21px 0 22px; align-items: baseline; } .s3v2-row h3 { grid-column: 2; } .s3v2-caps { grid-row: 1; grid-column: 3; margin-top: 0; } .s3v2-n { font-size: 17px; } } @media (min-width: 1081px) { /* 46px, not 62 — "09" at 17px is 22px wide, and the wider column pushed a 100px void between the numeral and the title it belongs to */ .s3v2-row { grid-template-columns: 46px minmax(0, 340px) minmax(0, 1fr); gap: 0 30px; } } /* ========================================================================== DESIGN 3 — DISCLOSURE LEDGER -------------------------------------------------------------------------- Native

, so it is keyboard-operable and findable by in-page search with no JavaScript at all. Closed, the whole section is nine titles — about 520px whatever the bullet count. That is the point: this is the variant to rotate onto pages whose Section 4 is already enormous. Worst case, MEASURED: 1072px at 1440px and 1320px at 390px with one group open. It does not really have a worst case — nine groups of fourteen bullets would cost the same at rest, because closed rows do not know their length. ========================================================================== */ .s3v3-list { margin-top: 30px; border-top: 1px solid var(--c-line); } @media (min-width: 941px) { .s3v3-list { margin-top: 40px; } } .s3v3-item { border-bottom: 1px solid var(--c-line); transition: border-color .22s var(--ease); } /* row-list rule: hover recolours the bottom rule and nothing else. The open state is a state, not a hover, so it may still colour the row. */ .s3v3-item:hover { border-bottom-color: var(--fam-700); } .s3v3-item > summary { display: flex; align-items: center; gap: 13px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; /* Firefox */ } .s3v3-item > summary::-webkit-details-marker { display: none; } .s3v3-item > summary:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; } .s3v3-n { flex: none; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--fam-num); transition: color .22s var(--ease); } .s3v3-item > summary h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.32; letter-spacing: -.012em; color: var(--c-ink); transition: color .22s var(--ease); } .s3v3-tally { flex: none; display: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fam-ink-3); } @media (min-width: 561px) { .s3v3-tally { display: block; } } /* the +/- toggle, built from two rules so it can rotate into a minus */ .s3v3-pm { flex: none; position: relative; width: 30px; height: 30px; border: 1px solid #c4c4c4; border-radius: 999px; transition: border-color .22s var(--ease), background-color .22s var(--ease); } .s3v3-pm::before, .s3v3-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--fam-700); transform: translate(-50%, -50%); transition: transform .22s var(--ease), background-color .22s var(--ease); } .s3v3-pm::after { transform: translate(-50%, -50%) rotate(90deg); } .s3v3-item[open] .s3v3-pm::after { transform: translate(-50%, -50%) rotate(0deg); } .s3v3-item[open] .s3v3-pm { background: var(--fam-700); border-color: var(--fam-700); } .s3v3-item[open] .s3v3-pm::before, .s3v3-item[open] .s3v3-pm::after { background: #fff; } .s3v3-item[open] .s3v3-n { color: var(--fam-700); } .s3v3-item[open] > summary h3 { color: var(--fam-700); } .s3v3-body { padding: 2px 0 22px; } .s3v3-body ul { display: grid; gap: 9px; } @media (min-width: 561px) { .s3v3-body ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; } } @media (min-width: 941px) { .s3v3-body { padding-left: 27px; } .s3v3-body ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 40px; } } .s3v3-body li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.5; color: var(--fam-ink-2); } .s3v3-body li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 2px; background: var(--fam-grad); } /* ========================================================================== DESIGN 4 — STICKY INDEX -------------------------------------------------------------------------- The heading and a numbered index of all nine groups pin to the left while the groups themselves scroll past. Solves the real failure of a long section: by group six you have forgotten what the section was answering. Mobile drops the sticky entirely and lays the index out as a wrapped chip list — a pinned rail on a 390px screen is just lost height. The chips are still anchors, so the mobile version keeps the jump-to behaviour. Worst case, MEASURED: 1996px at 1440px — the most expensive in the set — and 3925px at 390px. The pinned rail is what buys that back: you are never more than a glance from knowing where you are in the nine. ========================================================================== */ .s3v4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; } @media (min-width: 1081px) { .s3v4-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 0 70px; align-items: start; } .s3v4-aside { position: sticky; top: 112px; } } .s3v4-index { margin-top: 24px; } /* mobile + tablet: wrapped anchor chips. list-style is reset here because styles.css only zeroes `ul` — an

is still the right element: the index is an ordered sequence and the numerals are content. */ .s3v4-index ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .s3v4-index a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 13px; background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fam-ink-2); transition: border-color .22s var(--ease), color .22s var(--ease); } .s3v4-index a:hover, .s3v4-index a:focus-visible { border-color: var(--fam-700); color: var(--fam-700); } .s3v4-index .n { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--fam-700); } @media (min-width: 1081px) { /* desktop: the chips become a ruled index list */ .s3v4-index { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-line); } .s3v4-index ol { display: block; } .s3v4-index li + li { border-top: 1px solid var(--c-line); } .s3v4-index a { min-height: 0; padding: 10px 0; gap: 12px; background: none; border: 0; border-radius: 0; font-size: 14px; font-weight: 600; } .s3v4-index a:hover, .s3v4-index a:focus-visible { background: none; color: var(--fam-700); } .s3v4-index .n { color: var(--fam-num); transition: color .22s var(--ease); } .s3v4-index a:hover .n { color: var(--fam-700); } } .s3v4-groups { margin-top: 6px; } .s3v4-group { padding: 24px 0 26px; border-top: 1px solid var(--c-line); } .s3v4-group:first-child { border-top: 0; padding-top: 4px; } .s3v4-group h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.014em; color: var(--c-ink); } @media (min-width: 761px) { .s3v4-group h3 { font-size: 20px; } } .s3v4-group h3 .n { flex: none; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--fam-700); } .s3v4-group ul { display: grid; gap: 9px; margin-top: 15px; } @media (min-width: 561px) { .s3v4-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 30px; } } @media (min-width: 1081px) { .s3v4-group ul { gap: 10px 44px; } } .s3v4-group li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.52; color: var(--fam-ink-2); } .s3v4-group li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 2px; background: var(--fam-grad); } /* ========================================================================== DESIGN 5 — DEEP CAPABILITY BAND [NOT SELECTED — not on the style contract] -------------------------------------------------------------------------- The page's one dark beat, on the family's own --fam-grad-deep. Nine groups as hairline-separated blocks flowing into two then three columns, with the lit --fam-300 accents the deep band is designed around. Pairs badly with a dark Section 2 winner and badly with the Section 8 case bento; it wants light on both sides of it. Worst case, MEASURED: 1312px at 1440px (three columns) and 3043px at 390px. Reads heavier than the number suggests, because a dark band always does. ========================================================================== */ .s3v5 { position: relative; overflow: hidden; color: #fff; background: var(--fam-grad-deep); } /* lit top edge — the same device the deep gateway band on services.html uses */ .s3v5::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--fam-300) 0%, var(--fam-400) 45%, transparent 100%); } /* one soft bloom so the flat gradient does not read as a printed block */ .s3v5::after { content: ""; position: absolute; right: -14%; top: -22%; width: 60%; aspect-ratio: 1; border-radius: 999px; pointer-events: none; background: radial-gradient(circle, rgba(var(--fam-glow), .17) 0%, rgba(var(--fam-glow), 0) 66%); } .s3v5 > .container { position: relative; z-index: 1; } .s3v5 .s3-eyebrow { color: var(--fam-300); } .s3v5 .s3-h2 { color: #fff; } .s3v5 .s3-lede { color: var(--fam-200); } .s3v5-grid { margin-top: 30px; } @media (min-width: 761px) { .s3v5-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 40px; } } @media (min-width: 1081px) { .s3v5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; } } .s3v5-group { padding: 20px 0 21px; border-bottom: 1px solid rgba(255,255,255,.14); } .s3v5-group h3 { position: relative; margin: 0 0 12px; padding-left: 26px; font-size: 16.5px; font-weight: 700; line-height: 1.32; letter-spacing: -.012em; color: #fff; } /* the lit bar, not a bullet — same accent language as .gw-row's chevron */ .s3v5-group h3::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 2px; background: var(--fam-300); } .s3v5-group ul { display: grid; gap: 7px; padding-left: 26px; } .s3v5-group li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.5; color: var(--fam-200); } .s3v5-group li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 999px; background: var(--fam-300); opacity: .75; } /* ========================================================================== DESIGN 6 — CAPABILITY BENTO [NOT SELECTED — not on the style contract] -------------------------------------------------------------------------- index.html's .feat-tile mosaic, recoloured violet. A deep statement tile carries the heading, the counters and the link into Section 4; the nine capability groups follow as tiles that rotate through four flavours — line, tint, solid, deep — so the grid has rhythm without claiming a hierarchy the content does not have. All nine groups are equal in the doc. NO PHOTO FLAVOUR, unlike the home page's version. site/assets/images is generic stock, the house rule is that Solutions is gradient-led, and Design 8 already owns the one photographic slot in this set. The 4-column desktop grid is exactly 12 cells: the statement tile spans 2, the last capability tile spans 2, eight tiles take one each. No holes, and no tile is short-changed to make the arithmetic work. Worst case, MEASURED: 1428px at 1440px — third cheapest, because the statement tile absorbs the heading that every other design pays for above the fold — and 3643px at 390px, where ten tiles simply stack. Uneven fill inside a tile is the bento idiom, not a bug; the home page's does the same. ========================================================================== */ .s3v6 { background: var(--fam-tint-2); } .s3v6-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } @media (min-width: 641px) { .s3v6-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 1081px) { .s3v6-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .s3v6-tile--stmt, .s3v6-tile--wide { grid-column: span 2; } } .s3v6-tile { display: flex; flex-direction: column; padding: 22px 20px 24px; border-radius: var(--radius); border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } @media (min-width: 761px) { .s3v6-tile { padding: 26px 24px 28px; } } .s3v6-tile h3 { margin: 0 0 13px; font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -.014em; } .s3v6-n { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; } .s3v6-tile ul { display: grid; gap: 7px; } .s3v6-tile--wide ul { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1081px) { .s3v6-tile--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 26px; } } .s3v6-tile li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.5; } .s3v6-tile li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 2px; } /* ---- flavours ---- */ .s3v6-tile--line { background: #fff; border-color: var(--fam-line); } .s3v6-tile--line:hover { border-color: var(--fam-400); box-shadow: 0 16px 34px rgba(var(--fam-shadow), .12); transform: translateY(-2px); } .s3v6-tile--line h3 { color: var(--c-ink); } .s3v6-tile--line .s3v6-n { color: var(--fam-num); } .s3v6-tile--line li { color: var(--fam-ink-2); } .s3v6-tile--line li::before { background: var(--fam-grad); } .s3v6-tile--tint { background: var(--fam-chip); } .s3v6-tile--tint:hover { box-shadow: 0 16px 34px rgba(var(--fam-shadow), .14); transform: translateY(-2px); } .s3v6-tile--tint h3 { color: var(--c-ink); } .s3v6-tile--tint .s3v6-n { color: var(--fam-400); } .s3v6-tile--tint li { color: var(--fam-ink-2); } .s3v6-tile--tint li::before { background: var(--fam-700); } .s3v6-tile--solid { background: var(--fam-700); } .s3v6-tile--solid:hover { box-shadow: 0 18px 38px rgba(var(--fam-shadow), .3); transform: translateY(-2px); } .s3v6-tile--solid h3 { color: #fff; } .s3v6-tile--solid .s3v6-n { color: var(--fam-200); } .s3v6-tile--solid li { color: var(--fam-100); } .s3v6-tile--solid li::before { background: var(--fam-300); } .s3v6-tile--deep { background: var(--fam-grad-deep); } .s3v6-tile--deep:hover { box-shadow: 0 18px 38px rgba(var(--fam-shadow-900), .34); transform: translateY(-2px); } .s3v6-tile--deep h3 { color: #fff; } .s3v6-tile--deep .s3v6-n { color: var(--fam-300); } .s3v6-tile--deep li { color: var(--fam-200); } .s3v6-tile--deep li::before { background: var(--fam-300); } /* ---- the statement tile ---- */ .s3v6-tile--stmt { position: relative; overflow: hidden; justify-content: flex-end; background: var(--fam-grad-deep); padding-top: 30px; } .s3v6-tile--stmt::after { content: ""; position: absolute; right: -22%; top: -30%; width: 72%; aspect-ratio: 1; border-radius: 999px; pointer-events: none; background: radial-gradient(circle, rgba(var(--fam-glow), .2) 0%, rgba(var(--fam-glow), 0) 66%); } .s3v6-tile--stmt > * { position: relative; z-index: 1; } .s3v6-tile--stmt .s3-eyebrow { color: var(--fam-300); } .s3v6-tile--stmt .s3-h2 { color: #fff; font-size: clamp(25px, 5.4vw, 34px); } .s3v6-tile--stmt .s3-lede { color: var(--fam-200); font-size: 15px; max-width: 46ch; } .s3v6-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); } .s3v6-tile--stmt .s3-link-arrow { color: var(--fam-300); margin-top: 18px; } .s3v6-tile--stmt .s3-link-arrow:hover { color: #fff; } /* ========================================================================== DESIGN 7 — TAB EXPLORER [NOT SELECTED — not on the style contract] -------------------------------------------------------------------------- Nine tabs, one panel. Constant height whatever the group holds — the only variant in the set that costs the same on a six-bullet page and a fourteen-bullet one. Directly lifts the home page's .services-tabs hover-explorer, which is the strongest interaction on index.html. Built on hidden radio inputs, NOT JavaScript: the radios keep native keyboard behaviour (Tab to the group, arrow keys between tabs) and the labels give a 44px hit area. The inputs are clipped rather than display:none so they stay focusable. Mobile turns the vertical rail into a horizontally scrolling chip strip that bleeds to the viewport edge — the strip is its own scroll container, so it cannot push the page sideways. Worst case, MEASURED: 894px at 1440px and 884px at 390px — the only design in the set that costs the SAME at both widths, and less than a quarter of Design 4. Costs a click to see anything, which is the trade. ========================================================================== */ .s3v7 { margin-top: 30px; } @media (min-width: 941px) { .s3v7 { margin-top: 42px; } } .s3v7-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .s3v7-tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; /* bleed to the screen edge; the negative margin matches .container's own padding at this width, so the strip starts flush at x=0 */ margin-inline: -20px; padding-inline: 20px; padding-bottom: 2px; } .s3v7-tabs::-webkit-scrollbar { display: none; } @media (min-width: 601px) { .s3v7-tabs { margin-inline: -32px; padding-inline: 32px; } } .s3v7-tab { flex: none; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 15px; cursor: pointer; background: #fff; border: 1px solid var(--fam-line); border-radius: var(--radius); scroll-snap-align: start; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fam-ink-2); white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } .s3v7-tab .n { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--fam-num); transition: color .2s var(--ease); } .s3v7-tab:hover { border-color: var(--fam-400); color: var(--fam-700); } .s3v7-panels { margin-top: 18px; padding-top: 22px; border-top: 2px solid var(--fam-line-2); } .s3v7-panel { display: none; } .s3v7-panel h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.016em; color: var(--c-ink); } @media (min-width: 761px) { .s3v7-panel h3 { font-size: 23px; } } .s3v7-panel ul { display: grid; gap: 10px; margin-top: 18px; } /* stays at TWO columns on desktop, not three: the tab rail is nine rows tall and the panel only ever holds a title plus 6-8 short items, so a third column just makes the panel shorter and the white space beside the rail larger. Two columns and 15px text is the most panel this content can fill. */ @media (min-width: 561px) { .s3v7-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 40px; } } .s3v7-panel li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--fam-ink-2); } .s3v7-panel li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 2px; background: var(--fam-grad); } @media (min-width: 941px) { .s3v7-shell { display: grid; grid-template-columns: minmax(0, 296px) minmax(0, 1fr); gap: 0 52px; align-items: start; } .s3v7-tabs { display: block; overflow: visible; margin-inline: 0; padding: 0; border-left: 1px solid var(--fam-line-2); } .s3v7-tab { display: flex; width: 100%; padding: 13px 16px; margin-left: -1px; background: none; border: 0; border-left: 2px solid transparent; border-radius: 0; font-size: 14.5px; white-space: normal; } .s3v7-tab:hover { background: var(--fam-tint-2); border-left-color: var(--fam-line-2); } .s3v7-panels { margin-top: 0; padding: 0; border-top: 0; min-height: 380px; } } /* --- selected state. 9 x 3 selectors, generated rather than reasoned about --- */ #s3v7r1:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(1), #s3v7r2:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(2), #s3v7r3:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(3), #s3v7r4:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(4), #s3v7r5:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(5), #s3v7r6:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(6), #s3v7r7:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(7), #s3v7r8:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(8), #s3v7r9:checked ~ .s3v7-shell .s3v7-panel:nth-of-type(9) { display: block; } #s3v7r1:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(1), #s3v7r2:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(2), #s3v7r3:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(3), #s3v7r4:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(4), #s3v7r5:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(5), #s3v7r6:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(6), #s3v7r7:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(7), #s3v7r8:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(8), #s3v7r9:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(9) { background: var(--fam-700); border-color: var(--fam-700); color: #fff; } #s3v7r1:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(1) .n, #s3v7r2:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(2) .n, #s3v7r3:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(3) .n, #s3v7r4:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(4) .n, #s3v7r5:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(5) .n, #s3v7r6:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(6) .n, #s3v7r7:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(7) .n, #s3v7r8:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(8) .n, #s3v7r9:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(9) .n { color: rgba(255,255,255,.62); } #s3v7r1:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(1), #s3v7r2:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(2), #s3v7r3:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(3), #s3v7r4:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(4), #s3v7r5:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(5), #s3v7r6:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(6), #s3v7r7:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(7), #s3v7r8:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(8), #s3v7r9:focus-visible ~ .s3v7-shell .s3v7-tab:nth-of-type(9) { outline: 2px solid var(--fam-700); outline-offset: 2px; } /* on the desktop rail the selected tab reads as a lit edge, not a filled pill */ @media (min-width: 941px) { #s3v7r1:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(1), #s3v7r2:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(2), #s3v7r3:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(3), #s3v7r4:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(4), #s3v7r5:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(5), #s3v7r6:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(6), #s3v7r7:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(7), #s3v7r8:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(8), #s3v7r9:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(9) { background: var(--fam-tint); border-left-color: var(--fam-700); color: var(--fam-700); font-weight: 700; } #s3v7r1:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(1) .n, #s3v7r2:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(2) .n, #s3v7r3:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(3) .n, #s3v7r4:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(4) .n, #s3v7r5:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(5) .n, #s3v7r6:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(6) .n, #s3v7r7:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(7) .n, #s3v7r8:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(8) .n, #s3v7r9:checked ~ .s3v7-shell .s3v7-tab:nth-of-type(9) .n { color: var(--fam-700); } } /* ========================================================================== DESIGN 8 — SCRIMMED PANEL SPLIT -------------------------------------------------------------------------- The only variant carrying a photograph. A sticky scrimmed panel holds the heading, the lede and the count; the nine groups run down the right as compact ticked blocks. CAVEAT, and it is a real one: site/assets/images is generic stock whose filenames do not describe the contents, and the house rule for the Solutions family is gradient-led rather than photographic. ind-retail.jpg was opened and verified — a mall concourse, honestly on-topic for Customer Experience — but it would be filler under "What SAP BTP enables". The panel therefore reads correctly with the --img declaration REMOVED: the deep gradient underneath is the fallback, not a placeholder. Worst case, MEASURED: 1885px at 1440px and 3444px at 390px — second most expensive, and the panel is doing none of that work on a phone. ========================================================================== */ .s3v8-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; } @media (min-width: 1081px) { .s3v8-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 64px; align-items: start; } } .s3v8-panel { position: relative; overflow: hidden; /* media radius is 8px, not the 4px cards use; media shadow is the neutral 0 30px 60px rgba(0,0,0,.35). The SCRIM stays family --fam-900 — the token doc names that role explicitly ("deep band base, image scrims") and a gradient scrim is not a shadow. */ border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.35); padding: 32px 24px 30px; color: #fff; background: var(--img) center/cover no-repeat, var(--fam-grad-deep); } @media (min-width: 761px) { .s3v8-panel { padding: 40px 34px 36px; } } @media (min-width: 1081px) { .s3v8-panel { position: sticky; top: 112px; padding: 44px 36px 40px; } } /* a near-even wash rather than a side-lit one: the panel is narrow and the text runs its full width, so a directional scrim would drop the last line onto the bright part of the picture */ .s3v8-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(var(--fam-shadow-900), .80) 0%, rgba(var(--fam-shadow-900), .90) 52%, rgba(var(--fam-shadow-900), .96) 100%); } .s3v8-panel > * { position: relative; z-index: 1; } .s3v8-panel .s3-eyebrow { color: var(--fam-300); } .s3v8-panel .s3-h2 { color: #fff; font-size: clamp(26px, 6.4vw, 38px); } .s3v8-panel .s3-lede { color: var(--fam-200); font-size: 15.5px; max-width: none; } .s3v8-tally { display: flex; flex-wrap: wrap; gap: 22px 34px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); } /* the numerals themselves are the shared .s3-num / .s3-num-l pair above, so the counters read identically here and on the Design 6 statement tile */ .s3v8-tally .s3-num { font-size: 34px; } .s3v8-panel .s3-link-arrow { color: var(--fam-300); } .s3v8-panel .s3-link-arrow:hover { color: #fff; } .s3v8-group { padding: 20px 0 22px; border-bottom: 1px solid var(--c-line); } .s3v8-group:first-child { padding-top: 4px; } .s3v8-group h3 { margin: 0 0 13px; padding-left: 15px; position: relative; font-size: 17px; font-weight: 700; line-height: 1.32; letter-spacing: -.014em; color: var(--c-ink); } .s3v8-group h3::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; background: var(--fam-grad-deep); } .s3v8-group ul { display: grid; gap: 9px; padding-left: 15px; } @media (min-width: 561px) { .s3v8-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; } } @media (min-width: 761px) { .s3v8-group ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 30px; } } @media (min-width: 1081px) { .s3v8-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 34px; } } .s3v8-group li { position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--fam-ink-2); } .s3v8-group .ic { width: 17px; height: 17px; margin-top: 2px; background: var(--fam-grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l3.4 3.4L16 5.4' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4l3.4 3.4L16 5.4' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; } /* ========================================================================== DESIGN 9 — EDITORIAL COLUMNS [NOT SELECTED — not on the style contract] -------------------------------------------------------------------------- Multi-column FLOW rather than grid placement, with a rule between columns. The densest full-disclosure option in the set and the most print-like: a hanging numeral, a small-caps heading over a hairline, and bullets with no glyph at all — the indent does that work. Worth knowing before picking it: column balancing is the browser's call, so the three columns will not end level. That is what the device looks like; if it needs to be tidy, Design 1 is the grid answer. Worst case, MEASURED: 1245px at 1440px (three columns of three groups) and 2934px at 390px. Second cheapest of the eight that print everything. ========================================================================== */ .s3v9-flow { margin-top: 32px; } @media (min-width: 761px) { .s3v9-flow { columns: 2; column-gap: 44px; column-rule: 1px solid var(--fam-rule); margin-top: 44px; } } @media (min-width: 1081px) { .s3v9-flow { columns: 3; column-gap: 52px; } } .s3v9-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding-bottom: 26px; } .s3v9-group h3 { position: relative; margin: 0 0 11px; padding: 0 0 9px 30px; border-bottom: 1px solid var(--fam-line-2); font-size: 12.5px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; line-height: 1.45; color: var(--c-ink); } .s3v9-group h3 .n { position: absolute; left: 0; top: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--fam-700); } .s3v9-group ul { padding-left: 30px; } .s3v9-group li { font-size: 14px; line-height: 1.55; color: var(--fam-ink-3); padding-block: 2px; } /* only the first word carries the eye down a glyph-free list, so the rows get a touch more leading than the other variants rather than a marker */ .s3v9-group li + li { border-top: 1px solid var(--fam-rule-2); } /* ========================================================================== DESIGN 10 — CAPABILITY SPINE -------------------------------------------------------------------------- The one design that draws the section instead of listing it: a spine from the solution name down through nine capability nodes. Two nodes per row on desktop, so it costs about the same height as a card grid rather than the 1:1 timeline it looks like. Mobile keeps the spine but moves it to the left edge, which is where a vertical connector actually works on a 390px screen; the alternating desktop version would just be nine full-width cards with wasted margin. Worst case, MEASURED: 1584px at 1440px — less than the card grid, because two nodes share every row — and 3369px at 390px. The most expensive to keep ACCURATE rather than short: a spine is a claim about structure, so a page whose nine groups are not really parallel will look wrong here. ========================================================================== */ .s3v10 { background: var(--fam-tint-2); } .s3v10-cap { display: flex; justify-content: flex-start; margin-top: 34px; } @media (min-width: 941px) { .s3v10-cap { justify-content: center; margin-top: 46px; } } .s3v10-cap span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; color: #fff; background: var(--fam-grad-deep); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; } .s3v10-cap svg { width: 16px; height: 16px; flex: none; } .s3v10-spine { position: relative; margin-top: 0; padding-top: 26px; } /* mobile spine: hard left, behind the nodes */ .s3v10-spine::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 44px; width: 2px; background: linear-gradient(180deg, var(--fam-400) 0%, var(--fam-700) 55%, rgba(var(--fam-shadow), .12) 100%); } .s3v10-node { position: relative; padding: 0 0 18px 40px; } .s3v10-node::before { content: ""; position: absolute; left: 6px; top: 22px; z-index: 1; width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 2px solid var(--fam-700); } .s3v10-card { padding: 18px 18px 20px; background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius); transition: border-color .22s var(--ease), box-shadow .22s var(--ease); } /* home's .svc-card hover minus the translateY(-2px): the card is pinned to a spine dot that does NOT move, so lifting the card detaches it from its own node. Less motion than the contract allows, never more. */ .s3v10-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); } .s3v10-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.014em; color: var(--c-ink); } .s3v10-card h3 .n { flex: none; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--fam-700); } /* COLUMN FLOW, not a 2-col grid. The card is the narrowest surface in the set, so several capabilities wrap to two lines — and in a grid a two-line cell makes its whole ROW taller, punching a visible hole in the other column. Flowed columns have no row coupling, so the list stays tight. */ .s3v10-card ul { display: block; } @media (min-width: 561px) { .s3v10-card ul { columns: 2; column-gap: 22px; } } .s3v10-card li { position: relative; padding-left: 15px; margin-bottom: 8px; break-inside: avoid; -webkit-column-break-inside: avoid; font-size: 13.5px; line-height: 1.5; color: var(--fam-ink-2); } .s3v10-card li:last-child { margin-bottom: 0; } .s3v10-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 2px; background: var(--fam-grad); } @media (min-width: 941px) { /* two columns either side of a centred spine. The 80px column gap puts the spine exactly 40px from each card's inner edge, which is the connector length hard-coded below — change one and change both. */ .s3v10-spine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; row-gap: 22px; align-items: start; padding-top: 34px; } .s3v10-spine::before { left: 50%; transform: translateX(-1px); bottom: 24px; } .s3v10-node { padding: 0; } .s3v10-node::before { left: auto; top: 26px; } /* left column: dot and connector on the RIGHT of the card */ .s3v10-node:nth-child(odd)::before { right: -48px; } .s3v10-node:nth-child(even)::before { left: -48px; } .s3v10-node::after { content: ""; position: absolute; top: 33px; width: 34px; height: 2px; background: var(--fam-line-2); } .s3v10-node:nth-child(odd)::after { right: -34px; } .s3v10-node:nth-child(even)::after { left: -34px; } .s3v10-node:hover::before { border-color: var(--fam-700); background: var(--fam-700); } .s3v10-card { padding: 22px 22px 24px; } } @media (min-width: 1081px) { .s3v10-spine { column-gap: 96px; } .s3v10-node:nth-child(odd)::before { right: -56px; } .s3v10-node:nth-child(even)::before { left: -56px; } .s3v10-node::after { width: 42px; } .s3v10-node:nth-child(odd)::after { right: -42px; } .s3v10-node:nth-child(even)::after { left: -42px; } } /* styles.css already neutralises .reveal and main.js already short-circuits the count-up under reduced motion, so only the hover transitions need stating here. (.s3v2-row::after used to be listed too — that was the gradient hover wipe, removed when Design 2 was brought onto the home-page contract.) */ @media (prefers-reduced-motion: reduce) { .s3v1-card, .s3v3-pm, .s3v4-index a, .s3v10-card { transition: none; } }