/* ========================================================================== SELECTSYS - COMPOSITION LAYER -------------------------------------------------------------------------- How sections USE the canvas. It sits after sx-legacy.css, which handles how things LOOK. Everything here is scoped to .sx-legacy, so a page opts in with the same flag it already uses, and nothing here touches the homepage or the operating model page, which are approved. The problems this fixes, all measured across the 104 pages linked from the header and footer at 1440px: 105 blocks of prose sat in a column roughly 620px wide, pinned to the left of a 1264px canvas, with 600px of nothing beside them. That is the reading-measure cap doing its job in a container that never centred the column it produced. 38 card rows ended with a single card alone on the left of an otherwise empty row. 99 pages mixed centred and left-aligned body copy inside one section, usually a left-aligned heading over a centred paragraph in the same card. The measure itself is not the bug. Long lines are harder to read, so the cap stays; what changes is that a capped column is now centred in its canvas instead of stranded at one edge. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PROSE COLUMNS CENTRE IN THEIR CANVAS Text stays left-aligned. It is the block that moves, not the words. -------------------------------------------------------------------------- */ @media (min-width:992px){ /* The measure cap is applied to the text; these rules move the capped block to the middle of whatever holds it. In a column that is already narrower than the measure, nothing moves. */ .sx-legacy .container > :is(p, ul, ol, dl, blockquote, .list-items), .sx-legacy [class*="col-"] > :is(p, ul, ol, dl, blockquote, .list-items), .sx-legacy section.hero .container > :is(h1, h2, p){ margin-inline:auto; } /* A section whose container holds one paragraph is a section lead, so it is set as one: a touch larger, centred, on a slightly tighter measure. */ .sx-legacy .container > p:only-child{ max-width:64ch; text-align:center; font-size:var(--sx-lead, 1.075rem); line-height:1.65; } /* A lone Bootstrap column is a column of one, so centre it rather than leaving the rest of the row empty. */ .sx-legacy .row > [class*="col-"]:only-child{ margin-inline:auto; float:none; } } /* -------------------------------------------------------------------------- 2. CARD ROWS DO NOT END WITH AN ORPHAN AT THE LEFT EDGE Bootstrap rows are flex containers, so centring the line balances a short final row. A full row is unaffected: its items already fill it. -------------------------------------------------------------------------- */ .sx-legacy .row:not(.g-0):not([class*="justify-content-"]){ justify-content:center; } /* Rows that are a deliberate split keep their edges. */ .sx-legacy .row.align-items-center > [class*="col-"]:not(:only-child){ margin-inline:0; } /* -------------------------------------------------------------------------- 3. ONE ALIGNMENT PER BLOCK A left-aligned heading followed by centred body copy inside the same card is the single most common reason a section reads as accidental. -------------------------------------------------------------------------- */ .sx-legacy .card.text-center :is(h2,h3,h4,h5).text-start ~ p, .sx-legacy .card.text-center :is(h2,h3,h4,h5).text-start + p, .sx-legacy .common-card.text-center :is(h2,h3,h4,h5).text-start + p{ text-align:left; } /* Stat tiles that are centred on purpose keep their centring: they have no left-aligned heading to disagree with. */ /* -------------------------------------------------------------------------- 4. EQUAL-HEIGHT CARDS IN A ROW Ragged card bottoms in a row of four is the other tell that a grid was never composed. Bootstrap already stretches columns; the card inside has to be told to fill the column it was given. -------------------------------------------------------------------------- */ .sx-legacy .row > [class*="col-"] > .card:only-child, .sx-legacy .row > [class*="col-"] > .common-card:only-child, .sx-legacy .row > [class*="col-"] > .pillar-card:only-child, .sx-legacy .row > [class*="col-"] > .testimonial-card:only-child, .sx-legacy .row > [class*="col-"] > .h-card:only-child{ height:100% !important; } /* a column that stacks several cards (a label over each logo card, say) keeps them content-height; only a lone card fills its column. */ /* -------------------------------------------------------------------------- 5. A PANEL THAT IS ALONE IN ITS ROW IS THE SECTION, SO GIVE IT THE CANVAS Measured across the 104 header/footer pages after rules 1-4: 546 sections still put their entire content in a 400-650px panel centred in a 1264px canvas, because the markup wraps it in col-lg-5 or col-lg-8 and the reading cap narrows it again. Centring stopped it being stranded; it did not stop it being a small box in a large space. A column that is the only column in its row is not one of several, so it takes the canvas, capped at 1100px so structured content stays readable. Running text inside keeps its own measure, which is what the cap is for. -------------------------------------------------------------------------- */ @media (min-width:992px){ /* The only column in its row, whether or not it has non-column siblings such as a trailing paragraph. :has does the sibling test; the :only-child rule below is the fallback where :has is unsupported. */ .sx-legacy .row:not(:has([class*="col-"] ~ [class*="col-"])) > [class*="col-"], .sx-legacy .row > [class*="col-"]:only-child{ flex:0 0 100% !important; max-width:min(1100px, 100%) !important; width:100%; } /* Bullet lists of short items in a wide panel read as a list, not a ribbon. A column width rather than a column count, so the same rule gives three columns in a full-width panel and two in a narrow one. */ .sx-legacy .common-card .list-items, .sx-legacy .common-card ul.list-unstyled{ columns:21rem; column-gap:48px; } .sx-legacy .common-card .list-items li, .sx-legacy .common-card ul.list-unstyled li{ break-inside:avoid; max-width:none; } } /* -------------------------------------------------------------------------- 6. MOBILE: THE HERO WORKFLOW STRIP STAYS A STRIP The Rate / Quote / Bind / Issue / Accounting diagram in the rating-family heroes was stacked into five full-width boxes at phone width, a screen and a half for five words. It stays a compact wrapping row of steps, with the arrows hidden; the sequence is still read left to right, top to bottom. -------------------------------------------------------------------------- */ @media (max-width:767px){ .sx-legacy .hero .right-section .workflow-process{ flex-direction:row !important; flex-wrap:wrap; justify-content:center; gap:10px !important; } .sx-legacy .hero .right-section .workflow-arrow{display:none !important} .sx-legacy .hero .right-section .workflow-step{ flex:0 0 calc(33.333% - 7px); max-width:calc(33.333% - 7px); margin:0 !important; } .sx-legacy .hero .right-section .workflow-step .icon-block{padding:14px 8px} .sx-legacy .hero .right-section .workflow-step .h5{font-size:14px} } /* -------------------------------------------------------------------------- 7. MOBILE: FOOTER LINK COLUMNS RUN TWO ACROSS Nine link groups became one very long single column at 390px, several screens of links before the copyright line. Two across halves that and keeps each group's heading with its links. -------------------------------------------------------------------------- */ /* (the Bootstrap-column footer rules that lived here were retired with the recomposed footer; .sx-footer carries its own phone layout) */ /* -------------------------------------------------------------------------- 8. LONG PLAIN LISTS FLOW INTO COLUMNS A sixteen-item bullet list in a wide column beside a three-item list read as one tall ribbon and one stub. Any plain list of eight or more items in a column at least two thirds of the canvas wide flows into two columns. -------------------------------------------------------------------------- */ @media (min-width:992px){ .sx-legacy :is(.col-md-8,.col-lg-8,.col-md-9,.col-lg-9,.col-md-12,.col-lg-12,.col-12) > ul:has(li:nth-child(8)), .sx-legacy :is(.col-md-8,.col-lg-8,.col-md-9,.col-lg-9,.col-md-12,.col-lg-12,.col-12) > ol:has(li:nth-child(8)){ columns:2;column-gap:48px; } .sx-legacy :is(.col-md-8,.col-lg-8,.col-md-9,.col-lg-9,.col-md-12,.col-lg-12,.col-12) > :is(ul,ol):has(li:nth-child(8)) > li{ break-inside:avoid; } } /* A lead-in paragraph that the markup placed inside the