/* ============================================================ FS Legal — Design Tokens & Core Styles (Workstream 1) Rev: dark chrome (ink header + footer) & translucent sticky nav ------------------------------------------------------------ Paste the WHOLE file into: Appearance > Customize > Additional CSS (recommended) — or a child-theme stylesheet. NOTE: the GenerateBlocks Pro "CSS Editor" is per-block / per-Global-Style and strips comments, so it is NOT the home for this site-wide token sheet. Use Additional CSS. Layer 1 = tokens (CSS variables) — the single source of truth. Layer 2 = helper classes (.fsl-btn, .fsl-section) that your GenerateBlocks Global Styles / blocks can reference. Prefix: fsl- (so nothing collides with theme/plugin styles) ============================================================ */ :root { /* ---- Colour ------------------------------------------------ */ --fsl-primary: #066AAB; /* brand blue (your existing button) */ --fsl-primary-hover: #05548A; /* darker — hover / active */ --fsl-primary-050: #E8F1F8; /* pale tint — CTA panels, ghost hover */ --fsl-accent: #50C0F0; /* logo sky-blue — accents, motif, heading underline */ --fsl-accent-hover: #2FA9E0; /* darker sky-blue for hover */ --fsl-tint: #EAF6FD; /* pale blue — alternating section background */ --fsl-tint-deep: #D7EAF7; /* one step darker — the accreditations "plinth" that steps the page down into the ink footer */ --fsl-ink: #111827; /* headings */ --fsl-text: #374151; /* body copy */ --fsl-surface: #F9FAFB; /* default page background */ --fsl-surface-muted: #F3F4F6; /* alternating sections, cards */ --fsl-border: #E5E7EB; /* hairlines, card borders */ --fsl-white: #FFFFFF; /* ---- Type families ---------------------------------------- */ --fsl-font-heading: "Raleway", sans-serif; --fsl-font-body: "Lato", sans-serif; /* ---- Fluid type scale (min @375px → max @1280px) -------- */ --fsl-fs-h1: clamp(2.25rem, 1.63rem + 2.65vw, 3.75rem); /* 36 → 60 */ --fsl-fs-h2: clamp(1.75rem, 1.34rem + 1.77vw, 2.75rem); /* 28 → 44 */ --fsl-fs-h3: clamp(1.375rem, 1.17rem + 0.88vw, 1.875rem); /* 22 → 30 */ --fsl-fs-h4: clamp(1.125rem, 1.02rem + 0.44vw, 1.375rem); /* 18 → 22 */ --fsl-fs-lead: 1.1875rem; /* 19 — intro paragraphs */ --fsl-fs-body: 1.0625rem; /* 17 — base */ --fsl-fs-small: 0.9375rem; /* 15 — meta / fine-print floor */ /* ---- Weights & line-height -------------------------------- */ --fsl-fw-heading: 600; --fsl-fw-display: 700; /* H1 */ --fsl-lh-heading: 1.2; --fsl-lh-body: 1.6; /* ---- Spacing scale (8-based) ------------------------------ */ --fsl-space-2xs: 0.5rem; /* 8 */ --fsl-space-xs: 1rem; /* 16 */ --fsl-space-sm: 1.5rem; /* 24 */ --fsl-space-md: 2.5rem; /* 40 */ --fsl-space-lg: 4rem; /* 64 */ --fsl-space-xl: 6rem; /* 96 */ --fsl-space-2xl: 8rem; /* 128 */ /* ---- Section & layout ------------------------------------- */ --fsl-section-y: clamp(4rem, 2.5rem + 5vw, 7rem); /* 64 → 112 */ --fsl-gutter: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); /* 20 → 40 */ --fsl-content-max: 1280px; --fsl-measure: 72ch; /* comfortable text line length */ /* ---- UI --------------------------------------------------- */ --fsl-radius: 3px; --fsl-radius-card: 12px; /* softer corners on cards / panels */ --fsl-tap-min: 44px; /* minimum tap target */ --fsl-transition: 0.2s ease; --fsl-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05); --fsl-shadow-hover: 0 8px 24px rgba(16,24,40,.10); /* ---- Chrome (dark header & footer) ------------------------ */ --fsl-ink-rgb: 17, 24, 39; /* ink as an RGB triplet, for translucent chrome */ --fsl-header-bg: var(--fsl-ink); /* swap to var(--fsl-primary) for brand-blue chrome */ --fsl-header-bg-sticky: rgba(var(--fsl-ink-rgb), 0.85); /* sticky nav — ink @ 85% (~10:1) */ --fsl-header-text: var(--fsl-white); --fsl-header-link-hover: var(--fsl-accent); --fsl-footer-bg: var(--fsl-ink); --fsl-footer-text: #E5E7EB; /* body copy on dark — ~14:1 on ink */ --fsl-footer-link: var(--fsl-white); --fsl-footer-link-hover: var(--fsl-accent); --fsl-submenu-l3: #4B5563; /* 3rd-level dropdown panel — white = 7.6:1 */ } /* ============================================================ Typography Applies the scale to real headings/body. If you'd rather set these per block in GenerateBlocks Global Styles, use the same variables there and delete this block. ============================================================ */ body { font-family: var(--fsl-font-body); font-size: var(--fsl-fs-body); line-height: var(--fsl-lh-body); color: var(--fsl-text); background-color: var(--fsl-surface); } h1, h2, h3, h4, h5, h6 { font-family: var(--fsl-font-heading); font-weight: var(--fsl-fw-heading); line-height: var(--fsl-lh-heading); color: var(--fsl-ink); } h1 { font-size: var(--fsl-fs-h1); font-weight: var(--fsl-fw-display); letter-spacing: -0.01em; } h2 { font-size: var(--fsl-fs-h2); } h3 { font-size: var(--fsl-fs-h3); } h4 { font-size: var(--fsl-fs-h4); } .fsl-lead { font-size: var(--fsl-fs-lead); } .fsl-small { font-size: var(--fsl-fs-small); } a { color: var(--fsl-primary); } a:hover { color: var(--fsl-primary-hover); } /* ============================================================ Buttons Use these classes on a Button block (Advanced > Additional CSS class), OR mirror the values in a GenerateBlocks Pro "Button" Global Style. ============================================================ */ .fsl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fsl-tap-min); padding: 0.8rem 1.6rem; /* ~13 / 26 */ font-family: var(--fsl-font-body); font-size: var(--fsl-fs-body); font-weight: 600; line-height: 1; border: 2px solid transparent; border-radius: var(--fsl-radius); text-decoration: none; cursor: pointer; transition: background-color var(--fsl-transition), color var(--fsl-transition), border-color var(--fsl-transition); } .fsl-btn--primary { background-color: var(--fsl-primary); color: var(--fsl-white); } .fsl-btn--primary:hover, .fsl-btn--primary:focus-visible { background-color: var(--fsl-primary-hover); color: var(--fsl-white); } .fsl-btn--secondary { background-color: transparent; color: var(--fsl-primary); border-color: var(--fsl-primary); } .fsl-btn--secondary:hover, .fsl-btn--secondary:focus-visible { background-color: var(--fsl-primary-050); color: var(--fsl-primary-hover); border-color: var(--fsl-primary-hover); } .fsl-btn:focus-visible { outline: 3px solid var(--fsl-primary); outline-offset: 2px; } /* BUTTON ROW — two (or more) buttons side by side under hero / section copy. Put .fsl-btn-row on the Container that holds the Button blocks. Container .fsl-btn-row Button .fsl-btn .fsl-btn--primary Button .fsl-btn .fsl-btn--secondary Buttons keep their natural width (they hug their labels — no stretching) and WRAP onto a second line on narrow screens rather than overflowing. margin-top separates the row from the lead paragraph above it. */ .fsl-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fsl-space-sm); /* 24px between buttons */ margin-top: var(--fsl-space-md); /* 40px clear of the copy above */ } /* Centred variant — for a centred hero or CTA band */ .fsl-btn-row--center { justify-content: center; } /* Optional: full-width stacked buttons on small phones (bigger tap targets). Without this they simply wrap and stay hugging their labels, which is fine. */ @media (max-width: 480px) { .fsl-btn-row--stack-mobile { flex-direction: column; align-items: stretch; } .fsl-btn-row--stack-mobile > .fsl-btn { width: 100%; } } /* Oversized "404" numeral — decorative anchor on the 404 page. Use on a Headline/Text block ABOVE the real H1 (this is not a heading). */ .fsl-404-number { font-size: clamp(4rem, 3rem + 8vw, 9rem); line-height: 1; font-weight: 800; color: var(--fsl-primary); margin: 0 0 var(--fsl-space-xs); } /* ============================================================ Section & layout helpers Apply .fsl-section to top-level GenerateBlocks containers for consistent vertical rhythm, or set the same padding in a GenerateBlocks "Section" Global Style. ============================================================ */ .fsl-section { padding-top: var(--fsl-section-y); padding-bottom: var(--fsl-section-y); padding-left: var(--fsl-gutter); padding-right: var(--fsl-gutter); } /* (Removed) The `.gbp-section__inner > .fsl-section:first-child` double-padding guard is gone — `.gbp-section` / `.gbp-section__inner` are retired site-wide; no .fsl-section nests inside a gbp wrapper any more, so the guard matched nothing. */ /* Collapse the double padding BETWEEN two neutral (white) sections. Each .fsl-section pads top AND bottom, so two stacked white sections would produce ~224px. Drop the following section's TOP padding so the preceding section's bottom padding owns the gap — a consistent ~112px between plain sections. The first section on a page is unaffected (no preceding sibling). */ .fsl-section + .fsl-section { padding-top: 0; } /* COLOURED BANDS keep BOTH paddings — the padding is part of the band, AND the band should sit in the page rhythm with a neutral gap on each side (so it reads as a distinct band, not welded to its neighbours). So: ENTRY — restore the coloured band's own top padding (the base rule above zeroed it). The preceding white section keeps its bottom padding as the neutral gap. */ .fsl-section + .fsl-section--tint, .fsl-section + .fsl-section--tint-deep, .fsl-section + .fsl-section--feature, .fsl-section + .fsl-section--brand, .fsl-section + .fsl-section--muted, .fsl-section + .fsl-section--ink { padding-top: var(--fsl-section-y); } /* EXIT — the section AFTER a coloured band restores its top padding, so there's a neutral gap below the band too (the band's own bottom padding is trapped inside its colour and gives no neutral space). */ .fsl-section--tint + .fsl-section, .fsl-section--tint-deep + .fsl-section, .fsl-section--feature + .fsl-section, .fsl-section--brand + .fsl-section, .fsl-section--muted + .fsl-section, .fsl-section--ink + .fsl-section { padding-top: var(--fsl-section-y); } /* Result: white↔white ≈ 112; each coloured band ≈ 112 neutral + 112 internal on each side — consistent, and the band breathes and floats in the rhythm. */ /* NOTE: the former `.fsl-split + .fsl-section--*` stopgap (a top margin to supply the neutral gap when a coloured band followed a bare split on the old gbp-section pages) has been removed. All Business Sales pages — process, preparation, consolidation, valuation, retirement — are now built as top-level .fsl-section bands, so the neutral gap comes from section padding via the rules above and the stopgap is no longer needed. */ /* (Removed) The `.gbp-section__inner > .fsl-section:last-child` bottom-padding drop is gone for the same reason — no .fsl-section sits inside a gbp wrapper now that `.gbp-section` is retired site-wide. */ .fsl-section--muted { background-color: var(--fsl-surface-muted); } .fsl-section--brand { background-color: var(--fsl-primary); color: var(--fsl-white); } .fsl-section--brand :is(h1, h2, h3, h4) { color: var(--fsl-white); } .fsl-container { /* inner width constraint */ width: 100%; max-width: var(--fsl-content-max); margin-left: auto; margin-right: auto; } .fsl-measure { max-width: var(--fsl-measure); } /* readable text column */ /* ============================================================ Readable measure — enforced SITE-WIDE, not per block. You do not need to add .fsl-measure to anything. Why this is safe as a blanket rule: max-width is SELF-LIMITING. It only has an effect where the container is WIDER than the measure, so cards, grid columns, the sidebar and the footer columns (all narrower than 72ch) are untouched automatically. No auto margins on purpose: centring the column would let prose drift off the left edge of its own heading. Centring is opt-in. Measured before this rule: body paragraphs were running at ~151 characters per line (1280px wide). Readable is 60-75. ============================================================ */ .entry-content :is(p, li, blockquote), .fsl-prose :is(p, li, blockquote) { max-width: var(--fsl-measure); } /* .fsl-prose exists because Block Element templates (the CPT singles) render WITHOUT .entry-content — GeneratePress's article wrapper is replaced. So the measure rule never reached them and the body copy ran at ~828px (~100 chars per line). Add fsl-prose to the content Container of any single template. */ /* Opt out — full-bleed bands, hero copy, deliberately wide intros */ .fsl-bleed :is(p, li, blockquote) { max-width: none; } /* Centred bands (CTA, trust band) — keep the capped column centred */ .fsl-center :is(p, li, blockquote) { margin-inline: auto; } /* Practice-area body sections — the rows of the pa_sections Looper (heading + prose). Give consecutive themed sections a clear vertical rhythm so they read as distinct topics rather than one run of text. */ .pa-section + .pa-section { margin-top: var(--fsl-space-lg); } /* 64px between topics */ .pa-section > :is(h2, h3) { margin-bottom: var(--fsl-space-xs); } /* ============================================================ Tap targets — give menu links a comfortable hit area. Adjust the selectors to match your menu markup. ============================================================ */ .main-navigation .menu-item a, .site-footer nav .menu-item a { padding-top: 0.6rem; padding-bottom: 0.6rem; } /* ============================================================ Dark chrome — header, sticky nav & footer The logo (white wordmark) and the footer contact links are WHITE assets, so they need dark backgrounds behind them. The header is GeneratePress-native, so the Customizer owns its NAV colours. Only two things are set here: 1. the header background, and 2. the STICKY nav, which the Customizer can't make translucent. NEVER add these two rules — each one broke the site: .main-navigation { background: transparent } -> kills the STICKY nav. It is position:fixed and detached from the header, so there is nothing dark behind it => white links floating on a white page. .main-navigation .main-nav ul ul { background: ... } -> out-specifies the Customizer's sub-menu colour (0,2,2 beats 0,1,2), so the sub-menu "lift" silently does nothing. Set the sub-menu in the Customizer. FOOTER: the Customizer can't reach it (it's GenerateBlocks), so it is styled below. ============================================================ */ /* NOTE: every var() below carries a hard-coded FALLBACK. If a token is ever missing from :root, an undefined var() makes the whole declaration invalid and the property resets to its initial value — background-color becomes TRANSPARENT, and it still overrides the Customizer. That silently blanked this header and footer three times. The fallbacks make it fail-safe: worst case it renders ink. */ /* Header */ .site-header { background-color: var(--fsl-header-bg, #111827); } /* Sticky navigation — translucent ink. position:fixed, so it needs its own background or it floats transparent. At 85% over white content, white links measure ~10:1. */ #sticky-navigation { background-color: var(--fsl-header-bg-sticky, rgba(17, 24, 39, 0.85)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Sticky nav logo. GeneratePress wraps it as .navigation-branding > .sticky-navigation-logo > a > img — NOT ".navigation-logo" (that class does not exist; a rule using it silently matches nothing). width:auto is REQUIRED: without it the wordmark is pinned to a fixed width and squashed ~42% horizontally — which makes the logo LOOK smaller than the header logo despite being taller, because a wordmark reads by its width. PADDING:0 is REQUIRED: GeneratePress puts `padding:10px 0` on this image, and because the image is border-box, that 20px was eaten OUT of the height — a "36px" logo rendered as only ~16px of actual wordmark inside 20px of padding, which is why it looked minuscule. Zero it so the height is all logo. Height is PROPORTIONAL to the bar: the static header is 75px tall with a 35px logo; the sticky bar is 67px, so 35 × 67/75 ≈ 31.3px keeps the same logo-to- bar ratio and the stuck bar reads as a true condensed version of the header. */ #sticky-navigation .navigation-branding img { height: calc(35px * 67 / 75); /* ≈31.3px — proportional to the 67px sticky bar */ width: auto; max-width: none; padding: 0; } /* Third-level sub-menus (sub-SUB-menus). THE ONE HEADER RULE THAT IS LEGITIMATE. GeneratePress deliberately sets these transparent in click-dropdown mode: .dropdown-click nav ul ul ul { background: transparent } -> (0,1,4) because it assumes level 3 renders nested INSIDE the level-2 panel. Here it renders as its own flyout, so white links float over the page with nothing behind them. The Customizer exposes Navigation and Sub-Navigation colours only — there is NO level-3 control — so this cannot be fixed in the Customizer. .main-navigation .main-nav ul ul ul is (0,2,3) and wins on class count. #4B5563 is one step lighter than the #374151 level-2 panel (white = 7.6:1). */ .main-navigation .main-nav ul ul ul, #sticky-navigation .main-nav ul ul ul { background-color: var(--fsl-submenu-l3, #4B5563); } /* Footer */ .site-footer { background-color: var(--fsl-footer-bg, #111827); color: var(--fsl-footer-text, #E5E7EB); } .site-footer a { color: var(--fsl-footer-link, #FFFFFF); } .site-footer a:hover, .site-footer a:focus-visible { color: var(--fsl-footer-link-hover, #50C0F0); } .site-footer :is(h1, h2, h3, h4, h5, h6) { color: var(--fsl-white, #FFFFFF); } /* Footer contact icons (envelope / phone) — space between icon and text. The icon is a .gb-shape SPAN sitting as a SIBLING of the link, not inside it, and measured at exactly 0px apart. A right MARGIN on the shape is the robust fix here — a flex `gap` on the row would do nothing, because the footer rows compute as display:block (unlike the sidebar, where the row is flex). Scoped to the footer. If social icons get added later and shouldn't carry this spacing, tighten the selector to the contact rows. */ .site-footer .gb-shape { margin-right: 0.5em; } /* Footer search widget, sitting on the dark panel */ .site-footer .wp-block-search__button { background-color: var(--fsl-primary, #066AAB); color: var(--fsl-white, #FFFFFF); border-radius: var(--fsl-radius, 3px); } /* FOOTER BAR — the bottom row: copyright left, legal links right, one line. Container .fsl-footer-bar Container → © {{current_year}} FS Legal Solicitors LLP Container .fsl-footer-links Link → Privacy Policy Link → Complaints Procedure space-between pins the two groups to opposite ends; align-items keeps them on a shared baseline. On mobile the row WRAPS and both groups left-align, so the links drop under the copyright instead of squashing into a corner. */ .fsl-footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--fsl-space-sm); width: 100%; /* Hairline above, matching .fsl-footer-notice, so the bottom bar reads as a separated tier rather than floating. margin-top = space ABOVE the rule (clear of the notice/content preceding it); padding-top = space BELOW the rule, before the copyright text. Both are needed — padding alone leaves the rule sitting tight against whatever is above it. */ border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: var(--fsl-space-md); padding-top: var(--fsl-space-md); } /* The links group — side by side, never stacked, with a comfortable gap. */ .fsl-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fsl-space-sm); } .fsl-footer-bar, .fsl-footer-links a { font-size: var(--fsl-fs-small); } @media (max-width: 600px) { .fsl-footer-bar { justify-content: flex-start; } } /* FOOTER NOTICE — the bank-fraud / client-protection warning. Site-wide in the footer so it appears on the pages a client is reading mid-matter, when they are actually at risk. Marked out from the surrounding boilerplate by the sky-blue accent bar and a hairline above, so it reads as a NOTICE rather than small print — without shouting. Container .fsl-footer-notice Text → "Please do not forward any money to anyone claiming to act on behalf of this firm without first contacting us to verify our bank details." Do NOT reword the notice itself — the phrasing is likely approved against the SRA's cybercrime guidance. */ .fsl-footer-notice { position: relative; margin-top: var(--fsl-space-md); padding-top: var(--fsl-space-sm); padding-left: var(--fsl-space-sm); border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--fsl-footer-text, #E5E7EB); font-size: var(--fsl-fs-small); line-height: var(--fsl-lh-body); max-width: var(--fsl-measure); } /* the sky-blue bar — vertical, hugging the left edge of the notice text */ .fsl-footer-notice::before { content: ""; position: absolute; left: 0; top: var(--fsl-space-sm); bottom: 0; width: 3px; border-radius: 2px; background-color: var(--fsl-accent, #50C0F0); } .fsl-footer-notice p { margin: 0; max-width: none; } /* If it ever sits on a LIGHT surface (e.g. a contact page), keep it legible */ .fsl-section .fsl-footer-notice, .entry-content .fsl-footer-notice { color: var(--fsl-text); border-top-color: var(--fsl-border); } /* Visible focus on dark chrome */ .site-header a:focus-visible, .main-navigation a:focus-visible, .site-footer a:focus-visible { outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* ============================================================ Elevation & brand-motif helpers (design elevation) ============================================================ */ /* Alternating / feature section backgrounds — prefer the blue tint over grey */ .fsl-section--tint { background-color: var(--fsl-tint); } .fsl-section--tint-deep { background-color: var(--fsl-tint-deep); } /* accreditations plinth */ .fsl-section--feature { background-color: var(--fsl-primary); color: var(--fsl-white); } .fsl-section--feature :is(h1, h2, h3, h4) { color: var(--fsl-white); } .fsl-section--ink { background-color: var(--fsl-ink); color: var(--fsl-white); } .fsl-section--ink :is(h1, h2, h3, h4) { color: var(--fsl-white); } /* Title band — the slim kicker + H1 band above the first content band. On its own a standalone .fsl-section puts a full section gap (~112px) under the H1; the title should sit closer to the content it introduces. Add .fsl-section--title to the title band to tighten its bottom. (Its top keeps the full breathing room below the header.) `.fsl-section--headline` is an accepted ALIAS of `--title` (same behaviour) — `--title` is the canonical name. */ .fsl-section--title, .fsl-section--headline { padding-bottom: var(--fsl-space-md); } /* ~40px under a bare kicker + H1 */ /* When the title band also carries a lead line (kicker + H1 + intro), it's a fuller block introducing a rich page — give it more room before the first band so it doesn't crowd. Bare-title pages (e.g. Contact) keep the tight 40. */ .fsl-section--title:has(.fsl-lead), .fsl-section--headline:has(.fsl-lead) { padding-bottom: var(--fsl-space-lg); } /* ~64px */ /* Logo motif — short accent bar (eyebrow) above a heading */ .fsl-eyebrow::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background-color: var(--fsl-accent); margin-bottom: 0.75rem; } /* The eyebrow bar accents H2/H3 SECTION headings only. The page H1 already gets its lead-in from the .fsl-kicker, so if .fsl-eyebrow is ever applied to a container wrapping the H1 (a title-band mistake), suppress the duplicate bar. */ .fsl-eyebrow:has(> h1)::before, .fsl-eyebrow:has(> .gb-text h1)::before { display: none; } /* H1 KICKER — a short WORDED label above the page title (e.g. "BUSINESS SALES"). Deliberately different from .fsl-eyebrow (a bare bar STACKED above H2 section headings): the kicker is a text label with the accent bar INLINE beside it, so the H1 gets a lead-in without looking like just another accented section head. Use on a Text block placed directly above the H1. Keep the label short (1–3 words) and let it name the section/page context, not repeat the H1. Text .fsl-kicker → "BUSINESS SALES" Headline H1 → "Selling your financial services firm" */ .fsl-kicker { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 0.6em; margin: 0 0 var(--fsl-space-xs); font-family: var(--fsl-font-body); font-size: var(--fsl-fs-small); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fsl-primary); } .fsl-kicker::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 2px; background-color: var(--fsl-primary); /* DEFAULT = all brand blue (label + bar) */ } /* Variant A — sky-blue accent bar (adds a touch of the logo accent). Add .fsl-kicker--accent alongside .fsl-kicker to use it. */ .fsl-kicker--accent::before { background-color: var(--fsl-accent); } /* On a centred hero, centre the label + bar as a unit */ .fsl-kicker--center { margin-inline: auto; } /* On the dark/brand hero, flip the label AND the bar to white so both stay visible (a brand-blue bar would vanish on the brand-blue band). The --accent variant keeps its sky bar there, which also reads fine on blue. */ .fsl-section--feature .fsl-kicker, .fsl-section--ink .fsl-kicker { color: var(--fsl-white); } .fsl-section--feature .fsl-kicker::before, .fsl-section--ink .fsl-kicker::before { background-color: var(--fsl-white); } .fsl-section--feature .fsl-kicker--accent::before, .fsl-section--ink .fsl-kicker--accent::before { background-color: var(--fsl-accent); } /* H1 KICKER AS A BREADCRUMB — the SEOPress breadcrumb, styled to look like the kicker (accent bar + uppercase brand-blue trail). Gives a visible breadcrumb AND the BreadcrumbList schema SEOPress outputs, in the kicker's slot above the H1. Wrap the SEOPress breadcrumb (block or the [seopress_breadcrumbs] shortcode) in a Container with class .fsl-breadcrumb, placed where the .fsl-kicker was. The markup is inline text ("Home › Seller Services › Valuation") with RDFa schema, so this styles the whole line + its links, not a fit-content chip. */ .fsl-breadcrumb { margin: 0 0 var(--fsl-space-xs); font-family: var(--fsl-font-body); font-size: var(--fsl-fs-small); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fsl-primary); } .fsl-breadcrumb::before { /* the kicker's accent bar, inline */ content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 3px; margin-right: 0.6em; border-radius: 2px; background-color: var(--fsl-primary); position: relative; top: -0.1em; } .fsl-breadcrumb a { color: var(--fsl-primary); text-decoration: none; } .fsl-breadcrumb a:hover { color: var(--fsl-primary-hover); } /* colour shift, no underline */ .fsl-breadcrumb a:focus-visible { color: var(--fsl-primary-hover); outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* On a brand/ink band, flip to white (bar + text) */ .fsl-section--feature .fsl-breadcrumb, .fsl-section--ink .fsl-breadcrumb, .fsl-section--feature .fsl-breadcrumb a, .fsl-section--ink .fsl-breadcrumb a { color: var(--fsl-white); } .fsl-section--feature .fsl-breadcrumb::before, .fsl-section--ink .fsl-breadcrumb::before { background-color: var(--fsl-white); } /* Heading highlight — sky-blue underline that hugs the text */ .fsl-underline { background-image: linear-gradient(var(--fsl-accent), var(--fsl-accent)); background-size: 100% 0.28em; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 0.06em; } /* ============================================================ Closing CTA band — centred heading + lead + one button. Designed for the slot ABOVE the accreditations plinth on the Business Sales pages. Put it on the section INNER container: Container .fsl-section .fsl-section--feature (full width, brand blue) Container .fsl-cta-band (inner, capped + centred) Container .fsl-eyebrow (optional accent bar) Headline H2 -> "Thinking about selling your firm?" Text .fsl-lead -> one supporting sentence Button .fsl-btn .fsl-btn--on-dark -> "Book a free consultation" --feature already paints the blue and turns headings white; --on-dark is the white-on-blue button (plain --primary would be blue-on-blue). ============================================================ */ .fsl-cta-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--fsl-space-sm); max-width: 62ch; margin-inline: auto; } .fsl-cta-band > * { margin-block: 0; } .fsl-cta-band .fsl-lead { color: rgba(255, 255, 255, 0.9); } /* In the CTA band everything is centred. The eyebrow bar is a display:block ::before, which ignores text-align — so without margin-inline:auto it stays pinned to the LEFT of the full-width eyebrow while the heading centres, and reads as offset. Centre the bar; and nudge it white so it reads on the blue. */ .fsl-cta-band .fsl-eyebrow::before { background-color: var(--fsl-white); margin-inline: auto; } /* ============================================================ Numbered process stepper — a sequential "1 → N" list. Structure (GenerateBlocks): Container .fsl-steps Container .fsl-step <- one per step Headline H3 <- "Get sale-ready" Text <- the step paragraph Container .fsl-step … The number and the connecting line are generated by CSS — you do NOT add "1." to the heading text. Reordering the containers renumbers itself. ============================================================ */ .fsl-steps { counter-reset: fsl-step; display: grid; gap: var(--fsl-space-md); max-width: var(--fsl-measure, 72ch); } .fsl-step { counter-increment: fsl-step; position: relative; padding-left: 4.5rem; /* room for the number badge */ } .fsl-step::before { content: counter(fsl-step); position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background-color: var(--fsl-primary, #066AAB); color: var(--fsl-white, #FFFFFF); font-weight: 700; font-size: var(--fsl-fs-h4, 1.125rem); line-height: 1; z-index: 1; } /* connecting line running down through the badges */ .fsl-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); /* centre of the 2.75rem badge */ top: 2.75rem; bottom: calc(-1 * var(--fsl-space-md)); width: 2px; background-color: var(--fsl-border, #E5E7EB); } .fsl-step > :is(h2, h3, h4) { margin: 0 0 var(--fsl-space-2xs); padding-top: 0.35rem; /* optical centring against the badge */ } .fsl-step > p { margin: 0; } @media (max-width: 600px) { .fsl-step { padding-left: 3.75rem; } .fsl-step::before { width: 2.25rem; height: 2.25rem; } .fsl-step:not(:last-child)::after { left: calc(1.125rem - 1px); top: 2.25rem; } } /* ============================================================ Framed media — stops an image ballooning to its natural size. Add .fsl-media--framed to the GB Image block (or its wrapper). Locks a landscape aspect ratio, crops with object-fit, caps height. Default 3:2; override per block with --fsl-media-ratio / --fsl-media-max. ============================================================ */ .fsl-media--framed, .fsl-media--framed img { display: block; width: 100%; } .fsl-media--framed img, img.fsl-media--framed { aspect-ratio: var(--fsl-media-ratio, 3 / 2); max-height: var(--fsl-media-max, 440px); object-fit: cover; border-radius: var(--fsl-radius-card); } /* Ratio helpers — add ALONGSIDE .fsl-media--framed so you never have to type the --fsl-media-ratio variable into a class field. e.g. team profile photos: class = "fsl-media--framed fsl-media--portrait". */ .fsl-media--portrait { --fsl-media-ratio: 4 / 5; --fsl-media-max: 640px; } /* upright, e.g. staff headshots */ .fsl-media--square { --fsl-media-ratio: 1 / 1; --fsl-media-max: 560px; } /* ============================================================ Split — a balanced two-column band (copy + media). Structure (GenerateBlocks): Container .fsl-split <- the inner container Container (copy: eyebrow, H2, text, button) Container (the .fsl-media--framed image) Columns are vertically centred so a short copy block doesn't leave the image floating. Add .fsl-split--reverse to flip media to the LEFT — use it on alternating sections so the two intros mirror each other. Collapses to a single stacked column below 782px; on mobile the media comes first only if you add .fsl-split--media-first. ============================================================ */ .fsl-split { display: flex; gap: var(--fsl-space-lg); align-items: center; /* Space above each split. Gives the H1 -> intro gap AND the intro -> intro gap in one rule, since both intros are stacked inside a single section that only pads its outer top/bottom. Override to 0 if a split is ever the first thing in its own section. */ margin-top: var(--fsl-section-y); } /* Copy fills the row; the MEDIA column is the narrower, fixed share — and it stays narrow whichever side it's on, because we target the framed image's column directly rather than a fixed grid track. Flexbox (not grid) is what makes this order-independent. */ .fsl-split > * { flex: 1 1 0; min-width: 0; } /* The media column is the narrower one AND its side is set by `order`, not by flex-direction — so the side is deterministic no matter which order the two blocks sit in the builder. Default: media LEFT. */ .fsl-split > .fsl-media--framed, .fsl-split > :has(.fsl-media--framed) { flex: 0 1 42%; order: -1; } /* Reverse: media RIGHT */ .fsl-split--reverse > .fsl-media--framed, .fsl-split--reverse > :has(.fsl-media--framed) { order: 1; } /* When a split is the FIRST content in its band, its default top margin doubles with the section padding — and, worse, COLLAPSES out through a padding-top:0 section, adding ~112px BETWEEN bands (measured a 420px gap on the rebuilt /process/). Zero the margin whenever the split is the first child of its parent, whether that's the .fsl-section directly OR the .fsl-container inside it (the rebuilt pages nest the split one level deeper). The margin exists only to separate STACKED splits, which aren't first-child, so they keep it. */ .fsl-split:first-child { margin-top: 0; } /* Manual escape hatch for any other double-up. */ .fsl-split--flush { margin-top: 0; } @media (max-width: 782px) { .fsl-split { flex-direction: column; gap: var(--fsl-space-md); } .fsl-split > .fsl-media--framed, .fsl-split > :has(.fsl-media--framed) { flex: 0 0 auto; width: 100%; order: -1; } /* image on top for both */ /* Hero variant: keep the COPY (H1) first on mobile so the headline leads and the image drops below it. Put the copy block FIRST in source order, add .fsl-split--copy-first to the split. (Placed after the rule above so it wins.) */ .fsl-split--copy-first > .fsl-media--framed, .fsl-split--copy-first > :has(.fsl-media--framed) { order: 1; } } /* ============================================================ Pages WITH a right sidebar The theme's containers are FULL WIDTH — .site-content, .entry-content and .site.grid-container all run edge to edge. The 1280 "page body" you normally see does not come from GeneratePress at all; it comes from the BLOCKS (.gbp-section__inner and the constrained Group block). The sidebar is not a block, so it has nothing to obey: it flies to the viewport edge and drags the content column to x=0 with it. Fix the ROW that holds both, not the sidebar. ============================================================ */ .site-content:has(.is-right-sidebar) { max-width: var(--fsl-content-max); /* 1280 */ margin-inline: auto; padding-inline: var(--fsl-gutter); gap: var(--fsl-space-md); /* breathing room between copy and sidebar */ box-sizing: border-box; } /* Align the TOP of the sidebar with the top of the H1. The sidebar takes the same top padding as the content section, so the search box and the H1 start on the same line — one token, no arithmetic. Deliberately NOT bottom-aligned to the H1. That needs section padding + H1 height - search box height which depends on how many LINES the H1 occupies. The sidebar narrows the content column to ~850px, so a title like "Litigation and Dispute Resolution" wraps to two lines while "Corporate" stays on one — the offset would differ per page and need maintaining by hand. Top alignment is correct on every page regardless of title length. */ .widget-area.sidebar { padding-top: var(--fsl-section-y); } /* ============================================================ Right sidebar — theme styling Everything below replaces browser / WordPress defaults that were showing through: a black hairline on the search field, the WP core grey (#32373C) on the search button (the same leak as the footer), and SECTION-scale padding (112px) inside a 372px component. ============================================================ */ /* The contact block reads as a CARD, not as floating text. 112px of vertical padding inside a 372px column is section padding applied to a component — that is why it was 360px tall for four lines. */ .widget-area.sidebar .section { background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-top: 3px solid var(--fsl-accent); /* the logo bar motif */ border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); padding: var(--fsl-space-md) var(--fsl-space-sm); } /* Search field */ .widget-area.sidebar input[type="search"] { width: 100%; background-color: var(--fsl-white); border: 1px solid var(--fsl-border); /* was a black 0.67px hairline */ border-radius: var(--fsl-radius); padding: 0.7rem 0.9rem; font-family: var(--fsl-font-body); font-size: var(--fsl-fs-body); } .widget-area.sidebar input[type="search"]:focus-visible { border-color: var(--fsl-primary); outline: 3px solid var(--fsl-accent); outline-offset: 2px; } .widget-area.sidebar .wp-block-search__button { background-color: var(--fsl-primary); /* was #32373C, the WP default */ color: var(--fsl-white); border: 0; border-radius: var(--fsl-radius); padding: 0.7rem 1.2rem; font-weight: 600; min-height: var(--fsl-tap-min); } .widget-area.sidebar .wp-block-search__button:hover { background-color: var(--fsl-primary-hover); } /* The phone number is the conversion action — let it read like one. */ .widget-area.sidebar a[href^="tel:"] { font-size: var(--fsl-fs-h3); font-weight: 600; color: var(--fsl-primary); text-decoration: none; } .widget-area.sidebar a[href^="tel:"]:hover { color: var(--fsl-primary-hover); } .widget-area.sidebar a[href^="mailto:"] { color: var(--fsl-primary); } /* ============================================================ WPForms — style the contact form to the tokens. GenerateBlocks/GP don't touch WPForms markup, so without this it renders in the plugin's default grey. Scoped to .wpforms-form so it covers the form wherever placed. ============================================================ */ .wpforms-form .wpforms-field { padding: 0 0 var(--fsl-space-sm); } .wpforms-form .wpforms-field-label { font-family: var(--fsl-font-body); font-weight: 600; font-size: var(--fsl-fs-body); color: var(--fsl-ink); margin-bottom: 0.4rem; } .wpforms-form .wpforms-field-sublabel, .wpforms-form .wpforms-field-description { font-size: var(--fsl-fs-small); color: var(--fsl-text); font-weight: 400; } .wpforms-form .wpforms-required-label { color: var(--fsl-primary); } /* the * — brand, not alarm red */ .wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form input[type="url"], .wpforms-form input[type="number"], .wpforms-form select, .wpforms-form textarea { width: 100%; background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-radius: var(--fsl-radius); padding: 0.7rem 0.9rem; font-family: var(--fsl-font-body); font-size: var(--fsl-fs-body); color: var(--fsl-text); min-height: var(--fsl-tap-min); box-sizing: border-box; } .wpforms-form textarea { min-height: 8rem; } .wpforms-form input:focus, .wpforms-form select:focus, .wpforms-form textarea:focus, .wpforms-form input:focus-visible { border-color: var(--fsl-primary); outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* International phone (intl-tel-input) — let the wrapper fill the column */ .wpforms-form .iti { width: 100%; } /* GDPR / checkbox rows read as body text, not field labels */ .wpforms-form .wpforms-field-checkbox label, .wpforms-form .wpforms-field-gdpr-checkbox label { font-weight: 400; font-size: var(--fsl-fs-small); color: var(--fsl-text); } /* Submit — the primary button look */ .wpforms-form button[type="submit"], .wpforms-form .wpforms-submit { background-color: var(--fsl-primary); color: var(--fsl-white); border: 2px solid transparent; border-radius: var(--fsl-radius); padding: 0.8rem 1.6rem; font-family: var(--fsl-font-body); font-weight: 600; font-size: var(--fsl-fs-body); min-height: var(--fsl-tap-min); cursor: pointer; transition: background-color var(--fsl-transition); } .wpforms-form button[type="submit"]:hover, .wpforms-form .wpforms-submit:hover { background-color: var(--fsl-primary-hover); } .wpforms-form button[type="submit"]:focus-visible { outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* Validation */ .wpforms-form label.wpforms-error, .wpforms-form .wpforms-error { color: #B42318; font-size: var(--fsl-fs-small); } .wpforms-form input.wpforms-error, .wpforms-form textarea.wpforms-error, .wpforms-form select.wpforms-error { border-color: #B42318; } /* Confirmation message after submit */ .wpforms-confirmation-container-full { background-color: var(--fsl-tint); border: 1px solid var(--fsl-border); border-left: 3px solid var(--fsl-accent); border-radius: var(--fsl-radius); padding: var(--fsl-space-sm); color: var(--fsl-ink); } /* ============================================================ Contact details block (address / phone / email) beside the form. Add .fsl-contact-details to the Container holding the details. ============================================================ */ .fsl-contact-details p { margin: 0 0 var(--fsl-space-xs); } .fsl-contact-details a[href^="tel:"] { font-size: var(--fsl-fs-h3); font-weight: 700; color: var(--fsl-primary); text-decoration: none; } .fsl-contact-details a[href^="tel:"]:hover { color: var(--fsl-primary-hover); } .fsl-contact-details a[href^="mailto:"] { color: var(--fsl-primary); } /* Form panel — an elevated card around a WPForms block (or any form). Same card treatment as the sidebar sections, incl. the accent top-bar motif. Wrap the WPForms block in a Container with class .fsl-form-panel. */ .fsl-form-panel { background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-top: 3px solid var(--fsl-accent); border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); padding: var(--fsl-space-md); } /* the last field's bottom padding + the panel padding double up — trim it */ .fsl-form-panel .wpforms-form .wpforms-field:last-of-type { padding-bottom: 0; } /* Map embed — responsive, rounded, borderless. Add .fsl-map to the iframe (or its wrapper). Give it a full-bleed band or keep it in the container. */ .fsl-map { display: block; width: 100%; border: 0; border-radius: var(--fsl-radius-card); aspect-ratio: 16 / 9; } @media (max-width: 782px) { .fsl-map { aspect-ratio: 4 / 3; } } /* ============================================================ Sitemap page — the SEOPress HTML sitemap block laid out as a balanced multi-column set of content-type groups instead of one long single column. Targets the SEOPress markup: .wrap-html-sitemap > .sp-wrap-cpt (h2.sp-cpt-name + .sp-archive-link + ul.sp-list-posts) Column flow (not grid) so the tall "Pages" group doesn't leave gaps. ============================================================ */ .wrap-html-sitemap { column-count: 3; column-gap: var(--fsl-space-lg); } @media (max-width: 900px) { .wrap-html-sitemap { column-count: 2; } } @media (max-width: 600px) { .wrap-html-sitemap { column-count: 1; } } /* Each content-type group stays whole and flows down the columns. */ .wrap-html-sitemap .sp-wrap-cpt { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; /* reliable break-inside:avoid across browsers */ width: 100%; margin: 0 0 var(--fsl-space-md); } /* Group heading — smaller than the H1, with the sky-blue keyline motif. */ .wrap-html-sitemap .sp-cpt-name { font-size: var(--fsl-fs-h4, 1.25rem); margin: 0 0 var(--fsl-space-2xs); padding-top: 0.6rem; border-top: 3px solid var(--fsl-accent); } .wrap-html-sitemap .sp-archive-link { font-size: var(--fsl-fs-small); font-weight: 600; margin-bottom: var(--fsl-space-2xs); } /* Link lists — no bullets, tidy spacing; nested child pages indent. */ .wrap-html-sitemap ul { list-style: none; margin: 0; padding: 0; } .wrap-html-sitemap li { margin: 0 0 0.35rem; } .wrap-html-sitemap li ul { padding-left: 1rem; margin-top: 0.35rem; } .wrap-html-sitemap a { color: var(--fsl-primary); text-decoration: none; } .wrap-html-sitemap a:hover { color: var(--fsl-primary-hover); } /* Hide an empty content-type group (e.g. "Posts" with no items). */ .wrap-html-sitemap .sp-wrap-cpt:not(:has(.sp-list-posts li)) { display: none; } /* Vertical rhythm between sidebar items. NOTE: .inside-right-sidebar holds ONE unnamed
wrapping everything, so a "> * + *" rule on it never reaches the form and the card — they are siblings a level deeper. Target the card directly. */ .widget-area.sidebar .section { margin-top: var(--fsl-space-sm); /* 24px clear of the search box */ } /* Contact icons (phone / envelope) replacing the "Tel:" and "Email:" labels. GenerateBlocks wraps icons in .gb-shape — NOT .gb-icon. The icon sits OUTSIDE the , as a sibling inside the .gb-text row, so it inherits that row's size and colour (17px / #374151 body grey) rather than the link's (30px / brand blue). currentColor was working — it was just inheriting from the wrong ancestor. So style the ROW, and let the icon and the text share one size and one colour by inheritance. Sizing the icon at 1em then makes it track the text automatically: 30px beside the phone number, body size beside the email. CAREFUL WITH THE SELECTOR. The markup is:

<- the ROW (icon + link) <- icon <- link

"gb-text" and "gb-text-20d2422d" are DIFFERENT classes. Targeting .gb-text hits the inner span, which wraps only the link — it can never reach the icon. [class*="gb-text-"] (note the trailing hyphen) matches the outer row only. */ .widget-area.sidebar .section [class*="gb-text-"]:has(a[href^="tel:"]), .widget-area.sidebar .section [class*="gb-text-"]:has(a[href^="mailto:"]) { display: flex; align-items: center; gap: 0.5em; color: var(--fsl-primary); } .widget-area.sidebar .section [class*="gb-text-"]:has(a[href^="tel:"]) { font-size: var(--fsl-fs-h3); /* icon + number both scale to this */ font-weight: 600; } .widget-area.sidebar .gb-shape svg { width: 1em; height: 1em; fill: currentColor; flex: none; } /* Contact card — hierarchy and rhythm. The spacing was INVERTED: "Contact us" -> phone 20px (between the LABEL and the group) phone -> email 45px (WITHIN the group) Proximity says the opposite: space BETWEEN groups must exceed space WITHIN a group. As it stood, the eye read "Contact us / 01384 889 900" as one unit and left info@fsl.legal orphaned below it. The heading was also 30px — the same size as the phone number — so the label competed with the action instead of introducing it. Drop it to H4 and let the number be the loudest thing in the card. */ /* "Contact us" is a LABEL, not a heading. An

that is SMALLER than the content beneath it reads as a mistake — the fix is to stop pretending it is a heading. Style it as an eyebrow: small, uppercase, letter-spaced. The .fsl-eyebrow class (added on the block) draws the sky-blue bar above it; this supplies the type. Adding the class alone does NOT resize it. */ .widget-area.sidebar .section > h3 { font-size: var(--fsl-fs-small); /* 15px */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fsl-text); margin-bottom: var(--fsl-space-sm); /* 24px — clear of the contact group */ } /* The CTA carried a background set on the GB block itself (#215BC2 — not a colour in this system), which beat .fsl-btn--primary at equal specificity. Scoped here so the design system wins. Better still: CLEAR the background colour on that block in GenerateBlocks, so the class is the single source. */ .widget-area.sidebar .section a.fsl-btn--primary { background-color: var(--fsl-primary); color: var(--fsl-white); } .widget-area.sidebar .section a.fsl-btn--primary:hover, .widget-area.sidebar .section a.fsl-btn--primary:focus-visible { background-color: var(--fsl-primary-hover); color: var(--fsl-white); } .widget-area.sidebar .section [class*="gb-text-"]:has(a[href^="tel:"]) { margin-bottom: var(--fsl-space-2xs); /* 8px — phone + email are ONE group */ } /* Optional: let the contact card follow the reader on long pages. 67px clears the sticky nav. Delete this rule if you'd rather it scrolled away. */ .widget-area.sidebar .section { position: sticky; top: calc(67px + var(--fsl-space-sm)); } /* ============================================================ Article layout — sticky meta column + scrolling article (the Gunner & Co pattern). Add to the single template: Container .fsl-article-grid Container .fsl-article-aside <- back link, type, date, author Container .fsl-prose <- H1, image, body ============================================================ */ .fsl-article-grid { display: grid; grid-template-columns: 1fr 2fr; /* ~33 / 67, as the reference */ gap: var(--fsl-space-lg); /* THE ONE THAT MATTERS. Without align-items:start, grid children STRETCH to the full row height — so the aside is already as tall as the article and has nowhere to travel. position:sticky then does nothing at all, and it looks like sticky is "not working". It is; it just has no slack. */ align-items: start; } .fsl-article-aside { position: sticky; top: calc(67px + var(--fsl-space-sm)); /* clears the sticky nav */ /* The children arrive with inconsistent margins (0 / 25.5px / 25.5px / 0), so the back link had nothing beneath it. One flex gap governs all of it — no classes needed on the blocks. */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--fsl-space-xs); } .fsl-article-aside > * { margin-block: 0; } /* Extra air under the back link — it's a different kind of thing from the meta lines below it, so it shouldn't sit on the same rhythm. */ .fsl-article-aside > :first-child { margin-bottom: var(--fsl-space-xs); } /* ============================================================ Content + right-hand sticky aside — for long prose pages (practice-area pages: Litigation, Corporate, Employment…): body copy LEFT (wide), a sticky sidebar of CTA / nav / credentials RIGHT. Container .fsl-content-aside Container .fsl-prose <- the body copy (LEFT, wide) Container .fsl-aside <- sticky sidebar (RIGHT, narrow) ============================================================ */ .fsl-content-aside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); gap: var(--fsl-space-lg); align-items: start; /* lets the sticky aside travel */ } @media (max-width: 860px) { .fsl-content-aside { grid-template-columns: 1fr; } } .fsl-aside { position: sticky; top: calc(67px + var(--fsl-space-sm)); /* clears the sticky header */ display: flex; flex-direction: column; gap: var(--fsl-space-md); } @media (max-width: 860px) { .fsl-aside { position: static; } } /* White keyline card for aside blocks (specialisms, credentials). */ .fsl-aside-card { background: var(--fsl-white); border: 1px solid var(--fsl-border); border-top: 3px solid var(--fsl-accent); /* the logo-bar motif */ border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); padding: var(--fsl-space-sm); } .fsl-aside-card > :is(h2, h3) { margin: 0 0 var(--fsl-space-xs); font-size: var(--fsl-fs-h4, 1.25rem); } /* Brand variant — the conversion card (the CTA). */ .fsl-aside-card--brand { background: var(--fsl-primary); border-color: var(--fsl-primary); border-top-color: var(--fsl-accent); color: var(--fsl-white); } .fsl-aside-card--brand :is(h2, h3, p) { color: var(--fsl-white); } .fsl-aside-card--brand a[href^="tel:"] { color: var(--fsl-white); font-weight: 700; font-size: var(--fsl-fs-lead); text-decoration: none; display: inline-block; } /* Specialisms nav — tidy link list with a chevron, keyline dividers. Works whether the items are
  • (a List block) or
    (a GB Looper), because the divider targets DIRECT CHILDREN, not li specifically. */ .fsl-aside-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .fsl-aside-nav > * + * { border-top: 1px solid var(--fsl-border); } /* divider between rows */ .fsl-aside-nav a { display: block; padding: 0.6rem 0; background: none; /* neutralise GB Button styling if a Button is used */ border: 0; color: var(--fsl-primary); font-weight: 600; text-decoration: none; } .fsl-aside-nav a::after { content: " →"; opacity: 0.55; } .fsl-aside-nav a:hover { color: var(--fsl-primary-hover); } /* Credentials / facts — a bold stat + short line per row. Put .fsl-facts on the LIST (ul) or on a GB Looper, not the card. - Hard-coded: each
  • = stat then the supporting text. - GB Looper: .fsl-facts on the Looper; each row is a
    holding a stat block (class .fsl-fact-stat) + a plain supporting-line block. */ .fsl-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fsl-space-xs); } .fsl-facts > * { /* each ROW — small, muted (li OR looper div) */ font-size: var(--fsl-fs-small); color: var(--fsl-text); line-height: var(--fsl-lh-body); } .fsl-facts strong, .fsl-facts span.stat, .fsl-facts .fsl-fact-stat { /* the bold stat, on its own line */ display: block; color: var(--fsl-primary); font-size: var(--fsl-fs-lead); font-weight: 700; line-height: 1.1; } /* Responsive visibility — swap elements desktop ⇄ mobile (breakpoint matches the .fsl-content-aside stack point, 860px). Prefer GenerateBlocks' own device- visibility toggles where you can; use these when you need a plain CSS hook. e.g. Litigation CTA swap: aside CTA card + new bottom CTA = .fsl-hide-mobile; the original bottom CTA band = .fsl-hide-desktop. */ @media (max-width: 860px) { .fsl-hide-mobile { display: none !important; } } .fsl-hide-desktop { display: none !important; } @media (max-width: 860px) { .fsl-hide-desktop { display: revert !important; } } /* Back link: a way out, not a call to action. A solid filled button here competes with the CTA row for the same attention and loses the page its only real conversion point. Add .fsl-back-link to the block and clear its background + padding in GenerateBlocks. */ .fsl-back-link { display: inline-flex; align-items: center; gap: 0.4em; padding: 0; background: none; border: 0; color: var(--fsl-primary, #066AAB); font-size: var(--fsl-fs-small); font-weight: 600; text-decoration: none; } .fsl-back-link::before { content: "←"; } .fsl-back-link:hover { color: var(--fsl-primary-hover, #05548A); /* colour shift, no underline — matches the rest of the site */ } .fsl-back-link:focus-visible { color: var(--fsl-primary-hover, #05548A); outline: 3px solid var(--fsl-accent); /* keyboard focus ring, like buttons / jump nav */ outline-offset: 2px; } /* No independent scroll container on purpose: nested scrollbars are awkward on a trackpad, hide content, and behave badly on touch. Sticky gives the same result with none of that. NOTE: position:sticky breaks if ANY ancestor has overflow hidden/auto/scroll. */ @media (max-width: 900px) { .fsl-article-grid { grid-template-columns: 1fr; } .fsl-article-aside { position: static; } /* stacks above the article */ } /* ============================================================ CTA row beneath the article — two panels side by side Container .fsl-cta-row Container .fsl-cta-card .fsl-cta-card--primary <- convert Headline H2 .fsl-cta-card__title Text (one line) Button .fsl-btn .fsl-btn--on-dark Container .fsl-cta-card .fsl-cta-card--tint <- continue reading …same tree, .fsl-btn .fsl-btn--secondary The two cards are deliberately NOT identical. Gunner & Co give both panels equal weight, which flattens the choice — but only one of the two is the money action. Primary carries the brand-blue fill; the browse card recedes. ============================================================ */ .fsl-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fsl-space-md); } /* Top margin ONLY when the row follows sibling content — its original use is beneath the article body on a single, where it needs separating from the prose. Used as a standalone band (e.g. the Deals/Testimonials proof section), it's the only child of its container, so the margin would stack on the section padding and make that boundary ~64px bigger than the others. `* +` scopes it out. */ :is(*) + .fsl-cta-row { margin-top: var(--fsl-space-lg); } @media (max-width: 767px) { .fsl-cta-row { grid-template-columns: 1fr; } } .fsl-cta-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fsl-space-xs); height: 100%; /* equal heights across the row */ padding: var(--fsl-space-md); border-radius: var(--fsl-radius-card); } /* push the button to the bottom so the two buttons line up across the row even when one card's copy runs to a second line */ .fsl-cta-card > :last-child { margin-top: auto; } .fsl-cta-card__title { margin: 0; font-size: var(--fsl-fs-h3); line-height: 1.25; } .fsl-cta-card p { margin: 0; max-width: 42ch; } /* -- Convert: brand blue ------------------------------------ */ .fsl-cta-card--primary { background-color: var(--fsl-primary, #066AAB); color: var(--fsl-white, #FFFFFF); } .fsl-cta-card--primary .fsl-cta-card__title { color: var(--fsl-white, #FFFFFF); } .fsl-cta-card--primary p { color: rgba(255, 255, 255, 0.88); } /* white button on the blue card — .fsl-btn--primary would be blue on blue */ .fsl-btn--on-dark { background-color: var(--fsl-white, #FFFFFF); color: var(--fsl-primary, #066AAB); border: 1px solid var(--fsl-white, #FFFFFF); } .fsl-btn--on-dark:hover, .fsl-btn--on-dark:focus-visible { background-color: var(--fsl-tint, #EAF6FD); border-color: var(--fsl-tint, #EAF6FD); color: var(--fsl-primary-hover, #05548A); } /* Ghost (outline) button on the blue CTA — the SECONDARY action beside the solid .fsl-btn--on-dark, e.g. "Back to the team". Transparent with a white hairline + white label; fills to solid white on hover so it reads as the quieter of the two without disappearing. Pair one --on-dark (primary) with one --ghost-on-dark (secondary) in a .fsl-btn-row. */ .fsl-btn--ghost-on-dark { background-color: transparent; color: var(--fsl-white, #FFFFFF); border: 1px solid rgba(255, 255, 255, 0.7); } .fsl-btn--ghost-on-dark:hover, .fsl-btn--ghost-on-dark:focus-visible { background-color: var(--fsl-white, #FFFFFF); border-color: var(--fsl-white, #FFFFFF); color: var(--fsl-primary, #066AAB); } .fsl-btn--ghost-on-dark:focus-visible { outline: 3px solid var(--fsl-accent, #50C0F0); outline-offset: 2px; } /* -- Continue: tint, keylined ------------------------------- */ .fsl-cta-card--tint { background-color: var(--fsl-tint, #EAF6FD); border: 1px solid var(--fsl-border, #E5E7EB); color: var(--fsl-text, #374151); } .fsl-cta-card--tint .fsl-cta-card__title { color: var(--fsl-ink, #111827); } /* -- Variant: the literal Gunner & Co treatment -------------- No panels at all — two centred columns split by a vertical brand rule. Add .fsl-cta-row--rule to the row and drop the --primary/--tint modifiers. */ .fsl-cta-row--rule { gap: 0; } .fsl-cta-row--rule .fsl-cta-card { align-items: center; text-align: center; background: none; border: 0; padding-inline: var(--fsl-space-lg); } .fsl-cta-row--rule .fsl-cta-card + .fsl-cta-card { border-left: 2px solid var(--fsl-accent, #50C0F0); } @media (max-width: 767px) { .fsl-cta-row--rule .fsl-cta-card + .fsl-cta-card { border-left: 0; border-top: 2px solid var(--fsl-accent, #50C0F0); padding-top: var(--fsl-space-md); } } /* ============================================================ Archive pagination GenerateBlocks ships this as #000 on #fff with 1px #000 borders — outside the palette entirely, 14px text, and no tap target. Restyled to the tokens. Selector is wildcarded so it covers every archive (Insights, Deals, Events) rather than one block's hashed class. ============================================================ */ [class*="gb-query-page-numbers"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fsl-space-2xs); margin-top: var(--fsl-space-lg); } [class*="gb-query-page-numbers"] .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--fsl-tap-min); /* 44px — was an unclickable 14px box */ min-height: var(--fsl-tap-min); padding-inline: 0.75rem; font-family: var(--fsl-font-body); font-size: var(--fsl-fs-small); font-weight: 600; line-height: 1; color: var(--fsl-text); background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-radius: var(--fsl-radius); text-decoration: none; transition: background-color var(--fsl-transition), border-color var(--fsl-transition), color var(--fsl-transition); } [class*="gb-query-page-numbers"] a.page-numbers:hover { color: var(--fsl-primary-hover); background-color: var(--fsl-primary-050); border-color: var(--fsl-primary); } [class*="gb-query-page-numbers"] .page-numbers.current { color: var(--fsl-white); background-color: var(--fsl-primary); border-color: var(--fsl-primary); } [class*="gb-query-page-numbers"] .page-numbers.prev, [class*="gb-query-page-numbers"] .page-numbers.next { padding-inline: 1rem; } /* The ellipsis is not a control — give it no box and no tap target, so it doesn't read as a clickable page. */ [class*="gb-query-page-numbers"] .page-numbers.dots { min-width: auto; padding-inline: 0.25rem; background-color: transparent; border-color: transparent; color: var(--fsl-text); } [class*="gb-query-page-numbers"] a.page-numbers:focus-visible { outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* ============================================================ Archive facets — a horizontal toolbar ABOVE the grid Add class "fsl-facet-row" to the Container holding the Facet blocks. NOTE: this only works once the GB Grid is a SINGLE column. While the Grid is 2-up, the facets Container is only half the width and the card grid is squeezed to 210px columns. ============================================================ */ .fsl-facet-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fsl-space-sm); margin-bottom: var(--fsl-space-md); } /* Each facet shares the row and wraps gracefully rather than being forced to the full container width. */ .fsl-facet-row .wpgb-facet { flex: 1 1 200px; min-width: 0; } /* Reset / Apply are actions, not filters — keep them from stretching. */ .fsl-facet-row .wpgb-facet:has(button) { flex: 0 0 auto; } @media (max-width: 767px) { .fsl-facet-row .wpgb-facet { flex: 1 1 100%; } } /* ============================================================ Accreditations / trust band Add class "fsl-accreditations" to the band's Container. ============================================================ */ /* DELIVERED AS A BLOCK ELEMENT, hooked to generate_before_footer. That is what makes this correct, and it is worth understanding why: - FULL BLEED BY CONSTRUCTION. The element renders outside .entry-content, so it inherits the site canvas and matches the footer at every viewport with zero CSS. Inside the content it was caged twice: .wp-block-group__inner-container.is-layout-constrained -> max-width 1280 .gbp-section -> padding 0 40px - ONE OBJECT, SITE-WIDE. Previously the same block was duplicated across ~40 pages, each free to drift. Now it is one Element with Display Rules. NEVER use the usual calc(50% - 50vw) break-out on this site: .site-wrapper is capped at max-width: 1920px, so the page is a 1920px canvas centred in the viewport — the FOOTER is 1920px, not 100vw. A 100vw band would overhang the footer by ~232px each side at a 2400px viewport. "Full bleed" = 1920, not vw. No margin-top: the band's own section padding separates it from the content, and the preceding section already contributes its bottom padding. Adding a margin here stacked ~208px of dead air above the logos. */ .fsl-accreditations { margin-top: 0; } /* 50/50 columns, logos sharing a common vertical centre */ .fsl-accreditations .gb-grid-wrapper { align-items: center; } .fsl-accreditations .gb-grid-column { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; /* centre each logo within its column */ } /* Uniform logo height. width:auto is ESSENTIAL — setting height AND width distorts the image. (Same mistake that squashed the sticky nav logo by 42%.) Firm-Logo is 1.191:1 and the Legal 500 seal is 0.907:1, so at 224px tall they land at ~267px and ~203px wide respectively. Both are downscales from the source files (1072x900 and 272x300), so they stay sharp — no upscaling. */ .fsl-accreditations img { height: var(--fsl-accreditation-h, 224px); width: auto; max-width: 100%; object-fit: contain; display: block; } @media (max-width: 767px) { .fsl-accreditations .gb-grid-column { flex: 0 0 100%; max-width: 100%; /* GenerateBlocks gutters its grid ROWS with column padding, not gap. Zero it so row-gap below is the single source of the stacked spacing — otherwise the two mechanisms add together and the gap won't shrink. */ padding-top: 0; padding-bottom: 0; } .fsl-accreditations .gb-grid-wrapper { row-gap: var(--fsl-accreditation-gap-mobile, 1.5rem); /* 24px */ } } /* Card — soft elevation, rounded, optional accent keyline + hover lift. height:100% + column flex makes every card fill its grid cell, so the cards in a row share one baseline instead of sizing to their own content (measured 453/399/399/453 before this — ragged bottoms and misaligned buttons). */ .fsl-card { display: flex; flex-direction: column; height: 100%; background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); transition: box-shadow var(--fsl-transition), transform var(--fsl-transition); } /* Push the card's last element (the "Read more" link/button) to the bottom, so the CTAs align across the row regardless of excerpt length. */ .fsl-card > :last-child { margin-top: auto; } /* Card media — crop every card image to a consistent 16:9 regardless of what was uploaded. Without this the images render at their native ratio (object-fit: fill), so a portrait upload distorts the whole grid. NOTE: cover CROPS from the centre — keep faces and logos away from the edges. The image BLEEDS to the card edges: no padding, and it wears the card's top corner radius. */ .fsl-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--fsl-radius-card) var(--fsl-radius-card) 0 0; } /* Card body — wrap the text blocks (title, meta, excerpt, link) in a Container with class "fsl-card__body". The image stays OUTSIDE it so it can bleed to the card edges while the copy is inset. */ .fsl-card__body { display: flex; flex-direction: column; gap: var(--fsl-space-2xs); padding: var(--fsl-space-sm); flex: 1; /* fill the card, so the link can sit at the bottom */ } /* The card's action sits at the bottom of the BODY and HUGS ITS LABEL — it is not a full-width solid bar. A grid of full-width primary buttons competes with the images and headlines, and implies each card is the most important action on the page. The card is already the click target (linked title + hover lift); this is a secondary affordance and should read as one. Targets a LINK specifically, not :last-child — if the button ever sits outside the body, :last-child would grab the excerpt and shove it to the bottom. */ .fsl-card__body > a:last-child, .fsl-card__body .fsl-btn { margin-top: auto; /* absorbs the slack, so cards equalise at the BOTTOM */ align-self: flex-start; /* hug the label — not full width */ } /* IMPORTANT: put fsl-card__body ONLY on the wrapper Container. Applied to a child (e.g. the H2) it inherits padding:24px AND flex:1, so the heading double-indents and becomes the element that stretches to equalise the cards — producing a growing gap under the image instead of clean padding. */ /* Clamp long excerpts. One 326px Lorem excerpt was driving the whole row to 846px tall; every card in the row pays for the longest one. display MUST be -webkit-box for -webkit-line-clamp to work, so it's forced. DEBUGGING NOTE (verified on the Events archive 16 Jul): when .fsl-clamp is a FLEX ITEM — which it is inside .fsl-card__body (display:flex) — the browser BLOCKIFIES the box and getComputedStyle(el).display SERIALISES as "flow-root" even though the rule is applied. This looks exactly like the rule losing, but it isn't: the line-clamp STILL truncates (confirmed clientHeight 109 / 4 lines, scrollHeight 163, overflow hidden, trailing "…"). So DON'T chase the "flow-root" computed value — measure clientHeight vs scrollHeight to tell if clamp is live. NOTE: apply .fsl-clamp to the block that HOLDS the text. If the description is a wysiwyg with multiple

    , the clamp still counts total lines across them. */ .fsl-clamp { display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .fsl-card:hover { box-shadow: var(--fsl-shadow-hover); transform: translateY(-4px); } .fsl-card--keyline { border-top: 3px solid var(--fsl-accent); } /* WHOLE-CARD LINK — no Container link field needed. Link the card's HEADING to the destination, add .fsl-card--linked to the card, and the heading's link stretches to cover the whole card: the entire card becomes the click target and the hover-lift reads as "this is a link". Accessible by design — the link text is the heading, which describes where it goes (unlike a bare "Learn more"). OPT-IN on purpose: only ONE link may live in a linked card. A second link or button (the "Read more" on team/deal cards, say) would sit UNDER the stretched overlay and become unclickable — which is why this isn't on .fsl-card itself. If you want a visible "Learn more" cue on a linked card, make it plain TEXT, not a link. */ .fsl-card--linked { position: relative; } .fsl-card--linked .fsl-card__body :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* keep the heading link inheriting the card's ink, not the default link blue */ .fsl-card--linked .fsl-card__body :is(h2, h3, h4) a { color: inherit; text-decoration: none; } /* ============================================================ Card grid — an even, responsive row of cards. Structure (GenerateBlocks): Container .fsl-cards Container .fsl-card [.fsl-card--keyline] Container .fsl-card__body Headline H3 <- "Grounded in the real market" Text <- the supporting sentence Container .fsl-card … (repeat) auto-fit + minmax means the row reflows on its own: 3-up on desktop, 2-up on tablet, 1-up on mobile — no media queries, no per-card width. Cards are equal height because .fsl-card is height:100% flex. For TEXT-ONLY cards (no image) just omit the image; .fsl-card__body still supplies the padding. ============================================================ */ .fsl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--fsl-space-md); align-items: stretch; /* Separate the grid from whatever sits above it (an H2, or a lead line). GB gives the grid no top margin, so it otherwise hugs the heading — the "Why sellers choose us" and routing-lead gaps were 0–20px without this. */ margin-top: var(--fsl-space-md); } /* Cap at 3 across even on very wide viewports, so 3 cards don't stretch thin */ .fsl-cards { max-width: 100%; } /* GB Query Loop items are structural only — the .fsl-card inside is the surface. GB can give the loop item its own background/padding (a grey #fafafa box that shows as a frame around the card, obvious on a tint band). Neutralise it so only the card shows, and let the card fill the grid cell. */ .fsl-cards > .gb-loop-item, .fsl-cards > [class*="gb-loop-item"] { background: transparent; padding: 0; border: 0; display: flex; /* so a single .fsl-card stretches to full cell height */ } .fsl-cards > .gb-loop-item > .fsl-card { flex: 1 1 auto; } @media (min-width: 1024px) { .fsl-cards--3 { grid-template-columns: repeat(3, 1fr); } } /* Narrower, centred grid — for TEXT-ONLY card sets (testimonials) that look sprawling at full content width next to a centred pull-quote. Caps the grid and centres it so it sits in the same column family as the H1 / featured quote instead of breaking out to the page edge. 3 cards land at ~320px. */ .fsl-cards--narrow { max-width: 1040px; margin-inline: auto; } /* Force TWO columns on desktop (tablet+). For a small, text-only set like testimonials where two wider cards read better than three narrow ones. Self-contained: includes its own cap + centring, so use it INSTEAD of --narrow. Cards land at ~430px. Below 768px it hands back to the base auto-fit (which stacks to 1-up on mobile). */ @media (min-width: 768px) { .fsl-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } /* Centre a LONE last card. With an odd number of items the final one sits alone in the bottom row, left-aligned in column 1. Span it across both columns and centre it, capped to one card's width so it doesn't stretch. Targets the grid's direct child (the loop item OR the card, whichever GB renders as the grid cell), so it works regardless of that wrapper. */ .fsl-cards--2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc((900px - var(--fsl-space-md)) / 2); /* ~430px */ } } /* ============================================================ Events — date/time meta line + the two single-page repeaters (programme agenda + speaker grid). event_date_and_time is stored as a sortable datetime (Y-m-d H:i:s). Show the date on cards/loops via a pre-formatted `event_date_display` meta field ({{post_meta key:event_date_display}}) — loop-safe; the raw datetime and the [event_date] shortcode are for single pages only. See Events rebuild guide §5.1. It is the ONE thing a listings visitor scans for, so give it weight. ============================================================ */ /* The date/time, wherever it appears (card meta line, single aside). Add .fsl-event-date to the Text block. The clock glyph is decorative and comes from CSS so you don't hand-type it into the field. */ .fsl-event-date { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fsl-fs-small); font-weight: 600; color: var(--fsl-primary); letter-spacing: 0.01em; } .fsl-event-date::before { content: "\1F4C5"; /* 📅 — swap for an inline SVG icon block if preferred */ font-size: 1em; line-height: 1; } /* -- Jump nav (Upcoming / Past) ---------------------------------------- A row of pill links that scroll to the two event sections. Put it under the H1; give each target section .fsl-scroll-target + an id (#upcoming / #past). No JS. */ .fsl-jumpnav { display: flex; flex-wrap: wrap; gap: var(--fsl-space-2xs); margin: var(--fsl-space-sm) 0 0; } .fsl-jumpnav a { display: inline-flex; align-items: center; min-height: var(--fsl-tap-min); padding: 0.4rem 1.1rem; border: 1px solid var(--fsl-border); border-radius: 999px; font-size: var(--fsl-fs-small); font-weight: 600; color: var(--fsl-primary); text-decoration: none; transition: background-color var(--fsl-transition), border-color var(--fsl-transition), color var(--fsl-transition); } .fsl-jumpnav a:hover, .fsl-jumpnav a:focus-visible { background-color: var(--fsl-primary); border-color: var(--fsl-primary); color: var(--fsl-white); } .fsl-jumpnav a:focus-visible { outline: 3px solid var(--fsl-accent); outline-offset: 2px; } /* Anchored sections clear the sticky header when jumped to. Match the value to the header height (~80px) + a little breathing room. */ .fsl-scroll-target { scroll-margin-top: 100px; } /* Smooth scroll for jump links (respects reduced-motion). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* -- Programme / agenda ------------------------------------------------ One row per event_programme item: a fixed time column on the left, the title + description stacked on the right, hairline dividers between rows. Put .fsl-agenda on the GB Query (Post Meta) wrapper, .fsl-agenda__row on the Loop Item's Container, .fsl-agenda__time on the time block. */ .fsl-agenda { display: flex; flex-direction: column; margin-top: var(--fsl-space-sm); border-top: 1px solid var(--fsl-border); } .fsl-agenda__row { display: grid; grid-template-columns: 7.5rem 1fr; /* time rail + content */ gap: var(--fsl-space-sm); align-items: baseline; padding: var(--fsl-space-sm) 0; border-bottom: 1px solid var(--fsl-border); } .fsl-agenda__time { margin: 0; font-weight: 700; color: var(--fsl-primary); font-size: var(--fsl-fs-body); } .fsl-agenda__row > :last-child > :is(h4, h5) { margin: 0 0 0.25rem; } .fsl-agenda__row p { margin: 0; } @media (max-width: 560px) { .fsl-agenda__row { grid-template-columns: 1fr; gap: 0.25rem; } } /* -- Speakers ---------------------------------------------------------- A responsive grid of small speaker cards (photo, name, organisation). Put .fsl-speakers on the GB Query (Post Meta) wrapper; each Loop Item's Container is a .fsl-card (reuses the card system). The photo is a round headshot, not a 16:9 crop — .fsl-speaker-photo overrides the card image. */ .fsl-speakers { display: flex; /* fixed-width cards that wrap & left-align — NOT stretch */ flex-wrap: wrap; gap: var(--fsl-space-md); margin-top: var(--fsl-space-sm); --fsl-speaker-w: 200px; /* card width — tweak here */ } .fsl-speakers > * { /* each speaker card = fixed width */ flex: 0 0 var(--fsl-speaker-w); width: var(--fsl-speaker-w); max-width: 100%; /* never overflow a narrow column */ } /* Scoped under .fsl-speakers so it OUTRANKS `.fsl-card img { aspect-ratio:16/9 }` (2 classes beats 1 class + 1 element) — otherwise the photos stay 16:9/short. */ .fsl-speakers .fsl-speaker-photo, .fsl-speakers .fsl-speaker-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; /* PORTRAIT — overrides the card's 16:9 */ object-fit: cover; /* centre-cropped; keep faces centred */ } @media (max-width: 420px) { .fsl-speakers { --fsl-speaker-w: 100%; } /* one full-width card on small phones */ } /* Speaker cards read as clean portraits, not bordered cards: drop the shell (border, accent keyline, background, shadow, padding) and centre the caption. */ .fsl-speakers .fsl-card { border: 0; background: transparent; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; } .fsl-speakers .fsl-speaker-photo, .fsl-speakers .fsl-speaker-photo img { border-radius: var(--fsl-radius-card); /* round all four corners of the portrait */ } .fsl-speakers .fsl-card__body { padding: var(--fsl-space-sm) 0 0; /* just space under the photo */ text-align: center; } .fsl-speakers .fsl-card__body h4 { margin: 0 0 0.15rem; font-size: var(--fsl-fs-body); } .fsl-speakers .fsl-card__body p { margin: 0; font-size: var(--fsl-fs-small); color: var(--fsl-text); } /* -- Event recording embed -------------------------------------------- Responsive 16:9 wrapper for the [event_recording] oEmbed on a past event single, so the iframe scales with the column. */ .fsl-event-recording { aspect-ratio: 16 / 9; margin: 0 0 var(--fsl-space-md); background: var(--fsl-tint); border-radius: var(--fsl-radius-card); overflow: hidden; } .fsl-event-recording iframe, .fsl-event-recording video { display: block; width: 100%; height: 100%; border: 0; } /* -- Card badge ------------------------------------------------------- A small non-interactive pill for a full-card-clickable card (e.g. a past event with a recording). NOT a link — so it doesn't clash with the card's stretched heading link. Put it as the first child of .fsl-card__body. Type "▶ Watch again" as the text, or use --play to prepend the glyph. */ .fsl-card__badge { display: inline-flex; align-items: center; gap: 0.35em; align-self: flex-start; margin: 0 0 var(--fsl-space-xs); padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--fsl-primary); color: #fff; font-size: var(--fsl-fs-small); font-weight: 600; line-height: 1.4; } .fsl-card__badge--play::before { content: "\25B6"; font-size: 0.8em; } /* ▶ */ .fsl-card__badge--muted { background: var(--fsl-tint); color: var(--fsl-text); } /* -- Event single: hide the register/booking block on PAST events ------ The events mu-plugin adds body.fsl-event-past on a past event single. Give the register/booking block the class .fsl-event-register. */ body.fsl-event-past .fsl-event-register { display: none !important; } /* -- Insight single: "Recorded at [event]" backlink ([insight_source_event]) -- */ .fsl-source-event { margin: 0 0 var(--fsl-space-sm); font-size: var(--fsl-fs-small); color: var(--fsl-text-muted, var(--fsl-text)); } /* ============================================================ Testimonials — a featured pull-quote + a grid of quote cards. Fields: testimonial_description (the quote, plain textarea), testimonial_person (name), testimonial_company (company). No image, no rating, no date — so the quotation mark IS the motif. Quotes shown IN FULL (no clamp); attribution pins to the card bottom so rows still align even when quotes differ in length. ============================================================ */ /* -- Featured pull-quote — one standout at the top of the archive ---- */ .fsl-quote-featured { position: relative; max-width: 46rem; margin: var(--fsl-space-lg) auto var(--fsl-space-md); /* 64px above (clear of H1), 40px below (extra gap to the grid) */ padding-top: 3.25rem; /* room for the big quote mark */ text-align: center; } .fsl-quote-featured::before { content: "\201C"; /* “ */ position: absolute; top: -0.3em; left: 50%; transform: translateX(-50%); font-family: Georgia, "Times New Roman", serif; font-size: 6rem; line-height: 1; color: var(--fsl-accent); } .fsl-quote-featured__text { margin: 0 0 var(--fsl-space-sm); font-family: var(--fsl-font-heading); font-weight: 600; font-size: var(--fsl-fs-h3); line-height: 1.35; color: var(--fsl-ink); } .fsl-quote-featured__person { font-weight: 700; color: var(--fsl-ink); } .fsl-quote-featured__company { color: var(--fsl-text); } /* On a brand/ink band the featured quote flips readable */ .fsl-section--feature .fsl-quote-featured :is(.fsl-quote-featured__text, .fsl-quote-featured__person), .fsl-section--ink .fsl-quote-featured :is(.fsl-quote-featured__text, .fsl-quote-featured__person) { color: var(--fsl-white); } .fsl-section--feature .fsl-quote-featured__company, .fsl-section--ink .fsl-quote-featured__company { color: rgba(255,255,255,0.85); } .fsl-section--feature .fsl-quote-featured::before, .fsl-section--ink .fsl-quote-featured::before { color: var(--fsl-white); } /* -- Quote card — the grid items ------------------------------------- */ .fsl-quote-card { display: flex; flex-direction: column; gap: var(--fsl-space-sm); height: 100%; /* equal-height rows */ padding: var(--fsl-space-md); background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-top: 3px solid var(--fsl-accent); /* keyline motif, matches the cards */ border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); } .fsl-quote-card::before { content: "\201C"; font-family: Georgia, "Times New Roman", serif; font-size: 3rem; line-height: 0.6; color: var(--fsl-accent); } .fsl-quote-card__text { margin: 0; font-size: var(--fsl-fs-body); line-height: var(--fsl-lh-body); color: var(--fsl-text); } .fsl-quote-card__attr { margin-top: auto; } /* pin name+company to the bottom */ .fsl-quote-card__person { font-weight: 700; color: var(--fsl-ink); } .fsl-quote-card__company { font-size: var(--fsl-fs-small); color: var(--fsl-text); } /* ============================================================ Team — headshot card grid + profile single. Card = portrait photo → name → role. Profile reuses the sticky article layout (.fsl-article-grid / __aside / .fsl-prose) with the photo + contact in the aside. Field-agnostic: the classes don't care what the ACF fields are named. ============================================================ */ /* -- Card grid — 4-up on desktop, reflowing down ---------------------- */ .fsl-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--fsl-space-md); margin-top: var(--fsl-space-md); } /* Two-up cap — no more than two members per row. Capped + centred so the two cards don't stretch too wide; a lone last card (odd count) centres. */ @media (min-width: 768px) { .fsl-team-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; } .fsl-team-grid--2 > *:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc((720px - var(--fsl-space-md)) / 2); /* ~340px */ } } /* Three-up cap — three members per row. Capped + centred; a lone last card (count = 3n+1, e.g. 4 or 7 members) centres. Falls back to the base auto-fit below 1024px (≈2-up on tablet, 1-up on mobile). */ @media (min-width: 1024px) { .fsl-team-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin-inline: auto; } .fsl-team-grid--3 > *:last-child:nth-child(3n + 1) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: calc((1100px - 2 * var(--fsl-space-md)) / 3); /* ~340px */ } } .fsl-team-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; /* clip the photo to the rounded corners */ background-color: var(--fsl-white); border: 1px solid var(--fsl-border); border-radius: var(--fsl-radius-card); box-shadow: var(--fsl-shadow); transition: box-shadow var(--fsl-transition), transform var(--fsl-transition); } .fsl-team-card:hover { box-shadow: var(--fsl-shadow-hover); transform: translateY(-4px); } /* Portrait headshot — 4:5 reads better than a square for people. Faces centre-crop, so shoot/crop with headroom. */ .fsl-team-card__photo, .fsl-team-card__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } /* Body is a flex column so the "Read more" can pin to the bottom and the cards equalise their button baselines across the row. */ .fsl-team-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--fsl-space-sm); } .fsl-team-card__name { margin: 0; font-size: var(--fsl-fs-h4); color: var(--fsl-ink); } .fsl-team-card__role { margin: 0.25rem 0 0; font-size: var(--fsl-fs-small); font-weight: 600; color: var(--fsl-primary); } /* Short bio teaser on the card. CSS clamps by LINES, not characters — two lines lands around ~55 chars at the card width, which is the intent. Using line-clamp (not a hard character cut) is deliberate: person_bio is a wysiwyg field, and a character truncation can slice through an HTML tag. The !important forces -webkit-box over GB's flow-root (see .fsl-clamp note). */ /* IMPORTANT: person_bio is a WYSIWYG field — its content comes wrapped in

    . The blurb block MUST be set to an HTML tag of DIV (not the default paragraph) in GenerateBlocks, or the browser can't nest

    inside

    and breaks the bio out as loose sibling paragraphs, leaving this element empty and un-clamped. As a

    , the bio nests inside and -webkit-line-clamp works (verified). */ .fsl-team-card__blurb { margin: 0.5rem 0 var(--fsl-space-sm); /* 24px min gap before the "Read more" */ font-size: var(--fsl-fs-small); color: var(--fsl-text); display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Neutralise the wysiwyg's own paragraph margins inside the clamp so the two lines sit tight; multiple paragraphs read as continuous teaser text. */ .fsl-team-card__blurb > * { margin: 0; } /* Pin the "Read more" to the bottom of the card, hugging its label. */ .fsl-team-card__body > .fsl-btn, .fsl-team-card__body > a:last-child { margin-top: auto; align-self: flex-start; } /* -- Profile single — photo + contact aside, bio in the main column --- */ /* Reuses .fsl-article-grid / .fsl-article-aside / .fsl-prose from above. The aside holds: back link, framed photo, role line, contact list. */ .fsl-team-role { /* the role/job-title line under the H1 name */ margin: 0 0 var(--fsl-space-sm); /* 24px break before the bio; name+role read as a unit above */ font-size: var(--fsl-fs-lead); font-weight: 600; color: var(--fsl-primary); } .fsl-team-contact { /* email / phone / LinkedIn stack in the aside */ list-style: none; margin: var(--fsl-space-2xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .fsl-team-contact a { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fsl-fs-small); font-weight: 600; color: var(--fsl-primary); text-decoration: none; } .fsl-team-contact a:hover { color: var(--fsl-primary-hover); } /* colour shift, no underline */ .fsl-team-contact a:focus-visible { color: var(--fsl-primary-hover); outline: 3px solid var(--fsl-accent); outline-offset: 2px; } .fsl-team-contact .gb-shape svg { width: 1em; height: 1em; fill: currentColor; flex: none; } /* ============================================================ Contact details grid — two columns on desktop, one column on tablet-portrait and mobile. Structure (GenerateBlocks): Container .fsl-contact-grid Container (col 1 — e.g. office address) Container (col 2 — e.g. phone + email + hours) Collapses to a single column at 900px, which catches tablet-portrait (iPad 768–834) and phones, while tablet-landscape / laptop keep two. ============================================================ */ .fsl-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fsl-space-md); align-items: start; } @media (max-width: 900px) { .fsl-contact-grid { grid-template-columns: 1fr; } } /* Subtle lift on the primary CTA */ .fsl-btn--primary:hover { box-shadow: var(--fsl-shadow-hover); } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .fsl-card, .fsl-btn { transition: none; } .fsl-card:hover { transform: none; } }