/* ============================================================ ELEGANT LANDSCAPING LLC Shared stylesheet. Dark / moss-green design system. One file, cached across every page. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap'); :root{ --black: #060505; --charcoal: #0f0f0d; --panel: #131311; --panel-line: #262620; --silver-100: #F2F0E9; --silver-300: #CDC9BF; --silver-500: #8D8A7F; --silver-700: #47453d; --green-100: #A9C48B; --green-400: #6F8F52; --green-600: #4C6E3F; --green-800: #26331e; --display: 'Cormorant Garamond', serif; --body: 'Jost', sans-serif; --gutter: clamp(1.25rem, 4vw, 3.5rem); --section-pad: clamp(3rem, 8vw, 6rem); --radius: 2px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--black); color:var(--silver-300); font-family:var(--body); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--green-600);color:var(--silver-100);} /* page-transition: brief fade on load, fade on navigate-away. Deliberately opacity-only. Any transform on other than `none` -- including translateY(0) -- makes the containing block for position:fixed descendants, which breaks .nav-overlay and .fx-layer: they get sized to the full document instead of the viewport, so the open menu renders off-screen. Do not add transform back here. */ body.page-in{opacity:0;} body.page-in-active{opacity:1;transition:opacity .32s ease;} body.page-out{opacity:0;transition:opacity .18s ease;} /* ============================================================ PAGE-ENTRY FX: one themed flourish per service page, playing once on load. Pure CSS/SVG, no image assets, no animation lib. Container sits fixed above content, ignores pointer events, and removes itself (via JS) after the animation finishes. Elements spawn at random positions ACROSS the whole viewport (not just a top sliver) so the effect reads as covering the screen rather than a thin band falling past the header. ============================================================ */ .fx-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;} .fx-layer.is-done{display:none;} :root{ --fx-grass-dark: #1F3813; --fx-grass-mid: #3E6B26; --fx-grass-light: #6FA23F; --fx-sod-dark: #223F17; --fx-sod-mid: #4A7A2C; --fx-leaf-green-dark: #23431A; --fx-leaf-green-mid: #4A7530; --fx-leaf-brown-dark: #2E2013; --fx-leaf-brown-mid: #8A5A32; --fx-dust-1: #C3A57C; --fx-dust-2: #9C7B54; --fx-dust-3: #6E5236; --fx-water-deep: #14567F; --fx-water-mid: #3B93C9; --fx-water-light: #CDEEFF; --fx-weed-red: #A8302B; --fx-weed-dark: #5E1916; } /* ---- mowing: thin, sharp-tapered grass blade clusters ---- */ .fx-clip{ position:absolute;width:34px;height:6px; background:linear-gradient(90deg, var(--fx-grass-dark) 0%, var(--fx-grass-mid) 32%, var(--fx-grass-light) 50%, var(--fx-grass-mid) 68%, var(--fx-grass-dark) 100%); clip-path:polygon(0% 50%, 8% 12%, 92% 4%, 100% 50%, 92% 96%, 8% 88%); opacity:0; animation:fxClipFly 1.7s cubic-bezier(.2,.7,.3,1) forwards; } /* a second, thinner, darker blade layered behind at an offset angle so each clipping reads as a small clump of grass, not one flat sliver */ .fx-clip::before{ content:'';position:absolute;top:30%;left:-16%;width:100%;height:100%; background:linear-gradient(90deg, var(--fx-grass-dark) 0%, var(--fx-grass-mid) 50%, var(--fx-grass-dark) 100%); clip-path:polygon(0% 50%, 8% 12%, 92% 4%, 100% 50%, 92% 96%, 8% 88%); transform:rotate(-13deg) scale(.62); filter:brightness(.6); z-index:-1; } /* a light midrib line down the main blade's length */ .fx-clip::after{ content:'';position:absolute;top:46%;left:6%;width:88%;height:1px; background:rgba(255,255,255,.45); } @keyframes fxClipFly{ 0%{opacity:0;transform:translate(0,0) rotate(var(--r0,0deg)) scale(.6);} 10%{opacity:1;transform:translate(0,0) rotate(var(--r0,0deg)) scale(1);} 100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,40vh)) rotate(var(--r1,420deg)) scale(1);} } /* ---- landscaping: jagged maple-style leaves, strictly brown or green ---- */ .fx-leaf{ position:absolute;width:26px;height:32px; clip-path:polygon( 50% 0%, 72% 8%, 90% 24%, 98% 46%, 90% 68%, 72% 86%, 50% 100%, 28% 86%, 10% 68%, 2% 46%, 10% 24%, 28% 8%); opacity:0; animation:fxLeafDrift 2s ease-in forwards; } .fx-leaf.l1{ background: repeating-linear-gradient(66deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 32% 26%, var(--fx-leaf-green-mid), var(--fx-leaf-green-dark) 78%); } .fx-leaf.l2{ background: repeating-linear-gradient(66deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 32% 26%, var(--fx-leaf-brown-mid), var(--fx-leaf-brown-dark) 78%); } .fx-leaf::after{ content:'';position:absolute;top:8%;left:50%;width:2px;height:82%; background:rgba(0,0,0,.4);transform:translateX(-50%); } .fx-leaf::before{ content:'';position:absolute;top:30%;left:24%;width:30%;height:1px; background:rgba(0,0,0,.32);transform:rotate(28deg); } @keyframes fxLeafDrift{ 0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.7);} 12%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);} 100%{opacity:0;transform:translate(var(--dx,-80px),var(--dy,35vh)) rotate(300deg) scale(1);} } /* ---- hardscaping: brown dust and grit, three size/color variants for realism ---- */ .fx-dust{position:absolute;opacity:0;animation:fxDustBurst 1.5s cubic-bezier(.15,.8,.3,1) forwards;} .fx-dust.d1{width:5px;height:5px;background:var(--fx-dust-1);border-radius:45% 55% 50% 50%/55% 45% 55% 45%;} .fx-dust.d2{width:9px;height:8px;background:var(--fx-dust-2);border-radius:40% 60% 55% 45%/50% 45% 60% 40%;} .fx-dust.d3{width:13px;height:10px;background:var(--fx-dust-3);border-radius:50% 50% 45% 55%/45% 55% 50% 50%;} @keyframes fxDustBurst{ 0%{opacity:0;transform:translate(0,0) scale(.4);} 15%{opacity:.9;} 100%{opacity:0;transform:translate(var(--dx,40px),var(--dy,-90px)) scale(1);} } /* ---- sprinkler: actual blue water droplets, glossy body plus a trailing tail ---- */ .fx-jet{ position:absolute;width:10px;height:10px;border-radius:50%; background:radial-gradient(circle at 34% 30%, var(--fx-water-light), var(--fx-water-mid) 55%, var(--fx-water-deep) 100%); opacity:0;animation:fxJetArc 1.6s cubic-bezier(.25,.85,.35,1) forwards; } .fx-jet::before{ content:'';position:absolute;left:50%;bottom:88%;transform:translateX(-50%); width:0;height:0; border-left:4px solid transparent;border-right:4px solid transparent; border-bottom:10px solid var(--fx-water-mid); } @keyframes fxJetArc{ 0%{opacity:0;transform:translate(0,0) rotate(0deg);} 10%{opacity:1;} 100%{opacity:0;transform:translate(var(--dx,120px),var(--dy,-60vh)) rotate(35deg);} } /* ---- weeds: red tapered slash marks sweeping across the whole screen ---- */ .fx-strike{ position:absolute;width:0;height:11px; background:linear-gradient(90deg, transparent, var(--fx-weed-dark) 8%, var(--fx-weed-red) 50%, var(--fx-weed-dark) 92%, transparent); clip-path:polygon(0% 50%, 6% 15%, 94% 15%, 100% 50%, 94% 85%, 6% 85%); filter:drop-shadow(0 0 9px rgba(168,48,43,.65)); opacity:0; animation:fxStrike .85s cubic-bezier(.5,0,.2,1) forwards; } @keyframes fxStrike{ 0%{width:0;opacity:0;} 20%{opacity:1;} 60%{width:85vw;opacity:1;} 100%{width:85vw;opacity:0;} } /* ---- sod: turf strips unrolling with grass texture and a soil edge ---- */ .fx-roll{ position:absolute;left:-45vw;width:45vw;height:46px;overflow:hidden; background:linear-gradient(180deg, var(--fx-sod-mid) 0%, var(--fx-sod-dark) 100%); opacity:0;transform:skewX(-6deg); animation:fxRollOut 1.5s cubic-bezier(.4,0,.2,1) forwards; } .fx-roll::before{ content:'';position:absolute;inset:0; background: repeating-linear-gradient(96deg, rgba(255,255,255,.11) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 3px, transparent 3px 16px); } .fx-roll::after{ content:'';position:absolute;left:0;right:0;bottom:-5px;height:7px; background:repeating-linear-gradient(90deg, var(--fx-dust-3) 0 4px, var(--fx-dust-2) 4px 9px); opacity:.85; } @keyframes fxRollOut{ 0%{opacity:0;transform:translateX(0) skewX(-6deg);} 8%{opacity:1;} 85%{opacity:1;} 100%{opacity:0;transform:translateX(155vw) skewX(-6deg);} } @media (prefers-reduced-motion: reduce){ .fx-layer{display:none;} } /* visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:2px solid var(--green-100); outline-offset:3px; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--green-600);color:var(--silver-100); padding:.8em 1.4em;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase; } .skip-link:focus{left:0;} h1,h2,h3{ font-family:var(--display); font-weight:500; color:var(--silver-100); margin:0 0 .5em; letter-spacing:.01em; } h1{font-size:clamp(2.3rem,6.4vw,4.2rem);line-height:1.06;} h2{font-size:clamp(1.8rem,4.2vw,2.6rem);line-height:1.14;} h3{font-family:var(--body);font-weight:500;font-size:1.05rem;color:var(--silver-100);} p{margin:0 0 1em;font-size:.95rem;color:var(--silver-500);} p:last-child{margin-bottom:0;} .lede{font-size:1.02rem;max-width:52ch;color:var(--silver-300);margin-bottom:1.6em;} .prose{max-width:62ch;} .eyebrow{ display:flex;align-items:center;gap:.85em; font-size:.66rem;letter-spacing:.3em;text-transform:uppercase; color:var(--green-100);margin-bottom:1.2em; } .eyebrow::before{content:'';width:28px;height:1px;background:var(--green-400);flex:none;} .eyebrow.is-centered{justify-content:center;} .container{max-width:1080px;margin:0 auto;padding-inline:var(--gutter);} .container.is-narrow{max-width:760px;} section{padding-block:var(--section-pad);} .divider{height:1px;background:var(--panel-line);border:0;margin:0;} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:1.05em 2.2em; font-size:.85rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; border:1px solid transparent;border-radius:var(--radius); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease; white-space:nowrap; } .btn-primary{ background:linear-gradient(135deg,var(--green-400),var(--green-600) 70%); color:var(--silver-100); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 12px 30px -14px rgba(79,111,63,.65); } .btn-primary:hover{transform:translateY(-2px);} .btn-ghost{background:transparent;color:var(--silver-100);border-color:var(--silver-700);} .btn-ghost:hover{border-color:var(--green-100);color:var(--green-100);} .btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;} .btn-row.is-centered{justify-content:center;} .textlink{color:var(--green-100);border-bottom:1px solid var(--green-600);} .textlink:hover{border-bottom-color:var(--green-100);} /* ---------- header ---------- */ .lp-header{ padding:1.2rem var(--gutter); display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--panel-line); position:relative;z-index:100; } .brand{display:flex;align-items:center;gap:.6rem;} .brand-mark{height:34px;width:auto;flex:none;} .brand-word{font-family:var(--display);font-size:1.4rem;color:var(--silver-100);white-space:nowrap;} .brand-word b{color:var(--green-100);font-weight:500;margin-left:.28em;} .lp-header-call{display:flex;align-items:center;gap:.5em;font-size:.92rem;color:var(--silver-100);} .lp-header-call svg{width:15px;height:15px;stroke:var(--green-100);} .header-right{display:flex;align-items:center;gap:1.2rem;} @media (max-width:520px){ .brand-word{font-size:1.15rem;} .brand-mark{height:27px;} .lp-header-call span{display:none;} } /* ---------- full-screen nav overlay ---------- */ .hamburger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;background:transparent; border:1px solid var(--panel-line);border-radius:var(--radius); } .hamburger span{ display:block;width:18px;height:1px;background:var(--silver-100); margin-inline:auto;transition:transform .35s ease, opacity .35s ease; } .hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .hamburger.is-open span:nth-child(2){opacity:0;} .hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .nav-overlay{ position:fixed;inset:0;z-index:99;background:var(--black); display:flex;flex-direction:column;align-items:center; overflow-y:auto;overscroll-behavior:contain;padding:5rem 1.25rem 2.5rem; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s; } /* auto margins center the menu when it fits and collapse when it does not, so a tall link list scrolls instead of clipping off both ends */ .nav-overlay > :first-child{margin-top:auto;} .nav-overlay > :last-child{margin-bottom:auto;} .nav-overlay.is-open{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .5s ease, transform .5s ease; } .nav-links{display:flex;flex-direction:column;align-items:center;gap:.2em;} .nav-links a{ font-family:var(--display);font-size:clamp(1.7rem,5.4vw,3rem);font-weight:500; color:var(--silver-300);padding:.12em 0;transition:color .3s ease; } .nav-links a:hover,.nav-links a.is-active{color:var(--green-100);} .nav-meta{margin-top:2.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;} .nav-meta a{font-size:.85rem;letter-spacing:.08em;color:var(--silver-500);} body.nav-open{overflow:hidden;} /* ---------- hero ---------- */ .hero{ position:relative;padding-block:clamp(3rem,9vw,6rem); background:radial-gradient(ellipse at 20% 20%, rgba(111,143,82,.08), transparent 55%); border-bottom:1px solid var(--panel-line); } .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;} @media (max-width:880px){.hero-grid{grid-template-columns:1fr;}} .hero-solo{max-width:64ch;} .trust-row{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.8rem;} .trust-item{display:flex;align-items:center;gap:.55em;font-size:.82rem;color:var(--silver-300);} .trust-item svg{width:16px;height:16px;stroke:var(--green-100);flex:none;} /* ---------- trust strip: social proof + response time + guarantee ---------- */ .trust-strip-section{border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);background:var(--charcoal);} .trust-strip-section .container{padding-top:1.1rem;padding-bottom:1.1rem;} .trust-strip{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;justify-content:center;} .trust-strip-item{display:flex;align-items:center;gap:.6em;font-size:.82rem;color:var(--silver-300);} .trust-strip-item svg{width:16px;height:16px;stroke:var(--green-100);flex:none;} .trust-strip-item b{color:var(--silver-100);font-weight:500;} .ts-stars{color:var(--green-100);letter-spacing:1px;font-size:.85rem;} @media (max-width:640px){.trust-strip{justify-content:flex-start;gap:.9rem;}} /* ---------- quote form card ---------- */ .form-card{ background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.2rem); } .form-card h2{font-size:1.4rem;margin-bottom:.3em;} .form-card .sub{font-size:.85rem;color:var(--silver-500);margin-bottom:1.4em;} .field{margin-bottom:1.1rem;} .field label{ display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--silver-500);margin-bottom:.55em; } .field input,.field select,.field textarea{ width:100%;background:var(--black);border:1px solid var(--panel-line); color:var(--silver-100);font-family:var(--body);font-size:.95rem; padding:.85em 1em;border-radius:var(--radius);transition:border-color .3s ease; } .field textarea{min-height:110px;resize:vertical;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-400);outline:none;} .field-hint{font-size:.72rem;color:var(--silver-700);margin-top:.4em;} .form-note{font-size:.74rem;color:var(--silver-700);margin-top:1rem;line-height:1.5;} .hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;} /* before/after photo frame */ .ba-wrap{margin-top:2.2rem;} .ba-frame{position:relative;border:1px solid var(--panel-line);overflow:hidden;background:var(--black);} .ba-frame img{width:100%;height:auto;display:block;} .ba-label{position:absolute;top:1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(10,10,10,.72);color:var(--silver-100);padding:.4em .9em;border:1px solid var(--panel-line);} .ba-label.before{left:1rem;} .ba-label.after{right:1rem;color:var(--green-100);border-color:var(--green-600);} .ba-caption{font-size:.85rem;color:var(--silver-500);margin-top:1rem;max-width:56ch;} /* spotlight card: for a single premium/featured service option */ .spotlight-card{ margin-top:2.2rem;padding:clamp(1.6rem,3vw,2.4rem);border:1px solid var(--green-600); background:linear-gradient(180deg,var(--panel),var(--black));position:relative; } .spotlight-card .badge{ display:inline-flex;align-items:center;gap:.4em;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;color:var(--green-100);border:1px solid var(--green-600); padding:.35em .8em;margin-bottom:1rem; } .spotlight-card h3{font-size:1.3rem;margin-bottom:.5em;} .spotlight-card p{color:var(--silver-300);} .spotlight-card .fine{font-size:.82rem;color:var(--silver-500);margin-top:.6em;} /* new-customer promo banner */ .promo-banner{margin-top:1.8rem;padding:1.1rem 1.5rem;border:1px dashed var(--green-400);display:flex;align-items:center;gap:.8em;font-size:.88rem;color:var(--silver-100);} .promo-banner b{color:var(--green-100);} /* ---------- photo service cards (home) ---------- */ .service-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--panel-line);margin-top:2.6rem;} .service-card{background:var(--black);padding:2.2rem 1.8rem;display:flex;flex-direction:column;gap:.9rem;min-height:280px;position:relative;overflow:hidden;} .service-card .thumb{position:absolute;inset:0;z-index:0;} .service-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:.46;transition:opacity .5s ease,transform .7s ease;} .service-card:hover .thumb img{opacity:.62;transform:scale(1.06);} .service-card .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,5,.18),rgba(6,5,5,.55) 55%,rgba(6,5,5,.92));} .service-card>*{position:relative;z-index:1;} .service-card .icon{width:28px;height:28px;stroke:var(--green-100);} .service-card p{font-size:.9rem;color:var(--silver-500);} .service-card h3{font-size:1.15rem;} .service-card .btn-sm{align-self:flex-start;} .service-card .side-link{font-size:.76rem;color:var(--silver-500);margin-top:-.4rem;} .service-card .side-link a{color:var(--green-100);text-decoration:underline;text-underline-offset:2px;} /* sprinkler droplet accent: shown on hover of the hardscaping card only */ .drop-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;} .service-card:hover .drop-field{opacity:1;} .drop-field span{ position:absolute;top:-12%;width:3px;height:12px;border-radius:0 0 3px 3px; background:linear-gradient(180deg,rgba(169,196,139,0),rgba(169,196,139,.85)); animation:dropfall 1.4s linear infinite; } .drop-field span:nth-child(1){left:14%;animation-delay:0s;} .drop-field span:nth-child(2){left:34%;animation-delay:.35s;height:9px;} .drop-field span:nth-child(3){left:58%;animation-delay:.15s;} .drop-field span:nth-child(4){left:76%;animation-delay:.55s;height:10px;} .drop-field span:nth-child(5){left:90%;animation-delay:.75s;} @keyframes dropfall{ 0%{transform:translateY(0);opacity:0;} 12%{opacity:1;} 85%{opacity:.7;} 100%{transform:translateY(340%);opacity:0;} } @media (prefers-reduced-motion: reduce){.drop-field span{animation:none;display:none;}} /* ---------- service / feature list ---------- */ .service-list{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--panel-line);margin-top:2.2rem; } .service-list.is-single{grid-template-columns:1fr;} .service-row{ background:var(--black);padding:1.9rem clamp(1.3rem,3vw,2rem); display:flex;gap:1.1rem;align-items:flex-start; } .service-row .icon{flex:none;width:28px;height:28px;stroke:var(--green-100);margin-top:.1rem;} .service-row p{font-size:.88rem;} .service-row h3{margin-bottom:.45em;} @media (max-width:640px){.service-list{grid-template-columns:1fr;}} /* service cards that link out (home page) */ .service-card-link{display:block;transition:background .3s ease;} .service-card-link:hover{background:var(--charcoal);} .service-card-link .more{ display:inline-block;margin-top:.9em;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--green-100); } /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem;} @media (max-width:760px){.steps{grid-template-columns:1fr;}} .step .num{font-family:var(--display);font-size:2rem;color:var(--green-100);margin-bottom:.3em;line-height:1;} /* ---------- testimonials ---------- */ .testimonial-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--panel-line);margin-top:2.2rem; } .testimonial-card{ background:var(--black);padding:1.9rem 1.6rem; display:flex;flex-direction:column;gap:1rem; } .stars{display:flex;gap:.2em;} .stars svg{width:12px;height:12px;fill:var(--green-100);stroke:none;} .testimonial-card p{font-family:var(--display);font-size:1.08rem;font-style:italic;color:var(--silver-100);} .testimonial-card .who{font-size:.76rem;letter-spacing:.06em;color:var(--silver-500);margin-top:auto;} @media (max-width:860px){.testimonial-grid{grid-template-columns:1fr;}} /* ---------- FAQ (native details, no JS) ---------- */ .faq{margin-top:2.2rem;border-top:1px solid var(--panel-line);} .faq details{border-bottom:1px solid var(--panel-line);} .faq summary{ list-style:none;cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0;position:relative; font-family:var(--body);font-weight:500;font-size:1.02rem;color:var(--silver-100); transition:color .3s ease; } .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--green-100);} .faq summary::after{ content:'';position:absolute;right:.4rem;top:50%; width:10px;height:10px;margin-top:-6px; border-right:1px solid var(--green-100);border-bottom:1px solid var(--green-100); transform:rotate(45deg);transition:transform .3s ease; } .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;} .faq .answer{padding:0 2.5rem 1.6rem 0;} .faq .answer p{font-size:.92rem;} /* ---------- seasonal / CTA band ---------- */ .cta-band{ background:var(--panel); border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line); text-align:center; } .cta-band .container{max-width:680px;} .cta-band p{color:var(--silver-300);} .band-accent{ background:linear-gradient(135deg, rgba(76,110,63,.22), rgba(19,19,17,.9) 65%); border-top:1px solid var(--green-800);border-bottom:1px solid var(--green-800); text-align:center; } .band-accent .container{max-width:720px;} .band-accent p{color:var(--silver-300);} /* ---------- pricing rows ---------- */ .price-list{margin-top:2.2rem;border-top:1px solid var(--panel-line);} .price-row{ display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem; padding:1.4rem 0;border-bottom:1px solid var(--panel-line); } .price-row .label h3{margin-bottom:.3em;} .price-row .label p{font-size:.86rem;margin:0;} .price-row .amount{ font-family:var(--display);font-size:1.5rem;color:var(--green-100); white-space:nowrap;flex:none; } @media (max-width:600px){ .price-row{flex-direction:column;gap:.5rem;} .price-row .amount{font-size:1.3rem;} } /* ---------- team ---------- */ .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--panel-line);margin-top:2.2rem;} @media (max-width:700px){.team-grid{grid-template-columns:1fr;}} .team-card{background:var(--black);padding:2rem 1.8rem;} .team-card .initials{ width:56px;height:56px;border:1px solid var(--green-600);border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:1.2rem;color:var(--green-100); margin-bottom:1.2rem; } .team-card .role{ font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--silver-500);margin-bottom:.5em; } /* ---------- gallery ---------- */ .gallery{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:1px;background:var(--panel-line);margin-top:2.2rem;} .gallery.is-single{grid-template-columns:1fr;max-width:640px;} @media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);}} .gallery figure{margin:0;background:var(--black);position:relative;} .gallery img{width:100%;display:block;object-fit:cover;aspect-ratio:4/3;} .gallery figcaption{ padding:.9rem 1rem;font-size:.78rem;color:var(--silver-500); border-top:1px solid var(--panel-line); } /* ---------- map embed ---------- */ .map-embed{ margin-top:2.2rem;border:1px solid var(--panel-line);border-radius:var(--radius); overflow:hidden;line-height:0;background:var(--panel); } .map-embed iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(.35) contrast(1.05);} @media (max-width:600px){.map-embed iframe{height:260px;}} /* ---------- service area ---------- */ .area-list{ display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem; } .area-list li{ border:1px solid var(--panel-line);border-radius:var(--radius); padding:.55em 1.1em;font-size:.82rem;color:var(--silver-300); } /* ---------- sticky mobile call bar ---------- */ .sticky-call{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:none;align-items:center;justify-content:center;gap:.7em; padding:1rem;background:linear-gradient(135deg,var(--green-400),var(--green-600) 75%); color:var(--silver-100);font-weight:500;font-size:.9rem; letter-spacing:.08em;text-transform:uppercase; box-shadow:0 -8px 24px rgba(0,0,0,.4); } .sticky-call svg{width:16px;height:16px;} @media (max-width:760px){ .sticky-call{display:flex;} body{padding-bottom:64px;} } /* ---------- footer ---------- */ .site-footer{padding-block:3rem;border-top:1px solid var(--panel-line);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;} @media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:2rem;}} .footer-logo{width:112px;height:auto;margin-bottom:1.1rem;} .site-footer h4{ font-family:var(--body);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--green-100);margin:0 0 1em;font-weight:500; } .site-footer li{margin-bottom:.6em;font-size:.88rem;color:var(--silver-500);} .site-footer li a:hover{color:var(--green-100);} .site-footer .tagline{font-size:.88rem;max-width:34ch;margin-top:1em;} .footer-bottom{ margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--panel-line); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between; font-size:.76rem;color:var(--silver-700); } .footer-simple{padding-block:2rem;border-top:1px solid var(--panel-line);text-align:center;} .footer-simple p{font-size:.76rem;color:var(--silver-700);} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .btn-primary:hover{transform:none;} } /* ============================================================ PROMO / SCANNABILITY COMPONENTS Added for the mowing page: a loud $50-off treatment, checkmark bullet lists that replace wall-of-text paragraphs, a hero-scale before/after frame, and a compact price card that sits under the quote form. All additive class names -- nothing above is overridden, so other pages render exactly as before. ============================================================ */ /* ---------- top-of-page deal bar (full bleed, under the header) ---------- */ .deal-bar{ position:relative;overflow:hidden; background:linear-gradient(100deg,var(--green-600),var(--green-400) 52%,var(--green-600)); border-bottom:1px solid var(--green-800); color:var(--silver-100); } .deal-bar .container{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.5rem 1.1rem;padding-block:.8rem;text-align:center;position:relative;z-index:1; } .deal-bar .amt{ font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1; color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25); } .deal-bar .txt{font-size:.85rem;color:#fff;} .deal-bar .txt b{font-weight:500;} .deal-bar .go{ font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500; color:#fff;border:1px solid rgba(255,255,255,.6);padding:.45em 1em;border-radius:var(--radius); transition:background .3s ease; } .deal-bar .go:hover{background:rgba(255,255,255,.16);} /* slow sheen so the bar reads as a live offer, not page furniture */ .deal-bar::after{ content:'';position:absolute;top:0;bottom:0;width:38%;left:-40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); animation:dealSheen 5.5s ease-in-out infinite; } @keyframes dealSheen{ 0%{left:-45%;} 55%{left:110%;} 100%{left:110%;} } @media (max-width:520px){ .deal-bar .container{padding-block:.7rem;gap:.35rem .7rem;} .deal-bar .amt{font-size:1.1rem;} .deal-bar .txt{font-size:.78rem;} } /* ---------- hero deal card: the $50 offer, spelled out ---------- */ .deal-card{ position:relative;margin:1.9rem 0 0; padding:clamp(1.3rem,3vw,1.8rem); border:1px solid var(--green-400);border-radius:var(--radius); background:linear-gradient(150deg,rgba(76,110,63,.34),rgba(19,19,17,.94) 62%); box-shadow:0 22px 55px -32px rgba(111,143,82,.75); } .deal-card .flag{ display:inline-flex;align-items:center;gap:.5em; font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500; color:var(--black);background:var(--green-100); padding:.4em .9em;border-radius:var(--radius);margin-bottom:1.1rem; } .deal-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .deal-amount{ font-family:var(--display);font-weight:600;line-height:.85; font-size:clamp(3.4rem,10vw,5rem);color:var(--green-100); text-shadow:0 0 44px rgba(169,196,139,.35); } .deal-amount-txt{display:flex;flex-direction:column;gap:.15em;} .deal-amount-txt b{ font-family:var(--display);font-size:clamp(1.35rem,3.4vw,1.8rem); font-weight:500;color:var(--silver-100);line-height:1.1; } .deal-amount-txt span{ font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-100); } .deal-card .tick-list{margin-top:1.3rem;} .deal-card .deadline{ display:flex;align-items:center;gap:.6em;margin-top:1.3rem; padding-top:1.1rem;border-top:1px dashed var(--green-600); font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-100); } .deal-card .deadline b{color:var(--green-100);font-weight:500;} .deal-card .deadline svg{width:15px;height:15px;stroke:var(--green-100);flex:none;} /* ---------- checkmark bullet lists (replaces dense paragraphs) ---------- */ .tick-list{display:grid;gap:.5em;margin:0;padding:0;list-style:none;} .tick-list li{ position:relative;padding-left:1.6em; font-size:.88rem;line-height:1.5;color:var(--silver-300); } .tick-list li::before{ content:'';position:absolute;left:.1em;top:.42em; width:9px;height:5px; border-left:1.6px solid var(--green-100);border-bottom:1.6px solid var(--green-100); transform:rotate(-45deg); } .tick-list li b{color:var(--silver-100);font-weight:500;} .tick-list.is-lede li{font-size:.98rem;color:var(--silver-300);} .service-row .tick-list{margin-top:.7rem;} .faq .answer .tick-list{margin-top:.2rem;} .faq .answer .tick-list li{font-size:.9rem;} .tick-list.is-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em 1.6rem;} @media (max-width:640px){.tick-list.is-cols{grid-template-columns:1fr;}} /* ---------- hero-scale before/after ---------- */ .ba-hero{margin-top:2.4rem;} .ba-hero .ba-title{ font-family:var(--display);font-size:clamp(1.35rem,3vw,1.8rem); color:var(--silver-100);margin:0 0 1rem;line-height:1.15; } .ba-hero .ba-frame{ border-color:var(--green-600); box-shadow:0 26px 60px -30px rgba(0,0,0,.95); } .ba-hero .ba-label{font-size:.72rem;font-weight:500;} .ba-hero .tick-list{margin-top:1rem;} /* ---------- $50 badge + consent row inside the quote form ---------- */ .form-deal{ display:flex;align-items:center;gap:.85em; margin:0 0 1.3rem;padding:.85rem 1rem; border:1px solid var(--green-400);border-radius:var(--radius); background:linear-gradient(120deg,rgba(76,110,63,.4),rgba(6,5,5,.35)); } .form-deal .amt{ font-family:var(--display);font-size:1.6rem;line-height:1;font-weight:600; color:var(--green-100);flex:none; } .form-deal .txt{font-size:.79rem;line-height:1.45;color:var(--silver-100);} .form-deal .txt b{color:var(--green-100);font-weight:500;} .field-check{ padding:.9rem 1rem;border:1px dashed var(--green-400);border-radius:var(--radius); background:rgba(76,110,63,.12); } /* .field label is uppercase micro-type; the consent line needs plain text */ .field-check label{ display:flex;align-items:flex-start;gap:.7em; font-size:inherit;letter-spacing:normal;text-transform:none; color:inherit;margin-bottom:0;cursor:pointer; } .check-line{margin:0;} /* custom box: .field input sets width:100% and a dark fill, which a native checkbox renders unpredictably, so draw the mark ourselves */ .check-line input[type="checkbox"]{ appearance:none;-webkit-appearance:none; width:20px;height:20px;flex:none;margin:.1em 0 0;padding:0; background:var(--black);border:1px solid var(--green-400);border-radius:var(--radius); display:grid;place-content:center;transition:background .2s ease, border-color .2s ease; } .check-line input[type="checkbox"]::before{ content:'';width:10px;height:5px; border-left:2px solid var(--black);border-bottom:2px solid var(--black); transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .18s ease; } .check-line input[type="checkbox"]:checked{background:var(--green-100);border-color:var(--green-100);} .check-line input[type="checkbox"]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1);} .check-line input[type="checkbox"]:focus-visible{outline:2px solid var(--green-100);outline-offset:2px;} .check-line span{font-size:.85rem;line-height:1.45;color:var(--silver-100);} .check-line span b{color:var(--green-100);font-weight:500;} /* ---------- full price list, moved in under the quote form ---------- Same rows as before, restyled as a panel for the narrow hero column: label over amount, the way .price-row already stacks on mobile. */ .price-block{ margin-top:1.4rem;padding:clamp(1.4rem,2.6vw,1.9rem); border:1px solid var(--panel-line);border-radius:var(--radius); background:var(--panel); } .price-block h2{font-size:clamp(1.35rem,3vw,1.6rem);margin-bottom:.7em;line-height:1.15;} .price-block .tick-list{margin-bottom:0;} .price-block .price-list{margin-top:1.5rem;} .price-block .price-row{ flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.1rem 0; } .price-block .price-row:last-child{border-bottom:0;padding-bottom:0;} .price-block .price-row .label h3{font-size:1rem;margin-bottom:.25em;} .price-block .price-row .label p{font-size:.84rem;} .price-block .price-row .amount{font-size:1.4rem;} .pm-save{ display:flex;align-items:flex-start;gap:.6em;margin:1rem 0 0; font-size:.86rem;line-height:1.5;color:var(--silver-100); } .pm-save b{color:var(--green-100);font-weight:500;} .pm-save svg{width:15px;height:15px;stroke:var(--green-100);flex:none;margin-top:.28em;} /* ---------- loud variant of the mid-page promo banner ---------- */ .promo-banner.is-deal{ align-items:flex-start;gap:1.1em; padding:clamp(1.3rem,3vw,1.8rem); border:1px solid var(--green-400); background:linear-gradient(120deg,rgba(76,110,63,.3),rgba(19,19,17,.92) 65%); box-shadow:0 20px 50px -34px rgba(111,143,82,.7); } .promo-banner.is-deal .deal-mark{ font-family:var(--display);font-size:clamp(2.6rem,7vw,3.4rem);line-height:.85; font-weight:600;color:var(--green-100);flex:none; text-shadow:0 0 38px rgba(169,196,139,.3); } .promo-banner.is-deal .body{display:block;font-size:.92rem;} .promo-banner.is-deal h3{font-size:1.15rem;margin-bottom:.5em;} .promo-banner.is-deal .tick-list{margin-top:.9rem;} .promo-banner.is-deal .btn-row{margin-top:1.3rem;} @media (max-width:520px){ .promo-banner.is-deal{flex-direction:column;} /* .btn is nowrap by default, which overflows this extra-padded box on narrow phones -- let the label wrap and stack the two buttons instead */ .promo-banner.is-deal .btn-row{flex-direction:column;align-items:stretch;} .promo-banner.is-deal .btn{white-space:normal;text-align:center;} } /* hero aside stack: form card first, price card under it */ .hero-aside{display:flex;flex-direction:column;} /* offer repeated in the closing CTA band */ .cta-band .deal-line{ font-size:1rem;color:var(--silver-100);margin-top:.4em; } .cta-band .deal-line b{color:var(--green-100);font-weight:500;} /* green emphasis for the offer inside the hero trust row */ .trust-item b{color:var(--green-100);font-weight:500;} @media (prefers-reduced-motion: reduce){ .deal-bar::after{animation:none;display:none;} }