/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/site-content.css */ /* ============================================== CONTENT PATTERNS — pikiner_sites The recurring shapes of the two sites' pages: an eyebrow above a heading, a trust line under a call to action, feature traits, cards, numbered process steps, panels, callouts and contextual link rows. These live in components/ rather than in a per-page file because the same shapes repeat across the pages of both sites — a numbered process appears on the home page and on the migration page alike. ============================================== */ /* ============================================== THE PAGE IS NORMAL FLOW, DELIBERATELY The page wrapper was a flex column, and that quietly doubled the rhythm of every page: the starter sets `.section { margin: var(--gb-section-gap) 0 }` and relies on adjacent margins collapsing to one gap, which is how the token comes out at the 80-160px the contract intends. Flex containers do not collapse margins, so each join became the sum of two — 300px of empty board between sheets against 48px of padding inside them, and the page read as islands. Nothing here needed flex: no gap, no ordering, no stretching child. If a future layout does need it, it takes the rhythm with it and must restate the gap itself. ============================================== */ /* ============================================== ONE AXIS PER SECTION A page of these two sites is a column of reading, and everything in a section — the header, the paragraphs, the steps, a criteria pair, a table — shares that column's edges. The starter's .section-content is --gb-content-max-width (1200px), a LAYOUT width that was doing duty as a reading one: paragraphs wrapped at their own measure against the left edge while anything with `margin: auto` sat centred in the full 1200, so a section had a text axis and a block axis that did not line up. The rule belongs here rather than in the starter. .section-content is the starter's class and every module renders sections with it — narrowing it there would squeeze any module whose sections need the full width (side-by-side code panels, card grids) into a reading column and make them overflow. This file is delivered only to the pages of this module, so the module's own decision reaches its own pages and nothing else, without a selector to confine it. Sections that need the page rather than the column ask with --wide. ============================================== */ .section-content:not(.section-content--wide) { max-width: var(--rh-sheet); } /* Running text keeps the measure inside the wider sheet, and keeps it on the left axis: a paragraph set to the full width of a wide sheet runs past the length a line can be and still be read comfortably. What is NOT constrained here is deliberate — a table, a card grid, a numbered sequence, a FAQ, a panel and a row of links are structures rather than prose, and they use the whole sheet they are given. Selected by the absence of a class, the same way the list indent is: a paragraph carrying a class has been given a job by another rule, and the two that are still prose — the callout and the trust line — are narrow by their own nature. */ .section-content > p:not(.site-links), .section-content > ul:not([class]), .section-content > ol:not([class]) { max-width: var(--gb-measure); } /* ============================================== RHYTHM OF RUNNING TEXT The starter's reset zeroes every margin, and the module had restored the vertical rhythm only inside the process steps and the cards. In the open body of a section — most of the text on both sites — paragraphs and lists ran on with no space between them at all: measured on the technology page, every

and