/* Theme Name: Gatwick Commercials Group - Market Valuation Fix v29.2 Theme URI: https://gatwickcommercials.co.uk Author: Royal Creative Author URI: https://royalcreative.co.uk Description: Custom block theme for Gatwick Commercials Group, built from the Figma design. Version: 2.9.2 Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: gcg */ :root { --g-teal: #13806f; --g-teal-dark: #0e7666; --g-teal-bright: #19a690; /* original brand teal, decorative only */ --g-ink: #242a2a; --g-text: #595959; --g-mint: #e0fff1; --g-mint-ink: #006045; --g-inter: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Gilroy is a paid font: add the .woff2 files to assets/fonts (see README). */ --g-gilroy: Gilroy, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --g-arial: Arial, "Helvetica Neue", Helvetica, sans-serif; --g-plate: "Charles Wright", "UKNumberPlate", Arial, sans-serif; --g-pad-x: max(80px, calc((100% - 1280px) / 2)); --g-ease: cubic-bezier(.2, .7, .2, 1); } /* Gilroy: Light, Regular and Medium are included. Add gilroy-semibold.woff2 / gilroy-bold.woff2 and uncomment below for true 600/700 weights (until then the browser bolds Medium). */ @font-face { font-family: Gilroy; src: url("assets/fonts/gilroy-light.woff2") format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: Gilroy; src: url("assets/fonts/gilroy-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: Gilroy; src: url("assets/fonts/gilroy-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* @font-face { font-family: Gilroy; src: url("assets/fonts/gilroy-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; } */ /* @font-face { font-family: Gilroy; src: url("assets/fonts/gilroy-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } */ @font-face { font-family: "Charles Wright"; src: url("assets/fonts/charles-wright-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* Resets for theme blocks */ html, body { overflow-x: clip; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class*="g-"] { box-sizing: border-box; } [class*="g-"] p, [class*="g-"] h1, [class*="g-"] h2, [class*="g-"] h3, [class*="g-"] h4, [class*="g-"] ul, [class*="g-"] figure { margin: 0; } .wp-block-image[class*="g-"] { margin: 0; } .wp-block-image[class*="g-"] img { display: block; } ul.wp-block-list[class*="g-"] { list-style: none; padding: 0; margin: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--g-teal); outline-offset: 2px; } .wp-site-blocks > * + * { margin-block-start: 0; } .g-trim { text-box: trim-both cap alphabetic; } /* Scroll reveal (added by assets/js/theme.js) */ .g-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--g-ease), transform .7s var(--g-ease); } .g-reveal.is-visible { opacity: 1; transform: none; } /* ===== Header ===== */ .wp-block-template-part:has(> .g-header) { position: sticky; top: 0; z-index: 100; } .g-header { position: relative; z-index: 2; } .g-announce { position: relative; height: 37px; overflow: hidden; background: var(--g-teal-dark); } .g-announce::before { content: ""; position: absolute; top: 0; bottom: 0; left: -25px; width: 728px; background: var(--g-ink); border-right: 4.19px solid #fff; border-bottom-right-radius: 16.76px; transform: skewX(42.93deg); } .g-announce > * { position: relative; } .g-announce__text { position: absolute; left: max(0px, calc(50% - 720px)); width: 552px; top: 0; height: 37px; display: flex; align-items: center; justify-content: center; font-family: var(--g-gilroy); font-size: 16px; line-height: 27px; color: #fcfcfc; white-space: nowrap; } .g-announce__phone { position: absolute; left: calc(50% + 572px); top: 5px; transform: translateX(-50%); } .g-announce__phone a { display: flex; align-items: center; gap: 8px; font-family: var(--g-gilroy); font-weight: 500; font-size: 16px; line-height: normal; color: #fff; white-space: nowrap; } .g-announce__phone a::before { content: ""; width: 27px; height: 27px; background: url("assets/images/icon-call.svg") center / contain no-repeat; } .g-announce__phone a:hover { text-decoration: underline; text-underline-offset: 3px; } .g-mainnav { position: relative; height: 92px; background: #fff; box-shadow: 0 1px 15px rgba(0, 0, 0, .13); } .g-logo { position: absolute; left: max(80px, calc(50% - 640px)); top: 10px; } .g-logo a { display: block; } .g-logo img { width: 128px; height: 64px; object-fit: contain; } .g-mainnav__menu { position: absolute; left: calc(50% + .3px); top: calc(50% - .2px); transform: translate(-50%, -50%); } .g-nav.wp-block-navigation { gap: 0; font-family: var(--g-gilroy); font-weight: 500; font-size: 16px; line-height: 16px; } .g-nav .wp-block-navigation__container { gap: 0; } .g-nav .wp-block-navigation-item { padding: 4.8px 0; } .g-nav .wp-block-navigation-item__content { padding: 0 16px; color: var(--g-text); transition: color .2s ease; } .g-nav .wp-block-navigation-item__content:hover, .g-nav .current-menu-item > .wp-block-navigation-item__content, .g-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--g-teal); } .g-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 0; } .g-nav .wp-block-navigation__submenu-icon { width: 9.6px; height: 9.6px; margin: 1.6px 16px 0 10px; padding: 0; color: var(--g-text); transition: transform .2s ease; } .g-nav .wp-block-navigation__submenu-icon svg { width: 9.6px; height: 9.6px; stroke-width: 2; } .g-nav .has-child:hover > .wp-block-navigation__submenu-icon { transform: rotate(180deg); color: var(--g-teal); } .g-nav .wp-block-navigation__submenu-container { min-width: 300px !important; padding: 10px 0; border: 0 !important; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); top: calc(100% + 24px) !important; left: 0; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .g-nav .has-child:hover > .wp-block-navigation__submenu-container, .g-nav .has-child:focus-within > .wp-block-navigation__submenu-container { opacity: 1; transform: none; } .g-nav .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; } .g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { padding: 0; } .g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 12px 20px; font-size: 15px; line-height: 20px; } .g-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--g-mint); } .g-mainnav__cta { position: absolute; left: calc(50% + 379px); top: 21px; } .g-btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .g-btn--outline .wp-block-button__link { width: 261px; height: 46px; padding: 11px 24px; border: 3px solid var(--g-teal); border-radius: 12px; background: #fff; font-family: var(--g-gilroy); font-weight: 700; font-size: 18px; line-height: 18px; color: var(--g-teal); white-space: nowrap; } .g-btn--outline .wp-block-button__link:hover { background: var(--g-teal); color: #fff; } .g-nav .wp-block-navigation__responsive-container-open { color: var(--g-ink); } /* ===== Hero ===== */ .g-hero { position: relative; padding: 21px var(--g-pad-x) 68px; overflow: hidden; background: #fff; } .g-hero::before { content: ""; position: absolute; top: -49px; left: calc(50% + 140px); width: 560px; height: 560px; background: url("assets/images/hero-artwork.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-hero__inner { position: relative; display: flex; align-items: center; gap: 59px; max-width: 1324px; } .g-hero__copy { width: 581px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .g-hero__intro { width: 581px; display: flex; flex-direction: column; gap: 24px; } .g-hero__heading { display: flex; flex-direction: column; gap: 24px; font-family: var(--g-inter); font-weight: 700; } .g-hero__eyebrow { font-size: 15.8px; line-height: 16px; color: var(--g-teal); text-transform: uppercase; white-space: nowrap; } .g-hero__title { width: 551px; font-family: var(--g-inter); font-weight: 700; font-size: 54px; line-height: 64px; color: #000; } .g-hero__text { width: 500px; font-family: var(--g-inter); font-size: 18px; line-height: 25.6px; color: var(--g-text); text-box: trim-both cap alphabetic; } .g-chips { display: flex; gap: 8px; } .g-chips li { height: 40px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; background: var(--g-mint); font-family: var(--g-inter); font-weight: 500; font-size: 10px; line-height: normal; color: var(--g-mint-ink); white-space: nowrap; } .g-chips li:nth-child(1) { width: 178px; } .g-chips li:nth-child(2) { width: 108px; } .g-chips li:nth-child(3) { width: 200px; } /* Trustpilot badge */ .g-tp { position: relative; width: 221px; height: 65px; flex: none; border-radius: 12px; background: #000; color: #fff; font-family: var(--g-inter); font-size: 11.959px; } .g-tp img { position: absolute; display: block; } .g-tp__mark { left: 12px; top: 8.11px; width: 48.774px; height: 48.774px; } .g-tp__star { left: 22px; top: 18px; width: 28px; height: 28px; } .g-tp__text { position: absolute; left: 74.73px; top: 8.74px; width: 124.37px; display: flex; flex-direction: column; gap: 8.37px; } .g-tp__text > span { display: block; line-height: 9px; height: 9px; } .g-tp__text .g-tp__row { display: flex; align-items: center; gap: 3.59px; height: 13.96px; margin-top: -1.2px; margin-bottom: -2.4px; } .g-tp__score { font-weight: 600; } .g-tp__stars { display: flex; gap: .82px; } .g-tp__stars img { position: static; width: 13.96px; height: 13.96px; } /* Media + valuation form */ .g-hero__media { width: 684px; flex: none; display: flex; flex-direction: column; } .g-hero__img { position: relative; width: 100%; aspect-ratio: 680 / 410; overflow: hidden; border-radius: 16px; } .g-hero__img img { position: absolute; left: -55.29%; top: -32.21%; width: 159.39%; height: 150.8%; max-width: none; } .g-valform { position: relative; height: 161px; margin: 0; padding: 0; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; backdrop-filter: blur(7.5px); } .g-valform__title { position: absolute; left: 26px; top: 21px; font-family: var(--g-arial); font-size: 28px; line-height: 22px; color: #000; text-transform: capitalize; white-space: nowrap; } .g-valform__row { position: absolute; left: 26px; top: 64px; width: 628px; display: flex; gap: 16px; } .g-plate { width: 352px; height: 68px; padding: 0 16px; border: 2px solid transparent; border-radius: 5px; background: #e1e1e1; font-family: var(--g-plate); font-weight: 700; font-size: 36px; line-height: normal; color: #242a2a; text-transform: uppercase; outline: none; transition: border-color .2s ease, background-color .2s ease; } .g-plate::placeholder { color: #777; opacity: 1; } .g-plate:focus { border-color: var(--g-teal); background: #ececec; } .g-valform__btn { width: 260px; height: 68px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 0; border-radius: 5px; cursor: pointer; background: var(--g-teal); color: #fff; font-family: var(--g-arial); font-size: 24px; line-height: 23.2px; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease; } .g-valform__btn img { width: 32px; height: 32px; transition: transform .2s ease; } .g-valform__btn:hover { background: var(--g-teal-dark); box-shadow: 0 8px 20px rgba(25, 166, 144, .3); } .g-valform__btn:hover img { transform: translateX(4px); } /* ===== Logo marquee (shared: home, services, service and area pages) ===== */ .g-logos { padding: 28px 0; background: #f6f6f6; } .g-marquee { position: relative; width: min(1280px, 100% - 40px); margin-inline: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .g-marquee__track { display: flex; width: max-content; animation: g-marquee 42.75s linear infinite; will-change: transform; } .g-marquee:hover .g-marquee__track { animation-play-state: paused; } .g-marquee__set { display: flex; align-items: center; gap: 64px; margin: 0; padding: 0 64px 0 0; list-style: none; } .g-marquee__set li { height: 64px; display: flex; align-items: center; justify-content: center; flex: none; } .g-marquee__set img { display: block; width: auto !important; max-width: 140px; height: auto !important; max-height: 52px; object-fit: contain; filter: grayscale(100%); opacity: .75; transition: filter .3s ease, opacity .3s ease; } .g-marquee__set li:hover img { filter: none; opacity: 1; } @keyframes g-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .g-trusted .g-marquee, .g-sdtrust .g-marquee { width: 100%; } @media (max-width: 781px) { .g-logos { padding: 18px 0; } .g-marquee__set { gap: 40px; padding-right: 40px; } .g-marquee__set li { height: 48px; } .g-marquee__set img { max-width: 100px; max-height: 38px; } .g-marquee__track { animation-duration: 33.25s; } } /* ===== Shared: pill, icons ===== */ .g-pill { align-self: flex-start; height: 44px; display: inline-flex; align-items: center; padding: 0 32px; border-radius: 8px; background: var(--g-mint-ink); filter: drop-shadow(0 8px 10px rgba(0, 96, 69, .15)); font-family: var(--g-inter); font-weight: 600; font-size: 14px; line-height: 28px; color: #fff; white-space: nowrap; } .g-ico::before { content: ""; display: block; width: 40px; height: 40px; background: center / contain no-repeat; } .g-ico--sticker::before { background-image: url("assets/images/icon-sticker.svg"); } .g-ico--files::before { background-image: url("assets/images/icon-files.svg"); } .g-ico--fees::before { background-image: url("assets/images/icon-fees.svg"); } .g-ico--van::before { background-image: url("assets/images/icon-van.svg"); } /* ===== Why choose us ===== */ .g-why { display: flex; flex-direction: column; gap: 14px; margin-top: 80px; padding: 100px var(--g-pad-x) 112px; background: #fff; } .g-why__intro { display: flex; flex-direction: column; gap: 32px; padding: 0 21px 0 20px; min-height: 219px; } .g-why__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .g-why__title { width: 620px; font-family: var(--g-inter); font-weight: 700; font-size: 56px; line-height: 1.05; color: var(--g-mint-ink); text-box: trim-both cap alphabetic; } .g-statement { width: 620px; flex: none; padding: 32px; background: var(--g-mint); border: 1px solid rgba(0, 96, 69, .1); border-radius: 16px; filter: drop-shadow(0 12px 14px rgba(0, 96, 69, .08)); font-family: var(--g-inter); font-weight: 600; font-size: 24px; line-height: 1.3; color: #232323; } .g-statement { padding: 31px; text-box: trim-both cap alphabetic; } .g-features { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; padding-block: 12px; } .g-feature { position: relative; width: 310px; flex: none; padding-top: 31px; } .g-feature__icon { position: absolute; left: 14px; top: 0; z-index: 1; display: flex; padding: 14px; border: 1px solid rgba(25, 166, 144, .23); border-radius: 100px; background: var(--g-teal); transition: transform .35s var(--g-ease); } .g-feature__card { position: relative; height: 224px; background: #fff; border: 1px solid rgba(25, 166, 144, .23); border-radius: 12px; box-shadow: 0 11px 60px rgba(0, 0, 0, .08); transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease), border-color .35s ease; } .g-feature__body { position: absolute; left: 50%; top: 50px; width: 270px; height: 150px; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; gap: 16px; font-family: var(--g-inter); font-weight: 600; text-transform: capitalize; } .g-feature__title { font-family: var(--g-inter); font-weight: 600; font-size: 24px; line-height: 28px; color: #141414; } .g-feature__text { font-size: 12px; line-height: 20px; color: #6e6e6e; } .g-feature:hover .g-feature__card { transform: translateY(-6px); box-shadow: 0 18px 60px rgba(0, 0, 0, .12); border-color: rgba(25, 166, 144, .5); } .g-feature:hover .g-feature__icon { transform: translateY(-6px) rotate(-8deg); } /* ===== Shared section heading ===== */ .g-head--center { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .g-head__titles { display: flex; flex-direction: column; align-items: center; gap: 32px; } .g-title { font-family: var(--g-inter); font-weight: 700; font-size: 46px; line-height: 1.1; color: #232323; text-box: trim-both cap alphabetic; } .g-sub { font-family: var(--g-inter); font-size: 18px; line-height: 25.6px; color: var(--g-text); text-box: trim-both cap alphabetic; } .g-pill--mint { align-self: center; background: var(--g-mint); filter: none; font-family: var(--g-gilroy); font-weight: 500; color: #00573f; } /* ===== 3-step process ===== */ .g-process { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 100px 100px 106px; background: #fafafa; } .g-steps { display: flex; align-items: center; gap: 33.671px; width: 1239px; max-width: 100%; } .g-step { position: relative; width: 390.4px; height: 446.85px; flex: none; } .g-step--flip { width: 390.9px; } .g-step__deco { position: absolute; inset: 0; pointer-events: none; } .g-step--flip .g-step__deco { transform: rotate(180deg); } .g-step__line { position: absolute; left: 130.755px; top: 398.44px; width: 90.2px; height: 16.12px; max-width: none; transform-origin: 41.845px 8.06px; transform: rotate(90deg) scaleY(-1); } .g-step--flip .g-step__line { left: 175.955px; } .g-step__arrow { position: absolute; left: 334.6px; top: 190.43px; width: 55.768px; height: 55.768px; transform: rotate(-90deg); } .g-step--flip .g-step__arrow { left: 0; top: 191.1px; transform: rotate(90deg); } .g-step__arrow img { position: absolute; top: 0; bottom: 0; left: 9.37%; right: 9.37%; width: 81.26%; height: 100%; } .g-step__bracket { position: absolute; left: -11.58px; top: 208.3px; width: 368.82px; height: 179.94px; max-width: none; } .g-step--flip .g-step__bracket { left: 33.67px; } .g-step__card { position: absolute; left: 10.52px; top: 42.09px; width: 324.087px; height: 324.087px; overflow: hidden; background: #fff; border-radius: 31.567px; box-shadow: 0 11.575px 63.134px rgba(0, 0, 0, .06); transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease); } .g-step--flip .g-step__card { left: 11.05px; top: 80.67px; } .g-step__body { position: absolute; left: 13.68px; top: 67.34px; width: 296.729px; display: flex; flex-direction: column; align-items: center; gap: 37.88px; text-align: center; } .g-step--flip .g-step__body { top: 53.1px; } .g-step__title { width: 245.169px; font-family: var(--g-inter); font-weight: 700; font-size: 29.462px; line-height: 36.828px; color: #323232; text-box: trim-both cap alphabetic; } .g-step--2 .g-step__title { width: 287.258px; line-height: 32.26px; } .g-step--3 .g-step__title { line-height: 32.26px; } .g-step__text { width: 265.132px; font-family: var(--g-inter); font-size: 21.045px; line-height: 1.5; color: #5f5f5f; text-box: trim-both cap alphabetic; } .g-step--2 .g-step__text, .g-step--3 .g-step__text { width: 100%; font-size: 21.507px; } .g-step__icon { position: absolute; left: 130.5px; top: 0; width: 84.178px; height: 84.178px; display: flex; align-items: center; justify-content: center; border-radius: 47.35px; background: var(--g-teal); transition: transform .35s var(--g-ease); } .g-step--flip .g-step__icon { left: 131.03px; top: 362.67px; } .g-step__icon::before { content: ""; width: 47.287px; height: 47.287px; background: center / contain no-repeat; } .g-step__icon--comment::before { background-image: url("assets/images/icon-comment.svg"); } .g-step__icon--files::before { width: 49.98px; height: 49.98px; background-image: url("assets/images/icon-files-2.svg"); } .g-step__icon--collection::before { width: 40px; height: 40px; background-image: url("assets/images/icon-collection.svg"); } .g-step:hover .g-step__card { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, .1); } .g-step:hover .g-step__icon { transform: scale(1.08); } /* ===== Paperwork / admin ===== */ .g-admin { display: flex; flex-direction: column; align-items: center; padding: 100px; background: #fafafa; } .g-admin__inner { width: 1240px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; } .g-head--admin { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .g-sub--wide { width: 820px; max-width: 100%; line-height: 28px; } .g-icards { width: 100%; display: flex; align-items: flex-start; gap: 32px; } .g-icard { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 31px; background: #fff; border: 1px solid rgba(25, 166, 144, .23); border-radius: 12px; filter: drop-shadow(0 11px 30px rgba(0, 0, 0, .08)); transition: transform .35s var(--g-ease), border-color .35s ease; } .g-icard:hover { transform: translateY(-6px); border-color: var(--g-teal); } .g-icard__icon { display: flex; padding: 12px; border-radius: 100px; background: var(--g-mint); transition: background-color .3s ease; } .g-icard__icon::before { content: ""; width: 32px; height: 32px; background: center / contain no-repeat; } .g-icard__icon--paperwork::before { background-image: url("assets/images/icon-paperwork.svg"); } .g-icard__icon--branding::before { background-image: url("assets/images/icon-branding.svg"); } .g-icard__icon--savings::before { background-image: url("assets/images/icon-savings.svg"); } .g-icard__body { width: 100%; display: flex; flex-direction: column; gap: 10px; font-family: var(--g-inter); } .g-icard__title { font-family: var(--g-inter); font-weight: 400; font-size: 22px; line-height: 28px; color: #232323; } .g-icard__text { font-size: 16px; line-height: 24px; color: #6e6e6e; } /* ===== Finance ===== */ .g-finance { display: flex; flex-direction: column; align-items: center; margin-top: 52px; padding: 100px 100px 51px; background: #fff; } .g-finance__inner { width: 1240px; max-width: 100%; display: flex; flex-direction: column; gap: 48px; } .g-head--left { display: flex; flex-direction: column; gap: 24px; } .g-title--44 { font-size: 44px; } .g-sub--28 { line-height: 28px; } .g-icards--center { align-items: center; } .g-icards--strong .g-icard__title { font-weight: 600; } .g-icard__icon--lender::before { background-image: url("assets/images/icon-lender.svg"); } .g-icard__icon--equity::before { background-image: url("assets/images/icon-equity.svg"); } .g-icard__icon--proof::before { background-image: url("assets/images/icon-proof.svg"); } /* ===== FAQ accordion (core/details) ===== */ @font-face { font-family: "Spline Sans"; src: url("assets/fonts/spline-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } .g-faqs { display: flex; flex-direction: column; gap: 24px; padding: 0 88px 24px 112px; padding-bottom: 24px; padding-inline: max(112px, calc((100% - 1240px) / 2 + 12px)) max(88px, calc((100% - 1240px) / 2 - 12px)); background: #fff; } .g-faqs__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .g-faqs__head .g-title { align-self: stretch; text-align: center; } .g-pill--faq { align-self: flex-start; font-family: var(--g-inter); font-weight: 400; } .g-faqs__cols { display: flex; align-items: flex-start; gap: 24px; } .g-faqs__col { width: 392px; flex: none; display: flex; flex-direction: column; gap: 12px; counter-reset: g-faq; } .g-faqs__col + .g-faqs__col { counter-reset: g-faq 15; } .g-faqs__label { font-family: var(--g-inter); font-weight: 500; font-size: 14px; line-height: normal; letter-spacing: .84px; color: var(--g-teal); white-space: nowrap; } .g-faq.wp-block-details { counter-increment: g-faq; margin: 0; padding: 14px; border: 2px solid rgba(25, 166, 144, .1); border-radius: 8px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; } .g-faq.wp-block-details:hover { border-color: rgba(25, 166, 144, .35); } .g-faq.wp-block-details[open] { border-color: rgba(25, 166, 144, .25); } .g-faq summary { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; list-style: none; font-family: var(--g-inter); font-size: 16px; line-height: 20px; color: #141414; } .g-faq summary::-webkit-details-marker { display: none; } .g-faq summary::before { content: counter(g-faq, decimal-leading-zero) "."; width: 28px; flex: none; font-family: "Spline Sans", var(--g-inter); font-weight: 500; font-size: 16px; line-height: 16px; color: var(--g-teal); } .g-faq summary::after { content: ""; width: 36px; height: 36px; flex: none; margin-left: auto; border: 1px solid #fff; border-radius: 18px; box-sizing: border-box; background: var(--g-teal) url("assets/images/icon-plus.svg") center / 20px 20px no-repeat; transition: transform .3s var(--g-ease), background-color .2s ease; } .g-faq summary:hover::after { background-color: var(--g-teal-dark); } .g-faq[open] summary::after { background-image: url("assets/images/icon-minus.svg"); transform: rotate(180deg); } .g-faq summary { padding-right: 0; } .g-faq summary > * { flex: 1 0 0; } .g-faq.wp-block-details > p { margin: 12px 0 0; font-family: var(--g-inter); font-size: 14px; line-height: 1.44; letter-spacing: .14px; color: #6e6e6e; } .g-faq[open] > p { animation: g-faq-in .3s var(--g-ease); } @keyframes g-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ===== Promise ===== */ .g-promise { display: flex; flex-direction: column; justify-content: center; padding: 75.5px var(--g-pad-x); padding-left: max(112px, calc((100% - 1265px) / 2)); background: #fafafa; } .g-promise__inner { display: flex; align-items: center; gap: 80px; } .g-promise__copy { width: 589px; flex: none; display: flex; flex-direction: column; gap: 40.691px; } .g-promise__head { display: flex; flex-direction: column; justify-content: center; gap: 32.553px; } .g-pill--start { align-self: flex-start; height: 44.76px; padding: 0 32.553px; border-radius: 8.138px; font-size: 14.242px; } .g-title--promise { font-size: 46.794px; white-space: nowrap; } .g-checks { display: flex; flex-direction: column; gap: 24.415px; } .g-check { position: relative; min-height: 118.541px; display: flex; align-items: center; gap: 25.931px; padding: 12px 20px 12px 20.38px; background: #fff; border-left: 3.704px solid var(--g-teal); border-radius: 11.113px; box-shadow: 0 10.187px 55.566px rgba(0, 0, 0, .08); font-family: var(--g-inter); font-size: 18px; line-height: 1.32; letter-spacing: .36px; color: #05040b; transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease); } .g-check::before { content: ""; width: 45.379px; height: 45.379px; flex: none; background: url("assets/images/icon-check.svg") center / 93.4% 95% no-repeat; } .g-check:hover { transform: translateX(6px); box-shadow: 0 14px 55px rgba(0, 0, 0, .12); } .g-promise__img { width: 596px; height: 414px; flex: none; overflow: hidden; } .g-promise__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); } .g-promise__img:hover img { transform: scale(1.04); } /* Promise cards: block layout so links inside the text stay inline */ .g-check { display: block; padding: 12px 20px 12px 91.7px; padding-block: 20px; } .g-check::before { position: absolute; left: 20.38px; top: 50%; transform: translateY(-50%); } @media (max-width: 781px) { .g-checks .g-check { padding: 16px 16px 16px 68px; } .g-checks .g-check::before { left: 16px; } } /* ===== Valuation CTA ===== */ .g-cta { padding: 78px var(--g-pad-x); padding-inline: max(79px, calc((100% - 1280px) / 2 - 1px)) max(81px, calc((100% - 1280px) / 2 + 1px)); background: #fff; } .g-cta__box { position: relative; height: 335px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 40px; background: url("assets/images/cta-bg.svg") center / 100% 100% no-repeat; } .g-cta__box::before { content: ""; position: absolute; left: 25px; top: 11px; width: 1259.114px; height: 164px; background: url("assets/images/cta-wave.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-cta__content { position: relative; width: 1001px; display: flex; flex-direction: column; align-items: center; gap: 40px; transform: translate(.5px, .5px); } .g-cta__titles { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; color: #fff; } .g-cta__title { font-family: var(--g-arial); font-weight: 700; font-size: 40px; line-height: 18px; color: #fff; white-space: nowrap; } .g-cta__text { width: 1039px; max-width: calc(100vw - 80px); font-family: var(--g-gilroy); font-size: 24px; line-height: 26px; } .g-ctaform { position: relative; width: 640px; height: 76px; margin: 0; background: #fff; border-radius: 14px; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transition: box-shadow .25s ease; } .g-ctaform:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); } .g-ctaform input { position: absolute; left: 0; top: 0; width: 436px; height: 76px; padding: 0 0 0 31px; border: 0; background: transparent; outline: none; font-family: var(--g-gilroy); font-weight: 500; font-size: 18px; color: #000; text-transform: uppercase; } .g-ctaform input::placeholder { color: rgba(0, 0, 0, .52); opacity: 1; } .g-ctaform button { position: absolute; left: 436.5px; top: 8px; width: 196px; height: 60px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--g-teal); cursor: pointer; font-family: var(--g-inter); font-size: 20px; line-height: 23.2px; color: #fff; white-space: nowrap; transition: background-color .2s ease, transform .2s ease; } .g-ctaform button:hover { background: var(--g-teal-dark); transform: translateY(-1px); } /* ===== Contact ===== */ .g-contact { padding: 0 var(--g-pad-x) 47px; background: #fff; } .g-contact__inner { display: flex; align-items: flex-start; gap: 39px; } .g-contact__form { width: 664px; flex: none; padding: 32px; border-radius: 16px; background: #f4f4f4; } .g-form { display: flex; flex-direction: column; gap: 20px; margin: 0; font-family: var(--g-gilroy); } .g-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .g-form__row { display: grid; grid-template-columns: 293px 293px; gap: 20px 14px; } .g-field { display: flex; flex-direction: column; gap: 6px; } .g-field label { font-weight: 500; font-size: 12.48px; line-height: 18.72px; color: #000; } .g-field input, .g-field select, .g-field textarea { width: 100%; height: 45px; padding: 12px 16px; border: .741px solid #e2e2e2; border-radius: 14px; background: #fff; font-family: var(--g-gilroy); font-weight: 500; font-size: 14px; line-height: normal; color: #141414; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .g-field input[type="tel"] { height: 46px; } .g-field select { appearance: none; color: #141414; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2399a1af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 12px 8px no-repeat; cursor: pointer; } .g-field select:invalid, .g-field select option[value=""] { color: #99a1af; } .g-field textarea { height: 106px; resize: vertical; line-height: 20px; } .g-field ::placeholder { color: #99a1af; opacity: 1; } .g-field input:focus, .g-field select:focus, .g-field textarea:focus { border-color: var(--g-teal); box-shadow: 0 0 0 3px rgba(25, 166, 144, .15); } .g-form__submit { width: 599.623px; max-width: 100%; height: 60px; border: 0; border-radius: 12px; background: var(--g-teal); cursor: pointer; font-family: var(--g-gilroy); font-weight: 500; font-size: 20px; color: #fff; transition: background-color .2s ease, box-shadow .2s ease; } .g-form__submit:hover { background: var(--g-teal-dark); box-shadow: 0 10px 24px rgba(25, 166, 144, .3); } .g-form__notice { padding: 12px 16px; border-radius: 12px; font-size: 14px; } .g-form__notice.is-success { background: var(--g-mint); color: var(--g-mint-ink); } .g-form__notice.is-error { background: #fdecec; color: #9b1c1c; } .g-contact__side { width: 577px; flex: none; display: flex; flex-direction: column; gap: 20px; } .g-info { display: flex; flex-direction: column; gap: 28px; padding: 32px; border-radius: 16px; background: #1765a6; color: #fff; font-family: var(--g-gilroy); } .g-info__title { font-family: var(--g-gilroy); font-weight: 400; font-size: 20px; line-height: 28px; color: #fff; } .g-info__text { width: 392px; max-width: 100%; padding-top: 8px; font-size: 13.12px; line-height: 21.32px; } .g-info__list { display: flex; flex-direction: column; gap: 20px; } .g-info__item { position: relative; min-height: 38px; padding-left: 52px; } .g-info__item::before { content: ""; position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 14px; background: rgba(255, 255, 255, .1) center / 15px 15px no-repeat; } .g-info__item--mail::before { background-image: url("assets/images/icon-mail.svg"); } .g-info__item--phone::before { background-image: url("assets/images/icon-phone.svg"); } .g-info__item--pin::before { background-image: url("assets/images/icon-pin.svg"); } .g-info__label { font-size: 11.2px; line-height: 16.8px; letter-spacing: 1.12px; text-transform: uppercase; } .g-info__value { padding-top: 2px; font-weight: 500; font-size: 13.12px; line-height: 18.04px; white-space: nowrap; } .g-info__value--inter { font-family: var(--g-inter); font-weight: 400; } .g-info__value a:hover { text-decoration: underline; text-underline-offset: 3px; } .g-map { position: relative; height: 192px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: .741px solid #f3f4f6; border-radius: 16px; } .g-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--g-ease); } .g-map:hover img { transform: scale(1.04); } .g-map__pin { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: #121212; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .1)) drop-shadow(0 2px 2px rgba(0, 0, 0, .1)); font-family: var(--g-gilroy); font-weight: 500; font-size: 12.48px; line-height: 18.72px; color: #fff; white-space: nowrap; } .g-map__pin::before { content: ""; width: 14px; height: 14px; background: url("assets/images/icon-pin-white.svg") center / contain no-repeat; } .g-form input, .g-form select, .g-form textarea, .g-form button, .g-ctaform input, .g-ctaform button, .g-valform input, .g-valform button { box-sizing: border-box; } /* ===== Footer ===== */ .g-footer { background: #f4f4f4; font-family: var(--g-inter); color: #000; } .g-footer__top { padding: 60px var(--g-pad-x) 0; min-height: 383px; } .g-footer__cols { display: flex; align-items: flex-start; gap: 50px; max-width: 1279px; margin-inline: auto; transform: translateX(.5px); } .g-footer__col { display: flex; flex-direction: column; } .g-footer__col--brand { width: 302px; gap: 36px; } .g-footer__col--quick { width: 195.67px; } .g-footer__col--policies { width: 282px; } .g-footer__col--contact { width: 349.09px; } .g-footer__logo a { display: block; } .g-footer__logo img { width: 128px; height: 64px; object-fit: contain; } .g-footer__about { width: 276px; font-size: 12px; line-height: 24px; } .g-footer__heading { padding-bottom: 20px; font-family: var(--g-inter); font-weight: 400; font-size: 14px; line-height: 20px; color: #000; } .g-footer__links { display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 20px; } .g-footer__links--quick { padding-top: 4px; } .g-footer__links--policies { line-height: 24px; } .g-footer a { transition: color .2s ease; } .g-footer__links a:hover, .g-footer__line a:hover { color: var(--g-teal); } .g-footer__line { padding-bottom: 16px; font-size: 13px; line-height: 21.6px; white-space: nowrap; } .g-footer__line--email { line-height: 24px; } .g-footer__hours { margin-top: -.5px; font-size: 13px; line-height: 28px; } .g-footer__cta { margin-top: 40px; padding-top: 11px; } .g-btn--footer .wp-block-button__link { gap: 16px; padding: 15px 24px; border-radius: 0; background: var(--g-teal); font-family: var(--g-inter); font-size: 13px; line-height: 18px; color: #fff; } .g-btn--footer .wp-block-button__link::after { content: ""; width: 18px; height: 18px; margin-bottom: 3px; background: url("assets/images/icon-arrow-up-right.svg") center / contain no-repeat; transition: transform .2s ease; } .g-btn--footer .wp-block-button__link:hover { background: var(--g-teal-dark); } .g-btn--footer .wp-block-button__link:hover::after { transform: translate(3px, -3px); } .g-footer__bar { display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 76px; padding: 21px var(--g-pad-x) 20.32px; background: #1765a6; } .g-footer__copy { flex: 1 0 0; font-size: 12px; line-height: 21.6px; color: #fff; } .g-footer__copy a:hover { text-decoration: underline; text-underline-offset: 3px; } .g-social { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .g-social a { width: 34.68px; height: 34.68px; display: flex; align-items: center; justify-content: center; border-radius: 17.34px; background: #fff; color: var(--g-teal); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .g-social a:hover { background: var(--g-teal); color: #fff; transform: translateY(-2px); } /* ===== Inner pages: shared ===== */ @font-face { font-family: Poppins; src: url("assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } .g-tag { align-self: flex-start; height: 46.933px; display: inline-flex; align-items: center; justify-content: center; padding: 0 34.133px; border-radius: 8.533px; background: var(--g-mint); font-family: Poppins, var(--g-inter); font-weight: 500; font-size: 14.933px; line-height: 2; color: #00573f; white-space: nowrap; } /* Page hero (teal) */ .g-pagehero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 37.4px; padding: 100px 20px; background: var(--g-teal-dark); } .g-pagehero::before { content: ""; position: absolute; left: calc(50% + 260px); top: calc(50% - 15.5px); width: 888px; height: 591px; transform: translate(-50%, -50%); background: url("assets/images/about-grid.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-pagehero::after { content: ""; position: absolute; left: -54px; top: 28px; width: 383.98px; height: 383.98px; border-radius: 50%; opacity: .4; filter: blur(32px); background: radial-gradient(circle, #7bfae6 0%, rgba(74, 208, 187, .5) 35%, rgba(25, 166, 144, 0) 70%); pointer-events: none; animation: g-glow 8s ease-in-out infinite alternate; } @keyframes g-glow { to { transform: translate(40px, 30px) scale(1.1); } } .g-pagehero__content { position: relative; z-index: 1; width: 781px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .g-pagehero .g-tag { align-self: center; height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; text-transform: uppercase; } .g-pagehero__title { font-family: var(--g-arial); font-weight: 700; font-size: 53.6px; line-height: 64px; color: #fff; } .g-pagehero__text { width: 703px; max-width: 100%; font-family: var(--g-arial); font-size: 18px; line-height: 25.6px; color: #dedede; text-box: trim-both cap alphabetic; } .g-pagehero__cta { position: relative; z-index: 1; } .g-btn--white .wp-block-button__link { width: 369px; height: 70px; padding: 15.8px 20px 17px; border-radius: 5px; background: #fff; font-family: var(--g-gilroy); font-weight: 500; font-size: 24px; line-height: 23.2px; color: var(--g-teal); white-space: pre; } .g-btn--white .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); } /* Split (text + image) */ .g-split { padding: 100px var(--g-pad-x); background: #fff; } .g-split__inner { display: flex; align-items: center; gap: 81px; } .g-split__copy { width: 618px; flex: none; min-height: 490px; display: flex; flex-direction: column; align-items: flex-start; gap: 20.267px; } .g-split__copy--mission { min-height: 378px; } .g-split__title { font-family: var(--g-arial); font-weight: 700; font-size: 51.2px; line-height: 48.64px; letter-spacing: -1.28px; color: #232323; text-transform: capitalize; white-space: nowrap; } .g-split__text { width: 618px; max-width: 100%; font-family: var(--g-inter); font-size: 18px; line-height: 28px; color: #6e6e6e; } .g-split__text + .g-split__text { margin-top: 7.73px; } .g-split__img--story { width: 501px; height: 570px; flex: none; } .g-split__img--story img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--g-ease); } .g-split__img--story:hover img { transform: scale(1.02); } /* Team */ .g-team { display: flex; flex-direction: column; align-items: center; padding: 100px var(--g-pad-x); background: #fafafa; } .g-team__inner { width: 1279px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; } .g-team__headline { width: 440px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .g-team__headline .g-tag { align-self: center; } .g-team__h { font-family: var(--g-arial); font-weight: 700; font-size: 46px; line-height: 52px; letter-spacing: -1.28px; color: #232323; text-transform: capitalize; } .g-team__cards { width: 100%; display: flex; align-items: stretch; justify-content: center; gap: 21px; } .g-team__card { width: 304.106px; min-height: 175.894px; display: flex; flex-direction: column; gap: 25.43px; padding: 23.3px 20px 24px 19.07px; background: #fff; border: 1.06px solid rgba(0, 0, 0, .06); border-radius: 12.715px; box-shadow: 0 11.656px 63.576px rgba(0, 0, 0, .08); text-transform: capitalize; transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease), border-color .35s ease; } .g-team__card:hover { transform: translateY(-6px); border-color: rgba(25, 166, 144, .35); box-shadow: 0 18px 60px rgba(0, 0, 0, .12); } .g-team__head { display: flex; flex-direction: column; gap: 16.954px; } .g-team__title { font-family: var(--g-gilroy); font-weight: 500; font-size: 25.43px; line-height: 29.669px; color: #141414; text-box: trim-both cap alphabetic; } .g-team__role { font-family: var(--g-gilroy); font-size: 16.954px; line-height: 21.192px; color: var(--g-teal); text-box: trim-both cap alphabetic; } .g-team__text { font-family: var(--g-gilroy); font-size: 14.834px; line-height: 21.192px; color: #6e6e6e; text-box: trim-both cap alphabetic; } /* Stats band */ .g-stats-wrap { padding: 40px var(--g-pad-x) 47px; padding-inline: max(80px, calc((100% - 1279px) / 2)); background: #fff; } .g-stats { min-height: 223px; display: flex; align-items: center; justify-content: space-between; padding: 32px 36px 32px 87px; border-radius: 25.58px; background: #d9fff9; text-align: center; } .g-stat { width: 220px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .g-stat__num { font-family: var(--g-arial); font-weight: 700; font-size: 56px; line-height: 1.1; letter-spacing: -1.68px; color: #010205; white-space: nowrap; text-box: trim-both cap alphabetic; font-variant-numeric: tabular-nums; } .g-stat__label { font-family: var(--g-arial); font-size: 16px; line-height: 1.3; letter-spacing: -.16px; color: #5f5f5f; white-space: nowrap; } /* Mission bento */ .g-split--mission { padding-bottom: 93px; } .g-bento { position: relative; width: 524.578px; height: 488px; flex: none; } .g-bento__photo { position: absolute; left: 0; top: 34px; width: 270px; height: 245px; overflow: hidden; border-radius: 17px; } .g-bento__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); } .g-bento__photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); } .g-bento:hover .g-bento__photo img { transform: scale(1.05); } .g-bento__badge { position: absolute; left: 138.3px; top: 0; z-index: 2; width: 96.351px; height: 96.351px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #010205; box-shadow: 0 26.832px 45.126px -6.098px rgba(0, 0, 0, .44); animation: g-float 4s ease-in-out infinite; } .g-bento__badge img { width: 42.823px; height: 42.823px; } @keyframes g-float { 50% { transform: translateY(-8px); } } .g-bento__stat { position: absolute; left: 291.7px; top: 28.55px; width: 231.064px; height: 250.691px; padding: 41.45px 21.5px 0 21.3px; border-radius: 17.843px; background: #a1f8eb; } .g-bento__num { font-family: var(--g-arial); font-weight: 700; font-size: 74.94px; line-height: 1.5; letter-spacing: -2.2482px; color: #010205; white-space: nowrap; } .g-bento__note { width: 188.241px; margin-top: 26.764px !important; font-family: var(--g-arial); font-size: 14.274px; line-height: 1.5; color: #5f5f5f; text-box: trim-both cap alphabetic; } .g-bento__chart { position: absolute; left: 0; top: 295.3px; width: 524.578px; height: 192.702px; overflow: hidden; padding: 43.72px 0 0 29.44px; border-radius: 17.843px; background: #085d50; color: #fff; font-family: var(--g-arial); font-weight: 700; } .g-bento__kicker { font-size: 12.49px; line-height: 1.26; letter-spacing: -.3747px; white-space: nowrap; text-box: trim-both cap alphabetic; } .g-bento__headline { width: 249.799px; margin-top: 28.548px !important; font-size: 28.548px; line-height: 1.3; letter-spacing: -.571px; text-box: trim-both cap alphabetic; } .g-bento__bars { position: absolute; left: 302.4px; bottom: -.9px; display: flex; align-items: flex-end; gap: 8.921px; } .g-bento__bars span { width: 61.558px; transform-origin: bottom; transition: transform 1s var(--g-ease); } .g-bento__bars span:nth-child(1) { height: 84.753px; background: #2cc5ad; } .g-bento__bars span:nth-child(2) { height: 121.331px; background: var(--g-teal); transition-delay: .12s; } .g-bento__bars span:nth-child(3) { height: 148.095px; background: #0d8371; transition-delay: .24s; } .g-bento.g-reveal .g-bento__bars span { transform: scaleY(0); } .g-bento.g-reveal.is-visible .g-bento__bars span { transform: scaleY(1); } /* About: CTA spacing (card sits right under the mission section, 100px above footer) */ .g-about .g-cta { padding-top: 0; padding-bottom: 100px; } @media (max-width: 1279px) { .g-pagehero { padding: 80px var(--g-pad-x); } .g-pagehero::before { left: 70%; } .g-split__inner { flex-direction: column; align-items: stretch; gap: 48px; } .g-split__copy, .g-split__copy--mission { width: 100%; min-height: 0; } .g-split__text { width: 100%; } .g-split__img--story { width: min(501px, 100%); height: auto; aspect-ratio: 501 / 570; margin-inline: auto; } .g-bento { margin-inline: auto; } .g-team__cards { flex-wrap: wrap; } .g-team__card { width: calc(50% - 10.5px); } .g-stats-wrap { padding-inline: var(--g-pad-x); } .g-stats { flex-wrap: wrap; justify-content: center; gap: 32px 0; padding: 40px 20px; } .g-stat { width: 50%; } } @media (max-width: 781px) { .g-pagehero { padding: 56px var(--g-pad-x); gap: 32px; } .g-pagehero::before { opacity: .5; } .g-pagehero__content { gap: 20px; } .g-pagehero__title { font-size: 34px; line-height: 42px; } .g-pagehero__text { font-size: 16px; line-height: 24px; } .g-btn--white .wp-block-button__link { width: auto; height: 60px; padding: 0 24px; font-size: 19px; } .g-split { padding-block: 56px; } .g-split__title { font-size: 36px; line-height: 40px; white-space: normal; } .g-split__text { font-size: 16px; line-height: 26px; } .g-team { padding-block: 56px; } .g-team__inner { gap: 32px; } .g-team__h { font-size: 32px; line-height: 38px; } .g-team__card { width: 100%; } .g-stats-wrap { padding-block: 24px; } .g-stat { width: 100%; } .g-stat__num { font-size: 44px; } .g-bento { width: 100%; max-width: 524.578px; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .g-bento__photo, .g-bento__stat, .g-bento__chart, .g-bento__badge { position: relative; left: auto; top: auto; } .g-bento__photo { width: auto; height: 200px; } .g-bento__stat { width: auto; height: auto; padding: 24px 16px; } .g-bento__num { font-size: 48px; } .g-bento__note { width: auto; margin-top: 12px !important; } .g-bento__badge { position: absolute; left: 50%; top: -24px; width: 64px; height: 64px; transform: translateX(-50%); animation: none; } .g-bento__badge img { width: 28px; height: 28px; } .g-bento__chart { grid-column: 1 / -1; width: auto; height: 180px; padding: 28px 0 0 20px; } .g-bento__headline { width: 50%; font-size: 22px; } .g-bento__bars { left: auto; right: 12px; gap: 6px; } .g-bento__bars span { width: 40px; } .g-about .g-cta { padding-bottom: 56px; } } /* ===== Services page ===== */ .g-tag--gilroy { font-family: var(--g-gilroy); font-weight: 400; } /* Trusted by leading fleets */ .g-trusted { display: flex; flex-direction: column; align-items: center; gap: 48px; min-height: 383px; padding: 48px var(--g-pad-x) 51.4px; background: #f6f6f6; } .g-trusted__head { width: 620px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .g-trusted__head .g-tag { align-self: center; height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; } .g-trusted__title { font-family: var(--g-arial); font-weight: 700; font-size: 46px; line-height: 1.1; color: #232323; text-box: trim-both cap alphabetic; } .g-trusted__logos { width: 1277px; max-width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; list-style: none; } .g-trusted__logo { position: relative; flex: none; overflow: hidden; } .g-trusted__logo + .g-trusted__logo::before { content: ""; position: absolute; } .g-trusted__logos li + li { margin-left: 140px; } .g-trusted__logos li + li::after { content: ""; position: absolute; left: -70px; top: 50%; width: 1px; height: 80px; transform: translateY(-50%); background: url("assets/images/svc-divider.svg") center / 100% 100% no-repeat; } .g-trusted__logo { overflow: visible; } .g-trusted__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(0); transition: transform .3s var(--g-ease); } .g-trusted__logo--enterprise, .g-trusted__logo--dpd { overflow: hidden; } .g-trusted__logo--enterprise img { position: absolute; left: -7.82%; top: -103.05%; width: 115.23%; height: 312.83%; max-width: none; object-fit: fill; } .g-trusted__logo--dpd img { position: absolute; left: -17.66%; top: 0; width: 131.48%; height: 129.01%; max-width: none; object-fit: fill; } .g-trusted__logo:hover img { transform: scale(1.06); } .g-trusted__logo--enterprise:hover img, .g-trusted__logo--dpd:hover img { transform: none; } /* Our services grid */ .g-svcgrid { display: flex; flex-direction: column; align-items: center; gap: 56.6px; padding: 100px var(--g-pad-x); background: #fff; } .g-svcgrid__head { width: 268px; } .g-svcgrid__head .g-tag { align-self: center; height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; } .g-title--svc { font-family: var(--g-arial); white-space: nowrap; } .g-svcgrid__cards { width: 1279px; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 13px; } .g-feature--svc { padding-top: 31px; } .g-feature--svc .g-feature__body { left: 14px; top: 61px; width: 270px; height: 123px; transform: none; gap: 24px; } .g-feature--svc .g-feature__title { font-family: var(--g-gilroy); font-weight: 500; font-size: 24px; line-height: 28px; text-box: trim-both cap alphabetic; } .g-feature--svc .g-feature__text { height: 48px; display: flex; align-items: center; font-family: var(--g-gilroy); font-weight: 400; font-size: 12px; line-height: 20px; } .g-feature__link { font-family: var(--g-gilroy); font-weight: 500; font-size: 18px; line-height: 28px; color: var(--g-teal); text-box: trim-both cap alphabetic; white-space: nowrap; } .g-feature__link a { display: inline-block; transition: transform .2s ease; } .g-feature__link a:hover { transform: translateX(4px); } .g-feature--svc .g-feature__card { overflow: hidden; } .g-svcico { padding: 14px; } .g-svcico::before { content: ""; display: block; width: 40px; height: 40px; background: center / contain no-repeat; } .g-svcico--purchasing::before { background-image: url("assets/images/svc-icon-purchasing.svg"); } .g-svcico--livery::before { background-image: url("assets/images/svc-icon-livery.svg"); } .g-svcico--docs::before { background-image: url("assets/images/svc-icon-docs.svg"); } .g-svcico--collection::before { background-image: url("assets/images/svc-icon-collection.svg"); } .g-svcico--lease::before { background-image: url("assets/images/svc-icon-lease.svg"); } .g-svcico--disposal::before { background-image: url("assets/images/svc-icon-disposal.svg"); background-size: 97.64% 74.54%; } .g-svcico--valuation::before { background-image: url("assets/images/svc-icon-valuation.svg"); } /* What we buy */ .g-scope { padding: 100px var(--g-pad-x); background: #fafafa; } .g-scope__inner { display: flex; align-items: center; gap: 85px; } .g-scope__copy { width: 583px; flex: none; min-height: 564px; display: flex; flex-direction: column; align-items: flex-start; } .g-scope .g-tag { height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; } .g-scope__title { padding-top: 24.891px; font-family: var(--g-arial); font-weight: 700; font-size: 48px; line-height: 58.88px; letter-spacing: -1.6px; color: #232323; text-transform: capitalize; } .g-scope__lead { width: 546.133px; max-width: 100%; padding-top: 20.405px; font-family: var(--g-gilroy); font-size: 19.2px; line-height: 31.2px; color: #6e6e6e; } .g-scope__list { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 45.76px; gap: 17.067px 34.133px; padding-top: 42.667px !important; } .g-scope__list li { position: relative; padding-left: 34.133px; font-family: var(--g-gilroy); font-size: 16.64px; line-height: 22.88px; color: rgba(17, 31, 52, .85); } .g-scope__list li::before { content: ""; position: absolute; left: 0; top: 2.133px; width: 21.333px; height: 21.333px; border-radius: 50%; background: rgba(25, 166, 144, .15) url("assets/images/icon-check-small.svg") center / 12.8px 12.8px no-repeat; } .g-scope__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 25.6px; padding-top: 51.2px; } .g-btn--scope .wp-block-button__link { gap: 12.8px; padding: 17.067px 29.867px; border-radius: 6.4px; background: var(--g-teal); font-family: var(--g-gilroy); font-weight: 500; font-size: 14.933px; line-height: 21.333px; letter-spacing: .7467px; color: #ffffff; text-transform: capitalize; } .g-btn--scope .wp-block-button__link::after { content: ""; width: 17.067px; height: 17.067px; background: url("assets/images/icon-arrow-light.svg") center / contain no-repeat; transition: transform .2s ease; } .g-btn--scope .wp-block-button__link:hover { background: var(--g-teal-dark); } .g-btn--scope .wp-block-button__link:hover::after { transform: translateX(4px); } .g-scope__note { font-family: var(--g-gilroy); font-size: 14.933px; line-height: 21.333px; color: #6e6e6e; white-space: nowrap; } .g-scope__note strong { font-weight: 400; color: #111f34; } .g-types { position: relative; width: 612px; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 6.048px 6.044px; list-style: none; background: #fff; border: 1.067px solid #e2e8f0; border-radius: 12.8px; box-shadow: 0 25.6px 64px -32px rgba(17, 31, 52, .12); } .g-types li { height: 59.808px; display: flex; align-items: center; gap: 12.8px; padding: 0 21.333px; border-bottom: .711px solid rgba(226, 232, 240, .7); transition: background-color .2s ease; } .g-types li:nth-child(odd) { border-right: .711px solid rgba(226, 232, 240, .7); } .g-types li:nth-last-child(-n+2) { height: 59.104px; border-bottom: 0; } .g-types li:hover { background: #f4fffa; } .g-types__n { font-family: var(--g-inter); font-weight: 700; font-size: 11.947px; line-height: 17.92px; color: #5f6b7a; } .g-types__t { font-family: var(--g-inter); font-size: 16.64px; line-height: 24.96px; color: rgba(17, 31, 52, .9); white-space: nowrap; } .g-types li:hover .g-types__n { color: var(--g-teal); } /* Sectors */ .g-industries { display: flex; flex-direction: column; align-items: center; gap: 60px; margin-top: 100px; padding: 0 var(--g-pad-x); padding-inline: max(80.5px, calc((100% - 1279px) / 2)); background: #fff; } .g-industries__head { width: 674px; max-width: 100%; } .g-industries__head .g-tag { align-self: center; height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; } .g-title--nowrap { font-family: var(--g-arial); white-space: nowrap; } .g-industries__list { width: 1279px; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 29px; margin: 0; padding: 0; list-style: none; } .g-industry { position: relative; display: block; width: 407px; height: 103px; border: 1px solid rgba(0, 0, 0, .09); border-radius: 10px; background: #fff; text-transform: capitalize; transition: background-color .25s ease, border-color .25s ease, transform .25s var(--g-ease), box-shadow .25s ease; } .g-industry:hover, .g-industry:focus-visible, .g-industries__list li:first-child .g-industry { background: var(--g-mint); border-color: var(--g-teal); } .g-industry:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(25, 166, 144, .12); } .g-industry__icon { position: absolute; left: 18px; top: calc(50% + .5px); width: 58px; height: 58px; transform: translateY(-50%); border-radius: 50px; background: linear-gradient(192.5deg, rgba(25, 166, 144, .24) 8.41%, rgba(224, 255, 241, .24) 94.27%); } .g-industry__icon::before { content: ""; position: absolute; left: 9.5px; top: 9.5px; width: 40px; height: 40px; background: url("assets/images/icon-industry-van.svg") center / contain no-repeat; } .g-industry__title { position: absolute; left: 95px; top: 18px; font-family: var(--g-gilroy); font-weight: 500; font-size: 20px; line-height: normal; color: #141414; white-space: nowrap; text-box: trim-both cap alphabetic; } .g-industry__text { position: absolute; left: 95px; top: 50.5px; width: 279px; font-family: var(--g-inter); font-size: 16px; line-height: normal; color: #6e6e6e; text-box: trim-both cap alphabetic; } /* Other areas bar */ .g-areasbar-wrap { padding: 97px var(--g-pad-x) 100px; padding-inline: max(82px, calc((100% - 1276px) / 2)); background: #fff; } .g-areasbar { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26.667px 30.67px; background: #fff; border: 1px solid #eaecee; border-radius: 20px; filter: drop-shadow(0 11px 30px rgba(0, 0, 0, .08)); } .g-areasbar__label { font-family: var(--g-arial); font-weight: 700; font-size: 10.4px; line-height: 15.6px; letter-spacing: 2.912px; color: #62748e; text-transform: uppercase; white-space: nowrap; } .g-areasbar__pills { display: flex; flex-wrap: wrap; gap: 8px; } .g-areasbar__pills a { display: block; padding: 7.667px 15.667px; border: 1px solid var(--g-mint); border-radius: 999px; background: var(--g-mint); font-family: var(--g-arial); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: .6px; color: var(--g-teal); text-transform: uppercase; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .g-areasbar__pills a:hover { background: var(--g-teal); border-color: var(--g-teal); color: #fff; } /* Services: CTA spacing */ .g-services .g-cta { padding-top: 0; padding-bottom: 100px; } @media (max-width: 1279px) { .g-trusted__logos { flex-wrap: wrap; justify-content: center; gap: 32px 48px; } .g-trusted__logos li + li { margin-left: 0; } .g-trusted__logos li + li::after { display: none; } .g-svcgrid__cards .g-feature { width: calc(50% - 7px); max-width: 420px; } .g-feature--svc .g-feature__card { height: auto; } .g-feature--svc .g-feature__body { position: static; width: auto; height: auto; padding: 56px 24px 28px; } .g-feature--svc .g-feature__title { white-space: normal; } .g-feature--svc .g-feature__text { height: auto; } .g-scope__inner { flex-direction: column; align-items: stretch; gap: 48px; } .g-scope__copy { width: 100%; min-height: 0; } .g-types { width: 100%; } .g-industry { width: min(407px, calc(100vw - 2 * var(--g-pad-x))); } .g-industries { padding-inline: var(--g-pad-x); margin-top: 72px; } .g-areasbar-wrap { padding: 72px var(--g-pad-x); } .g-areasbar { flex-direction: column; align-items: flex-start; } } @media (max-width: 781px) { .g-trusted { padding-block: 40px; gap: 32px; } .g-trusted__title { font-size: 30px; } .g-trusted__title br { display: none; } .g-svcgrid { padding-block: 56px; gap: 40px; } .g-svcgrid__cards .g-feature { width: 100%; } .g-scope { padding-block: 56px; } .g-scope__title { font-size: 36px; line-height: 44px; } .g-scope__lead { font-size: 17px; line-height: 27px; } .g-scope__list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; } .g-scope__note { white-space: normal; padding-top: 16px; } .g-types { grid-template-columns: minmax(0, 1fr); } .g-types li, .g-types li:nth-last-child(-n+2) { height: 52px; border-right: 0; border-bottom: .711px solid rgba(226, 232, 240, .7); } .g-types li:last-child { border-bottom: 0; } .g-title--svc, .g-title--nowrap { white-space: normal; } .g-industries { margin-top: 56px; gap: 32px; } .g-industry { width: 100%; height: auto; min-height: 103px; padding: 20px 16px 20px 92px; } .g-industry__title, .g-industry__text { position: static; display: block; width: auto; white-space: normal; } .g-industry__text { margin-top: 10px; } .g-areasbar-wrap { padding-block: 48px; } .g-services .g-cta { padding-bottom: 56px; } } @media (min-width: 1280px) { .g-feature--svc .g-feature__title { white-space: nowrap; } .g-svcgrid__cards > :nth-child(6) .g-feature__title { white-space: normal; } .g-scope__list li { white-space: nowrap; } .g-scope__list li:nth-child(even) { white-space: normal; } } /* ===== Contact page (reuses page hero, contact block and valuation CTA) ===== */ .g-pagehero--center { justify-content: center; gap: 60px; min-height: 582px; padding-block: 100px; } .g-pagehero__title--one { white-space: nowrap; } .g-contactpage .g-contact { padding-top: 100px; padding-bottom: 100px; } .g-contactpage .g-cta { padding-top: 0; padding-bottom: 100px; } @media (max-width: 781px) { .g-pagehero--center { min-height: 0; gap: 32px; padding-block: 56px; } .g-pagehero__title--one { white-space: normal; } .g-contactpage .g-contact { padding-block: 48px; } .g-contactpage .g-cta { padding-bottom: 56px; } } /* ===== Landing pages (sell-my-van & siblings) ===== */ .g-landing > * + * { margin-top: 17px !important; } .g-landing { padding-block: 17px; } .g-badge { align-self: flex-start; height: 44px; display: inline-flex; align-items: center; padding: 0 32px; border-radius: 8px; background: var(--g-mint); font-family: var(--g-arial); font-weight: 700; font-size: 14px; line-height: 2; color: #00573f; white-space: nowrap; } /* Hero */ .g-lhero { position: relative; height: 701px; overflow: hidden; background: #fff; } .g-lhero__inner { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; } .g-lhero__inner::before { content: ""; position: absolute; left: 820px; top: 30px; width: 580px; height: 580px; background: url("assets/images/landing-splash.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-lhero__copy { position: absolute; left: 80px; top: 132.5px; width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; } .g-lhero__heading { display: flex; flex-direction: column; gap: 16px; font-family: var(--g-arial); font-weight: 700; } .g-lhero__eyebrow { font-size: 16px; line-height: 16px; letter-spacing: 1px; color: var(--g-teal); white-space: nowrap; } .g-lhero__title { font-family: var(--g-arial); font-weight: 700; font-size: 50px; line-height: 58px; color: #232323; } .g-lhero__title mark { color: var(--g-teal); background: transparent; } .g-lhero__text { font-family: var(--g-arial); font-size: 18px; line-height: 26px; color: var(--g-text); } .g-lhero__img { position: absolute; left: 660px; top: 65.5px; width: 700px; height: 460px; overflow: hidden; border-radius: 16px; } .g-lhero__img img { position: absolute; left: -25.64%; top: -17.07%; width: 128.21%; height: 121.95%; max-width: none; transition: transform .8s var(--g-ease); } .g-lhero:hover .g-lhero__img img { transform: translateX(-6px); } .g-lhero .g-valform { position: absolute; left: 693px; top: 477px; width: 684px; } /* Why / process tweaks */ .g-why--landing { margin-top: 0; padding-bottom: 75px; } .g-process--landing { padding-bottom: 100px; } /* SEO + secondary */ .g-lseo, .g-lsec { display: flex; flex-direction: column; align-items: center; padding: 100px; background: #fff; } .g-lsec { background: #fafafa; } .g-lseo__inner { width: 1240px; max-width: 100%; display: flex; flex-direction: column; gap: 48px; } .g-lsec__inner { width: 1240px; max-width: 100%; display: flex; flex-direction: column; gap: 40px; } .g-lseo__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .g-lseo__title, .g-lsec__title { font-family: var(--g-arial); font-weight: 700; font-size: 44px; line-height: 1.1; color: #232323; } .g-lsec__title { font-size: 46px; } .g-lseo__text { font-family: var(--g-inter); font-size: 18px; line-height: 28px; color: var(--g-text); } .g-icards--seo .g-icard__icon::before { width: 32px; height: 32px; } .g-icard__icon--seo-online::before { background-image: url("assets/images/icon-seo-online.svg"); } .g-icard__icon--seo-pin::before { background-image: url("assets/images/icon-seo-pin.svg"); } .g-icard__icon--seo-clock::before { background-image: url("assets/images/icon-seo-clock.svg"); } .g-icards--seo .g-icard { filter: none; } .g-icards--seo .g-icard__title { font-family: var(--g-inter); font-weight: 700; font-size: 22px; line-height: normal; color: #232323; } .g-icards--seo .g-icard__text { color: var(--g-text); } .g-lsec__row { display: flex; align-items: center; gap: 40px; } .g-lsec__copy { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .g-lsec__sub { font-family: var(--g-inter); font-weight: 700; font-size: 22px; line-height: normal; color: #232323; } .g-lsec__subtext { font-family: var(--g-inter); font-size: 16px; line-height: 24px; color: var(--g-text); } .g-lsec__links { display: flex; flex-direction: column; gap: 12px; } .g-lsec__links a { display: flex; align-items: center; gap: 12px; padding: 15px; background: #fff; border: 1px solid rgba(25, 166, 144, .23); border-radius: 8px; font-family: var(--g-inter); font-weight: 700; font-size: 16px; line-height: normal; color: var(--g-teal); transition: background-color .2s ease, border-color .2s ease, padding-left .2s ease; } .g-lsec__links a::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--g-teal); } .g-lsec__links a:hover { padding-left: 21px; background: var(--g-mint); border-color: var(--g-teal); } .g-lsec__img { width: 580px; height: 420px; flex: none; overflow: hidden; border-radius: 12px; } .g-lsec__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); } .g-lsec__img:hover img { transform: scale(1.03); } /* FAQ (2 columns) */ .g-lfaq { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 100px; background: #fff; } .g-lfaq__head { display: flex; flex-direction: column; align-items: center; gap: 32px; } .g-lfaq__head .g-badge { align-self: center; } .g-lfaq__title { font-family: var(--g-inter); font-weight: 800; font-size: 46px; line-height: 1.1; color: #232323; white-space: nowrap; } .g-lfaq__cols { width: 1240px; max-width: 100%; display: flex; align-items: flex-start; gap: 36px; } .g-lfaq__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: g-faq; } .g-lfaq__col + .g-lfaq__col { counter-reset: g-faq 4; } .g-faq--landing.wp-block-details { padding: 22px; border-radius: 8px; } .g-faq--landing.wp-block-details[open] { border-color: var(--g-teal); } .g-faq--landing summary { gap: 20px; min-height: 40px; font-weight: 700; font-size: 18px; line-height: normal; color: #232323; } .g-faq--landing summary::before { width: 40px; font-family: var(--g-arial); font-weight: 700; font-size: 16px; line-height: normal; } .g-faq--landing.wp-block-details > p { margin: 16px 0 0; padding-left: 60px; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--g-text); } /* Final CTA */ .g-lcta { padding: 60px var(--g-pad-x); background: #fafafa; } .g-lcta__card { position: relative; height: 335px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; border-radius: 16px; background: url("assets/images/landing-cta-bg.svg") center / 100% 100% no-repeat; } .g-lcta__card::before { content: ""; position: absolute; left: 25px; top: 11px; width: 1259.114px; height: 164px; background: url("assets/images/landing-cta-detail.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-lcta__titles { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .2); font-family: var(--g-arial); } .g-lcta__title { font-family: var(--g-arial); font-weight: 700; font-size: 40px; line-height: 48px; color: #fff; } .g-lcta__text { width: 950px; max-width: 100%; font-size: 22px; line-height: 26px; } .g-ctaform--landing input { padding-left: 32.5px; font-family: var(--g-arial); font-weight: 400; color: #000; } .g-ctaform--landing input::placeholder { color: #6b7280; } .g-ctaform--landing button { font-weight: 700; font-size: 18px; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .15); } /* Contact block on landing pages */ .g-landing .g-contact { padding-top: 32px; padding-bottom: 32px; } @media (max-width: 1279px) { .g-lhero { height: auto; } .g-lhero__inner { display: flex; flex-direction: column; gap: 32px; padding: 48px var(--g-pad-x) 64px; } .g-lhero__inner::before { left: auto; right: -120px; top: 0; } .g-lhero__copy, .g-lhero__img, .g-lhero .g-valform { position: relative; left: auto; top: auto; } .g-lhero__copy { width: auto; max-width: 620px; } .g-lhero__img { width: 100%; max-width: 700px; height: auto; aspect-ratio: 700 / 460; margin-inline: auto; } .g-lhero .g-valform { width: 100%; max-width: 684px; margin: -40px auto 0; } .g-lseo, .g-lsec, .g-lfaq { padding: 72px var(--g-pad-x); } .g-lsec__row { flex-direction: column; align-items: stretch; } .g-lsec__img { width: 100%; height: auto; aspect-ratio: 580 / 420; } .g-lfaq__cols { flex-direction: column; align-items: stretch; gap: 16px; } } @media (max-width: 1024px) { .g-lhero__inner::before { display: none; } } @media (max-width: 781px) { .g-landing > * + * { margin-top: 0 !important; } .g-landing { padding-block: 0; } .g-lhero__eyebrow { white-space: normal; font-size: 13px; } .g-lhero__title { font-size: 36px; line-height: 44px; } .g-lhero__text { font-size: 16px; line-height: 24px; } .g-lhero .g-valform { margin-top: 0; } .g-lseo, .g-lsec, .g-lfaq { padding-block: 56px; } .g-lseo__title, .g-lsec__title, .g-lfaq__title { font-size: 30px; white-space: normal; } .g-lseo__text { font-size: 16px; line-height: 26px; } .g-lfaq { gap: 32px; } .g-faq--landing.wp-block-details { padding: 16px; } .g-faq--landing summary { gap: 12px; font-size: 16px; } .g-faq--landing summary::before { width: 28px; } .g-faq--landing.wp-block-details > p { padding-left: 0; } .g-lcta { padding-block: 40px; } .g-lcta__card { height: auto; padding: 40px 16px; border-radius: 16px; background-size: cover; } .g-lcta__title { font-size: 30px; line-height: 36px; } .g-lcta__text { font-size: 18px; } } /* Landing variants */ .g-icard__num { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: var(--g-mint); font-family: var(--g-arial); font-weight: 700; font-size: 18px; color: var(--g-teal); transition: background-color .3s ease, color .3s ease; } .g-icard:hover .g-icard__num { background: var(--g-teal); color: #fff; } .g-lsec__links span { display: flex; align-items: center; gap: 12px; padding: 15px; background: #fff; border: 1px solid rgba(25, 166, 144, .23); border-radius: 8px; font-family: var(--g-inter); font-weight: 700; font-size: 16px; line-height: normal; color: var(--g-teal); } .g-lsec__links span::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--g-teal); } .g-lsec__links--steps span { color: #232323; font-weight: 600; } .g-lsec__note { font-family: var(--g-inter); font-style: italic; font-size: 14px; line-height: 22px; color: var(--g-text); } /* Longer step descriptions (landing pages) */ .g-steps .g-step--long .g-step__text { font-size: 17px; line-height: 1.45; } .g-steps .g-step--long .g-step__body { gap: 26px; } .g-step--flip.g-step--long .g-step__body { top: 44px; } .g-step--long:not(.g-step--flip) .g-step__body { top: 58px; } /* ===== Service detail pages ===== */ .g-sd-eyebrow { font-family: var(--g-arial); font-weight: 700; font-size: 14px; line-height: normal; color: var(--g-teal); white-space: nowrap; } .g-sd-eyebrow--13 { font-size: 13px; } .g-sd-eyebrow--white { color: #fff; } .g-sd-badge { align-self: flex-start; padding: 8px 24px; border-radius: 8px; background: var(--g-mint); font-family: var(--g-arial); font-weight: 700; font-size: 13px; line-height: normal; color: #00573f; white-space: nowrap; } .g-sdbtn .wp-block-button__link { padding: 13px 24px; border: 2px solid transparent; border-radius: 8px; font-family: var(--g-arial); font-weight: 700; font-size: 15px; line-height: normal; white-space: nowrap; } .g-sdbtn--solid .wp-block-button__link { background: var(--g-teal); border-color: var(--g-teal); color: #fff; } .g-sdbtn--solid .wp-block-button__link:hover { background: var(--g-teal-dark); border-color: var(--g-teal-dark); box-shadow: 0 10px 22px rgba(25, 166, 144, .28); } .g-sdbtn--ghost .wp-block-button__link { background: #fff; border-color: #fff; color: var(--g-teal); } .g-sdbtn--ghost .wp-block-button__link:hover { border-color: var(--g-teal); } .g-sdbtn--white .wp-block-button__link { background: #fff; border-color: #fff; color: var(--g-teal); } .g-sdbtn--white .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); } /* Hero */ .g-sdhero { min-height: 720px; display: flex; align-items: center; gap: 58px; padding: 70px var(--g-pad-x); background: #fff; } .g-sdhero__copy { width: 560px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .g-sdhero__title { font-family: var(--g-arial); font-weight: 700; font-size: 54px; line-height: 1.05; color: #232323; } .g-sdhero__text { font-family: var(--g-arial); font-size: 18px; line-height: 1.55; color: var(--g-text); } .g-sdhero__actions { display: flex; gap: 14px; } .g-sdhero__frame { position: relative; width: 642px; height: 500px; flex: none; overflow: hidden; border-radius: 20px; background: var(--g-mint); } .g-sdhero__frame::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 156px; height: 12px; background: var(--g-teal); transition: width .6s var(--g-ease); } .g-sdhero__frame:hover::before { width: 260px; } .g-sdhero__img { position: absolute; left: 18px; top: 18px; width: 606px; height: 464px; overflow: hidden; border-radius: 12px; } .g-sdhero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); } .g-sdhero__frame:hover .g-sdhero__img img { transform: scale(1.04); } /* Trusted */ .g-sdtrust { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 48px var(--g-pad-x); background: #f6f7f7; } .g-sdtrust__title { font-family: var(--g-arial); font-weight: 700; font-size: 38px; line-height: normal; color: #232323; text-align: center; } .g-sdtrust__logos { width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0; list-style: none; } .g-sdtrust__logos li { height: 64px; flex: none; } .g-sdtrust__logos img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s var(--g-ease); } .g-sdtrust__logos li:hover img { transform: scale(1.06); } /* Explanation */ .g-sdexp { display: flex; align-items: center; gap: 80px; padding: 96px var(--g-pad-x); background: #fff; } .g-sdexp__img { width: 520px; height: 390px; flex: none; overflow: hidden; border-radius: 12px; } .g-sdexp__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--g-ease); } .g-sdexp__img:hover img { transform: scale(1.04); } .g-sdexp__copy { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .g-sdexp__title { font-family: var(--g-arial); font-weight: 700; font-size: 44px; line-height: 1.12; color: #232323; } .g-sdexp__text { font-family: var(--g-arial); font-size: 18px; line-height: 1.65; color: var(--g-text); } .g-sdexp__assure { display: flex; flex-wrap: wrap; gap: 12px 28px; } .g-sdexp__item { font-family: var(--g-arial); font-weight: 700; font-size: 15px; line-height: normal; color: var(--g-teal); white-space: nowrap; } /* Benefits */ .g-sdben { display: flex; flex-direction: column; gap: 48px; padding: 96px var(--g-pad-x); background: #f6f7f7; } .g-sdben__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .g-sdben__titles { display: flex; flex-direction: column; gap: 12px; } .g-sdben__h { font-family: var(--g-arial); font-weight: 700; font-size: 44px; line-height: normal; color: #232323; white-space: nowrap; } .g-sdben__lead { width: 430px; flex: none; font-family: var(--g-arial); font-size: 17px; line-height: 1.5; color: var(--g-text); } .g-sdben__cards { display: flex; align-items: flex-start; gap: 20px; } .g-sdben__card { flex: 1 0 0; min-width: 0; min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 25px; background: #fff; border: 1px solid #dde8e6; border-radius: 12px; box-shadow: 0 11px 60px rgba(0, 0, 0, .08); transition: transform .35s var(--g-ease), border-color .35s ease, box-shadow .35s ease; } .g-sdben__card:hover { transform: translateY(-6px); border-color: var(--g-teal); box-shadow: 0 18px 60px rgba(0, 0, 0, .12); } .g-sdben__num { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--g-mint); font-family: var(--g-arial); font-weight: 700; font-size: 15px; line-height: normal; color: var(--g-teal); transition: background-color .3s ease, color .3s ease; } .g-sdben__card:hover .g-sdben__num { background: var(--g-teal); color: #fff; } .g-sdben__title { font-family: var(--g-arial); font-weight: 700; font-size: 21px; line-height: 1.2; color: #232323; } .g-sdben__text { font-family: var(--g-arial); font-size: 15px; line-height: 1.55; color: var(--g-text); } /* Quote CTA */ .g-sdcta { padding: 64px var(--g-pad-x); background: #fff; } .g-sdcta__card { position: relative; min-height: 310px; display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; padding: 40px 70px; border-radius: 20px; background: linear-gradient(90deg, #0e7666, #13806f 55%, #19a690); } .g-sdcta__card::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%); pointer-events: none; animation: g-glow 8s ease-in-out infinite alternate; } .g-sdcta__copy { position: relative; width: 700px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; color: #fff; } .g-sdcta__title { font-family: var(--g-arial); font-weight: 700; font-size: 40px; line-height: normal; color: #fff; } .g-sdcta__text { font-family: var(--g-arial); font-size: 18px; line-height: 1.5; } .g-sdcta__actions { position: relative; flex: none; } /* Contact block spacing */ .g-svcpage .g-contact { min-height: 750px; padding-top: 70px; padding-bottom: 70px; } @media (max-width: 1279px) { .g-sdhero { min-height: 0; } .g-svcpage .g-contact { min-height: 0; } .g-sdhero, .g-sdexp { flex-direction: column; align-items: stretch; gap: 40px; padding-block: 56px; } .g-sdhero__copy { width: 100%; } .g-sdhero__frame { width: 100%; max-width: 642px; height: auto; aspect-ratio: 642 / 500; margin-inline: auto; } .g-sdhero__img { left: 2.8%; top: 3.6%; width: 94.4%; height: 92.8%; } .g-sdexp__img { width: 100%; max-width: 640px; height: auto; aspect-ratio: 520 / 390; } .g-sdtrust__logos { flex-wrap: wrap; justify-content: center; gap: 24px 40px; } .g-sdben { padding-block: 72px; } .g-sdben__head { flex-direction: column; align-items: flex-start; } .g-sdben__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-sdcta__card { flex-direction: column; align-items: flex-start; padding: 48px 40px; } } @media (max-width: 781px) { .g-sdhero__title { font-size: 36px; } .g-sdhero__text { font-size: 16px; } .g-sdhero__actions { flex-wrap: wrap; } .g-sdtrust__title { font-size: 28px; } .g-sdexp__title, .g-sdben__h { font-size: 30px; white-space: normal; } .g-sdexp__text { font-size: 16px; } .g-sdben { padding-block: 56px; gap: 32px; } .g-sdben__lead { width: auto; } .g-sdben__cards { grid-template-columns: minmax(0, 1fr); } .g-sdben__card { min-height: 0; } .g-sdcta { padding-block: 40px; } .g-sdcta__card { padding: 36px 20px; } .g-sdcta__title { font-size: 28px; } .g-sdcta__text { font-size: 16px; } .g-sdbtn .wp-block-button__link { white-space: normal; } .g-svcpage .g-contact { padding-block: 48px; } } /* ===== Area pages ===== */ @font-face { font-family: "DM Serif Text"; src: url("assets/fonts/dm-serif-text-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } .g-tag--upper { text-transform: uppercase; } .g-tag--center { align-self: center; } .g-areapage .g-tag { height: 44px; padding: 0 32px; border-radius: 8px; font-size: 14px; } .g-areapage .g-aintro .g-tag { height: 46.933px; padding: 0 34.133px; border-radius: 8.533px; font-size: 14.933px; } .g-title--arial { font-family: var(--g-arial); } .g-areapage > * + * { margin-top: 50px !important; } .g-areapage > .g-aintro { margin-top: 52px !important; } /* Hero */ .g-ahero { position: relative; height: 582px; overflow: hidden; background: var(--g-teal-dark); } .g-ahero::before { content: ""; position: absolute; left: calc(50% + 239px); top: calc(50% - 30.5px); width: 888px; height: 591px; transform: translate(-50%, -50%); background: url("assets/images/area-grid.svg") center / 100% 100% no-repeat; pointer-events: none; } .g-ahero::after { content: ""; position: absolute; left: calc(50% + 448px); top: 0; width: 383.98px; height: 383.98px; border-radius: 50%; opacity: .4; filter: blur(32px); background: radial-gradient(circle, #7bfae6 0%, rgba(74, 208, 187, .5) 35%, rgba(25, 166, 144, 0) 70%); pointer-events: none; animation: g-glow 8s ease-in-out infinite alternate; } .g-ahero__inner { position: relative; z-index: 1; max-width: 1440px; height: 100%; margin: 0 auto; } .g-ahero__copy { position: absolute; left: 80px; top: 76px; width: 591px; display: flex; flex-direction: column; align-items: flex-start; gap: 55px; } .g-ahero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; } .g-ahero__title { width: 524px; font-family: var(--g-arial); font-weight: 700; font-size: 53.6px; line-height: 64px; color: #fff; } .g-ahero__text { width: 606px; font-family: var(--g-inter); font-size: 18px; line-height: 25.6px; color: #dedede; text-box: trim-both cap alphabetic; } .g-ahero__stats { position: absolute; left: 828px; right: 80px; top: 357px; height: 118px; display: flex; justify-content: center; gap: 1.086px; overflow: hidden; border: 1.086px solid rgba(241, 244, 247, .15); border-radius: 17.371px; background: rgba(241, 244, 247, .15); backdrop-filter: blur(4px); } .g-ahero__stat { width: 175.98px; display: flex; flex-direction: column; align-items: center; gap: 4.343px; padding: 26.057px 17.371px; text-align: center; color: #fff; transition: background-color .25s ease; } .g-ahero__stat:hover { background: rgba(255, 255, 255, .08); } .g-ahero__term { font-family: "DM Serif Text", Georgia, serif; font-size: 32.571px; line-height: 39.086px; white-space: nowrap; } .g-ahero__detail { font-family: var(--g-inter); font-size: 12.16px; line-height: 18.24px; letter-spacing: 2.1888px; text-transform: uppercase; white-space: nowrap; } /* Intro + local collection card */ .g-aintro { padding: 100px var(--g-pad-x); background: #fff; } .g-aintro__inner { display: flex; align-items: center; gap: 85px; } .g-aintro__copy { width: 628.267px; flex: none; height: 490.667px; display: flex; flex-direction: column; align-items: flex-start; gap: 20.267px; } .g-aintro__title { width: 414.933px; padding-top: 4.443px; font-family: var(--g-arial); font-weight: 700; font-size: 51.2px; line-height: 48.64px; letter-spacing: -1.28px; color: #232323; text-transform: capitalize; } .g-aintro__text { width: 546.133px; max-width: 100%; font-family: var(--g-inter); font-size: 19.2px; line-height: 31.2px; color: #6e6e6e; } .g-aintro__list { display: flex; flex-direction: column; gap: 12.8px; padding-top: 17.813px !important; } .g-aintro__list li { position: relative; padding-left: 34.133px; font-family: var(--g-arial); font-size: 16.64px; line-height: 22.88px; color: rgba(0, 0, 0, .85); } .g-aintro__list li::before { content: ""; position: absolute; left: 0; top: 2.133px; width: 21.333px; height: 21.333px; border-radius: 50%; background: var(--g-mint) url("assets/images/icon-check-teal.svg") center / 12.8px 12.8px no-repeat; } .g-local { position: relative; width: 566.4px; min-height: 461.867px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 7.467px; padding: 34.133px 34.133px 38.4px; background: #fff; border: 1.067px solid #e2e8f0; border-radius: 21.333px; box-shadow: 0 32px 74.667px -42.667px rgba(17, 31, 52, .6); transition: transform .35s var(--g-ease); } .g-local:hover { transform: translateY(-4px); } .g-local__icon { width: 46.933px; height: 46.933px; border-radius: 17.067px; background: var(--g-mint) url("assets/images/icon-map-pin-teal.svg") center / 21.333px 21.333px no-repeat; } .g-local__title { padding-top: 13.44px; font-family: var(--g-arial); font-weight: 700; font-size: 25.6px; line-height: 29.867px; letter-spacing: .48px; color: #111f34; text-transform: capitalize; } .g-local__text { font-family: var(--g-arial); font-size: 14.933px; line-height: 24.267px; color: #6e6e6e; } .g-local__label { padding-top: 26.24px; font-family: var(--g-arial); font-weight: 700; font-size: 11.093px; line-height: 16.64px; letter-spacing: 3.1061px; color: #62748e; text-transform: uppercase; } .g-towns { width: 100%; min-height: 110.795px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 11.7px 5.6px; padding-top: 4.91px !important; } .g-towns li { padding: 4.977px 13.511px; border: 1.067px solid #efefef; border-radius: 999px; background: #f7f7f7; font-family: var(--g-arial); font-size: 14.933px; line-height: 21.333px; color: rgba(0, 0, 0, .8); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; } .g-towns li:hover { background: var(--g-mint); border-color: rgba(25, 166, 144, .3); } .g-local__cta { width: 100%; } .g-btn--local { width: 100%; } .g-btn--local .wp-block-button__link { width: 100%; gap: 8.533px; padding: 17.067px 25.6px; border-radius: 999px; background: var(--g-teal); font-family: var(--g-arial); font-weight: 700; font-size: 14.933px; line-height: 21.333px; letter-spacing: .7467px; color: #ffffff; text-transform: uppercase; } .g-btn--local .wp-block-button__link::after { content: ""; width: 17.067px; height: 17.067px; background: url("assets/images/icon-arrow-light-2.svg") center / contain no-repeat; transition: transform .2s ease; } .g-btn--local .wp-block-button__link:hover { background: var(--g-teal-dark); } .g-btn--local .wp-block-button__link:hover::after { transform: translateX(4px); } /* Why us */ .g-awhy { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 100px var(--g-pad-x); background: #fafafa; } .g-awhy__head { width: 674px; max-width: 100%; } .g-awhy__cards { width: 1280px; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 13.33px; } .g-awhy__card { width: 310px; height: 188px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 24px 0 20px; background: #fff; border-left: 4px solid var(--g-teal); border-radius: 12px; box-shadow: 0 11px 60px rgba(0, 0, 0, .08); text-align: center; text-transform: capitalize; transition: transform .35s var(--g-ease), box-shadow .35s var(--g-ease); } .g-awhy__card:hover { transform: translateY(-6px); box-shadow: 0 18px 60px rgba(0, 0, 0, .12); } .g-awhy__title { max-width: 240px; font-family: var(--g-arial); font-weight: 400; font-size: 24px; line-height: 30px; color: #141414; } .g-awhy__text { font-family: var(--g-arial); font-size: 12px; line-height: 20px; color: #6e6e6e; } /* Sectors (area variant) */ .g-industries--area { margin-top: 50px; } /* Testimonials */ .g-atesti { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 100px var(--g-pad-x); background: #fafafa; } .g-atesti__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .g-atesti__titles { width: 478px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .g-atesti__title { width: 515px; max-width: 100%; font-family: var(--g-arial); font-weight: 700; font-size: 48px; line-height: 56px; color: #141414; text-transform: capitalize; } .g-atesti__score { width: 318px; flex: none; display: flex; flex-direction: column; gap: 16px; } .g-atesti__big { display: flex; align-items: flex-start; gap: 16px; color: #141414; } .g-atesti__num { font-family: "DM Serif Text", Georgia, serif; font-size: 48px; line-height: normal; white-space: nowrap; text-box: trim-both cap alphabetic; } .g-atesti__label { width: 210px; font-family: var(--g-arial); font-size: 18px; line-height: 26px; text-transform: capitalize; text-box: trim-both cap alphabetic; } .g-atesti__rating { display: flex; align-items: center; gap: 24px; } .g-atesti__sep { width: 1px; height: 24px; background: #c4c4c4; } .g-atesti__avg { font-family: var(--g-arial); font-size: 14px; line-height: 22px; color: #6e6e6e; text-transform: capitalize; } .g-stars { display: inline-flex; gap: 8px; } .g-stars img { width: 18px; height: 18px; } .g-slider { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; } .g-slider__track { width: 100%; display: flex; gap: 34px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; } .g-slider__track::-webkit-scrollbar { display: none; } .g-testi { position: relative; width: 404px; min-height: 264px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 22px 24px 26px; overflow: hidden; scroll-snap-align: start; background: #fff; border: 2px solid var(--g-mint); border-radius: 12px; transition: border-color .3s ease, transform .3s var(--g-ease); } .g-testi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--g-teal); transform-origin: left; transition: transform .4s var(--g-ease); } .g-testi:hover { border-color: rgba(25, 166, 144, .4); } .g-testi__who { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; } .g-testi__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .g-testi__who > div { display: flex; flex-direction: column; gap: 12px; } .g-testi__name { font-family: var(--g-arial); font-weight: 700; font-size: 18px; line-height: normal; color: #141414; text-transform: capitalize; white-space: nowrap; text-box: trim-both cap alphabetic; } .g-testi__role { font-family: var(--g-arial); font-size: 14px; line-height: normal; color: #6e6e6e; text-box: trim-both cap alphabetic; } .g-testi__place { font-family: var(--g-arial); font-weight: 700; font-size: 18px; line-height: normal; color: #141414; text-transform: capitalize; margin-bottom: 24px !important; text-box: trim-both cap alphabetic; } .g-testi__quote { margin-bottom: 20px !important; font-family: var(--g-inter); font-size: 14px; line-height: 22px; color: #6e6e6e; text-box: trim-both cap alphabetic; } .g-slider__nav { display: flex; align-items: center; gap: 6px; } .g-slider__btn { width: 24px; height: 24px; display: flex; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s ease, opacity .2s ease; } .g-slider__btn img { width: 24px; height: 24px; } .g-slider__btn:hover { transform: scale(1.15); } .g-slider__btn[disabled] { opacity: .35; cursor: default; transform: none; } .g-slider__prev img { transform: none; } .g-slider__bar { position: relative; width: 107px; height: 6px; overflow: hidden; border-radius: 2px; background: #dadada; } .g-slider__fill { position: absolute; left: 0; top: 0; width: 56px; height: 6px; border-radius: 2px; background: var(--g-teal); transition: left .3s var(--g-ease); } /* Other areas + CTA spacing */ .g-areapage > .g-cta--area { margin-top: 0 !important; } .g-areapage > .g-areasbar-wrap--area { position: relative; margin-top: -9px !important; background: transparent; } .g-areasbar-wrap--area { padding-top: 0; } .g-cta--area { padding-top: 0; padding-bottom: 100px; } .g-cta__text--area { width: 1039px; } @media (max-width: 1279px) { .g-ahero { height: auto; } .g-ahero__inner { display: flex; flex-direction: column; gap: 40px; padding: 64px var(--g-pad-x); } .g-ahero__copy, .g-ahero__stats { position: relative; left: auto; right: auto; top: auto; } .g-ahero__copy { width: auto; } .g-ahero__title, .g-ahero__text { width: auto; max-width: 606px; } .g-ahero__stats { width: 100%; max-width: 532px; height: auto; } .g-aintro__inner { flex-direction: column; align-items: stretch; gap: 48px; } .g-aintro__copy { width: 100%; height: auto; } .g-local { width: 100%; max-width: 620px; min-height: 0; } .g-awhy__card { width: calc(50% - 7px); } .g-atesti__head { flex-direction: column; align-items: flex-start; } .g-atesti__titles, .g-atesti__title { width: auto; } .g-testi { width: min(404px, 85vw); } .g-areapage > * + * { margin-top: 0 !important; } .g-industries--area { margin-top: 0; padding-block: 72px; } .g-areasbar-wrap--area { padding-top: 48px; } } @media (max-width: 781px) { .g-ahero__inner { padding-block: 48px; gap: 32px; } .g-ahero__copy { gap: 32px; } .g-ahero__title { font-size: 36px; line-height: 44px; } .g-ahero__text { font-size: 16px; line-height: 24px; } .g-ahero__stat { width: 33.33%; padding: 18px 6px; } .g-ahero__term { font-size: 24px; line-height: 30px; } .g-ahero__detail { font-size: 9px; letter-spacing: 1px; white-space: normal; } .g-aintro { padding-block: 56px; } .g-aintro__title { width: auto; font-size: 36px; line-height: 40px; } .g-aintro__text { font-size: 17px; line-height: 27px; } .g-local { padding: 24px 20px; } .g-awhy { padding-block: 56px; gap: 32px; } .g-awhy__card { width: 100%; height: auto; min-height: 160px; padding: 28px 20px; } .g-atesti { padding-block: 56px; } .g-atesti__titles { width: auto; } .g-atesti__title { font-size: 34px; line-height: 40px; } .g-atesti__score { width: auto; } .g-cta__text--area { width: auto; } .g-cta--area { padding-bottom: 56px; } } /* ===== Valuation app (/get-a-valuation/) ===== */ .g-valpage { min-height: 100vh; background: #fff; } .g-val { font-family: var(--g-gilroy); color: #000; } .g-val [hidden] { display: none !important; } .g-val__top { position: relative; height: 175px; display: flex; align-items: center; justify-content: center; background: var(--g-teal-dark); } .g-val__logo { position: absolute; left: max(80px, calc(50% - 640px)); top: 52px; width: 145px; height: 72.5px; } .g-val__logo { display: flex; align-items: center; justify-content: center; width: 168px; height: 92px; padding: 10px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); top: 41px; } .g-val__logo img { width: 100%; height: 100%; object-fit: contain; } .g-val__vehicle { position: relative; width: 931px; height: 102px; margin-left: 151px; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: #fff; border-radius: 16px; animation: g-val-in .4s var(--g-ease); } .g-val__make { width: 127px; height: 53px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f3f6f8; font-family: var(--g-arial); font-weight: 700; font-size: 18px; letter-spacing: 1px; color: #1d3b8b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; } .g-val__plate { height: 27px; flex: none; align-self: flex-start; margin-top: 18px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--g-mint); font-family: var(--g-plate); font-weight: 700; font-size: 14px; color: #00573f; white-space: nowrap; } .g-val__vtext { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 21px; } .g-val__vtitle { font-family: var(--g-gilroy); font-weight: 700; font-size: 28px; line-height: 1; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-val__vspecs { font-family: Poppins, var(--g-inter); font-size: 15px; line-height: normal; color: #333; } .g-val__notyours { margin-left: 18px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #333; } .g-val__notyours:hover { color: var(--g-teal); text-decoration: underline; } .g-val__change { height: 27px; flex: none; padding: 0 16px; border: 1px solid var(--g-teal); border-radius: 8px; background: #fff; cursor: pointer; font-family: var(--g-gilroy); font-weight: 700; font-size: 14px; color: #00573f; transition: background-color .2s ease, color .2s ease; } .g-val__change:hover { background: var(--g-teal); color: #fff; } .g-val__regform { width: 640px; max-width: calc(100% - 40px); margin-left: 151px; display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 16px; } .g-val__reginput { flex: 1; width: auto; height: 64px; font-size: 32px; } .g-val__regbtn { flex: none; padding: 0 22px; border: 0; border-radius: 8px; background: var(--g-teal); cursor: pointer; font-family: var(--g-gilroy); font-weight: 500; font-size: 20px; color: #fff; transition: background-color .2s ease; } .g-val__regbtn:hover { background: var(--g-teal-dark); } .g-val__regbtn:disabled, .g-val__btn:disabled { opacity: .7; cursor: progress; } .g-val__main { width: 808px; max-width: calc(100% - 40px); margin: 0 auto; padding: 52px 0 80px; } .g-val__alert { width: 586px; max-width: 100%; margin: 0 auto 24px !important; padding: 14px 18px; border-radius: 12px; background: #fdecec; font-size: 16px; color: #9b1c1c; } .g-val__step { display: flex; flex-direction: column; align-items: center; animation: g-val-in .45s var(--g-ease); } @keyframes g-val-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .g-val__h { width: auto; max-width: 100%; text-align: center; margin-bottom: 30px !important; font-family: var(--g-arial); font-weight: 700; font-size: 36px; line-height: 1.25; color: #000; outline: none; } .g-val__h--center { width: auto; text-align: center; } .g-val__lead { margin: -14px 0 32px !important; font-family: Poppins, var(--g-inter); font-size: 18px; line-height: 25.6px; color: #333; text-align: center; } .g-val__form { width: 586px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; margin: 0; } .g-val__input { width: 100%; height: 70px; padding: 0 25px; border: 2px solid transparent; border-radius: 16px; background: rgba(241, 241, 241, .5); font-family: var(--g-gilroy); font-size: 24px; color: #000; outline: none; box-sizing: border-box; transition: border-color .2s ease, background-color .2s ease; } .g-val__input::placeholder { color: #5f6574; opacity: 1; } .g-val__input:focus { border-color: var(--g-teal); background: #fff; } .g-val__check { display: flex; align-items: center; gap: 8px; margin-top: -4px; cursor: pointer; font-size: 19px; color: #5f6574; } .g-val__check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .g-val__box { width: 24px; height: 24px; flex: none; border: 1.6px solid var(--g-teal); border-radius: 5px; background: var(--g-mint); transition: background-color .2s ease; } .g-val__check input:checked + .g-val__box { background: var(--g-teal) url("assets/images/icon-val-check.svg") center / 14px no-repeat; } .g-val__check input:focus-visible + .g-val__box { outline: 3px solid var(--g-teal); outline-offset: 2px; } .g-val__btn { width: 586px; max-width: 100%; height: 70px; border: 0; border-radius: 5px; background: var(--g-teal); cursor: pointer; font-family: var(--g-gilroy); font-weight: 500; font-size: 24px; color: #fff; white-space: pre; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .g-val__btn:hover { background: var(--g-teal-dark); box-shadow: 0 10px 24px rgba(25, 166, 144, .3); transform: translateY(-1px); } .g-val__info { width: 586px; max-width: 100%; margin-top: 24px; padding: 24px 40px; border-radius: 16px; background: var(--g-mint); text-align: center; } .g-val__info-title { font-family: var(--g-gilroy); font-weight: 700; font-size: 24px; line-height: 1.3; } .g-val__info-text { margin-top: 10px !important; font-family: Poppins, var(--g-inter); font-size: 18px; line-height: 25.6px; } .g-val__trust { width: 698px; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin: 40px 0 0 !important; padding: 16px !important; list-style: none; border: 1px solid #e5e7eb; border-radius: 16px; background: #f9fafb; } .g-val__trust li:first-child { width: 186px; } .g-val__trust li { display: flex; align-items: center; gap: 10px; font-family: var(--g-arial); font-weight: 700; font-size: 15px; color: #111827; } .g-val__tick { width: 24px; height: 24px; flex: none; border-radius: 12px; background: #30b99a url("assets/images/icon-val-check.svg") center / 14px no-repeat; } /* Vehicle form */ .g-val__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 0; } .g-val__field { display: flex; flex-direction: column; gap: 8px; } .g-val__field label { font-family: var(--g-gilroy); font-weight: 500; font-size: 16px; color: #111827; } .g-val__field input, .g-val__field select { width: 100%; height: 58px; padding: 0 18px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; font-family: var(--g-gilroy); font-size: 18px; color: #000; outline: none; box-sizing: border-box; transition: border-color .2s ease, box-shadow .2s ease; } .g-val__field select { appearance: none; cursor: pointer; background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23767c8c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center / 12px 8px no-repeat; } .g-val__field input::placeholder { color: #5f6574; } .g-val__field input:focus, .g-val__field select:focus { border-color: var(--g-teal); box-shadow: 0 0 0 3px rgba(25, 166, 144, .15); background-color: #fff; } .g-val__btn--grid { grid-column: 1 / -1; width: 100%; margin-top: 12px; } .g-val__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Calculating */ .g-val__calc { width: 586px; max-width: 100%; display: flex; flex-direction: column; align-items: center; padding: 40px 0; } .g-val__spinner { width: 64px; height: 64px; margin-bottom: 28px; border: 5px solid var(--g-mint); border-top-color: var(--g-teal); border-radius: 50%; animation: g-spin .9s linear infinite; } @keyframes g-spin { to { transform: rotate(360deg); } } .g-val__tasks { width: 100%; display: flex; flex-direction: column; gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; } .g-val__tasks li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; font-size: 17px; color: #555d6b; transition: color .3s ease, border-color .3s ease, background-color .3s ease; } .g-val__tasks em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--g-teal); opacity: 0; transition: opacity .3s ease; } .g-val__task-dot { width: 22px; height: 22px; flex: none; border: 2px solid #d1d5db; border-radius: 50%; transition: all .3s ease; } .g-val__tasks li.is-active { color: #111827; border-color: var(--g-teal); } .g-val__tasks li.is-active .g-val__task-dot { border-color: var(--g-teal); border-top-color: transparent; animation: g-spin .8s linear infinite; } .g-val__tasks li.is-done { color: #111827; background: #f4fffa; } .g-val__tasks li.is-done .g-val__task-dot { border-color: var(--g-teal); background: var(--g-teal) url("assets/images/icon-val-check.svg") center / 12px no-repeat; } .g-val__tasks li.is-done em { opacity: 1; } /* Result */ .g-val__result { width: 808px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: .584px solid #f3f4f6; border-radius: 18.938px; background: #f6f6f6; box-shadow: 0 .789px 2.367px rgba(0, 0, 0, .1), 0 .789px 1.578px -.789px rgba(0, 0, 0, .1); } .g-val__specs { padding: 18.938px 22px 22px; } .g-val__specs-title { padding-bottom: 13px; font-family: var(--g-inter); font-size: 20px; line-height: 1.3; color: #030712; } .g-val__dl { margin: 0 0 16px; } .g-val__dl div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9.5px 0 10px; border-bottom: .584px solid #eceef1; } .g-val__dl dt { font-weight: 500; font-size: 14px; color: #555d6b; } .g-val__dl dd { margin: 0; font-weight: 500; font-size: 16px; color: #101828; text-align: right; } .g-val__perks { display: flex; flex-direction: column; gap: 11.5px; margin: 0 !important; padding: 0 !important; list-style: none; } .g-val__perks li { display: flex; align-items: center; gap: 11.5px; font-family: var(--g-inter); font-size: 13px; color: #555d6b; } .g-val__perks li::before { content: ""; width: 21.3px; height: 21.3px; flex: none; background: url("assets/images/icon-val-tick-1.svg") center / contain no-repeat; } .g-val__price { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 28.4px 25.25px; background: #fff; } .g-val__range { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 12px; font-family: var(--g-gilroy); font-weight: 700; font-size: clamp(38px, 3.25vw, 50px); line-height: 1; letter-spacing: -.025em; color: #000; } .g-val__range small { font-family: var(--g-inter); font-weight: 600; font-size: clamp(15px, 1.15vw, 18px); line-height: 1; letter-spacing: .4px; text-transform: uppercase; color: #000; } .g-val__exvat { font-family: var(--g-inter); font-weight: 600; font-size: 12px; line-height: 18px; color: #555d6b; } .g-val__scale { padding-top: 25px; } .g-val__track { position: relative; height: 4.73px; border-radius: 99px; background: #f3f4f6; } .g-val__fill { position: absolute; top: 0; height: 4.73px; border-radius: 99px; background: var(--g-teal); transition: width 1s var(--g-ease); } .g-val__knob { position: absolute; top: -2.4px; width: 9.5px; height: 9.5px; margin-left: -4.75px; border-radius: 50%; box-shadow: 0 .8px 2.4px rgba(0, 0, 0, .1); transition: left 1s var(--g-ease); } .g-val__knob--a { border: 1.17px solid var(--g-teal); background: #fff; } .g-val__knob--b { background: var(--g-teal); } .g-val__scale-labels { display: flex; justify-content: space-between; padding-top: 6.3px; font-size: 11px; line-height: 12px; color: #555d6b; } .g-val__scale-labels span:nth-child(2) { color: #364153; } .g-val__note { margin-top: 12px !important; padding: 12.6px 12.6px 12.6px 32px; border-radius: 12.6px; background: #f9fafb url("assets/images/icon-val-info.svg") 12px 14px / 11px no-repeat; font-family: var(--g-inter); font-size: 12px; line-height: 1.5; color: #555d6b; } .g-val__noest { font-family: var(--g-arial); font-weight: 700; font-size: 26px; line-height: 1.25; color: #030712; } .g-val__noest-sub { margin-top: 10px !important; font-family: var(--g-inter); font-size: 15px; line-height: 1.5; color: #555d6b; } .g-val__btn--small { width: 100%; height: 48px; margin-top: 12px; border-radius: 12.6px; font-size: 16px; white-space: normal; } .g-val__next { width: 808px; max-width: 100%; display: flex; align-items: center; gap: 32px; margin-top: 24px; padding: 20px 17px 20px 21px; border: 1px solid var(--g-teal); border-radius: 12px; background: var(--g-mint); transition: box-shadow .3s ease; } .g-val__next.is-pulse { box-shadow: 0 0 0 6px rgba(25, 166, 144, .25); } .g-val__next-intro { width: 256px; flex: none; padding-right: 32px; border-right: 1px solid rgba(25, 166, 144, .5); } .g-val__next-title { font-family: var(--g-arial); font-weight: 700; font-size: 20px; line-height: 1.3; color: #000; } .g-val__next-text { margin-top: 10px !important; font-family: var(--g-arial); font-size: 14px; line-height: 22.75px; color: #595959; } .g-val__next-actions { flex: 1; display: flex; flex-direction: column; gap: 16px; } .g-val__next-row { display: flex; align-items: center; gap: 13px; } .g-val__next-row > div { flex: 1; } .g-val__next-icon { width: 39px; height: 39px; flex: none; border-radius: 22.7px; background: var(--g-teal) center / 24px no-repeat; } .g-val__next-icon--cal { background-image: url("assets/images/icon-val-calendar.svg"); } .g-val__next-icon--phone { background-image: url("assets/images/icon-val-phone.svg"); } .g-val__next-h { font-family: var(--g-arial); font-weight: 700; font-size: 16px; color: #000; } .g-val__next-p { margin-top: 4px !important; font-family: var(--g-arial); font-size: 14px; color: #595959; } .g-val__ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 140px; height: 36px; flex: none; border: 1px solid var(--g-teal); border-radius: 8px; background: #fff; cursor: pointer; font-family: var(--g-gilroy); font-weight: 500; font-size: 14px; color: var(--g-teal); text-decoration: none; transition: background-color .2s ease, color .2s ease; } .g-val__ghost::after { content: ""; width: 11px; height: 11px; background: url("assets/images/icon-val-arrow-teal.svg") center / contain no-repeat; } .g-val__ghost:hover { background: var(--g-teal); color: #fff; } .g-val__ghost:hover::after { filter: brightness(0) invert(1); } /* Book a call */ .g-val__call { width: 586px; max-width: 100%; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 32px; border: 1px solid #e5e7eb; border-radius: 16px; background: #f9fafb; } .g-val__call-h { font-family: var(--g-arial); font-weight: 700; font-size: 20px; } .g-val__call-label { font-weight: 500; font-size: 16px; color: #111827; } .g-val__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .g-val__slot { height: 46px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; cursor: pointer; font-family: var(--g-gilroy); font-weight: 500; font-size: 15px; color: #111827; transition: all .2s ease; } .g-val__slot:hover { border-color: var(--g-teal); } .g-val__slot.is-selected { border-color: var(--g-teal); background: var(--g-teal); color: #fff; } .g-val__call .g-val__btn { width: 100%; margin-top: 6px; } .g-val__back { align-self: center; border: 0; background: none; cursor: pointer; font-family: var(--g-gilroy); font-size: 16px; color: #5f6574; } .g-val__back:hover { color: var(--g-teal); } .g-val__done { width: 586px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 32px; border: 1px solid var(--g-teal); border-radius: 16px; background: var(--g-mint); text-align: center; } .g-val__done-icon { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 50%; background: var(--g-teal) url("assets/images/icon-val-check.svg") center / 26px no-repeat; animation: g-val-pop .5s var(--g-ease); } @keyframes g-val-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .g-val__done .g-val__ghost { margin-top: 16px; width: auto; padding: 0 18px; } @media (max-width: 1279px) { .g-val__top { height: auto; flex-direction: column; gap: 20px; padding: 24px 20px; } .g-val__logo { position: static; } .g-val__vehicle, .g-val__regform { margin-left: 0; width: 100%; max-width: 931px; } } @media (max-width: 781px) { .g-val__vehicle { height: auto; flex-wrap: wrap; gap: 12px; padding: 16px; } .g-val__make { width: 90px; height: 40px; font-size: 14px; } .g-val__plate { margin-top: 0; align-self: center; } .g-val__vtext { flex-basis: 100%; gap: 8px; } .g-val__vtitle { font-size: 22px; white-space: normal; } .g-val__vspecs { font-size: 14px; } .g-val__change { position: absolute; right: 16px; top: 22px; } .g-val__regform { flex-direction: column; } .g-val__regbtn { height: 56px; } .g-val__main { padding-top: 32px; } .g-val__h { font-size: 28px; } .g-val__lead { font-size: 16px; } .g-val__input, .g-val__btn { height: 60px; font-size: 20px; } .g-val__info { padding: 20px; } .g-val__info-title { font-size: 20px; } .g-val__info-text { font-size: 16px; } .g-val__grid { grid-template-columns: minmax(0, 1fr); } .g-val__result { grid-template-columns: minmax(0, 1fr); } .g-val__price { order: -1; } .g-val__range { gap: 7px; font-size: clamp(28px, 8vw, 36px); line-height: 1; } .g-val__range small { font-size: 13px; } .g-val__next { flex-direction: column; align-items: stretch; gap: 20px; } .g-val__next-intro { width: auto; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(25, 166, 144, .5); } .g-val__next-row { flex-wrap: wrap; } .g-val__next-row .g-val__ghost { width: 100%; } .g-val__call { padding: 20px; } .g-val__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Long make names (e.g. MERCEDES-BENZ) fit inside the badge */ .g-val__make { font-size: 14px; letter-spacing: .3px; line-height: 1.15; white-space: normal; text-align: center; overflow-wrap: anywhere; text-overflow: clip; } /* ========================================================================== Responsive (Figma is 1440 desktop; below that we adapt layouts) ========================================================================== */ @media (max-width: 1279px) { .g-mainnav__cta { left: auto; right: 40px; } .g-logo { left: 40px; } .g-hero__inner { gap: 40px; } .g-hero__media { width: auto; flex: 1 1 0; min-width: 0; } } @media (max-width: 1279px) { :root { --g-pad-x: 40px; } .g-btn--outline .wp-block-button__link { width: auto; font-size: 16px; padding-inline: 18px; } .g-announce__phone { left: auto; right: 40px; transform: none; } /* Hero */ .g-hero { padding: 40px var(--g-pad-x) 64px; } .g-hero::before { left: auto; right: -80px; top: -49px; opacity: .9; } .g-hero__inner { flex-direction: column; align-items: stretch; gap: 40px; } .g-hero__copy, .g-hero__intro { width: 100%; } .g-hero__title { width: auto; max-width: 620px; } .g-hero__media { width: 100%; max-width: 760px; margin-inline: auto; } /* Why */ .g-why { margin-top: 48px; padding-block: 72px 80px; } .g-why__intro { padding: 0; min-height: 0; } .g-why__row { flex-direction: column; gap: 24px; } .g-why__title, .g-statement { width: 100%; } .g-features { flex-wrap: wrap; justify-content: center; gap: 24px; } .g-feature { width: calc(50% - 12px); } /* Process: drop the connector artwork and stack cards simply */ .g-process { padding: 72px var(--g-pad-x) 80px; } .g-steps { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; } .g-step, .g-step--flip { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; } .g-step__deco { display: none; } .g-steps .g-step .g-step__icon { order: -1; position: relative; left: auto; top: auto; z-index: 1; margin-bottom: -42px; } .g-step__card, .g-step--flip .g-step__card { position: relative; left: auto; top: auto; width: 100%; height: auto; flex: 1; padding: 64px 20px 36px; } .g-step__body, .g-step--flip .g-step__body { position: static; width: 100%; transform: none; gap: 24px; } .g-step__title, .g-step--2 .g-step__title { width: auto; font-size: 26px; line-height: 32px; } .g-step__text, .g-step--2 .g-step__text, .g-step--3 .g-step__text { width: auto; font-size: 18px; } /* Admin / finance */ .g-admin { padding: 72px var(--g-pad-x); } .g-finance { margin-top: 0; padding: 72px var(--g-pad-x) 48px; } .g-title { font-size: 40px; } .g-title--promise { white-space: normal; } /* FAQ */ .g-faqs { padding-inline: var(--g-pad-x); } .g-faqs__cols { flex-wrap: wrap; } .g-faqs__col { width: auto; flex: 1 1 320px; } /* Promise */ .g-promise { padding: 72px var(--g-pad-x); } .g-promise__inner { flex-direction: column; align-items: stretch; gap: 48px; } .g-promise__copy { width: 100%; } .g-promise__img { width: 100%; height: auto; aspect-ratio: 596 / 414; } /* CTA */ .g-cta { padding: 64px var(--g-pad-x); } .g-cta__box { height: auto; padding: 56px 24px; } .g-cta__content { width: 100%; transform: none; } .g-cta__text { width: auto; max-width: 720px; } /* Contact */ .g-contact__inner { flex-direction: column; align-items: stretch; gap: 24px; } .g-contact__form, .g-contact__side { width: 100%; } .g-form__row { grid-template-columns: 1fr 1fr; } .g-form__submit { width: 100%; } /* Footer */ .g-footer__top { min-height: 0; padding-bottom: 56px; } .g-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; transform: none; } .g-footer__col--brand, .g-footer__col--quick, .g-footer__col--policies, .g-footer__col--contact { width: auto; } } @media (max-width: 1100px) { .g-mainnav__menu { left: 196px; transform: translateY(-50%); } } @media (max-width: 1024px) { .g-announce::before { width: calc(100% - 200px); } .g-announce__text { width: calc(100% - 260px); } .g-hero::before { display: none; } .g-nav .wp-block-navigation__submenu-container { left: auto !important; right: -40px; } .g-nav .wp-block-navigation-item__content { padding: 0 10px; } .g-icards { flex-direction: column; align-items: stretch; } .g-steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .g-title { font-size: 36px; } .g-title--44 { font-size: 34px; } } @media (max-width: 781px) { :root { --g-pad-x: 20px; } /* Header */ .g-announce::before { width: 100%; left: 0; transform: none; border: 0; border-radius: 0; } .g-announce__text { display: none; } .g-announce__phone { right: 50%; transform: translateX(50%); } .g-mainnav { height: 72px; } .g-logo { left: 20px; top: 8px; } .g-logo img { width: 112px; height: 56px; } .g-mainnav__cta { left: auto; right: 60px; top: 50%; transform: translateY(-50%); } .g-btn--outline .wp-block-button__link { height: 40px; padding: 8px 12px; border-width: 2px; border-radius: 10px; font-size: 13px; line-height: 16px; } .g-mainnav__menu { left: auto; right: 12px; transform: translateY(-50%); } .g-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 10px 0; font-size: 18px; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { opacity: 1; transform: none; box-shadow: none; padding: 0 0 0 16px; } /* Hero */ .g-hero { padding: 28px var(--g-pad-x) 48px; } .g-hero::before { display: none; } .g-hero__eyebrow { white-space: normal; font-size: 13px; line-height: 18px; } .g-hero__title { font-size: 36px; line-height: 44px; } .g-hero__text { width: auto; font-size: 16px; line-height: 24px; } .g-chips { flex-wrap: wrap; } .g-chips li { width: auto !important; height: 36px; } .g-valform { height: auto; padding: 20px; } .g-valform__title { position: static; margin-bottom: 16px; font-size: 22px; line-height: 28px; } .g-valform__row { position: static; width: 100%; flex-direction: column; gap: 12px; } .g-plate, .g-valform__btn { width: 100%; height: 60px; } .g-plate { font-size: 30px; } .g-valform__btn { font-size: 20px; } /* Sections */ .g-logos { height: auto; padding: 16px 0; } .g-why { margin-top: 24px; padding-block: 56px; } .g-why__title { font-size: 40px; } .g-statement { font-size: 19px; padding: 23px; } .g-feature { width: 100%; } .g-feature__card { height: auto; } .g-feature__body { position: static; transform: none; width: auto; height: auto; padding: 56px 20px 28px; } .g-feature__title { font-size: 22px; } .g-process, .g-admin, .g-promise { padding-block: 56px; } .g-head--center, .g-head__titles { gap: 20px; } .g-title, .g-title--44, .g-title--promise { font-size: 30px; } .g-sub { font-size: 16px; line-height: 24px; } .g-icard { padding: 23px; } .g-finance { padding: 56px var(--g-pad-x) 40px; } .g-faqs__col { flex-basis: 100%; } .g-check { min-height: 0; padding: 16px; gap: 16px; font-size: 16px; } .g-check::before { width: 36px; height: 36px; } .g-cta { padding-block: 40px; } .g-cta__box { border-radius: 24px; padding: 40px 16px; background-size: cover; } .g-cta__title { font-size: 30px; line-height: 36px; white-space: normal; } .g-cta__titles { gap: 16px; } .g-cta__text { font-size: 18px; line-height: 24px; } .g-cta__text br { display: none; } .g-ctaform { width: 100%; height: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .g-ctaform input { position: static; width: 100%; height: 56px; padding-left: 16px; } .g-ctaform button { position: static; width: 100%; height: 56px; } .g-contact__form { padding: 20px; } .g-form__row { grid-template-columns: 1fr; } .g-info { padding: 24px; } .g-info__value { white-space: normal; word-break: break-word; } /* Footer */ .g-footer__top { padding-top: 48px; } .g-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; } .g-footer__about, .g-footer__line { width: auto; white-space: normal; } .g-footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 20px; } } @media (prefers-reduced-motion: reduce) { .g-marquee__track { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Laptop widths (1280–1439): scale the 1440 desktop layout proportionally so it stays pixel-faithful */ @media (min-width: 1400px) and (max-width: 1439px) { .wp-site-blocks { zoom: .972; } } @media (min-width: 1360px) and (max-width: 1399px) { .wp-site-blocks { zoom: .944; } } @media (min-width: 1320px) and (max-width: 1359px) { .wp-site-blocks { zoom: .916; } } @media (min-width: 1280px) and (max-width: 1319px) { .wp-site-blocks { zoom: .888; } } /* ===== Revision fixes ===== */ /* Home: "Focus on your business" cards equal height */ .g-admin .g-icards { align-items: stretch; } /* Home FAQ: show 5 per column, "View all" expands */ .g-faqs:not(.is-expanded) .g-faqs__col > .g-faq:nth-of-type(n+6) { display: none; } .g-faqs__more { display: flex; justify-content: center; padding-top: 8px; } .g-faqs__toggle { height: 50px; padding: 0 28px; border: 2px solid var(--g-teal); border-radius: 10px; background: #fff; cursor: pointer; font-family: var(--g-inter); font-weight: 600; font-size: 16px; color: var(--g-teal); transition: background-color .2s ease, color .2s ease; } .g-faqs__toggle:hover { background: var(--g-teal); color: #fff; } /* Contact map: interactive Google map */ .g-map { position: relative; height: 192px; overflow: hidden; border: .741px solid #f3f4f6; border-radius: 16px; background: #eef2f3; } .g-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .g-map .g-map__pin { position: absolute; right: 10px; bottom: 10px; left: auto; top: auto; z-index: 1; } .g-map__pin:hover { background: var(--g-teal); } /* Footer: SEO dropdowns, no social icons */ .g-footer__seo { display: flex; flex-wrap: wrap; gap: 16px; max-width: 1279px; margin: 0 auto; padding: 0 var(--g-pad-x) 40px; padding-inline: max(80px, calc((100% - 1279px) / 2)); } .g-footer__drop.wp-block-details { position: relative; margin: 0; border: 1px solid #dfe3e3; border-radius: 10px; background: #fff; font-family: var(--g-inter); } .g-footer__drop summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 240px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; color: #111; } .g-footer__drop summary::-webkit-details-marker { display: none; } .g-footer__drop summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--g-teal); border-bottom: 2px solid var(--g-teal); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; } .g-footer__drop[open] summary::after { transform: translateY(2px) rotate(-135deg); } .g-footer__drop-list { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 0 8px 10px !important; list-style: none; } .g-footer__drop-list a { display: block; padding: 8px; border-radius: 6px; font-size: 13px; color: #333; } .g-footer__drop-list a:hover { background: var(--g-mint); color: var(--g-teal-dark); } .g-footer__bar { justify-content: flex-start; } /* Valuation: trust points in 3 equal, aligned columns */ .g-val__trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .g-val__trust li, .g-val__trust li:first-child { width: auto; justify-content: flex-start; font-size: 14px; line-height: 1.3; } /* Plain pages (Terms, Privacy, Cookies, etc.) */ .g-plain__hero { padding: 64px var(--g-pad-x); background: var(--g-teal-dark); } .g-plain__title { max-width: 860px; margin: 0 auto !important; font-family: var(--g-arial); font-weight: 700; font-size: 44px; line-height: 1.15; color: #fff; } .g-plain__content { max-width: 860px; margin: 0 auto; padding: 56px 20px 80px; font-family: var(--g-inter); font-size: 16px; line-height: 1.7; color: #444; } .g-plain__content h2 { margin: 40px 0 12px; font-family: var(--g-arial); font-size: 26px; color: #232323; } .g-plain__content h3 { margin: 28px 0 8px; font-family: var(--g-arial); font-size: 20px; color: #232323; } .g-plain__content p, .g-plain__content ul, .g-plain__content ol { margin: 0 0 16px; } .g-plain__content a { color: var(--g-teal-dark); text-decoration: underline; text-underline-offset: 3px; } /* Mobile menu: full-screen panel with visible Services list */ @media (max-width: 1024px) { .g-nav .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: 100000; padding: 88px 24px 32px !important; background: #fff !important; color: #111 !important; overflow-y: auto; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 0 !important; } .g-nav .is-menu-open .wp-block-navigation__container { flex-direction: column; align-items: stretch !important; gap: 0 !important; width: 100%; } .g-nav .is-menu-open .wp-block-navigation-item { width: 100%; padding: 0 !important; border-bottom: 1px solid #eef0f0; } .g-nav .is-menu-open .wp-block-navigation-item__content { display: block; padding: 16px 4px !important; font-size: 18px !important; font-weight: 600; color: #111 !important; } .g-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; } .g-nav .is-menu-open .wp-block-navigation__submenu-container { position: static !important; display: flex !important; flex-direction: column; min-width: 0 !important; width: 100% !important; padding: 0 0 10px 14px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: transparent !important; border: 0 !important; } .g-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; } .g-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 4px !important; font-size: 15px !important; font-weight: 500; color: var(--g-text) !important; } .g-nav .wp-block-navigation__responsive-container-close { top: 24px !important; right: 24px !important; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--g-mint); color: var(--g-teal-dark); } .g-nav .wp-block-navigation__responsive-container-open { display: flex !important; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--g-mint); color: var(--g-teal-dark); } .g-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .g-mainnav__menu { left: auto !important; right: 20px; transform: translateY(-50%) !important; } .g-mainnav__cta { right: 76px !important; left: auto !important; } } @media (max-width: 781px) { .g-mainnav__cta .wp-block-button__link { font-size: 12px !important; padding: 8px 10px !important; } .g-footer__seo { padding-inline: 20px; } .g-footer__drop.wp-block-details { width: 100%; } .g-val__trust { grid-template-columns: minmax(0, 1fr); } .g-plain__title { font-size: 32px; } } @media (max-width: 1024px) { .g-mainnav__menu { top: 14px !important; transform: none !important; } } @media (max-width: 781px) { .g-mainnav__menu { top: 14px !important; } } .g-footer__drop.wp-block-details[open] { z-index: 5; } .g-footer__drop-list { position: absolute; left: -1px; right: -1px; top: calc(100% - 6px); z-index: 5; padding: 6px 8px 10px !important; border: 1px solid #dfe3e3; border-top: 0; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, .08); } .g-footer__drop[open] { border-radius: 10px 10px 0 0; } @media (max-width: 1024px) { .g-nav .is-menu-open .wp-block-navigation-item, .g-nav .is-menu-open .wp-block-navigation-item__content { text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } } /* Inline SEO links inside body text */ a.g-inlink { color: inherit; text-decoration: underline; text-decoration-color: rgba(25, 166, 144, .55); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; } a.g-inlink:hover { color: var(--g-teal-dark); text-decoration-color: var(--g-teal); } .g-footer__about a.g-inlink:hover { color: var(--g-teal-dark); } /* ===== QA run 1 ===== */ /* Areas hub */ .g-ahub__list { padding: 80px var(--g-pad-x); background: #fff; } .g-hubcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto !important; padding: 0 !important; list-style: none; } .g-hubcard { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 24px; border: 1px solid rgba(19, 128, 111, .25); border-left: 4px solid var(--g-teal); border-radius: 12px; background: #fff; box-shadow: 0 11px 40px rgba(0, 0, 0, .06); transition: transform .3s var(--g-ease), box-shadow .3s ease; } .g-hubcard:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, .1); } .g-hubcard__name { font-family: var(--g-arial); font-weight: 700; font-size: 24px; color: #141414; } .g-hubcard__towns { font-family: var(--g-inter); font-size: 14px; line-height: 1.5; color: #555; } .g-hubcard__go { margin-top: auto; font-family: var(--g-inter); font-weight: 600; font-size: 14px; color: var(--g-teal); } .g-areahub .g-cta { padding-top: 0; padding-bottom: 100px; } /* Mobile menu: keep the close button clear of the list */ @media (max-width: 1024px) { .g-nav .is-menu-open .wp-block-navigation__responsive-container-content { margin-top: 40px !important; } .g-nav .wp-block-navigation__responsive-container-close { z-index: 2; background: var(--g-mint); box-shadow: 0 0 0 6px #fff; } } /* Contact info title is now an H2 (same look) */ h2.g-info__title { font-family: var(--g-gilroy); font-weight: 400; font-size: 20px; line-height: 28px; color: #fff; } /* Editor only: simple flow layout for the header so it doesn't overlap while editing */ .editor-styles-wrapper .g-mainnav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: auto; min-height: 92px; padding: 10px 40px; } .editor-styles-wrapper .g-logo, .editor-styles-wrapper .g-mainnav__menu, .editor-styles-wrapper .g-mainnav__cta { position: static !important; transform: none !important; } .editor-styles-wrapper .g-announce__phone { right: 40px; left: auto; transform: none; } /* Legal pages */ .g-legal { display: flex; flex-direction: column; } .g-legal .g-legal__updated { margin: 0 0 24px; font-size: 14px; color: #6b6b6b; } .g-legal .g-legal__h2 { margin: 40px 0 14px !important; font-family: var(--g-arial); font-weight: 700; font-size: 24px; line-height: 1.3; color: #232323; } .g-legal .g-legal__h3 { margin: 26px 0 10px !important; font-family: var(--g-arial); font-weight: 700; font-size: 18px; line-height: 1.35; color: #232323; } .g-legal .g-legal__p { margin: 0 0 16px !important; } .g-legal ul.g-legal__list, .g-legal ol.g-legal__toc { margin: 0 0 18px !important; padding-left: 22px !important; list-style: disc; } .g-legal ol.g-legal__toc { list-style: decimal; } .g-legal li { margin-bottom: 8px; } .g-legal a { color: var(--g-teal-dark); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; } /* QA run 2 */ .g-feature--svc { scroll-margin-top: 150px; } @media (max-width: 1024px) { /* Close button pinned top-right, list starts below it (no divider through the button) */ .g-nav .wp-block-navigation__responsive-container.is-menu-open { padding-top: 80px !important; } .g-nav .is-menu-open .wp-block-navigation__responsive-container-content { margin-top: 0 !important; } .g-nav .is-menu-open .wp-block-navigation__responsive-container-close { position: fixed !important; top: 18px !important; right: 18px !important; z-index: 100001; } } /* Hero photos (homepage + landing pages): one image, hero-vehicles.png, shown whole and as large as the frame allows */ .g-hero__img img, .g-lhero__img img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; object-position: center bottom; transform: none !important; } .g-hero__img, .g-lhero__img { background-size: contain !important; background-position: center bottom !important; background-repeat: no-repeat !important; } /* ========================================================================== GCG DESIGN SYSTEM (v2) — one source of truth for type, colour, spacing and components. Loaded last so it governs every page. Change tokens here. ========================================================================== */ :root { /* Fonts: Inter = primary (all headings + body). Gilroy = secondary (UI: nav, buttons, labels). */ --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-ui: Gilroy, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Legacy font variables now point at the system fonts. */ --g-inter: var(--font-body); --g-arial: var(--font-body); --g-gilroy: var(--font-body); /* Colours */ --c-ink: #17201f; /* headings */ --c-text: #48524f; /* body copy (7.9:1 on white) */ --c-muted: #5d6765; /* secondary copy (5.9:1 on white) */ --c-line: #e2e8e6; /* borders, dividers */ --c-surface: #f5f8f7; /* alternate section background */ --c-white: #ffffff; --g-teal: #13806f; /* brand / buttons / links (4.8:1) */ --g-teal-dark: #0e6b5d; /* hover, dark panels */ --g-mint: #e6f6f0; /* pills, soft panels */ --c-pill-ink: #0b5a4e; /* text on mint (7.4:1) */ --g-text: var(--c-text); /* Type scale (fluid: mobile → desktop) */ --fs-display: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); /* 36 → 56 hero H1 */ --fs-h1: clamp(2.125rem, 1.6rem + 1.6vw, 3rem); /* 34 → 48 page hero H1 */ --fs-h2: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); /* 28 → 40 section titles */ --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); /* 18 → 21 card titles */ --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.125rem); /* 17 → 18 intro text */ --fs-body: 1rem; /* 16 */ --fs-small: .875rem; /* 14 */ --fs-label: .8125rem; /* 13 eyebrows / pills */ --lh-tight: 1.12; --lh-heading: 1.2; --lh-body: 1.65; --ls-heading: -.02em; --ls-label: .08em; /* Spacing */ --space-section: clamp(56px, 2.5rem + 3.6vw, 96px); --space-head: clamp(32px, 1.5rem + 1.8vw, 48px); --gap-card: 24px; --radius-card: 14px; --radius-btn: 10px; --shadow-card: 0 10px 40px rgba(16, 24, 23, .07); --shadow-card-hover: 0 16px 48px rgba(16, 24, 23, .12); } body { font-family: var(--font-body); color: var(--c-text); } /* ---------- Typography roles ---------- */ /* Display (home + landing + service + area hero H1) */ .g-hero__title, .g-lhero__title, .g-sdhero__title, .g-ahero__title { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: var(--fs-display) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--ls-heading) !important; text-transform: none !important; } .g-hero__title, .g-lhero__title, .g-sdhero__title { color: var(--c-ink); } /* Page hero H1 (teal hero pages, legal pages) */ .g-pagehero__title, .g-plain__title { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: var(--fs-h1) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--ls-heading) !important; white-space: normal !important; } /* Section titles (H2) */ .g-title, .g-title--44, .g-title--promise, .g-title--svc, .g-title--nowrap, .g-why__title, .g-split__title, .g-team__h, .g-trusted__title, .g-scope__title, .g-lseo__title, .g-lsec__title, .g-lfaq__title, .g-sdexp__title, .g-sdben__h, .g-sdtrust__title, .g-aintro__title, .g-atesti__title, .g-val__h, .g-cta__title, .g-lcta__title, .g-sdcta__title { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--ls-heading) !important; text-transform: none !important; text-box: normal !important; white-space: normal !important; width: auto; max-width: 100%; } .g-title, .g-why__title, .g-split__title, .g-team__h, .g-trusted__title, .g-scope__title, .g-lseo__title, .g-lsec__title, .g-lfaq__title, .g-sdexp__title, .g-sdben__h, .g-sdtrust__title, .g-aintro__title, .g-atesti__title, .g-val__h { color: var(--c-ink); } .g-why__title { color: var(--c-ink) !important; } .g-cta__title, .g-lcta__title, .g-sdcta__title { color: #fff; } .g-valform__title, .g-lsec__sub, .g-call-h, .g-val__call-h { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 1.25rem !important; line-height: 1.3 !important; text-transform: none !important; color: var(--c-ink); } /* Card titles (H3) */ .g-feature__title, .g-icard__title, .g-team__title, .g-sdben__title, .g-awhy__title, .g-industry__title, .g-local__title, .g-hubcard__name, .g-val__next-title, .g-testi__name, .g-testi__place, .g-info__title, .g-val__specs-title, .g-noest, .g-val__noest { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: var(--fs-h3) !important; line-height: 1.3 !important; letter-spacing: -.01em !important; text-transform: none !important; text-box: normal !important; color: var(--c-ink); } .g-info__title { color: #fff; } .g-testi__name, .g-testi__place { font-size: 1.0625rem !important; } /* Lead / intro text */ .g-sub, .g-hero__text, .g-lhero__text, .g-sdhero__text, .g-pagehero__text, .g-ahero__text, .g-split__text, .g-lseo__text, .g-sdexp__text, .g-aintro__text, .g-scope__lead, .g-sdben__lead, .g-cta__text, .g-lcta__text, .g-sdcta__text, .g-val__lead, .g-val__info-text { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: var(--fs-lead) !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-box: normal !important; } .g-sub, .g-hero__text, .g-lhero__text, .g-sdhero__text, .g-split__text, .g-lseo__text, .g-sdexp__text, .g-aintro__text, .g-scope__lead, .g-sdben__lead, .g-val__lead { color: var(--c-text); } /* Body / card text */ .g-feature__text, .g-icard__text, .g-team__text, .g-sdben__text, .g-awhy__text, .g-industry__text, .g-local__text, .g-testi__quote, .g-check, .g-faq.wp-block-details > p, .g-lsec__subtext, .g-hubcard__towns, .g-val__next-text, .g-info__text, .g-stat__label, .g-bento__note, .g-val__noest-sub, .g-scope__list li, .g-aintro__list li, .g-types__t, .g-towns li, .g-val__perks li { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; letter-spacing: 0 !important; text-transform: none !important; text-box: normal !important; } .g-feature__text, .g-icard__text, .g-step__text, .g-team__text, .g-sdben__text, .g-awhy__text, .g-industry__text, .g-local__text, .g-testi__quote, .g-faq.wp-block-details > p, .g-lsec__subtext, .g-hubcard__towns, .g-scope__list li, .g-aintro__list li { color: var(--c-text); } .g-check { color: var(--c-ink); } .g-feature__text, .g-industry__text, .g-towns li, .g-val__perks li, .g-info__text { font-size: .9375rem !important; } .g-team__role { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: var(--fs-small) !important; text-box: normal !important; } /* Small print */ .g-scope__note, .g-val__note, .g-val__exvat, .g-atesti__avg, .g-footer__copy, .g-lsec__note { font-family: var(--font-body) !important; font-size: var(--fs-small) !important; text-transform: none !important; } /* Eyebrows / labels (text-only) */ .g-hero__eyebrow, .g-lhero__eyebrow, .g-sd-eyebrow, .g-faqs__label, .g-areasbar__label, .g-local__label, .g-info__label, .g-ahero__detail, .g-sd-eyebrow--13 { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: var(--fs-label) !important; line-height: 1.4 !important; letter-spacing: var(--ls-label) !important; text-transform: uppercase !important; white-space: normal; } .g-hero__eyebrow, .g-lhero__eyebrow, .g-sd-eyebrow, .g-faqs__label { color: var(--g-teal-dark); } .g-areasbar__label, .g-local__label { color: var(--c-muted); } .g-sd-eyebrow--white { color: #fff !important; } /* Section title pills — light green, small */ .g-pill, .g-pill--mint, .g-pill--start, .g-pill--faq, .g-tag, .g-badge, .g-sd-badge { display: inline-flex !important; align-items: center; height: auto !important; min-height: 0 !important; width: auto !important; padding: 7px 14px !important; border: 0 !important; border-radius: 999px !important; background: var(--g-mint) !important; filter: none !important; box-shadow: none !important; font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: var(--fs-label) !important; line-height: 1.3 !important; letter-spacing: var(--ls-label) !important; text-transform: uppercase !important; color: var(--c-pill-ink) !important; white-space: nowrap; } /* Numbers / stats (replaces DM Serif + Spline Sans) */ .g-stat__num, .g-bento__num, .g-atesti__num, .g-ahero__term { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-box: normal !important; } .g-ahero__term { font-size: 1.75rem !important; line-height: 1.2 !important; } .g-stat__num { font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem) !important; color: var(--c-ink); } .g-faq summary::before, .g-types__n, .g-sdben__num, .g-icard__num { font-family: var(--font-body) !important; font-weight: 600 !important; } /* ---------- Components ---------- */ /* Buttons (one family: primary solid, secondary outline, white on teal) */ .g-btn .wp-block-button__link, .g-valform__btn, .g-ctaform button, .g-form__submit, .g-val__btn, .g-val__regbtn, .g-faqs__toggle, .g-val__ghost, .g-sdbtn .wp-block-button__link, .g-btn--footer .wp-block-button__link, .g-btn--local .wp-block-button__link, .g-btn--scope .wp-block-button__link { font-family: var(--font-ui) !important; font-weight: 500 !important; letter-spacing: .01em !important; text-transform: none !important; border-radius: var(--radius-btn) !important; } .g-btn--white .wp-block-button__link, .g-valform__btn, .g-ctaform button, .g-form__submit, .g-val__btn, .g-sdbtn .wp-block-button__link, .g-btn--local .wp-block-button__link, .g-btn--scope .wp-block-button__link, .g-val__regbtn { min-height: 52px; font-size: 1.0625rem !important; line-height: 1.2 !important; } .g-btn--white .wp-block-button__link { width: auto !important; height: auto !important; padding: 16px 28px !important; font-size: 1.125rem !important; } .g-valform__btn { font-size: 1.125rem !important; } .g-valform__btn img { width: 22px; height: 22px; } .g-sdbtn .wp-block-button__link { padding: 15px 24px !important; } .g-btn--outline .wp-block-button__link { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: 1rem !important; letter-spacing: .02em !important; border-width: 2px !important; border-radius: var(--radius-btn) !important; } .g-btn--footer .wp-block-button__link { font-size: .9375rem !important; } .g-feature__link { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: 1rem !important; text-box: normal !important; } .g-feature__link a { text-transform: none; } .g-feature__link a::first-letter { text-transform: uppercase; } .g-faqs__toggle { font-size: 1rem !important; } /* Cards: one radius, border, shadow */ .g-feature__card, .g-icard, .g-team__card, .g-sdben__card, .g-awhy__card, .g-industry, .g-hubcard, .g-testi, .g-check, .g-local, .g-types { border-radius: var(--radius-card) !important; } .g-feature__card, .g-icard, .g-team__card, .g-sdben__card, .g-hubcard, .g-testi, .g-industry, .g-types, .g-local { border: 1px solid var(--c-line) !important; box-shadow: var(--shadow-card) !important; filter: none !important; } .g-feature:hover .g-feature__card, .g-icard:hover, .g-team__card:hover, .g-sdben__card:hover, .g-hubcard:hover { box-shadow: var(--shadow-card-hover) !important; border-color: rgba(19, 128, 111, .45) !important; } .g-awhy__card { box-shadow: var(--shadow-card) !important; } /* Why-choose-us cards: natural height (no clipped text), equal per row */ .g-why__intro { min-height: 0 !important; padding: 0 !important; gap: 20px !important; } .g-why__row { display: block !important; } .g-why__title { width: auto !important; } .g-features { align-items: stretch !important; gap: var(--gap-card) !important; justify-content: flex-start !important; } .g-feature { display: flex; flex-direction: column; flex: 1 1 0 !important; width: auto !important; min-width: 0; } .g-feature__card { flex: 1; height: auto !important; min-height: 0 !important; } .g-feature__body, .g-feature--svc .g-feature__body { position: static !important; transform: none !important; width: auto !important; height: auto !important; padding: 56px 24px 28px !important; gap: 10px !important; text-transform: none !important; } .g-feature--svc .g-feature__text { height: auto !important; display: block !important; } .g-feature--svc .g-feature__title { white-space: normal !important; } .g-feature--svc .g-feature__body { gap: 12px !important; } .g-feature--svc .g-feature__link { margin-top: 6px; } .g-svcgrid__cards .g-feature { flex: 0 1 calc(25% - 18px) !important; } .g-statement { display: none !important; } /* removed section (client request) */ /* Promise checks */ .g-check { min-height: 0 !important; padding: 22px 24px 22px 84px !important; border-left: 4px solid var(--g-teal) !important; } .g-check::before { width: 40px !important; height: 40px !important; left: 24px !important; } /* Forms */ .g-field label, .g-val__field label { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: var(--fs-small) !important; color: var(--c-ink); } .g-field input, .g-field select, .g-field textarea, .g-val__field input, .g-val__field select, .g-val__input { font-family: var(--font-body) !important; font-size: var(--fs-body) !important; border-radius: var(--radius-btn) !important; } .g-val__input { font-size: 1.125rem !important; } .g-ctaform input { font-family: var(--font-ui) !important; font-weight: 500 !important; } .g-val__check { font-size: var(--fs-body) !important; color: var(--c-text) !important; } /* Valuation page: trust points are information, not headings */ .g-val__trust li, .g-val__trust li:first-child { font-family: var(--font-body) !important; font-weight: 400 !important; font-size: .9375rem !important; line-height: 1.45 !important; color: var(--c-text) !important; } .g-val__vspecs, .g-val__vtitle, .g-val__specs-title { font-family: var(--font-body) !important; } .g-val__vtitle { font-weight: 700 !important; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; } .g-val__range { font-family: var(--font-body) !important; letter-spacing: -.02em !important; } .g-val__info-title { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 1.25rem !important; } .g-val__next-h { font-family: var(--font-body) !important; font-weight: 600 !important; font-size: var(--fs-body) !important; } .g-val__next-p, .g-val__dl dt, .g-val__dl dd { font-family: var(--font-body) !important; } .g-val__slot { font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: .9375rem !important; border-radius: var(--radius-btn) !important; } .g-val__tasks li { font-family: var(--font-body) !important; font-size: var(--fs-body) !important; } /* FAQ */ .g-faq summary { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: var(--fs-body) !important; line-height: 1.45 !important; color: var(--c-ink) !important; } .g-faq--landing summary { font-weight: 600 !important; font-size: 1.0625rem !important; } /* Google reviews badge (replaces Trustpilot) */ .g-greview { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); color: var(--c-ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .g-greview:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: rgba(19, 128, 111, .4); } .g-greview__logo { width: 32px; height: 32px; flex: none; } .g-greview__text { display: flex; flex-direction: column; gap: 2px; } .g-greview__title { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-ink); } .g-greview__row { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-text); } .g-greview__score { font-weight: 700; color: var(--c-ink); } .g-greview__stars { color: #e7a500; letter-spacing: 1px; } /* ---------- Colour consistency ---------- */ .g-process, .g-admin, .g-promise, .g-team, .g-scope, .g-lsec, .g-sdben, .g-sdtrust, .g-awhy, .g-atesti, .g-trusted, .g-logos { background: var(--c-surface) !important; } .g-footer { background: var(--c-surface) !important; } .g-hero__eyebrow { color: var(--g-teal-dark) !important; } .g-scope__list li, .g-aintro__list li, .g-types__t { color: var(--c-text) !important; } /* ---------- Spacing system ---------- */ .g-why, .g-process, .g-admin, .g-finance, .g-faqs, .g-promise, .g-split, .g-team, .g-svcgrid, .g-scope, .g-lseo, .g-lsec, .g-lfaq, .g-sdexp, .g-sdben, .g-awhy, .g-atesti, .g-aintro, .g-ahub__list, .g-industries, .g-sdhero { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; margin-top: 0 !important; } /* Same-background neighbours share one gap instead of two */ .g-process + .g-admin, .g-finance + .g-faqs, .g-testi + .g-trusted, .g-atesti + .g-trusted { padding-top: 0 !important; } .g-cta + .g-contact { padding-top: 0 !important; } .g-cta { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; } .g-about .g-cta, .g-services .g-cta, .g-contactpage .g-cta, .g-areahub .g-cta, .g-cta--area { padding-top: var(--space-section) !important; } .g-contactpage .g-contact, .g-svcpage .g-contact, .g-landing .g-contact { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; min-height: 0 !important; } .g-landing > * + *, .g-areapage > * + *, .g-areapage > .g-aintro { margin-top: 0 !important; } .g-landing { padding-block: 0 !important; } .g-head--center, .g-svcgrid, .g-process, .g-lfaq, .g-awhy, .g-industries, .g-team__inner { gap: var(--space-head) !important; } .g-faqs { gap: var(--space-head) !important; } .g-faqs__cols { gap: var(--gap-card) !important; } .g-icards, .g-sdben__cards, .g-team__cards, .g-svcgrid__cards, .g-awhy__cards { gap: var(--gap-card) !important; } /* ---------- Responsive ---------- */ @media (max-width: 1279px) { .g-svcgrid__cards .g-feature { flex: 0 1 calc(50% - 12px) !important; max-width: none !important; } .g-features { flex-wrap: wrap !important; } .g-feature { flex: 1 1 calc(50% - 12px) !important; } } @media (max-width: 781px) { .g-feature, .g-svcgrid__cards .g-feature { flex: 1 1 100% !important; } .g-check { padding: 18px 18px 18px 70px !important; } .g-check::before { left: 18px !important; width: 34px !important; height: 34px !important; } .g-pill, .g-tag, .g-badge, .g-sd-badge { white-space: normal; } .g-btn--white .wp-block-button__link { padding: 14px 22px !important; font-size: 1.0625rem !important; } .g-hero__eyebrow, .g-lhero__eyebrow { font-size: .75rem !important; } } /* Hero chips: readable label size */ .g-chips { flex-wrap: wrap; gap: 8px !important; } .g-chips li { width: auto !important; height: auto !important; padding: 8px 14px !important; border-radius: 999px !important; font-family: var(--font-ui) !important; font-weight: 500 !important; font-size: var(--fs-label) !important; line-height: 1.3 !important; color: var(--c-pill-ink) !important; background: var(--g-mint) !important; } /* Equal-height icon cards */ .g-icards, .g-icards--center { align-items: stretch !important; } /* FAQ numbering continues across all three columns */ .g-faqs__col:nth-child(3) { counter-reset: g-faq 20; } /* Text on mint uses the darker pill ink for AA contrast */ .g-areasbar__pills a, .g-icard__num, .g-sdben__num, .g-towns li:hover, .g-faqs__toggle:not(:hover) { color: var(--c-pill-ink) !important; } .g-areasbar__pills a:hover { color: #fff !important; } .g-faqs__toggle { border-color: var(--c-pill-ink) !important; } /* 3-step process keeps its original artwork design; only the font family follows the system */ .g-step__title, .g-step__text { font-family: var(--font-body) !important; } .g-step__title { color: var(--c-ink); } .g-step__text { color: var(--c-text); } /* Hero vehicle photo — identical placement on homepage and landing pages: same 684 × 412 box directly above the valuation card, cars sit 56px lower so the wheels tuck behind the card. */ .g-hero__img, .g-lhero__img { overflow: visible !important; border-radius: 0 !important; } .g-hero__img img, .g-lhero__img img { transform: translateY(56px) !important; } .g-valform { position: relative; z-index: 2; } .g-hero__media { position: relative; } @media (min-width: 1280px) { .g-lhero__img { left: 693px !important; top: 65px !important; width: 684px !important; height: 412px !important; } .g-lhero .g-valform { top: 477px !important; } } @media (max-width: 1279px) { .g-lhero__img { width: 100% !important; max-width: 684px !important; aspect-ratio: 684 / 412 !important; height: auto !important; } .g-lhero .g-valform { margin-top: 0 !important; } } /* Section headings: left-aligned everywhere (heroes, logo strips and CTA banners stay centred) */ .g-process > .g-head--center, .g-svcgrid__head, .g-industries__head, .g-team__headline, .g-awhy__head, .g-lfaq__head, .g-head--admin, .g-faqs__head { align-self: stretch !important; align-items: flex-start !important; text-align: left !important; width: 100% !important; max-width: 1240px !important; margin-inline: auto !important; } .g-process > .g-head--center .g-head__titles { align-items: flex-start !important; text-align: left !important; } .g-head--center .g-pill, .g-head--center .g-tag, .g-head--center .g-badge, .g-svcgrid__head .g-tag, .g-industries__head .g-tag, .g-team__headline .g-tag, .g-awhy__head .g-tag, .g-lfaq__head .g-badge, .g-faqs__head .g-pill { align-self: flex-start !important; } .g-faqs__head .g-title, .g-head--admin .g-title, .g-head--admin .g-sub, .g-process .g-sub { text-align: left !important; } .g-sub--wide { width: auto !important; max-width: 820px; } .g-team__inner, .g-awhy, .g-lfaq, .g-industries, .g-svcgrid, .g-process, .g-admin__inner { align-items: center; } .g-faqs { padding-inline: max(80px, calc((100% - 1240px) / 2)) !important; } @media (max-width: 1279px) { .g-faqs { padding-inline: var(--g-pad-x) !important; } } /* Area pages are on hold: hide the "Other areas we cover" bar on existing Services page content */ .g-services .g-areasbar-wrap { display: none !important; } /* 3-step process: standard type sizes inside the original artwork cards */ .g-step__title, .g-step--2 .g-step__title, .g-step--3 .g-step__title { font-size: 1.375rem !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-box: normal !important; } .g-step__text, .g-step--2 .g-step__text, .g-step--3 .g-step__text, .g-steps .g-step--long .g-step__text { font-size: 1rem !important; line-height: 1.65 !important; text-box: normal !important; } @media (min-width: 1280px) { .g-step__body { gap: 16px !important; top: 92px !important; padding-inline: 8px; } .g-step--flip .g-step__body { top: 70px !important; } } @media (min-width: 1280px) { .g-step:not(.g-step--flip) .g-step__body { top: calc(50% + 20px) !important; transform: translateY(-50%) !important; } .g-step--flip .g-step__body { top: calc(50% - 20px) !important; transform: translateY(-50%) !important; } } /* 3-step artwork scaled to suit the standard type: the whole component is drawn at 86%, and the text sizes are compensated so they still read as 22px titles / 16px body. */ @media (min-width: 1280px) { .g-steps { zoom: .86; margin-inline: auto; } .g-steps .g-step__title, .g-steps .g-step--2 .g-step__title, .g-steps .g-step--3 .g-step__title { font-size: 25.6px !important; } .g-steps .g-step__text, .g-steps .g-step--2 .g-step__text, .g-steps .g-step--3 .g-step__text, .g-steps .g-step--long .g-step__text { font-size: 18.6px !important; line-height: 1.6 !important; } .g-steps .g-step__body { gap: 19px !important; } } /* ---------- Pound sign icons (replace the rupee artwork) ---------- */ .g-ico--fees::before, .g-svcico--valuation::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='16'/%3E%3Cpath d='M24.6 14.2a4.4 4.4 0 0 0-7.9 2.7v6.2c0 2.1-.9 3.4-2.6 4.3h12'/%3E%3Cpath d='M14.4 20.6h8.2'/%3E%3C/svg%3E") !important; background-size: contain !important; } /* ---------- Links inside text read as normal text (no underline) ---------- */ a.g-inlink, .g-legal a, .g-plain__content a { color: inherit !important; text-decoration: none !important; } a.g-inlink:hover, .g-legal a:hover, .g-plain__content a:hover { color: var(--g-teal-dark) !important; } a.g-inlink:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; border-radius: 2px; } /* ---------- Mobile hero: title → vans → valuation box → description → chips → reviews ---------- */ @media (max-width: 781px) { .g-hero__inner, .g-lhero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } .g-hero__copy, .g-hero__intro, .g-hero__heading, .g-hero__media, .g-lhero__copy, .g-lhero__heading { display: contents !important; } .g-hero__eyebrow, .g-lhero__eyebrow { order: 1; margin-bottom: 12px !important; } .g-hero__title, .g-lhero__title { order: 2; margin-bottom: 8px !important; font-size: 2.125rem !important; } .g-hero__img, .g-lhero__img { order: 3; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 684 / 380 !important; margin: 0 !important; } .g-hero__img img, .g-lhero__img img { transform: translateY(40px) !important; } .g-hero .g-valform, .g-lhero .g-valform { order: 4; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin: 0 0 28px !important; box-shadow: 0 10px 30px rgba(16, 24, 23, .10); } .g-hero__text, .g-lhero__text { order: 5; margin-bottom: 16px !important; } .g-hero .g-chips { order: 6; margin-bottom: 20px !important; } .g-hero__copy > .g-greview, .g-lhero__copy > .g-greview, .g-greview { order: 7; align-self: flex-start; } .g-hero, .g-lhero__inner { padding-top: 24px !important; padding-bottom: 48px !important; } .g-lhero { height: auto !important; } .g-hero::before, .g-lhero__inner::before { display: none !important; } .g-hero__img, .g-lhero__img { background: linear-gradient(160deg, #6ccfb9 0%, #13806f 100%) !important; border-radius: 16px 16px 0 0 !important; overflow: hidden !important; } .g-hero .g-valform, .g-lhero .g-valform { border-radius: 0 0 16px 16px !important; } } @media (max-width: 781px) { .g-trusted { min-height: 0 !important; gap: 24px !important; padding-block: 40px !important; } .g-trusted__head { gap: 16px !important; } .g-sdtrust { padding-block: 40px !important; gap: 20px !important; } } /* === Client revisions 2026-10-30 === */ .g-marquee__set img { filter: none !important; opacity: 1 !important; } .g-val__notyours { margin-left: 10px !important; padding: 5px 9px !important; border-radius: 999px !important; background: #dcfff6 !important; color: #0b6e60 !important; font-weight: 600 !important; text-decoration: none !important; } .g-val__notyours:hover { background: #c9f7eb !important; color: #07584d !important; } .g-val__mot-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: #6b7280; } .g-val__mot-hint.is-warning { color: #a15c00; font-weight: 600; } .g-faqs:not(.g-faqs--full) .g-faqs__col > .g-faq:nth-of-type(n+4) { display: none !important; } .g-faqs:not(.g-faqs--full) .g-faqs__cols { justify-content: center; } .g-faqs:not(.g-faqs--full) .g-faqs__col { flex: 1 1 0; max-width: 580px; width: auto; } .g-faqs--full .g-faqs__cols { flex-wrap: wrap; } .g-faqs--full .g-faqs__col { flex: 1 1 480px; width: auto; } .g-faqs__toggle { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .g-sdhero__img img, .g-sdexp__img img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) and (max-height: 900px) { .g-val__main { padding-top: 28px !important; padding-bottom: 28px !important; } .g-val__h { margin-bottom: 20px !important; } .g-val__form { gap: 14px !important; } .g-val__input { min-height: 56px !important; height: 56px !important; } .g-val__info { margin-top: 16px !important; padding: 16px 20px !important; } .g-val__trust { margin-top: 18px !important; } } @media (max-width: 781px) { .g-hero { overflow: visible !important; } .g-hero__inner { gap: 22px !important; } .g-hero__media { min-height: 0 !important; overflow: visible !important; } .g-hero__img { overflow: visible !important; } .g-hero__img img { width: 100% !important; height: auto !important; max-height: none !important; transform: none !important; } .g-chips { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .g-faqs { padding-top: 48px !important; padding-bottom: 48px !important; } .g-faqs__cols { gap: 18px !important; } .g-faqs:not(.g-faqs--full) .g-faqs__col { flex-basis: 100% !important; max-width: none !important; } .g-val__top { padding-left: 16px !important; padding-right: 16px !important; } .g-val__vehicle { gap: 10px !important; } .g-val__notyours { display: inline-flex !important; margin: 6px 0 0 !important; } } @media (max-width: 520px) { .g-chips { grid-template-columns: 1fr !important; } } /* === Hero layout: restored to the previous approved clean version 2026-10-31 === Keep the client revisions, but restore the stable pre-art hero layout. Vehicle artwork stays inside the right-hand media area and cannot cover the copy. */ @media (min-width: 782px) { .g-hero__img { overflow: visible !important; border-radius: 0 !important; } .g-hero__img img { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; object-position: center bottom !important; transform: translateY(40px) !important; } .g-valform { position: relative !important; z-index: 3 !important; } .g-hero__copy { position: relative !important; z-index: 4 !important; } } @media (max-width: 781px) { .g-hero { overflow: hidden !important; } .g-hero__img { overflow: hidden !important; border-radius: 0 !important; aspect-ratio: 16 / 9 !important; } .g-hero__img img { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; object-position: center bottom !important; transform: none !important; } } /* OUR PROMISE — keep the approved light graphic treatment, but remove the dotted pattern. */ .g-promise__img { position: relative !important; overflow: hidden !important; border-radius: 28px !important; isolation: isolate; background: linear-gradient(130deg, transparent 0 18%, rgba(224,255,241,.75) 18% 52%, transparent 52%), linear-gradient(145deg, rgba(255,255,255,.75), rgba(237,251,247,.9)); } .g-promise__img::before { content: ""; position: absolute; left: 9%; top: 15%; width: 66%; height: 62%; border-radius: 34px; background: linear-gradient(135deg, rgba(70,202,180,.18), rgba(19,128,111,.04)); transform: skewX(-17deg); z-index: 0; } .g-promise__img::after { content: ""; position: absolute; left: 13%; right: 8%; bottom: 7%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(14,118,102,.17), transparent 72%); filter: blur(9px); z-index: 0; } .g-promise__img img { position: relative !important; z-index: 2 !important; width: 96% !important; height: 92% !important; margin: 4% 2% !important; object-fit: contain !important; object-position: center bottom !important; transform: none !important; } .g-promise__img:hover img { transform: translateY(-3px) !important; } /* ABOUT — mission bento vehicle photo: no crop, light abstract backdrop. */ .g-bento__photo { isolation: isolate; background: radial-gradient(circle at 80% 23%, rgba(25,166,144,.17) 0 2px, transparent 3px) 0 0 / 20px 20px, linear-gradient(135deg, rgba(224,255,241,.88), rgba(237,251,247,.95)); } .g-bento__photo::before { content: ""; position: absolute; left: 8%; top: 12%; width: 80%; height: 72%; border-radius: 40% 55% 45% 55%; background: linear-gradient(145deg, rgba(46,198,174,.16), rgba(19,128,111,.04)); z-index: 0; } .g-bento__photo::after { display: none !important; } .g-bento__photo img { position: relative !important; z-index: 2 !important; width: 94% !important; height: 90% !important; margin: 5% 3% !important; object-fit: contain !important; object-position: center bottom !important; transform: none !important; } .g-bento:hover .g-bento__photo img { transform: translateY(-2px) !important; } /* Footer CTA — keep visible breathing room before the blue copyright bar. */ .g-footer__top { padding-bottom: 48px !important; } .g-footer__cta { margin-top: 32px !important; padding-top: 0 !important; margin-bottom: 8px !important; } /* Responsive footer / promise spacing consistency. */ @media (max-width: 1279px) { .g-footer__top { padding-bottom: 44px !important; } } @media (max-width: 781px) { .g-footer__top { padding-bottom: 40px !important; } .g-footer__cta { margin-bottom: 0 !important; } } /* ========================================================================== November 2026 valuation + service-card refinements ========================================================================== */ /* Keep the four service benefit cards equal height on desktop/tablet rows. */ .g-sdben__cards { align-items: stretch !important; } .g-sdben__card { height: 100% !important; } /* Manufacturer logo badge: use the GitHub car-logo dataset image when available, while retaining the make name as a reliable fallback. */ .g-val__make { padding: 7px 10px !important; } .g-val__make-logo { display: block; width: 100%; height: 100%; max-width: 96px; max-height: 38px; object-fit: contain; } .g-val__make-fallback { display: block; width: 100%; text-align: center; } .g-val__make.has-logo .g-val__make-fallback { display: none; } /* Client requested the lower valuation scale/range bar removed. */ .g-val__scale { display: none !important; } /* Give VAT-exclusive pricing clearer separation from the main range and note. */ .g-val__exvat:not([hidden]) { margin-top: 12px !important; margin-bottom: 20px !important; } @media (max-width: 781px) { .g-val__make-logo { max-width: 68px; max-height: 28px; } } /* ==========================================================================\n November 2026 service-page equal card sizing v5\n ========================================================================== */ /* All service-page WHY CHOOSE US cards use the same box size. */ @media (min-width: 1280px) { .g-sdben__cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 20px !important; } .g-sdben__card { width: 100% !important; height: 320px !important; min-height: 320px !important; box-sizing: border-box !important; } } @media (min-width: 782px) and (max-width: 1279px) { .g-sdben__cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important; align-items: stretch !important; } .g-sdben__card { width: 100% !important; height: 300px !important; min-height: 300px !important; box-sizing: border-box !important; } } @media (max-width: 781px) { .g-sdben__cards { display: grid !important; grid-template-columns: 1fr !important; } .g-sdben__card { width: 100% !important; height: auto !important; min-height: 0 !important; } } /* ========================================================= v6 — Mobile header alignment fix Desktop/tablet remain unchanged. On phone widths, give the logo, valuation CTA and hamburger independent grid columns so the CTA can never overlap the logo/menu. ========================================================= */ @media (max-width: 781px) { .g-mainnav { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 8px !important; height: 72px !important; padding: 0 14px !important; } .g-logo { position: static !important; grid-column: 1 !important; align-self: center !important; } .g-logo img { width: clamp(88px, 26vw, 104px) !important; height: 52px !important; object-fit: contain !important; } .g-mainnav__cta { position: static !important; grid-column: 2 !important; justify-self: end !important; align-self: center !important; transform: none !important; min-width: 0 !important; } .g-mainnav__cta .wp-block-button, .g-mainnav__cta .wp-block-button__link, .g-mainnav__cta .g-btn--outline .wp-block-button__link { width: clamp(126px, 39vw, 154px) !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 6px 8px !important; border-width: 2px !important; border-radius: 10px !important; font-size: clamp(10px, 2.7vw, 12px) !important; line-height: 1.1 !important; white-space: nowrap !important; } .g-mainnav__menu { position: static !important; grid-column: 3 !important; align-self: center !important; justify-self: end !important; transform: none !important; } .g-nav .wp-block-navigation__responsive-container-open { width: 44px !important; height: 44px !important; margin: 0 !important; } } @media (max-width: 360px) { .g-mainnav { column-gap: 6px !important; padding-inline: 10px !important; } .g-logo img { width: 84px !important; } .g-mainnav__cta .wp-block-button__link { width: 122px !important; font-size: 9.5px !important; } } /* ========================================================= v7 — Small-phone header CTA fallback On screens <= 480px the header CTA moves into the mobile navigation overlay instead of competing with the logo. ========================================================= */ .g-nav__valuation-mobile { display: none !important; } @media (max-width: 480px) { .g-mainnav { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 12px !important; padding-inline: 16px !important; } .g-logo { grid-column: 1 !important; justify-self: start !important; } .g-logo img { width: clamp(100px, 31vw, 120px) !important; height: 54px !important; } .g-mainnav__cta { display: none !important; } .g-mainnav__menu { grid-column: 2 !important; justify-self: end !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile { display: block !important; width: 100% !important; margin-top: 20px !important; border-bottom: 0 !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 52px !important; padding: 13px 18px !important; border: 2px solid var(--g-teal-dark) !important; border-radius: 12px !important; background: var(--g-teal-dark) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; } } /* ========================================================================== v8 — Mobile responsiveness / valuation UI cleanup — 4 Nov 2026 ========================================================================== */ @media (max-width: 781px) { /* Mobile header: keep only logo + hamburger in the row. CTA lives in menu. */ .g-mainnav { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 14px !important; height: 76px !important; padding: 0 18px !important; } .g-logo { position: static !important; grid-column: 1 !important; justify-self: start !important; align-self: center !important; } .g-logo img { width: 112px !important; height: 54px !important; object-fit: contain !important; } .g-mainnav__cta { display: none !important; } .g-mainnav__menu { position: static !important; grid-column: 2 !important; justify-self: end !important; align-self: center !important; transform: none !important; } .g-nav .wp-block-navigation__responsive-container-open { width: 48px !important; height: 48px !important; margin: 0 !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile { display: block !important; width: 100% !important; margin-top: 18px !important; border-bottom: 0 !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; padding: 12px 16px !important; border: 2px solid var(--g-teal-dark) !important; border-radius: 12px !important; background: var(--g-teal-dark) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; } /* Homepage hero benefits: compact 2x2 layout instead of tall pills. */ .g-hero .g-chips { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 0 20px !important; } .g-hero .g-chips li { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 38px !important; justify-content: flex-start !important; padding: 8px 11px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important; } /* Hero valuation form: lighter, tighter card. */ .g-hero .g-valform, .g-lhero .g-valform { padding: 16px !important; border: 1px solid #e6e9e8 !important; border-radius: 0 0 16px 16px !important; background: #fff !important; box-shadow: 0 12px 26px rgba(16, 24, 23, .08) !important; } .g-valform__title { margin: 0 0 12px !important; font-size: 20px !important; line-height: 1.25 !important; } .g-valform__row { gap: 10px !important; } .g-hero .g-plate, .g-lhero .g-plate { height: 54px !important; padding-inline: 14px !important; border-radius: 10px !important; font-size: 28px !important; } .g-hero .g-valform__btn, .g-lhero .g-valform__btn { height: 54px !important; border-radius: 10px !important; font-size: 17px !important; } /* Valuation app top: smaller transparent branding, compact cards. */ .g-val__top { gap: 16px !important; padding: 22px 18px 24px !important; } .g-val__logo { position: static !important; width: 116px !important; height: 62px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .g-val__logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .g-val__regform { width: min(100%, 430px) !important; max-width: none !important; margin: 0 !important; padding: 10px !important; gap: 10px !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .08) !important; } .g-val__reginput { width: 100% !important; height: 52px !important; padding-inline: 14px !important; border-radius: 10px !important; font-size: 27px !important; } .g-val__regbtn { width: 100% !important; height: 52px !important; padding-inline: 14px !important; border-radius: 10px !important; font-size: 17px !important; } /* Selected vehicle summary: compact, aligned, no giant white block. */ .g-val__vehicle { width: min(100%, 480px) !important; max-width: none !important; display: grid !important; grid-template-columns: 74px auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px 12px !important; padding: 14px !important; border-radius: 16px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .06) !important; } .g-val__make { grid-column: 1 !important; width: 74px !important; height: 44px !important; padding: 6px 8px !important; border-radius: 10px !important; } .g-val__make-logo { max-width: 58px !important; max-height: 30px !important; } .g-val__plate { grid-column: 2 !important; align-self: center !important; margin: 0 !important; height: 34px !important; padding-inline: 12px !important; font-size: 16px !important; } .g-val__change { position: static !important; grid-column: 4 !important; justify-self: end !important; height: 36px !important; padding-inline: 14px !important; border-radius: 9px !important; font-size: 14px !important; } .g-val__vtext { grid-column: 1 / -1 !important; min-width: 0 !important; flex-basis: auto !important; gap: 6px !important; } .g-val__vtitle { font-size: 20px !important; line-height: 1.22 !important; white-space: normal !important; } .g-val__vspecs { font-size: 14px !important; line-height: 1.4 !important; } .g-val__notyours { display: inline-flex !important; margin: 6px 0 0 !important; padding: 5px 9px !important; font-size: 13px !important; } /* Main valuation flow: reduced type scale and cleaner rhythm. */ .g-val__main { width: min(100%, 480px) !important; max-width: none !important; padding: 30px 18px 56px !important; } .g-val__h { margin: 0 0 20px !important; font-size: 29px !important; line-height: 1.16 !important; letter-spacing: -.02em !important; } .g-val__lead { margin: -8px 0 24px !important; font-size: 15px !important; line-height: 1.5 !important; } .g-val__form { width: 100% !important; gap: 12px !important; } .g-val__input { height: 56px !important; padding: 0 18px !important; border-radius: 12px !important; font-size: 17px !important; } .g-val__check { margin-top: 0 !important; gap: 10px !important; font-size: 16px !important; } .g-val__box { width: 22px !important; height: 22px !important; } .g-val__btn { width: 100% !important; height: 56px !important; border-radius: 12px !important; font-size: 18px !important; line-height: 1.2 !important; white-space: normal !important; } .g-val__info { width: 100% !important; margin-top: 18px !important; padding: 17px 16px !important; border-radius: 14px !important; } .g-val__info-title { font-size: 18px !important; line-height: 1.3 !important; } .g-val__info-text { margin-top: 7px !important; font-size: 14px !important; line-height: 1.45 !important; } /* Benefits: compact 2x2 instead of an oversized vertical box. */ .g-val__trust { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px 12px !important; margin-top: 20px !important; padding: 14px !important; border-radius: 14px !important; background: #f8faf9 !important; } .g-val__trust li, .g-val__trust li:first-child { width: auto !important; min-width: 0 !important; gap: 8px !important; font-size: 13px !important; line-height: 1.3 !important; } .g-val__tick { width: 21px !important; height: 21px !important; } /* Mobile result: price first and remove duplicated vehicle details below it. */ .g-val__result { width: 100% !important; display: block !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .g-val__result .g-val__specs { display: none !important; } .g-val__price { width: 100% !important; padding: 24px 18px !important; border: 1px solid #ecefee !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(16, 24, 23, .06) !important; } .g-val__range { justify-content: center !important; gap: 7px !important; font-size: clamp(30px, 9vw, 40px) !important; letter-spacing: -.03em !important; } .g-val__range small { font-size: 13px !important; } .g-val__exvat { text-align: center !important; font-size: 14px !important; line-height: 1.4 !important; } .g-val__note { margin-top: 18px !important; padding: 14px 14px 14px 36px !important; border-radius: 12px !important; background-position: 14px 17px !important; font-size: 14px !important; line-height: 1.45 !important; } .g-val__btn--small { height: 56px !important; margin-top: 16px !important; border-radius: 12px !important; font-size: 17px !important; } /* Final action panel: stack naturally without cramped columns. */ .g-val__next { width: 100% !important; gap: 18px !important; margin-top: 18px !important; padding: 18px !important; border-radius: 14px !important; } .g-val__next-intro { width: auto !important; padding: 0 0 16px !important; border-right: 0 !important; border-bottom: 1px solid rgba(25, 166, 144, .35) !important; } .g-val__next-title { font-size: 19px !important; } .g-val__next-text { font-size: 14px !important; line-height: 1.5 !important; } .g-val__next-row { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; gap: 10px 12px !important; } .g-val__next-row .g-val__ghost { grid-column: 1 / -1 !important; width: 100% !important; height: 44px !important; } } @media (max-width: 430px) { .g-hero .g-chips { grid-template-columns: 1fr 1fr !important; } .g-val__trust { grid-template-columns: 1fr 1fr !important; } .g-val__range { font-size: clamp(29px, 9.4vw, 37px) !important; } } @media (max-width: 350px) { .g-hero .g-chips, .g-val__trust { grid-template-columns: 1fr !important; } } /* ========================================================== v9 mobile polish — merged removal benefit + compact logo card ========================================================== */ @media (max-width: 781px) { /* Home benefits: three clean rows, no pill collisions. */ .g-hero .g-chips { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; width: 100% !important; margin-bottom: 20px !important; } .g-hero .g-chips li { width: 100% !important; min-width: 0 !important; min-height: 38px !important; padding: 8px 14px !important; border-radius: 999px !important; justify-content: flex-start !important; white-space: normal !important; box-sizing: border-box !important; } /* Valuation trust points: compact three-row layout. */ .g-val__trust { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 12px !important; } .g-val__trust li, .g-val__trust li:first-child { width: 100% !important; min-width: 0 !important; padding: 7px 8px !important; box-sizing: border-box !important; } /* Restore brand logo on a compact white card. */ .g-val__logo { width: 148px !important; height: 80px !important; padding: 10px 16px !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 7px 20px rgba(0, 0, 0, .10) !important; } .g-val__logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; } } @media (max-width: 390px) { .g-val__logo { width: 136px !important; height: 74px !important; padding: 9px 14px !important; } } /* ========================================================== v10 — valuation mobile header matches the homepage strip ========================================================== */ .g-val__mobilebar { display: none; } @media (max-width: 781px) { .g-val__mobilebar { position: relative; z-index: 80; width: 100%; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 22px; background: #fff; border-bottom: 1px solid #edf0ef; box-shadow: 0 5px 16px rgba(16, 24, 23, .07); box-sizing: border-box; } .g-val__mobilebar-logo { width: 132px; height: 64px; display: flex; align-items: center; justify-content: flex-start; } .g-val__mobilebar-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .g-val__mobilebar-toggle { width: 58px; height: 58px; flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 16px; background: #eaf8f4; cursor: pointer; } .g-val__mobilebar-toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--g-teal-dark); transition: transform .2s ease, opacity .2s ease; } .g-val__mobilebar.is-open .g-val__mobilebar-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .g-val__mobilebar.is-open .g-val__mobilebar-toggle span:nth-child(2) { opacity: 0; } .g-val__mobilebar.is-open .g-val__mobilebar-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .g-val__mobilemenu { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; display: grid; gap: 0; padding: 12px 18px 18px; background: #fff; border-top: 1px solid #edf0ef; border-bottom: 1px solid #e4e9e7; box-shadow: 0 16px 30px rgba(16, 24, 23, .12); } .g-val__mobilemenu[hidden] { display: none !important; } .g-val__mobilemenu a { display: block; padding: 13px 8px; border-bottom: 1px solid #eef1f0; font-family: var(--g-gilroy); font-size: 16px; font-weight: 600; color: #16201e; text-decoration: none; } .g-val__mobilemenu a:last-child { border-bottom: 0; } .g-val__mobilemenu .g-val__mobilemenu-cta { margin-top: 10px; padding: 13px 16px; border: 1px solid var(--g-teal); border-radius: 10px; background: var(--g-teal); color: #fff; text-align: center; } /* The valuation page no longer uses the centered standalone logo on mobile. */ .g-val__top > .g-val__logo { display: none !important; } .g-val__top { gap: 14px !important; padding-top: 18px !important; } } @media (max-width: 390px) { .g-val__mobilebar { min-height: 84px; padding: 10px 16px; } .g-val__mobilebar-logo { width: 118px; height: 58px; } .g-val__mobilebar-toggle { width: 54px; height: 54px; flex-basis: 54px; border-radius: 15px; } } /* ========================================================== v11 — Mobile registration card balance Make the registration field the primary control and the CTA secondary. ========================================================== */ @media (max-width: 781px) { .g-val__regform { width: min(100%, 430px) !important; padding: 14px !important; gap: 12px !important; border: 1px solid #e8eeeb !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 10px 26px rgba(14, 118, 102, .10) !important; } .g-val__reginput { width: 100% !important; height: 64px !important; padding: 0 18px !important; border: 1px solid #dbe5e1 !important; border-radius: 12px !important; background: #f1f3f3 !important; font-size: 30px !important; line-height: 1 !important; letter-spacing: .5px !important; box-sizing: border-box !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important; } .g-val__reginput:focus { border-color: var(--g-teal) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(19, 128, 111, .12) !important; } .g-val__regbtn { width: 86% !important; max-width: 340px !important; height: 48px !important; align-self: center !important; padding: 0 18px !important; border-radius: 11px !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; } .g-val__regbtn:hover, .g-val__regbtn:focus-visible { box-shadow: 0 8px 18px rgba(19, 128, 111, .18) !important; } } @media (max-width: 390px) { .g-val__regform { padding: 12px !important; } .g-val__reginput { height: 60px !important; font-size: 28px !important; } .g-val__regbtn { width: 88% !important; height: 46px !important; font-size: 15px !important; } } /* ========================================================== v12 — Mobile menu simplification + REG hierarchy correction ========================================================== */ @media (max-width: 781px) { /* Main site mobile navigation: clean top-level menu only. */ .g-nav .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; z-index: 100000 !important; padding: 118px 28px 30px !important; background: #fff !important; color: #16201e !important; overflow-y: auto !important; } /* Recreate the clean logo header inside the overlay. */ .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; position: absolute; top: 20px; left: 28px; width: 160px; height: 72px; background: url('assets/images/logo.png') no-repeat left center / contain; pointer-events: none; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { margin-top: 0 !important; padding-top: 0 !important; align-items: stretch !important; } .g-nav .is-menu-open .wp-block-navigation__container { width: 100% !important; gap: 0 !important; } .g-nav .is-menu-open .wp-block-navigation-item { width: 100% !important; border-bottom: 1px solid #edf0ef !important; } .g-nav .is-menu-open .wp-block-navigation-item__content { display: block !important; width: 100% !important; padding: 17px 4px !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #16201e !important; text-align: left !important; } /* Keep Services as one clean top-level item on mobile. */ .g-nav .is-menu-open .wp-block-navigation__submenu-icon, .g-nav .is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .g-nav .wp-block-navigation__responsive-container-close { position: absolute !important; top: 22px !important; right: 24px !important; width: 58px !important; height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 16px !important; background: #eaf8f4 !important; color: var(--g-teal-dark) !important; box-shadow: none !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile { display: block !important; width: 100% !important; margin-top: 18px !important; border-bottom: 0 !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 13px 18px !important; border: 0 !important; border-radius: 11px !important; background: var(--g-teal-dark) !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; text-align: center !important; } /* Registration card: compact container, dominant input, secondary CTA. */ .g-val__top { gap: 12px !important; padding-top: 14px !important; padding-bottom: 18px !important; } .g-val__regform { width: min(100%, 430px) !important; max-width: none !important; margin: 0 auto !important; padding: 10px 12px 12px !important; gap: 9px !important; border: 1px solid #e5ebe8 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 6px 16px rgba(16, 24, 23, .06) !important; } .g-val__reginput { width: 100% !important; height: 68px !important; padding: 0 18px !important; border: 1px solid #d7e1dd !important; border-radius: 10px !important; background: #eef1f0 !important; font-size: 32px !important; line-height: 1 !important; letter-spacing: .4px !important; box-sizing: border-box !important; } .g-val__regbtn { width: 78% !important; max-width: 300px !important; height: 44px !important; min-height: 44px !important; align-self: center !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 15px !important; line-height: 1 !important; font-weight: 600 !important; } } @media (max-width: 390px) { .g-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 108px 22px 26px !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { top: 18px; left: 22px; width: 142px; height: 64px; } .g-nav .wp-block-navigation__responsive-container-close { top: 18px !important; right: 20px !important; width: 54px !important; height: 54px !important; } .g-val__regform { padding: 9px 10px 11px !important; } .g-val__reginput { height: 64px !important; font-size: 30px !important; } .g-val__regbtn { width: 80% !important; height: 42px !important; min-height: 42px !important; font-size: 14px !important; } } /* ========================================================== v13 — Unified mobile menu + balanced valuation REG card Reference: approved mobile menu and homepage valuation card. ========================================================== */ @media (max-width: 781px) { /* ---------- Normal site mobile navigation: approved pattern ---------- */ .g-nav .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; z-index: 100000 !important; padding: 132px 20px 28px !important; background: #fff !important; color: #16201e !important; overflow-y: auto !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { top: 20px !important; left: 28px !important; width: 170px !important; height: 82px !important; background: url('assets/images/logo.png') no-repeat left center / contain !important; } .g-nav .wp-block-navigation__responsive-container-close { top: 20px !important; right: 24px !important; width: 62px !important; height: 62px !important; border-radius: 17px !important; background: #eaf8f4 !important; color: var(--g-teal-dark) !important; box-shadow: none !important; } .g-nav .is-menu-open .wp-block-navigation__container { width: 100% !important; gap: 0 !important; } .g-nav .is-menu-open .wp-block-navigation-item { width: 100% !important; border-bottom: 1px solid #e9eeec !important; } .g-nav .is-menu-open .wp-block-navigation-item__content { padding: 20px 14px !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #16201e !important; } .g-nav .is-menu-open .wp-block-navigation__submenu-icon, .g-nav .is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile { width: 100% !important; margin-top: 18px !important; border: 0 !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { min-height: 56px !important; padding: 16px 18px !important; border-radius: 12px !important; background: var(--g-teal) !important; color: #fff !important; font-size: 17px !important; font-weight: 700 !important; text-align: center !important; justify-content: center !important; } /* ---------- Valuation pages: same approved mobile menu ---------- */ .g-val__mobilebar { position: relative !important; z-index: 1001 !important; min-height: 92px !important; padding: 12px 24px !important; background: #fff !important; border-bottom: 1px solid #edf0ef !important; box-shadow: 0 4px 14px rgba(16,24,23,.06) !important; } .g-val__mobilebar-logo { width: 150px !important; height: 68px !important; } .g-val__mobilebar-toggle { width: 62px !important; height: 62px !important; flex: 0 0 62px !important; border-radius: 17px !important; background: #eaf8f4 !important; } .g-val__mobilebar-toggle span { width: 25px !important; height: 2px !important; } .g-val__mobilemenu { position: fixed !important; top: 92px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 1000 !important; display: block !important; padding: 24px 20px 30px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; overflow-y: auto !important; } .g-val__mobilemenu[hidden] { display: none !important; } .g-val__mobilemenu a { display: block !important; width: 100% !important; padding: 20px 14px !important; border-bottom: 1px solid #e9eeec !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #16201e !important; text-decoration: none !important; box-sizing: border-box !important; } .g-val__mobilemenu .g-val__mobilemenu-cta { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 56px !important; margin-top: 18px !important; padding: 16px 18px !important; border: 0 !important; border-radius: 12px !important; background: var(--g-teal) !important; color: #fff !important; font-size: 17px !important; font-weight: 700 !important; text-align: center !important; } /* ---------- Valuation registration card: approved proportions ---------- */ .g-val__top { gap: 0 !important; padding: 24px 16px 28px !important; } .g-val__regform { width: min(100%, 620px) !important; max-width: none !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 20px !important; border: 1px solid rgba(255,255,255,.42) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 8px 22px rgba(16,24,23,.08) !important; box-sizing: border-box !important; } .g-val__reginput { width: 100% !important; height: 72px !important; padding: 0 22px !important; border: 0 !important; border-radius: 14px !important; background: #e2e2e2 !important; box-shadow: none !important; font-size: clamp(30px, 8vw, 38px) !important; line-height: 1 !important; letter-spacing: .3px !important; box-sizing: border-box !important; } .g-val__reginput:focus { background: #ededed !important; box-shadow: 0 0 0 3px rgba(19,128,111,.14) !important; } .g-val__regbtn { width: 100% !important; max-width: none !important; height: 60px !important; min-height: 60px !important; align-self: stretch !important; padding: 0 20px !important; border-radius: 14px !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important; box-shadow: none !important; } } @media (max-width: 390px) { .g-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 118px 18px 24px !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { top: 16px !important; left: 20px !important; width: 148px !important; height: 72px !important; } .g-nav .wp-block-navigation__responsive-container-close { top: 17px !important; right: 18px !important; width: 56px !important; height: 56px !important; } .g-val__mobilebar { min-height: 86px !important; padding: 10px 18px !important; } .g-val__mobilebar-logo { width: 132px !important; height: 62px !important; } .g-val__mobilebar-toggle { width: 56px !important; height: 56px !important; flex-basis: 56px !important; } .g-val__mobilemenu { top: 86px !important; padding: 20px 18px 26px !important; } .g-val__regform { padding: 18px !important; gap: 13px !important; border-radius: 18px !important; } .g-val__reginput { height: 68px !important; padding-inline: 18px !important; font-size: 31px !important; } .g-val__regbtn { height: 58px !important; min-height: 58px !important; font-size: 17px !important; } } /* ========================================================== v14 — FINAL mobile menu geometry fix Matches approved compact reference: logo/X header, immediate top-level links, contained CTA. No giant blank area. ========================================================== */ @media (max-width: 781px) { .g-nav .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; padding: 0 20px 28px !important; background: #fff !important; color: #16201e !important; overflow-y: auto !important; box-sizing: border-box !important; } /* Compact menu header: logo left, close button right. */ .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { content: "" !important; position: absolute !important; top: 18px !important; left: 28px !important; width: 170px !important; height: 96px !important; background: url('assets/images/logo.png') no-repeat left center / contain !important; pointer-events: none !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open::after { content: "" !important; position: absolute !important; top: 146px !important; left: 0 !important; right: 0 !important; height: 1px !important; background: #edf0ef !important; pointer-events: none !important; } .g-nav .wp-block-navigation__responsive-container-close { position: absolute !important; top: 18px !important; right: 24px !important; width: 66px !important; height: 66px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 18px !important; background: #eaf8f4 !important; color: var(--g-teal-dark) !important; box-shadow: none !important; z-index: 2 !important; } /* Gutenberg adds its own tall flex spacing here; reset it fully. */ .g-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 164px 0 0 !important; gap: 0 !important; box-sizing: border-box !important; } .g-nav .is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } .g-nav .is-menu-open .wp-block-navigation-item { width: 100% !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #e9eeec !important; box-sizing: border-box !important; } .g-nav .is-menu-open .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 78px !important; margin: 0 !important; padding: 18px 14px !important; box-sizing: border-box !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #16201e !important; text-align: left !important; } .g-nav .is-menu-open .wp-block-navigation__submenu-icon, .g-nav .is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile { width: 100% !important; margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; box-sizing: border-box !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 88px !important; margin: 0 !important; padding: 18px 20px !important; border: 0 !important; border-radius: 14px !important; background: var(--g-teal) !important; color: #fff !important; box-sizing: border-box !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; } /* WordPress mobile admin toolbar is 46px high. Keep the menu below it. */ body.admin-bar .g-nav .wp-block-navigation__responsive-container.is-menu-open { top: 46px !important; bottom: 0 !important; } } @media (max-width: 390px) { .g-nav .wp-block-navigation__responsive-container.is-menu-open { padding-inline: 18px !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open::before { left: 20px !important; width: 150px !important; height: 88px !important; } .g-nav .wp-block-navigation__responsive-container-close { right: 18px !important; width: 60px !important; height: 60px !important; border-radius: 16px !important; } .g-nav .is-menu-open .wp-block-navigation-item__content { min-height: 72px !important; padding-inline: 12px !important; font-size: 19px !important; } .g-nav .wp-block-navigation__responsive-container.is-menu-open .g-nav__valuation-mobile > .wp-block-navigation-item__content { min-height: 80px !important; font-size: 18px !important; } } /* ========================================================== v15 — One mobile navigation component everywhere The valuation page now renders the exact same WordPress Navigation block/classes as the normal site header. ========================================================== */ .g-val__siteheader { display: none !important; } @media (max-width: 781px) { .g-val__siteheader.g-mainnav { display: grid !important; width: 100% !important; box-sizing: border-box !important; } } /* ================================================================ v17 — Mobile REG input fix (valuation page only) Root cause: desktop .g-val__reginput has flex: 1. When the registration form stacks vertically, flex-basis:0 collapses the input to its intrinsic text height despite height:68px. Keep input and button in equal-width, equal-height rows with the padding/gap of the approved homepage registration card. ================================================================ */ @media (max-width: 781px) { .g-val .g-val__regform { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: min(100%, 620px) !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 18px !important; gap: 12px !important; background: #fff !important; border-radius: 18px !important; } .g-val .g-val__reginput { display: block !important; flex: 0 0 60px !important; flex-grow: 0 !important; flex-shrink: 0 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 60px !important; min-height: 60px !important; margin: 0 !important; padding: 0 18px !important; border-radius: 12px !important; background: #e1e1e1 !important; font-size: clamp(26px, 8vw, 33px) !important; line-height: normal !important; } .g-val .g-val__regbtn { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 58px !important; box-sizing: border-box !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 16px !important; border-radius: 12px !important; font-size: 17px !important; } } /* v18: consistent UK registration plate typography across valuation CTAs. */ .g-ctaform input[name="reg"], .g-ctaform input[name="reg"]::placeholder, .g-valform input[name="reg"], .g-valform input[name="reg"]::placeholder, .g-val__reginput, .g-val__reginput::placeholder { font-family: var(--g-plate) !important; font-weight: 700 !important; letter-spacing: .015em !important; text-transform: uppercase !important; } @media (max-width: 781px) { .g-ctaform input[name="reg"] { font-size: clamp(27px, 7vw, 36px) !important; line-height: 1.1 !important; padding-inline: 18px !important; min-width: 0 !important; } .g-ctaform input[name="reg"]::placeholder { color: #777 !important; opacity: 1 !important; } } /* ======================================================================= GCG client revisions v19 (2026-11-05) ======================================================================= */ /* Home card section: new copy, without changing cards on desktop. */ .g-home .g-why__intro { gap: 22px !important; } .g-home .g-why__row { display: flex !important; flex-direction: column !important; gap: 14px !important; } .g-home .g-why__summary { width: min(100%, 780px); margin: 0 !important; font-size: clamp(16px,1.25vw,19px); line-height: 1.6; color: var(--c-text,#48524f); } .g-home .g-why__title { max-width: 1050px; } /* The full FAQ page always exposes all 23 questions. The compact homepage shows 3+3 and expanding 'View all questions' makes ALL 23 accessible. */ .g-faqs--full .g-faqs__col + .g-faqs__col, .g-faqs.is-expanded .g-faqs__col + .g-faqs__col { counter-reset: g-faq 15 !important; } .g-faqs:not(.g-faqs--full):not(.is-expanded) .g-faqs__col + .g-faqs__col { counter-reset: g-faq 3 !important; } .g-faqs:not(.g-faqs--full):not(.is-expanded) .g-faqs__col > .g-faq:nth-of-type(n+4) { display: none !important; } .g-faqs:not(.g-faqs--full).is-expanded .g-faqs__col > .g-faq { display: block !important; } .g-faqs--full .g-faq { display: block !important; } /* The three supplied UK vehicle images: show the complete frame without awkward crops; subtle pale background fills the aspect-ratio difference. */ .g-sdhero__img--client { background: #eef5f3 !important; } .g-sdhero__img--client img { display: block !important; object-fit: contain !important; object-position: center !important; transform: none !important; } .g-sdhero__frame:hover .g-sdhero__img--client img { transform: none !important; } /* Unified valuation page: normal white site header, then centered heading, explanation and a prominent registration form. The teal vehicle band is only shown after successful vehicle lookup. */ .g-valpage { min-height: 65vh; } .g-val__top[hidden] { display: none !important; } .g-val__main { width: min(100% - 40px, 920px) !important; max-width: 920px !important; padding: clamp(52px,6vw,86px) 0 70px !important; } .g-val__step[data-step="start"] { width: 100%; } .g-val__step[data-step="start"] .g-val__h { max-width: 800px !important; margin: 0 auto 20px !important; } .g-val__step[data-step="start"] .g-val__lead { max-width: 670px; margin: 0 auto 34px !important; } .g-val__step[data-step="start"] .g-val__regform { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: center !important; width: min(100%, 800px) !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 14px !important; gap: 14px !important; border: 1px solid #e1e9e6 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 14px 42px rgba(17,45,41,.1) !important; box-sizing: border-box !important; } .g-val__step[data-step="start"] .g-val__reginput { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 68px !important; min-height: 68px !important; margin: 0 !important; padding: 0 18px !important; border-radius: 10px !important; background: #e1e1e1 !important; font-family: var(--g-plate) !important; font-size: clamp(26px,3vw,35px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: .01em !important; } .g-val__step[data-step="start"] .g-val__regbtn { flex: 0 0 220px !important; align-self: stretch !important; width: 220px !important; max-width: 100% !important; height: 68px !important; min-height: 68px !important; margin: 0 !important; padding: 0 15px !important; font-size: 17px !important; border-radius: 10px !important; } .g-val__step[data-step="start"] .g-val__trust { margin: 32px auto 0 !important; } .g-val__top:not([hidden]) { padding-block: 24px !important; height: auto !important; min-height: 144px !important; } .g-val__top:not([hidden]) .g-val__vehicle { margin: 0 auto !important; width: min(95%, 1050px) !important; max-width: 1050px !important; } /* The Services menu is an expandable parent, not a standalone page. */ @media (min-width: 782px) { .g-nav .wp-block-navigation-submenu.gcg-services-expanded > .wp-block-navigation__submenu-container { display: flex !important; opacity: 1 !important; visibility: visible !important; } } /* Mobile-only: restructure the homepage; desktop layout is untouched. */ @media (max-width: 781px) { .g-home .g-hero__inner { display: flex !important; flex-direction: column !important; gap: 0 !important; } .g-home .g-hero__copy, .g-home .g-hero__intro, .g-home .g-hero__heading, .g-home .g-hero__media { display: contents !important; } .g-home .g-hero__eyebrow { order: 1 !important; margin: 0 0 10px !important; } .g-home .g-hero__title { order: 2 !important; margin: 0 0 14px !important; font-size: clamp(32px,9vw,42px) !important; line-height: 1.12 !important; } .g-home .g-hero__text { order: 3 !important; margin: 0 0 20px !important; font-size: 16px !important; line-height: 1.55 !important; } .g-home .g-valform { order: 4 !important; height: auto !important; padding: 18px !important; margin: 0 0 22px !important; border-radius: 16px !important; box-shadow: 0 9px 30px rgba(0,0,0,.08) !important; } .g-home .g-valform__title { position: static !important; margin: 0 0 13px !important; font-size: 18px !important; line-height: 1.2 !important; } .g-home .g-valform__row { position: static !important; display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; } .g-home .g-valform__row .g-plate { width: 100% !important; flex: 0 0 64px !important; height: 64px !important; min-height: 64px !important; font-size: 31px !important; } .g-home .g-valform__row .g-valform__btn { width: 100% !important; height: 54px !important; min-height: 54px !important; font-size: 17px !important; border-radius: 10px !important; } .g-home .g-hero__img { order: 5 !important; width: 100% !important; height: auto !important; aspect-ratio: 684 / 410 !important; border-radius: 16px !important; overflow: hidden !important; background: linear-gradient(155deg,#ecfff7,#b9efde) !important; margin: 0 0 16px !important; } .g-home .g-hero__img img { display: block !important; width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; } .g-home .g-chips { order: 6 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 20px !important; } .g-home .g-chips li { width: auto !important; max-width: 100% !important; white-space: normal !important; border-radius: 10px !important; } .g-home .g-greview { order: 7 !important; } .g-home .g-why__row { gap: 10px !important; } .g-home .g-why__summary { font-size: 16px !important; line-height: 1.6 !important; } .g-val__main { width: min(100% - 32px, 920px) !important; padding: 40px 0 56px !important; } .g-val__step[data-step="start"] .g-val__h { font-size: clamp(26px,7vw,34px) !important; line-height: 1.16 !important; } .g-val__step[data-step="start"] .g-val__lead { font-size: 15px !important; margin: 0 auto 26px !important; } .g-val__step[data-step="start"] .g-val__regform { flex-direction: column !important; gap: 12px !important; padding: 16px !important; border-radius: 16px !important; } .g-val__step[data-step="start"] .g-val__reginput { flex: 0 0 64px !important; width: 100% !important; height: 64px !important; min-height: 64px !important; font-size: clamp(28px,7vw,34px) !important; } .g-val__step[data-step="start"] .g-val__regbtn { flex: 0 0 56px !important; width: 100% !important; height: 56px !important; min-height: 56px !important; max-width: none !important; font-size: 17px !important; } .g-val__step[data-step="start"] .g-val__trust { margin: 25px auto 0 !important; } .g-val__top:not([hidden]) { padding: 18px 16px !important; } .g-val__top:not([hidden]) .g-val__vehicle { max-width: 100% !important; width: 100% !important; } } /* ======================================================================== GCG v20: centered, compact DESKTOP HOMEPAGE HERO. Layout-only treatment approved against the existing design system. IMPORTANT: no typography, text colors, copy, form action or mobile rules are modified. Every component retains its current theme text styles. ======================================================================== */ @media (min-width: 1024px) { .g-home .g-hero { isolation: isolate; overflow: hidden !important; padding: 38px 30px 25px !important; } /* Decorative side curves use ONLY the existing brand color tokens. */ .g-home .g-hero::before, .g-home .g-hero::after { content: "" !important; display: block !important; position: absolute !important; width: 63% !important; height: 330px !important; top: auto !important; bottom: 30px !important; pointer-events: none !important; z-index: 0 !important; background-image: none !important; background: linear-gradient(125deg, var(--g-mint) 0%, var(--g-teal) 100%) !important; opacity: .98; } .g-home .g-hero::before { left: -23% !important; right: auto !important; border-radius: 70% 100% 0 0 !important; transform: rotate(-8deg); } .g-home .g-hero::after { left: auto !important; right: -23% !important; border-radius: 100% 70% 0 0 !important; transform: rotate(8deg); } .g-home .g-hero__inner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; justify-items: center !important; align-items: start !important; gap: 0 !important; width: min(100%, 1130px) !important; max-width: 1130px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } .g-home .g-hero__copy, .g-home .g-hero__intro, .g-home .g-hero__heading, .g-home .g-hero__media { display: contents !important; } .g-home .g-hero__eyebrow, .g-home .g-hero__title, .g-home .g-hero__text, .g-home .g-chips, .g-home .g-hero .g-valform, .g-home .g-hero__img, .g-home .g-greview { grid-column: 1 !important; justify-self: center !important; position: relative !important; z-index: 1 !important; } .g-home .g-hero__eyebrow { grid-row: 1 !important; margin: 0 0 13px !important; text-align: center !important; } .g-home .g-hero__title { grid-row: 2 !important; width: 100% !important; max-width: 1130px !important; margin: 0 0 15px !important; text-align: center !important; } .g-home .g-hero__text { grid-row: 3 !important; width: min(840px, 100%) !important; max-width: 840px !important; margin: 0 0 18px !important; text-align: center !important; } .g-home .g-hero .g-chips { grid-row: 4 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: auto !important; max-width: 100% !important; gap: 10px !important; margin: 0 0 22px !important; padding: 0 !important; } .g-home .g-hero .g-chips li { width: auto !important; min-width: 0 !important; padding-inline: 14px !important; } .g-home .g-hero .g-valform { grid-row: 5 !important; width: min(820px, 100%) !important; max-width: 820px !important; height: auto !important; margin: 0 auto 12px !important; padding: 20px 24px 23px !important; border-radius: 16px !important; box-shadow: 0 12px 35px rgba(16,24,23,.12) !important; background: #fff !important; } .g-home .g-hero .g-valform__title { position: static !important; display: block !important; width: 100% !important; margin: 0 0 15px !important; text-align: center !important; } .g-home .g-hero .g-valform__row { position: static !important; display: flex !important; align-items: stretch !important; width: 100% !important; gap: 14px !important; } .g-home .g-hero .g-valform__row .g-plate { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; height: 66px !important; border-radius: 10px !important; } .g-home .g-hero .g-valform__row .g-valform__btn { width: 260px !important; flex: 0 0 260px !important; height: 66px !important; border-radius: 10px !important; } .g-home .g-hero__img { grid-row: 6 !important; display: block !important; width: min(700px,100%) !important; max-width: 700px !important; height: auto !important; aspect-ratio: auto !important; margin: -3px auto 0 !important; overflow: visible !important; border-radius: 0 !important; background: transparent !important; isolation: isolate; } /* Ground shadow, not a new photo: preserves the original vehicle asset. */ .g-home .g-hero__img::before { content: ""; position: absolute; left: 11%; right: 11%; bottom: 5%; height: 17px; border-radius: 50%; filter: blur(13px); background: rgba(0,0,0,.18); z-index: 0; pointer-events: none; } .g-home .g-hero__img img { position: relative !important; display: block !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; max-width: none !important; object-fit: contain !important; object-position: center bottom !important; transform: none !important; z-index: 1 !important; } .g-home .g-hero .g-greview { grid-row: 7 !important; align-self: center !important; justify-self: center !important; margin: 0 auto 5px !important; } } /* =========================================================================== GCG v21 • Approved hero: desktop split + mobile valuation-first. Retains brand font tokens, font sizes, colours, original copy and live form. All blocks remain WordPress-native. No full-page screenshot backgrounds. =========================================================================== */ @media (min-width: 1200px) { .g-home .g-hero { display: block !important; position: relative !important; isolation: isolate !important; overflow: hidden !important; padding: 48px clamp(30px,5vw,82px) 58px !important; background: #f7fcfb !important; } .g-home .g-hero::before { content:"" !important; display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: url("assets/images/hero-v21-desktop-wave.svg") center center / 100% 100% no-repeat !important; opacity: 1 !important; transform: none !important; pointer-events: none !important; z-index: 0 !important; border-radius: 0 !important; } .g-home .g-hero::after {content:none !important; display:none !important;} .g-home .g-hero__inner { position:relative !important; z-index:1 !important; display:grid !important; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr) !important; gap: clamp(30px,4.25vw,70px) !important; align-items:start !important; justify-items:stretch !important; width:100% !important; max-width:1400px !important; margin:0 auto !important; } .g-home .g-hero__copy, .g-home .g-hero__intro, .g-home .g-hero__heading { display:flex !important; flex-direction:column !important; width:100% !important; min-width:0 !important; align-items:flex-start !important; text-align:left !important; } .g-home .g-hero__copy {gap: 0 !important; padding-top: 20px !important;} .g-home .g-hero__intro {gap: 0 !important;} .g-home .g-hero__heading {gap: 20px !important;} .g-home .g-hero__eyebrow { position:static !important; display:block !important; width:auto !important; max-width:100% !important; grid-row:auto !important; grid-column:auto !important; align-self:flex-start !important; justify-self:auto !important; margin:0 !important; text-align:left !important; white-space:normal !important; } .g-home .g-hero__title { display:block !important; position:static !important; grid-row:auto !important; grid-column:auto !important; width:100% !important; max-width:590px !important; margin:0 0 24px !important; text-align:left !important; justify-self:auto !important; } .g-home .g-hero__title br {display:inline !important;} .g-home .g-hero__text { position:static !important; width:100% !important; max-width:550px !important; margin:0 0 25px !important; grid-row:auto !important; grid-column:auto !important; text-align:left !important; } .g-home .g-hero .g-chips { display:flex !important; grid-row:auto !important; grid-column:auto !important; position:static !important; width:100% !important; margin:0 0 25px !important; padding:0 !important; flex-wrap:wrap !important; justify-content:flex-start !important; align-items:center !important; gap:8px !important; justify-self:auto !important; } .g-home .g-hero .g-chips li {width:auto !important; flex:none !important; min-width:0 !important;} .g-home .g-hero .g-greview { position:relative !important; grid-row:auto !important; grid-column:auto !important; display:inline-flex !important; justify-self:auto !important; align-self:flex-start !important; margin:0 !important; } .g-home .g-hero__media { display:flex !important; flex-direction:column !important; position:relative !important; min-width:0 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; gap:0 !important; align-items:stretch !important; } .g-home .g-hero__img { display:block !important; position:relative !important; width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; aspect-ratio:auto !important; grid-row:auto !important; grid-column:auto !important; margin:0 0 -14px !important; padding:0 !important; overflow:visible !important; border-radius:0 !important; background:transparent !important; isolation:isolate !important; z-index:1 !important; } .g-home .g-hero__img::before {display:none !important;content:none !important;} .g-home .g-hero__img img { display:block !important; position:relative !important; inset:auto !important; width:100% !important; height:auto !important; max-width:100% !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center bottom !important; transform:none !important; filter:none !important; } .g-home .g-hero .g-valform { display:block !important; grid-row:auto !important;grid-column:auto !important; position:relative !important; width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:22px 24px 24px !important; box-sizing:border-box !important; border-radius:20px !important; border:1px solid rgba(0,0,0,.07) !important; background:#fff !important; box-shadow:0 16px 35px rgba(13,44,39,.14) !important; z-index:2 !important; } .g-home .g-hero .g-valform__title { display:block !important; position:static !important; width:100% !important; margin:0 0 16px !important; text-align:left !important; white-space:normal !important; } .g-home .g-hero .g-valform__row { display:flex !important; position:static !important; left:auto !important; top:auto !important; width:100% !important; gap:14px !important; align-items:stretch !important; } .g-home .g-hero .g-valform__row .g-plate { width:0 !important; flex:1 1 0 !important; min-width:0 !important; height:66px !important; border-radius:10px !important; } .g-home .g-hero .g-valform__row .g-valform__btn { width: min(41%,268px) !important; flex:0 0 min(41%,268px) !important; height:66px !important; border-radius:10px !important; } } /* Approved mobile composition: WHITE text/valuation, benefits, THEN teal cars and reviews. */ @media (max-width: 1199px) { .g-home .g-hero { display:block !important; position:relative !important; isolation:isolate !important; overflow:hidden !important; padding:26px clamp(16px,4vw,32px) 42px !important; background:#fff !important; } .g-home .g-hero::before { content:"" !important; display:block !important; position:absolute !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; height:clamp(330px,70vw,560px) !important; background:url("assets/images/hero-v21-mobile-wave.svg") center bottom / 100% 100% no-repeat !important; transform:none !important; border:0 !important; border-radius:0 !important; z-index:0 !important; pointer-events:none !important; } .g-home .g-hero::after { content:none !important; display:none !important; } .g-home .g-hero__inner { display:flex !important; flex-direction:column !important; position:relative !important; z-index:1 !important; width:100% !important; max-width:660px !important; margin:0 auto !important; gap:0 !important; align-items:stretch !important; } .g-home .g-hero__copy, .g-home .g-hero__intro, .g-home .g-hero__heading, .g-home .g-hero__media {display:contents !important;} .g-home .g-hero__eyebrow { order:1 !important; position:relative !important; margin:0 0 14px !important; width:100% !important; text-align:left !important; white-space:normal !important; } .g-home .g-hero__title { order:2 !important; position:relative !important; margin:0 0 16px !important; width:100% !important; max-width:100% !important; text-align:left !important; } .g-home .g-hero__title br {display:initial !important;} .g-home .g-hero__text { order:3 !important; position:relative !important; margin:0 0 18px !important; width:100% !important; max-width:100% !important; text-align:left !important; } .g-home .g-hero .g-valform { order:4 !important; position:relative !important; align-self:stretch !important; width:100% !important; height:auto !important; margin:0 0 20px !important; padding:18px !important; border:1px solid #e6e9e8 !important; border-radius:17px !important; box-shadow:0 13px 30px rgba(14,42,38,.13) !important; background:#fff !important; z-index:2 !important; } .g-home .g-hero .g-valform__title { position:static !important; margin:0 0 13px !important; width:100% !important; text-align:left !important; white-space:normal !important; } .g-home .g-hero .g-valform__row { display:flex !important; position:static !important; width:100% !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; } .g-home .g-hero .g-valform__row .g-plate { width:100% !important; min-width:0 !important; flex:0 0 64px !important; height:64px !important; min-height:64px !important; border-radius:10px !important; } .g-home .g-hero .g-valform__row .g-valform__btn { width:100% !important; min-width:0 !important; flex:0 0 55px !important; height:55px !important; min-height:55px !important; border-radius:10px !important; } .g-home .g-hero .g-chips { order:5 !important; position:relative !important; display:flex !important; grid-template-columns:none !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; align-self:center !important; gap:8px !important; width:100% !important; max-width:100% !important; margin:0 0 18px !important; padding:0 !important; } .g-home .g-hero .g-chips li { width:auto !important; max-width:100% !important; min-width:0 !important; height:auto !important; flex:0 1 auto !important; white-space:normal !important; border-radius:999px !important; justify-content:center !important; padding-inline:12px !important; } .g-home .g-hero__img { order:6 !important; position:relative !important; align-self:center !important; display:block !important; width: min(100%,640px) !important; max-width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:auto !important; margin:0 auto 6px !important; overflow:visible !important; padding:0 !important; border-radius:0 !important; background:transparent !important; } .g-home .g-hero__img::before {display:none !important;content:none !important;} .g-home .g-hero__img img { display:block !important; position:relative !important; inset:auto !important; width:100% !important; max-width:100% !important; height:auto !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center bottom !important; transform:none !important; filter:none !important; } .g-home .g-hero .g-greview { order:7 !important; position:relative !important; display:inline-flex !important; align-self:center !important; justify-self:center !important; width:max-content !important; max-width:100% !important; margin:2px auto 0 !important; z-index:2 !important; } } @media (max-width: 359px) { .g-home .g-hero {padding-inline:14px !important;} .g-home .g-hero .g-valform {padding:15px !important;} .g-home .g-hero .g-valform__row .g-valform__btn {white-space:normal !important;} } /* ========================================================================== GCG v21.3: Ground-contact shadows (homepage only). The original PNG preserves the exact client-approved vehicles. The separate radial shadows stay behind the artwork and fade naturally to transparency, avoiding hard-edge crop rectangles from baked shadow layers. Percent coordinates align with front/rear tyre ground-contact positions. ========================================================================== */ @media (min-width: 1200px) { .g-home .g-hero__img { overflow: visible !important; isolation: isolate !important; } .g-home .g-hero__img::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; background: radial-gradient(ellipse 15% 4.5% at 11% 70%, rgba(1,22,17,.70) 0%, rgba(1,22,17,.38) 32%, rgba(1,22,17,.12) 58%, transparent 87%), radial-gradient(ellipse 17% 4.8% at 27% 75%, rgba(1,22,17,.77) 0%, rgba(1,22,17,.41) 33%, rgba(1,22,17,.13) 61%, transparent 88%), radial-gradient(ellipse 19% 4.4% at 55% 68%, rgba(1,22,17,.70) 0%, rgba(1,22,17,.35) 34%, rgba(1,22,17,.10) 62%, transparent 88%), radial-gradient(ellipse 15% 4.4% at 77% 65.5%, rgba(1,22,17,.72) 0%, rgba(1,22,17,.35) 34%, rgba(1,22,17,.10) 62%, transparent 88%), radial-gradient(ellipse 46% 11% at 34% 72%, rgba(0,20,16,.29) 0%, rgba(0,20,16,.13) 46%, transparent 82%), radial-gradient(ellipse 43% 9% at 65% 67%, rgba(0,20,16,.29) 0%, rgba(0,20,16,.11) 49%, transparent 84%) !important; z-index: 0 !important; } .g-home .g-hero__img img { position: relative !important; z-index: 1 !important; } } /* Mobile hero: preserve approved stacked composition and add correctly scaled contact shadows; never crop the image or clip the vehicle silhouettes. */ @media (max-width: 1199px) { .g-home .g-hero__img { overflow: visible !important; isolation: isolate !important; } .g-home .g-hero__img::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: radial-gradient(ellipse 21% 5% at 12% 70%, rgba(1,22,17,.58), transparent 80%), radial-gradient(ellipse 19% 5% at 28% 75%, rgba(1,22,17,.66), transparent 84%), radial-gradient(ellipse 21% 5% at 55% 68%, rgba(1,22,17,.63), transparent 83%), radial-gradient(ellipse 18% 5% at 76% 65.5%, rgba(1,22,17,.58), transparent 84%), radial-gradient(ellipse 54% 12% at 42% 70%, rgba(0,20,16,.21), transparent 86%) !important; z-index: 0 !important; } .g-home .g-hero__img img { position: relative !important; z-index: 1 !important; } } /* ======================================================================== GCG v22: approved no-car-photo Your Details page. Only activeStep=details is restyled. No other valuation screens, APIs, homepage or service pages are changed. ======================================================================== */ .g-val[data-active-step="details"] { --g-v22-dark: #075e50; --g-v22-accent: #127d6c; background: #f6faf9; } .g-val[data-active-step="details"] .g-val__top:not([hidden]) { position: relative; isolation: isolate; display: flex !important; align-items: flex-start !important; justify-content: center !important; height: 188px !important; min-height: 188px !important; margin: 0 !important; padding: 30px 24px 55px !important; overflow: hidden; background: linear-gradient(116deg, #075e50 0%, #0a806d 66%, #1bbaa0 100%) !important; } .g-val[data-active-step="details"] .g-val__top::after { content: ""; position: absolute; width: 52%; height: 180%; right: -19%; top: -130%; transform: rotate(-24deg); border-radius: 42%; background: rgba(1,66,58,.24); z-index: -1; pointer-events: none; } .g-val__progress { display: none; } .g-val[data-active-step="details"] .g-val__progress { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 0; width: min(100%, 660px); margin: 0 auto !important; padding: 0 !important; list-style: none !important; color: #fff; } .g-val[data-active-step="details"] .g-val__progress-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 8px; margin: 0; font-family: var(--g-gilroy); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center; z-index: 1; } .g-val[data-active-step="details"] .g-val__progress-item:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 27px); right: calc(-50% + 27px); height: 1.5px; top: 19px; background: rgba(255,255,255,.58); } .g-val[data-active-step="details"] .g-val__progress-circle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; color: #e2f7ef; background: rgba(5,65,55,.35); font-size: 19px; font-weight: 700; } .g-val[data-active-step="details"] .g-val__progress-item.is-complete .g-val__progress-circle, .g-val[data-active-step="details"] .g-val__progress-item.is-current .g-val__progress-circle { color: #075e50; background: #fff; border-color: #fff; } .g-val[data-active-step="details"] .g-val__progress-item.is-upcoming { opacity: .76; } .g-val[data-active-step="details"] .g-val__main { position: relative; z-index: 3; width: min(100% - 40px, 980px) !important; max-width: 980px !important; margin: -59px auto 0 !important; padding: 0 0 90px !important; } .g-val[data-active-step="details"] .g-val__step[data-step="details"] { display: block; width: 100%; } .g-val[data-active-step="details"] .g-val__details-card { width: 100%; padding: 26px 32px 30px; border: 1px solid #ebf0ef; border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(9,81,72,.13), 0 2px 7px rgba(18,72,65,.06); } .g-val[data-active-step="details"] .g-val__vehicle-mount { width: 100%; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vehicle { display: grid !important; grid-template-columns: 142px minmax(0,1fr) auto !important; grid-template-rows: 38px auto auto !important; align-items: start !important; justify-content: start !important; column-gap: 24px !important; row-gap: 10px !important; position: relative !important; height: auto !important; min-height: 148px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 26px !important; border-bottom: 1px solid #e7ecec; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; width: 142px !important; height: 140px !important; min-width: 0; padding: 12px !important; border: 1px solid #e8edf0; border-radius: 15px; background: #f5f7f8; font-size: 18px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make-logo { max-width: 112px !important; max-height: 112px !important; width: 100%; height: 100%; object-fit: contain; } .g-val[data-active-step="details"] .g-val__details-card .g-val__plate { grid-column: 2; grid-row: 1; justify-self: start; align-self: start; height: 34px; margin: 0 !important; padding: 0 13px; border-radius: 8px; font-size: 18px; line-height: 34px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vtext { grid-column: 2 / 4; grid-row: 2 / span 2; min-width: 0; gap: 9px !important; align-self: start; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vtitle { width: auto; font-family: var(--g-gilroy); font-weight: 700; font-size: clamp(19px,2.2vw,26px); line-height: 1.24; overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; color: #182523; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vspecs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; color: #4e5d59; } .g-val[data-active-step="details"] .g-val__details-card .g-val__notyours { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 0 6px; padding: 4px 12px; border-radius: 100px; font-family: var(--g-gilroy); font-weight: 600; font-size: 13px; color: #075e50; background: #e1faf2; text-decoration: none; } .g-val[data-active-step="details"] .g-val__details-card .g-val__notyours:hover { background: #c5f1e3; } .g-val[data-active-step="details"] .g-val__details-card .g-val__change { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: static !important; width: auto; height: 36px; margin: 0 !important; padding: 0 13px; border: 1px solid #0b806e; border-radius: 9px; background: #fff; font-size: 13px; white-space: nowrap; } .g-val[data-active-step="details"] .g-val__details-card .g-val__change::before { content: ""; flex: none; width: 16px; height: 16px; background: url("assets/images/icon-val-pencil-v22.svg") center / contain no-repeat; } .g-val[data-active-step="details"] .g-val__details-card .g-val__change:hover::before { filter: brightness(0) invert(1); } .g-val[data-active-step="details"] .g-val__details-body { padding-top: 24px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__h { display: block; width: 100%; margin: 0 0 22px !important; padding: 0 0 13px; font-family: var(--g-gilroy); font-weight: 700; font-size: 26px; line-height: 1.24; text-align: left; color: #172320; } .g-val[data-active-step="details"] .g-val__details-card .g-val__h::after { content: ""; display: block; width: 49px; height: 3px; margin-top: 10px; border-radius: 3px; background: #13806f; } .g-val[data-active-step="details"] .g-val__details-card .g-val__form { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 14px !important; row-gap: 16px !important; align-items: center; width: 100% !important; max-width: none !important; margin: 0 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input { display: block; width: 100%; height: 56px; min-width: 0; margin: 0; padding: 0 14px 0 47px; border: 1px solid #dae3e4; border-radius: 10px; background-color: #f8fafb; background-repeat: no-repeat; background-position: 16px center; background-size: 21px 21px; font-size: 15px; line-height: normal; color: #172320; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input--email { background-image: url("assets/images/icon-val-email-v22.svg"); } .g-val[data-active-step="details"] .g-val__details-card .g-val__input--phone { background-image: url("assets/images/icon-val-phone-v22.svg"); } .g-val[data-active-step="details"] .g-val__details-card .g-val__input:focus { border-color: #13806f; background-color: #fff; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check { grid-column: 1 / -1; margin: 0; color: #263630; font-size: 15px; font-weight: 500; } .g-val[data-active-step="details"] .g-val__details-card .g-val__box { width: 22px; height: 22px; background-color: #fff; } .g-val[data-active-step="details"] .g-val__details-card .g-val__btn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; max-width: none; margin: 0; padding: 0 18px; border-radius: 10px; font-family: var(--g-gilroy); font-weight: 600; font-size: 19px; line-height: 1.2; white-space: normal; background: linear-gradient(90deg,#00614f,#087f6b); } .g-val[data-active-step="details"] .g-val__details-card .g-val__info { position: relative; display: block; width: 100%; max-width: none; min-height: 92px; margin: 18px 0 0; padding: 20px 24px 20px 88px; border-radius: 14px; background: #e5f8f3; text-align: left; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info::before { content: ""; position: absolute; width: 52px; height: 52px; left: 21px; top: 50%; transform: translateY(-50%); border-right: 1px solid #c3e3da; background: url("assets/images/icon-val-chart-v22.svg") center left / 37px 37px no-repeat; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-title { font-size: 18px; line-height: 1.35; color: #152624; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-text { margin-top: 4px !important; font-size: 15px; line-height: 1.45; color: #2e4741; } @media (max-width: 781px) { .g-val[data-active-step="details"] .g-val__top:not([hidden]) { height: 133px !important; min-height: 133px !important; padding: 18px 12px 46px !important; } .g-val[data-active-step="details"] .g-val__progress { width: 100%; } .g-val[data-active-step="details"] .g-val__progress-item { font-size: 11px; gap: 7px; } .g-val[data-active-step="details"] .g-val__progress-circle { width: 31px; height: 31px; font-size: 16px; } .g-val[data-active-step="details"] .g-val__progress-item:not(:last-child)::after { top: 15px; left: calc(50% + 19px); right: calc(-50% + 19px); } .g-val[data-active-step="details"] .g-val__main { width: calc(100% - 26px) !important; margin-top: -40px !important; padding: 0 0 52px !important; } .g-val[data-active-step="details"] .g-val__details-card { padding: 17px 15px 20px; border-radius: 18px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vehicle { grid-template-columns: 89px minmax(0,1fr) !important; grid-template-rows: 30px auto auto auto !important; column-gap: 14px !important; row-gap: 7px !important; padding-bottom: 19px !important; min-height: 0 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make { grid-row: 1 / 4; width: 89px !important; height: 91px !important; align-self: start; padding: 7px !important; border-radius: 12px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make-logo { max-width: 74px !important; max-height: 75px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__plate { grid-column: 2; grid-row: 1; height: 29px; padding: 0 10px; font-size: 14px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vtext { grid-column: 2; grid-row: 2 / 4; gap: 8px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vtitle { font-size: clamp(14px,4.2vw,18px); line-height: 1.25; overflow-wrap: break-word; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vspecs { font-size: 12px; line-height: 1.5; column-gap: 6px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__notyours { margin: 4px 0 0; font-size: 11px; min-height: 28px; padding: 4px 9px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__change { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 2px !important; padding: 0 10px; height: 31px; font-size: 11px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__change::before { width: 14px; height: 14px; } .g-val[data-active-step="details"] .g-val__details-body { padding-top: 18px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__h { font-size: 23px; margin-bottom: 16px !important; padding-bottom: 3px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__form { grid-template-columns: minmax(0,1fr); gap: 12px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input { height: 51px; font-size: 14px; padding: 0 10px 0 43px; background-size: 19px; background-position: 13px center; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check { font-size: 13px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__btn { height: 54px; font-size: 16px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info { margin-top: 16px; min-height: 77px; padding: 15px 12px 15px 62px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info::before { width: 37px; height: 42px; left: 12px; background-size: 31px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-title { font-size: 15px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-text { font-size: 12px; line-height: 1.4; } } @media (max-width: 350px) { .g-val[data-active-step="details"] .g-val__details-card { padding-inline: 11px; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vehicle { grid-template-columns: 72px minmax(0,1fr) !important; column-gap: 10px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make { width: 72px !important; height: 78px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__make-logo { max-width: 60px !important; max-height: 66px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__vspecs { font-size: 11px; } } /* ======================================================================= GCG v23 - approved grounded-vehicles homepage polish RESPONSIVE / HOMEPAGE ONLY. WordPress valuation logic, body copy, logo, header, services and v22 no-car details step are untouched. ======================================================================= */ @media (min-width: 1200px) { .g-home .g-hero { overflow: hidden !important; } .g-home .g-hero__copy { min-width: 0 !important; } /* The white part of the art extends behind the three benefits. The pills themselves are constrained to the left content column. */ .g-home .g-hero .g-chips { width: 100% !important; max-width: 100% !important; flex-wrap: wrap !important; gap: 8px !important; align-content: start !important; } .g-home .g-hero .g-chips li { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; white-space: nowrap !important; padding: 8px 10px !important; font-size: clamp(11px, .77vw, 13px) !important; text-wrap: nowrap !important; } /* PNG shadows are per-tyre and contact aligned, not extra CSS pads. */ .g-home .g-hero__img::before, .g-home .g-hero__img::after { content: none !important; display: none !important; background: none !important; } .g-home .g-hero__img img { filter: none !important; } } @media (min-width: 1200px) and (max-width: 1499px) { .g-home .g-hero .g-chips { max-width: min(100%, 445px) !important; } } @media (min-width: 1500px) { .g-home .g-hero .g-chips { max-width: min(100%, 570px) !important; } .g-home .g-hero .g-chips li { padding-inline: 8px !important; } } @media (max-width: 1199px) { .g-home .g-hero { padding-top: clamp(16px,3.4vw,24px) !important; padding-bottom: 24px !important; } .g-home .g-hero__eyebrow, .g-home .g-hero__title, .g-home .g-hero__text, .g-home .g-hero .g-valform__title, .g-home .g-hero .g-chips, .g-home .g-hero .g-chips li { text-align: center !important; } .g-home .g-hero__eyebrow { margin: 0 0 10px !important; font-size: clamp(12px,2.7vw,15px) !important; line-height: 1.38 !important; } .g-home .g-hero__title { margin: 0 0 12px !important; font-size: clamp(33px,7.6vw,45px) !important; line-height: 1.10 !important; text-wrap: balance !important; } .g-home .g-hero__text { margin: 0 0 14px !important; font-size: clamp(14px,3.4vw,17px) !important; line-height: 1.48 !important; text-wrap: pretty !important; } .g-home .g-hero .g-valform { margin: 0 0 14px !important; padding: 14px !important; border-radius: 18px !important; } .g-home .g-hero .g-valform__title { margin: 0 0 9px !important; font-size: clamp(18px,4.7vw,24px) !important; line-height: 1.25 !important; } .g-home .g-hero .g-valform__row { gap: 10px !important; } .g-home .g-hero .g-valform__row .g-plate { height: 58px !important; min-height: 58px !important; flex-basis: 58px !important; text-align: center !important; padding-inline: 14px !important; font-size: clamp(25px, 7vw, 37px) !important; } .g-home .g-hero .g-valform__row .g-plate::placeholder { text-align: center !important; opacity: 1; } .g-home .g-hero .g-valform__row .g-valform__btn { height: 52px !important; min-height: 52px !important; flex-basis: 52px !important; } .g-home .g-hero .g-chips { margin: 0 0 6px !important; gap: 6px !important; justify-content: center !important; align-content: center !important; } .g-home .g-hero .g-chips li { font-size: clamp(11px,2.8vw,13px) !important; padding: 7px 10px !important; line-height: 1.28 !important; min-height: 31px !important; } .g-home .g-hero__img { margin: -2px auto -4px !important; width: min(100%, 680px) !important; } .g-home .g-hero__img::before, .g-home .g-hero__img::after { content: none !important; display: none !important; background: none !important; } .g-home .g-hero .g-greview { margin: 0 auto !important; } } @media (max-width: 440px) { .g-home .g-hero__eyebrow { font-size: 12px !important; } .g-home .g-hero__title { font-size: clamp(31px,8.1vw,37px) !important; } .g-home .g-hero__text { font-size: 14px !important; line-height: 1.45 !important; } .g-home .g-hero .g-valform { padding: 13px !important; } .g-home .g-hero .g-chips li { font-size: 11px !important; } } /* ======================================================================= GCG v24 — final client round 1) homepage mobile hero centered + vehicle visible in first viewport 2) stronger vehicle contact shadows (Ford front tyre included) 3) valuation step 2/3 unified card design with 1-2-3 progress 4) mobile details card hardening to prevent overlap ======================================================================= */ /* ---------- Homepage hero: final mobile override ---------- */ @media (max-width: 1199px) { .g-home .g-hero__eyebrow, .g-home .g-hero__title, .g-home .g-hero__text, .g-home .g-hero .g-valform__title, .g-home .g-hero .g-chips, .g-home .g-hero .g-chips li, .g-home .g-hero .g-greview { text-align: center !important; } .g-home .g-hero__eyebrow { order: 1 !important; margin: 0 0 10px !important; text-align: center !important; } .g-home .g-hero__title { order: 2 !important; margin: 0 0 12px !important; text-align: center !important; font-size: clamp(31px, 8vw, 42px) !important; line-height: 1.08 !important; } .g-home .g-hero__text { order: 3 !important; margin: 0 0 12px !important; text-align: center !important; font-size: clamp(14px, 3.6vw, 17px) !important; line-height: 1.45 !important; max-width: 33ch !important; align-self: center !important; } /* Move the vehicle artwork above the form so it appears in the first look. */ .g-home .g-hero__img { order: 4 !important; align-self: center !important; width: min(100%, 620px) !important; margin: 4px auto 10px !important; overflow: visible !important; background: transparent !important; } .g-home .g-hero__img img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center bottom !important; transform: none !important; } .g-home .g-hero .g-valform { order: 5 !important; margin: 0 0 14px !important; text-align: center !important; } .g-home .g-hero .g-valform__title { text-align: center !important; } .g-home .g-hero .g-chips { order: 6 !important; justify-content: center !important; align-self: center !important; margin: 0 0 12px !important; } .g-home .g-hero .g-greview { order: 7 !important; align-self: center !important; margin: 0 auto !important; } } /* ---------- Homepage hero: final contact shadows ---------- */ .g-home .g-hero__img { position: relative !important; isolation: isolate !important; overflow: visible !important; } .g-home .g-hero__img::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; } .g-home .g-hero__img img { position: relative !important; z-index: 1 !important; } @media (min-width: 1200px) { .g-home .g-hero__img::before { background: radial-gradient(ellipse 16% 4.8% at 11% 70%, rgba(1,22,17,.78) 0%, rgba(1,22,17,.44) 34%, rgba(1,22,17,.14) 62%, transparent 88%), radial-gradient(ellipse 17% 5.0% at 27.5% 75.2%, rgba(1,22,17,.86) 0%, rgba(1,22,17,.50) 34%, rgba(1,22,17,.16) 63%, transparent 88%), radial-gradient(ellipse 19% 4.7% at 55% 68.3%, rgba(1,22,17,.74) 0%, rgba(1,22,17,.41) 35%, rgba(1,22,17,.13) 62%, transparent 88%), radial-gradient(ellipse 16.5% 5.1% at 78.2% 65.8%, rgba(1,22,17,.82) 0%, rgba(1,22,17,.48) 34%, rgba(1,22,17,.15) 63%, transparent 89%), radial-gradient(ellipse 49% 11.8% at 34% 72.5%, rgba(0,20,16,.30) 0%, rgba(0,20,16,.14) 48%, transparent 84%), radial-gradient(ellipse 44% 9.8% at 66% 67.2%, rgba(0,20,16,.30) 0%, rgba(0,20,16,.12) 50%, transparent 85%) !important; } } @media (max-width: 1199px) { .g-home .g-hero__img::before { background: radial-gradient(ellipse 23% 5.6% at 13% 70.5%, rgba(1,22,17,.64) 0%, rgba(1,22,17,.26) 58%, transparent 84%), radial-gradient(ellipse 22% 5.9% at 29% 75.8%, rgba(1,22,17,.74) 0%, rgba(1,22,17,.31) 58%, transparent 85%), radial-gradient(ellipse 23% 5.6% at 55.5% 68.5%, rgba(1,22,17,.67) 0%, rgba(1,22,17,.28) 58%, transparent 85%), radial-gradient(ellipse 21% 6.1% at 77.5% 66.2%, rgba(1,22,17,.76) 0%, rgba(1,22,17,.31) 58%, transparent 86%), radial-gradient(ellipse 57% 13% at 43% 71%, rgba(0,20,16,.22) 0%, rgba(0,20,16,.09) 56%, transparent 86%) !important; } } /* ---------- Shared valuation header for details / vehicle / result ---------- */ .g-val[data-active-step="vehicle"], .g-val[data-active-step="result"] { --g-v24-dark: #075e50; --g-v24-accent: #13806f; background: #f6faf9; } .g-val[data-active-step="vehicle"] .g-val__top:not([hidden]), .g-val[data-active-step="result"] .g-val__top:not([hidden]) { position: relative; isolation: isolate; display: flex !important; align-items: flex-start !important; justify-content: center !important; height: 188px !important; min-height: 188px !important; margin: 0 !important; padding: 30px 24px 55px !important; overflow: hidden; background: linear-gradient(116deg, #075e50 0%, #0a806d 66%, #1bbaa0 100%) !important; } .g-val[data-active-step="vehicle"] .g-val__top::after, .g-val[data-active-step="result"] .g-val__top::after { content: ""; position: absolute; width: 52%; height: 180%; right: -19%; top: -130%; transform: rotate(-24deg); border-radius: 42%; background: rgba(1,66,58,.24); z-index: -1; pointer-events: none; } .g-val[data-active-step="vehicle"] .g-val__progress, .g-val[data-active-step="result"] .g-val__progress { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 0; width: min(100%, 660px); margin: 0 auto !important; padding: 0 !important; list-style: none !important; color: #fff; } .g-val[data-active-step="vehicle"] .g-val__progress-item, .g-val[data-active-step="result"] .g-val__progress-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 8px; margin: 0; font-family: var(--g-gilroy); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center; z-index: 1; } .g-val[data-active-step="vehicle"] .g-val__progress-item:not(:last-child)::after, .g-val[data-active-step="result"] .g-val__progress-item:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 27px); right: calc(-50% + 27px); height: 1.5px; top: 19px; background: rgba(255,255,255,.58); } .g-val[data-active-step="vehicle"] .g-val__progress-circle, .g-val[data-active-step="result"] .g-val__progress-circle { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; color: #e2f7ef; background: rgba(5,65,55,.35); font-size: 19px; font-weight: 700; } .g-val[data-active-step="vehicle"] .g-val__progress-item.is-complete .g-val__progress-circle, .g-val[data-active-step="vehicle"] .g-val__progress-item.is-current .g-val__progress-circle, .g-val[data-active-step="result"] .g-val__progress-item.is-complete .g-val__progress-circle, .g-val[data-active-step="result"] .g-val__progress-item.is-current .g-val__progress-circle { color: #075e50; background: #fff; border-color: #fff; } .g-val[data-active-step="vehicle"] .g-val__progress-item.is-upcoming, .g-val[data-active-step="result"] .g-val__progress-item.is-upcoming { opacity: .76; } .g-val[data-active-step="vehicle"] .g-val__main, .g-val[data-active-step="result"] .g-val__main { position: relative; z-index: 3; width: min(100% - 40px, 980px) !important; max-width: 980px !important; margin: -59px auto 0 !important; padding: 0 0 90px !important; } .g-val__stage-card { width: 100%; padding: 26px 32px 30px; border: 1px solid #ebf0ef; border-radius: 24px; background: #fff; box-shadow: 0 16px 45px rgba(9,81,72,.13), 0 2px 7px rgba(18,72,65,.06); } .g-val__stage-card .g-val__vehicle-mount { width: 100%; } .g-val__stage-card .g-val__stage-body { padding-top: 24px; } .g-val__stage-card .g-val__h { display: block; width: 100%; margin: 0 0 10px !important; padding: 0 0 13px; font-family: var(--g-gilroy); font-weight: 700; font-size: 26px; line-height: 1.24; text-align: left !important; color: #172320; } .g-val__stage-card .g-val__h::after { content: ""; display: block; width: 49px; height: 3px; margin-top: 10px; border-radius: 3px; background: #13806f; } .g-val__stage-card .g-val__lead { margin: 0 0 20px !important; text-align: left !important; color: #4f5e59; } /* Reuse the same integrated vehicle card across steps 2 and 3. */ .g-val__stage-card .g-val__vehicle { display: grid !important; grid-template-columns: 142px minmax(0,1fr) auto !important; grid-template-rows: 38px auto auto !important; align-items: start !important; justify-content: start !important; column-gap: 24px !important; row-gap: 10px !important; position: relative !important; min-height: 148px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 26px !important; border-bottom: 1px solid #e7ecec; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; } .g-val__stage-card .g-val__make { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; width: 142px !important; height: 140px !important; padding: 12px !important; border: 1px solid #e8edf0; border-radius: 15px; background: #f5f7f8; font-size: 18px; } .g-val__stage-card .g-val__make-logo { max-width: 112px !important; max-height: 112px !important; width: 100%; height: 100%; object-fit: contain; } .g-val__stage-card .g-val__plate { grid-column: 2; grid-row: 1; justify-self: start; align-self: start; height: 34px; margin: 0 !important; padding: 0 13px; border-radius: 8px; font-size: 18px; line-height: 34px; } .g-val__stage-card .g-val__vtext { grid-column: 2 / 4; grid-row: 2 / span 2; min-width: 0; gap: 9px !important; align-self: start; } .g-val__stage-card .g-val__vtitle { font-family: var(--g-gilroy); font-weight: 700; font-size: clamp(19px,2.2vw,26px); line-height: 1.24; white-space: normal; overflow-wrap: anywhere; color: #182523; } .g-val__stage-card .g-val__vspecs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; color: #4e5d59; } .g-val__stage-card .g-val__notyours { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 0 6px; padding: 4px 12px; border-radius: 100px; font-family: var(--g-gilroy); font-weight: 600; font-size: 13px; color: #075e50; background: #e1faf2; text-decoration: none; } .g-val__stage-card .g-val__change { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: static !important; width: auto; height: 36px; margin: 0 !important; padding: 0 13px; border: 1px solid #0b806e; border-radius: 9px; background: #fff; font-size: 13px; white-space: nowrap; } .g-val__stage-card .g-val__change::before { content: ""; flex: none; width: 16px; height: 16px; background: url("assets/images/icon-val-pencil-v22.svg") center / contain no-repeat; } .g-val[data-active-step="vehicle"] .g-val__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 24px; margin: 0 !important; } .g-val[data-active-step="vehicle"] .g-val__field label { margin-bottom: 8px; } .g-val[data-active-step="vehicle"] .g-val__field input, .g-val[data-active-step="vehicle"] .g-val__field select { min-height: 56px; border-radius: 10px; background: #f8fafb; } .g-val[data-active-step="vehicle"] .g-val__mot-hint { margin-top: 8px; display: block; } .g-val[data-active-step="vehicle"] .g-val__btn--grid { grid-column: 1 / -1; width: 100%; max-width: none; margin-top: 6px; } .g-val[data-active-step="result"] .g-val__result { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(270px, 1fr) minmax(330px, 1.08fr); overflow: hidden; border: 1px solid #ebf0ef; border-radius: 18px; background: #f8fbfa; box-shadow: none; } .g-val[data-active-step="result"] .g-val__specs { padding: 24px 26px 26px; background: #f0f6f5; } .g-val[data-active-step="result"] .g-val__specs-title { padding-bottom: 16px; font-size: 21px; line-height: 1.32; } .g-val[data-active-step="result"] .g-val__price { gap: 12px; padding: 28px 26px; background: #fff; } .g-val[data-active-step="result"] .g-val__range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; } .g-val[data-active-step="result"] .g-val__note { padding: 14px 16px; border-radius: 12px; background: #f5f7f8; } .g-val[data-active-step="result"] .g-val__btn--small { width: 100%; max-width: none; } .g-val[data-active-step="result"] .g-val__next { width: 100%; max-width: none; } /* ---------- Mobile hardening for details / vehicle / result ---------- */ @media (max-width: 781px) { .g-val[data-active-step="details"] .g-val__top:not([hidden]), .g-val[data-active-step="vehicle"] .g-val__top:not([hidden]), .g-val[data-active-step="result"] .g-val__top:not([hidden]) { height: 133px !important; min-height: 133px !important; padding: 18px 12px 46px !important; } .g-val[data-active-step="vehicle"] .g-val__progress, .g-val[data-active-step="result"] .g-val__progress { width: 100%; } .g-val[data-active-step="vehicle"] .g-val__progress-item, .g-val[data-active-step="result"] .g-val__progress-item { font-size: 11px; gap: 7px; } .g-val[data-active-step="vehicle"] .g-val__progress-circle, .g-val[data-active-step="result"] .g-val__progress-circle { width: 31px; height: 31px; font-size: 16px; } .g-val[data-active-step="vehicle"] .g-val__progress-item:not(:last-child)::after, .g-val[data-active-step="result"] .g-val__progress-item:not(:last-child)::after { top: 15px; left: calc(50% + 19px); right: calc(-50% + 19px); } .g-val[data-active-step="vehicle"] .g-val__main, .g-val[data-active-step="result"] .g-val__main { width: calc(100% - 26px) !important; margin-top: -40px !important; padding: 0 0 52px !important; } .g-val__stage-card { padding: 17px 15px 20px; border-radius: 18px; } .g-val__stage-card .g-val__vehicle, .g-val[data-active-step="details"] .g-val__details-card .g-val__vehicle { grid-template-columns: 84px minmax(0,1fr) !important; grid-template-rows: 30px auto auto auto !important; column-gap: 12px !important; row-gap: 8px !important; padding-bottom: 18px !important; min-height: 0 !important; } .g-val__stage-card .g-val__make, .g-val[data-active-step="details"] .g-val__details-card .g-val__make { grid-column: 1; grid-row: 1 / 4; width: 84px !important; height: 88px !important; padding: 7px !important; border-radius: 12px; } .g-val__stage-card .g-val__make-logo, .g-val[data-active-step="details"] .g-val__details-card .g-val__make-logo { max-width: 70px !important; max-height: 72px !important; } .g-val__stage-card .g-val__plate, .g-val[data-active-step="details"] .g-val__details-card .g-val__plate { grid-column: 2; grid-row: 1; height: 29px; padding: 0 10px; font-size: 14px; } .g-val__stage-card .g-val__vtext, .g-val[data-active-step="details"] .g-val__details-card .g-val__vtext { grid-column: 2; grid-row: 2 / 4; gap: 7px !important; min-width: 0; } .g-val__stage-card .g-val__vtitle, .g-val[data-active-step="details"] .g-val__details-card .g-val__vtitle { font-size: clamp(14px,4.2vw,18px); line-height: 1.24; overflow-wrap: anywhere; } .g-val__stage-card .g-val__vspecs, .g-val[data-active-step="details"] .g-val__details-card .g-val__vspecs { font-size: 12px; line-height: 1.45; gap: 6px; } .g-val__stage-card .g-val__notyours, .g-val[data-active-step="details"] .g-val__details-card .g-val__notyours { margin: 2px 0 0; font-size: 11px; min-height: 28px; padding: 4px 9px; } .g-val__stage-card .g-val__change, .g-val[data-active-step="details"] .g-val__details-card .g-val__change { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-top: 2px !important; padding: 0 10px; height: 31px; font-size: 11px; } .g-val__stage-card .g-val__change::before, .g-val[data-active-step="details"] .g-val__details-card .g-val__change::before { width: 14px; height: 14px; } .g-val__stage-card .g-val__stage-body { padding-top: 18px; } .g-val__stage-card .g-val__h { font-size: 23px; margin-bottom: 12px !important; padding-bottom: 3px; } .g-val__stage-card .g-val__lead { margin-bottom: 16px !important; font-size: 14px; line-height: 1.45; } .g-val[data-active-step="vehicle"] .g-val__grid { grid-template-columns: minmax(0,1fr); gap: 12px !important; } .g-val[data-active-step="result"] .g-val__result { grid-template-columns: minmax(0,1fr); } .g-val[data-active-step="result"] .g-val__specs { padding: 18px 16px 16px; } .g-val[data-active-step="result"] .g-val__price { order: 2; padding: 20px 16px 22px; } .g-val[data-active-step="result"] .g-val__range { gap: 8px; } } @media (max-width: 350px) { .g-val__stage-card, .g-val[data-active-step="details"] .g-val__details-card { padding-inline: 11px; } .g-val__stage-card .g-val__vehicle, .g-val[data-active-step="details"] .g-val__details-card .g-val__vehicle { grid-template-columns: 72px minmax(0,1fr) !important; column-gap: 10px !important; } .g-val__stage-card .g-val__make, .g-val[data-active-step="details"] .g-val__details-card .g-val__make { width: 72px !important; height: 78px !important; } .g-val__stage-card .g-val__make-logo, .g-val[data-active-step="details"] .g-val__details-card .g-val__make-logo { max-width: 60px !important; max-height: 66px !important; } } /* GCG v24.1 verified CSS — active theme marker: gcg-v241-sourcefix */ /* ===================================================================== v25 — Valuation flow mobile conflict repair These scoped rules supersede legacy global mobile !important overrides. Applies ONLY to valuation steps; homepage and other client pages unchanged. ===================================================================== */ @media (max-width: 781px) { /* Keep the numbered stepper clear of the persistent mobile site header. */ .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) .g-val__top:not([hidden]) { display: flex !important; align-items: flex-start !important; justify-content: center !important; box-sizing: border-box !important; height: 170px !important; min-height: 170px !important; margin: 0 !important; padding: 29px 16px 55px !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) .g-val__progress { width: min(100%, 390px) !important; margin: 0 auto !important; padding: 0 !important; align-self: flex-start !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) .g-val__progress-item { font-size: 11px !important; line-height: 1.28 !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) .g-val__main { box-sizing: border-box !important; width: calc(100% - 28px) !important; max-width: 540px !important; margin: -28px auto 0 !important; padding: 0 0 52px !important; } .g-val[data-active-step="details"] .g-val__details-card, .g-val:is([data-active-step="vehicle"],[data-active-step="result"]) .g-val__stage-card { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; padding: 20px 17px 22px !important; border-radius: 20px !important; } /* The same two-column vehicle summary is reused on every step. Column 1 = logo, column 2 = registration, title, specs and actions. */ .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__vehicle { box-sizing: border-box !important; display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; align-items: start !important; column-gap: 14px !important; row-gap: 7px !important; width: 100% !important; min-height: 0 !important; height: auto !important; padding: 0 0 21px !important; margin: 0 !important; position: relative !important; background: #fff !important; overflow: visible !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__make { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; justify-self: start !important; box-sizing: border-box !important; width: 78px !important; height: 82px !important; padding: 10px !important; border-radius: 12px !important; overflow: hidden !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__make-logo { display: block; width: 100% !important; height: 100% !important; max-width: 58px !important; max-height: 60px !important; object-fit: contain !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__plate { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; align-self: start !important; display: flex !important; align-items: center !important; height: 32px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; font-size: 15px !important; line-height: 1 !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__vtext { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__vtitle { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; font-size: clamp(15px, 4.15vw, 19px) !important; font-weight: 700 !important; line-height: 1.28 !important; white-space: normal !important; overflow-wrap: anywhere !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__vspecs { width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin: 0 !important; font-size: 12px !important; line-height: 1.5 !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__notyours { margin: 1px 0 0 !important; padding: 5px 9px !important; font-size: 11px !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__change { grid-column: 2 !important; grid-row: 3 !important; align-self: start !important; justify-self: start !important; position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; min-height: 34px !important; height: auto !important; margin: 4px 0 0 !important; padding: 7px 10px !important; font-size: 12px !important; font-weight: 600 !important; white-space: normal !important; text-align: center !important; } .g-val[data-active-step="details"] .g-val__details-body, .g-val:is([data-active-step="vehicle"],[data-active-step="result"]) .g-val__stage-body { padding-top: 20px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__h, .g-val:is([data-active-step="vehicle"],[data-active-step="result"]) .g-val__stage-card .g-val__h { font-size: clamp(22px, 6vw, 26px) !important; margin: 0 0 18px !important; line-height: 1.2 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__form { width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 13px !important; margin: 0 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__form .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; overflow: hidden !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 55px !important; padding: 0 12px 0 52px !important; font-size: 15px !important; line-height: 1.25 !important; background-repeat: no-repeat !important; background-position: 17px center !important; background-size: 21px 21px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input::placeholder { font-size: 14px !important; opacity: 1 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check { margin: 2px 0 0 !important; gap: 10px !important; font-size: 14px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__btn { min-height: 56px !important; height: auto !important; padding: 12px 15px !important; font-size: 16px !important; line-height: 1.35 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info { box-sizing: border-box !important; width: 100% !important; min-height: 0 !important; padding: 17px 15px 17px 70px !important; margin: 18px 0 0 !important; text-align: left !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info::before { box-sizing: border-box !important; left: 16px !important; top: 50% !important; width: 39px !important; height: 40px !important; background-size: 32px 32px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-title { font-size: 15px !important; line-height: 1.35 !important; margin: 0 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-text { font-size: 13px !important; line-height: 1.45 !important; margin: 5px 0 0 !important; } } @media (max-width: 359px) { .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) .g-val__main { width: calc(100% - 20px) !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__vehicle { grid-template-columns: 64px minmax(0,1fr) !important; column-gap: 10px !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__make { width: 64px !important; height: 70px !important; padding: 7px !important; } .g-val:is([data-active-step="details"],[data-active-step="vehicle"],[data-active-step="result"],[data-active-step="calculating"]) :is(.g-val__details-card,.g-val__stage-card) .g-val__make-logo { max-width: 50px !important; max-height: 54px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__input { font-size: 14px !important; padding-left: 45px !important; background-position-x: 13px !important; } } @media (max-width: 359px) { /* Keep the optional-phone guidance legible even on 320px devices. */ .g-val[data-active-step="details"] .g-val__details-card .g-val__input--phone, .g-val[data-active-step="details"] .g-val__details-card .g-val__input--phone::placeholder { font-size: 11.5px !important; } } /* =========================================================================== GCG 2.6.0 — fixed VAT interaction; single-line range; synced calc card; explicit Ford far/front tyre contact shadow. These rules override legacy CSS. =========================================================================== */ /* Replace the disguised 1x1 checkbox with a genuinely interactive native control. Entire 44px label row is clickable/tappable; selection remains a real form value. */ .g-val[data-active-step="details"] .g-val__details-card .g-val__check { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; min-height: 44px !important; gap: 11px !important; cursor: pointer !important; user-select: none; pointer-events: auto !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check input[type="checkbox"] { box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; position: static !important; inset: auto !important; flex: 0 0 23px !important; display: block !important; width: 23px !important; height: 23px !important; min-width: 23px !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; border: 2px solid #13806f !important; border-radius: 5px !important; background-color: #fff !important; cursor: pointer !important; pointer-events: auto !important; vertical-align: middle !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check input[type="checkbox"]:checked { border-color: #13806f !important; background: #13806f url("assets/images/icon-val-check.svg") center / 15px 15px no-repeat !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(19,128,111,.4) !important; outline-offset: 3px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__check .g-val__box { display: none !important; } /* Loading screen shares precisely the same header, progress and white vehicle panel as the other stages; no second banner containing the vehicle. */ .g-val[data-active-step="calculating"] { background: #f6faf9; } .g-val[data-active-step="calculating"] .g-val__top:not([hidden]) { position: relative !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; box-sizing: border-box !important; height: 188px !important; min-height: 188px !important; margin: 0 !important; padding: 30px 24px 55px !important; background: linear-gradient(116deg,#075e50,#0a806d 66%,#1bbaa0) !important; } .g-val[data-active-step="calculating"] .g-val__progress { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 0 !important; width: min(100%,660px) !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; color: #fff !important; } .g-val[data-active-step="calculating"] .g-val__progress-item { position: relative !important; flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.25 !important; text-align: center !important; } .g-val[data-active-step="calculating"] .g-val__progress-item:not(:last-child)::after { content: "" !important; position: absolute !important; top: 19px !important; left: calc(50% + 27px) !important; right: calc(-50% + 27px) !important; height: 2px !important; background: rgba(255,255,255,.58) !important; } .g-val[data-active-step="calculating"] .g-val__progress-circle { box-sizing: border-box !important; display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; border: 2px solid rgba(255,255,255,.58) !important; border-radius: 50% !important; background: rgba(5,65,55,.35) !important; color: #e2f7ef !important; font-size: 19px !important; } .g-val[data-active-step="calculating"] .g-val__progress-item:is(.is-current,.is-complete) .g-val__progress-circle { background: #fff !important; color: #075e50 !important; border-color: #fff !important; } .g-val[data-active-step="calculating"] .g-val__progress-item.is-upcoming { opacity: .75; } .g-val[data-active-step="calculating"] .g-val__main { box-sizing: border-box !important; width: min(calc(100% - 40px),980px) !important; max-width: 980px !important; margin: -59px auto 0 !important; padding: 0 0 90px !important; position: relative !important; z-index: 3 !important; } .g-val__stage-card--calculating .g-val__calc { box-sizing: border-box !important; width: min(100%,700px) !important; max-width: 100% !important; margin: 0 auto !important; padding: 30px 0 4px !important; } .g-val__stage-card--calculating .g-val__calc .g-val__h { text-align: center !important; padding: 0 !important; font-size: clamp(23px,3.2vw,34px) !important; } .g-val__stage-card--calculating .g-val__calc .g-val__h::after { display: none !important; } .g-val__stage-card--calculating .g-val__calc .g-val__lead { margin: 0 0 18px !important; text-align: center !important; } .g-val__stage-card--calculating .g-val__tasks li { min-width: 0; word-break: normal; overflow-wrap: anywhere; } /* One-line price ranges on desktop, tablet and mobile; a narrow font-size scales down before the text can wrap. Keep each amount independently stable. */ .g-val[data-active-step="result"] .g-val__price [data-estimate] { min-width: 0 !important; width: 100% !important; } .g-val[data-active-step="result"] .g-val__range { box-sizing: border-box !important; display: flex !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: nowrap !important; white-space: nowrap !important; width: 100% !important; max-width: 100% !important; gap: clamp(5px,1vw,13px) !important; margin: 0 !important; padding: 0 !important; font-family: var(--g-gilroy) !important; font-size: clamp(24px,2.3vw,34px) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; letter-spacing: -.035em !important; line-height: 1.18 !important; } .g-val[data-active-step="result"] .g-val__range > span, .g-val[data-active-step="result"] .g-val__range > small { white-space: nowrap !important; flex: 0 0 auto !important; min-width: 0 !important; font-variant-numeric: tabular-nums !important; } .g-val[data-active-step="result"] .g-val__range > small { font-size: .43em !important; font-weight: 500 !important; text-transform: none !important; } .g-val[data-active-step="result"] .g-val__result { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) !important; } .g-val[data-active-step="result"] .g-val__price { min-width: 0 !important; } .g-val[data-active-step="result"] .g-val__exvat:not([hidden]) { margin-top: 13px !important; margin-bottom: 8px !important; } /* The far-side Ford front tyre (near x44% of the transparent image) was the missing grounding point; a narrow contact patch plus a soft falloff looks more realistic than a broad rectangular silhouette. */ @media (min-width: 1200px) { .g-home .g-hero__img::before { content: "" !important; display: block !important; background: radial-gradient(ellipse 11% 3.2% at 44.1% 72.3%, rgba(0,18,15,.78), rgba(0,18,15,.35) 48%, transparent 84%), radial-gradient(ellipse 16% 4.8% at 11% 70%, rgba(1,22,17,.78), rgba(1,22,17,.22) 60%, transparent 88%), radial-gradient(ellipse 17% 5.0% at 27.5% 75.2%, rgba(1,22,17,.9), rgba(1,22,17,.4) 54%, transparent 90%), radial-gradient(ellipse 19% 4.7% at 55% 68.3%, rgba(1,22,17,.75), rgba(1,22,17,.18) 60%, transparent 88%), radial-gradient(ellipse 16.5% 5.1% at 78.2% 65.8%, rgba(1,22,17,.78), rgba(1,22,17,.18) 60%, transparent 89%), radial-gradient(ellipse 52% 13% at 44% 74%, rgba(0,20,16,.23), rgba(0,20,16,.07) 60%, transparent 88%) !important; } } @media (max-width: 1199px) { .g-home .g-hero__img::before { content: "" !important; display: block !important; background: radial-gradient(ellipse 12% 4% at 44.1% 72.3%, rgba(0,18,15,.7), rgba(0,18,15,.22) 53%, transparent 90%), radial-gradient(ellipse 23% 5.6% at 13% 70.5%, rgba(1,22,17,.64), rgba(1,22,17,.2) 60%, transparent 85%), radial-gradient(ellipse 22% 5.9% at 29% 75.8%, rgba(1,22,17,.78), rgba(1,22,17,.26) 60%, transparent 85%), radial-gradient(ellipse 23% 5.6% at 55.5% 68.5%, rgba(1,22,17,.7), rgba(1,22,17,.24) 60%, transparent 85%), radial-gradient(ellipse 21% 6.1% at 77.5% 66.2%, rgba(1,22,17,.75), rgba(1,22,17,.26) 60%, transparent 86%) !important; } } @media (max-width: 781px) { .g-val[data-active-step="calculating"] .g-val__top:not([hidden]) { height: 170px !important; min-height: 170px !important; padding: 29px 16px 55px !important; } .g-val[data-active-step="calculating"] .g-val__progress { width: min(100%,390px) !important; } .g-val[data-active-step="calculating"] .g-val__progress-item { font-size: 11px !important; gap: 7px !important; } .g-val[data-active-step="calculating"] .g-val__progress-circle { width: 31px !important; height: 31px !important; font-size: 16px !important; } .g-val[data-active-step="calculating"] .g-val__progress-item:not(:last-child)::after { top: 15px !important; left: calc(50% + 19px) !important; right: calc(-50% + 19px) !important; } .g-val[data-active-step="calculating"] .g-val__main { width: calc(100% - 28px) !important; max-width: 540px !important; margin: -28px auto 0 !important; padding-bottom: 52px !important; } .g-val__stage-card--calculating { box-sizing: border-box !important; padding: 20px 17px 24px !important; } .g-val__stage-card--calculating .g-val__calc { padding-top: 24px !important; } .g-val__stage-card--calculating .g-val__tasks li { gap: 9px !important; padding: 12px 10px !important; font-size: 13px !important; } .g-val__stage-card--calculating .g-val__tasks em { font-size: 11px !important; } .g-val[data-active-step="result"] .g-val__result { grid-template-columns: minmax(0,1fr) !important; } .g-val[data-active-step="result"] .g-val__range { justify-content: center !important; font-size: clamp(15px,4.8vw,26px) !important; gap: clamp(3px,1.2vw,8px) !important; } } @media (min-width: 782px) and (max-width: 1050px) { .g-val[data-active-step="result"] .g-val__range { font-size: clamp(19px,2.5vw,27px) !important; gap: 5px !important; } } /* GCG v27: smoother approved curve uses updated hero-v21-desktop-wave.svg */ @media (max-width: 1199px) { /* Use the actual width of the mobile column instead of the former 33ch cap. This shortens the paragraph so the valuation card and cars sit higher. */ .g-home .g-hero .g-hero__text { width: 100% !important; max-width: 100% !important; padding-inline: 0 !important; margin-inline: auto !important; font-size: clamp(14px, 3.75vw, 16px) !important; line-height: 1.44 !important; text-align: center !important; text-wrap: pretty; } } /* GCG v27: query-string lookup arrives directly here, never showing the empty start form. */ .g-val__step.g-val__lookup { width: min(100%, 690px); margin: 0 auto; padding: clamp(36px,8vh,85px) 12px 52px; } .g-val__lookup-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 245px; gap: 18px; padding: 35px 16px; border-radius: 22px; background: #fff; border: 1px solid #e8f0ed; box-shadow: 0 12px 35px rgba(0,53,42,.06); text-align: center; } .g-val__lookup-card .g-val__spinner { position: relative; margin: 0 auto 0; } .g-val__lookup-card .g-val__h { margin: 0 !important; font-size: clamp(23px, 5vw, 32px) !important; text-align: center !important; } .g-val__lookup-card .g-val__lead { margin: 0 !important; max-width: 36ch; text-align: center !important; font-size: 15px; } /* Keep native hidden semantics even where older theme CSS sets display: flex !important. */ .g-val__step[hidden], .g-val__top[hidden], .g-val__vehicle[hidden] { display:none !important; } /* ======================================================================== GCG v28 — collision-proof vehicle valuation information panel. The old ::before icon was absolutely positioned over copy because v21/v25 mobile rules changed container padding. A real grid child reserves space. Works for the contact-details step at every responsive breakpoint. ======================================================================== */ .g-val[data-active-step="details"] .g-val__details-card .g-val__info { box-sizing: border-box !important; display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; align-items: center !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 21px 24px !important; margin: 18px 0 0 !important; text-align: left !important; overflow: hidden; } /* Disable the legacy absolute icon completely. */ .g-val[data-active-step="details"] .g-val__details-card .g-val__info::before { content: none !important; display: none !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-icon { box-sizing: border-box; display: block; grid-column: 1; grid-row: 1; align-self: stretch; min-width: 0; width: 56px; min-height: 54px; border-right: 1px solid #bbdfd4; background: url("assets/images/icon-val-chart-v22.svg") left center / 36px 36px no-repeat; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-copy { display: block; grid-column: 2; grid-row: 1; min-width: 0; width: 100%; overflow-wrap: break-word; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-title { margin: 0 !important; line-height: 1.3 !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-text { margin: 6px 0 0 !important; line-height: 1.45 !important; } @media (max-width: 781px) { .g-val[data-active-step="details"] .g-val__details-card .g-val__info { grid-template-columns: 42px minmax(0,1fr) !important; gap: 12px !important; padding: 15px 16px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-icon { width: 42px; min-height: 42px; background-size: 28px 28px; } } @media (max-width: 359px) { .g-val[data-active-step="details"] .g-val__details-card .g-val__info { grid-template-columns: 34px minmax(0,1fr) !important; gap: 9px !important; padding: 13px 11px !important; } .g-val[data-active-step="details"] .g-val__details-card .g-val__info-icon { width: 34px; min-height: 36px; background-size: 24px 24px; } } /* Calendar availability: closed slots cannot be selected. */ .g-val__slot:disabled, .g-val__slot[aria-disabled="true"] { opacity: .42; cursor: not-allowed; background: #f0f2f2; } .g-val__availability-note { margin: 0 0 14px; color: #496861; font-size: 14px; line-height: 1.5; }