/* ========================================================================== Plumbzo — clone of https://plumbzo.framer.website/ Static HTML/CSS/vanilla JS. No build, no framework, no CDN. Every value here was measured with getComputedStyle on the live site; see docs/research/ for the specs. ========================================================================== */ /* ---------- Fonts ---------- */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/PlusJakartaSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { /* Repair Direct oranje (uit het logo gemeten), i.p.v. Plumbzo #fe5922 */ --orange: #ff6a00; --orange-alt: #f25c00; --orange-deep: #d95500; --orange-sel: #ff6a0066; --white: #fff; --black: #000; --ink: #131312; --muted: #6e6e6f; --muted-2: #6e6f6f; --grey-f4: #f4f4f4; --grey-f3: #f3f3f3; --grey-f2: #f2f3f3; --grey-f7: #f7f7f7; --grey-fa: #fafafa; --grey-f8: #f8f9f8; --cream: #fef5ef; --border-grey: #d8d8d8; --gutter: 80px; --content: 1105px; --radius-card: 18px; --radius-lg: 24px; --radius-pill: 59px; /* Easing curves, recovered verbatim from the original's Framer Motion transition literals (see docs/research/ANIMATION_PARAMS.md). Framer uses a different curve per subsystem — one shared curve is what made the first pass feel wrong. */ --ease: cubic-bezier(0.44, 0, 0.56, 1); /* variant / hover / accordion — the "standard" one */ --ease-appear: cubic-bezier(0.44, 0, 0, 1); /* scroll appear — hard ease-out */ --ease-roll: cubic-bezier(0.44, 0, 0, 0.98); /* rolling text */ --ease-arrow: cubic-bezier(0.44, 0, 0, 0.99); /* arrow swap */ --ease-social: cubic-bezier(0.44, 0, 0.12, 0.98); --ease-text: cubic-bezier(0.44, 0, 0, 0.99); /* heading + subline blur-up */ --reveal-dur: 0.8s; --dur-variant: 0.4s; /* card / accordion / chevron */ --dur-roll: 0.6s; /* rolling text + arrow swap */ --dur-hdr: 0.45s; /* header: pill, logo-crossfade, linkkleur */ --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* The original sets --framer-letter-spacing: -.03em on every text node, so the tracking scales with each element's own font-size. Declaring it once on would resolve the em against 16px and then inherit that fixed px value to the 64px headings — which is wrong. Declaring it universally keeps it proportional. */ *, *::before, *::after { letter-spacing: -0.03em; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } /* Anchor landing offsets. The original carries no Lenis offset and no scroll-padding — it puts scroll-margin-top on the targets themselves. */ section[id] { scroll-margin-top: 30px; } #hero { scroll-margin-top: 0; } #contact-us { scroll-margin-top: 110px; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Smooth-scroll shell (Lenis equivalent) — see main.js */ html.smooth, html.smooth body { height: auto; } html.smooth body { overflow: hidden; } #scroll-content { will-change: transform; } img, svg, video { display: block; max-width: 100%; } img { border-style: none; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--orange-sel); color: var(--black); } /* ---------- Type scale ---------- */ .t-eyebrow { font-size: 16px; line-height: 19.2px; font-weight: 500; color: var(--orange); } .t-eyebrow-up { font-size: 16px; line-height: 17.6px; font-weight: 600; color: var(--orange); text-transform: uppercase; } .t-h1 { font-size: 64px; line-height: 1.1em; font-weight: 600; } .t-h2 { font-size: 56px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .t-h3 { font-size: 24px; line-height: 1.1em; font-weight: 600; } .t-body{ font-size: 18px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .t-sm { font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .accent { color: var(--orange); } /* ---------- Shared layout ---------- */ .section { position: relative; padding: 80px var(--gutter); background: var(--white); overflow: clip; } .container { width: 100%; max-width: 1440px; margin-inline: auto; display: flex; flex-direction: column; gap: 80px; } .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } .sec-head.is-center { align-items: center; text-align: center; } .head-wrap { display: flex; flex-direction: column; align-items: inherit; gap: 20px; } /* ---------- Reveal ---------- Pre-state applies only under .js, so the page stays readable without JavaScript instead of rendering a column of invisible blocks. */ .js .reveal { opacity: 0; transform: translateY(30px); will-change: transform, opacity; } .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--reveal-dur) var(--ease-appear), transform var(--reveal-dur) var(--ease-appear); transition-delay: var(--d, 0s); } /* Footer blocks travel further: 70px desktop, 60 tablet, 50 phone. */ .js .reveal-lg { opacity: 0; transform: translateY(70px); will-change: transform, opacity; } .reveal-lg.is-in { opacity: 1; transform: none; transition: opacity var(--reveal-dur) var(--ease-appear), transform var(--reveal-dur) var(--ease-appear); transition-delay: var(--d, 0s); } /* Footer decorative strip drops in from above instead of rising. */ .js .reveal-down { opacity: 0; transform: translateY(-90px); will-change: transform, opacity; } .reveal-down.is-in { opacity: 1; transform: none; transition: opacity var(--reveal-dur) var(--ease-appear), transform var(--reveal-dur) var(--ease-appear); transition-delay: var(--d, 0s); } /* ---------- Text appear effect ---------- Framer splits every heading into WORDS and blurs them up one at a time: effect { opacity:.001, filter:blur(4px), y:40 } transition { delay:.05, duration:.8, ease:[.44,0,0,.99] } tokenization: 'word', trigger: 'onInView', threshold 0, once The runtime feeds that through Motion's stagger(0.05, {startDelay:0}), so word i starts at i * 50ms. */ .tw-word { display: inline-block; } .js .tw .tw-word { opacity: 0.001; filter: blur(4px); transform: translateY(40px); will-change: transform, opacity, filter; } .tw.is-in .tw-word { opacity: 1; filter: blur(0); transform: none; transition: opacity 0.8s var(--ease-text), filter 0.8s var(--ease-text), transform 0.8s var(--ease-text); transition-delay: calc(var(--i, 0) * 0.05s); } /* Sublines use the same effect at element level (not split), y:30, startDelay .3 */ .js .reveal-blur { opacity: 0.001; filter: blur(4px); transform: translateY(30px); will-change: transform, opacity, filter; } .reveal-blur.is-in { opacity: 1; filter: blur(0); transform: none; transition: opacity 0.8s var(--ease-text), filter 0.8s var(--ease-text), transform 0.8s var(--ease-text); transition-delay: 0.3s; } /* Framer's own reduced-motion rule: opacity still animates, transforms snap. */ @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-lg, .js .reveal-down { transform: none !important; } .reveal.is-in, .reveal-lg.is-in, .reveal-down.is-in { transition: opacity var(--reveal-dur) var(--ease-appear); } .js .tw .tw-word, .js .reveal-blur { transform: none !important; filter: none !important; } .tw.is-in .tw-word, .reveal-blur.is-in { transition: opacity 0.8s var(--ease-text); } .ticker-track { transform: none !important; } } /* ========================================================================== Rolling Text (BEHAVIORS.md §3) Each character is its own ; the hover copy is painted by text-shadow one line-height below, then the spans translate up to reveal it. ========================================================================== */ .roll { --rt-size: 18px; --rt-lh: calc(var(--rt-size) * 1.3); --rt-color: var(--white); display: flex; overflow: hidden; width: max-content; height: var(--rt-lh); margin: 0; font-size: var(--rt-size); user-select: none; text-shadow: 0 var(--rt-lh) 0 var(--rt-color); } /* Per-character delay is Framer's formula, not a fixed step: delay(i) = (duration / N) * i * (stagger / 100), duration .6s, stagger 40 which collapses to 0.24s * i / N — so the sweep always lasts ~0.24s no matter how long the word is. A fixed ms-per-character (what this used to do) makes long labels like "Water Heater Repair" ripple far too slowly. */ .roll span { display: block; white-space: pre; flex-shrink: 0; line-height: 1.3em; color: var(--rt-color); backface-visibility: hidden; transition: transform var(--dur-roll) var(--ease-roll); transition-delay: calc(0.24s * var(--i, 0) / var(--n, 1)); } .roll-host:hover .roll span, .roll-host:focus-visible .roll span { transform: translateY(calc(var(--rt-lh) * -1)); } /* ---------- Pill buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: 14px 24px 16px; overflow: hidden; } /* Original uses a spring {bounce:.2, duration:.4}. CSS has no springs; on a colour change the overshoot is imperceptible, so a .4s curve is a faithful stand-in. */ .btn { transition: background-color var(--dur-variant) var(--ease), box-shadow var(--dur-variant) var(--ease); } .btn-primary { background: var(--orange); } .btn-primary:hover { background: var(--orange-alt); } .btn-primary .roll { --rt-color: var(--white); } /* inset shadow, not a real border — a border would add 2px to the pill height */ .btn-white { background: var(--white); padding-left: 52px; } .btn-white:hover { background: var(--grey-f8); box-shadow: inset 0 0 0 1px var(--border-grey); } .btn-white .roll { --rt-color: var(--ink); } .btn-white .btn-icon { position: absolute; left: 23px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink); } /* Zelfde behandeling voor een icoon in de oranje knop (contact-hero) — zonder maat valt de svg terug op de 300x150-default en blaast hij de knop op. */ .btn-primary:has(.btn-icon) { padding-left: 52px; } .btn-primary .btn-icon { position: absolute; left: 23px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--white); } /* ---------- Arrow swap button (BEHAVIORS.md §4) ---------- */ .arrow-btn { position: relative; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 1000px; background: var(--orange); overflow: clip; flex: none; } .arrow-btn .ar { width: 16px; height: 14px; color: var(--white); transition: transform var(--dur-roll) var(--ease-arrow); } .arrow-btn .ar-2 { position: absolute; transform: translate(-26px, 26px); } .roll-host:hover .arrow-btn .ar-1, .arrow-btn:hover .ar-1 { transform: translate(26px, -26px); } .roll-host:hover .arrow-btn .ar-2, .arrow-btn:hover .ar-2 { transform: translate(0, 0); } /* ---------- Icons ---------- */ .ico { display: block; } .ico use { stroke: currentColor; } /* ========================================================================== Header ========================================================================== */ .hdr-fix { position: fixed; top: 0; left: 0; right: 0; z-index: 10; } .hdr { height: 104px; padding: 26px var(--gutter); display: flex; align-items: center; justify-content: center; background: transparent; } .hdr-bar { width: 100%; max-width: 1600px; display: flex; align-items: center; justify-content: space-between; } .hdr-logo { width: 160px; } .hdr-logo img { width: auto; height: 36px; } .hdr-nav > ul { display: flex; align-items: center; gap: 40px; } .hdr-nav > ul > li { position: relative; } .hdr-nav .roll-host { display: inline-flex; align-items: center; gap: 7px; } .hdr-nav .roll { --rt-color: var(--white); } .hdr-cta { width: 160px; display: flex; justify-content: flex-end; } .hdr-cta .btn { gap: 12px; padding: 14.5px 24px; } /* The drawer only exists below 810px. Without this it is a plain block-level div and renders under the header on desktop. */ .hdr-drawer { display: none; } .hdr-burger { display: none; width: 44px; height: 44px; place-content: center; /* niet place-items: anders rekken de rijen op */ justify-items: center; gap: 5px; /* 2px streep + 5px gap = 7px hart-op-hart */ } .hdr-burger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background-color var(--dur-hdr) var(--ease); } /* Scroll-state: boven de hero transparant met wit logo en witte links, na 12px scroll een witte balk met donker logo en inkt-links. Bewuste afwijking van Plumbzo (daar altijd transparant): op deze site vielen de witte links weg boven witte secties. */ .hdr { transition: height var(--dur-hdr) var(--ease), padding var(--dur-hdr) var(--ease); } /* De twee logo's liggen over elkaar en crossfaden. Een display-wissel gaf een harde sprong midden in de vloeiende overgang. logo-top blijft in de flow en bepaalt dus de ruimte; de donkere variant ligt er absoluut overheen. */ .hdr-logo a { position: relative; display: inline-flex; } .hdr-logo img { transition: opacity var(--dur-hdr) var(--ease); } .hdr-logo .logo-scrolled { position: absolute; left: 0; top: 0; opacity: 0; } .hdr-fix.is-scrolled .logo-top, .hdr-fix.has-drawer .logo-top { opacity: 0; } .hdr-fix.is-scrolled .logo-scrolled, .hdr-fix.has-drawer .logo-scrolled { opacity: 1; } /* Linkkleur mee laten faden. De per-teken vertraging hoort alleen bij de roll-transform; op kleur zou die de wissel uitsmeren over 0,24s. */ .hdr-nav .roll { transition: text-shadow var(--dur-hdr) var(--ease); } .hdr-nav .roll span { transition: transform var(--dur-roll) var(--ease-roll) calc(0.24s * var(--i, 0) / var(--n, 1)), color var(--dur-hdr) var(--ease) 0s; } .hdr-fix.is-scrolled .hdr-nav .roll { --rt-color: var(--ink); } .hdr-fix.is-scrolled .hdr-burger span, .hdr-fix.has-drawer .hdr-burger span { background: var(--ink); } /* ========================================================================== Hero ========================================================================== */ /* Verbatim from the original. The content block is 880px (200 + 560 + 120), so min-content clamps to max-height 800 — but min-height beats max-height in CSS, so on any viewport taller than 800px the hero goes FULL SCREEN. Measured on the original: 800px at vh 720, 1000px at vh 1000. */ .hero { position: relative; height: min-content; min-height: 100vh; max-height: 800px; padding: 200px 80px 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--black); overflow: clip; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Two scrims sit between the photo and the copy (both z-index 1). Without them the white text sits straight on a bright kitchen photo and is unreadable. */ .hero-scrim { position: absolute; inset: 0; z-index: 1; overflow: clip; } .hero-scrim-nav { background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.09) 13%); } .hero-scrim-content { background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.09) 66%); } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1600px; display: flex; flex-direction: column; align-items: flex-start; gap: 132px; } .hero-top { display: flex; flex-direction: column; gap: 40px; } .hero-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* Framer draws this border with a [data-border]::after overlay, so it does not grow the box — an inset shadow reproduces that without adding 2px. */ .pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; box-shadow: inset 0 0 0 1px var(--white); border-radius: 67px; color: var(--white); font-size: 16px; line-height: 1.2em; font-weight: 500; } .hero-text { display: flex; flex-direction: column; gap: 28px; } .hero h1 { max-width: 786px; color: var(--white); } .hero-desc { max-width: 590px; color: var(--grey-f4); } .hero-buttons { display: flex; gap: 16px; } /* Each avatar sits in a 32px slot but is 46px wide, so it overlaps its neighbour by 14px. The global `img { max-width: 100% }` was clamping them back to 32px and killing the overlap. */ /* EVERY slot is 32px, including the last — the 46px image simply overflows it. Widening the last slot to 46 made the row 14px too wide, which pushed the centred "Trusted by 2500+" block 7px off. */ .avatars-row { display: flex; align-items: center; padding-right: 10px; } .avatars-row .av { width: 32px; } .avatars-row img { width: 46px; height: 46px; max-width: none; border-radius: 100px; object-fit: cover; } .hero-review { display: flex; align-items: center; gap: 17px; } .rating-wrap { display: flex; flex-direction: column; gap: 10px; } .stars { display: block; color: var(--grey-f4); } .rating-text { display: flex; align-items: center; gap: 6px; } .rating-text p { font-size: 12px; line-height: 1.1em; font-weight: 500; color: var(--grey-f4); } /* Hero USP-rij — vervangt Plumbzo's review-avatars (geen verzonnen reviews, conform de Repair Direct-README). Zelfde plek, zelfde reveal-delay. */ .hero-usps { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .hero-usps li { display: flex; align-items: center; gap: 8px; } .hero-usps .ico { width: 18px; height: 18px; color: var(--orange); flex: none; } .hero-usps span { font-size: 14px; line-height: 1.2em; font-weight: 500; color: var(--grey-f4); } /* ========================================================================== Subpagina-componenten (multipager) ========================================================================== */ /* Kleinere donkere hero voor subpagina's — zelfde foto+scrim-opbouw als home */ .page-hero { position: relative; min-height: 560px; padding: 180px 80px 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--black); overflow: clip; } .page-hero .hero-inner { gap: 0; } .page-hero h1 { max-width: 900px; color: var(--white); font-size: 56px; line-height: 1.1em; font-weight: 600; } .page-hero .hero-wrap { gap: 20px; } .page-hero .hero-desc { max-width: 640px; } .page-hero .hero-buttons { margin-top: 40px; } .page-hero .hero-usps { margin-top: 28px; } .crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2em; font-weight: 500; color: var(--grey-f4); } .crumb a:hover { color: var(--orange); } /* Vrij 3-koloms kaartraster (waarden, niet-doen, noodnummers, technieken) */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cards-3 .why-card { min-height: 0; gap: 24px; } .cards-3 .why-ico { width: 64px; height: 64px; } .cards-3 .why-ico .ico { width: 38px; height: 40px; } /* Twee-koloms variant voor langere lijstjes */ .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .cards-2 .why-card { min-height: 0; gap: 24px; } .cards-2 .why-ico { width: 64px; height: 64px; } .cards-2 .why-ico .ico { width: 38px; height: 40px; } /* Tekst+foto-splitsectie (hergebruikt de about-opbouw los van de sectie-id) */ .split .container { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 60px; } @media (max-width: 1199px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } .page-hero { padding: 150px 40px 80px; } } @media (max-width: 809px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } .page-hero { min-height: 0; padding: 130px 20px 60px; } .page-hero h1 { font-size: 36px; } .split .container { flex-direction: column; } } /* ========================================================================== Stats ========================================================================== */ /* ========================================================================== Services ========================================================================== */ .services .sec-head h2 { max-width: 592px; } .services .sec-head .sub { max-width: 528px; } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .svc-card { position: relative; display: block; background: var(--grey-fa); border-radius: var(--radius-card); box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); padding: 16px; overflow: clip; } .svc-inner { display: flex; flex-direction: column; gap: 44px; } .svc-head { position: relative; } .svc-media { border-radius: 12px; overflow: clip; height: 200px; } .svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-variant) var(--ease); } /* the card's only body change on hover: a contained 1.04 zoom */ .svc-card:hover .svc-media img { transform: scale(1.04); } .svc-icon { position: absolute; left: 12px; bottom: -16px; width: 70px; height: 70px; display: grid; place-items: center; background: var(--white); border-radius: var(--radius-card); padding: 6px 8px; box-shadow: 0 4px 24px rgba(151, 151, 151, 0.07); z-index: 1; } .svc-icon img { width: 54px; height: 54px; object-fit: contain; } .svc-bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 190px; padding: 0 12px; } .svc-content { display: flex; flex-direction: column; gap: 10px; } .svc-content h3 { font-size: 20px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .svc-content p { font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .svc-cta { display: flex; align-items: center; justify-content: space-between; height: 45px; } .svc-cta .quote { font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--orange); } /* ========================================================================== Why choose us ========================================================================== */ .why .sec-head h2 { max-width: 658px; } .why .sec-head .sub { max-width: 569px; } .why-grid { display: grid; grid-template-columns: 333fr 399fr 333fr; align-items: center; gap: 20px; } .why-col { display: flex; flex-direction: column; gap: 20px; } .why-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 350px; padding: 34px 28px; background: var(--grey-f8); border-radius: var(--radius-card); overflow: clip; } .why-card.is-orange { background: var(--orange); } .why-ico { width: 80px; height: 80px; display: grid; place-items: center; background: var(--orange); border-radius: 16px; color: var(--white); flex: none; } .why-card.is-orange .why-ico { background: var(--white); color: var(--orange); } .why-ico .ico { width: 49px; height: 52px; } .why-body { display: flex; flex-direction: column; gap: 16px; } .why-body h3 { font-size: 24px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .why-body p { font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .why-card.is-orange h3 { color: var(--white); } .why-card.is-orange p { color: var(--grey-f4); } .why-mid { display: flex; flex-direction: column; gap: 14px; } .why-photo { border-radius: var(--radius-card); overflow: clip; height: 616px; } .why-photo img { width: 100%; height: 100%; object-fit: cover; } .why-trust { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 22px 20px; background: var(--grey-f8); border-radius: var(--radius-card); } .why-trust .lines { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 340px; } .why-trust .l1 { font-size: 16px; line-height: 1.1em; font-weight: 500; color: var(--ink); } .why-trust .l2 { font-size: 16px; line-height: 1.1em; font-weight: 500; color: var(--muted); } /* ========================================================================== Video ========================================================================== */ .video-sec { padding: 80px 0; } .video-shell { position: relative; } .video-shell video { width: 100%; aspect-ratio: 1900 / 880; /* 586px at 1265, 882px at 1905 — scales, never fixed */ object-fit: cover; background: var(--ink); } .video-ctrl { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 30px; z-index: 1; pointer-events: none; } .video-btn { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-alt); color: var(--white); pointer-events: auto; } .video-btn .ico { width: 26px; height: 26px; } .video-btn .i-pause { display: none; } .video-btn.is-playing .i-play { display: none; } .video-btn.is-playing .i-pause { display: block; } /* ========================================================================== How it works ========================================================================== */ .how { position: relative; padding: 80px var(--gutter); } .how-card { position: relative; width: 100%; max-width: 1300px; margin-inline: auto; background: var(--grey-f7); border-radius: var(--radius-lg); padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 60px; overflow: clip; } .how-card .sec-head h2 { max-width: 900px; } .how-card .sec-head .sub { max-width: 565px; } /* The pipe spans the whole card (content box minus 20px on the left); only the step row is capped at 1150. Capping the wrapper clipped the pipe on wide screens. */ .how-content { position: relative; width: 100%; } .how-pipe { position: absolute; top: 12px; left: 20px; right: 0; z-index: 0; } .how-pipe img { width: 100%; height: auto; } .how-steps { position: relative; z-index: 1; max-width: 1150px; margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-start; padding-right: 10px; } .how-step { width: 260px; max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 122px; } .how-ico { width: 90px; height: 90px; display: grid; place-items: center; background: var(--white); border-radius: 200px; color: var(--orange); flex: none; } .how-ico .ico { width: 46px; height: 46px; } .how-text { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .how-text h3 { font-size: 24px; line-height: 1.1em; font-weight: 500; color: var(--ink); } /* Box is 260px on the original, but Framer serves the Fontshare cut of Plus Jakarta Sans, which sets ~3% wider than the Google cut used here. At a true 260px, step 3 wraps to 2 lines instead of the original's 3. Capping the paragraph at 252px reproduces the original's line breaks and the 312px step height; the 8px is invisible because the text is centred. */ .how-text p { max-width: 252px; font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .how-wrench { position: absolute; top: -72px; right: -5px; width: 163px; z-index: 1; } .how-wrench img { transform: rotate(180deg); } /* ========================================================================== Emergency CTA ========================================================================== */ .cta-sec { position: relative; padding: 80px 0; overflow: clip; } .cta-band { position: relative; background: var(--orange); padding: 70px 20px 70px 90px; display: flex; justify-content: center; align-items: center; overflow: clip; } .cta-wrap { position: relative; width: 100%; max-width: 1440px; } .cta-left { position: relative; z-index: 2; max-width: 650px; display: flex; flex-direction: column; align-items: flex-start; gap: 60px; } .cta-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cta-pill { padding: 3.33333px 15.8333px 3.33333px 11.6667px; gap: 10px; border-radius: 58px; } /* original icon wrapper is 30x32 (padding: 0 0 2px), which sets the pill height */ .cta-pill .ico { width: 30px; height: 30px; margin-bottom: 2px; } .cta-content { display: flex; flex-direction: column; gap: 24px; } .cta-band h2 { max-width: 560px; font-size: 66px; line-height: 1.1em; font-weight: 600; color: var(--white); } .cta-sub { display: flex; align-items: center; gap: 10px; color: var(--white); } /* original icon wrapper is 40x43 (padding: 3px 0 0), which sets the row height */ .cta-sub .ico { width: 40px; height: 40px; margin-top: 3px; flex: none; } .cta-sub p { font-size: 24px; line-height: 1.1em; font-weight: 500; color: var(--grey-f4); } .cta-call { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 242px; height: 60px; padding: 17px 62px 17px 58px; background: var(--white); border-radius: 100px; overflow: hidden; transition: background-color var(--dur-variant) var(--ease); } .cta-call .roll { --rt-size: 24px; --rt-color: var(--orange); } .cta-call .lead { position: absolute; left: 22px; top: 50%; margin-top: -12.5px; width: 25px; height: 25px; color: var(--orange); } .cta-call .arrow-swap { position: absolute; right: 22px; top: 50%; margin-top: -12px; width: 24px; height: 24px; overflow: clip; } .cta-call .arrow-swap .ar { width: 24px; height: 24px; color: var(--orange); transition: transform var(--dur-roll) var(--ease-arrow); } .cta-call:hover { background: var(--grey-f8); } /* All percentages in the original, which is why fixed px drifted on wide screens: left 78%, width 46% (capped at 550), translateX(-50%). The anchored edge is BOTTOM (-143px); `top` is auto and derived. */ .cta-photo { position: absolute; bottom: -143px; left: 78%; width: 46%; max-width: 550px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; overflow: hidden; z-index: 1; } .cta-photo img { width: 100%; height: 100%; object-fit: cover; } .cta-deco { position: absolute; z-index: 0; width: 362px; height: 382px; pointer-events: none; } .cta-deco img { width: 100%; height: 100%; object-fit: contain; } .cta-deco-l { top: 341.25px; left: -30px; } .cta-deco-r { top: -123px; right: -160px; } /* ========================================================================== Projects ticker ========================================================================== */ .projects .sec-head h2 { max-width: 658px; } .projects .sec-head .sub { max-width: 569px; } /* margin replaces the .container gap, since the track has to escape the column */ .ticker-mask { position: relative; overflow: hidden; margin-top: 80px; } .ticker-track { display: flex; align-items: center; gap: 20px; width: max-content; will-change: transform; } .ticker-track li { flex: none; } .ticker-tile { width: 610px; height: 445px; border-radius: var(--radius-card); overflow: clip; } .ticker-tile img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Testimonials ========================================================================== */ .testimonials { background: var(--grey-f4); } .testimonials .sec-head h2 { max-width: 900px; color: var(--orange); } .testimonials .sec-head .sub { max-width: 565px; } .testimonials .container { overflow: clip; } .slider { width: 100%; max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 40px; } .slide { width: 100%; display: flex; background: var(--white); border-radius: 21.6px; overflow: clip; min-height: 581px; } .slide-media { width: 501px; flex: none; background: var(--border-grey); } .slide-media img { width: 100%; height: 100%; object-fit: cover; } .slide-body { flex: 1; padding: 43.2px 49.5px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; } .slide-rating { display: flex; flex-direction: column; gap: 9px; } .slide-rating .row { display: flex; align-items: center; gap: 5.4px; } .slide-rating .score { font-size: 14px; line-height: 1.1em; font-weight: 500; color: var(--ink); } .slide-rating .trusted { font-size: 14px; line-height: 1.2em; font-weight: 500; color: var(--muted); } .slide-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .slide-quote { font-size: 28px; line-height: 1.2em; font-weight: 600; color: var(--ink); } .slide-who { display: flex; flex-direction: column; gap: 1.8px; } .slide-who p { font-size: 14px; line-height: 1.1em; font-weight: 500; color: var(--muted-2); } /* pure opacity crossfade, .001 -> 1, {duration:.6, ease:[.44,0,.56,1]} */ .slide-fade { transition: opacity 0.6s var(--ease); } .slide-fade.is-out { opacity: 0.001; } .dots { display: flex; align-items: center; gap: 6px; } .dot { position: relative; width: 61px; height: 61px; padding: 1.5px; border-radius: 50%; display: grid; place-items: center; } /* Avatar opacity switches instantly in the original (transition {duration:0}). */ .dot img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; opacity: 0.5; position: relative; z-index: 1; } .dot.is-active img { opacity: 1; } /* The ring is a CONIC-GRADIENT sweep behind the avatar, not an SVG stroke. It fills 0deg -> 360deg over 5s linear while the slide dwells 5.3s. */ .dot .ring { position: absolute; inset: 0; z-index: 0; border-radius: 50%; opacity: 0; background: conic-gradient(from 0deg at 50% 50%, var(--orange) 0deg, var(--orange) var(--sweep, 0deg), rgba(240, 83, 31, 0) var(--sweep, 0deg)); } .dot.is-active .ring { opacity: 1; } .arrows { display: flex; justify-content: center; gap: 10px; } .arrow-round { width: 54px; height: 54px; display: grid; place-items: center; background: var(--white); border-radius: 50%; color: var(--ink); } .arrow-round .ico { width: 17px; height: 17px; } .arrow-round.next .ico { transform: rotate(180deg); } .testi-deco { position: absolute; z-index: 1; pointer-events: none; } .testi-deco img { width: 100%; height: 100%; } .testi-deco-l { top: 68px; left: -97px; width: 251px; height: 264px; } .testi-deco-l img { object-fit: contain; } /* 255px element rotated -43deg — 360px was its ROTATED bounding box, so using that as the element size and rotating again made it 41% too big. */ .testi-deco-r { top: 67px; right: -89px; width: 255px; height: 255px; transform: rotate(-43deg); } .testi-deco-r img { object-fit: cover; } /* ========================================================================== Service areas ========================================================================== */ .areas .container { flex-direction: row; align-items: flex-end; gap: 80px; } .areas-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 80px; } .areas-left h2 { max-width: 480px; } .areas-left .sub { max-width: 520px; } .areas-grid { max-width: 420px; display: flex; justify-content: space-between; gap: 20px; } .areas-col { display: flex; flex-direction: column; gap: 20px; } .area-chip { display: flex; align-items: center; gap: 14px; } .area-chip .ico-box { width: 56px; height: 56px; display: grid; place-items: center; background: var(--cream); border-radius: 12px; color: var(--orange); flex: none; } .area-chip .ico-box .ico { width: 32px; height: 32px; } .area-chip span { font-size: 16px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .areas-cta { display: flex; align-items: center; gap: 24px; max-width: 480px; padding: 24px; background: var(--grey-f8); border-radius: var(--radius-card); overflow: clip; } .areas-cta .info { width: 41px; height: 41px; color: var(--orange); flex: none; } .areas-cta .wrap { display: flex; align-items: center; gap: 24px; flex: 1; } .areas-cta .lines { display: flex; flex-direction: column; gap: 6px; } .areas-cta .l1 { font-size: 16px; line-height: 1.1em; font-weight: 600; color: var(--black); } .areas-cta .l2 { font-size: 16px; line-height: 1.1em; font-weight: 500; color: var(--muted); } .areas-map { position: relative; flex: 1 1 0; min-width: 0; max-width: 670px; height: 624px; background: var(--grey-f2); border-radius: var(--radius-lg); overflow: clip; } .areas-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .map-inner { position: absolute; inset: 0; z-index: 1; } /* the pin artwork is 60x66 — 102x102 was the wrapper, not the image */ .map-pin { position: absolute; left: 50%; top: 50%; width: 60px; height: 66px; transform: translate(-50%, -50%); } .map-pin img { width: 100%; height: 100%; object-fit: contain; } .map-label { position: absolute; transform: translate(-50%, -50%); padding: 10px 14px; background: var(--white); border-radius: 100px; font-size: 14.28px; line-height: 1.1em; font-weight: 600; color: var(--ink); white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } /* positions are % of the 480×624 inner box, from the measured pixel offsets */ .map-label.p1 { left: 50%; top: 20%; } /* Westfield 240 / 124.8 */ .map-label.p2 { left: 87%; top: 35%; } /* Oakwood 417.6 / 218.4 */ .map-label.p3 { left: 84%; top: 67%; } /* Riverside 403.2 / 418.1 */ .map-label.p4 { left: 50%; top: 83%; } /* Brookdale 240 / 517.9 */ .map-label.p5 { left: 16%; top: 67%; } /* Downtown 76.8 / 418.1 */ .map-label.p6 { left: 16%; top: 35%; } /* Maple Heights 76.8 / 218.4 */ .map-line { position: absolute; left: 50%; top: 50%; background: var(--orange); opacity: 0.6; transform-origin: 50% 50%; z-index: 0; } /* Spokes joining opposite label pairs: vertical, and the two diagonals measured at -30.4deg (Downtown↔Oakwood) and +31.5deg (Maple Heights↔Riverside). */ .map-line.v { width: 1px; height: 63%; transform: translate(-50%, -50%); } .map-line.a { width: 79%; height: 1px; transform: translate(-50%, -50%) rotate(-30.4deg); } .map-line.b { width: 76%; height: 1px; transform: translate(-50%, -50%) rotate(31.5deg); } /* ========================================================================== About ========================================================================== */ .about .container { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 60px; } .about-left { position: relative; flex: 0 0 523px; min-height: 600px; } .about-photo { position: absolute; top: 0; left: 0; width: 440px; height: 550px; border-radius: var(--radius-card); overflow: clip; z-index: 1; } .about-photo img { width: 100%; height: 100%; object-fit: cover; } .about-badge { position: absolute; width: 100px; height: 100px; background: var(--orange); border-radius: 119px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--white); padding: 6px; } .about-badge .big { font-size: 24px; line-height: 1.1em; font-weight: 600; } .about-badge .small { font-size: 11px; line-height: 1.1em; font-weight: 600; } .about-badge .ico { width: 34px; height: 34px; } .about-badge-1 { top: 45px; left: 390px; } .about-badge-2 { top: 500px; left: 50px; } .about-right { flex: 0 0 523px; display: flex; flex-direction: column; gap: 32px; } .about-right h2 { max-width: 460px; } .about-text { max-width: 558px; } .about-bullets { display: flex; flex-direction: column; gap: 12px; } .about-bullets li { display: flex; align-items: flex-start; gap: 12px; } .about-bullets .tick { width: 26px; height: 26px; flex: none; color: var(--orange); } .about-bullets span { padding-top: 2px; font-size: 16px; line-height: 1.2em; font-weight: 600; color: var(--ink); } /* ========================================================================== Contact ========================================================================== */ .contact .container { max-width: 1200px; } .contact .sec-head .sub { max-width: 565px; } .contact-panel { position: relative; display: flex; align-items: center; gap: 50px; padding: 28px 60px 28px 28px; background: var(--grey-f8); border-radius: var(--radius-lg); overflow: clip; } .contact-card { position: relative; flex: 1 1 0; min-width: 0; max-width: 550px; min-height: 645px; padding: 32px; background: var(--black); border-radius: var(--radius-card); overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; } .contact-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .contact-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 25.27px; } .contact-info h3 { font-size: 24px; line-height: 1.1em; font-weight: 600; color: var(--white); } .contact-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 28px; } .contact-list li { display: flex; align-items: center; gap: 16px; } .contact-list li.wide { grid-column: 1 / -1; } .contact-list .ico-box { width: 52px; height: 52px; display: grid; place-items: center; background: var(--orange); border-radius: 50%; color: var(--white); flex: none; } .contact-list .ico-box .ico { width: 27px; height: 27px; } .contact-list .lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .contact-list .t { font-size: 14px; line-height: 1.1em; font-weight: 600; color: var(--white); } .contact-list .roll { --rt-size: 15px; --rt-color: var(--white); } .contact-form-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; } .contact-form-head { display: flex; flex-direction: column; gap: 16px; } .contact-form-head h3 { font-size: 36px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .field { display: flex; flex-direction: column; } .field.wide { grid-column: 1 / -1; } .field-box { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid transparent; border-radius: 12px; padding: 15px 16px 16px; transition: all 0.3s var(--ease); } .field-box:focus-within { border-color: var(--orange); } .field-box input, .field-box textarea, .field-box select { flex: 1; min-width: 0; width: 100%; background: none; border: 0; padding: 0; font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--ink); outline: none; font-family: inherit; letter-spacing: inherit; } .field-box textarea { height: 88px; resize: vertical; } .field-box.is-area { padding: 15px 16px 16px; align-items: flex-start; } .field-box select { color: var(--muted); cursor: pointer; appearance: none; } .field-box input::placeholder, .field-box textarea::placeholder { color: var(--muted); } .field-flag { width: 16px; height: 12px; flex: none; border-radius: 2px; object-fit: cover; } .field-box.is-select { position: relative; } .field-box.is-select::after { content: ''; width: 10px; height: 6px; flex: none; background: var(--muted); clip-path: polygon(0 0, 100% 0, 50% 100%); } .form-submit { grid-column: 1 / -1; padding-top: 16px; } .form-submit .btn { min-width: 204px; height: 54px; } .form-submit .roll { --rt-size: 16px; } .form-note { grid-column: 1 / -1; font-size: 14px; color: var(--muted); } .contact-deco { position: absolute; top: -12px; right: -158px; width: 308px; height: 308px; /* 421 was the rotated bbox */ transform: rotate(-30deg); z-index: 0; pointer-events: none; } .contact-deco img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== FAQs ========================================================================== */ .faqs .container { flex-direction: row; align-items: flex-start; gap: 80px; } .faq-images { position: sticky; top: 100px; flex: 1 1 0; min-width: 0; height: 589px; } .faq-img { position: absolute; border-radius: 16px; overflow: clip; } .faq-img img { width: 100%; height: 100%; object-fit: cover; } .faq-img-1 { top: 0; left: 0; width: 380px; height: 480px; } .faq-img-2 { top: 187px; left: 157px; width: 323px; height: 370px; z-index: 1; } .faq-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 64px; } .faq-right h2 { font-size: 56px; line-height: 1.1em; font-weight: 600; color: var(--ink); } .faq-list { display: flex; flex-direction: column; gap: 20px; } .faq-item { background: var(--grey-fa); border-radius: var(--radius-card); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; gap: 10px; padding: 22px 28px 24px; text-align: left; } .faq-q p { flex: 1; font-size: 18px; line-height: 1.2em; font-weight: 500; color: var(--ink); } /* One transition object drives height, chevron and answer opacity in lockstep: {duration:.4, ease:[.44,0,.56,1]}. No delay on the fade. */ .faq-chev { width: 14px; height: 7px; flex: none; color: #121212; transition: transform var(--dur-variant) var(--ease); } .faq-item.is-open .faq-chev { transform: rotate(180deg); } .faq-a { height: 0; overflow: hidden; opacity: 0; transition: height var(--dur-variant) var(--ease), opacity var(--dur-variant) var(--ease); } .faq-item.is-open .faq-a { opacity: 1; } .faq-a-inner { padding: 0 28px 24px; } .faq-a-inner p { font-size: 16px; line-height: 1.2em; font-weight: 500; color: var(--muted); } /* ========================================================================== Final CTA ========================================================================== */ .final-cta { position: relative; z-index: 2; padding: 80px var(--gutter) 160px; background: var(--white); overflow: clip; } .final-band { position: relative; width: 100%; max-width: 1600px; margin-inline: auto; min-height: 487px; border-radius: var(--radius-lg); padding: 80px 20px; display: flex; align-items: center; justify-content: center; overflow: clip; } .final-bg { position: absolute; inset: 0; z-index: 1; } .final-bg img { width: 100%; height: 100%; object-fit: cover; } .final-overlay { position: absolute; inset: 0; z-index: 2; opacity: 0.75; background-image: linear-gradient(var(--orange) -9%, var(--black) 116%); } .final-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; } .final-top { display: flex; flex-direction: column; align-items: center; gap: 28px; } .final-content h2 { max-width: 624px; font-size: 64px; line-height: 1.1em; font-weight: 600; color: var(--white); text-wrap: balance; } .final-content .sub { max-width: 590px; color: var(--grey-f4); } .final-buttons { display: flex; justify-content: center; gap: 16px; } .final-deco { position: absolute; z-index: 3; pointer-events: none; } .final-deco img { width: 100%; height: 100%; object-fit: cover; } /* element sizes, not their rotated bounding boxes (404 / 358) */ .final-deco-l { top: 276px; left: -88px; width: 299px; height: 299px; transform: rotate(28deg); } .final-deco-r { top: 298px; right: -86px; width: 265px; height: 265px; transform: rotate(-28deg); } /* ========================================================================== Footer ========================================================================== */ .foot { position: relative; padding: 0 var(--gutter); background: var(--orange); display: flex; flex-direction: column; align-items: center; overflow: clip; } .foot-container { position: relative; container-type: inline-size; width: 100%; max-width: 1600px; padding-top: 200px; } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 80px; } .foot-left { flex: 0 1 553px; display: flex; justify-content: space-between; gap: 30px; } .foot-col { display: flex; flex-direction: column; gap: 12px; } .foot-col h3 { font-size: 14px; line-height: 1.1em; font-weight: 600; color: var(--grey-f3); } .foot-col ul { display: flex; flex-direction: column; gap: 4px; } .foot-col .roll { --rt-size: 16px; --rt-color: var(--white); } .foot-right { flex: 0 1 472px; display: flex; gap: 38px; } .foot-right .wrap { display: flex; flex-direction: column; gap: 44px; } .foot-contact { display: flex; align-items: center; gap: 16px; } .foot-contact .ico-box { width: 40px; height: 40px; display: grid; place-items: center; background: var(--white); border-radius: 8px; color: var(--orange-deep); flex: none; } .foot-contact .ico-box .ico { width: 20px; height: 20px; } .foot-contact .lines { display: flex; flex-direction: column; gap: 8px; } .foot-contact .t { font-size: 16px; line-height: 1.1em; font-weight: 600; color: var(--white); } .socials { display: flex; align-items: center; gap: 10px; } /* the page's only true whileHover: {scale: 1.02, y: -4} */ .socials a { width: 40px; height: 40px; display: grid; place-items: center; background: var(--white); border-radius: 8px; color: var(--orange-deep); transition: transform var(--dur-variant) var(--ease-social); } .socials a:hover { transform: translateY(-4px) scale(1.02); } .socials svg { fill: var(--orange-deep); } .foot-bottom { display: flex; flex-direction: column; gap: 40px; padding-top: 140px; } .foot-copy { display: flex; align-items: center; gap: 50px; padding-left: 20px; } .foot-copy p, .foot-copy a { font-size: 12px; line-height: 1.1em; font-weight: 600; color: var(--white); } /* the one link on the page with a colour-hover transition */ .foot-copy a { transition: color 0.3s var(--ease); } .foot-copy a:hover { color: var(--grey-f4); } .wordmark { display: block; width: 100%; text-align: center; /* 23.48% of the CONTAINER width — the original scales it via an