/* ========================================================================= CF FIRE DOORS — v2 SKIN Loaded only on pages flagged `_cf_v2` (see cf_is_v2 in functions.php), so the signed-off homepage is untouched by everything in this file. The brief, in the client's words: "the heavy black and bright red throughout feels like a sales or retail site... use one calmer, consistent brand colour, with red only as a small accent from our logo, and more white space", with tsbcontractors.co.uk as the reference. On review of the first v2 pass they asked for it lighter and cleaner again, for the banner to follow TSB's (with an empty image area on the right), for the blurb strip beneath it, for the services as premium duotone icons, and for the sector row to follow TSB's "Social Value & Community" cards. Colour decisions — as at round 41 (2026-09-30). The palette was blue from round 29 to round 32, on the client's own brief ("one calmer, consistent brand colour, with red only as a small accent"). Round 33 brought their red back, round 34 collapsed it to a single red, and round 41 settled which of the two supplied reds does what: "#CD0038 - this should be the MAIN colour red #990A2C - this is a secondary colour" - **#CD0038 is MAIN.** Buttons, the header CTA, links and arrows, eyebrow rules, icon marks, the footer's copyright bar — anything that should read as the brand at a glance. 5.7:1 on white, and it carries white type. - **#990A2C is SECONDARY.** Every hover state, and the large calm areas: the deep end of the banner gradient, the utility bar, the section band. It is the darker of the two at 8.6:1, so it is what large fills and hovers use without the page turning bright red. - The banner runs #990A2C to #CD0038 across the field, which puts the deep tone under the headline and the main red at the edge behind the image. - NO BLACK, per "using whites, light greys, transparent colours, instead of black on the website". Headings are #3B3336 — a dark warm grey at 12.5:1, unmistakably not black — and every surface is white, a near-white tint or a translucency over one of them. - Service icons carry #808080 as their second tone, per round 38's "only reds and grays… less blue tones". Everything is scoped under `.cf-v2`, and most rules need `!important` because cf-native.css already sets these properties through selectors of equal or greater specificity. CONTENTS 1 Tokens 2 Typography 3 Buttons 4 Header 5 Banner + image panel 6 Blurb strip 7 Sections 8 Service icon grid 9 Band + sector cards 10 Remaining sections 11 Footer 12 Motion + responsive 13 Phones: touch targets, 16px form fields, mobile logo (pre-launch QA) ========================================================================= */ /* ---- 1. Tokens ---------------------------------------------------------- Two groups, because this file now serves two scopes. The client asked for "the header and footer to be the same across all versions", so sections 4 and 11 are scoped `.cf-site` and run on every page, while everything else stays scoped `.cf-v2` and only reaches the pages that opted in. The chrome therefore cannot use `--brand`, `--ink` and friends: redefining those names site-wide would repaint the v1 pages' body content too, which is exactly what must not happen. So the chrome has its own `--v2-*` names on `.cf-site`, and the v2 page tokens alias them. ------------------------------------------------------------------------- */ .cf-site { /* MAIN red. Buttons, links, arrows, eyebrows, icon marks, the copyright bar — anything that should read as the brand at a glance. */ --v2-brand: #CD0038; /* SECONDARY red. Hover states, and the large calm areas: the deep end of the banner gradient, the utility bar, the section band. The two swapped roles in round 41 — #990A2C had been the main colour since round 33. */ --v2-brand-dark: #990A2C; --v2-brand-deep: #990A2C; /* The footer, round 36: a LIGHT grey panel with black text, and the copyright row below it in the brand red with white text. It was dark grey and black in round 35; the client looked at it and asked for the inversion. The footer logo had to change with it — the white artwork would be invisible on #F7F7F7 — see the widget, not this file. */ --v2-footer: #F1F1F1; --v2-footer-text: #2C2729; --v2-footer-title: #141112; --v2-footer-line: #E1DEDF; --v2-footer-foot: #CD0038; /* A pale wash of the brand for icon wells and soft fills. */ --v2-brand-tint: #F7EDEF; --v2-brand-line: #EBD9DE; /* Headings: a warm near-black. A cool grey or a navy fights red; this sits with it and still reads as neutral. */ --v2-ink: #3B3336; --v2-line: #E9E6E7; --v2-red: #CD0038; --v2-r: 14px; --v2-ff: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; } .cf-v2 { --brand: var(--v2-brand); --brand-dark: var(--v2-brand-dark); --brand-deep: var(--v2-brand-deep); --brand-tint: var(--v2-brand-tint); --brand-line: var(--v2-brand-line); --red: var(--v2-red); /* The brand red on the brand red is 1:1, so small "red" text on a dark area needs a lifted tint rather than the brand value. */ --red-on-dark: #F2AEBC; --ink: var(--v2-ink); /* Warm neutrals, so the greys sit with the red rather than against it. 8.6:1 and 4.8:1 on white. */ --body: #5A5154; --slate: #7A7174; --line: var(--v2-line); --line-soft: #F3F1F1; --paper: #FFFFFF; --paper-soft: #FAF8F9; --ff-display: var(--v2-ff); --ff-body: var(--v2-ff); /* More air between sections than v1, per "more white space". */ --section-y: clamp(62px, 6.6vw, 108px); --r: 10px; --r-lg: var(--v2-r); } /* ---- 2. Typography ------------------------------------------------------ `#wpadminbar` is excluded from every one of these, and it has to be. WordPress draws the admin bar's icons as dashicons GLYPHS on `::before`, and a pseudo-element inherits font-family from its originating element — so `.cf-v2 span { font-family: Montserrat !important }` reached `span.ab-icon`, beat WordPress's own `#wpadminbar .ab-icon:before` (which is not !important), and every admin-bar icon rendered as a missing-glyph box. That is the "Edit Mode icon is not visible" the client reported. Anything that sets a font on a broad element selector must exclude the admin bar. ------------------------------------------------------------------------- */ .cf-v2, .cf-v2 p, .cf-v2 li, .cf-v2 span, .cf-v2 a, .cf-v2 label, .cf-v2 input, .cf-v2 textarea, .cf-v2 select, .cf-v2 button { font-family: var(--ff-body) !important; } .cf-v2 p, .cf-v2 .body-muted { color: var(--body) !important; } .cf-v2 p { font-size: 16px !important; line-height: 1.75 !important; } /* Hand the admin bar back to WordPress. Two ids and !important, because the rule above carries !important too and the icons are pseudo-elements, which inherit their font from the element they hang off. */ #wpadminbar, #wpadminbar * { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important; } /* The id is COMPOUNDED, not repeated as an ancestor: `#wpadminbar #wpadminbar` would ask for one admin bar inside another and match nothing at all. */ #wpadminbar#wpadminbar .ab-icon::before, #wpadminbar#wpadminbar .ab-item::before, #wpadminbar#wpadminbar .ab-item::after, #wpadminbar#wpadminbar [class*="dashicons"]::before, #wpadminbar#wpadminbar #adminbarsearch::before { font-family: dashicons !important; } .cf-v2 h1, .cf-v2 h2, .cf-v2 h3, .cf-v2 h4, .cf-v2 h5, .cf-v2 h6, .cf-v2 .h1, .cf-v2 .h2, .cf-v2 .h3 { font-family: var(--ff-display) !important; color: var(--ink) !important; letter-spacing: -.01em !important; } /* Montserrat is wider than Archivo at the same size, and the old headline weights were set for a condensed grotesque. Dialled back so the page reads as calm rather than shouted. */ .cf-v2 h1, .cf-v2 .h1 { font-weight: 700 !important; } .cf-v2 h2, .cf-v2 .h2 { font-weight: 600 !important; } .cf-v2 h3, .cf-v2 .h3 { font-weight: 600 !important; } .cf-v2 .lead { color: var(--slate) !important; } /* The eyebrow keeps the red, small — this is where the logo colour lives now. */ .cf-v2 .eyebrow { color: var(--red) !important; font-weight: 600 !important; } .cf-v2 .eyebrow::before { background: var(--red) !important; } /* ---- 3. Buttons --------------------------------------------------------- */ /* Solid brand, soft radius, sentence case — TSB's button, not a retail CTA. */ .cf-v2 .btn, .cf-v2 .btn--primary, .cf-v2 input[type="submit"], .cf-v2 .wpcf7 button[type="submit"] { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; border-radius: var(--r-lg) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; } /* `:not(:disabled)` matters here. Without it this rule scored the same (0,4,1) as cf-native's `:disabled` rule and, loading later, won — so hovering the INACTIVE Send Enquiry button turned it brand red while its label stayed the disabled grey. Red box, grey text, which is what the client reported. */ .cf-v2 .btn:hover, .cf-v2 .btn--primary:hover, .cf-v2 input[type="submit"]:hover:not(:disabled), .cf-v2 .wpcf7 button[type="submit"]:hover:not(:disabled) { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; color: #fff !important; } /* Send Enquiry. The client asked for this to be the same red as every other button, with a white label on hover - not the muted "inactive" treatment it used to have, which read as a disabled grey box. Scoped `.cf-site` rather than `.cf-v2` so it applies on every version of the page, and the class is written TWICE on purpose: cf-native's `:disabled` rule scores the same as a single `.cf-site …` selector would, so a plain copy would only win by loading later, which is not safe to rely on. Do not "tidy" it down to one. */ .cf-site.cf-site .cf-form button.wpcf7-submit, .cf-site.cf-site .cf-form input[type="submit"], .cf-site.cf-site .cf-form button.wpcf7-submit:disabled, .cf-site.cf-site .cf-form input[type="submit"]:disabled { background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: #fff !important; opacity: 1 !important; } .cf-site.cf-site .cf-form button.wpcf7-submit:hover, .cf-site.cf-site .cf-form button.wpcf7-submit:focus, .cf-site.cf-site .cf-form input[type="submit"]:hover, .cf-site.cf-site .cf-form input[type="submit"]:focus { background: var(--v2-brand-dark) !important; border-color: var(--v2-brand-dark) !important; color: #fff !important; } /* The arrow is an inline SVG on `currentColor`, but cf-native sets it separately, so it is pinned here too. */ .cf-site.cf-site .cf-form button.wpcf7-submit svg, .cf-site.cf-site .cf-form button.wpcf7-submit:hover svg { color: #fff !important; } /* Still not clickable until the consent box is ticked - the cursor and the hint underneath the button are what say so now that the colour does not. */ .cf-site.cf-site .cf-form button.wpcf7-submit:disabled, .cf-site.cf-site .cf-form input[type="submit"]:disabled { cursor: not-allowed; } .cf-v2 .btn--ghost, .cf-v2 .btn--outline { background: transparent !important; color: var(--brand) !important; border: 1px solid var(--brand-line) !important; } .cf-v2 .btn--ghost:hover, .cf-v2 .btn--outline:hover { background: var(--brand-tint) !important; border-color: var(--brand) !important; color: var(--brand) !important; } .cf-v2 .btn--dark { background: var(--brand) !important; border-color: var(--brand) !important; } /* On the banner, where the background is brand-coloured. `cf_btn` renders its default style as a bare `.btn` with NO `--primary` modifier, so the rule that used to sit here never matched anything — the quote button was taking the plain `.btn` red and sitting red-on-red against the banner, then going a shade darker on hover. That is the "hard to see on hover" the client reported. Matched on `.btn` with the ghost variants excluded, so it catches the real element. */ .cf-v2 .cf-hero .btn:not(.btn--ghost-light):not(.btn--ghost):not(.btn--wa) { background: #fff !important; border-color: #fff !important; color: var(--brand) !important; } .cf-v2 .cf-hero .btn:not(.btn--ghost-light):not(.btn--ghost):not(.btn--wa):hover, .cf-v2 .cf-hero .btn:not(.btn--ghost-light):not(.btn--ghost):not(.btn--wa):focus-visible { background: var(--brand-tint) !important; border-color: #fff !important; color: var(--brand-dark) !important; box-shadow: 0 14px 30px -16px rgba(0,0,0,.5) !important; } .cf-v2 .cf-hero .btn:not(.btn--ghost-light):not(.btn--ghost):not(.btn--wa) svg { color: currentColor !important; } .cf-v2 .cf-hero .btn--ghost-light { border-color: rgba(255,255,255,.55) !important; color: #fff !important; background: rgba(255,255,255,.07) !important; } .cf-v2 .cf-hero .btn--ghost-light:hover { background: rgba(255,255,255,.16) !important; border-color: #fff !important; } /* ---- 4. Header ---------------------------------------------------------- SITE-WIDE. Scoped `.cf-site`, not `.cf-v2`, because the client asked for the header and footer to be the same across all versions. It uses the `--v2-*` tokens for that reason — see section 1. ------------------------------------------------------------------------- */ .cf-site #header-secondary-outer { background: var(--v2-brand-deep) !important; } .cf-site #header-secondary-outer, .cf-site #header-secondary-outer a, .cf-site #header-secondary-outer span { color: rgba(255,255,255,.9) !important; } .cf-site #header-secondary-outer a:hover { color: #fff !important; } /* The phone and email marks were brand red on what is now a brand red bar — invisible. cf-native sets them at (1,3,2) for the dark bar they were drawn for. The Q-Mark shield is NOT caught by these selectors: it sits in the badge, not in a menu item, so it keeps its red on the white stamp. */ .cf-site #header-secondary-outer ul.sf-menu > li > a .cf-mi__ico, .cf-site #header-secondary-outer .cf-mi__tile svg { color: rgba(255,255,255,.92) !important; } .cf-site #header-secondary-outer ul.sf-menu > li > a:hover .cf-mi__ico, .cf-site #header-secondary-outer ul.sf-menu > li > a:hover .cf-mi__tile svg { color: #fff !important; } .cf-site #header-secondary-outer .cf-mi__tile { background: transparent !important; } /* The Q-Mark badge keeps the red: it is an accreditation mark, and it is small. */ /* The bar sets `#header-secondary-outer span { color: … !important }` at (1,1,1), and the badge IS a span - so a plain class selector loses to it and the stamp came out white on white. Carry the id. */ .cf-site #header-secondary-outer .utility__badge { background: #fff !important; } .cf-site #header-secondary-outer .utility__badge, .cf-site #header-secondary-outer .utility__badge span { color: var(--v2-brand-dark) !important; } .cf-site #header-secondary-outer .utility__badge svg { color: var(--v2-brand) !important; } .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a { color: var(--v2-ink) !important; } .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li:hover > a, .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.cf-active > a { color: var(--v2-brand) !important; } .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a::before { background: var(--v2-brand) !important; } /* The "Request a Quote" button. Three faults the client reported, all inherited from the v1 red button: - the BORDER was still `2px solid var(--red)`, so a blue button carried a red outline. Only the background had been restyled. - on hover cf-native repaints it red at (2,4,4) with !important, and the same rule list carries `> a:hover span`, at (2,4,5) — which is why the icon tile went red too and read as a broken box. Both are answered here at matching specificity from a later stylesheet. - the lift shadow was tinted with the red brand. */ .cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a { background: var(--v2-brand) !important; border: 2px solid var(--v2-brand) !important; border-radius: var(--v2-r) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--v2-ff) !important; } /* The id is compounded on purpose. Salient paints the hovered header link with `#header-outer[data-lhe] #top nav .sf-menu > .sfHover:not(#social-in-menu) > a`, and the id inside :not() makes that rule (3,3,2) - three ids, so it beats any number of classes. `#header-outer#header-outer` takes this to (3,4,4). */ .cf-site #header-outer#header-outer header#top ul.buttons > li.cf-nav-cta > a:hover, .cf-site #header-outer#header-outer header#top ul.buttons > li.cf-nav-cta > a:focus, .cf-site #header-outer#header-outer header#top ul.buttons > li.cf-nav-cta:hover > a { background: var(--v2-brand-dark) !important; border-color: var(--v2-brand-dark) !important; color: #fff !important; box-shadow: 0 14px 28px -14px rgba(122,10,34,.55) !important; } /* The label and the icon tile are plain spans on a solid button; nothing inside it should paint a background of its own. */ .cf-site #header-outer#header-outer header#top ul.buttons > li.cf-nav-cta > a span, .cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover span, .cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover .cf-mi__tile, .cf-site #header-outer header#top ul.buttons > li.cf-nav-cta > a:hover .cf-mi__label { background: none !important; color: #fff !important; } /* ---- 5. Banner + image panel -------------------------------------------- */ /* TSB's banner is a brand-coloured field with a textured graphic and a photo panel on the right. The v1 hero was a dark photograph under a near-black scrim, which is the single biggest source of the "heavy black" the client objected to, so the photograph comes out of the background entirely and the right-hand panel takes its place. */ .cf-v2 .cf-hero { background: radial-gradient(120% 140% at 88% 0%, rgba(255,255,255,.16) 0%, transparent 55%), linear-gradient(104deg, var(--brand-dark) 0%, var(--brand) 100%) !important; color: #fff !important; } /* Salient's background image, its scrim and the v1 slideshow all go. */ .cf-v2 .cf-hero .row-bg-wrap, .cf-v2 .cf-hero .row-bg, .cf-v2 .cf-hero .cf-hero__bg, .cf-v2 .cf-hero .cf-slides { display: none !important; } /* The faint diagonal weave TSB uses behind its banner copy, in place of the v1 six-column rule grid. */ .cf-v2 .cf-hero > .row_col_wrap_12::after { opacity: 1 !important; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 2px, transparent 2px 22px) !important; background-size: auto !important; } .cf-v2 .cf-hero > .row_col_wrap_12 { display: grid !important; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(26px, 4vw, 66px); padding-block: clamp(56px, 6.4vw, 96px) !important; } /* Salient keeps the vc_col-sm-N percentage width and float on each column; inside a grid both have to go or the two tracks overlap. */ .cf-v2 .cf-hero > .row_col_wrap_12 > .wpb_column { width: 100% !important; float: none !important; margin: 0 !important; } .cf-v2 .cf-hero .hero__inner { padding-block: 0 !important; max-width: none !important; } .cf-v2 .cf-hero h1, .cf-v2 .cf-hero .h1 { color: #fff !important; } .cf-v2 .cf-hero h1 em { color: #FFC2CF !important; font-style: normal !important; } .cf-v2 .cf-hero h1 em::after { display: none !important; } .cf-v2 .cf-hero p, .cf-v2 .cf-hero .lead { color: rgba(255,255,255,.84) !important; } .cf-v2 .cf-hero .hero__proof li, .cf-v2 .cf-hero .cf-list li { color: rgba(255,255,255,.84) !important; } .cf-v2 .cf-hero .hero__proof svg, .cf-v2 .cf-hero .cf-list svg { color: #FFC2CF !important; } /* The image area and the chevron motif. The first version laid one translucent wedge ACROSS the photograph, which dulled it — the client asked for the triangles to be used properly. They are now two chevrons arranged AROUND the frame: a large one breaking out top-left and a small one riding the frame's top edge. A third, inverted one sat bottom-right until the client asked for the V shape to go — the motif is all one way up now. The panel itself no longer clips, so the chevrons are free to move beyond its bounds; the frame inside it does the clipping. */ .cf-v2 .cf-heropanel { position: relative; /* 16:10 matches the native ratio of the site photography (1200x750), so the banner image lands in the frame uncropped. */ aspect-ratio: 16 / 10; isolation: isolate; } .cf-v2 .cf-heropanel__frame { position: absolute; inset: 0; z-index: 2; display: block; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.34); box-shadow: 0 26px 60px -34px rgba(0,0,0,.6); transition: box-shadow .7s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-heropanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,.61,.36,1); } /* The panel slideshow. It reuses the .cf-slides__item crossfade from the v1 hero, so the only thing needed here is a positioning context and undoing the 0.6 opacity that block carries - that dimming exists to push a full-bleed background behind white headline copy, and inside the panel there is nothing to push it behind. */ .cf-v2 .cf-panelslides { position: absolute; inset: 0; display: block; overflow: hidden; } .cf-v2 .cf-panelslides .cf-slides__item { display: block; } .cf-v2 .cf-panelslides .cf-slides__img { opacity: 1 !important; object-position: center; } .cf-v2 .cf-heropanel__empty { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.075) 0 10px, transparent 10px 22px); } /* A single diagonal highlight that sweeps across the photograph on hover and is otherwise parked off its left edge — so it reads as a glint rather than as a permanent veil over the image. */ .cf-v2 .cf-heropanel__sheen { position: absolute; z-index: 2; top: -20%; left: -60%; width: 42%; height: 140%; transform: rotate(14deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; transition: left 1.05s cubic-bezier(.22,.61,.36,1); } /* The chevrons. One clip-path shape, three placements — the repetition is what makes them read as one motif rather than three ornaments. */ .cf-v2 .cf-heropanel__tri { position: absolute; display: block; pointer-events: none; clip-path: polygon(50% 0, 100% 100%, 74% 100%, 50% 52%, 26% 100%, 0 100%); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease; will-change: transform; } .cf-v2 .cf-heropanel__tri--a { z-index: 1; left: -13%; top: -14%; width: 46%; aspect-ratio: 1 / 1; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,194,207,.2)); opacity: .85; } /* Hover: the chevrons drift apart along their own axes, the photograph creeps in, the sheen crosses it and the frame's shadow deepens. One gesture, different speeds, so it settles rather than snapping. */ .cf-v2 .cf-heropanel:hover .cf-heropanel__tri--a { transform: translate(-7%, -7%) scale(1.07); opacity: 1; } .cf-v2 .cf-heropanel:hover img { transform: scale(1.045); } .cf-v2 .cf-heropanel:hover .cf-heropanel__sheen { left: 118%; } .cf-v2 .cf-heropanel:hover .cf-heropanel__frame { box-shadow: 0 34px 70px -34px rgba(0,0,0,.72); } .cf-v2 .cf-heropanel.is-filled .cf-heropanel__frame { background: rgba(0,0,0,.2); } /* Pagination dots under the banner slideshow. They are a SIBLING of the panel, not a child: the frame clips, so anything drawn inside it is cut off. Real buttons, so they are reachable by keyboard and announce which image is showing. */ .cf-v2 .cf-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; } .cf-v2 .cf-dots__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.38); cursor: pointer; transition: background .35s ease, width .45s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-dots__dot:hover { background: rgba(255,255,255,.7); } /* The active dot stretches into a pill rather than just brightening - the difference has to survive being glanced at on a red field. */ .cf-v2 .cf-dots__dot.is-on { width: 26px; border-radius: 999px; background: #fff; } .cf-v2 .cf-dots__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-dots__dot { transition: none; } } /* ---- 6. Blurb strip ----------------------------------------------------- */ /* The reference sets these as one row of icon and label divided by hairlines. The rules are borders rather than markup, so the row can wrap on a phone without leaving a rule hanging at the end of a line. */ .cf-v2 .cf-blurbstrip { background: var(--paper) !important; } .cf-v2 .cf-blurbstrip > .row_col_wrap_12 { padding-block: clamp(22px, 2.4vw, 34px) !important; } .cf-v2 .cf-blurbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(14px, 2.2vw, 40px); margin: 0; padding: 0; list-style: none; } .cf-v2 .cf-blurbs li { display: flex; align-items: center; gap: 14px; margin: 0; padding-left: clamp(14px, 2.2vw, 40px); border-left: 1px solid var(--line); } .cf-v2 .cf-blurbs li::marker { content: none; } .cf-v2 .cf-blurbs li:first-child { padding-left: 0; border-left: 0; } .cf-v2 .cf-blurbs__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } .cf-v2 .cf-blurbs__ico svg { width: 19px !important; height: 19px !important; } .cf-v2 .cf-blurbs__label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); } /* The About column, after round 34 removed its three point tiles. cf-native makes that column a full-height flex column and gives the button row `margin-top: auto`, so the button pinned to the bottom of a column whose height is set by the photograph beside it — the tiles used to fill the middle, and without them it left 168px of nothing. Exactly the same trap as the opening-hours card in round 32. The answer is not to stop the column stretching: three short elements top-aligned against a 575px photograph is unbalanced the other way. The group is centred against the image instead, and the button takes a normal gap below the paragraph. */ .cf-v2 .cf-intro .intro__body > .vc_column-inner > .wpb_wrapper { justify-content: center; } /* The gap under the paragraph was built from four separate pieces — the section-head's 24px bottom margin, the action row's own top margin, the inner row's padding and a row margin — which came to 108px. They are all zeroed and one 28px gap is set in their place. */ .cf-v2 .cf-intro .intro__body .section-head { margin-bottom: 0 !important; } .cf-v2 .cf-intro .intro__body .cf-actions { margin-top: 28px !important; padding-top: 0 !important; } .cf-v2 .cf-intro .intro__body .cf-actions > .row_col_wrap_12_inner { margin-top: 0 !important; padding-top: 0 !important; } /* The photograph is a 1000x1000 square and cf-native gives it `min-height: clamp(380px, 42vw, 560px)` so it could hold its own beside the three point tiles. With the tiles gone that made a 575px column against ~370px of copy. The min-height is released and the image cropped to 4:3, which brings the two sides within a few pixels of each other and takes ~150px off the section — "more compact, clean and balanced". The columns also stop stretching to match: each is its own content height, centred against the other. */ .cf-v2 .cf-intro > .row_col_wrap_12 { align-items: center !important; } .cf-v2 .cf-intro .intro__media-col > .vc_column-inner, .cf-v2 .cf-intro .intro__media-col .wpb_wrapper, .cf-v2 .cf-intro .intro__media, .cf-v2 .cf-intro .intro__media-main { height: auto !important; min-height: 0 !important; } .cf-v2 .cf-intro .intro__media-main img { /* WordPress gives content images a 15px bottom margin. The frame clips and has a white card behind it, so that margin rendered as a white strip under the photograph - which is what looked like the shadow pushing space. */ margin-bottom: 0 !important; display: block; height: auto !important; min-height: 0 !important; /* 6:5, framed from the centre. Round 39 used 4:3 from near the top to keep a pale floor strip out of shot, and that cut the CF logos off the vests. Measuring the source row by row showed the strip only begins at row ~970, so a taller window centred on the subject shows both logos and still clears it by 50px. Frame 409px -> 454px. */ aspect-ratio: 6 / 5 !important; object-fit: cover; object-position: center center; } /* ---- 7. Sections -------------------------------------------------------- */ .cf-v2 .cf-section--soft, .cf-v2 .cf-accr { background: var(--paper-soft) !important; } /* The accreditations label. Section 2's blanket `.cf-v2 p { font-size:16px }` caught it — it is a

— and at 16px with .14em tracking it no longer fitted the 186px column cf-native gives it, so it broke over four lines with the "&" stranded on its own. Back to its designed size, with room for two lines. */ .cf-v2 .accr__label { font-size: 13px !important; line-height: 1.55 !important; /* The label also carries ~43px of right padding before the divider rule, so the max-width has to cover the text box AND that padding: at 250px the text only had 207px and still broke over three lines. */ max-width: 304px; } .cf-v2 .cf-section--ink { background: var(--brand-deep) !important; color: rgba(255,255,255,.88) !important; } .cf-v2 .cf-section--ink h2, .cf-v2 .cf-section--ink h3 { color: #fff !important; } /* ---- 8. Service icon grid ----------------------------------------------- */ /* The client's second point: services as simple icons with short titles, like TSB — not photo cards with a paragraph each. The icons sit on white with no coloured well behind them, which is both closer to the reference and part of what makes the section read lighter. */ .cf-v2 .cf-svcicons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); margin-top: clamp(34px, 3.4vw, 54px); } .cf-v2 .cf-svcicons--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-v2 .cf-svcicons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-v2 .cf-svcicons--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cf-v2 .cf-svcicon { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: clamp(26px, 2.8vw, 40px) clamp(12px, 1.4vw, 20px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--brand); overflow: hidden; isolation: isolate; transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } /* The accent wash. It is a pseudo-element rather than a background transition so the card's own white stays put underneath and the wash can scale from the icon outwards. */ .cf-v2 .cf-svcicon::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 8%; width: 190px; height: 190px; margin-left: -95px; border-radius: 50%; background: radial-gradient(circle, var(--cf-a, var(--brand)) 0%, transparent 68%); opacity: 0; transform: scale(.35); transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); } /* The tile has to read as something you can click through to a service page. The border goes brand red, a red rule wipes in along the top, the card lifts and the title reddens — four signals at once, because a tile with no other affordance (no arrow, no button) has to carry it in the hover alone. Applied to the tile whether it is an or a

: the service pages do not exist yet, and when they do these become links with no style change. */ .cf-v2 .cf-svcicon::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-svcicon:hover, .cf-v2 .cf-svcicon:focus-visible { border-color: var(--brand); box-shadow: 0 18px 44px -26px rgba(74,10,26,.5); transform: translateY(-6px); } .cf-v2 .cf-svcicon:hover::after, .cf-v2 .cf-svcicon:focus-visible::after { transform: scaleX(1); } .cf-v2 a.cf-svcicon { cursor: pointer; } .cf-v2 .cf-svcicon:hover::before { opacity: .1; transform: scale(1); } .cf-v2 .cf-svcicon__well { --cf-ico-bg: #fff; display: grid; place-items: center; width: 78px; height: 78px; flex: none; } .cf-v2 .cf-svcicon .cf-ico { /* cf-native sizes every icon with `.cf-site svg:not(#icons)`, and the ID inside :not() gives that rule ID-level specificity - so a plain class selector loses to it however long the chain. */ width: 100% !important; height: 100% !important; transition: transform .55s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-svcicon:hover .cf-ico { transform: translateY(-3px) scale(1.05); } .cf-v2 .cf-svcicon h3 { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 600 !important; color: var(--ink) !important; transition: color .35s ease; } .cf-v2 .cf-svcicon:hover h3 { color: var(--brand) !important; } /* The two motifs every icon shares. The sweep redraws and the dot rides to the end of it — one gesture, 750ms, the same on every tile, which is what keeps eight hovers feeling like one designed set. */ .cf-v2 .cf-ico__sweep { stroke-dasharray: 60; stroke-dashoffset: 0; } .cf-v2 .cf-svcicon:hover .cf-ico__sweep, .cf-v2 .cf-card:hover .cf-ico__sweep { animation: cf-v2-sweep .75s cubic-bezier(.22,.61,.36,1); } @keyframes cf-v2-sweep { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } } .cf-v2 .cf-ico__dot { transform-box: fill-box; transform-origin: center; transition: transform .55s cubic-bezier(.34,1.56,.64,1); } .cf-v2 .cf-svcicon:hover .cf-ico__dot, .cf-v2 .cf-card:hover .cf-ico__dot { transform: scale(1.45); } /* ---- 9. Band + sector cards --------------------------------------------- */ /* The reference puts a full-width coloured strip above a section and follows it with white cards. The strip breaks out of the container; the cards below stay on the container grid. */ .cf-v2 .cf-band { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; padding: clamp(16px, 1.8vw, 26px) var(--gutter); background: var(--brand-deep) !important; text-align: center; } .cf-v2 .cf-band__title { margin: 0 !important; color: #fff !important; font-size: clamp(17px, 1.9vw, 23px) !important; font-weight: 600 !important; letter-spacing: .04em !important; } /* The band is flush with the top of its section - the reference runs the strip straight into the section above it - and the section clips so the 100vw break-out cannot raise a horizontal scrollbar next to a vertical one. */ .cf-v2 .cf-sectors { overflow-x: clip; } .cf-v2 .cf-sectors > .row_col_wrap_12 { padding-top: 0 !important; } .cf-v2 .cf-band__lead { max-width: 760px; margin: clamp(28px, 3vw, 44px) auto 0 !important; text-align: center; } .cf-v2 .cf-band__lead p { color: var(--slate) !important; } /* The grid goes on the inner wrapper, not on the row: Salient's vc_row_inner holds a .row-bg-wrap alongside the column wrapper, so a grid declared on the row itself puts the background div in track one and every column below it. */ .cf-v2 .cf-cards > .row_col_wrap_12_inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 26px); margin-top: clamp(30px, 3.2vw, 48px); } .cf-v2 .cf-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: clamp(28px, 2.8vw, 40px) clamp(18px, 1.8vw, 26px) clamp(24px, 2.4vw, 32px); background: #fff; border: 1px solid var(--brand-line); border-radius: var(--r-lg); overflow: hidden; color: var(--brand); transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } /* The accent rule along the top: this is where each sector's colour lives, so the cards carry the same duotone logic as the service icons. */ .cf-v2 .cf-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cf-a, var(--brand)); } .cf-v2 .cf-card:hover { border-color: var(--cf-a, var(--brand)); box-shadow: 0 18px 44px -26px rgba(74,10,26,.45); transform: translateY(-5px); } .cf-v2 .cf-card__well { --cf-ico-bg: #fff; display: grid; place-items: center; width: 72px; height: 72px; flex: none; margin-top: 4px; } .cf-v2 .cf-card .cf-ico { width: 100% !important; height: 100% !important; transition: transform .55s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-card:hover .cf-ico { transform: translateY(-3px) scale(1.05); } .cf-v2 .cf-card__title { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 700 !important; letter-spacing: .03em !important; text-transform: uppercase; color: var(--ink) !important; } .cf-v2 .cf-card p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--slate) !important; } .cf-v2 .cf-card__btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; border-radius: 999px; background: var(--brand); color: #fff !important; font-size: 13.5px; font-weight: 600; line-height: 1; transition: background .35s ease, transform .35s ease; } .cf-v2 .cf-card__btn:hover { background: var(--brand-dark); transform: translateY(-1px); } /* The old photographic sector tiles are replaced by the cards above. Anything still carrying the class is hidden rather than left half-styled. */ .cf-v2 .cf-sectors .sector { display: none !important; } /* ---- 10. Remaining sections --------------------------------------------- */ .cf-v2 .svc, .cf-v2 .cf-gal__item, .cf-v2 .cf-form { border-radius: var(--r-lg) !important; border-color: var(--line) !important; } .cf-v2 .svc::before { background: var(--brand) !important; } .cf-v2 .link-arrow, .cf-v2 .link-arrow:visited { color: var(--brand) !important; } .cf-v2 .link-arrow:hover { color: var(--brand-dark) !important; } .cf-v2 .cf-quote { background: var(--paper) !important; } /* The contact columns are no longer stretched to match. cf-native makes the left contact column a full-height flex column so the map can absorb whatever height the form column doesn't use. The map has left that column, so the scaffolding now stretches the opening-hours card instead — and `.cf-hrs .svc__foot { margin-top: auto }` turned that spare height into a gap between the closing note and the phone number, which is what the client saw. Undo the whole arrangement here: the columns start at the top and each box is as tall as its own content. */ /* Round 40: the two contact columns are equal height and bottom-aligned again. Round 32 deliberately stopped them stretching, because the opening-hours card was being pulled taller than its content and `.svc__foot { margin-top: auto }` turned the slack into a gap between the closing note and the phone number. That phone line was cut in round 38, so the reason is gone — and the client can now see the two cards ending on different lines. Both columns stretch to the row, and the card at the bottom of each column flexes to fill whatever is left, so the two bottom edges land on the same line whichever column happens to be the taller. */ /* Only above 980px, which is where cf-native puts the two columns side by side. Below that they stack, "equal height" means nothing, and the rule actively hurt: the hours card absorbed 26px of slack at the bottom of a column that no longer had a neighbour to match. */ @media (min-width: 981px) { .cf-v2 .cf-quote > .row_col_wrap_12 { align-items: stretch !important; } .cf-v2 .cf-quote > .row_col_wrap_12 > .wpb_column, .cf-v2 .cf-quote > .row_col_wrap_12 > .wpb_column > .vc_column-inner, .cf-v2 .cf-quote > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; } /* The hours card is PUSHED to the bottom, not stretched to it. Stretching it put the slack INSIDE the card — 73px of empty white under the closing note once round 41 shortened this column — which is exactly what the client objected to in round 32. An auto top margin sends the same slack between the contact routes and the hours card instead, where it reads as two groups rather than a hole. It resolves to 0 when this column is the taller one, so it is safe either way. */ /* `height: auto` first, and it is what actually does the work: the hours card carries `class="svc cf-hrs"` to borrow the service-card frame, and cf-native gives `.svc` `height: 100%` so a grid of them comes out even. Inside this column that filled the card regardless of its flex settings, which is why the auto margin below resolved to 0 — an item that already fills its line has no free space to push against. */ .cf-v2 .cf-quote .cf-hrs { height: auto !important; margin-top: auto !important; } .cf-v2 .cf-quote .cf-form .wpcf7 { flex: 1 1 auto; } } .cf-v2 .cf-quote .cf-hrs .svc__foot { margin-top: 0 !important; } /* Round 41 cut the lead paragraph out of this column, and left its clearance behind: the heading's 24px bottom margin and the routes list's 34px top margin were both sized to stand off that paragraph, so with it gone they stacked into a 68px hole under "Request a quote." One 28px gap instead. Third time this pattern has appeared — remove an element and whatever was spaced around it keeps its distance from nothing. */ .cf-v2 .cf-quote .section-head { margin-bottom: 0 !important; } .cf-v2 .cf-quote .quote__routes { margin-top: 28px !important; } /* The map, as its own full-width band below the contact section. It used to sit in the left contact column, where it competed with the hours card and left a dead white strip above the footer. Full-bleed and flush: no section padding, no rounded corners, no margin - it meets the contact section above it and the footer below it. */ .cf-v2 .cf-mapstrip { overflow-x: clip; } .cf-v2 .cf-mapstrip > .row_col_wrap_12 { max-width: none !important; padding: 0 !important; } .cf-v2 .cf-mapstrip .quote__map { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; } .cf-v2 .cf-mapstrip .quote__map iframe { height: clamp(300px, 34vw, 460px) !important; filter: none; } .cf-v2 .cf-hrs__row.is-today .cf-hrs__day, .cf-v2 .cf-hrs__row.is-today .cf-hrs__time { color: var(--brand) !important; } .cf-v2 .cf-hrs__status.is-open { color: #1a7f53 !important; } .cf-v2 .intro__point svg { color: var(--brand) !important; } /* Images inside a clipped, rounded frame must lose their bottom margin. WordPress gives content images a 15px one, and because these frames have `overflow: hidden` over a pale card it renders as a strip of card colour under the picture. It looked like a shadow in the About section (round 39) and like a gap under every gallery cell here - same cause both times, so every framed image on the page is covered in one place. */ .cf-v2 .cf-gal img, .cf-v2 .cf-gal__link img, .cf-v2 .cf-heropanel img, .cf-v2 .intro__media-main img, .cf-v2 .intro__media-sub img, .cf-v2 .intro__media-third img { margin-bottom: 0 !important; } /* The message box was 10 rows / 278px, which made the form column the taller of the two and left the contact column padding itself out to match. Shorter box, so the two columns arrive at nearly the same height on their own and the auto margin has almost nothing left to absorb. */ .cf-v2 .cf-quote .cf-form textarea { height: 200px !important; min-height: 200px !important; } /* ---- 11. Footer --------------------------------------------------------- SITE-WIDE, like the header — see section 4. ------------------------------------------------------------------------- */ .cf-site #footer-outer { background: var(--v2-footer) !important; border-top: 1px solid var(--v2-footer-line) !important; } .cf-site #footer-outer .widgettitle { color: var(--v2-footer-title) !important; } /* Every text colour in here is set explicitly. The blanket `.cf-v2 p` rule in section 2 reaches into the footer, and the footer has now been light AND dark across two rounds — leaving any of it to inherit is how the paragraph under the logo ended up unreadable in round 30. */ .cf-site #footer-outer, .cf-site #footer-outer p, .cf-site #footer-outer li, .cf-site #footer-outer .cf-footer__about, .cf-site #footer-outer .textwidget { color: var(--v2-footer-text) !important; } .cf-site #footer-outer a { color: var(--v2-footer-text) !important; } .cf-site #footer-outer a:hover { color: var(--v2-brand) !important; } /* The two menu columns and the contact column each carry their own colour in cf-native — the menu one with !important at (1,3,2), because Salient marks those custom links current. Matched selector for selector; this file loads after, so order decides. */ /* EVERY link state, in every footer column. cf-native's §26 tail pins `:visited` and `:active` to `rgba(255,255,255,.62)` with !important — correct for the dark footer it was written for. Round 36 matched only the resting selectors, so on the light panel any link the visitor had already followed still rendered near-white. The whole Services column looked washed out, because those five items all point at #services and anyone who has used the menu has been there. It cannot be caught by measuring: getComputedStyle reports the UNVISITED colour for privacy, so every check this build ran reported 13.7:1 while the client was looking at white on white. The only defence is to pin all four states explicitly — which is exactly what the comment above cf-native's own rule says, for the same reason. */ .cf-site #footer-outer .widget_nav_menu li a, .cf-site #footer-outer .widget_nav_menu li a:visited, .cf-site #footer-outer .widget_nav_menu li a:active, .cf-site #footer-outer .widget_nav_menu li.current-menu-item > a, .cf-site #footer-outer .widget_nav_menu li.current_page_item > a, .cf-site #footer-outer .cf-footer__contact a, .cf-site #footer-outer .cf-footer__contact a:visited, .cf-site #footer-outer .cf-footer__contact a:active, .cf-site #footer-outer .cf-footer__legal a, .cf-site #footer-outer .cf-footer__legal a:visited, .cf-site #footer-outer .cf-footer__legal a:active { color: var(--v2-footer-text) !important; } .cf-site #footer-outer .widget_nav_menu li a:hover, .cf-site #footer-outer .widget_nav_menu li a:focus, .cf-site #footer-outer .widget_nav_menu li a:visited:hover, .cf-site #footer-outer .cf-footer__contact a:hover, .cf-site #footer-outer .cf-footer__contact a:focus, .cf-site #footer-outer .cf-footer__contact a:visited:hover, .cf-site #footer-outer .cf-footer__legal a:hover, .cf-site #footer-outer .cf-footer__legal a:focus, .cf-site #footer-outer .cf-footer__legal a:visited:hover { color: var(--v2-brand) !important; } .cf-site #footer-outer .widget_nav_menu li a::before { background: var(--v2-brand) !important; } /* The social marks have the same trap: cf-native pins their visited state to white, which on a light panel is an invisible mark in an outlined box. */ .cf-site #footer-outer .cf-footer__social a, .cf-site #footer-outer .cf-footer__social a:visited, .cf-site #footer-outer .cf-footer__social a:active { color: var(--v2-footer-text) !important; } .cf-site #footer-outer .cf-footer__social a:visited:hover { color: #fff !important; } /* And the copyright row, which is red now: its links must stay white in all four states or a followed one disappears into the background. */ .cf-site #footer-outer #copyright a, .cf-site #footer-outer #copyright a:visited, .cf-site #footer-outer #copyright a:active, .cf-site #footer-outer .cf-footer__by a, .cf-site #footer-outer .cf-footer__by a:visited { color: #fff !important; } .cf-site #footer-outer .cf-footer__contact b { color: var(--v2-footer-title) !important; } /* The small marks beside Address / Phone / Email / Hours stay brand red: on a light panel they are the one spot of colour that organises the column. */ .cf-site #footer-outer .cf-footer__contact svg { color: var(--v2-brand) !important; } /* The social marks. On the dark footer these were white-bordered tiles that inverted to white on hover; on a light panel that read as nothing happening, which is the "hover colours don't look right" the client saw. They are now outlined tiles that FILL with the brand red and take a white mark. */ .cf-site #footer-outer .cf-footer__social a { border-color: var(--v2-footer-line) !important; background: transparent !important; color: var(--v2-footer-text) !important; } .cf-site #footer-outer .cf-footer__social a svg { color: currentColor !important; } .cf-site #footer-outer .cf-footer__social a:hover, .cf-site #footer-outer .cf-footer__social a:focus-visible { background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: #fff !important; } /* The copyright row: the brand red, with white text, as asked in round 36. White on #990A2C is 8.63:1. Links carry an underline so they are still distinguishable from the sentence around them without a second colour. */ .cf-site #footer-outer #copyright { background: var(--v2-footer-foot) !important; border-top: 0 !important; } .cf-site #footer-outer #copyright, .cf-site #footer-outer #copyright p, .cf-site #footer-outer #copyright span, .cf-site #footer-outer #copyright a { color: #fff !important; } .cf-site #footer-outer #copyright a { text-decoration: underline; text-underline-offset: 3px; } .cf-site #footer-outer #copyright a:hover { color: rgba(255,255,255,.8) !important; } /* The cookie bar belongs to GDPR Cookie Compliance and runs on every page. Its dark scheme was taking the site's body grey from section 2 — 1.9:1 — and its Accept button shipped blue, which is precisely the "doesn't feel like the same site" the client described. */ .cf-site #moove_gdpr_cookie_info_bar, .cf-site #moove_gdpr_cookie_info_bar p, .cf-site #moove_gdpr_cookie_info_bar span, .cf-site #moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice { color: rgba(255,255,255,.84) !important; } .cf-site #moove_gdpr_cookie_info_bar a, .cf-site #moove_gdpr_cookie_info_bar .change-settings-button { color: #fff !important; } .cf-site #moove_gdpr_cookie_info_bar .mgbutton, .cf-site #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-all { background: var(--v2-brand) !important; border-color: var(--v2-brand) !important; color: #fff !important; } .cf-site #moove_gdpr_cookie_info_bar .mgbutton:hover, .cf-site #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-allow-all:hover { background: var(--v2-brand-dark) !important; border-color: var(--v2-brand-dark) !important; } /* ---- 12. Motion + responsive -------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-svcicon, .cf-v2 .cf-svcicon::before, .cf-v2 .cf-card, .cf-v2 .cf-ico, .cf-v2 .cf-heropanel__tri, .cf-v2 .cf-heropanel__sheen, .cf-v2 .cf-heropanel img, .cf-v2 .cf-ico__dot { transition: none !important; } .cf-v2 .cf-heropanel:hover .cf-heropanel__tri--a, .cf-v2 .cf-heropanel:hover img { transform: none; } .cf-v2 .cf-heropanel:hover .cf-heropanel__sheen { left: -60%; } .cf-v2 .cf-svcicon:hover .cf-ico__sweep, .cf-v2 .cf-card:hover .cf-ico__sweep { animation: none !important; } .cf-v2 a.cf-svcicon:hover, .cf-v2 .cf-card:hover { transform: none; } } @media (max-width: 1100px) { .cf-v2 .cf-svcicons, .cf-v2 .cf-svcicons--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-v2 .cf-cards > .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 999px) { /* The banner stacks: copy first, then the image area. */ .cf-v2 .cf-hero > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .cf-v2 .cf-svcicons, .cf-v2 .cf-svcicons--3, .cf-v2 .cf-svcicons--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-v2 .cf-cards > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-blurbs { justify-content: flex-start; } .cf-v2 .cf-blurbs li { flex: 1 1 100%; padding-left: 0; border-left: 0; } .cf-v2 .cf-svcicon__well { width: 64px; height: 64px; } /* The chevrons pull inside the panel on a phone. At full size the left one reaches past the viewport edge and reads as a cut-off shape rather than a deliberate bleed. */ .cf-v2 .cf-heropanel__tri--a { left: -5%; top: -9%; width: 36%; } } /* A card must fill its column so a row of four shares one height. */ .cf-v2 .cf-cards .wpb_column, .cf-v2 .cf-cards .vc_column-inner, .cf-v2 .cf-cards .wpb_wrapper, .cf-v2 .cf-card { height: 100%; } /* ========================================================================= 22. [cf_cards] standalone grid, and [cf_faq] ========================================================================= */ /* [cf_cards] renders its own wrapper rather than WPBakery columns, so the grid goes on the wrapper itself. The `> .row_col_wrap_12_inner` variant above stays for anything built by hand in the page builder; the card styling, hover and type are shared, so the two look identical. */ .cf-v2 .cf-cards--2, .cf-v2 .cf-cards--3, .cf-v2 .cf-cards--4 { display: grid; gap: clamp(14px, 1.7vw, 26px); margin-top: clamp(30px, 3.2vw, 48px); } .cf-v2 .cf-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-v2 .cf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-v2 .cf-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* A card that is a link gets the same affordance as a service tile: the title reddens, so hovering says "this goes somewhere" without adding an arrow. */ .cf-v2 a.cf-card { cursor: pointer; text-decoration: none !important; } .cf-v2 a.cf-card:hover .cf-card__title, .cf-v2 a.cf-card:focus-visible .cf-card__title { color: var(--brand) !important; } /* ---- FAQs -------------------------------------------------------------- */ /*
/, so it opens with no JavaScript and is keyboard operable and announced correctly without any ARIA of our own. */ .cf-v2 .cf-faq { display: grid; gap: 12px; margin-top: clamp(28px, 3vw, 44px); } .cf-v2 .cf-faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease; } .cf-v2 .cf-faq__item[open], .cf-v2 .cf-faq__item:hover { border-color: var(--brand-line); } .cf-v2 .cf-faq__item[open] { box-shadow: 0 16px 40px -30px rgba(74,10,26,.45); } .cf-v2 .cf-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(16px, 1.7vw, 22px) clamp(18px, 2vw, 26px); margin: 0; cursor: pointer; font-family: var(--v2-ff); font-size: clamp(15px, 1.05vw, 16.5px) !important; line-height: 1.5; font-weight: 600; color: var(--ink); /* Both lines are needed to drop the browser's own triangle: the standard property, and the WebKit pseudo-element Safari still uses. */ list-style: none; } .cf-v2 .cf-faq__q::-webkit-details-marker { display: none; } .cf-v2 .cf-faq__item[open] .cf-faq__q, .cf-v2 .cf-faq__q:hover { color: var(--brand); } /* The marker is a plus that becomes a minus — drawn with two bars so there is no glyph to go missing and no icon font to load. */ .cf-v2 .cf-faq__mark { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); transition: transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-faq__mark::before, .cf-v2 .cf-faq__mark::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: #fff; transform: translate(-50%, -50%); } .cf-v2 .cf-faq__mark::before { width: 9px; height: 1.5px; } .cf-v2 .cf-faq__mark::after { width: 1.5px; height: 9px; transition: opacity .3s ease; } .cf-v2 .cf-faq__item[open] .cf-faq__mark { transform: rotate(180deg); } .cf-v2 .cf-faq__item[open] .cf-faq__mark::after { opacity: 0; } .cf-v2 .cf-faq__a { padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px); } .cf-v2 .cf-faq__a p { margin: 0 !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--slate) !important; } @media (max-width: 999px) { .cf-v2 .cf-cards--3, .cf-v2 .cf-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .cf-v2 .cf-cards--2, .cf-v2 .cf-cards--3, .cf-v2 .cf-cards--4 { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-faq__mark { transition: none !important; } } /* ========================================================================= 23. Feedback round 45 — blurb strip, service tile copy, centred hero, the certified band, and a tighter section rhythm ========================================================================= */ /* The client has asked about spacing several times. At the old value two sections met with 216px of empty page between them, which is what the big gap above the FAQs was. This is the single lever: everything that uses .cf-section tightens with it. */ .cf-v2 { --section-y: clamp(48px, 4.8vw, 74px); } /* ---- Service tiles: a sentence and a "Learn more" --------------------- */ /* The tile was icon-and-title only. It now carries one line of copy and a link label, and `margin-top:auto` on the label pins it to the bottom edge so a row of five lines its labels up however long the sentences run. */ .cf-v2 .cf-svcicon p { margin: 0 !important; font-size: 13.5px !important; line-height: 1.62 !important; color: var(--slate) !important; } .cf-v2 .cf-svcicon__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand) !important; } .cf-v2 .cf-svcicon__more svg { width: 13px !important; height: 13px !important; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-svcicon:hover .cf-svcicon__more svg, .cf-v2 .cf-svcicon:focus-visible .cf-svcicon__more svg { transform: translateX(4px); } /* Five tiles carrying a paragraph need the gap between elements to come down or the card grows very tall. */ .cf-v2 .cf-svcicons--5 .cf-svcicon { gap: 13px; } /* ---- A centred hero, for pages that are not the homepage -------------- */ /* The homepage banner is text beside an image. The client asked for the inner pages to differ: one centred column, same gradient, with a shape behind. */ .cf-v2 .cf-hero--center { position: relative; overflow: hidden; } .cf-v2 .cf-hero--center > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; padding-block: clamp(66px, 7.2vw, 112px) !important; } .cf-v2 .cf-hero--center .hero__inner { max-width: 860px; margin-inline: auto; } .cf-v2 .cf-hero--center .cf-actions, .cf-v2 .cf-hero--center .cf-actions > .wpb_column, .cf-v2 .cf-hero--center .cf-actions .wpb_wrapper { display: flex; justify-content: center; flex-wrap: wrap; } /* The shapes. Two soft triangles echoing the motif on the homepage banner, drawn with clip-path so there is no image to load and nothing to go missing. Decorative only, so they are pseudo-elements and never in the accessibility tree. */ .cf-v2 .cf-hero--center::before, .cf-v2 .cf-hero--center::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background: rgba(255, 255, 255, .08); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); } .cf-v2 .cf-hero--center::before { left: 3%; top: 8%; width: clamp(90px, 11vw, 170px); aspect-ratio: 1 / .92; transform: rotate(-14deg); } .cf-v2 .cf-hero--center::after { right: 3%; bottom: -8%; width: clamp(130px, 17vw, 260px); aspect-ratio: 1 / .9; transform: rotate(9deg); background: rgba(255, 255, 255, .06); } /* The copy has to sit above the shapes. */ .cf-v2 .cf-hero--center > .row_col_wrap_12 { position: relative; z-index: 1; } /* ---- The deep band -------------------------------------------------- */ /* .cf-section--ink already sets the background and the headings. The blanket `.cf-v2 p` rules from section 2 are what turn the body copy grey again, so every text colour inside the band has to be restated. */ .cf-v2 .cf-section--ink p, .cf-v2 .cf-section--ink .lead, .cf-v2 .cf-section--ink li { color: rgba(255,255,255,.84) !important; } .cf-v2 .cf-section--ink .eyebrow { color: #FFC2CF !important; } .cf-v2 .cf-section--ink .eyebrow::before { background: #FFC2CF !important; } .cf-v2 .cf-section--ink .section-head h2, .cf-v2 .cf-section--ink .section-head .h2 { color: #fff !important; } /* The image in the band gets a light frame so it reads as placed, not pasted. */ .cf-v2 .cf-section--ink .intro__media-main { /* The stock shadow goes muddy on deep red, so the photograph is edged with a hairline of the band's own light instead. */ box-shadow: 0 26px 64px -36px rgba(0,0,0,.65) !important; outline: 1px solid rgba(255,255,255,.24); } .cf-v2 .cf-section--ink .intro__media-sub { border-color: #fff !important; } @media (max-width: 999px) { .cf-v2 .cf-svcicons--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .cf-v2 .cf-svcicons--5 { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-hero--center::before { display: none; } } /* ---- A readable measure for running body copy ------------------------- */ /* The "Who are we?" column was a very tall stack of text beside one image, which the client called off-balance. The heading and the photographs now share a two-column row and the supporting paragraphs run full width underneath at a measure that is comfortable to read rather than the full container width. */ .cf-v2 .cf-prose { max-width: 1020px; margin-inline: auto; } .cf-v2 .cf-prose p + p { margin-top: 1.05em !important; } /* Two images in the stack, on a page where the column beside them is short: keep the pair from growing taller than the text it sits next to. */ .cf-v2 .cf-about-media .intro__media { margin-top: 0 !important; } /* .intro__media-sub is absolutely positioned at bottom:-30px, so the second photograph hangs below its column. On the homepage it overhangs into section padding and nothing notices; on About the prose block sits directly beneath, so the column has to reserve the room or the card lands on the text. */ .cf-v2 .cf-about-media .intro__media { margin-bottom: 46px !important; } @media (max-width: 999px) { .cf-v2 .cf-about-media .intro__media { margin-bottom: 52px !important; } } /* ========================================================================= 24. Feedback round 46 ========================================================================= */ /* ---- The centred banner's subtext -------------------------------------- cf-native caps the hero lead at 655px with no auto margins. Inside the 860px centred head that left it sitting to the left of the heading, which is what read as "not centred". */ .cf-v2 .cf-hero--center .section-head .lead { margin-inline: auto !important; } /* ---- The homepage banner heading, in exactly three lines ----------------- The highlighted words are already wrapped in ; making that a block is what guarantees the break, at any width, without a
in the content: "Reliable & Effective" / "Fire Protection" / "Services in London". */ .cf-v2 .cf-h1--3line h1 em, .cf-v2 .cf-h1--3line .h1 em { display: block; } /* ---- Service tiles: a little tighter ------------------------------------ Less padding, a smaller column gap and slightly smaller copy, so the sentence sits comfortably inside a tile rather than filling it. */ .cf-v2 .cf-svcicons { gap: clamp(10px, 1.1vw, 16px); } .cf-v2 .cf-svcicon { padding: clamp(22px, 2.2vw, 30px) clamp(10px, 1.1vw, 16px); } .cf-v2 .cf-svcicons--5 .cf-svcicon { gap: 11px; } .cf-v2 .cf-svcicon h3 { font-size: 14px !important; } .cf-v2 .cf-svcicon p { font-size: 12.8px !important; line-height: 1.58 !important; } .cf-v2 .cf-svcicon__well { width: 68px; height: 68px; } /* ---- Five cards, three columns, no hole in the last row ------------------ Six tracks rather than three: a card spans two, so three sit per row. When there are exactly five, the last two span three each and fill the row instead of leaving an empty cell on the right. The :nth-child/:nth-last-child pair is what detects "this is item 4 of 5" in CSS alone. */ .cf-v2 .cf-cards--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cf-v2 .cf-cards--3 > * { grid-column: span 2; } .cf-v2 .cf-cards--3 > :nth-child(4):nth-last-child(2), .cf-v2 .cf-cards--3 > :nth-child(5):nth-last-child(1) { grid-column: span 3; } /* ---- The certification band: room between the photograph and the copy ---- cf-native strips the column padding inside a section, so the two halves sat edge to edge. A grid on the row restores the gap and centres the columns against each other. */ .cf-v2 .cf-certified > .row_col_wrap_12 { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(30px, 4.4vw, 70px); align-items: center; } .cf-v2 .cf-certified > .row_col_wrap_12 > .wpb_column { width: 100% !important; float: none !important; margin: 0 !important; } /* ---- The panel the overflow copy sits in -------------------------------- A tinted card rather than loose paragraphs under the two-column row: faint brand wash, hairline border that warms on hover, rounded to match every other card on the site. The paragraphs inside run as two columns so the block is wide and short rather than a single long measure. */ .cf-v2 .cf-panel { margin: 0 !important; /* Salient renders vc_column_text with the paragraphs as direct children - there is no .wpb_wrapper inside - so the grid goes on the panel itself. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 46px); background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: var(--r-lg); transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-panel:hover { border-color: var(--brand); box-shadow: 0 18px 46px -30px rgba(74,10,26,.42); transform: translateY(-3px); } .cf-v2 .cf-panel p { margin: 0 !important; } /* ---- FAQ: the answer slides, it does not jump ---------------------------
shows its content the instant `open` is set, so the height has to be animated from script (cf-site.js part 6). All CSS does here is give the answer a box that can be clipped while it moves. */ .cf-v2 .cf-faq__a { overflow: hidden; /* The transition lives here, not inline from script: setting the transition and the new height in the same tick does not reliably start an animation, so the rule is always present and script only ever moves the height value. */ transition: height 340ms cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-faq__a { transition: none; } } @media (max-width: 999px) { .cf-v2 .cf-certified > .row_col_wrap_12 { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-panel { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-v2 .cf-cards--3 > *, .cf-v2 .cf-cards--3 > :nth-child(4):nth-last-child(2), .cf-v2 .cf-cards--3 > :nth-child(5):nth-last-child(1) { grid-column: auto; } } @media (max-width: 700px) { .cf-v2 .cf-cards--3 { grid-template-columns: minmax(0, 1fr); } } /* The banner heading, capped so it lands on exactly three lines. cf-native sets `clamp(40px, 5.8vw, 76px)`, which at a desktop width put "Reliable & Effective" and "Services in London" over two lines each - five in total. The same curve capped at 58px is the value the client measured. */ .cf-v2 .cf-h1--3line h1, .cf-v2 .cf-h1--3line .h1 { font-size: clamp(40px, 5.8vw, 58px) !important; } /* Between 981px and 1279px the banner is still two columns but the text column has shrunk to around 460-575px, and 58px put the heading back on five lines. The longest line, "Reliable & Effective", needs about 10.1em, and the column is roughly 45% of the viewport through that band - so the type tracks the viewport here instead of sitting at the cap. Below 981px the banner is a single column and the clamp above is comfortable again. */ @media (min-width: 981px) and (max-width: 1279px) { .cf-v2 .cf-h1--3line h1, .cf-v2 .cf-h1--3line .h1 { font-size: 4.3vw !important; } } /* ========================================================================= 25. Feedback round 47 ========================================================================= */ /* ---- The blurb strip spans the row --------------------------------------- It was a centred flex row, so three short labels clustered in the middle with dead space at both ends. Equal tracks across the full width instead; grid-auto-flow handles whatever number of items the strip is given. */ .cf-v2 .cf-blurbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; align-items: center; } .cf-v2 .cf-blurbs li { justify-content: center; padding-inline: clamp(16px, 2.4vw, 42px); border-left: 1px solid var(--line); } .cf-v2 .cf-blurbs li:first-child { padding-left: 0; border-left: 0; } .cf-v2 .cf-blurbs li:last-child { padding-right: 0; } /* ---- The overhang reservation only when there is something overhanging --- `.intro__media-sub` is the card that hangs 30px below its column, and only the two-image stack has one. The certification band carries a single image, so the 46px was dead weight at the bottom of that column - and with the row centred it pushed the photograph 46px above the middle, which is what read as uneven spacing above and below the band. */ .cf-v2 .cf-about-media .intro__media { margin-bottom: 0 !important; } .cf-v2 .cf-about-media .intro__media:has(.intro__media-sub) { margin-bottom: 14px !important; } /* ---- "Who are we?": one section, two rows ------------------------------- The second row is a nested vc_row_inner rather than a section of its own, so the copy underneath belongs to the same block of page. The grid goes on `> .row_col_wrap_12_inner`, not the row: Salient puts a .row-bg-wrap alongside the column wrapper, and a grid on the row itself would put that background div in track one and every column below it. */ .cf-v2 .cf-whoare__top > .row_col_wrap_12_inner { display: grid; /* The copy gets the wider track and the photographs the narrower one, which shortens the image stack and lengthens the text until the two columns are close to the same height. */ grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 4.8vw, 72px); align-items: center; } .cf-v2 .cf-whoare__top > .row_col_wrap_12_inner > .wpb_column { width: 100% !important; float: none !important; padding: 0 !important; min-width: 0; } .cf-v2 .cf-whoare__body .section-head { margin-bottom: 0 !important; } .cf-v2 .cf-whoare__body p { margin-top: 1.05em !important; } /* The panel now runs the full width of the section as one block of copy, rather than being split into two columns. */ .cf-v2 .cf-whoare .cf-panel { grid-template-columns: minmax(0, 1fr); margin-top: clamp(16px, 1.8vw, 26px) !important; } @media (max-width: 999px) { .cf-v2 .cf-whoare__top > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-blurbs { grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; } .cf-v2 .cf-blurbs li { justify-content: flex-start; padding-inline: 0; border-left: 0; } } /* The photographs in "Who are we?" are portrait originals (840x1000). Without the `cf-intro` class the section no longer inherits cf-native's framing, so the stack rendered at its natural 0.84 ratio - 665px tall against 383px of copy beside it. Framed to 6:5 from the centre, the same ratio the homepage intro uses, which brings the two columns within sight of each other. */ .cf-v2 .cf-whoare .intro__media-main img { aspect-ratio: 6 / 5; object-fit: cover; object-position: center; height: auto !important; min-height: 0 !important; } .cf-v2 .cf-whoare .intro__media-col > .vc_column-inner, .cf-v2 .cf-whoare .intro__media-col .wpb_wrapper, .cf-v2 .cf-whoare .intro__media, .cf-v2 .cf-whoare .intro__media-main { height: auto !important; min-height: 0 !important; } /* ========================================================================= 26. Service pages — the process steps and the tick lists ========================================================================= */ /* ---- [cf_process] ------------------------------------------------------ */ .cf-v2 .cf-process { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); margin: clamp(30px, 3.6vw, 52px) 0 0 !important; padding: 0; list-style: none; counter-reset: none; } /* The rule that joins the steps. It sits behind the cards, inset by half a card so it never pokes out past the first or last one. */ .cf-v2 .cf-process::before { content: ""; position: absolute; z-index: 0; top: 54px; left: 16.6%; right: 16.6%; height: 1px; background: var(--brand-line); } .cf-v2 .cf-process__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 !important; padding: clamp(24px, 2.6vw, 36px) clamp(16px, 1.8vw, 26px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-process__step::marker { content: none; } .cf-v2 .cf-process__step:hover { border-color: var(--brand); box-shadow: 0 18px 44px -28px rgba(74,10,26,.45); transform: translateY(-5px); } .cf-v2 .cf-process__num { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .02em; } .cf-v2 .cf-process__title { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; color: var(--ink) !important; } .cf-v2 .cf-process p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--slate) !important; } /* ---- [cf_ticks] -------------------------------------------------------- */ .cf-v2 .cf-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(24px, 3vw, 54px); margin: clamp(26px, 3vw, 42px) 0 0 !important; padding: 0; list-style: none; } .cf-v2 .cf-ticks--1 { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-ticks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-v2 .cf-ticks li { display: flex; align-items: flex-start; gap: 13px; margin: 0 !important; padding: 0; } .cf-v2 .cf-ticks li::marker { content: none; } .cf-v2 .cf-ticks__ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } .cf-v2 .cf-ticks__ico svg { width: 13px !important; height: 13px !important; } .cf-v2 .cf-ticks__label { font-size: 15px; line-height: 1.6; color: var(--ink); } @media (max-width: 999px) { .cf-v2 .cf-process { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-process::before { display: none; } .cf-v2 .cf-ticks { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-process__step:hover { transform: none; } } /* ========================================================================= 27. Service pages — split sections, and the stacked feature list ========================================================================= */ /* ---- [cf_feats] -------------------------------------------------------- */ .cf-v2 .cf-feats { display: grid; gap: clamp(18px, 2vw, 28px); margin: clamp(24px, 2.6vw, 36px) 0 0 !important; padding: 0; list-style: none; } .cf-v2 .cf-feats__item { display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 20px); margin: 0 !important; padding: 0; } .cf-v2 .cf-feats__item::marker { content: none; } .cf-v2 .cf-feats__ico { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 14px; background: var(--brand-tint); --cf-ico-bg: var(--brand-tint); transition: background .4s ease; } .cf-v2 .cf-feats__ico .cf-ico { width: 30px !important; height: 30px !important; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-feats__item:hover .cf-feats__ico { background: #fff; } .cf-v2 .cf-feats__item:hover .cf-ico { transform: translateY(-2px) scale(1.06); } .cf-v2 .cf-feats__body { min-width: 0; } .cf-v2 .cf-feats__title { margin: 0 0 5px !important; font-size: 16px !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--ink) !important; } .cf-v2 .cf-feats p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--slate) !important; } /* ---- A section split as copy on the left, a photograph on the right ----- Same shape as "Who are we?", reused for the "Signs you need..." and benefits sections so the lists sit in a column rather than running the full page width. The grid goes on `> .row_col_wrap_12_inner` for the usual reason: Salient puts a .row-bg-wrap alongside the column wrapper. */ .cf-v2 .cf-split > .row_col_wrap_12_inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4.4vw, 68px); align-items: center; } .cf-v2 .cf-split > .row_col_wrap_12_inner > .wpb_column { width: 100% !important; float: none !important; padding: 0 !important; min-width: 0; } /* Left-aligned heading in a split section, whatever the shortcode set. */ .cf-v2 .cf-split .section-head { max-width: none !important; margin-inline: 0 !important; text-align: left !important; } .cf-v2 .cf-split .section-head .eyebrow { justify-content: flex-start !important; } .cf-v2 .cf-split .section-head .lead { margin-inline: 0 !important; } /* A single column of ticks when the list sits beside a photograph. */ .cf-v2 .cf-split .cf-ticks { grid-template-columns: minmax(0, 1fr); } @media (max-width: 999px) { .cf-v2 .cf-split > .row_col_wrap_12_inner { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-feats__item:hover .cf-ico { transform: none; } } /* In a split section the photograph fills its column, so the two sides are the same height whatever the list beside it runs to. Framing by a fixed aspect ratio cannot do this: the lists are different lengths on every page, so any one ratio is right on one page and wrong on the next. */ .cf-v2 .cf-split > .row_col_wrap_12_inner { align-items: stretch; } .cf-v2 .cf-split .intro__media-col, .cf-v2 .cf-split .intro__media-col > .vc_column-inner, .cf-v2 .cf-split .intro__media-col .wpb_wrapper, .cf-v2 .cf-split .intro__media, .cf-v2 .cf-split .intro__media-main { height: 100% !important; min-height: 0 !important; } .cf-v2 .cf-split .intro__media-main { min-height: 340px !important; } .cf-v2 .cf-split .intro__media-main { position: relative; overflow: hidden; } /* The image is taken out of the flow. Left in it, its natural height sets the row height and the copy column is the short one - which is what left the signs list at 369px beside a 627px photograph. Absolute, it fills whatever height the copy beside it asks for. */ .cf-v2 .cf-split .intro__media-main img { position: absolute; inset: 0; width: 100%; height: 100% !important; /* cf-native pins these images at min-height clamp(380px, 42vw, 560px), which overrode the 100% and cropped from the top instead of the centre. */ min-height: 0 !important; object-fit: cover; object-position: center; aspect-ratio: auto !important; } /* The copy column keeps its own height and centres against the photograph. */ .cf-v2 .cf-split > .row_col_wrap_12_inner > .wpb_column:not(.intro__media-col) { align-self: center; } /* The overview button used to sit in its own nested row for spacing. WPBakery cannot parse a vc_row_inner inside a vc_column_inner - it leaked the closing tags as text and pushed the photograph out of the row - so the button is emitted directly and spaced from here. */ .cf-v2 .cf-whoare__body > .btn, .cf-v2 .cf-whoare__body .wpb_wrapper > .btn { margin-top: clamp(20px, 2.2vw, 30px); } /* ========================================================================= 28. The current page in the nav ========================================================================= */ /* The highlight used to come only from `cf-active`, set by the scrollspy, back when every nav item pointed at a section of the one page. On a multi-page site WordPress answers this itself, so its own classes get the same treatment - including `current-menu-ancestor`, which is what marks Services while a service page is open. */ .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current-menu-item > a, .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current-menu-ancestor > a, .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current_page_item > a { color: var(--v2-brand) !important; } .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current-menu-item > a::before, .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current-menu-ancestor > a::before, .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li.current_page_item > a::before { transform: scaleX(1); } .cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.current-menu-item > a, .cf-site #slide-out-widget-area .off-canvas-menu-container .menu > li.current-menu-ancestor > a { color: var(--v2-brand) !important; } /* The submenu entry for the page actually open. */ .cf-site #header-outer header#top nav ul.sf-menu ul li.current-menu-item > a { color: var(--v2-brand) !important; } /* The header nav, a touch smaller. cf-native sets 16px with !important. */ .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a { font-size: 14.5px !important; } /* The enquiry section, brought into line with the rest. `.cf-v2 .cf-quote { background: var(--paper) }` sits later in this file than the `--soft` rule and scores the same, so it won even when the row was given the soft class - which put a white enquiry section directly below the white blurb strip on the contact page. Compounding the class settles it. Its padding was a fraction of --section-y from cf-native, 53px against the 68px every other section uses; the client asked for one spacing everywhere. */ .cf-v2 .cf-quote.cf-section--soft { background: var(--paper-soft) !important; } .cf-v2 .cf-quote > .row_col_wrap_12 { padding-block: var(--section-y) !important; } /* On a phone the banner column is about 335px, and 40px type put the heading back on five lines. "Reliable & Effective" needs roughly 10.1em, so it has to come down to about 33px to hold three lines at this width. */ @media (max-width: 480px) { .cf-v2 .cf-h1--3line h1, .cf-v2 .cf-h1--3line .h1 { font-size: clamp(24px, 8.2vw, 33px) !important; } } /* ========================================================================= 29. Round 51 - the copy in the client's order, mirrored sections, and the Projects / Social Value / Trusted Partners pages ========================================================================= */ /* ---- "Heading | Subtitle" ----------------------------------------------- The second half of the client's heading lines sits UNDER the heading, in the order it was written (it used to be the eyebrow, above). It is a

, so it needs its own size against the blanket `.cf-v2 p` rule. */ .cf-v2 .section-head .section-sub { margin: 12px 0 0 !important; font-family: var(--ff-display) !important; font-size: clamp(17px, 1.45vw, 20px) !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -.005em; color: var(--red) !important; } .cf-v2 .section-head .section-sub + .lead { margin-top: 16px !important; } /* ---- A line introducing a list, and the paragraph after one ------------ */ .cf-v2 .cf-listlabel, .cf-v2 .cf-after { max-width: 860px; margin-inline: auto !important; text-align: center; } .cf-v2 .cf-listlabel { margin-top: clamp(26px, 2.6vw, 38px) !important; } .cf-v2 .cf-listlabel p { margin: 0 !important; font-family: var(--ff-display) !important; font-size: 17px !important; font-weight: 600 !important; color: var(--ink) !important; } /* The label already stands the cards off the paragraph above. */ .cf-v2 .cf-listlabel + .cf-cards { margin-top: clamp(16px, 1.6vw, 22px); } .cf-v2 .cf-after { margin-top: clamp(28px, 3vw, 44px) !important; } .cf-v2 .cf-after p + p { margin-top: 1.05em !important; } .cf-v2 .cf-after + .cf-listlabel { margin-top: clamp(20px, 2vw, 28px) !important; } /* ---- "Learn more…" on a card that links somewhere ----------------------- */ .cf-v2 .cf-card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand) !important; } .cf-v2 .cf-card__more svg { width: 13px !important; height: 13px !important; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 a.cf-card:hover .cf-card__more svg, .cf-v2 a.cf-card:focus-visible .cf-card__more svg { transform: translateX(4px); } /* ---- The same section the other way round ------------------------------- Copy first in the markup (a phone reads heading, then text, then the photographs), photographs first on screen from 1000px. The inset photo hangs off the outer edge, so it moves to the left with them. */ @media (min-width: 1000px) { .cf-v2 .cf-whoare__top--rev > .row_col_wrap_12_inner { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); } .cf-v2 .cf-whoare__top--rev > .row_col_wrap_12_inner > .intro__media-col, .cf-v2 .cf-split--rev > .row_col_wrap_12_inner > .intro__media-col { order: -1; } .cf-v2 .cf-split--rev > .row_col_wrap_12_inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } .cf-v2 .cf-whoare__top--rev .intro__media-sub { right: auto; left: -22px; } } /* ---- [cf_entries] - Projects and Social Value cards --------------------- Flex rather than grid so a short last row centres instead of leaving a hole on the right: the client will add entries one at a time. */ .cf-v2 .cf-entries { --g: clamp(18px, 2vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); margin-top: clamp(30px, 3.2vw, 48px); } .cf-v2 .cf-entry { position: relative; flex: 0 1 calc((100% - 2 * var(--g)) / 3); min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-entry::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,.61,.36,1); z-index: 2; } .cf-v2 .cf-entry--link:hover { border-color: var(--brand); box-shadow: 0 18px 44px -26px rgba(74,10,26,.45); transform: translateY(-5px); } .cf-v2 .cf-entry--link:hover::before { transform: scaleX(1); } .cf-v2 .cf-entry__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); } .cf-v2 .cf-entry__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; transition: transform .8s cubic-bezier(.22,.61,.36,1); } /* Social Value carries logos as often as photographs: show the whole mark. */ .cf-v2 .cf-entries--social .cf-entry__media img { object-fit: contain; padding: clamp(22px, 2.6vw, 36px); box-sizing: border-box; } .cf-v2 .cf-entries--project .cf-entry__media { aspect-ratio: 1 / 1; } .cf-v2 .cf-entries--project .cf-entry--link:hover .cf-entry__media img { transform: scale(1.04); } .cf-v2 .cf-entry__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: clamp(20px, 2vw, 28px); } .cf-v2 .cf-entry__title { margin: 0 !important; font-size: clamp(17px, 1.35vw, 19px) !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--ink) !important; } .cf-v2 .cf-entry__title a { color: inherit !important; text-decoration: none !important; } .cf-v2 .cf-entry--link:hover .cf-entry__title, .cf-v2 .cf-entry__title a:focus-visible { color: var(--brand) !important; } .cf-v2 .cf-entry__text { margin: 0 !important; font-size: 15px !important; line-height: 1.65 !important; } .cf-v2 .cf-entry__btn { align-self: flex-start; margin-top: auto; } .cf-v2 .cf-entries__empty { text-align: center; margin-top: 30px !important; color: var(--slate) !important; } /* Location / scope / completion. */ .cf-v2 .cf-entry__facts { display: grid; gap: 8px; margin: 0 !important; padding: 0; } .cf-v2 .cf-entry__facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); } .cf-v2 .cf-entry__facts dt { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); padding-top: 3px; } .cf-v2 .cf-entry__facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); } @media (max-width: 999px) { .cf-v2 .cf-entry { flex-basis: calc((100% - var(--g)) / 2); } } @media (max-width: 640px) { .cf-v2 .cf-entry { flex-basis: 100%; } } /* ---- [cf_partners] - the logo wall ------------------------------------- */ .cf-v2 .cf-partners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 24px); margin: clamp(30px, 3.2vw, 48px) 0 0 !important; padding: 0 !important; list-style: none !important; } .cf-v2 .cf-partner { margin: 0 !important; padding: 0 !important; list-style: none !important; } .cf-v2 .cf-partner::before { display: none !important; } .cf-v2 .cf-partner > a, .cf-v2 .cf-partner > div, .cf-v2 .cf-partner--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 150px; padding: 22px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; text-decoration: none !important; transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-partner > a:hover { border-color: var(--brand); box-shadow: 0 16px 38px -26px rgba(74,10,26,.45); transform: translateY(-4px); } .cf-v2 .cf-partner__frame { display: flex; align-items: center; justify-content: center; width: 100%; height: 78px; } .cf-v2 .cf-partner__logo { max-width: 100%; max-height: 78px; width: auto !important; height: auto !important; margin: 0 !important; object-fit: contain; } .cf-v2 .cf-partner__name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .cf-v2 .cf-partner__text { font-size: 13.5px; line-height: 1.5; color: var(--body); } /* Until the first partner is added: labelled empty tiles. */ .cf-v2 .cf-partner--placeholder { border-style: dashed; background: var(--paper-soft); color: var(--slate); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 999px) { .cf-v2 .cf-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .cf-v2 .cf-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- One entry's own page ----------------------------------------------- */ .cf-v2 .cf-article { max-width: 860px; margin-inline: auto; } .cf-v2 .cf-article__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .cf-v2 .cf-article__back { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand) !important; text-decoration: none !important; } .cf-v2 .cf-article__back svg { width: 14px !important; height: 14px !important; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-article__back:hover svg { transform: translateX(-4px); } .cf-v2 .cf-article__date { font-size: 14px; color: var(--slate); } .cf-v2 .cf-article__media { margin: clamp(26px, 3vw, 40px) 0 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; } .cf-v2 .cf-article__media img { display: block; width: 100% !important; height: auto !important; margin: 0 !important; } .cf-v2 .cf-article__media--photo img { max-height: 620px; object-fit: cover; } .cf-v2 .cf-article__media--logo { display: flex; justify-content: center; padding: clamp(28px, 4vw, 56px); } .cf-v2 .cf-article__media--logo img { width: auto !important; max-width: min(100%, 360px); max-height: 220px; } .cf-v2 .cf-article > .cf-entry__facts { margin-top: clamp(22px, 2.4vw, 32px) !important; } .cf-v2 .cf-article__body { max-width: none; margin-top: clamp(24px, 2.6vw, 36px); } .cf-v2 .cf-article__body:empty { display: none; } .cf-v2 .cf-article__body h2, .cf-v2 .cf-article__body h3 { margin: 1.4em 0 .5em !important; } .cf-v2 .cf-article__share { display: flex; align-items: center; gap: 10px; margin-top: clamp(28px, 3vw, 44px); padding-top: 18px; border-top: 1px solid var(--line); } .cf-v2 .cf-article__share > span { margin-right: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .cf-v2 .cf-article__share a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink) !important; transition: background .3s ease, border-color .3s ease, color .3s ease; } .cf-v2 .cf-article__share a:hover, .cf-v2 .cf-article__share a:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff !important; } .cf-v2 .cf-article__share svg { width: 16px !important; height: 16px !important; } /* A single centred button under a grid (the homepage projects gallery). */ .cf-v2 .cf-center-btn { margin-top: clamp(28px, 3vw, 44px) !important; text-align: center; } .cf-v2 .cf-center-btn p { margin: 0 !important; } /* Five top-level nav items since Our Projects was added. Between the point the nav appears (1101px) and 1280px the centred list ran into the quote button by a few pixels; slightly tighter items give it ~40px of air. */ @media (min-width: 1000px) and (max-width: 1279px) { .cf-site #header-outer header#top nav > ul.sf-menu:not(.buttons) > li > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 14px !important; } } /* A heading that is a whole subtitle line ("Protecting People & Properties with Trusted Fire Protection Services in London…") ran to four lines at the section size and outweighed the photographs beside it. Long ones step down a size; short ones keep the section size. Applied by the generators to any such heading over 50 characters. */ .cf-v2 .cf-h2--long .h2 { font-size: clamp(26px, 2.5vw, 36px) !important; line-height: 1.16 !important; } /* The About opening has the most copy on the site beside a two-photo stack, so its main photograph is a portrait (4:5) rather than the 6:5 the other stacks use, bringing the two columns level. */ .cf-v2 .cf-whoare--tall .intro__media-main img { aspect-ratio: 4 / 5; } /* The client's door photographs are portraits; a split frame is usually wider than tall, so frame them from a little above centre, where the closer and the fire door sign are, rather than across the middle of the leaf. */ .cf-v2 .cf-split .intro__media-main img { object-position: 50% 30%; } /* ========================================================================= 30. Round 52 - Our Projects like the reference site, project pages, partner logos, listing-page spacing ========================================================================= */ /* ---- Listing pages: no heading above the grid, so no extra gap ---------- The grid's own top margin exists to stand it off a section heading. With no heading it added ~48px on top of the section padding - the empty band the client marked above the Social Value cards. */ .cf-v2 .cf-entries-row .cf-entries, .cf-v2 .cf-entries-row .cf-partners, .cf-v2 .cf-entries-row .cf-plist { margin-top: 0 !important; } /* ---- The statement band (icon left, one sentence right) ---------------- */ .cf-v2 .cf-statement { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 64px); max-width: 980px; margin-inline: auto; } .cf-v2 .cf-statement__ico { --cf-ico-bg: var(--paper-soft); flex: none; width: clamp(72px, 7vw, 104px); height: clamp(72px, 7vw, 104px); color: var(--ink); --cf-a: var(--brand); } .cf-v2 .cf-statement__ico .cf-ico { width: 100% !important; height: 100% !important; } .cf-v2 .cf-statement__text { margin: 0 !important; max-width: 680px; font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.7 !important; letter-spacing: .01em; color: var(--body) !important; } .cf-v2 .cf-statement__text strong { color: var(--ink); font-weight: 700; } @media (max-width: 640px) { .cf-v2 .cf-statement { flex-direction: column; text-align: center; } } /* ---- Our Projects index: photo left, details right, two to a row ------- */ .cf-v2 .cf-plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 46px) clamp(32px, 5vw, 76px); } .cf-v2 .cf-pitem { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: clamp(16px, 1.8vw, 26px); color: inherit !important; text-decoration: none !important; } .cf-v2 .cf-pitem__media { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--paper-soft); box-shadow: 0 14px 26px -14px rgba(31, 26, 28, .55); transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; } .cf-v2 .cf-pitem__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; object-position: 50% 35%; transition: transform .8s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-pitem__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cf-v2 .cf-pitem__title { margin: 0 0 4px !important; font-size: clamp(16px, 1.3vw, 18px) !important; line-height: 1.35 !important; font-weight: 700 !important; letter-spacing: .01em; color: var(--ink) !important; transition: color .3s ease; } .cf-v2 .cf-pitem__cat { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--brand); } .cf-v2 .cf-pitem__loc { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); } .cf-v2 .cf-pitem__date { font-size: 13px; color: var(--body); } .cf-v2 a.cf-pitem:hover .cf-pitem__title, .cf-v2 a.cf-pitem:focus-visible .cf-pitem__title { color: var(--brand) !important; } .cf-v2 a.cf-pitem:hover .cf-pitem__media { transform: translateY(-4px); box-shadow: 0 22px 34px -18px rgba(74, 10, 26, .55); } .cf-v2 a.cf-pitem:hover .cf-pitem__img { transform: scale(1.05); } @media (max-width: 999px) { .cf-v2 .cf-plist { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .cf-v2 .cf-pitem { grid-template-columns: minmax(0, 1fr); } } /* Page numbers, as on the reference. Only drawn when there is a page 2. */ .cf-v2 .cf-pager { display: flex; justify-content: center; gap: 12px; margin-top: clamp(34px, 3.6vw, 52px); } .cf-v2 .cf-pager__n { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border: 2px solid var(--brand); border-radius: 6px; font-weight: 700; color: var(--brand) !important; text-decoration: none !important; transition: background .3s ease, color .3s ease; } .cf-v2 .cf-pager__n.is-current, .cf-v2 a.cf-pager__n:hover { background: var(--brand); color: #fff !important; } /* ---- A project's banner: the project photo, with the title over it ------ */ .cf-v2 .cf-projhero { position: relative; overflow: hidden; color: #fff; } .cf-v2 .cf-projhero > .row-bg-wrap .row-bg { background-size: cover !important; background-position: center center !important; } /* Brand-deep wash, heaviest behind the copy on the left, as on the reference. */ .cf-v2 .cf-projhero > .row-bg-wrap::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(62, 6, 20, .9) 0%, rgba(62, 6, 20, .68) 42%, rgba(62, 6, 20, .22) 100%), linear-gradient(0deg, rgba(62, 6, 20, .45) 0%, transparent 45%); } .cf-v2 .cf-projhero > .row_col_wrap_12 { position: relative; z-index: 3; display: flex; align-items: flex-end; min-height: clamp(360px, 38vw, 540px); padding-block: clamp(48px, 5vw, 76px) !important; } .cf-v2 .cf-projhero > .row_col_wrap_12 > .wpb_column { width: 100% !important; } .cf-v2 .cf-projhero__inner { max-width: 720px; } .cf-v2 .cf-projhero__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.88) !important; text-decoration: none !important; } .cf-v2 .cf-projhero__back svg { width: 14px !important; height: 14px !important; transition: transform .4s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-projhero__back:hover { color: #fff !important; } .cf-v2 .cf-projhero__back:hover svg { transform: translateX(-4px); } .cf-v2 .cf-projhero__title { margin: 0 !important; font-size: clamp(30px, 4vw, 52px) !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: -.02em; color: #fff !important; } .cf-v2 .cf-projhero__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0 !important; font-size: 13px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88) !important; } .cf-v2 .cf-projhero__facts span { color: #FFC2CF; } .cf-v2 .cf-projhero__scope { margin: 10px 0 0 !important; font-size: 15px !important; color: rgba(255,255,255,.84) !important; } /* ---- A project's body (round 53: description and photos only) ---------- The client found the reference site's six blocks disjointed. Now: the description beside the lead photo, the remaining photos in one row beneath. Every photo opens the lightbox. */ .cf-v2 .cf-proj__main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4.6vw, 68px); align-items: center; } .cf-v2 .cf-proj__main--text { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; } .cf-v2 .cf-proj__text p + p { margin-top: 1em !important; } /* The opening paragraph carries the weight of the old centred intro. */ .cf-v2 .cf-proj__text p:first-child { font-size: clamp(17px, 1.45vw, 19px) !important; line-height: 1.7 !important; color: var(--ink) !important; } .cf-v2 .cf-proj__photo { display: block; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 40px -26px rgba(31, 26, 28, .6); cursor: zoom-in; } .cf-v2 .cf-proj__photo img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; margin: 0 !important; object-fit: cover; object-position: 50% 35%; transition: transform .8s cubic-bezier(.22,.61,.36,1); } .cf-v2 .cf-proj__photo--lead img { aspect-ratio: 4 / 3; } .cf-v2 .cf-proj__photo:hover img { transform: scale(1.04); } .cf-v2 .cf-proj__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(36px, 4vw, 60px); } .cf-v2 .cf-proj__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-v2 .cf-proj__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-v2 .cf-proj__grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; } @media (max-width: 999px) { .cf-v2 .cf-proj__main { grid-template-columns: minmax(0, 1fr); } .cf-v2 .cf-proj__grid, .cf-v2 .cf-proj__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Trusted Partners: centred rows, so five logos do not leave a hole --- */ .cf-v2 .cf-partners { --g: clamp(14px, 1.7vw, 24px); display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--g); } .cf-v2 .cf-partner { flex: 0 1 calc((100% - 3 * var(--g)) / 4); min-width: 0; } .cf-v2 .cf-partner > a, .cf-v2 .cf-partner > div { min-height: 230px; padding: 28px 22px; gap: 12px; } .cf-v2 .cf-partner__frame { height: 92px; } .cf-v2 .cf-partner__logo { max-height: 92px; } .cf-v2 .cf-partner__name { font-size: 15px; } @media (max-width: 999px) { .cf-v2 .cf-partner { flex-basis: calc((100% - 2 * var(--g)) / 3); } } @media (max-width: 640px) { .cf-v2 .cf-partner { flex-basis: calc((100% - var(--g)) / 2); } } @media (max-width: 420px) { .cf-v2 .cf-partner { flex-basis: 100%; } } /* ========================================================================= 31. Round 53 - the service cards as one scrolling row ========================================================================= */ /* [cf_cards scroll="yes"]: the five cards in one row that moves on its own and stops under the pointer or keyboard focus - the same build as the accreditation strip (two identical groups, each with its own trailing gap, translated -50% by cf-native's cf-accr-scroll). The padding is room for the cards' hover lift and shadow inside the clipped strip. */ .cf-v2 .cf-cards--scroll { margin-top: clamp(30px, 3.2vw, 48px); padding: 12px 0 34px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .cf-v2 .cf-cards__track { display: flex; width: max-content; animation: cf-accr-scroll 55s linear infinite; } .cf-v2 .cf-cards__group { --g: clamp(16px, 1.7vw, 26px); display: flex; gap: var(--g); padding-right: var(--g); } .cf-v2 .cf-cards__group > .cf-card { flex: none; width: clamp(270px, 27vw, 370px); height: auto; } .cf-v2 .cf-cards--scroll:hover .cf-cards__track, .cf-v2 .cf-cards--scroll:focus-within .cf-cards__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .cf-v2 .cf-cards__track { animation: none; } .cf-v2 .cf-cards--scroll { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .cf-v2 .cf-cards__group[aria-hidden="true"] { display: none; } } /* Yoast SEO breadcrumbs (2026-10-28). Salient prints them above the content as