/* ========================================================================== TEMPLATE — Industry page (/industry//, 31 pages) Markup: rebuild/templates/industry.html -------------------------------------------------------------------------- Everything here is built out of tokens.css and base.css. There is no new colour, no new radius, no new shadow and no new control geometry — the only values this file introduces are the three long-form prose tokens added at the foot of tokens.css (--br-prose-h2-*), and they are there because the home page has no long-form prose and therefore no rung for it. PROMOTION NOTE — read before building the second prose template. The brief for this template asked for a .br-industry__ prefix, so that is what every class below carries. But only ONE block in this file is actually about industries: §5, the cross-sell across to /insurance/. Everything else — the hero band, the breadcrumb, the prose element styles, the FAQ accordion, the closing slab — is the generic chassis every content page on this site needs, and the service / insurance / page / post templates will want it byte-for-byte. So when the second template lands, do NOT copy this file. Move §1–§4 and §6 into rebuild/css/templates/page.css under a .br-page__ prefix, leave §5 here, and have both templates link both stylesheets. The section headers below are marked SHARED or INDUSTRY-ONLY to make that a mechanical job. TWO THINGS §4 DOES NOT SURVIVE, and the industry pages will not tell you. All 31 bodies here are a FLAT run of block elements with a single h1 on the page. Counted across content/pages/, the other types are not: div 14 occurrences a body wrapped in one gets ONE gap for the article 20 occurrences wrapper and none between its children, because the flow rules below are `> * + *` and a child selector stops at the wrapper. h1 6 occurrences a body h1 gives the page two h1s and breaks the heading order the hero's h1 opens. Fix it in the EXTRACTOR, not here — unwrap a bare div/article, demote a body h1 to h2 — because both are export debris rather than authored structure, and a CSS workaround (descendant flow selectors, an h1 restyled to look like an h2) leaves the document wrong while making it look right. If a wrapper ever turns out to be load-bearing, widen the five flow selectors in §4 to `:is(.br-page__prose, .br-page__prose > div, .br-page__prose > article) > …` rather than dropping the child combinator, which would double every gap. ========================================================================== CONTENTS §1 SHARED page rhythm + the section-heading rung §2 SHARED hero band (photo or ink) §3 SHARED breadcrumb §4 SHARED prose — the full body vocabulary §5 INDUSTRY-ONLY cross-sell to /insurance/ §6 SHARED closing slab ========================================================================== */ /* ========================================================================== §1 PAGE RHYTHM (SHARED) Sections on a content page breathe at 3u, not the 2u .br-section uses. 2u is the home page's rhythm and the home page alternates full-bleed colour every band, so its sections are separated by surface as much as by space. A prose page runs white-on-white for most of its length and has to do the whole job with air. ========================================================================== */ .br-industry__section { padding-block: var(--br-flow-xl); } /* Section headings — "Frequently Asked Questions", "Commercial insurance services" — sit at the FULL h2 scale (45.46px at 1440), because that is exactly what they are: the same rung as "The Broad Risk difference" and "Commercial insurance services" on the signed-off home page. Headings INSIDE the article body are a different job and get their own, smaller rung — see §4. That is a deliberate split, not an inconsistency: one is page furniture, the other is a subhead inside a column of running text, and a 45px subhead every 150 words turns an article into a poster. Measured on the real content: hospitality has four body h2s, plumbers has eight; at the section rung "Why Hospitality Businesses Need Insurance:" sets three lines on its own. */ .br-industry__section-title { margin: 0 0 var(--br-flow-md); text-align: center; text-wrap: balance; } /* ========================================================================== §2 HERO (SHARED) One band, one code path, two outcomes. The generator sets --br-industry-hero-image inline when the page has a hero photograph. When it does not — one of the 31 industry pages ships an empty hero field, /industry/accounting/ — the custom property falls back to `none`, the image layer disappears, and what is left is the measured photo overlay painted over the ink surface: a flat ink slab, which is a treatment this design language already owns (see "Built for operational industries" on the home page). No modifier class, no second branch for the generator to get wrong on 31 pages. .br-on-photo is on the section and .br-on-dark on the inner column, in that nesting, because tokens.css keys the "photography is not an ink slab" gold ramp off `.br-on-photo .br-on-dark` — see tokens.css §.br-on-photo. On the one page with no photo that ramp is marginally the wrong choice (the CTA darkens on hover where a true ink slab lightens); on ink at #d6ac00 against #1f1902 that is still 8.6:1 and perfectly legible, and it is not worth a second placeholder for the generator to forget. ========================================================================== */ .br-industry__hero { background-color: var(--br-bg-dark); background-image: var(--br-photo-overlay), var(--br-industry-hero-image, none); background-repeat: no-repeat, no-repeat; background-size: auto, cover; background-position: 50% 50%, 50% 50%; } .br-industry__hero-inner { padding-block: var(--br-flow-xl); /* The column is centred and so is its text. The home page's own centred heads — the gold difference band, the dark industries block, "Speak directly with your broker" — are the precedent, and centring here is what puts the hero on the same vertical spine as the reading column below it. A left-aligned hero over a centred article is the one combination that reads as two different pages stapled together. Ordinary block flow, NOT a flex column with align-items:center. That was the first attempt and it is measurably wrong: a flex column shrink-to-fits every child to its own content, which resolved the button pair to a 352px box and wrapped two 200px pills onto two lines at 1440px. Block flow plus an auto inline margin on the capped children gives each one its full available width and keeps the pills on one row until they genuinely cannot fit. */ text-align: center; } .br-industry__title { margin: var(--br-flow-2xs) auto 0; /* The display utility paints headings in --br-text-heading, which goes gold on a dark surface — right for "Built for operational industries" inside the home page's ink block, wrong here. The signed-off hero over this exact photo treatment sets its headline WHITE (hero.css:150), and the page's one GOLD display heading is the closing slab in §6, which takes the same .br-display-md rung this h1 does. Two of them is gold as decoration; one is gold as accent. */ color: var(--br-text-strong); /* Same reason the home hero balances: at 390 a greedy wrap gives a long line followed by a stub, and these titles run from one word to seven. */ text-wrap: balance; /* DELIBERATE DEPARTURE FROM --br-display-lh (0.85). 0.85 is right on the home page and it is measured, but every display heading there is ART-DIRECTED: a human chose where "Commercial / insurance, / that works." breaks, and checked it. This h1 takes whatever Warren titled the page, so the leading has to survive a line ending in a descender directly above a line starting with an ascender. It does not, at 0.85. /industry/plumbers/ is titled "Plumbers Insurance Designed to Protect Your Trade" and the 'g' of "Designed" collides with the cap of "Protect" — visible at 1440, not marginal. Measured in Archivo 800 at the 58.51px this token resolves to at 1440, over the exact character set the 31 titles use (plain ASCII plus & - / ;): descender 11.54px, worst ascender 42.96px. Clearance by leading — 0.85 -4.76 collides 0.90 -1.84 collides 0.95 +1.09 clears 1.00 +4.01 clears comfortably 0.95 is the tightest value that clears every pairing these titles can produce, and it is close enough to 0.85 that the display voice survives. If a future title ever looks tight, this is the number to raise — the table above says what it buys. */ line-height: 0.95; /* 840px is .br-measure-wide, the wider of the two measured caps. Titles in this set run from "Hospitality" to "Plumbers Insurance Designed to Protect Your Trade", so the cap has to hold a long one without letting it stretch to the full 1240px container. */ max-width: var(--br-measure-wide); /* THE LONG-WORD GUARD. base.css turns break-word OFF for display type on purpose — a 105px word is MEANT to bleed on the home page, and that bleed is measured against the signed-off comp. Here the h1 is the page TITLE and nothing about it is art-directed, so a word that does not fit has to be made to fit rather than run under the edge. Real, not theoretical: /industry/telecommunications-services/ is titled "Telecommunications", which sets 431px of Archivo 800 at the 40.9px this token resolves to on a 390px phone, against 358px of usable width. It was the one page of 31 that failed the sweep. Because body carries overflow-x:hidden, the overspill is not scrollable — it is simply clipped away, which is the WCAG 1.4.4 failure base.css calls out. Two properties, layered, because one of them cannot be relied on: hyphens preferred. Breaks at a real syllable boundary ("Telecom-munications"). The 12/5/5 limits stop it hyphenating anything that already fits, which is the trap switching.css documents. overflow-wrap the guarantee. Fires only when a word cannot fit a line on its own, so it is inert everywhere else. Measured: headless Chromium ships no hyphenation dictionary, so `hyphens` is a no-op there at en-AU, en-GB, en-US and en alike (checked, all four). break-word is what actually resolves the page in the sweep — 2 lines, 355px widest against a 358px box. Where a dictionary IS present the hyphenation break wins and break-word never runs. */ hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; } .br-industry__lead { margin: var(--br-flow-xs) auto 0; max-width: var(--br-measure); color: var(--br-text); text-wrap: pretty; } .br-industry__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--br-space-3) var(--br-space-4); margin-top: var(--br-flow-sm); } /* At 320 and below two pills side by side cannot both hold their 200px minimum, so they stack full-width rather than shrink below the touch target base.css defends. */ @media (max-width: 400px) { .br-industry__actions { flex-direction: column; } .br-industry__actions > .br-btn { width: 100%; } } /* ========================================================================== §3 BREADCRUMB (SHARED) /industry/hospitality-industry/ is three levels down and nothing else on the page says where it sits. The separator is a real element carrying aria-hidden rather than CSS generated content, because several screen readers do announce ::before content and "slash" between every crumb is noise. ONE LINE, ALWAYS. A trail that wraps does two things wrong at once, both measured on /industry/plumbers/ at 390 before this rule existed: the trailing separator is left orphaned at the end of line one, and the current page's name — 49 characters of it — takes the whole of line two at nearly container width, word for word identical to the h1 immediately beneath it. Two defences, and the page needs both: the generator passes {{crumb_label}}, the title with its SEO scaffolding removed — "Plumbers", not "Plumbers Insurance Designed to Protect Your Trade". Measured across all 31: longest is "Medical / Allied Health", 23 characters. the stylesheet caps the current crumb at 24ch and ellipsises past it, so a generator that forgets, or a page type with a genuinely long name, still cannot break the trail. ========================================================================== */ .br-industry__crumbs { width: 100%; } .br-industry__crumbs-list { display: flex; /* nowrap, not wrap — with the current crumb allowed to shrink (below) there is never a second line to orphan a separator onto, and never a horizontal scroll either: the one item that can overflow is the one that ellipsises. */ flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: var(--br-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--br-body-sm-size); line-height: var(--br-body-sm-lh); letter-spacing: var(--br-body-sm-ls); color: var(--br-text-muted); } .br-industry__crumb-link, .br-industry__crumb-sep { /* Short, and they say where you are — they do not shrink. Only the current crumb does. */ flex: 0 0 auto; } .br-industry__crumb-link { color: var(--br-text); font-weight: var(--br-weight-medium); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 1px; border-radius: var(--br-radius-xs); transition: color var(--br-dur) var(--br-ease), text-decoration-color var(--br-dur) var(--br-ease); /* The row of type is 17px tall, which is the house standard for a text link — the home page's own services links measure the same — but a crumb is a NAVIGATION target on a phone, and 17px is under the 24px WCAG 2.5.8 asks of one. Padding grows the hit box and the focus ring to ~33px; the equal negative margin means the line box, and therefore the layout, does not move by a pixel. Vertical margins do not apply to an inline box, so this pair is inert on the row and only the padding is felt. */ padding-block: var(--br-space-2); margin-block: calc(var(--br-space-2) * -1); } .br-industry__crumb-link:hover { color: var(--br-text-strong); text-decoration-color: currentColor; } .br-industry__crumb-sep { color: var(--br-text-muted); } /* The current page is not a link. It is still named, so the trail reads correctly, but it is the quietest thing in the row — and the only part of it allowed to give way. min-width:0 is what lets a flex item shrink below its own content; without it the ellipsis never fires and the row overflows instead. */ .br-industry__crumb-current { color: var(--br-text-muted); flex: 0 1 auto; min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== §4 PROSE (SHARED) {{body}} arrives as cleaned semantic HTML with no classes on it, so every rule here is an element selector scoped to the column. The whole vocabulary the extractor emits across the site is covered, not just the subset the industry pages happen to use today: p h2 h3 h4 ul/ol/li strong em a hr figure/img/figcaption blockquote details/summary table Industry bodies use p, h2, h3, ul/li, strong, em and a. The rest is here because this block is going to be shared with the post and page templates (56 figures, 11 ordered lists, 45 accordions and 6 blockquotes live in those), and because a template that only styles what its own 31 pages contain is a template that breaks the first time content changes. `br` is deliberately NOT on that list. It is resolved before it reaches the column — scripts/lib/normalise-body.mjs turns `

` into real paragraphs, drops spacer breaks and collapses editor line-wraps to spaces — because the defect it caused was a RHYTHM one, and CSS cannot fix that honestly. `br + br { display: none }` would have collapsed a 26px blank line to nothing where the author meant a paragraph break. The breaks that survive normalisation are the ones the author meant, and a line break needs no styling to break a line. ========================================================================== */ .br-industry__prose { /* --br-measure-prose (680px), not --br-measure (604px). 604 is the home page's cap and it is measured, but what it was measured on is a centred intro paragraph and a centred heading block — display objects, where a narrow column is a composition choice. This is running text, and at the 18px this scale resolves to, 604px sets 62 characters a line: under the 65–75 band, and six short of what this comment used to claim. 680 is the third measure tokens.css derives for exactly this job and lands at ~70. The token, not a local number — see the note at tokens.css:815. Centred, because a single reading column pinned to the left edge of a 1240px container puts 560px of nothing beside every paragraph — the home page never leaves a hole that size; it always fills it with a photo or a colour block, and there is nothing here to fill it with. */ max-width: var(--br-measure-prose); margin-inline: auto; color: var(--br-text); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); } /* -- flow ----------------------------------------------------------------- One default gap between siblings, then the exceptions. Everything is expressed in the shared fluid unit, so the article breathes on the same rhythm as the rest of the page instead of on a private scale. -------------------------------------------------------------------------- */ .br-industry__prose > * { margin-block: 0; } .br-industry__prose > * + * { margin-top: var(--br-flow-xs); } .br-industry__prose > h2 { margin-top: var(--br-flow-md); } .br-industry__prose > h3, .br-industry__prose > h4 { margin-top: var(--br-flow-sm); } .br-industry__prose > :is(h2, h3, h4) + * { margin-top: var(--br-flow-3xs); } .br-industry__prose > :first-child { margin-top: 0; } /* The extractor leaves a trailing empty paragraph on some pages (/industry/accounting/ ends with one). Rendered, it is an invisible 26px of extra space under the last list — enough to make the section padding look wrong on exactly one page in 31. */ .br-industry__prose > p:empty { display: none; } /* -- headings -------------------------------------------------------------- */ .br-industry__prose :is(h2, h3, h4) { color: var(--br-text-heading); text-wrap: balance; /* The header is sticky from 768 up, so an in-page anchor would otherwise land its target underneath the bar. */ scroll-margin-top: calc(var(--br-nav-h-desktop) + var(--br-space-6)); } /* The long-form rung. See the note on .br-industry__section-title in §1 for why this is not the full h2 scale, and the foot of tokens.css for the token itself. */ .br-industry__prose h2 { font-size: var(--br-prose-h2-size); line-height: var(--br-prose-h2-lh); letter-spacing: var(--br-prose-h2-ls); font-weight: var(--br-heading-weight); } /* h3 and h4 need no override — the base scale is already the right step down from the prose h2 (24.6px and 19.6px against 34px at 1440), and using the shared tokens keeps the article on the same ramp as the rest of the site. */ /* -- body text ------------------------------------------------------------- */ /* The opening paragraph carries the article in. Same .br-lead treatment the home page gives the first line of every section, straight off the token. */ .br-industry__prose > p:first-child { font-size: var(--br-body-lg-size); line-height: var(--br-body-lg-lh); letter-spacing: var(--br-body-lg-ls); } /* Inline links inside running copy. This MIRRORS .br-link in base.css (§6, line 740) — the body HTML has no classes on it, so the treatment has to be reachable by element selector. Keep the two in sync; if .br-link is ever re-measured, this changes with it. The .br-link class is also honoured, so a generator that does add the class gets the same result either way. */ .br-industry__prose :is(p, li, td, th, blockquote, figcaption) a, .br-industry__prose a.br-link { color: var(--br-text-strong); font-weight: var(--br-weight-semibold); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; border-radius: var(--br-radius-xs); transition: color var(--br-dur) var(--br-ease), text-decoration-color var(--br-dur) var(--br-ease); } .br-industry__prose :is(p, li, td, th, blockquote, figcaption) a:hover, .br-industry__prose a.br-link:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; } .br-industry__prose :is(p, li, td, th, blockquote, figcaption) a:active, .br-industry__prose a.br-link:active { color: var(--br-ink-active); } .br-industry__prose em { font-style: italic; } /* -- lists ---------------------------------------------------------------- 391 list items across the 31 industry pages — two thirds of this content is a list, so this is the block that decides whether the template works. The marker stays a NATIVE marker, restyled with ::marker rather than replaced with a pseudo-element on a list-style:none list. That is not fussiness: Safari + VoiceOver stops announcing "list, 5 items" the moment a ul loses its list-style, and {{body}} arrives without classes or ARIA on it so there is no role="list" to put the semantics back with. The marker colour is --br-text-accent, which is #8a6d00 on a light surface — the same gold the eyebrow uses, and 6.4:1 against white. Brand gold itself (#f1c305) is 1.7:1 there and would be a marker you cannot see. -------------------------------------------------------------------------- */ /* The marker is drawn OUTSIDE the content box, so this padding is what stops it hanging into the page gutter. 1u clears a disc and a two-digit ordinal at every size on the ramp. */ .br-industry__prose :is(ul, ol) { padding-left: var(--br-flow-sm); } .br-industry__prose li + li { margin-top: var(--br-flow-3xs); } .br-industry__prose li::marker { color: var(--br-text-accent); } .br-industry__prose ol > li::marker { font-weight: var(--br-weight-semibold); } /* Nested lists tighten rather than repeat the full gap. */ .br-industry__prose li > :is(ul, ol) { margin-top: var(--br-flow-3xs); } /* -- figures --------------------------------------------------------------- */ .br-industry__prose :is(img, video, iframe) { display: block; max-width: 100%; height: auto; border-radius: var(--br-radius-md); } .br-industry__prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; } .br-industry__prose figure { margin-top: var(--br-flow-sm); } .br-industry__prose figcaption { margin-top: var(--br-space-3); font-size: var(--br-body-sm-size); line-height: var(--br-body-sm-lh); letter-spacing: var(--br-body-sm-ls); color: var(--br-text-muted); } /* -- blockquote ------------------------------------------------------------ */ .br-industry__prose blockquote { margin-top: var(--br-flow-sm); padding-left: var(--br-flow-xs); border-left: 3px solid var(--br-gold); color: var(--br-text-strong); font-size: var(--br-body-lg-size); line-height: var(--br-body-lg-lh); letter-spacing: var(--br-body-lg-ls); } .br-industry__prose blockquote > * + * { margin-top: var(--br-flow-3xs); } /* -- rule ------------------------------------------------------------------ */ .br-industry__prose hr { margin-block: var(--br-flow-md); border: 0; border-top: 1px solid var(--br-border); } /* -- table ---------------------------------------------------------------- No page in the current export ships one. It is here so that the first one that does is legible instead of unstyled. A table wider than the 604px column has to scroll inside its own box rather than push the page sideways. That needs a wrapper, and {{body}} arrives without one — so the wrapper is the generator's job and this is the class to use:
…
The obvious CSS-only alternative — `table { display: block; overflow-x: auto }` — is deliberately NOT used: display:block strips the table role in Safari + VoiceOver, so it trades a layout problem for a semantics one. -------------------------------------------------------------------------- */ .br-industry__scroller { overflow-x: auto; /* Keeps the focus ring on anything inside from being clipped by the scroll box, and gives a keyboard user something to scroll with. */ padding-block: var(--br-space-1); } .br-industry__prose :is(table) { width: 100%; border-collapse: collapse; font-size: var(--br-body-sm-size); line-height: var(--br-body-sm-lh); } .br-industry__prose :is(th, td) { padding: var(--br-space-3) var(--br-space-4); border-bottom: 1px solid var(--br-border); text-align: left; vertical-align: top; } .br-industry__prose th { color: var(--br-text-strong); font-weight: var(--br-weight-semibold); } /* ========================================================================== §4b ACCORDION (SHARED) Every one of the 31 live industry pages carries a "Frequently Asked Questions" block; 45 more accordions live in the page type. Native
/, so it opens, closes and takes Enter/Space with no JavaScript, gets its focus ring from base.css, and needs no ARIA bolted on. The same rules apply to a
that arrives inside {{body}} and to the ones the generator emits into {{faq}} — one selector list, both cases. ========================================================================== */ .br-industry__faq-list, .br-industry__prose details { border-top: 1px solid var(--br-border); } .br-industry__faq-item, .br-industry__prose details { border-bottom: 1px solid var(--br-border); } .br-industry__faq-item + .br-industry__faq-item { border-top: 0; } .br-industry__prose details + details { border-top: 0; } /* Stacked flush, sharing one hairline — which is what the rule above is FOR, and what §4's `> * + *` was quietly undoing: an accordion that arrives inside {{body}} was taking the standard 18.77px sibling gap, so the same page could run two different accordion rhythms depending on whether the generator emitted the item or the author did. No industry body carries a
today; the 45 accordions in the page type do. */ .br-industry__prose > details + details { margin-top: 0; } .br-industry__faq-item > summary, .br-industry__prose details > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--br-space-4); padding-block: var(--br-flow-xs); cursor: pointer; color: var(--br-text-heading); font-size: var(--br-body-lg-size); line-height: var(--br-body-lg-lh); letter-spacing: var(--br-body-lg-ls); font-weight: var(--br-heading-weight); text-wrap: pretty; scroll-margin-top: calc(var(--br-nav-h-desktop) + var(--br-space-6)); /* Both are needed: the standard property, and the WebKit pseudo Safari still uses. Without them the row carries a native triangle as well as the chevron below. */ list-style: none; } .br-industry__faq-item > summary::-webkit-details-marker, .br-industry__prose details > summary::-webkit-details-marker { display: none; } /* THE QUESTION IS A REAL HEADING. His page writes each question as an h3, and so does the generator, inside the — an h2 section heading above, h3 questions under it, no level skipped, and the block reachable by heading navigation instead of only by reading every row. A announces as a disclosure control and nothing else, so without this element there is no route to a question for anyone moving by heading. Purely an outline change: the h3 takes the summary's own type, which the rule above already sets, so nothing moves by a pixel. `font` shorthand rather than four longhands because it also clears the browser's h3 margins in the same declaration. It is a flex item of the summary row — the chevron's `flex: 0 0 auto` and `space-between` still put the mark at the end, and `min-width: 0` lets a long question wrap rather than push it. */ .br-industry__faq-item > summary > h3, .br-industry__prose details > summary > h3 { margin: 0; min-width: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; } /* Chevron. Drawn from two borders rather than shipped as an SVG, because a
arriving inside {{body}} has no place to put an icon — the rule has to work on markup this template does not author. currentColor keeps it correct in forced-colors mode. */ .br-industry__faq-item > summary::after, .br-industry__prose details > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.4em; border-right: var(--br-icon-stroke) solid currentColor; border-bottom: var(--br-icon-stroke) solid currentColor; transform: rotate(45deg); transform-origin: 60% 60%; transition: transform var(--br-dur) var(--br-ease); } .br-industry__faq-item[open] > summary::after, .br-industry__prose details[open] > summary::after { transform: rotate(-135deg); } @media (prefers-reduced-motion: reduce) { .br-industry__faq-item > summary::after, .br-industry__prose details > summary::after { transition: none; } } .br-industry__faq-item > summary:hover { color: var(--br-text-strong); } .br-industry__faq-answer, .br-industry__prose details > :not(summary) { color: var(--br-text); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); } /* The bottom gap belongs to the LAST child, not to every one of them — an answer of three paragraphs was otherwise paying it three times. */ .br-industry__faq-item > :last-child, .br-industry__prose details > :not(summary):last-child { padding-bottom: var(--br-flow-xs); } .br-industry__faq-answer > * + *, .br-industry__prose details > summary ~ * + * { margin-top: var(--br-flow-xs); } /* The FAQ block is optional. Rather than make the generator branch, the section removes itself when it holds no items. */ .br-industry__faq:not(:has(.br-industry__faq-item)) { display: none; } /* The same column the article runs in, not the narrower display one. The two blocks sit on the same white surface with 84px between them, and the FAQ's hairlines DRAW the width they are set to — a rule stopping 38px short of the paragraph edge above it is the kind of thing you cannot unsee. One reading column down the page. */ .br-industry__faq-list { max-width: var(--br-measure-prose); margin-inline: auto; } /* ========================================================================== §5 CROSS-SELL TO /insurance/ (INDUSTRY-ONLY) This is the one block that is genuinely about industries. A service page links its siblings; an industry page has no useful siblings — a plumber does not want a list of other trades — so it links ACROSS to the covers that trade needs. Visually it is the home page's "Commercial insurance services" grid: gold disc, hand-drawn tick, underlined semibold label. Same component, fewer parts — the three filter chips are a home-page affordance for twelve generic covers, and a per-industry list of six does not need filtering. Three columns from 992 up rather than the home page's four. The home grid holds a fixed twelve, which is 4x3 exactly; this one holds whatever the generator selects for that industry, and at three columns 4/5/6/7/8/9 items all land without a single orphan in the last row. ========================================================================== */ .br-industry__covers { background: var(--br-bg-band); } .br-industry__covers-list { display: grid; grid-template-columns: 1fr; gap: var(--br-flow-2xs) var(--br-flow-md); margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .br-industry__covers-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .br-industry__covers-list { grid-template-columns: repeat(3, 1fr); } } .br-industry__cover { display: flex; align-items: center; gap: var(--br-space-3); /* the home grid's measured 12 */ padding-block: var(--br-space-2); /* Containing block for the row-wide hit area below. */ position: relative; } .br-industry__cover-badge { /* .br-icon-circle--gold drops the system hairline; the home page's own services badge restores it, so this one does too — same disc, same page. */ box-shadow: var(--br-ring-hairline); } .br-industry__cover-link { color: var(--br-text-strong); font-weight: var(--br-weight-semibold); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; border-radius: var(--br-radius-xs); transition: color var(--br-dur) var(--br-ease), text-decoration-thickness var(--br-dur) var(--br-ease); } /* The whole row is the target, not the six words in it. */ .br-industry__cover-link::after { content: ""; position: absolute; inset: 0; } .br-industry__cover:hover .br-industry__cover-link { color: var(--br-ink-hover); text-decoration-thickness: 2px; } /* Ring the row, not the inline box — otherwise a label that wraps to two lines gets two fragments of ring around two fragments of text. */ .br-industry__cover-link:focus-visible { outline: none; } .br-industry__cover:has(.br-industry__cover-link:focus-visible) { outline: 2px solid var(--br-focus); outline-offset: var(--br-space-1); border-radius: var(--br-radius-xs); } @supports not (selector(:has(*))) { .br-industry__cover-link:focus-visible { outline: 2px solid var(--br-focus); outline-offset: 2px; } } .br-industry__covers-foot { display: flex; justify-content: center; margin-top: var(--br-flow-md); } /* Same self-removal as the FAQ: no covers selected, no band. */ .br-industry__covers:not(:has(.br-industry__cover)) { display: none; } /* ========================================================================== §6 CLOSING SLAB (SHARED) The home page closes on an ink panel with the biggest type on the site and one button. This is that panel at the interior-page scale: the same rounded ink slab, the same gold-on-ink heading, the two CTAs the hero opened with. Every string in it is Broad Risk's own signed-off copy. "The biggest type on the page" is not decoration on the home page, it is the whole component — .br-meet__title is Archivo 800 at 105.43px (--br-display-xl). Set in Inter at the 45.46px section rung, this slab was the home page's panel with the one thing that makes it a panel removed: a heading that happened to be gold rather than the page's crescendo, and quieter than the h1 four sections above it. The heading now carries .br-display-md — the same rung the h1 takes, and the only display step below the home page's 105px. Gold comes from the utility's own --br-text-heading under .br-on-dark, which computes the same #f1c305 the home slab does. ========================================================================== */ .br-industry__close-slab { border-radius: var(--br-radius-xl); background: var(--br-bg-dark); padding: var(--br-flow-lg) var(--br-flow-sm); /* Block flow, for the same measured reason as the hero — see the note on .br-industry__hero-inner. */ text-align: center; } @media (min-width: 768px) { .br-industry__close-slab { padding: var(--br-flow-xl) var(--br-flow-lg); } } .br-industry__close-title { margin: 0 auto; /* 840, the same cap the h1 takes and the same one the home slab's heading takes. At 604 this string breaks "Meet cover without / the runaround" and the panel reads narrower than the article above it. */ max-width: var(--br-measure-wide); /* .br-display-md sets `text-wrap: initial`, because display headings on the home page are art-directed and a human chose where they break. This one is art-directed too — it is one fixed sentence, the same one the home page closes on — but it has to hold that break at every width between 320 and 1920 rather than at the one the comp was cut at. Balanced, like the h1, for the same reason. */ text-wrap: balance; } .br-industry__close-sub { margin: var(--br-flow-xs) auto 0; max-width: var(--br-measure); color: var(--br-text); text-wrap: pretty; } .br-industry__close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--br-space-3) var(--br-space-4); margin-top: var(--br-flow-sm); } @media (max-width: 400px) { .br-industry__close-actions { flex-direction: column; } .br-industry__close-actions > .br-btn { width: 100%; } } /* ========================================================================== §7 THE OTHER INDUSTRIES (INDUSTRY-ONLY) NOT §5 IN A SECOND COLOUR. §5's note stands: a plumber does not want a gold-disc checklist of other trades, and this is not one. It is the page's index out to the rest of its section — the same job, the same position and the same register as .br-service__more at the foot of every cover page. It exists because /industry/ stopped listing anything when "The complete list" came out on Warren's review, and that band was the only internal link to 22 of the 31 industry pages. This is where those links went. QUIETER THAN EVERY OTHER BAND ON THE PAGE, on purpose. It sits BELOW the closing slab, which is the page's crescendo, so anything with weight here would be an anticlimax competing with the two CTAs directly above it. The links take .br-footer__link's treatment — regular weight, no rest-state underline, underline on hover and focus — because that is this system's existing answer for "a column of links you scan, not prose you read", and the footer sits directly below this block wearing it. COLUMN STEPS ARE .br-service__cover-list's, one step earlier at the top. Those labels are Warren's page TITLES and the longest is 41 characters, so that grid holds 3-up until 1200. These are crumbLabel() output — the trade name with the SEO scaffolding stripped — and the longest of the 31 is 23 ("Medical / Allied Health"), which clears a 4-up column from 992 without wrapping. Measured at 320 / 390 / 576 / 768 / 992 / 1200 / 1440 / 1920: no label wraps, no row falls under WCAG 2.5.5's 44px, and the document never grows wider than the viewport. IT IS SMALLER THAN THE BLOCK IT MIRRORS, at every one of those widths, on 30 items against 22 — 1890px vs 2034 at 390, 719 vs 746 at 1440. That is the plain-link register doing its job: this band adds less to the page than the one every cover page has carried since the rebuild landed. ========================================================================== */ .br-industry__more { background: var(--br-bg-band); } .br-industry__more-list { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--br-space-2) var(--br-space-7); margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .br-industry__more-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .br-industry__more-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .br-industry__more-list { grid-template-columns: repeat(4, 1fr); } } .br-industry__more-item { /* Containing block for the row-wide hit area below. */ position: relative; /* WCAG 2.5.5. The label is a 24px line box; the padding takes the row past 44 so the target is the row, not the one or two words in it. */ padding-block: var(--br-space-3); } .br-industry__more-link { display: inline-block; color: var(--br-text-strong); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); font-weight: var(--br-weight-regular); text-decoration: none; border-radius: var(--br-radius-xs); transition: color var(--br-dur) var(--br-ease); } /* The whole row is the target. */ .br-industry__more-link::after { content: ""; position: absolute; inset: 0; } .br-industry__more-item:hover .br-industry__more-link { color: var(--br-ink-hover); text-decoration: underline; text-underline-offset: 0.3em; } /* Ring the row, not the inline box — same reason .br-industry__cover-link does it: a label that wraps to two lines would otherwise get two fragments of ring around two fragments of text. */ .br-industry__more-link:focus-visible { outline: none; } .br-industry__more-item:has(.br-industry__more-link:focus-visible) { outline: 2px solid var(--br-focus); outline-offset: var(--br-space-1); border-radius: var(--br-radius-xs); } /* The ring says "selected"; the underline says "this is a link". Same pairing .br-footer__link makes, for the same reason. */ .br-industry__more-item:has(.br-industry__more-link:focus-visible) .br-industry__more-link { color: var(--br-ink-hover); text-decoration: underline; text-underline-offset: 0.3em; } @supports not (selector(:has(*))) { .br-industry__more-link:focus-visible { outline: 2px solid var(--br-focus); outline-offset: 2px; } } .br-industry__more-item:active .br-industry__more-link { color: var(--br-ink-active); } /* Same self-removal as the FAQ and the covers band: nothing to list, no band. Correct on a one-industry site and correct the day this template is reused. The list itself never renders empty either — the generator drops only the current page from a set of 31. */ .br-industry__more:not(:has(.br-industry__more-item)) { display: none; } /* ========================================================================== PRINT — the article, without the furniture. ========================================================================== */ @media print { .br-industry__hero { background: none; color: #000; } .br-industry__actions, .br-industry__close, .br-industry__more, .br-industry__covers-foot { display: none; } .br-industry__prose { max-width: none; } .br-industry__faq-item > summary::after { display: none; } /* A closed accordion prints as a list of questions with no answers. */ .br-industry__faq-item > :not(summary) { display: block !important; } }