/* ========================================================================== BHSRA — index of custom additions v1.59.0 — Site Logo changed to a clean 24px, per Ian's request, 26 August 2026, replacing the decimal 28.8px value from v1.58.0 — applies the new standing order (Standing Orders point xx) to avoid decimal pixel values. v1.58.0 — per Ian's request, 26 August 2026: Site Logo reduced 10% (32px → 28.8px); "FREE TO JOIN" and "BHSRA RESIDENTS' ASSOCIATION" font-size both reduced to 1.5rem, matching .bhsra-page__section-heading exactly — colours and the absence of any underline both deliberately left untouched on both elements. v1.57.0 — removed .bhsra-page__site-updated entirely, per Ian's request, 26 August 2026 — "Website last updated on" merged directly into .bhsra-page__credits as a third line (functions.php v1.36.0), inheriting that band's own white text and teal background automatically, no new rule needed for the merged line itself. v1.56.0 — corrected a genuine misunderstanding flagged by Ian, 26 August 2026: v1.55.0 built two separate full-width teal bands merely touching each other, not one single band containing both lines of text, as actually requested. Replaced .ianscl-page-affiliation-notice and .ianscl-page-footer-date entirely with .ianscl-page-footer-band (the outer band) and .ianscl-page-footer-band__text (each line inside it), matching .bhsra-weather-alert and .bhsra-weather-alert__text's own proven pattern for exactly this situation. Confirmed both old rules genuinely removed, with only historical changelog prose referencing their old names remaining, not live code. v1.55.0 — per Ian's request, 26 August 2026 (Tweak 2): removed the now fully unused p.bhsra-page__affiliation rule (its content moved into page content entirely, functions.php v1.34.0), added .ianscl-page-affiliation-notice as a new full-width teal band, and set .ianscl-page-footer-date's margin-top to 0, a genuine design choice, not requested explicitly — the two are now visually adjacent full-width teal bands, and the previous 2rem gap between them would have read as an odd white break between two teal blocks. Easy to restore a gap if a visually distinct look is preferred instead. v1.54.0 — .bhsra-page__title changed from coral to teal, per Ian's request, 26 August 2026 (Tweak 1), matching .bhsra-page__section-heading's own colour. v1.53.0 — both footer spacings halved again, per Ian's request, 26 August 2026, from their current values this time (0.75rem → 0.375rem for teal-band-to-first-line; 0.25rem → 0.125rem between the two lines). v1.52.0 — per Ian's request, 26 August 2026: "Website last updated on" moved above the copyright line (functions-v1_31_0.php), and both spacings reduced by 50% from their original values, then swapped to match the new order — teal-band-to-first-line (1.5rem → 0.75rem, now on .bhsra-page__site-updated, since it's first now) and between-the-two-lines (0.5rem → 0.25rem, now on .bhsra-page__copyright, since it's second now). v1.51.0 — added .bhsra-page__site-updated, styling for the new "Website last updated on" element in the site footer, per Ian's request, 26 August 2026 (see functions.php, bhsra_footer_content). Matches the copyright notice's own subtle style, sitting directly beneath it. v1.50.0 — added a 25% reduction to the weather banner's text size and line spacing, per Ian's request, 24 August 2026. Built mobile- only first, then extended to desktop the same day, since it was using too much space there too — applied to the base rule now, covering both. v1.49.0 — removed .bhsra-weather-alert__checked-at entirely, 24 August 2026 — the All clear! state was restructured (functions.php v1.26.0) so the checked-at line now uses the same styling as the main text line instead, confirmed genuinely unused before removing it, not assumed. .bhsra-weather-alert__attribution left untouched, still genuinely used in the active-warning state. v1.48.0 — genuine compliance fix, 24 August 2026, checked directly against the Met Office's own NSWWS style guide for developers (V1.3, Jan 2026) — see BHSRA-Weather-DataHub-Reference-v1_0_0.md in the Common library for the full source. Warning colours changed from arbitrary choices to the guide's own required official palette (§2.1.2): yellow #FFE923, amber #FF9900, red #CC0033, with the guide's own recommended text colours for each. Added .bhsra-weather-alert__checked-at, styling for a new timestamp shown in the "All clear!" state (functions.php, bhsra_weather_alert_banner), per Ian's request. v1.47.0 — removed the pipe separator block entirely, 24 August 2026, per Ian's request. The CSS itself was confirmed correct throughout a genuinely thorough investigation, .navbar-nav's own flex-direction: row was confirmed winning via Computed panel — but a separate, pre-existing issue (the menu displaying as a stacked column at desktop widths, unrelated to anything built for the pipe feature) made the pipes appear on their own line, and was set aside to return to later rather than continue chasing something genuinely cosmetic ahead of a possible launch date. v1.46.0 — added pipe separators between top-level menu items, per Ian's request, 24 August 2026. CSS-generated via ::after, not typed into each menu item's own title, so it never needs remembering to omit from the last item and can be cleanly hidden on mobile with a single media query rule, per Ian's explicit requirement. Removed in v1.47.0 — see that note for why. v1.45.0 — added padding-bottom: 0 to #no-title-page-wrapper.wrapper (the Homepage's own content wrapper, already known from the earlier image-gap fix). Confirmed via Inspect, 24 August 2026: 24px (1.5rem) padding-bottom on this element, exactly matching Understrap's own generic .wrapper padding value, was the actual remaining cause of the gap between the end of the Homepage's main content and the start of the footer — a third, separate cause from the two already fixed in bhsra-footer-gap-fix-v1_1_0.js. v1.44.0 — .bhsra-page__affiliation raised to p.bhsra-page__affiliation, 24 August 2026. Confirmed via Inspect that the browser's own default paragraph margin (margin-block-start: 1em) was still winning despite an explicit margin-top: 0 already being present in the deployed CSS — the class alone was likely losing a specificity fight against a more specific rule elsewhere (Understrap's own compiled CSS, something like .site-info p), the same category of bug already fixed this way on h1.bhsra-page__title. Adding the element type matches that rule's own specificity regardless of what it turns out to be, without needing to identify it directly. v1.43.0 — hero image band changed from #3A328B to #e4003b, per Ian's request, 24 August 2026, official Labour Party red — checked directly against Labour's own current brand guidelines, not assumed accurate. v1.42.0 — removed the v1.41.0 :has() CSS fix entirely, per Ian's request, replaced with a plain JS solution instead (bhsra-footer-gap-fix-v1_0_0.js), to avoid depending on relatively modern CSS support. Same targeting logic, same scope, just a different mechanism. v1.41.0 — fixed the large gap above the footer, per Ian's real Inspect evidence, 23 August 2026: Bootstrap's own .row/negative- margin, .col-md-12/positive-margin pairing wasn't cancelling out for the footer's specific grid column. Scoped fix via :has(), targeting only the .col-md-12 directly wrapping #colophon, not the class generally, which is used elsewhere on the site for unrelated layout. v1.40.0 — .bhsra-page__credits (the WordPress/Understrap credit line) made genuinely full-width, per Ian's request, 23 August 2026, matching the same 100vw breakout technique now used for the date/time band and the hero image band. v1.39.0 — per Ian's request, 23 August 2026: .ianscl-page-footer- date is now a genuine full-width teal band with white text (100vw breakout technique, matching the weather band and hero image band), rather than a plain left-aligned line within the content column. Own judgement call, flagged: switched the text to centred rather than left-aligned, since left-aligned text in a truly full-width band would sit oddly far from centre on a wide desktop screen, and centred matches the existing credits band's own established convention — worth reverting if Ian actually wanted it kept left- aligned within the new band. .bhsra-page__affiliation's top border removed entirely, now that the date/time band itself serves that visual separating role. Both elements' own margins set to 0 on the sides that meet each other, closing everything controllable from this file — any remaining gap once this is actually live would be coming from Understrap's own default spacing between the main content area and the footer template, not yet checked directly. v1.38.0 — closed the gap between the date/time footer and the site footer to virtually 0px, per Ian's request, 23 August 2026. The date footer's own bottom margin was already 0 (a side effect of the 3-value margin shorthand set in v1.37.0), so the entire visible gap was actually coming from .bhsra-page__affiliation's own margin-top: 2.5rem, reduced to 0 here. Also made its existing 3px teal top border genuinely full-width, matching the same "break out of the centred container" technique already used for the weather band and hero image band — via a ::before pseudo-element carrying just the border, so the affiliation text itself stays at its normal, readable width rather than stretching full-width along with it. v1.37.0 — fixed a genuine bug: .ianscl-page-footer-date had no width constraint of its own, and since it's appended after each page's own closes (see functions.php's ianscl_page_footer_date), it was rendering outside the 800px content column entirely, flush to the true page edge, not just visually "left-aligned" within the content the way every other page element is. Given max-width: 800px and margin: 0 auto, matching .bhsra-page's own values exactly — this fixes the width regardless of any individual page's own content structure, rather than attempting fragile string surgery on $content to insert the date inside the wrapper div instead. v1.36.0 — substantial rework, 23 August 2026, per Ian's decision to adopt the ianscl (Ian Short Common Library) naming convention from this, the first project, rather than retrofit it later. Renamed: .bhsra-page__watermark → .ianscl-page-watermark (and its -main/-sub children), .bhsra-email-popover → .ianscl-email-popover, .bhsra-link-popover → .ianscl-link-popover, .bhsra-tel-popover → .ianscl-tel-popover. Confirmed complete via direct count before and after (33 instances, all renamed, zero left behind), not assumed. A genuine mismatch was caught and fixed in this same pass: an initial draft of the matching functions.php used a double- underscore (ianscl-page-watermark__main) where this CSS, correctly, uses a single hyphen (ianscl-page-watermark-main) — functions.php was corrected to match this file, the actual existing convention. Also added .ianscl-page-footer-date, a new automatic, left-aligned yyyy-mm-dd footer on every Page (see functions.php, ianscl_page_footer_date) — deliberately no version number, per Ian's decision, since WordPress has no native per-page version concept to pull automatically the way it does for a modified date. v1.35.0 — added .bhsra-link-popover and .bhsra-tel-popover, two new Common library snippets (Link Choice, Tel Number Choice), each deliberately self-contained rather than sharing code with the existing Email Choice popover, matching its exact CSS structure. See SNIPPET-Link-Choice-Popover-v1_0_0.md and SNIPPET-Tel-number-Choice-Popover-v1_0_0.md. v1.34.0 — added aspect-ratio: 550 / 250 to .bhsra-page__hero-image- wrap, matching the original photo's own proportions. The image and "Tap to meet Tom" link were removed entirely (BHSRA-Homepage- v1_20.html or later), pending a full image redesign — without this, the now-empty wrap would collapse to zero height and the coloured band behind it would disappear, rather than stay visible as the placeholder Ian asked for. Block-level elements fill their parent's width by default even with no content, which is what gives aspect-ratio a real width to calculate a proportional height from. v1.33.0 — title spacing reduced to 10px top/bottom, per Ian's request, down from 16px. v1.32.0 — title spacing set to exactly 16px top/bottom, per Ian's request, replacing the previous symmetric 1.125rem. v1.31.0 — "FREE TO JOIN" in the header changed from coral to white, per Ian's request — coral (#C7422E) against the header's teal background (#287B7B) is a muted, low-contrast pairing, both mid- toned colours without much brightness difference; white reads far more clearly. v1.30.0 — added "FREE TO JOIN" to the header, next to the site logo, via ::after generated content (no editable navbar template file exists in this project to add a real element instead). Removed "Free to join" from below the BHSRA RESIDENTS' ASSOCIATION title (now in the header instead), and made the title's own top/bottom spacing symmetric now that nothing sits directly below it. Also removed .bhsra-page__tag--free-to-join, now genuinely dead — confirmed the class no longer appears anywhere in the Homepage HTML before removing it, not assumed. v1.29.0 — added text-decoration: none to .bhsra-page__hero-overlay. Genuine fix, 22 August 2026: this element changed from a plain to a real ("Tap to meet Tom", its own link separate from the image's own link — see BHSRA-Homepage-v1_18.html, which also fixed an invalid nested-anchor structure this created). A real link carries the browser's own default underline unless explicitly removed, which the original span never needed. Checked, not just fixed blindly: left: 0/right: 0 with position: absolute already forces block-level sizing regardless of element type, so the full- width clickable area is unaffected by this change. v1.28.0 — added .bhsra-page__tag--free-to-join, a scoped 15px top/bottom spacing override for the "Free to join" tag specifically, now relocated above the hero image (BHSRA-Homepage-v1_16.html or later), per Ian's request. Equal specificity to .bhsra-page__tag, placed after it in source order, so it correctly overrides only margin-top/margin-bottom without affecting margin-left/right or any other tag line still using the shared class untouched. v1.27.0 — trimmed from 1,001 lines (48% comments) to 751 lines (32% comments), 21 August 2026. Every block's full historical narrative moved to the companion changelog below; brief, current-state notes left in place. While restructuring, also caught and corrected a genuinely stale block header (the watermark block still described its old, superseded manual mechanism and two-line "SPECIMEN" wording), and folded an orphaned floating note back into the block it actually belonged to. Loaded on its own, via wp_enqueue_style() in functions.php, entirely separate from Understrap's compiled CSS. Loaded with child-understrap-styles as a dependency, guaranteeing this file loads after it — necessary for the Site-wide block below to correctly override Bootstrap defaults. Note this does NOT remove the need for !important on the header background rule specifically: that's overriding Bootstrap's own !important-flagged utility class, a fight only !important can win, regardless of load order. Full version history: see companion file BHSRA-Styles-CHANGELOG-v1_0_0.md (or later) — this file now carries only what each block currently does, not how it got there. Every block below is loaded on every page equally. This index states what each block actually affects, not where it's loaded, since that's uniform for all of them. Site-wide — colour palette, header, footer. Relevant on literally every page: the palette defines variables everything else depends on, every page has a header and footer. Feature-specific: Email choice popover — relevant only where a link carries the data-ianscl-email-choice attribute. Link choice popover — relevant only where a link carries the data-ianscl-link-choice attribute. Tel choice popover — relevant only where a link carries the data-ianscl-tel-choice attribute. Third-level menu — relevant only to multi-level menu items (currently just the BCP Council entry). Cookie consent banner — relevant on every page (the banner itself appears everywhere), but styled as its own feature-specific block since it's a discrete UI component, not part of ordinary page content. Weather alert banner — relevant only when the Met Office has an active severe weather warning for South West England; invisible otherwise. Homepage wrapper fix — relevant only to the Homepage's own #no-title-page-wrapper, correcting a theme-level padding gap. Doesn't affect .wrapper anywhere else on the site. Hero image band — relevant on every screen size, only to the Homepage's straplines image; a full- width coloured band matching the header and weather band, with the image itself centred within it. Site logo — relevant site-wide, appears in the header on every page. ========================================================================== */ /* ========================================================================== BHSRA Site-wide The whole of child-theme.css / child-theme.min.css loads on every page, with no per-page scoping — every block in this file, including the email popover and third-level menu blocks that follow this one, is equally loaded everywhere. What distinguishes this section is selector relevance, not loading: the rules here target things present on literally every page (the colour variables everything else depends on, the header, the footer), while the blocks that follow only match specific, optional elements that don't exist on every page. Ordered by dependency: colour palette first (the variables everything below it uses), then header, then footer. ========================================================================== */ /* -------------------------------------------------------------------------- Colour palette Placed here, in child-theme.css / child-theme.min.css — the files actually loaded by the browser — not style.css. Full version history: see companion file bhsra-colour-palette-and-header-fix-CHANGELOG-v1_1_0.md (or later) — this header now carries only the current version's note. v1.0.7 — removed the "recovered from SVG" history paragraph, already fully preserved in the companion changelog's v1.0.0 entry. -------------------------------------------------------------------------- */ :root { --bhsra-teal: #287B7B; --bhsra-teal-dark: #184C4C; --bhsra-teal-bright: #3EC0C0; --bhsra-amber: #946411; --bhsra-amber-dark: #5D3E0A; --bhsra-amber-bright: #E49B1B; --bhsra-coral: #C7422E; --bhsra-coral-dark: #953122; --bhsra-coral-light: #DE8072; --bhsra-charcoal: #2C2C2C; --bhsra-offwhite: #F7F5F0; --bhsra-sage: #B2AC88; } /* -------------------------------------------------------------------------- Page content (titles, straplines, tags, section headings, lists, tables, notes, copyright) — restored in v1.1.0, see the index above for what happened to it. -------------------------------------------------------------------------- */ .bhsra-page { font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; color: var(--bhsra-charcoal); line-height: 1.7; max-width: 800px; margin: 0 auto; } .bhsra-page h1, .bhsra-page h2, .bhsra-page h3 { font-family: 'Lora', Georgia, serif; } .bhsra-page__title { font-size: 1.5rem; font-weight: 600; color: var(--bhsra-teal); text-align: center; } /* BHSRA and RESIDENTS' ASSOCIATION share the base .bhsra-page__title style above, but need different spacing below each of them — 75% reduction after BHSRA (1.5rem -> 0.375rem), 50% reduction after RESIDENTS' ASSOCIATION (1.5rem -> 0.75rem). Targeted by element type (h1 vs p), since they're already different tags, no new class needed. */ h1.bhsra-page__title { margin-top: 10px; margin-bottom: 10px; } p.bhsra-page__title { margin-bottom: 0.75rem; } .bhsra-page__straplines { text-align: center; margin-bottom: 1.5rem; } .bhsra-page__tag { display: block; font-weight: 700; font-size: 0.99rem; letter-spacing: 0.04em; color: var(--bhsra-amber); text-transform: uppercase; margin: 0; } .bhsra-page__schemes { text-align: center; font-weight: 600; color: var(--bhsra-charcoal); margin-bottom: 2rem; } .bhsra-page__section-heading { font-size: 1.5rem; font-weight: 600; color: var(--bhsra-teal); border-bottom: 3px solid var(--bhsra-teal); padding-bottom: 0.35rem; margin-top: 2.5rem; margin-bottom: 1rem; } .bhsra-page__sub-heading { font-size: 1.15rem; font-weight: 600; color: var(--bhsra-teal); margin-top: 1.75rem; margin-bottom: 0.5rem; } .bhsra-page ul.bhsra-page__list { list-style: disc; margin: 0 0 1.5rem; padding-left: 1.5rem; } .bhsra-page ul.bhsra-page__list li { margin-bottom: 0.6rem; } .bhsra-page ul.bhsra-page__list li strong { color: var(--bhsra-teal); } .bhsra-page table.bhsra-page__table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; } .bhsra-page table.bhsra-page__table th { background-color: var(--bhsra-teal); color: #FFFFFF; text-align: left; padding: 0.5rem 0.75rem; font-family: 'Lora', Georgia, serif; font-weight: 600; } .bhsra-page table.bhsra-page__table td { border-bottom: 1px solid var(--bhsra-sage); padding: 0.5rem 0.75rem; } .bhsra-page__note { background-color: var(--bhsra-offwhite); border-left: 4px solid var(--bhsra-amber); padding: 1rem 1.25rem; margin-top: 2rem; } .bhsra-page__note-heading { text-align: center; color: var(--bhsra-coral); font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; } .bhsra-page__note-email { text-align: center; font-size: 1.15rem; font-weight: 600; } .bhsra-page__copyright { text-align: center; font-size: 0.875rem; color: var(--bhsra-charcoal); opacity: 0.8; margin-top: 0.125rem; } .bhsra-page__credits { text-align: center; font-size: 0.875rem; color: #FFFFFF; background-color: var(--bhsra-teal); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 0.5rem; padding: 0.75rem 1rem; } /* Standard site link blue reads poorly against this dark teal — both sit at a similar brightness, which is what actually causes poor contrast, not a clash of colour. Scoped to links inside this band only; every other link on the site keeps the standard blue. */ .bhsra-page__credits a { color: #99CCFF; } .bhsra-page__source { text-align: center; font-size: 0.875rem; color: var(--bhsra-charcoal); opacity: 0.75; margin-top: 2.5rem; border-top: 1px solid var(--bhsra-sage); padding-top: 1rem; } /* -------------------------------------------------------------------------- Header background: teal, replacing Bootstrap's default bg-primary blue ACCESSIBILITY NOTE: the header's existing navbar-dark class sets white text by default. White reads clearly against this teal (a mid-to-dark tone), which is why the rule below sets white explicitly rather than leaving it to Understrap's default — teal is a custom colour Understrap doesn't know about, so its own contrast assumptions can't be relied on without confirming it here directly. -------------------------------------------------------------------------- */ /* !important is genuinely necessary here, not a shortcut — Bootstrap 5's own compiled .bg-primary utility class already includes !important, which no non-!important rule can override regardless of specificity. */ #main-nav { background-color: var(--bhsra-teal) !important; } #main-nav .nav-link, #main-nav .dropdown-toggle { color: #FFFFFF !important; } /* -------------------------------------------------------------------------- Footer (affiliation, menu, copyright) Full history: see BHSRA-Styles-CHANGELOG-v1_0_0.md. Requires functions-v1_3_2.php or later (adds the menu_class for .bhsra-footer-menu). -------------------------------------------------------------------------- */ .ianscl-page-footer-band { text-align: center; background-color: var(--bhsra-teal); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 2rem; margin-bottom: 0; padding: 0.75rem 1rem; } .ianscl-page-footer-band__text { margin: 0; color: #FFFFFF; font-size: 0.875rem; } .ianscl-page-footer-band__text + .ianscl-page-footer-band__text { margin-top: 0.375rem; } .bhsra-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0.75rem 0 0; padding: 0; } .bhsra-footer-menu li { margin: 0 0.75rem; } .bhsra-footer-menu a { font-size: 0.875rem; } .bhsra-footer-menu a:hover, .bhsra-footer-menu a:focus { opacity: 0.8; } /* ========================================================================== Email choice popover (bhsra-email-choice-v1_0_0.js) Add to css/child-theme.css and css/child-theme.min.css, alongside the shared page styles. Reuses --bhsra-teal, --bhsra-charcoal, --bhsra-sage already defined above. ========================================================================== */ .ianscl-email-popover { display: inline-flex; flex-direction: column; position: relative; margin-left: 0.5rem; overflow: hidden; z-index: 10; } .ianscl-email-popover__option { display: block; padding: 0.5rem 1rem; font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; font-size: 0.9rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; border: 2px solid var(--bhsra-charcoal); } a.ianscl-email-popover__option { color: #FFFFFF; background-color: var(--bhsra-charcoal); } a.ianscl-email-popover__option:hover, a.ianscl-email-popover__option:focus { background-color: var(--bhsra-teal); border-color: var(--bhsra-teal); color: #FFFFFF; outline: none; } button.ianscl-email-popover__option { color: var(--bhsra-charcoal); background-color: #FFFFFF; } button.ianscl-email-popover__option:hover, button.ianscl-email-popover__option:focus { background-color: var(--bhsra-offwhite); color: var(--bhsra-teal); border-color: var(--bhsra-teal); outline: none; } .ianscl-email-popover__option + .ianscl-email-popover__option { border-top: none; margin-top: -2px; } /* ========================================================================== Link choice popover (bhsra-link-choice-v1_0_0.js) Deliberately separate from .ianscl-email-popover and .ianscl-tel-popover — each snippet in the Common library is self-contained. Reuses --bhsra-teal, --bhsra-charcoal, --bhsra-offwhite already defined above. ========================================================================== */ .ianscl-link-popover { display: inline-flex; flex-direction: column; position: relative; margin-left: 0.5rem; overflow: hidden; z-index: 10; } .ianscl-link-popover__option { display: block; padding: 0.5rem 1rem; font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; font-size: 0.9rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; border: 2px solid var(--bhsra-charcoal); } a.ianscl-link-popover__option { color: #FFFFFF; background-color: var(--bhsra-charcoal); } a.ianscl-link-popover__option:hover, a.ianscl-link-popover__option:focus { background-color: var(--bhsra-teal); border-color: var(--bhsra-teal); color: #FFFFFF; outline: none; } button.ianscl-link-popover__option { color: var(--bhsra-charcoal); background-color: #FFFFFF; } button.ianscl-link-popover__option:hover, button.ianscl-link-popover__option:focus { background-color: var(--bhsra-offwhite); color: var(--bhsra-teal); border-color: var(--bhsra-teal); outline: none; } .ianscl-link-popover__option + .ianscl-link-popover__option { border-top: none; margin-top: -2px; } /* ========================================================================== Tel number choice popover (bhsra-tel-choice-v1_0_0.js) Deliberately separate from .ianscl-email-popover and .ianscl-link-popover — each snippet in the Common library is self-contained. Reuses --bhsra-teal, --bhsra-charcoal, --bhsra-offwhite already defined above. ========================================================================== */ .ianscl-tel-popover { display: inline-flex; flex-direction: column; position: relative; margin-left: 0.5rem; overflow: hidden; z-index: 10; } .ianscl-tel-popover__option { display: block; padding: 0.5rem 1rem; font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; font-size: 0.9rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; border: 2px solid var(--bhsra-charcoal); } a.ianscl-tel-popover__option { color: #FFFFFF; background-color: var(--bhsra-charcoal); } a.ianscl-tel-popover__option:hover, a.ianscl-tel-popover__option:focus { background-color: var(--bhsra-teal); border-color: var(--bhsra-teal); color: #FFFFFF; outline: none; } button.ianscl-tel-popover__option { color: var(--bhsra-charcoal); background-color: #FFFFFF; } button.ianscl-tel-popover__option:hover, button.ianscl-tel-popover__option:focus { background-color: var(--bhsra-offwhite); color: var(--bhsra-teal); border-color: var(--bhsra-teal); outline: none; } .ianscl-tel-popover__option + .ianscl-tel-popover__option { border-top: none; margin-top: -2px; } /* ========================================================================== Third-level menu (nested dropdown) support Full history: see BHSRA-Styles-CHANGELOG-v1_0_0.md — confirmed by direct inspection of the live page source that Understrap's own nav walker never generates a .dropdown-submenu wrapper class at this depth. The real class WordPress/Understrap applies to a menu item that has its own children is menu-item-has-children combined with dropdown, present on the
  • , not the . A tier-2 item like "BCP Council" is a genuine, working link (not a toggle-only item like the top-level parents), so this uses hover/focus reveal rather than click-to-open — no JavaScript required. ========================================================================== */ /* Reveal a nested dropdown when hovering its parent
  • , or when a keyboard user has tabbed focus into it or anything inside it. */ .dropdown-menu li.menu-item-has-children.dropdown:hover > .dropdown-menu, .dropdown-menu li.menu-item-has-children.dropdown:focus-within > .dropdown-menu { display: block; } /* Position the nested dropdown as a flyout to the side on desktop. */ .dropdown-menu li.menu-item-has-children.dropdown { position: relative; } .dropdown-menu li.menu-item-has-children.dropdown > .dropdown-menu { display: none; position: absolute; top: 0; left: 100%; margin-top: -1px; } /* A small visual cue that this item has its own children, since it carries no dropdown-toggle arrow the way top-level items do. */ .dropdown-menu li.menu-item-has-children.dropdown > a.dropdown-item::after { content: ""; display: inline-block; margin-left: 0.5em; vertical-align: middle; border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.3em solid currentColor; } /* On mobile, a flyout wouldn't fit — show nested items inline, always expanded, rather than requiring hover (which doesn't exist on touch) or a separate tap target. */ @media (max-width: 991.98px) { .dropdown-menu li.menu-item-has-children.dropdown > .dropdown-menu { display: block; position: static; left: auto; margin-left: 1rem; border: 0; box-shadow: none; } .dropdown-menu li.menu-item-has-children.dropdown > a.dropdown-item::after { display: none; } } /* ========================================================================== Cookie consent banner (bhsra-cookie-consent-v1_0_0.js) Requires functions-v1_6_0.php (adds the enqueue for the JS file above). A fixed bar, not a full-screen overlay — this is an honest notice, not a request for a decision that should block the page. ========================================================================== */ .bhsra-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.5rem; background-color: var(--bhsra-charcoal); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); } .bhsra-cookie-banner__text { color: #FFFFFF; font-size: 0.9rem; margin: 0; text-align: center; } .bhsra-cookie-banner__text a { color: #99CCFF; } .bhsra-cookie-banner__button { flex-shrink: 0; background-color: var(--bhsra-teal); color: #FFFFFF; border: none; border-radius: 0.25rem; padding: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .bhsra-cookie-banner__button:hover, .bhsra-cookie-banner__button:focus { background-color: var(--bhsra-teal-dark); outline: none; } /* ========================================================================== Weather alert banner (functions-v1_8_0.php or later) Colours deliberately not drawn from the site's own brand palette — this needs to read unambiguously as a safety alert, not blend in as ordinary site styling. Yellow/amber/red follow the same convention the Met Office and UKHSA both already use. ========================================================================== */ .bhsra-weather-alert { text-align: center; padding: 0.75rem 1.5rem; } .bhsra-weather-alert--clear { background-color: #B9D532; color: #2C2C2C; } .bhsra-weather-alert--yellow { background-color: #FFE923; color: #2C2C2C; } .bhsra-weather-alert--amber { background-color: #FF9900; color: #2C2C2C; } .bhsra-weather-alert--red { background-color: #CC0033; color: #FFFFFF; } .bhsra-weather-alert__text { margin: 0; font-weight: 600; font-size: 0.7125rem; } .bhsra-weather-alert__text + .bhsra-weather-alert__text { margin-top: 0.1875rem; } .bhsra-weather-alert__text a { color: inherit; text-decoration: underline; } .bhsra-weather-alert__attribution { margin: 0.25rem 0 0; font-size: 0.75rem; opacity: 0.85; } /* Targets the Met Office link by its actual URL, not by which paragraph class currently wraps it — the link moved from .bhsra-weather-alert__attribution into .bhsra-weather-alert__text in v1.9.0 (All clear! merged onto one line), and .text a uses color: inherit, which would have made this link dark against the green "All clear" background instead of the blue Ian specifically asked for. An href-based rule stays correct regardless of future restructuring. */ a[href="https://www.metoffice.gov.uk/"] { color: #5533ff; } /* ========================================================================== Critical callout (bhsra-deliveries-hazard-v1_0_0.html and any future use of the same pattern) Reuses the weather alert's own red (#D32F2F) deliberately, not a new colour — "urgent, needs attention" should mean the same thing consistently across the site, not a different shade every time it's needed. ========================================================================== */ .bhsra-page__critical-callout { background-color: #D32F2F; color: #FFFFFF; padding: 1rem 1.25rem; border-radius: 0.25rem; margin: 1.5rem 0; } .bhsra-page__critical-callout p { margin: 0; } p.bhsra-page__critical-callout-heading { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; } /* ========================================================================== "Provisional" watermark Automatic and site-wide, shown on every WordPress Page via functions.php's bhsra_provisional_watermark (is_page() + the_content filter) — no wrapper class needed in any page's own content. Three lines: "Provisional" (large), "Work in Progress" and "Subject to Policy or Change" (smaller, beneath it). position: fixed, not absolute — a tall page would otherwise place the watermark once, likely off-screen, rather than keeping it visible throughout scrolling. clamp() sizing checked against a real ~375px mobile width, not assumed safe. Full history, including the original manual, two-line "SPECIMEN" version this replaced: see BHSRA-Styles-CHANGELOG-v1_0_0.md. ========================================================================== */ .ianscl-page-watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-35deg); text-align: center; color: var(--bhsra-coral); opacity: 0.2; pointer-events: none; /* never blocks a link or button underneath */ z-index: 1; } .ianscl-page-watermark-main { display: block; font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; font-size: clamp(1.75rem, 9vw, 4rem); font-weight: 700; white-space: nowrap; } .ianscl-page-watermark-sub { display: block; font-family: 'Source Sans 3', Arial, Helvetica, sans-serif; font-size: clamp(1rem, 4.5vw, 2rem); font-weight: 700; white-space: nowrap; margin-top: 0.25em; } /* ========================================================================== Page footer date (ianscl_page_footer_date, functions.php) Automatic, left-aligned yyyy-mm-dd, using WordPress's own real last-modified date — no version number, per Ian's decision, 23 August 2026 (see functions.php for the full reasoning). ========================================================================== */ /* ========================================================================== Homepage wrapper padding Understrap's own .wrapper class applies top/bottom padding generically, across structural wrappers site-wide — genuinely doing real work elsewhere. Scoped to this one specific wrapper's own ID (#no-title-page-wrapper), not the .wrapper class generally, to avoid breaking spacing elsewhere on the site. Top padding removed first (20 August 2026), fixing the gap between the weather band and the Homepage's own header image. Bottom padding removed later (24 August 2026), fixing a separate gap between the end of the page's main content and the start of the footer — same element, same 24px (1.5rem) value, confirmed via Inspect rather than assumed to be the same cause. Full history: see BHSRA-Styles-CHANGELOG-v1_0_0.md. ========================================================================== */ #no-title-page-wrapper.wrapper { padding-top: 0; padding-bottom: 0; } /* ========================================================================== Homepage hero image band Full-bleed on every screen size, using the standard "break out of a centred container" technique (100vw width, 50vw offset with a matching negative margin), which works purely off actual viewport width regardless of what's constraining the container at any given screen size. A single solid colour, matching the header and weather band's own full width. Built through several stages (a mobile-only fix, a gradient, a hard split, two independent halves, back to one colour) — full history, including the reasoning behind each stage, see BHSRA-Styles-CHANGELOG-v1_0_0.md. ========================================================================== */ .bhsra-page__hero-band { background-color: #e4003b; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .bhsra-page__hero-image-wrap { max-width: 800px; margin: 0 auto; position: relative; display: block; z-index: 1; aspect-ratio: 550 / 250; } /* ========================================================================== Site logo Currently 32px, height: auto to preserve the logo's own aspect ratio robustly. Chosen deliberately as a power-of-two "binary size" (16/32/64/128), the convention browsers and icon systems are typically built around — the logo's own text remains clearly legible even at this reduced size. Full history of how this value was reached: see BHSRA-Styles-CHANGELOG-v1_0_0.md. ========================================================================== */ .custom-logo-link img { width: 24px; height: auto; } /* ========================================================================== "FREE TO JOIN" in the header, next to the logo No Understrap navbar template file exists in this project to edit directly (only header.php has ever been overridden) — rather than guess at unconfirmed template content, this uses ::after generated content on .custom-logo-link, a class already confirmed real via Inspect earlier this project. Font matches .bhsra-page__title's own Lora, at the specific 32px size requested (the title itself is 1.8rem, ~28.8px at the default root size — a different, larger value, per Ian's explicit instruction). Genuinely worth checking on mobile before treating this as settled: the header is already narrow there, with the logo and hamburger toggle both competing for the same space — adding 32px text here risks overflow or wrapping on a small screen, flagged directly rather than assumed to be fine. ========================================================================== */ .custom-logo-link::after { content: "FREE TO JOIN"; margin-left: 0.75rem; font-family: 'Lora', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #FFFFFF; vertical-align: middle; } /* ========================================================================== Homepage hero image overlay — "Tap to read more" (BHSRA-Homepage-v1_12.html or later; requires functions-v1_17_0.php or later, for the Google Fonts enqueue this Poppins reference depends on) Poppins deliberately, not the site's own Source Sans 3 — matches the Labour Party's own brand font, appropriate given the photo this overlays is of a Labour MP. Colour reuses #99CCFF, the same light blue already established for the Met Office link, rather than a new colour invented for this one instance. ========================================================================== */ .bhsra-page__hero-image-link { display: block; position: relative; } .bhsra-page__hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem; color: #99CCFF; font-family: 'Poppins', Arial, Helvetica, sans-serif; font-weight: 600; text-align: center; font-size: 1rem; text-decoration: none; } /* ========================================================================== Weather banner text, 25% size and spacing reduction Per Ian's request, 24 August 2026: the three stacked lines (All clear!/warning text, Checked at, Met Office attribution) needed a smaller size and tighter line spacing — initially built mobile-only, then extended to desktop too the same day, since it was using too much space there as well. Applied directly to the base rule, not a separate media query, since both screen sizes need it identically now. Reduction calculated from the original values: font-size 0.95rem → 0.7125rem, line spacing 0.25rem → 0.1875rem. ========================================================================== */