/** * LRB Solutions — supplementary theme CSS. * * Everything that can live in theme.json lives in theme.json. This file is * limited to the accessibility and layout behaviour that theme.json cannot * express. Keep it small. * * No web fonts are requested here. See assets/fonts/README.md. */ /* --------------------------------------------------------------------------- * 1. Visible keyboard focus * ------------------------------------------------------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #1F3A5F; outline-offset: 2px; border-radius: 2px; } /* On dark sections the navy ring disappears, so flip it to gold. */ :where(.has-contrast-background-color, .has-primary-background-color) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #C4972F; } /* Keep the ring for mouse users on form fields, where it doubles as an affordance rather than noise. */ :where(input, select, textarea):focus { outline: 3px solid #1F3A5F; outline-offset: 2px; } /* --------------------------------------------------------------------------- * 2. Skip link * WordPress core injects .skip-link into block themes; this only brands it. * ------------------------------------------------------------------------ */ .skip-link:focus { background-color: #FFFFFF; color: #1F3A5F; font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; outline-offset: 0; padding: 0.75rem 1.25rem; text-decoration: underline; z-index: 100000; } /* --------------------------------------------------------------------------- * 3. Overflow and media guards — no horizontal scrolling * ------------------------------------------------------------------------ */ :where(img, svg, video, iframe, canvas) { max-width: 100%; height: auto; } .wp-block-table { overflow-x: auto; } .wp-block-table table { min-width: 32rem; } /* Long unbroken strings (SKUs, URLs, email addresses) must not push the layout sideways on small screens. */ :where(p, li, td, th, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } /* --------------------------------------------------------------------------- * 4. Utility classes used by this theme's patterns * ------------------------------------------------------------------------ */ /* Small uppercase label above a heading. Navy on light backgrounds; gold is only accessible on the dark navy sections, so patterns set that explicitly. */ .lrb-eyebrow { font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1.4; margin-bottom: 0; text-transform: uppercase; } /* Card group: the border, radius, padding and colours are set as block attributes so the owner can change them in the editor. This rule only adds the behaviour blocks cannot describe. The card itself must stay a normal flow container. Making it a flex column fights WordPress's constrained layout, which gives every child `margin-inline: auto` — inside a flex column those auto margins cancel `align-items: stretch`, so headings and paragraphs shrink-wrap and centre. */ .lrb-card { height: 100%; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; } .lrb-card:hover, .lrb-card:focus-within, .wp-block-group.is-style-lrb-card:hover, .wp-block-group.is-style-lrb-card:focus-within { border-color: #1F3A5F; /* The inset line is the wheat-gold brand accent; it follows the card's border-radius and causes no layout shift. */ box-shadow: inset 0 3px 0 #C4972F, 0 8px 24px rgba(28, 36, 51, 0.10); transform: translateY(-2px); } /* Cards in a row stretch to equal height. Only applied to column rows that actually hold a card — the wrapper column becomes the flex container, never the card. */ .lrb-card-row.wp-block-columns { align-items: stretch; } .lrb-card-row .wp-block-column { display: flex; } .lrb-card-row .wp-block-column > .lrb-card { flex: 1; } /* Comfortable reading measure for prose that sits in a full-width section. Used instead of a narrower `contentSize`, because a constrained layout centres its children — which would indent the intro text away from the left edge of the cards below it. */ .lrb-measure { max-width: 44rem; } .lrb-measure-lg { max-width: 52rem; } /* Registered block style: core/list "Plain (no bullets)". Used for footer and navigation-style link lists. */ .wp-block-list.is-style-lrb-plain { list-style: none; padding-left: 0; } .wp-block-list.is-style-lrb-plain li { margin-bottom: 0.4rem; } /* Registered block style: core/group "LRB card". Same behaviour as .lrb-card. */ .wp-block-group.is-style-lrb-card { height: 100%; } /* Gold hairline used under section headings, flush left beneath a left-aligned heading. The small top margin keeps it off the heading's descenders. */ .lrb-rule { background-color: #C4972F; border: 0; height: 3px; margin-block: 0.6rem 0; max-width: 3.5rem; min-width: 3.5rem; opacity: 1; width: 3.5rem; } /* WordPress's constrained-layout support emits `margin-left: auto !important; margin-right: auto !important` on every direct child, which would centre the rule under a left-aligned heading. This is the one place the theme has to answer core's !important with a more specific !important. */ .wp-block-separator.lrb-rule { margin-inline: 0 auto !important; } /* Draft / needs-review notice used on placeholder legal pages. */ .lrb-draft-notice { border-left: 4px solid #C4972F; } /* Clearly-marked slot where the owner still has to supply a real photograph. Deliberately plain so it cannot be mistaken for finished design. */ .lrb-image-slot { align-items: center; border: 2px dashed #DDD9D0; display: flex; justify-content: center; min-height: 14rem; text-align: center; } /* --------------------------------------------------------------------------- * 5. Header / navigation * ------------------------------------------------------------------------ */ .lrb-header { border-bottom: 1px solid #DDD9D0; } /* Site logo and wordmark read as one lockup. */ .lrb-brand-link, .lrb-footer-brand-link { display: block; flex: 0 0 auto; line-height: 0; } .lrb-brand-mark { display: block; height: 3rem; width: 3rem; } .lrb-lockup .wp-block-site-title { font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } .lrb-lockup .wp-block-site-title a { color: #1C2433; text-decoration: none; } /* In 0.1.4 the footer mark sat alone above the wordmark and carried its own bottom margin. Since 0.1.5 it sits in a flex lockup next to the wordmark (patterns/part-footer.php); the gap comes from the lockup's blockGap. The margin is kept at zero rather than deleted so any header/footer already saved to the database from 0.1.4 still renders acceptably. */ .lrb-footer-brand-link { margin-bottom: 0; } .lrb-footer-mark { display: block; height: 3.5rem; width: 3.5rem; } /* The footer heading sits flush against the mark inside the lockup. */ .lrb-footer .lrb-lockup h2 { margin: 0; } /* Submenu hairline only. The mobile overlay's colours are set as Navigation block attributes in parts/header.html so the owner can change them in the editor — do not hard-code them here. */ .wp-block-navigation .wp-block-navigation__submenu-container { border-color: #DDD9D0; } /* --------------------------------------------------------------------------- * 5b. Mobile navigation overlay (added 0.1.6) * * Problem seen on staging: with the menu open, labels were pushed right and * clipped off-screen, and the Digital Solutions submenu read as full-size * top-level links with large gaps. * * Cause: the header's Navigation block is configured `justifyContent: right` * for the desktop bar. Core turns that into * `--navigation-layout-justification-setting: flex-end` and *reuses the same * variable inside the open overlay*, so every item aligned to the right edge * and long labels overflowed. The block's blockGap (1.5rem) also became the * gap between stacked overlay rows. * * Fix: everything below is scoped to `.is-menu-open`, the class core adds * only while the overlay is open. The closed desktop bar never matches these * rules, so desktop layout is untouched. Selectors are prefixed with * `.wp-block-navigation` purely to outrank core's own three-class overlay * rules regardless of stylesheet order — no !important, no fixed pixel * widths, and the overlay's navy/white colours stay editor-controlled block * attributes. * ------------------------------------------------------------------------ */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { /* Room for the close button, and a scrollable overlay if the menu is taller than a short phone screen. */ overflow-y: auto; overscroll-behavior: contain; padding: 4.5rem 1.25rem 2.5rem; } /* Re-point core's justification variable for the overlay only, and back it up with explicit properties in case a future core version stops reading the variable here. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { --navigation-layout-justification-setting: flex-start; --navigation-layout-align-setting: flex-start; align-items: flex-start; justify-content: flex-start; max-width: 100%; width: 100%; } /* Each level is a full-width column. Gap is reset to 0 because vertical rhythm comes from the link padding below, which also provides the touch target. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start; gap: 0; justify-content: flex-start; max-width: 100%; width: 100%; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start; max-width: 100%; width: 100%; } /* Long labels wrap instead of running off the screen edge. ~48px tall at the theme's body size, so the tap target clears the 44px guideline. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; line-height: 1.4; max-width: 100%; overflow-wrap: break-word; padding-block: 0.75rem; text-align: left; white-space: normal; width: 100%; } /* A parent item is a flex row holding its label and toggle button. Allowing it to wrap, and giving the nested list its own full-width line, keeps the submenu underneath its parent instead of beside it — whichever way core lays the item out. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu { align-items: flex-start; flex-wrap: wrap; width: 100%; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { /* Leave room for the toggle on the same line as the parent label. */ width: auto; } .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { flex: 0 0 auto; min-height: 44px; min-width: 44px; } /* Nested group: indented under its parent, with a hairline spine so the nesting is visible without colour alone carrying the meaning. 0.1.7 — SPECIFICITY NOTE. The 0.1.6 version of this rule used a four-class selector and lost to WordPress core on the real staging page. Core styles the open-overlay submenu with the submenu class repeated several times in one selector, deliberately raising its specificity, and that rule sets `border: none` (so the nesting line vanished), `gap: inherit` (so the 1.5rem blockGap came back as huge vertical gaps), `padding-left: 2rem; padding-right: 2rem`, `width: auto` and `min-width: 200px`. Repeating the class here matches core's own technique and outranks it without resorting to !important. Every property core forces is answered explicitly below. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { align-items: flex-start; background-color: transparent; /* Answers core's `border: none`. */ border: 0; border-left: 2px solid rgba(255, 255, 255, 0.35); /* Answers core's `gap: inherit`, which pulled in the block's 1.5rem blockGap and caused the excessive vertical spacing. */ gap: 0; /* Forces the nested list onto its own line, directly under the parent. */ flex-basis: 100%; flex-direction: column; justify-content: flex-start; margin-left: 0.25rem; /* Answers core's `min-width: 200px`, which can overflow a 320px screen once the indent is added. */ min-width: 0; /* Total indent measures ~22px from the parent label — inside the intended 16–24px range once the 0.25rem margin and 2px spine are counted. Core's 2rem left/right padding is replaced, not added to. */ padding-bottom: 0; padding-left: 1rem; padding-right: 0; /* Answers core's `padding-top: var(--wp--style--block-gap, 2em)`. */ padding-top: 0; /* Answers core's `width: auto`, which let the list shrink-wrap. */ max-width: 100%; width: 100%; } /* Slightly smaller and slightly lighter than top-level links, with tighter rhythm — but still ≥44px tall and still high contrast: rgba(255,255,255, 0.88) over the navy overlay resolves to about #E3E5E8, ~11.6:1. The submenu class is repeated here too, for the same reason as above. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.88); display: block; font-size: 0.9375rem; line-height: 1.4; max-width: 100%; /* Tighter rhythm than the top-level rows, but min-height keeps the tap target at the 44px guideline rather than the 40px the padding alone produced. */ min-height: 44px; overflow-wrap: break-word; padding-block: 0.6rem; padding-inline: 0; text-align: left; white-space: normal; width: 100%; } /* The list items inside the submenu must also fill the column, or the links above have nothing to stretch into and the text re-centres. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container .wp-block-navigation-item { align-items: flex-start; max-width: 100%; width: 100%; } /* Nothing inside the open overlay may exceed the viewport. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > * { max-width: 100%; } /* Keep the close button clear of the links and easy to hit. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { min-height: 44px; min-width: 44px; padding: 0.5rem; } /* --------------------------------------------------------------------------- * 6. Footer * ------------------------------------------------------------------------ */ /* Link colour on the dark sections (footer, hero, CTA bands) is set as a block attribute so the owner can change it in the editor — see the `elements.link` style on those groups. Only the underline behaviour is handled here. */ .lrb-footer a { text-decoration: none; } .lrb-footer a:hover, .lrb-footer a:focus-visible { text-decoration: underline; } /* --------------------------------------------------------------------------- * 6b. Hero watermark * A faint LRB mark on the home hero's navy band. Decorative only: it is a * pseudo-element, it cannot receive focus, and at 7% opacity it does not * measurably change the white-on-navy text contrast (which starts at 15.2:1). * The image URL is relative to this stylesheet, so it resolves correctly on * any install path. Children are promoted into the positioned stacking layer * so text always paints above the watermark. * ------------------------------------------------------------------------ */ .lrb-hero-watermark { overflow: hidden; position: relative; } .lrb-hero-watermark::before { background: url(../images/lrb-mark-white.png) no-repeat center / contain; content: ""; inset-block: clamp(1rem, 4vw, 3rem); opacity: 0.07; pointer-events: none; position: absolute; right: -6rem; width: clamp(16rem, 34vw, 28rem); } .lrb-hero-watermark > * { position: relative; } /* Anyone asking the OS for more contrast gets a clean band instead. */ @media ( prefers-contrast: more ) { .lrb-hero-watermark::before { display: none; } } /* --------------------------------------------------------------------------- * 6c. Customer logo links * The source artwork keeps its own proportions inside a consistent, accessible * link card. The cards stack on narrow screens so no logo becomes illegible. * ------------------------------------------------------------------------ */ .lrb-customer-logos { display: grid; gap: var(--wp--preset--spacing--30, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .lrb-customer-logo-link { align-items: center; background: #FFFFFF; border: 1px solid var(--wp--preset--color--line, #D8D4CB); border-radius: 6px; display: flex; justify-content: center; min-height: 10rem; padding: clamp(1rem, 2.5vw, 1.5rem); text-decoration: none; } .lrb-customer-logo-link:hover { border-color: var(--wp--preset--color--primary, #1F3A5F); box-shadow: 0 8px 24px rgba(28, 36, 51, 0.12); } .lrb-customer-logo-link img { display: block; height: 7rem; max-width: 100%; object-fit: contain; width: 100%; } @media ( max-width: 700px ) { .lrb-customer-logos { grid-template-columns: 1fr; } .lrb-customer-logo-link { min-height: 8.5rem; } .lrb-customer-logo-link img { height: 6rem; } } /* --------------------------------------------------------------------------- * 7. Forms * Labels are always real