/* ═══════════════════════════════════════════════════ Fast Fix Emergency Electricians — home page ═══════════════════════════════════════════════════ */ :root{ --orange:#FF5A00; --orange-deep:#E24E00; --logo-orange:#F7941D; /* the amber used by "fix" in the logo */ /* One shared orange ramp — hero panel and every orange part of the logo. Horizontal for wide elements, steeper for tall/narrow ones so the progression is actually visible across a 2px rule or a 14px bolt. */ --ramp-stops:#E05604 0%,#F17410 32%,#F7941D 60%,#FFAE3C 84%,#FFBE5E 100%; --orange-ramp:linear-gradient(103deg,var(--ramp-stops)); --orange-ramp-v:linear-gradient(165deg,var(--ramp-stops)); --ink:#0B0B0B; --ink-70:#4A4A4A; --ink-45:#767676; --cream:#F2EEE9; --line:#E6E1DB; --purple:#4A22C9; --shell:1720px; --pad:clamp(20px,4vw,64px); --r:22px; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:112px} body{ margin:0; font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); background:#fff; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } /* Background pattern: the logo bolt, scattered. Uses the exact mark from #logoRamp so it reads as the same motif rather than generic decoration. Sits on the body, so it only shows through the light sections -- the dark and orange panels are opaque and keep their own bolt watermark. */ body{background-image:url("data:image/svg+xml,");background-repeat:repeat;background-size:820px 820px} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} svg{width:100%;height:100%} h1,h2,h3,.section-title{ font-family:'Archivo',system-ui,sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0; text-transform:uppercase; /* multi-line headings break into even lines instead of leaving one stranded word on the last line (no-op where unsupported) */ text-wrap:balance; } .shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)} .eyebrow{ font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--ink-45);margin:0 0 22px; } .eyebrow.light{color:rgba(255,255,255,.62)} .eyebrow.center,.section-title.center{text-align:center} /* headings are reset to margin:0, so these titles leaned on their own second line for breathing room -- once they set on one line they sat on top of whatever followed. The gap belongs to the title, not to the line count. */ .section-title{font-size:clamp(34px,4.2vw,60px);margin:0 0 clamp(26px,2.6vw,40px)} .section-title.light,.light h2{color:#fff} /* ── notch ── Photo frames used to take a square bite out of their top-right corner, as a viewfinder crop. It squared off the one corner every other rounded thing on the page keeps curved, so the bite is gone and images now carry the same --r radius on all four corners. The class stays on the markup: it still supplies position:relative and the radius, and content cards each carry their own treatment (ramp accents, step badges, hazard stripe). */ .notched{position:relative;border-radius:var(--r)} /* ── bolt glyph ── */ .bolt{ width:15px;height:18px;display:inline-block;flex:none; background:var(--orange); clip-path:polygon(58% 0,10% 56%,44% 56%,36% 100%,90% 42%,54% 42%); } .bolt.big{width:24px;height:28px;background:var(--ink)} /* ── buttons ── */ .btn{ display:inline-flex;align-items:center;gap:11px; font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px; letter-spacing:.09em;text-transform:uppercase; padding:17px 30px;border-radius:12px;border:0; transition:transform .18s ease,background .18s ease,color .18s ease; } .btn .ico{width:19px;height:19px} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--orange);transform:translateY(-2px)} .btn-dark:hover .bolt{background:#fff} .btn-lg{padding:21px 38px;font-size:14px} .btn-sm{padding:14px 24px;font-size:12.5px} .btn-ghost{background:var(--cream);color:var(--ink)} .btn-ghost .ico{color:var(--orange)} .btn-ghost:hover{background:#e7e1d9} /* WhatsApp's own brand green -- kept literal rather than a design-system token since it's what makes the button instantly recognisable. */ .btn-wa{background:#25d366;color:#fff} .btn-wa:hover{background:#1ebe5a;transform:translateY(-2px)} /* ── hero: call + WhatsApp side by side ─────────────────────── */ .hero-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* ═══════════ HEADER ═══════════ */ .site-header{position:sticky;top:0;z-index:60;background:#fff} .header-inner{display:flex;align-items:center;gap:28px;height:94px} .svg-defs{position:absolute;width:0;height:0;overflow:hidden} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ── logo lockup: fastfix | EMERGENCY / ELECTRICIANS ── */ /* No top padding for the bolt: it's absolutely positioned, so it adds no height. Padding here would push the wordmark below the nav's centre line. */ .logo{display:flex;align-items:center;gap:15px;flex:none} .logo-word{ position:relative;display:inline-block;white-space:nowrap; font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:31px; letter-spacing:-.025em;line-height:1; } /* left is the centre of the "s" in "fast", measured off the rendered glyph (39.94% across the wordmark), with margin-left pulling the bolt back by half its own width so it lands centred on that letter rather than starting there. Kept as a percentage because the glyph keeps its position within the word at every font size; only the half-width offset changes, and the 720px block below adjusts it. */ /* bottom lands the bolt on the INK of the "s", not on the text box. The box top of .logo-word sits ~9px above the top of a lowercase letter at 31px: the line box carries the font's full ascender, and "s" only reaches x-height. Resting on the box therefore leaves a visible float. Measured off the rendered font, the x-height of "s" is .323em below the box top, and because that figure is a pure font-metric ratio it holds at every size, so the mobile breakpoint needs no separate value. */ .logo-bolt{ position:absolute;left:39.9%;margin-left:-7px;bottom:calc(100% - .323em); width:14px;height:20px;color:var(--logo-orange); /* fallback if the SVG ramp fails */ transform-origin:50% 100%; /* squash plants on the wordmark */ animation:logo-bolt-bounce 2.8s ease-in-out infinite; /* no will-change here: the animation already gets its own layer while it runs, and a permanent hint keeps that layer alive for the life of the page, on a sticky header, on every page. */ } /* The bolt hops on top of "fast" and settles. Two things make it read as a bounce rather than a hover-and-drop: Gravity. Each fall carries its own ease-in and each rebound its own ease-out, set per keyframe, so the bolt accelerates downward and decelerates upward. One easing across the whole loop gives an even, floaty motion instead. Lost energy. Four hops, each roughly half the previous height, then a rest before the loop repeats. Equal hops read as a metronome, not a bounce. Height is still capped by the window. Nothing renders above the top of the viewport, and the sticky header holds the logo near it, so the tallest hop is sized to keep a few pixels of clearance at rest. */ @keyframes logo-bolt-bounce{ 0%,10% {transform:translateY(0) scale(1,1); animation-timing-function:cubic-bezier(.5,0,.9,.4)} 14% {transform:translateY(0) scale(1.22,.78); animation-timing-function:cubic-bezier(.15,.8,.4,1)} 30% {transform:translateY(-75%) scale(.94,1.08); animation-timing-function:cubic-bezier(.5,0,.9,.4)} 44% {transform:translateY(0) scale(1.26,.74); animation-timing-function:cubic-bezier(.15,.8,.4,1)} 56% {transform:translateY(-44%) scale(.97,1.04); animation-timing-function:cubic-bezier(.5,0,.9,.4)} 66% {transform:translateY(0) scale(1.16,.84); animation-timing-function:cubic-bezier(.15,.8,.4,1)} 74% {transform:translateY(-20%) scale(.99,1.02); animation-timing-function:cubic-bezier(.5,0,.9,.4)} 80% {transform:translateY(0) scale(1.08,.92); animation-timing-function:cubic-bezier(.15,.8,.4,1)} 85% {transform:translateY(-7%) scale(1,1); animation-timing-function:cubic-bezier(.5,0,.9,.4)} 89% {transform:translateY(0) scale(1.04,.96)} 93%,100% {transform:translateY(0) scale(1,1)} } /* A looping motion in fixed furniture is exactly what this setting is for. */ @media (prefers-reduced-motion:reduce){ .logo-bolt{animation:none} } .logo-word em,.logo-word b{ font-style:normal;font-weight:700; -webkit-background-clip:text;background-clip:text;color:transparent; } .logo-word em{background-image:linear-gradient(180deg,#3a3a3a,#050505)} .logo-word b{background-image:var(--orange-ramp)} .logo-rule{width:2px;align-self:stretch;background:var(--orange-ramp-v);flex:none} .logo-tag{ font-family:'Archivo',sans-serif;font-weight:800;line-height:1.08; display:flex;flex-direction:column; } .logo-tag b,.logo-tag em{font-style:normal;font-weight:800;font-size:15px;white-space:nowrap} .logo-tag b{ background-image:var(--orange-ramp); -webkit-background-clip:text;background-clip:text;color:transparent; letter-spacing:.163em; } .logo-tag em{color:var(--ink);letter-spacing:.012em} .logo.is-light .logo-word em{background-image:linear-gradient(180deg,#fff,#d2d2d2)} .logo.is-light .logo-tag em{color:#fff} .nav{display:flex;align-items:center;gap:4px;margin:0 auto} .nav a{ padding:11px 19px;border-radius:9px;font-size:15.5px;font-weight:500; transition:background .16s ease,color .16s ease; } .nav a:hover{background:var(--cream)} .nav a.is-active{background:var(--cream);font-weight:600} /* ── Services dropdown: CSS-only, hover on desktop, :focus-within keeps it open for keyboard users, no JS needed. Collapses to a plain always-open sub-list once the nav itself becomes the mobile flyout (see responsive). */ .nav-item{position:relative} .nav-item__link{display:inline-flex !important;align-items:center;gap:5px} .nav-caret{width:9px;height:9px;flex:none;transition:transform .18s ease} .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)} .nav-drop{ position:absolute;top:calc(100% + 4px);left:0;min-width:250px; background:#fff;border-radius:14px;padding:10px; box-shadow:0 20px 40px rgba(0,0,0,.16); display:flex;flex-direction:column;gap:1px; opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s; z-index:80; } .nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{ opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto; } .nav-drop a{padding:10px 14px;border-radius:9px;font-size:14.5px;font-weight:500;white-space:nowrap} .nav-drop a:hover{background:var(--cream)} /* the areas dropdown holds 21 links -- two columns keeps it on screen */ .nav-drop--areas{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;min-width:460px} .header-cta{padding:19px 30px} .nav-toggle{ display:none;place-items:center;padding:0;border:0; width:52px;height:52px;border-radius:14px; background:var(--cream);color:var(--ink); transition:background .16s ease; } .nav-toggle svg{width:22px;height:22px} .nav-toggle:hover{background:#e7e1d9} /* ═══════════ HERO ═══════════ */ /* The hero is the one full-bleed element on the site: no side gutter, no corner radius, colour running edge to edge. Every other section keeps its inset rounded panel, so this reads as a deliberate opening rather than a broken margin. The width cap moves off the panel and onto .hero-grid below, so the orange spans the viewport while the content still stops at --shell instead of sprawling across an ultra-wide monitor. */ .hero{padding:0} .hero-panel{ margin:0;overflow:hidden; /* All-orange ramp: deepest on the left where the headline sits (best contrast), warming up to the logo amber and a light glow on the right. */ background: radial-gradient(115% 85% at 88% 6%, rgba(255,199,118,.5) 0%, rgba(255,199,118,0) 58%), var(--orange-ramp); /* The bottom padding used to be 0 so the hero photo could bleed onto the panel edge, with the service tabs sitting in that strip. The tabs are gone, so the photo was left resting on the border -- it now gets the same kind of margin the copy column has. */ /* The side padding absorbs the gutter the section used to have, so losing the outer margin moves the background to the edge without dragging the headline out with it -- content stays level with the sections below. */ padding:clamp(34px,4.6vw,68px) clamp(24px,8vw,144px) clamp(30px,3.6vw,56px); position:relative; } .hero-grid{ display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4vw,70px); align-items:center;min-height:min(74vh,720px); max-width:var(--shell);margin-inline:auto; } .hero-copy h1{ color:#fff;font-size:clamp(46px,6.1vw,96px);letter-spacing:-.035em; } /* Location pages: the H1 rides 4px above .hero-sub at every width -- same clamp shifted by 4 -- so the pair reads as one lockup instead of a banner over a caption. Tracking matches the sub's for the same reason. */ .hero-copy h1.h1-town{ font-size:clamp(28px,calc(2.7vw + 4px),46px); letter-spacing:-.02em; } .hero-sub{ color:#fff;font-family:'Archivo',sans-serif;font-weight:800; font-size:clamp(24px,2.7vw,42px);letter-spacing:-.02em; text-transform:uppercase;margin:20px 0 0;line-height:1; } .hero-lede{ color:rgba(255,255,255,.9);max-width:38ch;font-size:17.5px;margin:26px 0 34px; } .hero-media{position:relative;align-self:end;padding-bottom:0} .hero-media>img{ width:100%;height:min(66vh,640px);object-fit:cover; clip-path:polygon(0 0,calc(100% - 74px) 0,calc(100% - 74px) 40px,100% 40px,100% 100%,74px 100%,74px calc(100% - 40px),0 calc(100% - 40px)); } .hero-card{ position:absolute;left:-6%;bottom:11%;width:min(400px,80%); background:#fff;border-radius:18px;padding:24px 26px 22px; /* hairline + two shadows: a tight one to seat the card, a long soft one to lift it off the photo. One big blur alone read as a smudge. */ border:1px solid rgba(11,11,11,.07); box-shadow:0 2px 6px rgba(11,11,11,.07),0 30px 60px -18px rgba(11,11,11,.35); } .stars{color:#FFA51F;letter-spacing:5px;font-size:17px} .stars.sm{font-size:14px;letter-spacing:2px} .stars.red{color:#D32323} /* "★★★★★ 5.0 Stars". The gap is small because .stars carries a 5px letter-spacing that already trails the final star. The glyphs are set larger than the text they sit beside: a star only fills part of its em box, so at a matching font-size it reads noticeably smaller than the digits. */ .hero-rating{display:flex;align-items:center;gap:4px} .hero-rating .stars{font-size:20px;line-height:1} .hero-rating .rating-num{ font-family:'Archivo',sans-serif;font-weight:800;font-size:18px; letter-spacing:-.01em;line-height:1; } .hero-card-title{ font-family:'Archivo',sans-serif;font-weight:700;font-size:19px; line-height:1.25;margin:10px 0 18px;letter-spacing:-.01em; display:flex;align-items:center;gap:10px; } /* the review count is read live from the Elfsight widget (see script.js) and can tick up while the card is on screen, so it gets tabular figures -- the label beside it must not shuffle sideways when 9 becomes 10 */ .gr-count{ font-variant-numeric:tabular-nums; font-size:1.15em;color:var(--orange); } .hero-card-title .gr-label{font-weight:700} /* scales with whatever text it sits beside */ .g-mark{width:1.05em;height:1.05em;flex:none} /* the call row is the card's one action, so it is set apart by a rule and the icon is promoted from a bare glyph to a filled disc -- the same visual language as the page's round FABs */ .hero-call{ display:flex;align-items:center;gap:14px; border-top:1px solid var(--line);padding-top:18px; } .hero-call-icon{ width:46px;height:46px;flex:none;border-radius:50%; background:var(--orange);color:#fff;display:grid;place-items:center; box-shadow:0 10px 22px -6px rgba(255,90,0,.55); transition:transform .18s ease; } .hero-call-icon svg{width:22px;height:22px} .hero-call:hover .hero-call-icon{transform:scale(1.07)} .hero-call em{font-style:normal;font-size:13.5px;color:var(--ink-70);display:block;margin-bottom:1px} .hero-call strong{ font-family:'Archivo',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em; line-height:1.05; } /* ═══════════ TRUST STRIP ═══════════ */ .strip{padding:46px 0 18px} .strip-grid{display:grid;grid-template-columns:repeat(4,1fr)} .strip-item{ display:flex;align-items:center;gap:18px;padding:14px 34px; border-left:1px solid var(--line); } .strip-item:first-child{border-left:0;padding-left:0} .strip-icon{width:40px;height:40px;flex:none;color:var(--ink)} /* label, not a section heading — kept out of the heading outline */ .strip-item .strip-title{ font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:21px; letter-spacing:-.01em;line-height:1.02;text-transform:uppercase;margin:0; } .strip-item p{margin:2px 0 0;font-size:15px;color:var(--ink-70)} /* ═══════════ ABOUT ═══════════ */ .about{padding:clamp(50px,6vw,96px) 0} .about-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(36px,6vw,110px);align-items:center} .about-media{position:relative} .about-photo{overflow:hidden;border-radius:var(--r)} .about-photo img{width:100%;height:min(70vh,660px);object-fit:cover} .about-copy h2{font-size:clamp(32px,3.6vw,54px);margin-bottom:26px} .about-copy p{color:var(--ink-70);margin:0 0 18px;max-width:60ch} .about-list{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:11px} .about-list li{position:relative;padding-left:30px;font-weight:500} .about-list li::before{ content:"";position:absolute;left:0;top:9px;width:16px;height:16px;border-radius:50%; background:var(--orange); } .about-list li::after{ content:"";position:absolute;left:5px;top:14px;width:6px;height:3px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); } /* ═══════════ SERVICES ═══════════ */ .services{background:var(--ink);padding:clamp(60px,7vw,110px) 0;border-radius:26px;margin:0 var(--pad)} .services .shell{padding:0 clamp(16px,3vw,48px)} .services .section-title{margin-bottom:clamp(34px,4vw,60px)} .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .svc{position:relative;display:block} .svc-img{border-radius:18px;overflow:hidden} /* height:auto is load-bearing — without it the img height attribute becomes a presentational hint that beats aspect-ratio and stretches the card. */ .svc-img img{width:100%;height:auto;aspect-ratio:1/1.02;object-fit:cover;transition:transform .5s ease} .svc:hover .svc-img img{transform:scale(1.05)} .svc-label{ position:absolute;left:14px;right:52px;bottom:14px; background:#fff;border-radius:14px;padding:17px 20px; font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em; display:flex;align-items:center;gap:9px; } .svc.is-featured .svc-label{background:var(--orange);color:#fff} .svc.is-featured .svc-label .bolt{background:#fff} .svc-arrow{ position:absolute;top:0;right:0;width:60px;height:56px;background:var(--orange); color:#fff;font-size:22px;display:grid;place-items:center; border-radius:0 18px 0 18px; } .svc-cta{ background:var(--cream);padding:30px;display:flex;flex-direction:column; border-radius:var(--r); } .svc-cta-icon{width:44px;height:44px;color:var(--ink)} .svc-cta-big{ font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(44px,4.4vw,68px); color:var(--orange);margin:auto 0 6px;line-height:1;letter-spacing:-.03em; } .svc-cta-text{ font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(20px,1.7vw,25px); margin:0;line-height:1.15;letter-spacing:-.01em; } /* ═══════════ HOW WE WORK ═══════════ */ .how{padding:clamp(64px,8vw,120px) 0} .how .section-title{margin-bottom:clamp(36px,4vw,64px)} .how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .how-card{ background:var(--cream);padding:34px 30px 30px;min-height:290px; display:flex;flex-direction:column;border-radius:var(--r); } /* the four steps are a genuine sequence, so the number gets a real badge rather than the notch. Ink ground for contrast; the ramp walks along the badge's underline, one true logo-gradient stop per step. */ .how-num{ display:inline-flex;align-items:center;justify-content:center;align-self:flex-start; width:38px;height:38px;border-radius:10px;margin-bottom:18px; font-family:'Archivo',sans-serif;font-weight:700;font-size:14px; color:#fff;background:var(--ink);border-bottom:3px solid #E05604; } .how-card:nth-of-type(2) .how-num{border-bottom-color:#F17410} .how-card:nth-of-type(3) .how-num{border-bottom-color:#F7941D} .how-card:nth-of-type(4) .how-num{border-bottom-color:#FFAE3C} .how-card h3{font-size:26px;margin-bottom:14px;text-transform:none;letter-spacing:-.02em} .how-card p{margin:0;color:var(--ink-70);font-size:16px} .how-bolt{display:none} .how-cta{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(34px,4vw,56px);flex-wrap:wrap} .how-cta .or{color:var(--ink-70)} /* ═══════════ IMAGE BANDS ═══════════ */ .band{position:relative;margin:0 var(--pad);border-radius:26px;overflow:hidden;isolation:isolate} .band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1} /* Both band photos are pale, so the white card was floating on near-white -- a soft ink wash, strongest behind the card, gives the photo presence and the card an edge to sit against. ::after not ::before: both sit at z -1, and the later box paints on top of the img. */ .band::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,rgba(11,11,11,.32),rgba(11,11,11,.12) 52%,rgba(11,11,11,0) 80%); } .band .shell{display:flex;align-items:center;min-height:min(74vh,660px);padding-block:60px} .band-card{ background:#fff;padding:44px 46px;max-width:520px;border-radius:var(--r); box-shadow:0 30px 70px -30px rgba(11,11,11,.45); } .band-card h2{font-size:clamp(28px,3.1vw,44px)} .band-card p{color:var(--ink-70);margin:16px 0 28px} .band-2 .band-card h2{font-size:clamp(32px,3.4vw,52px);line-height:1.02} .band-2 .band-card .accent{color:var(--orange)} .band-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} /* ═══════════ WHY CHOOSE US ═══════════ */ .why{padding:clamp(64px,8vw,120px) 0} .why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,90px)} .why-panel{ background:var(--orange);color:#fff;padding:44px 42px; display:flex;flex-direction:column;min-height:520px; border-radius:var(--r);overflow:hidden; } /* ── the house watermark ───────────────────────────────────── The logo bolt, blown up and ghosted into the corner of every orange surface -- same clip-path as .bolt, so it's literally the brand mark, not a shape invented for decoration. Each host places it opposite its gradient glow so the two never stack. */ .why-panel::before,.hero-panel::before,.contact-form::before, .final-panel::before,.fcard::before{ content:"";position:absolute;background:#fff;pointer-events:none; clip-path:polygon(58% 0,10% 56%,44% 56%,36% 100%,90% 42%,54% 42%); } .why-panel::before{right:-48px;bottom:-70px;width:250px;height:330px;opacity:.09;transform:rotate(10deg)} .hero-panel::before{right:-30px;top:-70px;width:300px;height:400px;opacity:.07;transform:rotate(14deg)} .contact-form::before{right:-60px;bottom:-80px;width:280px;height:370px;opacity:.08;transform:rotate(10deg)} .final-panel::before{right:-50px;bottom:-70px;width:300px;height:400px;opacity:.08;transform:rotate(10deg)} .fcard::before{right:-12px;bottom:-18px;width:78px;height:104px;opacity:.14;transform:rotate(8deg)} /* the dark sections carry the bolt filled with the logo's own gradient -- the exact five-stop amber-to-red ramp from #logoRamp, so the mark on the ink panels IS the header glyph, blown up. Drawn at z-index:-1 inside an isolated stacking context so content always sits on top. */ .services,.power,.projects,.site-footer,.faq-card{ position:relative;overflow:hidden;isolation:isolate; } .services::before,.power::before,.projects::before,.site-footer::before,.faq-card::after{ content:"";position:absolute;z-index:-1;pointer-events:none;opacity:.1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3ClinearGradient id='r' x1='0' y1='0' x2='.32' y2='1'%3E%3Cstop offset='0' stop-color='%23E05604'/%3E%3Cstop offset='.32' stop-color='%23F17410'/%3E%3Cstop offset='.6' stop-color='%23F7941D'/%3E%3Cstop offset='.84' stop-color='%23FFAE3C'/%3E%3Cstop offset='1' stop-color='%23FFBE5E'/%3E%3C/linearGradient%3E%3Cpath d='M58 0 10 78.4 44 78.4 36 140 90 58.8 54 58.8Z' fill='url(%23r)'/%3E%3C/svg%3E") no-repeat center/contain; } .services::before{left:-64px;top:44px;width:260px;height:364px;transform:rotate(-12deg)} .power::before{left:-80px;bottom:-70px;width:240px;height:336px;transform:rotate(-10deg)} .projects::before{right:-36px;top:-30px;width:260px;height:364px;transform:rotate(12deg)} .site-footer::before{right:-40px;top:26px;width:220px;height:308px;transform:rotate(12deg)} .faq-card::after{right:-10px;bottom:-16px;width:74px;height:104px;transform:rotate(8deg)} .why-panel h2{font-size:clamp(32px,3.5vw,52px);color:#fff} .why-sub{margin:20px 0 0;font-weight:500;color:rgba(255,255,255,.9)} .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:40px} .badges span{ background:var(--cream);color:var(--ink);border-radius:9px;padding:11px 16px; font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em; text-transform:uppercase; } .why-features{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,64px);align-content:start} .why-item{padding:30px 0;border-bottom:1px solid var(--line)} .why-features>div:nth-child(2n){border-left:0} .why-item:nth-child(1),.why-item:nth-child(2){padding-top:0} .why-item h3{font-size:26px;text-transform:none;letter-spacing:-.02em;margin-bottom:12px} .why-item p{margin:0;color:var(--ink-70)} .why-cta{padding-top:34px} /* ═══════════ PROJECTS ═══════════ */ .projects{background:var(--ink);padding:clamp(60px,7vw,110px) 0;border-radius:26px;margin:0 var(--pad)} .projects .shell{padding:0 clamp(16px,3vw,48px)} .projects .section-title{margin-bottom:clamp(34px,4vw,58px)} .gal{ display:grid;grid-template-columns:1.15fr 1.35fr .78fr .78fr; grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:min(62vh,600px); } .gal figure{margin:0;border-radius:16px;overflow:hidden} .gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .gal figure:hover img{transform:scale(1.06)} .gal-a{grid-row:span 2} .gal-b{grid-row:span 2;outline:3px solid var(--orange);outline-offset:0;border-radius:16px} .gal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:34px;flex-wrap:wrap;gap:20px} .gal-nav{display:flex;align-items:center;gap:10px} .gal-nav button{ width:56px;height:52px;background:transparent;border:1px solid rgba(255,255,255,.24); color:#fff;border-radius:11px;font-size:22px;line-height:1; } .gal-nav button:hover{background:rgba(255,255,255,.1)} .gal-nav span{ color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px; letter-spacing:.16em;padding:0 14px; } .gal-social{ display:flex;align-items:center;gap:12px;color:#fff; font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em; } .gal-social svg{width:26px;height:26px;color:var(--orange)} /* ═══════════ TESTIMONIALS ═══════════ */ .tst{padding:clamp(64px,8vw,120px) 0} .tst-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(34px,5vw,90px)} .tst-left{border-right:1px solid var(--line);padding-right:clamp(20px,3vw,60px)} .tst-left h2{font-size:clamp(32px,3.6vw,54px);margin-bottom:20px} .tst-intro{color:var(--ink-70);margin:0 0 32px;max-width:46ch} .ratings{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:38px} .rating{display:flex;align-items:center;gap:13px;font-size:14px;color:var(--ink-70)} .rating strong{font-size:20px;color:var(--ink);font-family:'Archivo',sans-serif} .rating-logo{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:#fff;flex:none; } .rating-logo.g{background:#4285F4} .rating-logo.y{background:#D32323} .tst-right{position:relative;padding-left:clamp(0px,2vw,20px)} .quote-mark{ font-family:'Archivo',sans-serif;font-weight:800;font-size:150px;color:var(--orange); line-height:.6;display:block;height:76px; } .tst-slides{position:relative;min-height:240px} .tst-slide{margin:0;display:none} .tst-slide.is-active{display:block;animation:fade .45s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tst-slide p{ font-size:clamp(20px,1.8vw,27px);line-height:1.5;font-weight:500;margin:0 0 40px;max-width:26ch; } .tst-slide footer{display:flex;align-items:center;gap:15px} .tst-slide footer img{width:52px;height:52px;border-radius:50%;object-fit:cover} .tst-slide footer strong{ font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase; } .tst-slide footer span{font-size:15px;color:var(--ink-70);line-height:1.4} .tst-nav{position:absolute;right:0;bottom:0;display:flex;gap:10px} .tst-nav button{ width:58px;height:54px;border:1px solid var(--line);background:#fff;border-radius:11px;font-size:22px; } .tst-nav button:hover{background:var(--cream)} /* ═══════════ FAQ ═══════════ */ .faq{padding:clamp(64px,8vw,120px) 0} .faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,90px)} .faq-left h2{font-size:clamp(32px,3.6vw,54px)} .faq-note{color:var(--ink-70);margin:22px 0 40px} .faq-note a{font-weight:700;text-decoration:underline} /* solid ink, not the cream-with-a-bite-corner every other card gets -- this is the one card on the page whose job is to look like a button, not a content card, so it earns a different treatment entirely. */ .faq-card{ background:var(--ink);color:#fff;padding:32px;max-width:340px;border-radius:var(--r); } .faq-card-icon{width:44px;height:44px;display:block;margin-bottom:56px;color:var(--orange)} .faq-card h3{font-size:23px;text-transform:none;letter-spacing:-.02em;margin-bottom:22px;color:#fff} .faq-card .btn-dark{background:var(--orange)} .faq-card .btn-dark:hover{background:#fff;color:var(--ink)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{ list-style:none;cursor:pointer;padding:28px 60px 28px 0;position:relative; font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(18px,1.5vw,23px); letter-spacing:-.015em; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{ content:"";position:absolute;right:0;top:50%;width:44px;height:44px; margin-top:-22px;border-radius:50%;background:var(--cream); background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor); background-size:13px 2px,2px 13px;background-position:center,center; background-repeat:no-repeat;transition:transform .25s ease; } .faq-list details[open] summary::after{transform:rotate(45deg)} .faq-body{padding:0 60px 30px 0} .faq-body p{margin:0;color:var(--ink-70)} /* ═══════════ CONTACT ═══════════ */ .contact{padding:0 0 clamp(64px,8vw,110px)} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3vw,44px);align-items:stretch} .contact-media{position:relative;border-radius:var(--r);overflow:hidden;min-height:520px} .contact-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .contact-badge{ position:absolute;left:26px;bottom:26px;background:#fff;border-radius:14px; padding:18px 22px;display:flex;align-items:center;gap:14px; } .contact-badge strong{ font-family:'Archivo',sans-serif;font-size:30px;color:var(--orange);letter-spacing:-.02em; } .contact-badge span{font-size:13.5px;line-height:1.3;color:var(--ink-70)} .contact-form{ background:var(--orange);color:#fff;padding:clamp(32px,3.6vw,58px); border-radius:var(--r);position:relative;overflow:hidden; } .contact-form h2{font-size:clamp(32px,3.4vw,50px);color:#fff} .contact-form>p{margin:20px 0 34px;color:rgba(255,255,255,.92);max-width:62ch} .contact-form>p a{font-weight:700;text-decoration:underline} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} .contact-form label{ display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.95); } .field-full{margin-bottom:26px} .contact-form input,.contact-form textarea{ width:100%;margin-top:11px;border:0;border-radius:10px;padding:17px 19px; font:inherit;font-size:16px;letter-spacing:normal;text-transform:none;color:var(--ink); background:#fff;resize:vertical; } .contact-form input::placeholder,.contact-form textarea::placeholder{color:#A5A5A5} .contact-form input:focus,.contact-form textarea:focus{ outline:none;box-shadow:0 0 0 3px var(--ink),0 0 0 6px rgba(255,255,255,.55); } .contact-form .btn-dark:hover{background:#fff;color:var(--ink)} .form-done{margin:18px 0 0;font-weight:600} /* ═══════════ FOOTER ═══════════ */ .site-footer{ background:var(--ink);color:#fff;border-radius:26px;margin:0 var(--pad) var(--pad); padding:clamp(50px,6vw,80px) 0 26px; } .footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center} .footer-inner .stars{margin-top:26px} .footer-title{ font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(21px,2vw,29px); margin:14px 0 8px;letter-spacing:-.01em; display:flex;align-items:center;justify-content:center;gap:12px; } .footer-sub{margin:0;color:rgba(255,255,255,.66)} .footer-nav{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;margin:38px 0 40px} .footer-nav a{font-size:16px;color:rgba(255,255,255,.85)} .footer-nav a:hover{color:var(--orange)} .footer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%} .fcard{ background:var(--orange);border-radius:14px;padding:26px 30px; display:flex;align-items:center;gap:18px;text-align:left;color:var(--ink); position:relative;overflow:hidden; } .fcard:hover{transform:translateY(-3px)} .fcard svg{width:34px;height:34px;flex:none} .fcard em{font-style:normal;font-size:14px;font-weight:600;display:block} .fcard strong{ font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(17px,1.5vw,26px); letter-spacing:-.02em;display:block;overflow-wrap:anywhere; } .footer-areas{ display:flex;align-items:center;justify-content:space-between;gap:24px; width:100%;margin:44px 0 34px;flex-wrap:wrap; } .footer-addr{display:flex;align-items:center;gap:10px;margin:0;color:rgba(255,255,255,.9)} .pin{width:22px;height:22px;color:var(--orange);flex:none} .areas{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .areas-label{color:rgba(255,255,255,.66);margin-right:8px} .areas a{ border:1px solid rgba(255,255,255,.24);border-radius:11px;padding:15px 20px; font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.1em; display:flex;align-items:center;gap:16px; } .areas a em{font-style:normal;color:var(--orange)} .areas a:hover{background:rgba(255,255,255,.08)} .footer-bottom{ border-top:1px solid rgba(255,255,255,.14);padding-top:24px;width:100%; display:flex;align-items:center;justify-content:space-between;gap:20px; font-size:14px;color:rgba(255,255,255,.62);flex-wrap:wrap; } .legal{display:flex;gap:26px} .socials{display:flex;gap:16px} .socials a{width:20px;height:20px;color:#fff;display:block} /* ═══════════ FLOATING CALL ═══════════ */ .call-fab{ position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%; background:var(--orange);color:#fff;display:none;place-items:center;z-index:70; box-shadow:0 12px 30px rgba(255,90,0,.45); } .call-fab svg{width:26px;height:26px} /* ── WhatsApp FAB ── Held back until the visitor has scrolled past the emergency-services cards (script.js toggles .is-on), so it doesn't sit on top of the hero's own WhatsApp button while that is still on screen. Hidden state uses visibility as well as opacity so it can't be tabbed to or clicked while invisible. */ .wa-fab{ position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%; background:#25d366;color:#fff;display:grid;place-items:center;z-index:71; box-shadow:0 12px 30px rgba(37,211,102,.42); opacity:0;visibility:hidden;transform:translateY(14px) scale(.92); transition:opacity .25s ease,transform .25s ease,visibility .25s,background .18s ease; } .wa-fab.is-on{opacity:1;visibility:visible;transform:none} .wa-fab:hover{background:#1ebe5a} .wa-fab svg{width:30px;height:30px} /* ═══════════ AREAS HUB + TOWN PAGES ═══════════ */ /* the hub's town index: one tile per Sussex town */ /* auto-fill so the tiles reflow at any width instead of forcing the page wider than the viewport when a long town name can't shrink */ .towns-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:38px} .towns-index a{ background:var(--cream);border-radius:12px;padding:18px 20px; font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px; letter-spacing:.05em;text-transform:uppercase; display:flex;justify-content:space-between;align-items:center;gap:10px; min-width:0; transition:background .18s ease,color .18s ease,transform .18s ease; } .towns-index a::after{content:"\2197";color:var(--orange);flex:none} .towns-index a:hover{background:var(--ink);color:#fff;transform:translateY(-2px)} .towns-note{margin:34px 0 0;color:var(--ink-70);max-width:70ch} /* town pages: the cross-link strip (nearby towns + common jobs) */ .nearby{padding:clamp(40px,5vw,72px) 0} .nearby-row{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center} .nearby-row + .nearby-row{margin-top:16px} .nearby-label{ font-family:'Archivo',sans-serif;font-weight:700;font-size:12px; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45);margin-right:4px; } .nearby-row a{ background:var(--cream);border-radius:9px;padding:10px 15px; font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px; letter-spacing:.06em;text-transform:uppercase; transition:background .18s ease,color .18s ease; } .nearby-row a:hover{background:var(--ink);color:#fff} /* ═══════════ POLISH: motion, hover, detail floor ═══════════ */ /* eyebrows carry a spark of the brand: a short amp of orange before the label, so every section opener is signed the same way. */ .eyebrow::before{ content:"";display:inline-block;width:20px;height:2px; background:var(--orange);vertical-align:middle;margin:-2px 10px 0 0; } /* on orange or dark panels the orange dash vanishes -- go translucent white */ .eyebrow.light::before,.final-panel .eyebrow::before{background:rgba(255,255,255,.8)} /* ── one hover language: every card on the page floats ── Same distance and same easing everywhere, so the whole page answers the cursor identically. What sells the height has to differ by surface though: a cast shadow is invisible against the near-black panels, so cards sitting on those lift and brighten instead of lifting and casting. */ .icard,.how-card,.duo-card,.who-card,.pcard,.fcard,.svc,.gal figure,.proj{ transition:transform .25s ease,box-shadow .25s ease, background .25s ease,border-color .25s ease,filter .25s ease; } /* on light surfaces: a tight shadow keeping the card tied to the page, and a big soft one doing the lifting */ .icard:hover,.how-card:hover,.duo-card:hover,.who-card:hover,.proj:hover{ transform:translateY(-9px); box-shadow:0 4px 10px rgba(11,11,11,.05), 0 34px 64px -20px rgba(11,11,11,.3); } /* on the dark panels: same lift, but the glass cards brighten and their hairline border firms up, since no shadow would register against #0b0b0b */ .pcard:hover{ transform:translateY(-9px); background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34); } /* image tiles carry their own slow zoom already -- the lift rides on top */ .svc:hover,.gal figure:hover{transform:translateY(-9px)} /* orange on near-black: warm it a touch rather than cast into the dark */ .fcard:hover{transform:translateY(-9px);filter:brightness(1.07)} /* buttons press down as well as lift up */ .btn:active{transform:translateY(1px) scale(.98)} .btn-dark:hover{box-shadow:0 10px 26px rgba(224,86,4,.32)} /* FAQ answers ease in rather than snapping open */ .faq-list details[open] .faq-body{animation:faq-in .32s ease both} @keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* header grows a shadow once the page is scrolled (class set in script.js) */ .site-header{transition:box-shadow .25s ease} .site-header.is-scrolled{box-shadow:0 8px 28px rgba(11,11,11,.08)} /* floating call button breathes -- it's the one thing on a broken-boiler night the visitor must not miss */ .call-fab::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--orange); animation:fab-pulse 2.4s ease-out infinite; } @keyframes fab-pulse{ 0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.55);opacity:0} } /* hero entrance: copy stack rises in sequence, photo follows */ .hero-copy>*{animation:rise .6s cubic-bezier(.22,.61,.36,1) both} .hero-copy>*:nth-child(2){animation-delay:.08s} .hero-copy>*:nth-child(3){animation-delay:.16s} .hero-copy>*:nth-child(4){animation-delay:.24s} .hero-media{animation:rise .7s cubic-bezier(.22,.61,.36,1) .2s both} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* scroll reveal: script.js tags cards .rv, flips to .in as they enter. The offset rides the separate `translate` property, NOT transform, so the hover lift's transform composes with it instead of being overridden forever by the reveal end-state; transform/box-shadow stay in this transition list so the hover keeps its .25s timing on revealed cards. */ .rv{ opacity:0;translate:0 16px; transition:opacity .55s ease,translate .55s ease,transform .25s ease,box-shadow .25s ease; } .rv.in{opacity:1;translate:none} /* detail floor */ ::selection{background:var(--orange);color:#fff} :focus-visible{outline:2px solid var(--orange);outline-offset:3px} /* on orange panels an orange ring is invisible -- keyboard focus goes white exactly where the highest-value controls live */ .hero-panel :focus-visible,.contact-form :focus-visible,.final-panel :focus-visible, .why-panel :focus-visible,.fcard:focus-visible{outline-color:#fff} h1,h2,h3{text-wrap:balance} /* Everything below only applies where the hero is genuinely two columns -- under 1240px it stacks full width, where the shared sizing already fills. */ @media(min-width:1241px){ /* Desktop only: swing the hero's bolt watermark over to the left. The photo column sits on the right here, so the mark had little room; on the left it falls behind the copy column instead. Mirrored rotation so it still leans away from the panel edge, and dropped below the headline's baseline so it ghosts behind the lede and buttons rather than the H1. Left as-is under 1241px, where the grid is a single column and the bolt has the width. */ .hero-panel::before{ right:auto;left:-40px;top:auto;bottom:-90px; transform:rotate(-14deg); } } .chip{transition:background .18s ease,color .18s ease} .chip:hover{background:var(--ink);color:#fff} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-copy>*,.hero-media{animation:none} .rv{opacity:1;translate:none;transition:none} .call-fab::after{animation:none;display:none} .wa-fab{transition:none} .faq-list details[open] .faq-body{animation:none} .tst-slide.is-active{animation:none} .svc-img img,.gal figure img{transition:none} .icard,.how-card,.duo-card,.who-card,.pcard,.fcard,.svc,.gal figure,.proj, .btn,.site-header{transition:none} } /* ═══════════ RESPONSIVE ═══════════ */ @media(max-width:1240px){ .nav{display:none} /* nav is hidden here, so the remaining controls need pushing right */ .nav-toggle{display:grid} .header-cta{margin-left:auto} .nav.is-open{ display:flex;flex-direction:column;align-items:stretch;position:absolute; top:94px;left:0;right:0;background:#fff;padding:14px var(--pad) 26px;gap:2px; box-shadow:0 20px 40px rgba(0,0,0,.12);margin:0; /* the flyout now carries three dropdowns' worth of links -- scroll inside it rather than growing past the viewport */ max-height:calc(100vh - 94px);overflow:auto; } .header-inner{position:relative} /* the dropdown becomes a plain sub-list once .nav itself is the mobile flyout -- a floating panel would clip against the flyout's edges. It is collapsed until tapped: hover cannot open it on touch, and all three open at once turned the menu into a 26-link scroll. script.js sets .is-expanded, one at a time. */ .nav-item{position:static} .nav-drop{ position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto; box-shadow:none;padding:2px 0 8px 18px;min-width:0; display:none; } .nav-item.is-expanded .nav-drop{display:block} .nav-item.is-expanded .nav-drop--areas{display:grid} /* the caret must not answer to hover here -- a tap registers as a hover on touch and would spin it on a list that is still closed. It follows .is-expanded instead, so this reset has to come first. */ .nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:none} .nav-item.is-expanded .nav-caret{transform:rotate(180deg)} .hero-grid{grid-template-columns:1fr;min-height:0;padding-bottom:30px} /* stacked hero: the review card rides over the bottom of the photo rather than sitting under it. Most of the card now hangs below the image edge -- at 34px of overhang it sat across the middle of the photo and covered the subject, so this reserves close to the card's full height instead. */ .hero-media{padding-bottom:118px} .hero-media>img{height:min(56vh,470px)} .hero-card{ position:absolute;left:0;right:auto;bottom:0; width:94%;margin-top:0; box-shadow:0 20px 44px rgba(0,0,0,.22); } .strip-grid{grid-template-columns:1fr 1fr;gap:8px} .strip-item:nth-child(3){border-left:0;padding-left:0} .strip-item{padding-left:24px} .strip-item:nth-child(odd){border-left:0;padding-left:0} .about-grid,.why-grid,.tst-grid,.faq-grid,.contact-grid{grid-template-columns:1fr} .tst-left{border-right:0;border-bottom:1px solid var(--line);padding:0 0 40px} .tst-nav{position:static;margin-top:26px} .svc-grid{grid-template-columns:repeat(2,1fr)} .how-grid{grid-template-columns:repeat(2,1fr)} .gal{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,200px);height:auto} .gal-a,.gal-b{grid-row:span 1} .footer-cards{grid-template-columns:1fr} .contact-media{min-height:340px} } @media(max-width:720px){ body{font-size:16px} .header-cta{display:none} .nav-toggle{margin-left:auto} .logo{gap:11px} .logo-word{font-size:25px} .logo-bolt{width:12px;height:17px;margin-left:-6px} /* half the smaller bolt */ .logo-tag b,.logo-tag em{font-size:12px} .header-inner{height:84px} .nav.is-open{top:84px} .call-fab{display:grid} /* the call FAB only appears at this width, so stack WhatsApp above it instead of the two landing on the same spot */ .wa-fab{bottom:94px} .hero-copy h1{font-size:38px} .strip-grid{grid-template-columns:1fr} .strip-item{border-left:0;padding:12px 0} .svc-grid,.how-grid,.why-features{grid-template-columns:1fr} .why-item:nth-child(2){padding-top:30px} .field-row{grid-template-columns:1fr} .gal{grid-template-columns:1fr;grid-template-rows:repeat(6,220px)} .footer-nav{gap:20px} .footer-areas,.footer-bottom{justify-content:center;text-align:center} } /* ═══════════════════════════════════════════════════ ADDED SECTIONS Built only from the existing tokens (--orange, --ink, --cream, --line, --r, .notched, .btn, .eyebrow) so these read as part of the original design. ═══════════════════════════════════════════════════ */ /* shared: centred intro line under a section title */ .sec-lede{ max-width:66ch;margin:0 auto clamp(34px,4vw,54px); text-align:center;color:var(--ink-70); } .section-title + .sec-lede{margin-top:18px} /* shared: underlined text link */ .tlink{ font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px; letter-spacing:.09em;text-transform:uppercase; display:inline-flex;align-items:center;gap:8px;align-self:flex-start; border-bottom:2px solid var(--orange);padding-bottom:3px; transition:color .16s ease,gap .16s ease; } .tlink:hover{color:var(--orange);gap:13px} /* shared: tick list (same mark as .about-list) */ .ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px} .ticks li{position:relative;padding-left:32px;font-weight:500} .ticks li::before{ content:"";position:absolute;left:0;top:5px;width:18px;height:18px; border-radius:50%;background:var(--orange); } .ticks li::after{ content:"";position:absolute;left:5px;top:10px;width:7px;height:3px; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); } /* ── 1. emergency services (icon cards) ── */ .eserv{padding:clamp(60px,7vw,104px) 0} .icards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* each card takes its accent from the same amber-to-red ramp the logo bolt is drawn from (see #logoRamp), cycling one step per card -- six cards, five ramp stops, so the sixth repeats the first rather than needing a sixth colour invented just for this. The accent now only tints the link underline: the coloured top edge and the icon above each heading were both removed, so the cards read as plain text blocks and the ramp shows up once, quietly, at the bottom of each. */ .icard{ --accent:#E05604; background:var(--cream);padding:32px 30px 28px; display:flex;flex-direction:column;border-radius:var(--r); } .icard:nth-of-type(5n+2){--accent:#F17410} .icard:nth-of-type(5n+3){--accent:#F7941D} .icard:nth-of-type(5n+4){--accent:#FFAE3C} .icard:nth-of-type(5n+5){--accent:#FFBE5E} .icard h3{font-size:22px;text-transform:none;letter-spacing:-.02em;margin-bottom:10px} .icard p{margin:0 0 20px;color:var(--ink-70);font-size:15.5px} /* The card's bottom row: link on the left, a thumbnail of the actual fault in the bottom-right corner. They share a flex row rather than the image being absolutely positioned, because cards in a grid row stretch to equal height and the tallest card has no slack -- an absolute image would sit on top of its last line of copy. In the row it always clears the text. */ .icard-foot{ margin-top:auto; display:flex;align-items:flex-end;justify-content:space-between;gap:18px; } .icard-img{ width:88px;height:88px;flex:none; border-radius:14px;object-fit:cover; } /* text stays ink for contrast -- the accent only tints the underline, since ramp stops 4-5 are too pale to carry type on cream */ .icard .tlink{margin-top:0;border-bottom-color:var(--accent)} /* .tlink is align-self:flex-start globally, which in this row would pin it to the top; sit it on the same baseline edge as the image instead */ .icard-foot .tlink{align-self:flex-end;margin-bottom:4px} /* ── 2. common emergencies ── */ .probs{background:var(--cream);padding:clamp(60px,7vw,104px) 0;border-radius:26px;margin:0 var(--pad)} .probs .shell{padding:0 clamp(18px,3.4vw,54px)} .probs-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,72px);align-items:start} .probs-grid h2{font-size:clamp(30px,3.4vw,50px)} .probs-intro{color:var(--ink-70);margin:20px 0 30px;max-width:56ch} .probs .ticks{grid-template-columns:1fr 1fr;gap:13px 26px} /* ── safety notice ── This is the one panel on the page carrying instructions someone might act on while a fault is live. The warning triangle in the heading carries that on its own -- an earlier version added hazard tape along the top edge too, which was one signal too many. The panel content varies by page (what to do while you wait, what happens on arrival, how a job runs), so the hierarchy is carried by type alone -- a lead first paragraph, then supporting detail -- rather than by labels that would only be true on some of the 38 places this appears. */ .safety{ position:relative;background:#fff;border-radius:var(--r); padding:clamp(28px,2.6vw,34px) clamp(24px,2.4vw,34px); box-shadow:0 22px 48px -34px rgba(17,17,17,.5); } .safety h3{ font-size:clamp(19px,1.55vw,23px);text-transform:none; letter-spacing:-.025em;line-height:1.25;margin:0 0 18px; display:flex;align-items:flex-start;gap:12px; } /* the triangle sits on the cap-height of the first line, not the middle of a heading that may wrap to two */ .safety h3 svg{width:22px;height:22px;color:var(--orange);flex:none;margin-top:2px} .safety p{margin:0 0 14px;color:var(--ink-70);font-size:15.5px;line-height:1.62} /* first paragraph carries the instruction that matters most on every variant of this panel, so it gets the size and the full-strength ink */ .safety p:first-of-type{font-size:17px;color:var(--ink);line-height:1.55} .safety p:last-of-type{margin-bottom:0} .safety .btn{margin-top:24px} /* ── 3 & 5. split image + copy ── */ .split{padding:clamp(60px,7vw,104px) 0} .split-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,88px);align-items:center} .split-media{overflow:hidden;border-radius:var(--r)} /* is-reverse swings the photo to the right and the copy to the left. The responsive block already had the counterpart rule putting the image back on top once the grid stacks, but this half was never written, so the class did nothing until now. */ .split.is-reverse .split-media{order:2} .split-media img{width:100%;height:min(62vh,580px);object-fit:cover} .split-copy h2{font-size:clamp(30px,3.4vw,50px);margin-bottom:22px} .split-copy p{color:var(--ink-70);margin:0 0 18px;max-width:60ch} /* the read-more link and the booking button are inline boxes, so they were landing shoulder to shoulder on one line -- the link takes its own line, with the button's existing top margin spacing the pair */ .split-copy .tlink{display:table} .chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 32px} .chip{ background:var(--cream);border-radius:9px;padding:10px 15px; font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px; letter-spacing:.07em;text-transform:uppercase; } /* ── 4. power loss (dark) ── */ .power{background:var(--ink);color:#fff;padding:clamp(60px,7vw,104px) 0;border-radius:26px;margin:0 var(--pad)} .power .shell{padding:0 clamp(18px,3.4vw,54px)} .power-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,72px);align-items:start} .power h2{font-size:clamp(30px,3.4vw,50px);color:#fff} .power .eyebrow{color:rgba(255,255,255,.62)} .power-intro{color:rgba(255,255,255,.72);margin:20px 0 28px;max-width:52ch} .pcards{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pcard{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13); border-radius:16px;padding:24px 24px 22px; } .pcard h3{font-size:17.5px;color:#fff;text-transform:none;letter-spacing:-.01em;margin-bottom:9px} .pcard p{margin:0;font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.55} .power-note{ margin:30px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.72);font-size:15.5px; } /* ── 5. sockets + lighting duo ── */ .duo{padding:clamp(60px,7vw,104px) 0} .duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .duo-card{background:var(--cream);padding:38px 36px 34px;border-radius:var(--r)} .duo-card h3{font-size:26px;text-transform:none;letter-spacing:-.02em;margin-bottom:9px} .duo-sub{color:var(--ink-70);margin:0 0 22px;font-size:15.5px} .duo-list{list-style:none;padding:0;margin:0;display:grid;gap:11px} .duo-list li{position:relative;padding-left:26px;font-size:15.5px} .duo-list li::before{ content:"";position:absolute;left:0;top:9px;width:9px;height:9px; border-radius:50%;background:var(--orange); } .duo-cta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px;flex-wrap:wrap} .duo-cta .or{color:var(--ink-70)} /* ── 7. who we help ── */ .who{padding:clamp(60px,7vw,104px) 0} .who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .who-card{background:var(--cream);padding:36px 32px 32px;display:flex;flex-direction:column;border-radius:var(--r)} .who-card h3{font-size:24px;text-transform:none;letter-spacing:-.02em;margin-bottom:10px} .who-card p{margin:0 0 20px;color:var(--ink-70);font-size:15.5px} .who-ico{width:38px;height:38px;color:var(--orange);margin-bottom:20px;flex:none} .who-card .duo-list{margin-top:auto} .who-card.is-orange{background:var(--orange);color:#fff} .who-card.is-orange h3{color:#fff} .who-card.is-orange p{color:rgba(255,255,255,.92)} .who-card.is-orange .who-ico{color:#fff} .who-card.is-orange .duo-list li::before{background:#fff} .who-card.is-dark{background:var(--ink);color:#fff} .who-card.is-dark h3{color:#fff} .who-card.is-dark p{color:rgba(255,255,255,.7)} /* ── 8. areas covered ── */ .areas-sec{background:var(--cream);padding:clamp(56px,6.5vw,96px) 0;border-radius:26px;margin:0 var(--pad)} .town-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 32px} .town{ display:inline-flex;align-items:center;gap:10px; background:#fff;border-radius:11px;padding:15px 22px; font-family:'Archivo',sans-serif;font-weight:700;font-size:13px; letter-spacing:.08em;text-transform:uppercase; } .town svg{width:15px;height:15px;color:var(--orange);flex:none} /* on town pages the pills are links to neighbouring towns */ a.town{transition:background .18s ease,color .18s ease} a.town:hover{background:var(--ink);color:#fff} .areas-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:center} /* ── 12. final call to action ── */ .final{margin:0 var(--pad) clamp(26px,3vw,44px)} .final-panel{ border-radius:26px;text-align:center;color:#fff; padding:clamp(46px,5.5vw,88px) clamp(24px,4vw,72px); background: radial-gradient(105% 80% at 14% 8%, rgba(255,199,118,.42) 0%, rgba(255,199,118,0) 62%), var(--orange-ramp); position:relative;overflow:hidden; } .final-panel h2{font-size:clamp(32px,4.2vw,64px);color:#fff} .final-panel .eyebrow{color:rgba(255,255,255,.78)} .final-lede{max-width:56ch;margin:22px auto 0;color:rgba(255,255,255,.94);font-size:17.5px} .final-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px} .final-phone{ display:inline-flex;align-items:center;gap:13px; background:#fff;color:var(--ink);border-radius:14px;padding:15px 26px; transition:transform .18s ease; } .final-phone:hover{transform:translateY(-2px)} .final-phone svg{width:26px;height:26px;color:var(--orange);flex:none} .final-phone em{font-style:normal;font-size:13px;color:var(--ink-70);display:block} .final-phone strong{ font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.02em; font-size:clamp(21px,2.1vw,28px);display:block; } .final-meta{ display:flex;gap:12px 30px;justify-content:center;flex-wrap:wrap; margin-top:32px;color:rgba(255,255,255,.9);font-size:15px; } .final-meta span{display:inline-flex;align-items:center;gap:9px} .final-meta svg{width:17px;height:17px;flex:none} /* ── stacked panels join into one continuous block ── Full-width panels already sit flush (no vertical margin), but each kept its own 26px corners, which pinched a notch of page background into the seam. Square off ONLY the edges that actually touch, so the outer corners of the run stay rounded. */ .panel + .panel{border-top-left-radius:0;border-top-right-radius:0} .panel:has(+ .panel){border-bottom-left-radius:0;border-bottom-right-radius:0} /* the final CTA carries its radius on an inner element, and its bottom margin would otherwise re-open the gap above the footer */ .final.panel:has(+ .panel){margin-bottom:0} .final.panel:has(+ .panel) > .final-panel{border-bottom-left-radius:0;border-bottom-right-radius:0} /* ...and the mirror of that: squaring the section alone leaves the inner panel's own 26px top corners cutting into the seam below the panel above */ .panel + .final.panel > .final-panel{border-top-left-radius:0;border-top-right-radius:0} /* ── responsive ── */ @media(max-width:1240px){ .icards,.who-grid{grid-template-columns:repeat(2,1fr)} .probs-grid,.power-grid,.split-grid,.duo-grid{grid-template-columns:1fr} .split.is-reverse .split-media{order:0} .split-media img{height:min(46vh,420px)} } @media(max-width:720px){ /* the hero is edge-to-edge at every width now (see the HERO block). Extra headroom above the H1, which sat too close to the top once the panel started running under the header, and a tighter side inset than the desktop gutter-absorbing value -- on a phone that would waste the width. */ .hero-panel{padding-top:56px;padding-inline:24px} .icards,.who-grid,.pcards,.probs .ticks{grid-template-columns:1fr} .probs .ticks{gap:12px} .duo-card,.safety,.icard,.who-card{padding-left:24px;padding-right:24px} /* "Call an Emergency Electrician Now" cannot fit one line in this card, and as a flex row the icon ends up marooned beside a three-line text block. Setting the button to a text block instead lets the icon sit in the flow of the first line, so the label wraps and centres like ordinary type. */ .safety .btn{ width:100%;display:block;text-align:center; line-height:1.5;padding-left:20px;padding-right:20px; } .safety .btn .ico{ display:inline-block;vertical-align:-4px;margin-right:9px; } .town{padding:13px 17px;font-size:12px} .final-actions .btn,.final-phone{width:100%;justify-content:center} /* band headings were filling the card edge to edge on narrow screens */ .band-card{padding:32px 26px} .band-2 .band-card h2{font-size:clamp(28px,8vw,40px)} .band-card h2{font-size:clamp(26px,6.6vw,34px)} /* lift inline links to a 44px tap target on touch screens */ .tlink{padding-top:15px;padding-bottom:8px} .footer-nav{gap:6px 20px} .footer-nav a{padding:9px 4px;display:inline-block} } /* ── Google reviews widget ── Elfsight injects its own markup, so this only reserves the space and keeps the section rhythm consistent with the rest of the page. min-height stops the layout jumping when the widget finishes loading. */ .greviews{padding:clamp(60px,7vw,104px) 0} .greviews .shell > .elfsight-app-c71d9710-d7fd-4c0e-98d4-b4deec466b0a{ margin-top:clamp(28px,3vw,44px);min-height:320px; } /* The section ships hidden and script.js reveals it once the widget has actually rendered reviews. Without this the reserved 320px shows as a blank white band whenever the widget returns nothing -- ad blocker, no network, or a display mode that renders no inline list. */ .greviews[hidden]{display:none} /* ── Elfsight floating review badge ── Hidden from script.js, not from here. A CSS rule cannot tell the floating badge apart from the inline review list -- both use the same class names -- and page CSS cannot reach into the shadow root Elfsight renders in anyway. The script hides only elements that are position:fixed, which the floating badge is and the inline reviews are not. */