/* ============================================================ Shining Harbour Cleaning Services - premium stylesheet Palette pulled from the logo: pine/teal + sage + sunrise amber Type: Bricolage Grotesque (display) + Hanken Grotesk (text) ============================================================ */ :root{ --ink:#15302b; --ink-soft:#3f574f; --teal-900:#0e3a34; --teal-800:#114b43; --teal-700:#15605563; /* placeholder, overridden below */ --teal:#176153; --teal-600:#1f7766; --teal-500:#2c9080; --sage-50:#f4f9f7; --sage-100:#eaf3ef; --sage-200:#d8eae3; --sage-300:#bcd9cf; --amber:#ef9f4d; --amber-deep:#e08a35; --amber-soft:#f8d9b0; --bg:#f7faf8; --paper:#ffffff; --line:rgba(17,75,67,0.12); --line-strong:rgba(17,75,67,0.22); --shadow-sm:0 1px 3px rgba(14,58,52,.06), 0 1px 2px rgba(14,58,52,.04); --shadow-md:0 10px 30px -12px rgba(14,58,52,.22), 0 4px 10px -6px rgba(14,58,52,.12); --shadow-lg:0 30px 60px -22px rgba(14,58,52,.30), 0 12px 26px -16px rgba(14,58,52,.18); --radius:18px; --radius-lg:26px; --radius-sm:12px; --maxw:1200px; --ease:cubic-bezier(.22,.61,.36,1); --font-display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif; --font-text:"Hanken Grotesk", system-ui, -apple-system, sans-serif; } :root{ --teal-700:#155f52; } *{ box-sizing:border-box; } *::selection{ background:var(--teal); color:#fff; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; font-family:var(--font-text); color:var(--ink); background:var(--bg); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* NB: no overflow-x here — it would turn into a scroll container and break the sticky header. Horizontal overflow is clipped on instead. */ } img{ max-width:100%; display:block; } /* grid/flex children must be allowed to shrink below their content size, otherwise wide media (image-slot, iframes) forces horizontal overflow */ .hero-grid > *, .why-grid > *, .quote-grid > *, .areas-grid > *, .ba-wrap > *, .works-ba-grid > *{ min-width:0; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-0.02em; margin:0; color:var(--ink); } p{ margin:0; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-family:var(--font-text); } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--amber); border-radius:2px; } .eyebrow.center::after{ content:""; width:22px; height:2px; background:var(--amber); border-radius:2px; } .section{ padding-block:clamp(38px,5vw,72px); } .section-head{ max-width:680px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ font-size:clamp(30px,5vw,50px); margin-top:16px; } .section-head p{ color:var(--ink-soft); font-size:clamp(17px,2vw,19px); margin-top:18px; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 20px; border-radius:999px; font-weight:700; font-size:15px; border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); white-space:nowrap; } .btn:active{ transform:translateY(0) scale(.97); } .btn svg{ width:16px; height:16px; } .btn-primary{ background:var(--teal); color:#fff; box-shadow:0 10px 22px -10px rgba(21,96,82,.6); } .btn-primary:hover{ transform:translateY(-2px); background:var(--teal-600); box-shadow:0 16px 30px -12px rgba(21,96,82,.7); } .btn-amber{ background:var(--amber); color:#3a2206; box-shadow:0 10px 22px -10px rgba(224,138,53,.6); } .btn-amber:hover{ transform:translateY(-2px); background:var(--amber-deep); color:#321d04; } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px); } .btn-white{ background:#fff; color:var(--teal-900); } .btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn-lg{ padding:13px 24px; font-size:15.5px; } /* ============================================================ TOP BAR ============================================================ */ .topbar{ background:var(--teal-900); color:#dff0ea; font-size:14px; } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding-block:9px; } .topbar a{ display:inline-flex; align-items:center; gap:8px; color:#cfe7df; transition:color .2s; white-space:nowrap; } .topbar a svg{ width:16px; height:16px; flex-shrink:0; } .topbar a:hover{ color:#fff; } .topbar .tb-left{ display:flex; gap:30px; align-items:center; } .topbar .tb-right{ display:flex; gap:18px; align-items:center; } .topbar .pill-note{ display:inline-flex; align-items:center; gap:9px; color:#a8d6c9; padding-left:30px; border-left:1px solid rgba(255,255,255,.14); } .topbar .pill-note svg{ width:15px; height:15px; color:var(--amber); } .tb-social{ display:flex; gap:11px; } .tb-social a{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); justify-content:center; } .tb-social a:hover{ background:var(--amber); color:#3a2206; } .tb-social svg{ width:14px; height:14px; } /* ============================================================ HEADER / NAV ============================================================ */ .header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s; } .header.scrolled{ box-shadow:var(--shadow-sm); background:rgba(255,255,255,.95); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; } .brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .brand img{ height:52px; width:auto; } .brand .b-name{ display:none; flex-direction:column; line-height:1; } .brand .b-name strong{ font-family:var(--font-display); font-size:17px; color:var(--teal-900); letter-spacing:-.01em; } .brand .b-name span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-600); margin-top:3px; } .nav-links{ display:flex; align-items:center; gap:6px; } .nav-links a{ padding:10px 14px; border-radius:10px; font-weight:600; font-size:15.5px; color:var(--ink-soft); transition:color .2s, background .2s; } .nav-links a:hover{ color:var(--teal); background:var(--sage-100); } .nav-links a.active{ color:var(--teal); background:var(--sage-100); } .nav-cta{ display:flex; align-items:center; gap:12px; } .nav-call{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--teal-900); } .nav-call svg{ width:34px; height:34px; padding:8px; border-radius:50%; background:var(--sage-100); color:var(--teal); } .nav-call small{ display:block; font-size:11px; font-weight:600; color:var(--ink-soft); letter-spacing:.04em; } .nav-call b{ font-size:16px; } .hamburger{ display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-strong); background:#fff; flex-direction:column; gap:5px; align-items:center; justify-content:center; } .hamburger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; } .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2){ opacity:0; } .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* mobile menu */ .mobile-menu{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff; z-index:80; transform:translateX(100%); transition:transform .4s var(--ease); padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow-y:auto; } .mobile-menu.open{ transform:translateX(0); } .mm-overlay{ position:fixed; inset:0; background:rgba(14,58,52,.4); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s; } .mm-overlay.open{ opacity:1; pointer-events:auto; } .mm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .mm-head img{ height:46px; } .mm-close{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--sage-50); font-size:22px; color:var(--ink); } .mobile-menu nav{ display:flex; flex-direction:column; gap:4px; } .mobile-menu nav a{ padding:14px 12px; border-radius:12px; font-weight:600; font-size:18px; border-bottom:1px solid var(--line); } .mobile-menu nav a:hover{ background:var(--sage-50); color:var(--teal); } .mm-actions{ margin-top:22px; display:flex; flex-direction:column; gap:12px; } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; padding-top:clamp(18px,2.5vw,34px); padding-bottom:clamp(40px,5vw,72px); overflow:hidden; } .hero::before{ content:""; position:absolute; top:-220px; right:-180px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--sage-200), transparent 70%); z-index:0; } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; } .hero-rating{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:24px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .hero-rating:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--sage-300); } .hero-rating .stars{ color:var(--amber); letter-spacing:1px; font-size:15px; } .hero-rating b{ font-weight:700; } .hero-rating .gmark{ width:18px; height:18px; } .hero-rating .hr-arrow{ width:14px; height:14px; color:var(--teal); opacity:.5; transition:opacity .25s, transform .25s; } .hero-rating:hover .hr-arrow{ opacity:1; transform:translate(2px,-2px); } .hero h1{ font-size:clamp(30px,6.2vw,68px); } .hero h1{ overflow-wrap:break-word; } .hero h1 .accent{ color:var(--teal); position:relative; } .hero h1 .accent::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em; background:var(--amber-soft); border-radius:4px; z-index:-1; } .hero-sub{ color:var(--ink-soft); font-size:clamp(17px,2.1vw,20px); margin-top:22px; max-width:520px; } .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .hero-points{ display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:30px; } .hero-points li{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--ink); list-style:none; } .hero-points{ padding:0; margin-left:0; } .hero-points svg{ width:20px; height:20px; color:var(--teal); flex-shrink:0; } .hero-media{ position:relative; } .hero-media .img-main{ width:100%; height:clamp(360px,52vw,540px); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); } .hero-media .img-sub{ position:absolute; bottom:-34px; left:-34px; width:42%; height:200px; border-radius:var(--radius); box-shadow:var(--shadow-lg); border:6px solid #fff; } .hero-badge{ position:absolute; top:24px; right:-14px; background:var(--teal-900); color:#fff; padding:16px 20px; border-radius:var(--radius); box-shadow:var(--shadow-lg); text-align:center; } .hero-badge .num{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--amber); } .hero-badge small{ display:block; font-size:12px; letter-spacing:.04em; margin-top:6px; color:#cfe7df; max-width:120px; } /* ---- light hero entrance animation ---- */ @keyframes heroUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } @keyframes heroFade{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } } @keyframes heroFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } .hero-copy > *{ animation:heroUp .7s var(--ease) both; } .hero-copy > *:nth-child(1){ animation-delay:.05s; } .hero-copy > *:nth-child(2){ animation-delay:.13s; } .hero-copy > *:nth-child(3){ animation-delay:.21s; } .hero-copy > *:nth-child(4){ animation-delay:.29s; } .hero-copy > *:nth-child(5){ animation-delay:.37s; } .hero-media{ animation:heroFade .9s var(--ease) .15s both; } .hero-badge{ animation:heroFloat 5s ease-in-out 1.2s infinite; } /* ============================================================ TRUST STRIP ============================================================ */ .trust{ background:var(--teal-900); color:#eaf6f1; } .trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:34px; } .trust-item{ display:flex; align-items:center; gap:14px; } .trust-item .ti-ico{ width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.08); display:grid; place-items:center; flex-shrink:0; } .trust-item svg{ width:24px; height:24px; color:var(--amber); } .trust-item b{ display:block; font-family:var(--font-display); font-size:20px; } .trust-item span{ font-size:13.5px; color:#a8d6c9; } /* ============================================================ SERVICES ============================================================ */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; } .svc-card{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; display:flex; flex-direction:column; } .svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; } .svc-card.featured{ grid-row:span 1; border:1px solid var(--teal-500); } .svc-card .svc-img{ width:100%; height:200px; } .svc-tag{ position:absolute; top:14px; left:14px; background:var(--amber); color:#3a2206; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.03em; } .svc-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; } .svc-body h3{ font-size:21px; } .svc-body p{ color:var(--ink-soft); font-size:15px; } .svc-link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--teal); font-size:15px; } .svc-link svg{ width:16px; height:16px; transition:transform .25s; } .svc-card:hover .svc-link svg{ transform:translateX(4px); } /* ============================================================ WHY US ============================================================ */ .why{ background:var(--sage-50); } .why-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,64px); align-items:center; } .why-media{ position:relative; } .why-media .img-tall{ width:100%; height:clamp(380px,46vw,520px); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); } .why-stat{ position:absolute; right:-22px; bottom:36px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:20px 24px; text-align:center; border:1px solid var(--line); } .why-stat .num{ font-family:var(--font-display); font-size:38px; color:var(--teal); line-height:1; } .why-stat span{ font-size:13px; color:var(--ink-soft); font-weight:600; } .why-list{ display:flex; flex-direction:column; gap:18px; margin-top:32px; } .why-list li{ display:flex; gap:16px; list-style:none; } .why-list .wl-ico{ width:46px; height:46px; border-radius:13px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; box-shadow:var(--shadow-sm); } .why-list svg{ width:22px; height:22px; color:var(--teal); } .why-list b{ display:block; font-size:17px; font-family:var(--font-display); } .why-list p{ color:var(--ink-soft); font-size:15px; margin-top:3px; } .why ul{ padding-left:0; } /* ============================================================ HOW IT WORKS ============================================================ */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; } .step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 24px; transition:transform .3s var(--ease), box-shadow .3s; } .step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .step .step-n{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--amber-deep); letter-spacing:.1em; } .step .step-ico{ width:54px; height:54px; border-radius:15px; background:var(--sage-100); display:grid; place-items:center; margin:16px 0 18px; } .step svg{ width:28px; height:28px; color:var(--teal); } .step h3{ font-size:19px; } .step p{ color:var(--ink-soft); font-size:14.5px; margin-top:8px; } .step:not(:last-child)::after{ content:""; position:absolute; top:54px; right:-15px; width:30px; height:2px; background:var(--line-strong); z-index:2; } /* ============================================================ GALLERY + BEFORE/AFTER ============================================================ */ .gallery{ background:var(--teal-900); color:#fff; } .gallery .section-head h2{ color:#fff; } .gallery .section-head p{ color:#bfe0d6; } .gallery .eyebrow{ color:var(--amber); } .ba-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; margin-top:36px; align-items:stretch; } .ba-slider{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; min-height:340px; } .ba-slider .ba-layer{ position:absolute; inset:0; } .ba-slider image-slot{ width:100%; height:100%; } .ba-after{ clip-path:inset(0 0 0 var(--split,50%)); } .ba-label{ position:absolute; bottom:16px; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.05em; background:rgba(14,58,52,.82); color:#fff; backdrop-filter:blur(4px); } .ba-label.before{ left:16px; } .ba-label.after{ right:16px; background:var(--amber); color:#3a2206; } .ba-handle{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:3px; background:#fff; transform:translateX(-50%); z-index:5; } .ba-handle::after{ content:"⟺"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; color:var(--teal); display:grid; place-items:center; font-size:16px; box-shadow:var(--shadow-md); } .ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:6; margin:0; } .gallery-side{ display:grid; grid-template-rows:1fr 1fr; gap:24px; } .gallery-side image-slot{ width:100%; height:100%; min-height:158px; } /* ============================================================ REVIEWS ============================================================ */ .reviews-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; } .gscore{ display:flex; align-items:center; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 26px; box-shadow:var(--shadow-sm); } .gscore .gbig{ font-family:var(--font-display); font-size:46px; line-height:1; color:var(--ink); } .gscore .stars{ color:var(--amber); font-size:18px; letter-spacing:2px; } .gscore small{ color:var(--ink-soft); font-size:14px; } .gscore .gmark{ width:30px; height:30px; } .reviews-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:38px; } .review-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); position:relative; transition:transform .3s var(--ease), box-shadow .3s; } .review-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .review-card .quote-mark{ font-family:var(--font-display); font-size:60px; color:var(--sage-300); line-height:.6; position:absolute; top:22px; right:26px; } .review-stars{ color:var(--amber); letter-spacing:2px; font-size:15px; margin-bottom:14px; } .review-text{ color:var(--ink); font-size:15.5px; line-height:1.65; } .review-author{ display:flex; align-items:center; gap:13px; margin-top:20px; } .review-author .avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:18px; } .review-author b{ font-size:15.5px; display:block; } .review-author span{ font-size:13px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; } .reviews-cta{ text-align:center; margin-top:36px; } /* ============================================================ SERVICE AREAS ============================================================ */ .areas{ background:var(--sage-50); } .areas-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,60px); align-items:center; } .area-chips{ display:flex; flex-wrap:wrap; gap:11px; margin-top:30px; } .area-chips span{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-weight:600; font-size:14.5px; color:var(--ink); transition:.25s; } .area-chips span:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px); } .area-map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); height:clamp(320px,40vw,440px); } .area-map image-slot{ width:100%; height:100%; } .area-map iframe{ display:block; width:100%; height:100%; border:0; } /* ============================================================ QUOTE / CONTACT ============================================================ */ .quote{ position:relative; } .quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,60px); align-items:stretch; } .quote-info{ background:var(--teal-900); color:#eaf6f1; border-radius:var(--radius-lg); padding:clamp(32px,4vw,46px); position:relative; overflow:hidden; } .quote-info::before{ content:""; position:absolute; bottom:-120px; right:-90px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(47,144,128,.5), transparent 70%); } .quote-info h3{ color:#fff; font-size:clamp(26px,3.4vw,34px); position:relative; } .quote-info .qi-sub{ color:#bfe0d6; margin-top:14px; position:relative; } .qi-contacts{ display:flex; flex-direction:column; gap:18px; margin-top:34px; position:relative; } .qi-row{ display:flex; gap:15px; align-items:center; } .qi-row .qi-ico{ width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.09); display:grid; place-items:center; flex-shrink:0; } .qi-row svg{ width:22px; height:22px; color:var(--amber); } .qi-row small{ display:block; color:#9fcabd; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; } .qi-row b{ font-size:18px; overflow-wrap:anywhere; } .qi-social{ display:flex; gap:12px; margin-top:36px; position:relative; } .qi-social a{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.09); display:grid; place-items:center; transition:.25s; } .qi-social a:hover{ background:var(--amber); transform:translateY(-3px); } .qi-social svg{ width:20px; height:20px; color:#fff; } .qi-social a:hover svg{ color:#3a2206; } .quote-form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(28px,3.5vw,42px); box-shadow:var(--shadow-md); } .quote-form h3{ font-size:24px; } .quote-form .qf-sub{ color:var(--ink-soft); font-size:15px; margin-top:8px; margin-bottom:26px; } .field{ margin-bottom:18px; } .field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--ink); } .field label .req{ color:var(--amber-deep); } .field input, .field select, .field textarea{ width:100%; padding:14px 16px; border:1px solid var(--line-strong); border-radius:12px; font-family:inherit; font-size:15.5px; color:var(--ink); background:var(--sage-50); transition:border .2s, box-shadow .2s, background .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 4px rgba(21,96,82,.1); } .field textarea{ resize:vertical; min-height:96px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .svc-checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .svc-check{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:11px; background:var(--sage-50); font-size:14px; font-weight:600; cursor:pointer; transition:.2s; } .svc-check:hover{ border-color:var(--teal-500); } .svc-check input{ width:17px; height:17px; accent-color:var(--teal); } .svc-check.checked{ background:var(--sage-100); border-color:var(--teal); color:var(--teal-900); } .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-error{ display:none; margin-top:6px; margin-bottom:4px; padding:11px 14px; border-radius:11px; background:#fdecea; border:1px solid #f5c6c0; color:#a02b1d; font-size:14px; font-weight:600; } .form-error.show{ display:block; } .form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; text-align:center; } .form-success{ display:none; text-align:center; padding:30px 10px; } .form-success.show{ display:block; } .form-success .fs-ico{ width:64px; height:64px; border-radius:50%; background:var(--sage-100); display:grid; place-items:center; margin:0 auto 18px; } .form-success svg{ width:32px; height:32px; color:var(--teal); } .form-success h3{ color:var(--teal-900); } .form-success p{ color:var(--ink-soft); margin-top:10px; } /* ============================================================ FAQ ============================================================ */ .faq{ background:var(--sage-50); } .faq-list{ max-width:820px; margin:48px auto 0; display:flex; flex-direction:column; gap:14px; } .faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .3s, border-color .3s; } .faq-item.open{ box-shadow:var(--shadow-md); border-color:var(--sage-300); } .faq-q{ width:100%; text-align:left; background:none; border:none; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); } .faq-q .faq-plus{ width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--sage-100); display:grid; place-items:center; position:relative; transition:.3s; } .faq-q .faq-plus::before, .faq-q .faq-plus::after{ content:""; position:absolute; background:var(--teal); border-radius:2px; transition:.3s; } .faq-q .faq-plus::before{ width:13px; height:2px; } .faq-q .faq-plus::after{ width:2px; height:13px; } .faq-item.open .faq-plus{ background:var(--teal); } .faq-item.open .faq-plus::before, .faq-item.open .faq-plus::after{ background:#fff; } .faq-item.open .faq-plus::after{ transform:rotate(90deg); opacity:0; } .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .faq-a-inner{ padding:0 26px 24px; color:var(--ink-soft); font-size:15.5px; line-height:1.65; } /* ============================================================ FINAL CTA + FOOTER ============================================================ */ .final-cta{ background:var(--teal); color:#fff; border-radius:0; } .final-cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-block:clamp(48px,6vw,68px); } .final-cta h2{ color:#fff; font-size:clamp(28px,4vw,42px); max-width:680px; } .final-cta p{ color:#d5efe7; margin-top:12px; } .final-cta .fc-actions{ display:flex; gap:14px; flex-wrap:wrap; } .footer{ background:var(--teal-900); color:#bfe0d6; padding-block:clamp(48px,6vw,72px) 30px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; } .footer .f-brand img{ height:60px; margin-bottom:18px; background:#fff; border-radius:14px; padding:8px; } .footer .f-brand p{ font-size:14.5px; line-height:1.65; max-width:280px; } .f-social{ display:flex; gap:12px; margin-top:22px; } .f-social a{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:.25s; } .f-social a:hover{ transform:translateY(-3px); background:var(--amber); } .f-social svg{ width:20px; height:20px; color:#fff; } .f-social a:hover svg{ color:#3a2206; } .footer h4{ color:#fff; font-size:16px; margin-bottom:18px; font-family:var(--font-display); } .footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; } .footer ul a{ font-size:14.5px; color:#bfe0d6; transition:color .2s; } .footer ul a:hover{ color:#fff; } .footer .f-contact li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; overflow-wrap:anywhere; } .footer .f-contact svg{ width:18px; height:18px; color:var(--amber); flex-shrink:0; margin-top:3px; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:13px; color:#8fc0b1; } /* ============================================================ OUR WORKS PAGE ============================================================ */ .page-hero{ background:var(--sage-50); border-bottom:1px solid var(--line); padding-block:clamp(30px,4.5vw,58px); position:relative; overflow:hidden; } .page-hero::before{ content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--sage-200), transparent 70%); } .page-hero .wrap{ position:relative; z-index:1; } .page-hero .crumb{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink-soft); font-weight:600; } .page-hero .crumb a{ color:var(--teal); } .page-hero h1{ font-size:clamp(32px,5vw,54px); margin-top:14px; } .page-hero p{ color:var(--ink-soft); font-size:clamp(16px,2vw,19px); margin-top:14px; max-width:640px; } .works-ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; } .works-ba-grid .ba-slider{ height:clamp(360px,40vw,460px); min-height:0; } .ba-slider .ba-layer img{ width:100%; height:100%; object-fit:cover; display:block; } .work-ba-cap{ margin-top:12px; font-weight:600; color:var(--ink-soft); font-size:14.5px; text-align:center; } .works-gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; } .work-card{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/3; border:1px solid var(--line); } .work-card img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); } .work-card:hover img{ transform:scale(1.07); } .work-card .wc-tag{ position:absolute; left:12px; bottom:12px; background:rgba(14,58,52,.82); color:#fff; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; backdrop-filter:blur(4px); } @media (max-width:860px){ .works-ba-grid{ grid-template-columns:1fr; } .works-gallery-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .works-gallery-grid{ grid-template-columns:1fr; } } /* floating mobile call bar */ .mobile-bar{ display:none; } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* back-to-top button */ .to-top{ position:fixed; right:22px; bottom:24px; z-index:54; width:46px; height:46px; border-radius:50%; background:var(--teal); color:#fff; border:none; display:grid; place-items:center; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transform:translateY(14px) scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s; } .to-top.show{ opacity:1; pointer-events:auto; transform:none; } .to-top:hover{ background:var(--teal-600); transform:translateY(-2px); } .to-top svg{ width:22px; height:22px; } @media (max-width:760px){ .to-top{ bottom:84px; right:16px; } } /* keep transforms snappy but respect reduced-motion preferences */ @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } .hero-copy > *, .hero-media, .hero-badge{ animation:none !important; opacity:1 !important; transform:none !important; } *{ scroll-behavior:auto; } } /* ---- subtle film-grain texture: adds depth so the light background reads as crafted rather than flat/templated ---- */ body::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- gallery lightbox ---- */ .lightbox{ position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(9,30,27,.93); backdrop-filter:blur(4px); animation:lbIn .25s var(--ease); } @keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } } .lightbox.open{ display:flex; } .lb-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; } .lb-fig img{ max-width:min(92vw,1080px); max-height:84vh; border-radius:14px; box-shadow:var(--shadow-lg); background:#0e3a34; } .lb-cap{ display:flex; align-items:center; gap:12px; color:#eaf6f1; font-weight:600; font-size:15px; } .lb-count{ color:#9fcabd; font-size:13px; font-weight:600; } .lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; transition:background .2s, transform .2s; } .lb-btn:hover{ background:var(--amber); color:#3a2206; } .lb-btn svg{ width:24px; height:24px; } .lb-prev{ left:18px; } .lb-next{ right:18px; } .lb-close{ position:absolute; top:18px; right:18px; width:46px; height:46px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; transition:background .2s; } .lb-close:hover{ background:var(--amber); color:#3a2206; } @media (max-width:560px){ .lb-btn{ width:44px; height:44px; top:auto; bottom:20px; transform:none; } .lb-prev{ left:20px; } .lb-next{ right:20px; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width:1080px){ .brand .b-name{ display:flex; } } /* ---- tablets / collapsed nav ---- */ @media (max-width:980px){ .nav{ min-height:64px; } .nav-links{ display:none; } .nav-cta{ display:none; } /* CTA lives in the menu + bottom bar on mobile */ .hamburger{ display:flex; } .topbar .pill-note{ display:none; } .hero-grid{ grid-template-columns:1fr; } .hero-media{ order:-1; width:100%; max-width:560px; margin-inline:auto; } .hero-media .img-sub{ display:none; } .why-grid{ grid-template-columns:1fr; } .why-media{ max-width:560px; } .quote-grid{ grid-template-columns:1fr; } .areas-grid{ grid-template-columns:1fr; } .ba-wrap{ grid-template-columns:1fr; } .gallery-side{ grid-template-columns:1fr 1fr; grid-template-rows:none; } .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } } /* ---- large phones / small tablets ---- */ @media (max-width:760px){ .trust .wrap{ grid-template-columns:1fr 1fr; gap:26px 18px; } .services-grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr 1fr; } .step:not(:last-child)::after{ display:none; } .reviews-grid{ grid-template-columns:1fr; } .topbar .tb-email{ display:none; } /* keep phone + socials only */ .final-cta .wrap{ flex-direction:column; align-items:flex-start; } .hero h1 .accent{ white-space:normal; } /* stop headline overflowing */ .hero-media .img-main{ height:clamp(240px,56vw,420px); } body{ padding-bottom:74px; } /* room for fixed bottom bar */ .mobile-bar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:55; background:#fff; border-top:1px solid var(--line); padding:10px 14px; gap:10px; box-shadow:0 -6px 20px -10px rgba(14,58,52,.25); padding-bottom:calc(10px + env(safe-area-inset-bottom)); } .mobile-bar a{ flex:1; } .mobile-bar .btn{ width:100%; padding:13px; font-size:15px; } } /* ---- phones ---- */ @media (max-width:560px){ .topbar{ font-size:13px; } .topbar .wrap{ gap:10px; } .section-head h2{ font-size:clamp(25px,7vw,34px); } .field-row{ grid-template-columns:1fr; } .svc-checks{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .gallery-side{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; } .hero-badge{ right:8px; top:12px; padding:12px 14px; } .hero-badge .num{ font-size:24px; } .reviews-top{ flex-direction:column; align-items:flex-start; } .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } } /* ---- very small phones ---- */ @media (max-width:380px){ .trust .wrap{ grid-template-columns:1fr; } .brand img{ height:44px; } }