/* ============================================================ TURFSCAPES — motion layer Loaded AFTER styles.css. Everything here degrades gracefully: without JS (no .js on ) the page renders fully visible. ============================================================ */ /* ------------------------------------------------------------ 1. SCROLL PROGRESS BAR ------------------------------------------------------------ */ .progress{ position:fixed;top:0;left:0;height:3px;width:100%;z-index:90; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--brand),#8ede2a); will-change:transform;pointer-events:none; } /* ------------------------------------------------------------ 2. REVEAL ENGINE The selector list below is mirrored in js/main.js (REVEAL_MAP). If you add a selector to one, add it to the other. ------------------------------------------------------------ */ .js .sec-head > *, .js .svc, .js .svc-note, .js .why__copy > *, .js .why__item, .js .why__card, .js .filters, .js .gal, .js .slist__col, .js .step, .js .review, .js .cta__in > *, .js .faq details, .js .quote__copy > *, .js .qform, .js .footer__col, .js [data-anim]{ opacity:0; will-change:opacity,transform; } .js .sec-head > *, .js .svc, .js .svc-note, .js .why__copy > *, .js .why__item, .js .filters, .js .slist__col, .js .step, .js .review, .js .cta__in > *, .js .faq details, .js .quote__copy > *, .js .footer__col, .js [data-anim="up"]{ transform:translateY(30px) } .js .gal, .js [data-anim="zoom"]{ transform:scale(.94) } .js .why__card, .js .qform, .js [data-anim="right"]{ transform:translateX(40px) } .js [data-anim="left"]{ transform:translateX(-40px) } .js [data-anim="blur"]{ filter:blur(10px);transform:translateY(20px) } /* clip-wipe: image uncovers itself from the bottom up */ .js [data-anim="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); transform:scale(1.06); } .js .is-in{ opacity:1 !important; transform:none !important; filter:none !important; will-change:auto; transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1), filter .75s ease, clip-path 1s cubic-bezier(.22,.61,.36,1); } /* clip-path only where it was applied — it would otherwise crop hover shadows */ .js [data-anim="clip"].is-in{ clip-path:inset(0 0 0 0) !important } /* ------------------------------------------------------------ 3. HERO ------------------------------------------------------------ */ .hero__media img{ animation:kenburns 24s ease-in-out infinite alternate; will-change:transform; } @keyframes kenburns{ from{ transform:scale(1.04) translate3d(0,0,0) } to { transform:scale(1.14) translate3d(-1.5%,-1.5%,0) } } /* the JS parallax wrapper — moves independently of the ken-burns */ .hero__media{ will-change:transform } /* headline: each line wipes up from behind a mask */ .hero h1 .line{ display:block;overflow:hidden;padding-bottom:.06em } .hero h1 .line > i{ display:block;font-style:normal; transform:translateY(110%); transition:transform 1.05s cubic-bezier(.19,1,.22,1); } .hero.is-lit h1 .line > i{ transform:translateY(0) } .hero h1 .line:nth-of-type(2) > i{ transition-delay:.13s } /* supporting hero bits fade up on load */ .hero .eyebrow, .hero .hero__sub, .hero .hero__actions, .hero .hero__badges{ opacity:0;transform:translateY(26px); transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1); } .hero.is-lit .eyebrow { opacity:1;transform:none;transition-delay:.05s } .hero.is-lit .hero__sub { opacity:1;transform:none;transition-delay:.38s } .hero.is-lit .hero__actions{ opacity:1;transform:none;transition-delay:.50s } .hero.is-lit .hero__badges{ opacity:1;transform:none;transition-delay:.62s } /* the eyebrow gets a drawing rule beside it */ .hero .eyebrow::after{ content:'';display:inline-block;vertical-align:middle;height:2px;width:0; background:var(--brand);margin-left:.9rem;transition:width .9s ease .55s; } .hero.is-lit .eyebrow::after{ width:64px } /* scroll cue */ .scrollcue{ position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;z-index:2; width:26px;height:42px;border:2px solid rgba(255,255,255,.45);border-radius:14px; opacity:0;transition:opacity .6s ease 1.1s; } .hero.is-lit .scrollcue{ opacity:1 } .scrollcue::before{ content:'';position:absolute;left:50%;top:8px;translate:-50% 0; width:3px;height:7px;border-radius:2px;background:var(--brand); animation:cue 1.9s ease-in-out infinite; } @keyframes cue{ 0%,100%{ transform:translateY(0);opacity:1 } 60% { transform:translateY(13px);opacity:0 } } @media(max-width:720px){ .scrollcue{display:none} } /* ------------------------------------------------------------ 4. MARQUEE TICKER ------------------------------------------------------------ */ .marquee{ background:var(--ink);border-top:1px solid #2e2e40;border-bottom:1px solid #2e2e40; overflow:hidden;padding:.95rem 0;user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{ display:flex;width:max-content;gap:2.4rem;align-items:center; animation:slide 38s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused } .marquee__track span{ font-family:var(--head);font-size:1.5rem;letter-spacing:2px;text-transform:uppercase; color:#55566b;white-space:nowrap;transition:color .3s; } .marquee__track span:hover{ color:#fff } .marquee__track b{ color:var(--brand);font-size:.7rem;line-height:1 } @keyframes slide{ to{ transform:translateX(-50%) } } /* ------------------------------------------------------------ 5. BUTTONS — shine sweep + press ------------------------------------------------------------ */ .btn{ position:relative;overflow:hidden;isolation:isolate } .btn::after{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%); transform:translateX(-120%); } .btn:hover::after{ transform:translateX(120%);transition:transform .75s cubic-bezier(.3,0,.2,1) } .btn:active{ transform:translateY(1px) scale(.985) } .btn--primary:active{ box-shadow:0 3px 10px rgba(92,178,0,.35) } /* phone icon gives a little ring */ .btn svg,.callbar a svg{ transition:transform .3s } .btn:hover svg,.callbar a:hover svg{ animation:ring .6s ease } @keyframes ring{ 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-14deg) } 40%{ transform:rotate(12deg) } 60%{ transform:rotate(-8deg) } 80%{ transform:rotate(5deg) } } /* ------------------------------------------------------------ 6. SECTION HEADINGS — rule draws under the h2 ------------------------------------------------------------ */ .sec-head h2{ position:relative;padding-bottom:.5rem } .sec-head h2::after{ content:'';position:absolute;left:50%;bottom:0;translate:-50% 0; height:3px;width:0;background:var(--brand);border-radius:2px; transition:width .8s cubic-bezier(.22,.61,.36,1) .25s; } .sec-head h2.is-in::after{ width:72px } /* ------------------------------------------------------------ 7. SERVICE CARDS ------------------------------------------------------------ */ .svc{ position:relative } .svc::before{ content:'';position:absolute;left:0;top:0;height:3px;width:0;z-index:3; background:var(--brand);transition:width .45s cubic-bezier(.22,.61,.36,1); } .svc:hover::before{ width:100% } .svc__img{ position:relative } .svc__img::after{ content:'';position:absolute;inset:0; background:linear-gradient(0deg,rgba(92,178,0,.20),transparent 55%); opacity:0;transition:opacity .4s; } .svc:hover .svc__img::after{ opacity:1 } .svc__body h3{ transition:color .3s } .svc:hover .svc__body h3{ color:var(--brand-d) } /* tick marks march in when the card lands */ .svc .ticks li{ opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s } .svc.is-in .ticks li{ opacity:1;transform:none } .svc.is-in .ticks li:nth-child(1){ transition-delay:.30s } .svc.is-in .ticks li:nth-child(2){ transition-delay:.40s } .svc.is-in .ticks li:nth-child(3){ transition-delay:.50s } .svc.is-in .ticks li:nth-child(4){ transition-delay:.60s } /* ---- full service list: rows sweep in from the left ---- */ .js .slist__items li{ opacity:0;transform:translateX(-14px); transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1),color .25s; } .js .slist__col.is-in .slist__items li{ opacity:1;transform:none } .slist__col{ transition:box-shadow .35s,border-color .35s } .slist__col:hover{ box-shadow:var(--shadow) } /* ------------------------------------------------------------ 8. STATS ------------------------------------------------------------ */ .stat{ position:relative } .stat + .stat::before{ content:'';position:absolute;left:0;top:50%;translate:0 -50%; width:1px;height:0;background:#34344a;transition:height .7s ease .2s; } .stats.is-in .stat + .stat::before{ height:56px } @media(max-width:680px){ .stat + .stat::before{ display:none } } .stat__num{ transition:text-shadow .4s } .stats.is-in .stat__num{ text-shadow:0 0 26px rgba(92,178,0,.35) } /* ------------------------------------------------------------ 9. WHY-US ICONS ------------------------------------------------------------ */ .why__item{ transition:transform .3s } .why__item:hover{ transform:translateX(5px) } .why__ico{ transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s } .why__item:hover .why__ico{ transform:rotate(-8deg) scale(1.1);background:var(--brand);color:var(--ink) } .why__card img{ transition:transform .8s cubic-bezier(.22,.61,.36,1) } .why__card:hover img{ transform:scale(1.05) } /* ------------------------------------------------------------ 10. GALLERY — filter morph + hover ------------------------------------------------------------ */ .chip{ position:relative;overflow:hidden } .chip::before{ content:'';position:absolute;inset:0;background:var(--ink);border-radius:inherit; transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .3s;z-index:-1; } .chip{ z-index:0 } .chip:hover::before{ transform:scale(1);opacity:.06 } .chip.is-active::before{ opacity:0 } .gal{ transition:opacity .32s ease,transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .35s } /* !important needed to beat the .is-in reveal rule above */ .gal.is-out{ opacity:0 !important;transform:scale(.9) !important;pointer-events:none } .gal:hover{ box-shadow:var(--shadow-lg) } /* magnifier badge that pops in on hover */ .gal::after{ content:'';position:absolute;left:50%;top:44%;z-index:2;pointer-events:none; width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%; background:var(--brand);box-shadow:0 6px 18px rgba(24,24,36,.35); opacity:0;transform:scale(.4) rotate(-25deg); transition:opacity .3s,transform .45s cubic-bezier(.34,1.55,.64,1); } .gal::before{ content:'';position:absolute;left:50%;top:44%;z-index:3;pointer-events:none; width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--ink); -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center/contain no-repeat; opacity:0;transform:scale(.4); transition:opacity .3s .05s,transform .45s cubic-bezier(.34,1.55,.64,1) .05s; } @media(hover:hover){ .gal:hover::after,.gal:hover::before{ opacity:1;transform:scale(1) rotate(0) } .gal figcaption{ z-index:4 } } /* ------------------------------------------------------------ 11. PROCESS — connector line draws across ------------------------------------------------------------ */ .steps{ position:relative } .steps::before{ content:'';position:absolute;top:56px;left:6%;height:2px;width:0; background:repeating-linear-gradient(90deg,var(--gray-3) 0 8px,transparent 8px 16px); transition:width 1.5s ease .3s;z-index:0; } .steps.is-in::before{ width:88% } @media(max-width:900px){ .steps::before{ display:none } } .step{ z-index:1 } .step__n{ transition:color .35s,transform .35s } .step:hover .step__n{ transform:translateY(-3px) } .step::after{ content:'';position:absolute;right:1.4rem;bottom:1.2rem;width:26px;height:26px;border-radius:50%; background:var(--brand);opacity:0;transform:scale(.4);transition:.4s cubic-bezier(.34,1.5,.64,1); } .step:hover::after{ opacity:.16;transform:scale(1) } /* ------------------------------------------------------------ 12. REVIEWS ------------------------------------------------------------ */ .review{ transition:transform .35s,box-shadow .35s,border-color .35s } .review:hover{ transform:translateY(-6px);box-shadow:var(--shadow) } .review .stars span{ display:inline-block;opacity:0;transform:scale(.3) rotate(-40deg); transition:opacity .35s,transform .45s cubic-bezier(.34,1.6,.64,1); } .review.is-in .stars span{ opacity:1;transform:none } .review.is-in .stars span:nth-child(1){ transition-delay:.20s } .review.is-in .stars span:nth-child(2){ transition-delay:.29s } .review.is-in .stars span:nth-child(3){ transition-delay:.38s } .review.is-in .stars span:nth-child(4){ transition-delay:.47s } .review.is-in .stars span:nth-child(5){ transition-delay:.56s } /* ------------------------------------------------------------ 13. CTA BANNER — subtle diagonal texture drift ------------------------------------------------------------ */ .cta{ position:relative;overflow:hidden } .cta::before{ content:'';position:absolute;inset:-50%;opacity:.10;pointer-events:none; background:repeating-linear-gradient(45deg,#0f2100 0 14px,transparent 14px 32px); animation:drift 26s linear infinite; } @keyframes drift{ to{ transform:translate3d(-32px,-32px,0) } } .cta__in{ position:relative;z-index:1 } /* ------------------------------------------------------------ 14. FAQ — height animated by JS ------------------------------------------------------------ */ .faq__body{ overflow:hidden;transition:height .34s cubic-bezier(.22,.61,.36,1) } .faq details{ transition:box-shadow .3s,border-color .3s,background .3s } .faq summary{ transition:color .25s } .faq summary:hover{ color:var(--brand-d) } .faq details[open] summary{ color:var(--ink) } .faq summary::after{ transition:transform .35s cubic-bezier(.34,1.5,.64,1),color .25s } /* ------------------------------------------------------------ 15. FORM ------------------------------------------------------------ */ .qform input,.qform select,.qform textarea{ transition:border-color .25s,box-shadow .25s,transform .25s; } .qform input:focus,.qform select:focus,.qform textarea:focus{ transform:translateY(-2px) } .qform .is-invalid{ animation:shake .4s } @keyframes shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-7px) } 40%{ transform:translateX(6px) } 60%{ transform:translateX(-4px) } 80%{ transform:translateX(3px) } } .qform__ok{ animation:popIn .45s cubic-bezier(.34,1.5,.64,1) } @keyframes popIn{ from{ opacity:0;transform:scale(.9) translateY(8px) } to{ opacity:1;transform:none } } .contactlist li{ transition:transform .3s } .contactlist li:hover{ transform:translateX(5px) } .contactlist li:hover .contactlist__ico{ background:var(--brand);color:var(--ink) } .contactlist__ico{ transition:background .3s,color .3s } /* ------------------------------------------------------------ 16. HEADER / NAV ------------------------------------------------------------ */ .header{ transition:box-shadow .3s,height .3s,background .3s } .header.is-stuck .header__in{ height:64px } .header__in{ transition:height .3s cubic-bezier(.22,.61,.36,1) } .brand__mark{ transition:transform .5s cubic-bezier(.34,1.5,.64,1) } .brand:hover .brand__mark{ transform:rotate(-10deg) scale(1.06) } .nav a::after{ transition:width .3s cubic-bezier(.22,.61,.36,1) } .nav__cta{ transition:background .25s,transform .25s,box-shadow .25s } .nav__cta:hover{ transform:translateY(-2px);box-shadow:0 8px 20px rgba(92,178,0,.4) } .footer__col a{ display:inline-block } .footer__col a:hover{ transform:translateX(4px) } .footer__col a{ transition:color .25s,transform .25s } /* ------------------------------------------------------------ 17. BACK TO TOP ------------------------------------------------------------ */ .totop{ position:fixed;right:1.4rem;bottom:1.6rem;z-index:75; width:48px;height:48px;border-radius:50%;display:grid;place-items:center; background:var(--brand);color:var(--ink);box-shadow:0 8px 22px rgba(24,24,36,.28); opacity:0;transform:translateY(18px) scale(.8);pointer-events:none; transition:opacity .35s,transform .45s cubic-bezier(.34,1.5,.64,1),background .25s; } .totop svg{ width:20px;height:20px } .totop.is-on{ opacity:1;transform:none;pointer-events:auto } .totop:hover{ background:var(--brand-d);transform:translateY(-3px) } @media(max-width:720px){ .totop{ bottom:70px;right:1rem;width:42px;height:42px } } /* ------------------------------------------------------------ 18. LIGHTBOX ------------------------------------------------------------ */ .lb{ animation:lbIn .3s ease } @keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } } .lb img{ animation:lbImg .45s cubic-bezier(.22,.61,.36,1) } @keyframes lbImg{ from{ opacity:0;transform:scale(.94) } to{ opacity:1;transform:none } } .lb__nav,.lb__close{ transition:background .25s,color .25s,transform .25s,opacity .25s } .lb__nav:hover{ transform:translateY(-50%) scale(1.1) } .lb__close:hover{ transform:rotate(90deg) } /* ------------------------------------------------------------ 19. MOBILE MENU stagger ------------------------------------------------------------ */ @media(max-width:960px){ .nav a{ opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s } .nav.is-open a{ opacity:1;transform:none } .nav.is-open a:nth-child(1){ transition-delay:.06s } .nav.is-open a:nth-child(2){ transition-delay:.11s } .nav.is-open a:nth-child(3){ transition-delay:.16s } .nav.is-open a:nth-child(4){ transition-delay:.21s } .nav.is-open a:nth-child(5){ transition-delay:.26s } .nav.is-open a:nth-child(6){ transition-delay:.31s } .nav.is-open a:nth-child(7){ transition-delay:.36s } } /* ------------------------------------------------------------ 20. ACCESSIBILITY — kill everything on request ------------------------------------------------------------ */ @media(prefers-reduced-motion:reduce){ .js .sec-head > *,.js .svc,.js .svc-note,.js .why__copy > *,.js .why__item, .js .why__card,.js .filters,.js .gal,.js .step,.js .review,.js .cta__in > *, .js .faq details,.js .quote__copy > *,.js .qform,.js .footer__col,.js [data-anim], .hero .eyebrow,.hero .hero__sub,.hero .hero__actions,.hero .hero__badges, .svc .ticks li,.review .stars span{ opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important; } .hero h1 .line > i{ transform:none !important } .hero__media img{ animation:none !important } .marquee__track{ animation:none !important } .cta::before{ animation:none !important } .scrollcue,.progress{ display:none } .steps::before{ width:88% !important;transition:none } .stats.is-in .stat + .stat::before{ height:56px } .sec-head h2::after{ width:72px !important;transition:none } }