(page sections). Only enqueued when a brand26 template is active, so nothing here reaches the rest of the site. Two things bite repeatedly and are worth knowing before editing: 1. Generic element resets are wrapped in :where() so they carry zero specificity. Written plainly, `.b26-page a { color: inherit }` outranks any single-class component rule and silently kills button colours. 2. Several theme SVGs paint with inline style="fill:…" attributes, which beat any selector. Those need !important, and each case is commented. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Fonts ---------------------------------------------------------------------- */ @font-face { font-family: 'Momo Trust Display'; src: url('fonts/MomoTrustDisplay-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Momo Trust Sans'; src: url('fonts/MomoTrustSans-Variable.ttf') format('truetype-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------------- 2. Tokens Names are the brand's own, from the Veygo brand guidelines page. ---------------------------------------------------------------------- */ .b26-body { /* Palette, from the "Joe x Anthony" Figma style guide (2026-08-13). Sunshine Yellow is taken from the swatch hex; the RGB label beside it in Figma reads 254 221 0 (#FEDD00), which is a different colour. Queried with design — if the RGB is authoritative, this one token changes. */ --b26-deep-green: #032b33; --b26-turquoise: #00ffe5; --b26-mint-white: #effffc; --b26-sunshine: #fbfd00; --b26-plum: #200c1d; --b26-pink: #ffb0f3; --b26-danger: #e03b3b; --b26-green-70: rgba(3, 43, 51, 0.7); --b26-green-12: rgba(3, 43, 51, 0.12); --b26-white-72: rgba(239, 255, 252, 0.72); --b26-white-30: rgba(239, 255, 252, 0.3); /* Type */ --b26-display: 'Momo Trust Display', 'graphie', 'Segoe UI', system-ui, sans-serif; --b26-sans: 'Momo Trust Sans', 'Metropolis Regular', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Tracking is specified as a percentage in Figma: Display -4%, Sans -2%. */ --b26-track-display: -0.04em; --b26-track-sans: -0.02em; /* Layout. Breakpoint spec: section padding 124 / 96 / 56, side padding 96 / 40, content capped at 1100. */ /* * V3 caps the content column at 1100 and lets the gutters take the rest: * 410 either side at 1920, 170 at 1440. Below 1024 the cap stops binding * and the gutter alone sets the width, which is what V3's 1024/900/760 * frames show (viewport minus twice the gutter). * * This was 1440px flat, which gave a 1248 content column - 148 too wide at * every desktop size. */ /* * Trustpilot's own green, used only for the hero rating line on the Deep * Green heroes. Not a Veygo brand colour, which is why it is named for what * it is rather than added to the palette above. */ --b26-trustpilot-green: #00B67A; --b26-max: calc(1100px + 2 * var(--b26-gutter)); /* * V3 steps this rather than ramping it smoothly: the 390 and 560 homepage * frames sit on 20px, the 560/760 breakpoint frames on 40px, and 900+ on * 96px. The clamp covers 560 upwards; phones take the override below. */ /* * Stepped, not fluid. V3's frames set 96 at 1920, 1440, 1024 and 900, then * 40 at 760 and below - so a 5vw ramp undershot the middle badly (51 at * 1024, 45 at 900, against the 96 the design draws). The 20 under 560 is the * client's own instruction, not V3, and stays where it is further down. */ --b26-gutter: 96px; --b26-nav-inset: clamp(12px, 2.9vw, 56px); --b26-nav-h: 64px; /* On .b26-body, not .b26-header: the drawer is a sibling of the header and needs the same value to line its logo and close button up with the closed state. Scoped to the header it was undefined there, which made the whole padding declaration invalid and collapsed it to zero. */ --b26-nav-pad: 16px; /* The cover finder, steps and several other blocks share this width. */ --b26-block: 1100px; /* Shape */ --b26-radius-band: 56px; --b26-radius-card: 16px; --b26-radius-lg: 32px; /* * The "O" is the Veygo logo's O, not a circle: 10 units wide by 9.5 tall. * Every O-shape sets its width and derives height from this, so they all * match and can be butted edge to edge without overlapping. */ --b26-o-ratio: 0.95; --b26-section-y: clamp(56px, 6.5vw, 124px); /* * Content rhythm, from the "Spacing Rules for Typography & Content * Hierarchy" notes in Figma: * heading -> the text under it 20px * text -> the next block (card, CTAs) 40px * badge -> heading 40px * Every section used its own ad-hoc value before, ranging from 6px to 72px. */ --b26-gap-title: 20px; --b26-gap-block: 40px; /* * Shared hero floor. Hero height was previously whatever the copy made it, * so Learner, New Driver and Temporary each landed at a different height * and the band jumped when moving between them. * * The 57vw ramp this used to carry is gone. It was sized against a 551px * copy column; at V3's 771 every one of the four headlines wraps to the same * number of lines, so the heroes come out identical on their own - 974 at * 1920, 902 at 1600, 861 at 1440 - and the ramp was doing nothing but adding * 120px of empty band at the top of the range, against V3's 968. * * What is left is a plain floor for a hero whose copy is genuinely short. * * min-height, not height: a page whose copy legitimately runs longer still * grows rather than clipping. */ --b26-hero-min: 820px; /* Nav colours, flipped per hero by the modifiers in section 7. */ /* * Nav glow, per the 25 August feedback. White at 7.5% lifts the bar off * dark content and disappears against light, which is the intent: keep it * legible wherever it happens to be sitting. */ --b26-nav-glow: 0 8px 16px 0 rgb(255 255 255 / 5%); /* * Deliberately unset by default. The mobile bar is painted only where a * template has declared what colour its hero actually is; everywhere else * it falls back to transparent and blends with whatever is behind it. */ --b26-nav-bg: var(--b26-deep-green); --b26-nav-fg: var(--b26-mint-white); --b26-nav-pill-bg: var(--b26-mint-white); --b26-nav-pill-fg: var(--b26-deep-green); } /* Coloured-section components soften on small screens: 56px desktop, 32px mobile. Set on the token so bands, cards and media all follow together. */ @media (max-width: 767px) { .b26-body { --b26-radius-band: 32px; } } /* ------------------------------------------------------------------------- 3. Base ---------------------------------------------------------------------- */ .b26-body { margin: 0; background: var(--b26-mint-white); color: var(--b26-deep-green); font-family: var(--b26-sans); /* P: 20/120% desktop, 18/120% mobile. */ font-size: clamp(18px, 1.04vw, 20px); line-height: 1.2; letter-spacing: var(--b26-track-sans); -webkit-font-smoothing: antialiased; /* clip, never hidden: hidden forces overflow-y to auto and creates a nested scroll container that swallows the first wheel gesture. */ overflow-x: hidden; overflow-x: clip; overflow-anchor: none; } /* * The clip has to be on too, not just . * * On a real phone the document element is what scrolls, and with overflow-x * visible there it still panned into whitespace even though body was clipping: * html.scrollWidth measured 638 against a 390 viewport. clip rather than hidden * for the same reason as above, and because hidden on would break the * sticky header. */ html:has(> .b26-body) { overflow-x: clip; } /* * Pin the drawer to the viewport rather than the initial containing block. * * It is position: fixed with inset: 0, which should be 390 wide on a phone. It * measured 638, because the trust ribbon's horizontally scrolling content is * 935 wide and that expands the ICB a fixed element sizes against - so the * drawer inherited the overflow and then became the thing keeping the document * wide. 100vw is the viewport regardless of what the content does. */ .b26-drawer { max-width: 100vw; } .b26-page *, .b26-body .b26-header *, .b26-body .b26-footer * { box-sizing: border-box; } .b26-page img, .b26-body .b26-header img, .b26-body .b26-footer img { max-width: 100%; height: auto; display: block; } /* :where() keeps these at zero specificity. See the header comment. */ :where(.b26-page) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; } :where(.b26-page) :where(ul, ol) { padding: 0; list-style: none; } :where(.b26-page) :where(a) { color: inherit; } .b26-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .b26-skip { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 14px 22px; background: var(--b26-deep-green); color: var(--b26-mint-white); border-radius: 999px; text-decoration: none; font-family: var(--b26-display); } .b26-skip:focus { top: 16px; } .b26-body :focus-visible { outline: 3px solid var(--b26-deep-green); outline-offset: 3px; border-radius: 4px; } .b26-section--dark :focus-visible, .b26-hero--dark :focus-visible, .b26-header :focus-visible { outline-color: var(--b26-turquoise); } /* ------------------------------------------------------------------------- 4. Layout ---------------------------------------------------------------------- */ .b26-wrap { width: 100%; max-width: var(--b26-max); margin: 0 auto; padding: 0 var(--b26-gutter); } @media (max-width: 899px) { .b26-body { --b26-gutter: 40px; } } .b26-block { width: 100%; max-width: var(--b26-block); margin: 0 auto; } .b26-section { position: relative; padding: var(--b26-section-y) 0; } /* * Legacy Gutenberg pages only. * * The old header opened

. 52 of the 68 ACF block renders set no vertical margin of their * own and took 100% of their inter-section spacing from that gap, so without * this every legacy page collapses into one unbroken run of sections. * * Deliberately NOT on plain .b26-page: brand26 templates compose partials that * manage their own padding, and a gap here would double it. */ .b26-page--legacy { display: flex; flex-direction: column; gap: 4rem; } @media (min-width: 1024px) { .b26-page--legacy { gap: 8rem; } } /* Full-bleed colour bands. The radius on a 100%-wide element is what makes the notched corners in the mockups, so the band itself is not inset. */ .b26-band { border-radius: var(--b26-radius-band); } .b26-band--top { border-radius: var(--b26-radius-band) var(--b26-radius-band) 0 0; } .b26-band--bottom { border-radius: 0 0 var(--b26-radius-band) var(--b26-radius-band); } .b26-section--turquoise { background: var(--b26-turquoise); } .b26-section--dark { background: var(--b26-deep-green); color: var(--b26-mint-white); } .b26-section--plum { background: var(--b26-plum); color: var(--b26-mint-white); } .b26-section--pink { background: var(--b26-pink); color: var(--b26-plum); } /* ------------------------------------------------------------------------- 5. Typography ---------------------------------------------------------------------- */ /* * Scale is straight from the Figma style guide, stated as size/line-height%. * * desktop mobile * H1 96 / 100 52 / 100 * H2 80 / 100 48 / 100 * H3 40 / 100 32 / 100 * H4 24 / 100 22 / 100 * H5 20 / 100 18 / 100 * CTA 24 / 100 20 / 100 * FAQ Q 24 / 120 * P Head 30 / 35 20 / 120 * P 20 / 120 18 / 120 * List 18 / 120 16 / 120 * * Each clamp runs from the mobile value to the desktop value, with the vw * term set so the maximum lands at a 1920px viewport (desktop px / 19.2). * * P Head's desktop "30/35%" is the one value taken literally rather than as a * percentage: 35% of 30px would be 10.5px, i.e. lines on top of each other. * Read as 30px/35px, a ratio of 1.167. Queried with design. */ .b26-page h1, .b26-page h2, .b26-page h3, .b26-page h4, .b26-display { font-family: var(--b26-display); font-weight: 400; letter-spacing: var(--b26-track-display); } .b26-h1 { font-size: clamp(49px, 5vw, 96px); line-height: 1; } .b26-h2 { font-size: clamp(48px, 4.17vw, 80px); line-height: 1; } .b26-h3 { font-size: clamp(32px, 2.08vw, 40px); line-height: 1; } .b26-h4 { font-size: clamp(22px, 1.25vw, 24px); line-height: 1; } .b26-h5 { font-size: clamp(18px, 1.04vw, 20px); line-height: 1; } /* * Standfirst / paragraph heading. * * 120%, like every other text style. The spec card reads "30/35%", which I had * taken literally as 30px/35px; design have confirmed it should be 1.2. */ .b26-lead { font-size: clamp(20px, 1.56vw, 30px); line-height: 1.2; } .b26-body-copy { font-size: clamp(18px, 1.04vw, 20px); line-height: 1.2; } .b26-list-copy { font-size: clamp(16px, 0.94vw, 18px); line-height: 1.2; } /* * Sunshine Yellow text highlight. * * Geometry is from the brand guidelines: the bar occupies the LOWER HALF of * the x-height and sits on the baseline, so its top edge runs through the * counters of the letters. * * Momo Trust Display metrics per em: x-height 0.57, ascent 1.025, * descent 0.275. The background box of an inline element is its content box, * height 1.3em, so: * bar height = 0.57 / 2 = 0.285em * baseline = 1.025em from top * bar top = 1.025 - 0.285 = 0.74em * * Brand rule: Sunshine Yellow only, on Turquoise or Mint White, behind Deep * Green copy. Never in the same section as kinetic type animations. */ .b26-mark { display: inline; background-image: linear-gradient(var(--b26-sunshine), var(--b26-sunshine)); background-repeat: no-repeat; background-size: 100% 0.285em; background-position: 0 0.74em; } .b26-accent { color: var(--b26-turquoise); } /* ------------------------------------------------------------------------- 6. Buttons ---------------------------------------------------------------------- */ .b26-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--b26-display); /* CTA: 24/100% desktop, 20/100% mobile. Padding 15px vertical, 55px horizontal, maximum corner radius. */ font-size: clamp(20px, 1.25vw, 24px); line-height: 1; letter-spacing: var(--b26-track-display); text-decoration: none; padding: 15px 55px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .b26-btn--green { background: var(--b26-deep-green); color: var(--b26-mint-white); border-color: var(--b26-deep-green); } .b26-btn--green:hover { background: transparent; color: var(--b26-deep-green); } .b26-btn--white { background: var(--b26-mint-white); color: var(--b26-deep-green); border-color: var(--b26-mint-white); } .b26-btn--white:hover { background: transparent; color: var(--b26-mint-white); } .b26-btn--turquoise { background: var(--b26-turquoise); color: var(--b26-deep-green); border-color: var(--b26-turquoise); } .b26-btn--turquoise:hover { background: transparent; color: var(--b26-turquoise); } /* * The Poppy Pink cards - "Two ways to pay" and the cross-sell - carry Dark * Plum pills, not Deep Green. Deep Green on Poppy Pink is the one brand pairing * the design never uses. */ .b26-btn--plum { background: var(--b26-plum); color: var(--b26-mint-white); border-color: var(--b26-plum); } .b26-btn--plum:hover { background: transparent; color: var(--b26-plum); } .b26-btn--outline-plum { background: transparent; color: var(--b26-plum); border-color: var(--b26-plum); } .b26-btn--outline-plum:hover { background: var(--b26-plum); color: var(--b26-mint-white); } .b26-btn--outline-green { background: transparent; color: var(--b26-deep-green); border-color: var(--b26-deep-green); } .b26-btn--outline-green:hover { background: var(--b26-deep-green); color: var(--b26-mint-white); } .b26-btn--outline-white { background: transparent; color: var(--b26-mint-white); border-color: var(--b26-mint-white); } .b26-btn--outline-white:hover { background: var(--b26-mint-white); color: var(--b26-deep-green); } .b26-btns { display: flex; flex-wrap: wrap; gap: 16px; } /* * Mobile CTAs are full width per the style guide. Scoped to .b26-btns so it * only affects buttons in a deliberate CTA group, not every inline .b26-btn * (nav pill, drawer, carousel controls), which would otherwise stretch. */ @media (max-width: 767px) { .b26-btns { width: 100%; } .b26-btns .b26-btn { width: 100%; padding-left: 24px; padding-right: 24px; } } /* ------------------------------------------------------------------------- 7. Header ---------------------------------------------------------------------- */ .b26-header { position: sticky; top: 0; z-index: 50; /* * The pull-up must equal the header's real height, so both read * --b26-nav-pad. It is declared on .b26-body rather than here, so the * drawer inherits the same value and its logo and close button land exactly * where the closed header's do. Re-declaring it here shadowed the mobile * override and put the two states 4px apart vertically. */ padding: var(--b26-nav-pad) var(--b26-nav-inset) 0; /* Pull the page up so the hero sits behind the floating pill. */ margin-bottom: calc((var(--b26-nav-h) + var(--b26-nav-pad)) * -1); } /* Deep Green hero gets the light pill; Turquoise and Mint White heroes get the dark one. Past the hero every page is Mint White, so .is-scrolled forces the dark pill back. */ .b26-header--on-dark { /* Turquoise pill on the Deep Green hero, per the 1 September frames. */ --b26-nav-bg: var(--b26-turquoise); --b26-nav-fg: var(--b26-deep-green); --b26-nav-pill-bg: var(--b26-deep-green); --b26-nav-pill-fg: var(--b26-mint-white); } /* Painted to match the hero, per the templates that declare one. */ .b26-header--on-turquoise { --b26-nav-top-bg: var(--b26-turquoise); } .b26-header--on-deep-green { --b26-nav-top-bg: var(--b26-deep-green); } .b26-header.is-scrolled { --b26-nav-bg: var(--b26-deep-green); --b26-nav-fg: var(--b26-mint-white); --b26-nav-pill-bg: var(--b26-mint-white); --b26-nav-pill-fg: var(--b26-deep-green); } /* * On a Deep Green hero the bar is the same colour as what is behind it, so the * glow just draws a halo around nothing. It earns its keep once the page has * scrolled and the bar is floating over content, which is when .is-scrolled * turns it back on. */ .b26-header--on-dark:not(.is-scrolled) .b26-nav { box-shadow: none; } .b26-nav { display: flex; align-items: center; gap: 28px; height: var(--b26-nav-h); padding: 0 8px 0 24px; background: var(--b26-nav-bg); color: var(--b26-nav-fg); border-radius: 999px; box-shadow: var(--b26-nav-glow); transition: background-color 0.25s ease, color 0.25s ease; } .b26-nav__logo { display: flex; align-items: center; flex: none; width: 128px; color: var(--b26-nav-fg); } .b26-nav__logo svg { width: 100%; height: auto; /* * The artwork fills its viewBox almost exactly: the descenders of the y and * the g bottom out at 39.90 of 40 units, which is under a tenth of a pixel * of headroom once scaled into the bar. Clipping rounded that away at some * widths and shaved the tails, which is what the client spotted. Nothing * here needs cropping, so let it paint. */ overflow: visible; } /* Forced: the site logo SVG paints with inline fill attributes, and the mark has to flip with the pill on Deep Green heroes. */ .b26-nav__logo svg, .b26-nav__logo svg *, .b26-drawer__logo svg, .b26-drawer__logo svg * { fill: currentColor !important; } .b26-nav__primary { display: flex; align-items: center; gap: 30px; margin: 0 auto; } .b26-nav__item { position: relative; } /* A button, not a link: it only discloses the mega panel. Reset the UA button styling back to the nav's own type. */ .b26-nav__link { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 1rem; line-height: inherit; color: inherit; background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; } /* Underline grows from the centre, and stays put while the panel is open so it is always obvious which panel you are looking at. */ .b26-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transition: transform 0.22s ease; } .b26-nav__link:hover::after, .b26-nav__link[aria-expanded='true']::after { transform: scaleX(1); } .b26-nav__chev { display: inline-flex; width: 14px; height: 14px; flex: none; transition: transform 0.22s ease; } .b26-nav__chev svg { width: 100%; height: 100%; stroke-width: 2.25; } .b26-nav__link[aria-expanded='true'] .b26-nav__chev { transform: rotate(180deg); } /* ------------------------------------------------------------------------- Mega menu One shared panel for all three products. Anchored to .b26-header, which is position:sticky and therefore already a containing block, so it spans exactly the nav pill's width and sits in one place whichever trigger is active. ---------------------------------------------------------------------- */ /* Centred under the three nav triggers, not on the pill or the viewport: the triggers sit off-centre because the logo and the utils either side are different widths. brand26.js measures .b26-nav__primary and writes its centre to --b26-mega-x, clamped so the panel cannot run off either edge. The fallback keeps it pinned to the pill's left edge if JS never runs. */ .b26-mega { position: absolute; top: 100%; left: var(--b26-mega-x, var(--b26-nav-inset)); /* Capped rather than stretched the full nav width. The groups stack, so the panel only needs to be as wide as its widest row (the five duration chips). Stretching it left a large dead area on the right. */ width: min(890px, calc(100% - var(--b26-nav-inset) * 2)); margin-top: 12px; z-index: 1; background: var(--b26-nav-bg); color: var(--b26-nav-fg); border-radius: 28px; /* Less at the bottom: the last row of links carries its own descender space, so an even 28px read as too deep. */ padding: 28px 28px 14px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } /* brand26.js adds this once it has measured and written --b26-mega-x, so the panel stays sanely left-anchored if the script never runs. The -50% and the open animation share one transform, so every rule below repeats both. */ .b26-mega--centred { transform: translateX(-50%) translateY(-8px); } .b26-mega[hidden] { /* The attribute is only there so the panel is inert before JS runs. Presentation is driven by .is-open, so override the UA display:none. */ display: block; } .b26-mega.is-open { opacity: 1; visibility: visible; transform: none; } .b26-mega--centred.is-open { transform: translateX(-50%); } /* Invisible bridge across the 12px gap, so moving the pointer down from a trigger never crosses dead space. */ .b26-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* * Closed state must be genuinely inert. * * The container sets visibility:hidden when closed, but visibility is one of * the few inherited properties a descendant can override — and * .b26-mega__panel.is-active does exactly that, setting visibility:visible and * pointer-events:auto. Combined with the container's opacity:0 (which does NOT * block hit-testing) that left the active panel's links invisible but still * hoverable, clickable and in the tab order: you would get a pointer cursor * and title tooltips over empty page. * * brand26.js also toggles the `inert` attribute, which covers focus and the * accessibility tree. These rules are the CSS half of the same guarantee. */ .b26-mega:not(.is-open) { pointer-events: none; } .b26-mega:not(.is-open) .b26-mega__panel { visibility: hidden; pointer-events: none; } /* Grid-stacked so all three panels share one cell. The container takes the height of the tallest once and never animates its size. */ .b26-mega__inner { display: grid; } .b26-mega__panel { grid-area: 1 / 1; display: grid; /* 240px rather than 200: the image sets the floor for the shorter panels, so a taller square leaves less dead space under Learner while Temporary (the tallest) still drives the container height. */ grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; pointer-events: none; } .b26-mega__panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0.06s; } .b26-mega__media { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: rgba(127, 127, 127, 0.18); } .b26-mega__media img { width: 100%; height: 100%; object-fit: cover; } /* Lead sits above the groups, and the groups stack. With a capped panel width this reads as one column of content beside the image, rather than content strung out across a wide bar. */ .b26-mega__body { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; } /* Groups stack by default. A group marked width:auto shrinks to its content so consecutive auto groups share a row — the vehicle types and the "or whoever you are" column sit side by side. */ .b26-mega__groups { display: flex; flex-wrap: wrap; gap: 22px 36px; } .b26-mega__group--full { flex: 0 0 100%; } .b26-mega__group--auto { flex: 0 1 auto; } .b26-mega__lead { display: inline-flex; align-items: center; gap: 10px; /* Shrink to content, otherwise it stretches and the arrow is pushed away from the label. */ align-self: flex-start; font-family: var(--b26-display); font-size: 1.375rem; line-height: 1.1; text-decoration: none; } .b26-mega__lead svg { width: 20px; height: 20px; flex: none; stroke-width: 2; transition: transform 0.2s ease; } .b26-mega__lead:hover svg { transform: translateX(4px); } .b26-mega__intro, .b26-mega__heading { font-size: 0.9375rem; opacity: 0.72; margin-bottom: 10px; } /* Inline link inside a group heading, e.g. "young drivers". Underlined so it is not colour-only, since the heading is already a muted tone. */ .b26-mega__heading-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .b26-mega__heading-link:hover { color: var(--b26-turquoise); } .b26-mega__links { list-style: none; margin: 0; padding: 0; } /* Sentence-length labels: vertical rows that read as a continuation of the intro line above them. */ .b26-mega__links--list { display: flex; flex-direction: column; gap: 2px; } .b26-mega__links--list a { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px; margin-left: -12px; border-radius: 10px; font-size: 1.0625rem; text-decoration: none; transition: background-color 0.18s ease; } .b26-mega__links--list a:hover { background: rgba(127, 127, 127, 0.18); } .b26-mega__links--list svg { width: 16px; height: 16px; flex: none; stroke-width: 2; opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; } .b26-mega__links--list a:hover svg { opacity: 1; transform: none; } /* Vehicle types: icon beside label, two columns. Capped and tightened so six items stay a compact block rather than stretching across the panel. */ .b26-mega__links--icons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; max-width: 330px; } .b26-mega__links--icons a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; margin-left: -10px; border-radius: 10px; font-size: 1rem; text-decoration: none; transition: background-color 0.18s ease; } .b26-mega__links--icons a:hover { background: rgba(127, 127, 127, 0.18); } .b26-mega__icon { display: inline-flex; width: 20px; height: 20px; flex: none; } .b26-mega__icon svg { width: 100%; height: 100%; } /* Short labels (ages, durations) as a wrapping row of pills. */ .b26-mega__links--chips { display: flex; flex-wrap: wrap; gap: 8px; } .b26-mega__links--chips a { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 1rem; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; } .b26-mega__links--chips a:hover { background: var(--b26-nav-pill-bg); color: var(--b26-nav-pill-fg); } .b26-nav__utils { display: flex; align-items: center; gap: 20px; flex: none; } .b26-nav__util { font-size: 1rem; text-decoration: none; white-space: nowrap; } .b26-nav__util:hover { text-decoration: underline; text-underline-offset: 3px; } .b26-nav__cta, .b26-nav__login { display: inline-flex; align-items: center; gap: 8px; font-family: var(--b26-display); font-size: 0.9375rem; line-height: 1; text-decoration: none; padding: 14px 20px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; transition: background-color 0.18s ease, color 0.18s ease; } .b26-nav__cta { color: var(--b26-nav-fg); } .b26-nav__cta:hover { background: var(--b26-nav-pill-bg); color: var(--b26-nav-pill-fg); } .b26-nav__login { background: var(--b26-nav-pill-bg); color: var(--b26-nav-pill-fg); border-color: var(--b26-nav-pill-bg); } .b26-nav__login:hover { background: transparent; color: var(--b26-nav-fg); border-color: var(--b26-nav-fg); } .b26-nav__login svg { width: 18px; height: 18px; } .b26-nav__burger { display: none; align-items: center; justify-content: center; /* V3: a 32px circle holding a 15px icon. */ width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 999px; /* * Inverse of whatever it sits on, not the nav pill colours. * * On the turquoise hero the pill is Mint White, which gave a white circle * on turquoise; the design has it dark there. But hardcoding Deep Green * made it vanish on the Deep Green product heroes, so the dark-hero case * flips it back below. */ background: var(--b26-deep-green); color: var(--b26-mint-white); cursor: pointer; } .b26-header--on-dark .b26-nav__burger, .b26-header.is-scrolled .b26-nav__burger { /* * Flipped once the bar itself goes Deep Green, or the circle would be Deep * Green on Deep Green and only the three bars would show. */ background: var(--b26-mint-white); color: var(--b26-deep-green); } .b26-nav__burger-bars { display: block; position: relative; width: 15px; height: 2px; background: currentColor; border-radius: 2px; } .b26-nav__burger-bars::before, .b26-nav__burger-bars::after { content: ''; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; border-radius: 2px; } .b26-nav__burger-bars::before { top: -6px; } .b26-nav__burger-bars::after { top: 6px; } /* Mobile drawer. Not in the mockups; built to match the system and signed off separately. */ .b26-drawer { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; /* White body with a turquoise strip behind the logo and close button. The whole panel used to be Deep Green. */ background: var(--b26-mint-white); color: var(--b26-deep-green); padding: 0; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; /* * Fade only, no slide. The panel used to translate 8px on the way in and * out, which read as a jump against a full-screen overlay rather than a * transition. visibility is in the list so it holds until the fade * finishes, keeping the closed panel properly inert. */ transition: opacity 0.18s ease, visibility 0.18s; } .b26-drawer.is-open { opacity: 1; visibility: visible; } .b26-drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; /* Mint White while the menu is open, not the Turquoise of the closed bar. */ background: var(--b26-mint-white); color: var(--b26-deep-green); /* * Same inset as the closed header, not a flat 20px. The two states sit on * top of each other when the menu opens, and a fixed value left the logo * and the button jumping 5-6px sideways as it did. */ padding: var(--b26-nav-pad) var(--b26-nav-inset); } .b26-drawer__utils { padding-inline: var(--b26-nav-inset); } .b26-drawer__logo { /* Matches the closed bar's mark exactly, so it does not resize on open. */ width: 133px; /* Sits on the turquoise strip, so it inks dark. */ color: var(--b26-deep-green); } .b26-drawer__logo svg { width: 100%; height: auto; } .b26-drawer__close { display: inline-flex; align-items: center; justify-content: center; /* * The same 32px circle as the burger it replaces. At 48 it grew as the * menu opened, which is visible because the two sit in the same spot. */ width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; flex: none; /* * No background of its own any more: the supplied artwork IS the disc, with * the cross knocked out of it so the drawer shows through. The fallback * glyph below still needs the old treatment. */ background: transparent; color: var(--b26-mint-white); cursor: pointer; } .b26-drawer__close img { display: block; width: 32px; height: 32px; } /* Only reached if the artwork is missing and b26_icon('close') renders. */ .b26-drawer__close:not(:has(img)) { background: var(--b26-deep-green); } .b26-drawer__close svg { /* V3 draws the cross at 11 inside the 32 circle. */ width: 11px; height: 11px; } /* * The circle is 32 because that is what V3 draws, but 32 is under the 44px * minimum for a touch target. This extends the tappable area to 48 without * changing the artwork or taking up any layout space, so the button looks like * the design and still hits comfortably with a thumb. */ .b26-nav__burger, .b26-drawer__close { position: relative; } .b26-nav__burger::after, .b26-drawer__close::after { content: ''; position: absolute; inset: -8px; border-radius: inherit; } .b26-drawer__nav { display: flex; flex-direction: column; margin-top: 28px; list-style: none; padding: 0 var(--b26-nav-inset); } /* No dividers between the links: the design separates them on spacing alone. */ .b26-drawer__nav > li { border-bottom: 0; } /* Native

accordions, so the drawer works with no JS. Same content as the desktop mega panel, from the same b26_nav_panels() array. */ .b26-drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--b26-display); font-size: 1.5rem; text-decoration: none; padding: 18px 0; color: inherit; cursor: pointer; list-style: none; } .b26-drawer__link::-webkit-details-marker { display: none; } .b26-drawer__mark { display: inline-flex; width: 28px; height: 28px; flex: none; transition: transform 0.22s ease; } .b26-drawer__mark svg { width: 100%; height: 100%; stroke-width: 2.25; } .b26-drawer__group[open] .b26-drawer__mark { transform: rotate(180deg); } .b26-drawer__panel { padding: 0 0 22px; } .b26-drawer__lead { display: flex; align-items: center; gap: 12px; padding: 10px 0 16px; font-family: var(--b26-display); font-size: 1.125rem; text-decoration: none; color: inherit; } .b26-drawer__lead svg { width: 18px; height: 18px; flex: none; stroke-width: 2; } .b26-drawer__thumb { display: block; width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; background: var(--b26-white-30); } .b26-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .b26-drawer__intro, .b26-drawer__heading { font-size: 0.9375rem; color: var(--b26-white-72); margin: 0 0 10px; } .b26-drawer__links { list-style: none; margin: 0 0 18px; padding: 0; } .b26-drawer__links--list { display: flex; flex-direction: column; gap: 2px; } .b26-drawer__links--list a { display: block; padding: 9px 0; font-size: 1.0625rem; text-decoration: none; color: inherit; } .b26-drawer__links--icons { display: flex; flex-direction: column; gap: 2px; } .b26-drawer__links--icons a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 1.0625rem; text-decoration: none; color: inherit; } .b26-drawer__icon { display: inline-flex; width: 24px; height: 24px; flex: none; } .b26-drawer__icon svg { width: 100%; height: 100%; } .b26-drawer__links--chips { display: flex; flex-wrap: wrap; gap: 8px; } .b26-drawer__links--chips a { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--b26-white-30); font-size: 1rem; text-decoration: none; color: inherit; } .b26-drawer__utils { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; padding-bottom: 24px; } .b26-drawer__utils .b26-btn { width: 100%; } /* * Stacked, not a row: these now read as two more entries in the same list as * the product links above, just in a lighter weight. */ .b26-drawer__util-links { display: flex; flex-direction: column; gap: 0; margin-top: 0; margin-bottom: 24px; } .b26-drawer__util-links a { font-size: 1.125rem; text-decoration: none; color: var(--b26-deep-green); padding: 14px 0; } .b26-drawer__login { gap: 8px; } .b26-drawer__login svg { width: 18px; height: 18px; } @media (max-width: 1180px) { .b26-nav__primary { display: none; } /* * The utility group stays, but only the quote CTA shows: Help, Start a * claim and Log in are all in the drawer on mobile. Keeping the container * rather than moving the button in the markup leaves desktop untouched. */ .b26-nav__utils > *:not(.b26-nav__cta) { display: none; } /* * Pushed right so the CTA pairs with the burger rather than floating in * the middle: the auto margin takes all the slack, leaving the mark on the * left and the two controls together on the right. */ .b26-nav__utils { gap: 0; margin-left: auto; } /* * Compact enough to sit between the mark and the burger on a small phone, * and Mint White by default like the mark beside it. * * It used to take --b26-nav-fg, which is the DESKTOP pill's foreground: on * a Deep Green hero that is Deep Green, so the button was Deep Green on a * Deep Green bar and invisible until the page scrolled. */ .b26-nav__cta { font-size: 0.875rem; padding: 10px 16px; border-width: 1px; /* * Deep Green by default, which is what the light pages need: the blog * and the article templates leave the bar unpainted, so it sits on Mint * White and a Mint White button is invisible there. The painted bars * flip it back below. */ color: var(--b26-deep-green); } .b26-header--on-deep-green .b26-nav__cta, .b26-header.is-scrolled .b26-nav__cta { color: var(--b26-mint-white); } /* Below this the drawer accordions carry the same content. */ .b26-mega, .b26-mega[hidden] { display: none; } /* * A full-width rectangle, not the desktop pill: Turquoise over the hero, * Deep Green once past it. The header loses its own inset so the bar can * reach both edges, and the 20px lives inside the bar instead, matching * the page gutter. */ .b26-header { padding-left: 0; padding-right: 0; padding-top: 0; margin-bottom: calc(var(--b26-nav-h) * -1); } /* * Transparent on load, so the bar takes whatever hero sits behind it and * blends exactly, whatever colour that page uses. It only becomes a bar * once .is-scrolled fires and it is floating over content, which is the * point at which it needs to separate. The glow follows the same rule. * * Painting a token colour here instead meant every hero had to be mirrored * in that token, and any page whose hero did not match got a visible band. */ .b26-nav { justify-content: space-between; background: var(--b26-nav-top-bg, transparent); box-shadow: none; padding: 0 20px; border-radius: 0; color: var(--b26-mint-white); /* Just enough to separate the CTA from the burger beside it. */ gap: 12px; } /* The open drawer's bar sits exactly where the closed one did. */ .b26-drawer__top { min-height: var(--b26-nav-h); padding: 0 20px; } /* * Over the Turquoise header the mark is Deep Green, per the supplied * artwork, and the burger's stripes pick up the Turquoise behind it. Once * scrolled onto the Deep Green bar both flip, below. */ .b26-header:not(.is-scrolled):not(.b26-header--on-dark) .b26-nav__logo, .b26-header:not(.is-scrolled):not(.b26-header--on-dark) .b26-nav__cta { color: var(--b26-deep-green); } .b26-header:not(.is-scrolled):not(.b26-header--on-dark) .b26-nav__burger { color: var(--b26-turquoise); } /* * Both on .b26-body, not on .b26-header. The drawer is a sibling of the * header, not a child, so anything declared on the header does not reach * it: --b26-nav-h fell back to the 64px desktop value there and the logo * sat 9px lower with the menu open than with it closed. */ .b26-body { --b26-nav-pad: 20px; /* * 72, per the "Nav bar - inside/after the header section" frames. The * bar sits flush to the top of the viewport and the height is what * gives the logo and burger their 20px above and below; at 48 they were * pinned near the top edge. */ --b26-nav-h: 72px; } .b26-header.is-scrolled .b26-nav { background: var(--b26-deep-green); box-shadow: var(--b26-nav-glow); } /* Mint White in both states: over the Turquoise hero and on the Deep Green. */ .b26-nav__logo { color: var(--b26-mint-white); /* V3 draws the mark 133 wide in the mobile bar. */ width: 133px; } .b26-nav__burger { display: inline-flex; } } /* ------------------------------------------------------------------------- 8. Hero V2: the Homepage hero is Veygo Turquoise with a Deep Green disc. Product pages are Deep Green with a Turquoise disc. Both carry a Trustpilot badge above the headline. ---------------------------------------------------------------------- */ .b26-hero .b26-wrap { max-width: calc(1400px + 2 * var(--b26-gutter)); } .b26-hero { position: relative; /* * 144 + the headline's own 40px margin puts the h1 at 184, which is where * every one of the 2 September frames pins it. */ padding: 144px 0 clamp(64px, 7vw, 120px); min-height: var(--b26-hero-min); display: flex; flex-direction: column; /* * Top-aligned, not centred. Centring inside the min-height meant a page with * shorter copy pushed its headline down - the four heroes started their h1 * anywhere between 191 and 241, where the design pins them all to the same * line. Any slack now falls below the content instead. */ justify-content: flex-start; overflow: hidden; overflow: clip; } .b26-hero--turquoise { background: var(--b26-turquoise); --b26-hero-disc: var(--b26-deep-green); } .b26-hero--dark { background: var(--b26-deep-green); color: var(--b26-mint-white); --b26-hero-disc: var(--b26-turquoise); } .b26-hero--dark .b26-hero__title { color: var(--b26-turquoise); } .b26-hero__grid { position: relative; z-index: 2; display: grid; /* * Tracks, not proportions. V3 gives the hero copy 771 and the art 556 with * 73 between, across a 1400 container - wider than the 1100 the sections * below use, which is why .b26-hero .b26-wrap carries its own cap. */ grid-template-columns: minmax(0, 1fr) 556px; gap: 73px; /* * Start, so the copy column does not float against the taller art column * and every hero begins its headline on the same line. The art itself opts * back into centring below - the frames sit the photos on the hero's middle, * not its top. */ align-items: start; } /* Trustpilot badge above the headline. */ /* * The Trustpilot line sits between the tick list and the buttons, on every page * and both breakpoints. It used to lead the column on desktop; the 2 September * frames move it down on the homepage as well as the product pages. * * The copy column is a flex column so `order` can place it without moving the * markup, which keeps the reading order sensible for screen readers. */ .b26-hero__copy { display: flex; flex-direction: column; align-items: flex-start; } .b26-hero__badge { order: 4; display: inline-flex; align-items: center; gap: 8px; /* * No container. The Mint White pill is gone from every hero, homepage * included - the frames draw this as a plain line on the band. * * Deep Green is the default because the Turquoise homepage hero uses it. * The Deep Green heroes switch to Trustpilot's own green below; Mint White, * which this used to be, is nowhere in the frames and read at 1.2:1 against * the Turquoise band. */ color: var(--b26-deep-green); padding: 0; /* * 38, to land 27px of visible air above the line as the frames show. * Figma measures between tight text bounds; a browser's line box carries * about 11px of leading on top of that, so matching the raw number left it * looking cramped. */ margin-top: 38px; /* The gap to the headline is owned by .b26-hero__title's margin-top, which is the 40px the spec asks for. A margin here as well stacked on top of it and gave 66. */ margin-bottom: 0; font-size: 1rem; text-decoration: none; white-space: nowrap; } .b26-hero__btns { order: 5; } /* 61 of visible air on desktop, against 27 on mobile - same leading allowance. */ @media (min-width: 901px) { .b26-hero__badge { margin-top: 72px; } } /* * Mint White on the Deep Green heroes. The star keeps Trustpilot's green on its * own - it is an carrying its own fill, not an inlined glyph - so the * badge's ink only ever sets the words beside it. Colouring the whole line * green, as the frames show it, turned "Excellent 4.6 out of 5 Trustpilot" * green too. */ .b26-hero--dark .b26-hero__badge { color: var(--b26-mint-white); } .b26-hero__badge-mark { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .b26-hero__badge-mark img, .b26-hero__badge-mark svg { width: 15px; height: 15px; flex: none; } /* * The star is coloured on its own, not with the words beside it: Deep Green on * the Turquoise homepage hero, Trustpilot's own green on the Deep Green product * heroes, where the words themselves are Mint White. */ .b26-hero__badge-mark svg { color: var(--b26-deep-green); } .b26-hero--dark .b26-hero__badge-mark svg { color: var(--b26-trustpilot-green); } .b26-hero__badge b { font-family: var(--b26-display); font-weight: 400; } /* * The star is the only SVG in the badge now - the Trustpilot lockup fallback is * gone - so its fill follows the colour set on .b26-hero__badge-mark svg above. * The height: 18px this rule used to carry was for that lockup and was * overriding the mark's own 15px, both selectors being one class and one * element deep with this one later in the file. */ .b26-hero__badge svg path { fill: currentColor; } .b26-hero__title { max-width: 13ch; margin-top: var(--b26-gap-block); } .b26-hero__sub { margin-top: var(--b26-gap-title); max-width: 44ch; /* * Two lines' worth reserved, so the Trustpilot line and the buttons start at * the same height whatever the subheading says. Without it a page whose * subheading fits on one line pulled everything below it up by ~27px, and * the four heroes no longer lined up with each other. */ min-height: 2.4em; } /* * Desktop drops the second hero CTA. * * Every hero runs the same pair - "Get a quote" then "Download the app" - and * the client wants only the quote on desktop, where the app card further down * the page already carries the store links. Mobile keeps both. */ @media (min-width: 901px) { .b26-hero__btns .b26-btn + .b26-btn { display: none; } } /* * 72, not the usual 40 block gap. V3 puts about 70 of visible air between the * rating line and the buttons on desktop - it is the one gap in the hero that * is deliberately larger than the rhythm elsewhere. */ .b26-hero__btns { margin-top: 72px; } /* * Ticked reassurance list under the standfirst. */ .b26-hero__points { display: flex; flex-direction: column; gap: 8px; /* * Keep this margin. It looks redundant against .b26-hero__sub's min-height, * which reserves room so the elements below stay level across the four * heroes - but that height is only slack while the standfirst fits on one * line. As soon as it wraps the reserve is spent, and without a margin the * list sits flush against the last line with no air at all: measured 0px on * the homepage, New Driver and Temporary at 1920, and on every page at 1024. */ margin: var(--b26-gap-title) 0 0; /* V3: 18/21.6, the same at mobile and desktop. */ font-size: 18px; line-height: 1.2; } .b26-hero__points li { display: flex; align-items: flex-start; gap: 9px; } /* * The tick carries the accent colour, not the text colour: Turquoise on the * Deep Green heroes, Deep Green on the Turquoise homepage hero. currentColor * alone made it Mint White on the dark pages, which the design never does. */ .b26-hero__tick { display: inline-flex; flex: none; margin-top: 1px; color: var(--b26-deep-green); } .b26-hero--dark .b26-hero__tick { color: var(--b26-turquoise); } .b26-hero__tick svg { width: 15px; height: 15px; } /* * Multi-image hero: a row of O-shapes butted edge to edge. * * Desktop keeps them in the right-hand column. Mobile turns the row into a * full-bleed band under the copy — the "stationary carousel" in the design: * it looks like a carousel mid-scroll, circles running off both edges, but * nothing moves. See the mobile block in section 8. */ .b26-hero__row { display: flex; align-items: center; gap: 0; } .b26-hero__o { flex: none; width: var(--b26-hero-o); aspect-ratio: 10 / 9.5; border-radius: 50%; overflow: hidden; background: var(--b26-green-12); } .b26-hero__o img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* * On the product heroes, desktop shows the SECOND and third circles, not the * first two. The mobile row carries all three and centres the middle one; the * desktop frames drop the leading circle and start from that same middle photo, * so it is the one shown whole in both layouts. * * Applies to every multi hero, the homepage included. It used to be scoped to * the dark ones because the homepage led with its first image; the September * photography names a desktop pair for that page too, so the rule is now the * same everywhere and the templates carry one list rather than two. */ @media (min-width: 901px) { .b26-hero--multi .b26-hero__o:first-child { display: none; } } .b26-hero__art { /* Centred against the copy column, not top-aligned with it. */ align-self: center; position: relative; min-height: 380px; /* * Both hero O-shapes take this, so they cannot drift out of step. * * 450, per the frames: they draw the pair at x1104 and x1554 in a 1920 * viewport, which leaves 366 of the second one showing. At 480 the second * started 30px further right and lost that much again off the edge. */ --b26-hero-o: min(100%, 450px); } .b26-hero__photo { position: relative; /* The disc is explicitly the bottom layer of the hero art. */ z-index: 1; width: var(--b26-hero-o); aspect-ratio: 10 / 9.5; border-radius: 50%; overflow: hidden; background: var(--b26-green-12); } .b26-hero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Anchored to the photo's right edge rather than a percentage of the column, so the two shapes stay tangent at every width instead of the disc sliding over the photo. Matches the V2 mockup, where the disc's left edge meets the photo's right edge. */ /* * The two hero O-shapes must be the same size, share a horizontal axis, and * touch edge to edge without overlapping. Previously the disc was 620px * against a 480px photo and was pulled back 48px so the two overlapped, which * the design review picked up. Both now take --b26-hero-o, and the disc's * left edge starts exactly where the photo's right edge ends. */ .b26-hero__disc { position: absolute; z-index: 0; top: 50%; left: var(--b26-hero-o); width: var(--b26-hero-o); aspect-ratio: 10 / 9.5; transform: translateY(-50%); background: var(--b26-hero-disc); border-radius: 50%; pointer-events: none; } /* * Phones take a 20px gutter, not 40px. Both the current and the V3 mobile * homepage frames set every section to 20px left and right; the standalone * "390" breakpoint example still says 40px and is the odd one out. Cutting the * gutter gives back 40px of line length, which is most of why the mobile copy * was running short against the design. */ @media (max-width: 559px) { .b26-body { --b26-gutter: 20px; } } @media (max-width: 900px) { /* Three lines on mobile, where the same copy wraps further. */ .b26-hero__sub { min-height: 3.6em; } /* * No min-height on the proof points at this width. Reserving a fourth line * (one Learner point wraps here) aligned the Trustpilot line across the * four heroes, but it did so by leaving invisible slack inside the shorter * lists - so the visible gap above the Trustpilot line came out at 38px on * three pages and 16px on Learner. * * The frames make the same trade the other way: they hold the gap at 27px * and let the Trustpilot line sit within about 24px of the others. An even * gap reads better than an alignment nobody can see, and desktop still * lines up exactly because every list fits three lines there. */ .b26-hero { /* * 56, not 116. The bar is 72 tall and V3 puts the headline 24 below it, * so the headline needs to land 96 from the top; .b26-h1 brings 40 of * that with its own margin, which leaves 56 here. The old 116 dates * from when the bar was a 48px floating pill. */ padding-top: 56px; /* Mobile heroes stack, so they need their own floor. Measured against the longest of the four (the homepage) at 500px wide. */ --b26-hero-min: 740px; } .b26-hero__grid { grid-template-columns: 1fr; gap: 0; } .b26-hero__title { max-width: none; } /* The standfirst has to clear the photo bleeding in from the right. */ .b26-hero__sub { max-width: 62%; } /* isolation:isolate is the important bit: the photo carries z-index 2 from the base rules and would otherwise outrank the copy and paint over the CTAs. Isolating the art layer means nothing inside it can come forward. */ .b26-hero__copy { position: relative; z-index: 1; } .b26-hero__art { position: absolute; inset: 0; min-height: 0; z-index: 0; isolation: isolate; pointer-events: none; } /* Anchored to the right edge rather than positioned as a percentage of the grid, so the bleed is identical at every width. */ .b26-hero__photo, .b26-hero__disc { z-index: 0; } /* The mobile mockup drops the badge: the headline starts at the top of the hero. */ .b26-hero__badge { display: none; } .b26-hero__art { --b26-hero-o: min(52vw, 220px); } /* * Single-image heroes use the same in-flow row as the multi variant: the * photo and its coloured O sit side by side under the CTAs, touching, * bleeding off both edges. * * They used to be an absolute overlay behind the copy, which put the disc * across the "Download the app" button on every product and legacy page. */ .b26-hero__photo, .b26-hero__disc { position: static; inset: auto; flex: none; width: var(--b26-hero-o); aspect-ratio: 10 / 9.5; max-width: none; transform: none; } .b26-hero__photo { order: 1; } .b26-hero__disc { order: 2; } /* * Hero art on mobile, both variants. * * The art column stops being an absolute overlay and drops into flow under * the copy, then breaks out of the wrap to the viewport edges. The row is * max-content and centred, so with three O-shapes on a phone it overflows * both sides and the hero's own overflow: clip crops it — a carousel * mid-scroll that never moves, which is what the design shows. */ .b26-hero { /* Sized so the row is wider than the viewport: the shapes butt together and run off both edges, which is what makes it read as a carousel mid-scroll. */ --b26-hero-o: 46vw; } .b26-hero__art { display: flex; align-items: center; justify-content: center; position: static; inset: auto; min-height: 0; margin-top: 30px; isolation: auto; pointer-events: auto; /* * width + min-width are load-bearing. The row inside is max-content and * wider than the phone; without pinning the column, that intrinsic * width propagated up through the grid and stretched the copy with it, * pushing the headline and buttons off the right edge. */ /* * Full-bleed against the VIEWPORT. Previously this was width: 100% with * negative side margins, so the column's own box was offset from the * viewport and centring the row inside it left the middle O about 100px * off. 100vw plus the 50%/50vw pull makes the column exactly the * viewport, so a centred row is genuinely centred. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-width: 0; } /* * Centred once, by the flex parent. This used to also carry * left: 50% + translateX(-50%), from before .b26-hero__art was pinned to * 100vw — back then the column was offset from the viewport and flex * centring landed the row off to one side, so the transform corrected it. * With the column now exactly the viewport, both were centring it and the * offsets stacked: at three shapes that put the middle one about 110px * left of centre, which is what surfaced this. */ .b26-hero__row { width: max-content; } .b26-hero__copy { min-width: 0; } /* No overlapping art to dodge on this variant, so the copy runs full width. */ .b26-hero__sub { max-width: none; } /* * The Trustpilot badge sits above the headline on desktop and below the * ticked list on mobile, so it is reordered rather than duplicated. */ .b26-hero__copy { display: flex; flex-direction: column; } .b26-hero__badge { display: inline-flex; order: 4; align-self: flex-start; /* 38, matching the base rule: see the note there about leading. */ margin-top: 38px; } /* 30 on mobile, per the 390 frame. */ .b26-hero__btns { margin-top: 30px; } .b26-hero__title { order: 1; } .b26-hero__sub { order: 2; } .b26-hero__points { order: 3; } .b26-hero__btns { order: 5; } .b26-hero__btns { flex-direction: column; align-items: stretch; } .b26-hero__btns .b26-btn { width: 100%; } } /* ------------------------------------------------------------------------- 9. Trust bar ---------------------------------------------------------------------- */ .b26-trust { /* V3 mobile: 56 top and bottom, same as every other band. */ padding: clamp(56px, 3.5vw, 64px) 0; } /* * The ribbon runs the full width: the pills scroll horizontally, so holding * them inside the page gutter cut the row short at both ends and made it read * as a truncated list rather than a continuing one. */ .b26-trust > .b26-wrap { max-width: none; padding-left: 0; padding-right: 0; } .b26-trust__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 20px); } /* * Rating pills. On mobile the row becomes a horizontal scroller rather than * wrapping: the design shows them running off the right edge, which also hints * there is more to swipe to. Scrollbar hidden, but the track still responds to * touch, wheel and keyboard. */ /* Nav menu icons: small line marks before each label, inheriting the nav's own colour so they flip with the pill on scroll. */ .b26-nav__icon { display: inline-flex; flex: none; margin-right: 7px; } .b26-nav__icon svg { width: 17px; height: 17px; } .b26-drawer__link .b26-nav__icon svg { width: 20px; height: 20px; } /* Two-line "14 million drivers / covered by Veygo" pill. */ .b26-trust__drivers { display: flex; flex-direction: column; line-height: 1.2; font-size: 18px; } .b26-trust__drivers strong { font-weight: 700; } .b26-trust__icon--shield svg { width: 22px; height: 22px; } /* * Store marks are supplied brand artwork, so they render as and keep * their own colours. Sized by height with auto width: the Play mark is * portrait (960x1060) while the others are square, so a fixed square box would * squash it. */ .b26-trust__store img { height: 17px; width: auto; display: block; } /* Fallback only, for before artwork is supplied. */ .b26-trust__icon--tp svg { color: #00b67a; } .b26-trust__item--pill { background: #fff; border-radius: 14px; padding: 10px 16px; box-shadow: 0 1px 3px rgba(3, 43, 51, 0.1); /* Every pill is the same height whatever it holds, so a rating pill and a logo pill sit on one line. */ min-height: 60px; justify-content: center; } .b26-trust__rating { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .b26-trust__score { font-family: var(--b26-display); font-size: clamp(22px, 1.7vw, 32px); line-height: 1; letter-spacing: var(--b26-track-display); } .b26-trust__stack { display: flex; flex-direction: column; gap: 2px; } .b26-trust__store { display: flex; align-items: center; gap: 5px; font-size: 0.9375rem; line-height: 1; white-space: nowrap; } .b26-trust__store svg { width: 16px; height: 16px; } /* The Trustpilot wordmark lockup is no longer used here — the current Figma shows a green star plus the word, matching the two app store pills. */ /* * Five stars with the top layer clipped to the score. Both layers are the same * glyph row, so the partial star cuts exactly where the rating falls. */ .b26-stars { position: relative; display: inline-flex; line-height: 1; } .b26-stars__base, .b26-stars__fill { display: flex; gap: 1px; } .b26-stars__base { color: var(--b26-green-12); } .b26-stars__fill { position: absolute; inset: 0; overflow: hidden; /* V3's amber. */ color: #FFBD00; } .b26-stars svg { /* V3: 18 everywhere, including the trust bar, where ours were 13. */ width: 18px; height: 18px; flex: none; } .b26-trust__asof { margin: 18px 0 0; text-align: center; font-size: 1rem; color: var(--b26-green-70); } .b26-trust__logo--red { max-height: 34px; width: auto; } @media (max-width: 900px) { .b26-trust__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .b26-trust__list::-webkit-scrollbar { display: none; } .b26-trust__item { flex: none; } } .b26-trust__item { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--b26-deep-green); } /* * Direct children only. This sizes the partner logos (Admiral, RED), which sit * straight inside the

. The rating pills nest their star and store marks * several levels down and set their own much smaller sizes; without the child * combinator this rule matched those too — same specificity, declared later, * so it won and inflated every pill to 102px against Admiral's 60px. */ .b26-trust__item > img, .b26-trust__item > svg { height: 40px; width: auto; } /* The Admiral and RED SVGs carry hardcoded white fills in an internal