/* ========================================================================== SOLUTIONS SUB-PAGES — SECTION 4: "MODULES AND CAPABILITIES COVERED" SHORTLIST — designs 3, 4, 8, 9, 10 ========================================================================== Ten were designed; these five were chosen to rotate across the eleven Solutions pages. Numbering is deliberately NOT reflowed to 1-5 — the designs were reviewed as 3, 4, 8, 9 and 10 and every note, screenshot and conversation about them uses those numbers. Same convention the approved §2 set follows, which kept its gaps at 1, 2, 3, 5, 6. Preview-only. When these move into styles.css this file and its preview page are deleted. SCOPING Everything is namespaced .s4vN- (section 4, variant N) so this file can never reach a live page, and so parallel design sessions cannot collide. The only shared rules are the .s4- prefixed devices below (eyebrow, h2, lede, count, caption, link arrow, gradient numeral, product chip, product name list, dot list, footnote). Lifting a winner means taking that variant's block plus whichever .s4- devices it references — each block names them. Preview chrome is .s4-flag / .s4-label / .s4-note and is NOT part of any design. ------------------------------------------------------------------------ THE CONTENT PROBLEM THIS SECTION HAS ------------------------------------------------------------------------ §4 is the hardest of the five designed sections. Every variant below renders the SAP BTP §4 in full, which is the worst case in the reference set: 13 sub-modules 123 capability-scope bullets (7 to 12 per module) 33 named SAP products (0 to 7 per module) 8 trailing summary sentences S/4HANA, at the other end, has 6 sub-modules, no product lists at all and 8 to 11 bullets each. So a §4 layout has to survive a 2x swing in module count and a product block that is sometimes seven chips and sometimes absent entirely. Two structural consequences, applied throughout: - No layout may depend on a module count. No :nth-child(4n) mosaics that only resolve at 13, no fixed column heights, no "first three are big". Every grid below fills naturally at 6 and at 13. - The product block is optional markup. 4.13 Security, Identity, Governance and Operations has no named product, and the whole S/4HANA page has none — so no variant reserves space for it or draws a rule that only makes sense when it is there. The five chosen answer the volume three ways, and all of them print every word — the one variant that compressed (7, four bullets a tile plus a "+n more") was cut, so nothing here needs a destination page that does not exist yet: PRINT IT ALL 8, 9 the section is long and honest NAVIGATE IT 4 full print plus a persistent index DISCLOSE IT 3, 10 13 modules inside one screen Section heights at the 13-module worst case, desktop / 390px: 3 Disclosure accordion 1,676 / 2,268 px 4 Sticky module index 7,374 / 10,818 px <- tallest, known cost 8 Column flow 2,732 / 7,458 px 9 Sticky module bar 5,109 / 8,456 px 10 Module switchboard 988 / 1,221 px Design 4's height is the one open trade in this set. Its scope list is the only ruled one here (see .s4v4-scope); swapping it for the dotted column flow the other four use roughly halves the section and costs the table-like look. Left as chosen. ------------------------------------------------------------------------ THE BASE — index.html, not solutions.html ------------------------------------------------------------------------ Same contract the approved §2 set (sol-02-intro.css) was rebuilt on. The home page is calmer, squarer and greyer than the Solutions library: RADIUS var(--radius) = 4px. Media only gets 8px. Bento tiles get none at all. BORDERS neutral #c4c4c4 on cards, var(--c-line) on rules. NOT family-tinted — --fam-line appears nowhere in this file. SHADOWS neutral. 0 14px 30px rgba(20,20,40,.08) on cards. NEVER --fam-shadow. HOVER .22s and modest — border-color, translateY(-2px), and the arrow nudging translateX(4px). No wipes, no blooms, no sibling dimming, no sheen. MOTIF the 48x48 outlined box, as design 3's accordion toggle. The 60x60 .card-arrow went out with designs 2 and 6 — see the note above .s4-link for why none of the five re-adds it. GRADIENT held back — large numerals and thin accent rules only. Never a hover wipe. ROW LISTS .svc-cards--rows: no border, no radius, one var(--c-line) bottom rule; hover changes ONLY that rule's colour. The one substitution is var(--c-accent) -> var(--fam-700). Geometry, weights, shadows and timings are the home page's, unchanged. HOME-PAGE DNA, per variant .svc-cards--rows row list ....... 3 (summary rows), 4 (scope), 9 (bar) .card-arrow geometry ............ 3, at 48x48 as the toggle .why-glance-stat dark card ...... 10 (panel head) .g-num gradient numeral ......... 4, 8 .link-arrow ..................... 8, 9, 10 .services-tabs stacked tab list . 10, at >=941 eyebrow -> H2 -> lede rhythm .... all five WHAT THIS SET DOES NOT COVER All five are light, type-only and built from hairline rules plus the --fam-700 dot list; they differ by structure, not by skin. The dark band (5) and the card grid (2) were the only tonal alternatives and both were cut, so §4 has no lever for breaking the rhythm on a page that wants one — worth knowing when the hub page is composed. ------------------------------------------------------------------------ TYPE-ONLY, ON PURPOSE ------------------------------------------------------------------------ No variant uses a photograph. site/assets/images holds sixteen decorative stock files whose names do not describe their contents (svc-app.jpg is a baseball glove), and a capability index is the last place a decorative photo belongs — it would read as filler beside 123 factual bullets. With the deep band cut, the five here are type-only end to end: no --img layer anywhere, and the only non-white surface left is design 10's var(--c-dark) panel head. ------------------------------------------------------------------------ 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 a 390px viewport; every base rule below is sized against that number. Steps: 390 base · 561 · 761 · 941 · 1081 MOTION No .reveal in the preview — an invisible design cannot be reviewed. Add reveal / reveal-soft with data-delay steps of 60 at build time, on module wrappers only, never on individual bullets: 123 staggered bullets is a four-second wait to read a spec sheet. ========================================================================== */ /* ========================================================================== PREVIEW CHROME (not part of any design — do not lift) ========================================================================== Static, not sticky. The site header is position:fixed sitewide, and two designs below park sticky elements at top:var(--header-h); a second sticky bar of its own variable height above them would have to be measured, and measuring preview furniture is not worth a JS dependency. .s4-top is the spacer that keeps the flag out from under that fixed header. */ .s4-top { height: var(--header-h); } .s4-flag { background: #14141c; color: #fff; font-size: 13px; } .s4-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 11px; } .s4-flag b { font-weight: 700; } .s4-flag span { color: rgba(255,255,255,.62); } .s4-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 34px 8px; } .s4-label .container { display: flex; flex-direction: column; gap: 8px; } .s4-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; } .s4-label h2 b { color: var(--fam-700); font-weight: 800; } .s4-label p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--c-muted); max-width: 82ch; } .s4-label p b { color: var(--c-body); font-weight: 700; } .s4-label code { font-size: 13px; color: var(--fam-700); } .s4-label .s4-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; } .s4-label .s4-tags span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-body); background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 4px 8px; } .s4-label .s4-tags span.warn { color: #8a4a00; background: #fdf5ea; border-color: #f0dcc0; } .s4-note { background: var(--fam-tint); } .s4-note .container { padding-block: 40px; } .s4-note h3 { font-size: 17px; margin: 0 0 10px; color: var(--c-ink); } .s4-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 78ch; } .s4-note p + p { margin-top: 12px; } .s4-note b { color: var(--c-ink); } .s4-note code { color: var(--fam-700); } /* ========================================================================== SHARED DEVICES — the home page's type and motif, family-substituted ========================================================================== */ /* .services-title: 700 (not 900), line-height .98, -.025em. Stepped down from the home page's 64px cap because §4 sits deep inside a page under an H1 hero and an H2 at §2 and §3 — a third 64px heading would out-shout the two above it. */ .s4-h2 { font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0; letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance; } .s4-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fam-700); margin: 0 0 14px; } /* .svc-card p: 16px / 300 / 1.6 / #323232 */ .s4-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; max-width: 68ch; } .s4-lede b { font-weight: 600; color: var(--c-ink); } /* The volume readout. Present in every variant because the reviewer's first question about a §4 layout is "does it survive thirteen", and the answer should be on screen next to the design. tabular-nums so the three counts sit on a rhythm instead of jittering. */ .s4-count { margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .015em; color: var(--c-muted); font-variant-numeric: tabular-nums; } .s4-count b { color: var(--c-body); font-weight: 700; } /* the small uppercase label that names a block ("Relevant product", "Capability scope"). The reference docs use these as headings; at 11.5px uppercase they behave as captions instead of competing with the module title. */ .s4-cap { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 9px; } /* THE MOTIF — note where it went. The 60x60 .card-arrow box is NOT in this file any more. It lived on the module cards and the product mastheads, and neither survived the cut. Of the five here only design 3 carries the geometry, as .s4v3-tog: the same 48x48 outlined square at var(--radius) on a #c4c4c4 border with the same .22s border-colour transition, drawn as a plus because on an accordion it is genuinely the control rather than a signpost. The other four are descriptive content with nothing per-module to click, so an arrow box on them would have promised a destination that does not exist. .link-arrow below is what carries "this goes somewhere" in 8, 9 and 10. */ /* .link-arrow: 20px / 700 / accent, svg 18x16 nudging 4px. The home page's .link-arrow is margin-top:14px with no padding, which makes its hit box 24px — under the 44px this brief requires. Splitting the gap into 6px margin + 10px padding keeps the visible spacing at 16px and every visible value identical to the home page, and takes the target to 44px. Geometry unchanged; only the box you can hit grows. */ .s4-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding-block: 10px; color: var(--fam-700); font-weight: 700; font-size: 20px; line-height: 1.2; } .s4-link svg { width: 18px; height: 16px; transition: transform .2s var(--ease); } .s4-link:hover svg { transform: translateX(4px); } /* the small link is 15px/1.2 = 18px of text, which is not a tap target. The 13px block padding takes the hit box to 44px without opening a visible gap the way a min-height would. */ .s4-link--sm { font-size: 15px; margin-top: 4px; padding-block: 13px; } .s4-link--sm svg { width: 16px; height: 14px; } /* .g-num: gradient-clipped numerals — one of only two places the home page lets the gradient appear. Used only where the numeral is genuinely large (>=34px); at ledger size a gradient inside three glyphs just reads as a muddy colour, so those numerals are solid instead. */ .s4-num { display: block; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--fam-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* PRODUCT DEVICE A — outlined chips. The home page has no chip, so this is built from the parts it does have: a 1px #c4c4c4 border at var(--radius), the same edge a .svc-card carries. No fill, no --fam-chip tint — a tinted pill is the Solutions library. Chips wrap internally rather than overflow: "SAP Cloud Application Programming Model" is 39 characters and does not fit a 350px column on one line, and a two-line chip is a much smaller problem than a scrollbar. */ .s4-chips { display: flex; flex-wrap: wrap; gap: 8px; } .s4-chip { max-width: 100%; border: 1px solid #c4c4c4; border-radius: var(--radius); padding: 6px 11px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--c-ink); } /* PRODUCT DEVICE B — the stacked name list. Cheaper vertically than chips (no padding, no borders), which is what the narrow contexts need. Deliberately NOT the middot rail from the approved §2 design 1. That rail holds single words — "Integration · Extensions · Automation" — and never wraps mid-item. These are product names of up to 39 characters, so at 390px the rail wraps after almost every one and leaves the separator dangling at the end of the line, reading as a stray mark rather than a join. One proper noun per line has no such failure mode and is easier to scan besides. */ .s4-rail { display: grid; gap: 2px; margin: 0; } .s4-rail span { font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--c-body); } /* the trailing summary sentence some modules carry. A footnote, so it sits under a hairline and never at body weight — 8 of 13 modules have one and at 16px they would read as a second lede thirteen times over. */ .s4-fnote { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--c-line); font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--c-body); } /* ...except after a hairline-ruled scope list, which already closes with a rule of its own. Two hairlines 14px apart read as a mistake, not a break. Design 4 is the only one of the five whose scope is ruled rather than dotted, so it is the only exception left. */ .s4v4-mod > .s4-fnote { border-top: none; margin-top: 4px; padding-top: 10px; } /* SCOPE DEVICE — the dot list. styles.css marks list items with a 7px gradient square (.kcol li::before); at 123 bullets that is 123 gradients, so this is the same geometry in one flat --fam-700 step. 5px, 1px radius: square, like everything else on the home page. Spacing is margin, not grid gap, because every multi-column context below sets `columns` rather than `grid-template-columns`. A row-wise grid makes each row as tall as its tallest item, so a single two-line phrase — "Application-to-application integration" — opens a hole beside every one-line phrase sharing its row, and at 123 bullets that reads as sloppiness rather than rhythm. Column flow packs them exactly. The cost is that reading runs down-then-across, which costs nothing here: capability scope is an unordered set that is scanned, not read in sequence. */ .s4-dots { margin: 0; padding: 0; list-style: none; } .s4-dots li { position: relative; padding-left: 17px; margin-bottom: 9px; break-inside: avoid; -webkit-column-break-inside: avoid; font-size: 15px; font-weight: 300; line-height: 1.5; color: #323232; } .s4-dots li:last-child { margin-bottom: 0; } .s4-dots li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; border-radius: 1px; background: var(--fam-700); } /* ========================================================================== DESIGN 3 — DISCLOSURE ACCORDION ========================================================================== Thirteen modules inside one screen. Native
/, so there is zero JavaScript, the disclosure state is announced correctly by every screen reader, and it is keyboard-operable without a line of code. Deep links still work because the panels are in the DOM whether open or not. The 48x48 outlined box that .svc-cards--rows uses for its arrow becomes the toggle here — same geometry, same border, same .22s, and it is now honestly interactive rather than decorative. Rows are hairline-separated, as .svc-cards--rows rows are, and hover changes only the rule colour. Devices: .s4-chips .s4-cap .s4-dots .s4-fnote .s4-arrow--sm ========================================================================== */ .s4v3-list { margin-top: 28px; border-top: 1px solid var(--c-line); } .s4v3-item { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); } .s4v3-item > summary { list-style: none; cursor: pointer; } .s4v3-item > summary::-webkit-details-marker { display: none; } /* align-items:start, not center — a three-line title at 390px would park the numeral beside its second line. The numeral tracks the first line and the toggle re-centres itself against the whole row. */ .s4v3-sum { display: grid; grid-template-columns: 44px minmax(0,1fr) 48px; gap: 0 10px; align-items: start; min-height: 68px; padding: 14px 2px; margin: 0; font-size: inherit; font-weight: 400; } .s4v3-n { font-size: 15px; font-weight: 700; color: #b7b7c2; letter-spacing: -.01em; line-height: 1.5; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); } .s4v3-t { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--c-ink); } .s4v3-meta { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--c-muted); } /* the toggle: the row list's 48x48 arrow box, drawn as a plus. The vertical stroke is what rotates away when the panel opens — a 90deg rotation of the whole box would spin the horizontal stroke onto itself and read as noise. */ .s4v3-tog { justify-self: end; align-self: center; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #c4c4c4; border-radius: var(--radius); color: var(--fam-700); transition: border-color .22s var(--ease); } .s4v3-tog svg { width: 20px; height: 20px; } .s4v3-tog .v { transform-box: fill-box; transform-origin: center; transition: transform .22s var(--ease); } .s4v3-item[open] .s4v3-tog .v { transform: scaleY(0); } .s4v3-item[open] .s4v3-n { color: var(--fam-700); } .s4v3-panel { padding: 2px 2px 26px; } .s4v3-panel .s4-chips { margin-bottom: 20px; } @media (hover: hover) { .s4v3-item:hover { border-bottom-color: var(--fam-700); } .s4v3-item:hover .s4v3-n { color: var(--fam-700); } .s4v3-item:hover .s4v3-tog { border-color: var(--fam-700); } } .s4v3-item > summary:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; } @media (min-width: 561px) { .s4v3-panel .s4-dots { columns: 2; column-gap: 26px; } } @media (min-width: 761px) { .s4v3-sum { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 16px; } .s4v3-t { font-size: 20px; } .s4v3-n { font-size: 17px; } .s4v3-panel { padding: 2px 0 30px 72px; } } @media (min-width: 1081px) { .s4v3-panel .s4-dots { columns: 3; column-gap: 30px; } .s4v3-panel .s4-fnote { max-width: 92ch; } } /* ========================================================================== DESIGN 4 — STICKY MODULE INDEX ========================================================================== Prints everything, and adds the one thing a 13-module spec sheet actually needs: a persistent index. At >=941 the index is a sticky rail beside the stack; below that it is a plain two-column jump list above it, because a sticky rail on a phone is a rail that eats a third of the screen. The stack itself is deliberately plain — a large gradient numeral, a title, a product rail and a hairline scope list. All the structure is in the index; the body is just the document. Devices: .s4-num .s4-cap .s4-rail .s4-fnote .s4-link ========================================================================== */ .s4v4 { display: grid; gap: 30px; margin-top: 30px; } .s4v4-index { border-top: 1px solid var(--c-line); padding-top: 16px; } .s4v4-index ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin: 10px 0 0; padding: 0; counter-reset: none; } .s4v4-index a { display: flex; align-items: baseline; gap: 9px; min-height: 44px; padding: 6px 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--c-body); transition: color .22s var(--ease); } /* fixed 34px, not auto: "4.1" and "4.13" are different widths, and an auto column leaves every title in the list starting at a different x */ .s4v4-index a span:first-child { flex: 0 0 34px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); } @media (hover: hover) { .s4v4-index a:hover { color: var(--fam-700); } .s4v4-index a:hover span:first-child { color: var(--fam-700); } } .s4v4-index a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; } .s4v4-mod { padding: 26px 0; border-top: 1px solid var(--c-line); } .s4v4-mod:first-child { border-top: none; padding-top: 0; } .s4v4-mod .s4-num { font-size: 34px; margin-bottom: 10px; } .s4v4-mod h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 12px; } .s4v4-prod { margin-bottom: 18px; } .s4v4-scope { list-style: none; margin: 0; padding: 0; } .s4v4-scope li { padding: 11px 2px; font-size: 15px; font-weight: 300; line-height: 1.45; color: #323232; border-bottom: 1px solid var(--c-line); } .s4v4-scope li:first-child { border-top: 1px solid var(--c-line); } @media (min-width: 561px) { .s4v4-index ol { grid-template-columns: repeat(3, 1fr); } } /* This is the one scope list that stays a GRID rather than flowing in `columns`, because its items are separated by rules and rules have to line up across the gutter — column flow would stagger them. The cost is that a row is as tall as its tallest cell, so the split is held to TWO columns at every width: at three the cells are 252px, "Application-to-application integration" wraps, and every one-line neighbour gets a hole under it. Two columns is 400px a cell at the 1240 cap, where almost nothing wraps. Row-wise flow means items 1 and 2 are the top row, so both need the opening rule that :first-child alone was drawing. */ @media (min-width: 761px) { .s4v4-scope { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .s4v4-scope li:nth-child(-n+2) { border-top: 1px solid var(--c-line); } .s4v4-mod .s4-num { font-size: 40px; } .s4v4-mod h3 { font-size: 26px; } } @media (min-width: 941px) { .s4v4 { grid-template-columns: minmax(0,290px) minmax(0,1fr); gap: 56px; align-items: start; } .s4v4-index { position: sticky; top: calc(var(--header-h) + 24px); border-top: none; padding-top: 0; } .s4v4-index ol { grid-template-columns: 1fr; gap: 0; } .s4v4-index li { border-bottom: 1px solid var(--c-line); } .s4v4-index li:first-child { border-top: 1px solid var(--c-line); } /* 13px, not 11px: the rail rows drop min-height here, and at 11px a one-line entry is a 41px target. A 941px viewport is still a tablet in landscape. */ .s4v4-index a { min-height: 0; padding: 13px 2px; } .s4v4-mod { padding: 34px 0; } } @media (min-width: 1081px) { .s4v4 { grid-template-columns: minmax(0,310px) minmax(0,1fr); gap: 72px; } .s4v4-scope { column-gap: 48px; } } /* ========================================================================== DESIGN 8 — COLUMN FLOW ========================================================================== The only variant that uses flow instead of a grid. `columns` packs the thirteen uneven blocks by height rather than by row, so a 7-bullet module costs 7 bullets of page instead of leaving a hole beside a 12-bullet one. At 1240 it is the shortest always-open treatment here by a wide margin, and it does that without hiding a single word. The trade is reading order: columns run down-then-across, so 4.1 to 4.5 are in the left column and 4.6 follows at the top of the middle one. For an unordered reference list that is normal newspaper behaviour; for a numbered sequence it is a real cost, and it is why the numerals here are large and gradient-clipped — they have to be findable out of linear order. column-rule replaces the per-block border: one hairline between columns, the same var(--c-line) the home page rules everything with. Devices: .s4-num .s4-rail .s4-dots .s4-link ========================================================================== */ .s4v8-flow { margin-top: 30px; columns: 1; column-gap: 40px; column-rule: 1px solid var(--c-line); } .s4v8-mod { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding: 22px 0; border-top: 1px solid var(--c-line); } .s4v8-mod:first-child { border-top: none; padding-top: 0; } .s4v8-mod .s4-num { font-size: 34px; margin-bottom: 8px; } .s4v8-mod h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 10px; } .s4v8-prod { margin-bottom: 14px; } .s4v8-prod span { font-size: 13.5px; } .s4v8-mod .s4-dots li { font-size: 14.5px; } .s4v8-mod .s4-fnote { font-size: 13.5px; } @media (min-width: 761px) { .s4v8-flow { columns: 2; } /* in flow, "first child" is only the first block of the FIRST column, and the browser decides which those are — so every block keeps its top rule and the first one gets it back */ .s4v8-mod:first-child { border-top: 1px solid var(--c-line); padding-top: 22px; } } @media (min-width: 1081px) { .s4v8-flow { columns: 3; column-gap: 44px; } .s4v8-mod .s4-num { font-size: 38px; } } /* ========================================================================== DESIGN 9 — STICKY MODULE BAR ========================================================================== A scroll-through spec sheet. Each module's header bar sticks to the top of the viewport while that module's capabilities scroll past under it, then the next bar pushes it out — the pattern a long contacts list uses for its letter headings. With thirteen near-identically-shaped modules, always knowing which one you are inside is worth more than any decoration. The 2px var(--fam-700) top rule on each bar is the "thin accent rule" the home page allows; it also does the work a drop shadow would do, marking the stuck bar's edge without a shadow that would sit over the content. top: var(--header-h) parks the bar under the fixed site header. Nothing in this variant's ancestry may set overflow — a single overflow:hidden on any ancestor silently kills position:sticky, which is why the section wrapper below sets none. The bar carries the LEAD product only, never the full list: 4.6 names seven products, and a sticky bar that grows to four lines stops being a bar. The full product block sits in the body with the scope, where it can be as tall as it needs to be. Devices: .s4-chips .s4-cap .s4-dots .s4-fnote .s4-link ========================================================================== */ .s4v9 { margin-top: 30px; } .s4v9-mod { margin-bottom: 4px; } .s4v9-bar { position: sticky; top: var(--header-h); z-index: 5; background: #fff; border-top: 2px solid var(--fam-700); border-bottom: 1px solid var(--c-line); padding: 13px 2px 12px; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 0 10px; align-items: baseline; } .s4v9-n { font-size: 15px; font-weight: 700; color: var(--fam-700); font-variant-numeric: tabular-nums; } .s4v9-bar h3 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0; } /* hidden in the bar at phone widths. A two-line title plus a product line makes the bar 95px, and with the 84px fixed site header above it that is a quarter of a 716px viewport permanently spent on chrome. The product is repeated in the body chips two lines below, so nothing is lost — and at 761 it returns on the bar's right, where it costs no height at all. */ .s4v9-prod { display: none; grid-column: 2; margin: 4px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--c-muted); } .s4v9-body { padding: 20px 2px 30px; } .s4v9-body .s4-chips { margin-bottom: 22px; } @media (min-width: 561px) { .s4v9-body .s4-dots { columns: 2; column-gap: 26px; } } @media (min-width: 761px) { /* the third track is minmax(0,300px), NOT auto. With an `auto` track the browser sizes it from the item's max-content contribution, and a max-width on the item makes that resolution circular — it collapsed to near min-content and broke "API Management within SAP Integration Suite" across three lines, which took the sticky bar from 51px to 95px. 300px holds the longest lead product (42 characters at 13.5px ≈ 270px) on one line and hands everything left over to the title. */ .s4v9-bar { grid-template-columns: 56px minmax(0,1fr) minmax(0,300px); padding: 15px 2px 14px; } .s4v9-bar h3 { font-size: 20px; } .s4v9-n { font-size: 17px; } /* one line: the lead product moves to the right of the bar, where it reads as a caption rather than a second title */ .s4v9-prod { display: block; grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; text-align: right; } .s4v9-body { padding: 24px 2px 38px 56px; } } @media (min-width: 1081px) { .s4v9-body .s4-dots { columns: 3; column-gap: 30px; } } /* ========================================================================== DESIGN 10 — MODULE SWITCHBOARD ========================================================================== The tightest footprint here: thirteen modules in a fixed-height block, one panel at a time. Everything is in the DOM (crawlable, findable with ctrl-F on desktop browsers that search hidden text is NOT true, so this is the variant with the real SEO caveat — noted on the label, not buried). A proper ARIA tablist: roving tabindex, arrow keys, Home/End, aria-selected and aria-controls. ~30 lines of vanilla JS in the preview, no dependency. The rail is a wrapped grid of numbered chips on a phone — 13 chips at ~64px is three rows, versus a 13-item scroller that hides its own options — and a full-title vertical list from 941 up, which is where .services-tabs on the home page puts its tab column. The panel head is the .why-glance-stat device: var(--c-dark) fill, 4px radius, solid 3px accent bottom border. That is how the home page marks a block as "the one that matters right now", which is exactly the panel's job. Devices: .s4-chips .s4-cap .s4-dots .s4-fnote .s4-arrow--sm .s4-link ========================================================================== */ .s4v10 { display: grid; gap: 22px; margin-top: 30px; } .s4v10-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .s4v10-tab { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; text-align: center; border: 1px solid #c4c4c4; border-radius: var(--radius); background: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--c-body); font-variant-numeric: tabular-nums; transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease); } .s4v10-tab .t { display: none; } .s4v10-tab[aria-selected="true"] { border-color: var(--fam-700); color: #fff; background: var(--fam-700); } @media (hover: hover) { .s4v10-tab:hover { border-color: var(--fam-700); color: var(--fam-700); } .s4v10-tab[aria-selected="true"]:hover { color: #fff; } } .s4v10-tab:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; } .s4v10-panel[hidden] { display: none; } .s4v10-panel:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; } /* .why-glance-stat: --c-dark fill, 4px radius, solid 3px accent bottom rule */ .s4v10-head { background: var(--c-dark); border-radius: var(--radius); border-bottom: 3px solid var(--fam-700); padding: 20px 20px 18px; color: #fff; } .s4v10-hn { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fam-200); font-variant-numeric: tabular-nums; } .s4v10-head h3 { margin: 8px 0 0; font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -.015em; color: #fff; } .s4v10-head .s4-cap { color: rgba(255,255,255,.62); margin: 16px 0 9px; } .s4v10-head .s4-chip { border-color: rgba(255,255,255,.32); color: #fff; } .s4v10-body { padding-top: 22px; } @media (min-width: 761px) { .s4v10-rail { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } .s4v10-head { padding: 26px 26px 22px; } .s4v10-head h3 { font-size: 25px; } .s4v10-body .s4-dots { columns: 2; column-gap: 28px; } } @media (min-width: 941px) { .s4v10 { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 44px; align-items: start; } /* .services-tabs: a stacked list separated by var(--c-line), left-aligned, no boxes — the boxes were only ever the phone treatment */ .s4v10-rail { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); } .s4v10-tab { justify-content: flex-start; text-align: left; gap: 12px; min-height: 0; padding: 13px 4px; border: none; border-bottom: 1px solid var(--c-line); border-radius: 0; background: none; font-size: 15px; font-weight: 600; } .s4v10-tab .n { flex: 0 0 34px; color: #b7b7c2; transition: color .22s var(--ease); } .s4v10-tab .t { display: block; } .s4v10-tab[aria-selected="true"] { background: none; color: var(--c-ink); border-bottom-color: var(--fam-700); } .s4v10-tab[aria-selected="true"] .n { color: var(--fam-700); } .s4v10-tab:hover .n { color: var(--fam-700); } } @media (min-width: 1081px) { .s4v10-body .s4-dots { columns: 3; column-gap: 30px; } } /* ========================================================================== REDUCED MOTION ========================================================================== The home page's motion budget is already small — border colours and a 4px arrow nudge. With the card and masthead designs cut, no variant here lifts or slides at all: the only transforms left are the link arrow's 4px nudge and the accordion toggle's plus-to-minus. This removes both and leaves the colour changes, which arrive instantly. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .s4-link svg, .s4v3-item, .s4v3-n, .s4v3-tog, .s4v3-tog .v, .s4v4-index a, .s4v4-index a span:first-child, .s4v10-tab, .s4v10-tab .n { transition: none; } .s4-link svg { transform: none !important; } }