/** * Deluxe Properties — motion layer. * * Three families: * 1. Scroll reveal — `data-dp-reveal` elements fade/slide in on entry. * 2. Counters — `data-dp-count` figures tick up when first seen. * 3. Event-driven — header, parallax, ripple, accordion, back-to-top. * * Everything here is gated on `.dp-js`, which `inc/enqueue.php` sets on * before first paint. With JavaScript off the class never lands, no element is * ever hidden, and the page renders exactly as it does without this file. * * Depends on assets/css/tokens.css. */ /* =============================================================== * 1. Scroll reveal * =============================================================== */ .dp-js [data-dp-reveal] { opacity: 0; transition: opacity var(--dp-reveal-dur) var(--dp-ease-out) var(--dp-reveal-delay, 0ms), transform var(--dp-reveal-dur) var(--dp-ease-out) var(--dp-reveal-delay, 0ms); } .dp-js [data-dp-reveal="up"], .dp-js [data-dp-reveal=""] { transform: translate3d(0, var(--dp-reveal-shift), 0); } .dp-js [data-dp-reveal="down"] { transform: translate3d(0, calc(var(--dp-reveal-shift) * -1), 0); } .dp-js [data-dp-reveal="left"] { transform: translate3d(calc(var(--dp-reveal-shift) * -1.2), 0, 0); } .dp-js [data-dp-reveal="right"] { transform: translate3d(calc(var(--dp-reveal-shift) * 1.2), 0, 0); } .dp-js [data-dp-reveal="scale"] { transform: scale(0.94); } .dp-js [data-dp-reveal="fade"] { transform: none; } /* Cards lift into place from slightly below and behind. */ .dp-js [data-dp-reveal="card"] { transform: translate3d(0, 34px, 0) scale(0.985); } .dp-js [data-dp-reveal].is-revealed { opacity: 1; transform: none; } /* Only hint the compositor while the element is actually in flight. */ .dp-js [data-dp-reveal]:not(.is-revealed) { will-change: opacity, transform; } .dp-js [data-dp-reveal].is-revealed { will-change: auto; } /* =============================================================== * 2. Counters * =============================================================== */ /* Tabular figures stop the numbers jittering as digits change width. */ .dp-stats__value, [data-dp-count] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .dp-js .dp-stats__item.is-counting .dp-stats__value { animation: dp-count-pulse 0.9s var(--dp-ease-out); } @keyframes dp-count-pulse { 0% { transform: scale(0.9); filter: brightness(1.35); } 100% { transform: scale(1); filter: brightness(1); } } /* The 25+ roundel on the home about split gets the same treatment. */ .dp-js .dp-badge-round.is-revealed .dp-badge-round__value { animation: dp-count-pulse 0.9s var(--dp-ease-out) 0.15s both; } /* =============================================================== * 3. Header — compaction and hide-on-scroll-down * =============================================================== */ .dp-header { transition: background var(--dp-speed) var(--dp-ease), box-shadow var(--dp-speed) var(--dp-ease), transform 0.4s var(--dp-ease-out); } .dp-header__inner { transition: min-height 0.35s var(--dp-ease-out); } .dp-header__brand img { transition: width 0.35s var(--dp-ease-out), height 0.35s var(--dp-ease-out); } .dp-header.is-stuck .dp-header__inner { min-height: 72px; } .dp-header.is-stuck .dp-header__brand img { width: 118px; height: 44px; } /* Reading downward reclaims the bar; scrolling back up returns it. Suppressed while the mobile menu is open so the panel never detaches from its trigger. */ .dp-header.is-hidden { transform: translateY(-100%); } /* Gold progress rail across the bottom edge of the header. */ .dp-header::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--dp-progress, 0%); background: linear-gradient(90deg, var(--dp-gold), var(--dp-gold-soft)); transition: width 0.1s linear; pointer-events: none; } /* =============================================================== * 4. Hero — parallax and staged entrance * =============================================================== */ .dp-hero__media { will-change: transform; } .dp-js .dp-hero__media img { transform: scale(1.06); transition: transform 1.6s var(--dp-ease-out); } .dp-js .dp-hero.is-loaded .dp-hero__media img { transform: scale(1); } /* The hero copy cascades in on load rather than on scroll — it is already in view, so an observer would fire immediately anyway. */ .dp-js .dp-hero .dp-container > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.8s var(--dp-ease-out), transform 0.8s var(--dp-ease-out); } .dp-js .dp-hero.is-loaded .dp-container > * { opacity: 1; transform: none; } .dp-js .dp-hero.is-loaded .dp-container > *:nth-child(1) { transition-delay: 0.10s; } .dp-js .dp-hero.is-loaded .dp-container > *:nth-child(2) { transition-delay: 0.20s; } .dp-js .dp-hero.is-loaded .dp-container > *:nth-child(3) { transition-delay: 0.28s; } .dp-js .dp-hero.is-loaded .dp-container > *:nth-child(4) { transition-delay: 0.36s; } .dp-js .dp-hero.is-loaded .dp-container > *:nth-child(5) { transition-delay: 0.44s; } /* =============================================================== * 5. Buttons — press ripple and arrow travel * =============================================================== */ .dp-btn { position: relative; overflow: hidden; isolation: isolate; } .dp-btn__ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: 0.28; transform: scale(0); pointer-events: none; animation: dp-ripple 0.6s var(--dp-ease-out) forwards; } @keyframes dp-ripple { to { transform: scale(2.6); opacity: 0; } } .dp-btn svg { transition: transform var(--dp-speed) var(--dp-ease); } .dp-btn:hover svg { transform: translateX(4px); } .dp-btn:active { transform: translateY(1px); } /* =============================================================== * 6. Cards — hover intent * =============================================================== */ .dp-feature-card, .dp-phase-card { transition: transform var(--dp-speed) var(--dp-ease), box-shadow var(--dp-speed) var(--dp-ease); } .dp-feature-card:hover, .dp-phase-card:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -24px rgba(0, 92, 59, 0.5); } .dp-status-pill, .dp-count-pill { transition: transform var(--dp-speed) var(--dp-ease-spring); } .dp-feature-card:hover .dp-status-pill, .dp-feature-card:hover .dp-count-pill { transform: translateY(-2px); } .dp-value-card, .dp-sister-card, .dp-sister-strip__item { transition: transform var(--dp-speed) var(--dp-ease), box-shadow var(--dp-speed) var(--dp-ease), border-color var(--dp-speed) var(--dp-ease); } .dp-value-card:hover, .dp-sister-card:hover, .dp-sister-strip__item:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0, 65, 42, 0.55); } .dp-value-card__icon, .dp-difference-card__icon { transition: transform 0.45s var(--dp-ease-spring); } .dp-value-card:hover .dp-value-card__icon, .dp-difference-card:hover .dp-difference-card__icon { transform: rotate(-6deg) scale(1.08); } /* =============================================================== * 7. FAQ accordion * =============================================================== */ .dp-faq__item[open] .dp-faq__answer { animation: dp-faq-in 0.42s var(--dp-ease-out); } @keyframes dp-faq-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .dp-faq__marker { transition: background var(--dp-speed) var(--dp-ease), border-color var(--dp-speed) var(--dp-ease), color var(--dp-speed) var(--dp-ease), transform 0.4s var(--dp-ease-spring); } .dp-faq__item[open] .dp-faq__marker { transform: rotate(180deg); } .dp-faq__question:hover .dp-faq__marker { transform: scale(1.1); } /* =============================================================== * 8. Mobile navigation — staggered links * =============================================================== */ @media (max-width: 1024px) { .dp-js .dp-header__nav .dp-menu > li { opacity: 0; transform: translateX(-14px); transition: opacity 0.4s var(--dp-ease-out), transform 0.4s var(--dp-ease-out); } .dp-js .dp-header__nav.is-open .dp-menu > li { opacity: 1; transform: none; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(1) { transition-delay: 0.06s; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(2) { transition-delay: 0.12s; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(3) { transition-delay: 0.18s; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(4) { transition-delay: 0.24s; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(5) { transition-delay: 0.30s; } .dp-js .dp-header__nav.is-open .dp-menu > li:nth-child(6) { transition-delay: 0.36s; } } /* =============================================================== * 9. Back to top * =============================================================== */ .dp-to-top { position: fixed; right: 24px; bottom: 96px; z-index: 89; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: var(--dp-border) solid var(--dp-gold-a45); border-radius: 50%; background: var(--dp-green-700); color: var(--dp-gold); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.85); transition: opacity 0.4s var(--dp-ease-out), transform 0.4s var(--dp-ease-spring), visibility 0.4s, background var(--dp-speed) var(--dp-ease); } .dp-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .dp-to-top:hover { background: var(--dp-gold); color: var(--dp-green-700); } .dp-to-top svg { width: 18px; height: 18px; transform: rotate(-90deg); } /* The WhatsApp pill breathes once when it first appears. */ .dp-js .dp-whatsapp-float { animation: dp-float-in 0.6s var(--dp-ease-spring) 1.2s both; } @keyframes dp-float-in { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } } /* =============================================================== * 10. Reduced motion — hard stop * * Anything animated above is reset to its resting state. The observers still * run so counters land on their final value, but nothing moves. * =============================================================== */ @media (prefers-reduced-motion: reduce) { .dp-js [data-dp-reveal], .dp-js .dp-hero .dp-container > *, .dp-js .dp-header__nav .dp-menu > li { opacity: 1 !important; transform: none !important; transition: none !important; } .dp-js .dp-hero__media img { transform: none !important; } .dp-header.is-hidden { transform: none; } .dp-header::after, .dp-btn__ripple { display: none; } .dp-to-top { transition: opacity 0.01ms; } .dp-js .dp-whatsapp-float { animation: none; } }