/* ========================================================= Milestone PRC — UI/UX Animation & Polish Layer Additive only. No content or anchor/link changes. Built on the existing brand palette: teal #26ABA3 accent #F7AB1E soft #F4FCFA Applied with anti-slop "taste" principles: spring motion, tinted shadows, staggered reveals, tactile feedback, accessible focus + reduced-motion. ========================================================= */ :root { --ms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ms-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1); --ms-shadow: 0 16px 38px -14px rgba(38, 153, 145, 0.30); --ms-shadow-strong: 0 24px 50px -12px rgba(38, 153, 145, 0.42); } html { scroll-behavior: smooth; scroll-padding-top: 120px; } /* Soft page-in so navigation between pages feels intentional */ body { animation: ms-page-in 0.6s var(--ms-ease-smooth) both; } @keyframes ms-page-in { from { opacity: 0; } to { opacity: 1; } } /* ========================================================= Scroll reveal Hidden state only applies after JS adds .ms-anim to , so with JS disabled everything stays fully visible. ========================================================= */ .ms-anim [data-ms-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ms-ease-smooth), transform 0.7s var(--ms-ease-smooth); will-change: opacity, transform; } .ms-anim [data-ms-reveal].ms-in { opacity: 1; transform: none; } .ms-anim [data-ms-reveal="left"] { transform: translateX(-40px); } .ms-anim [data-ms-reveal="right"] { transform: translateX(40px); } .ms-anim [data-ms-reveal="zoom"] { transform: scale(0.93); } .ms-anim [data-ms-reveal="left"].ms-in, .ms-anim [data-ms-reveal="right"].ms-in, .ms-anim [data-ms-reveal="zoom"].ms-in { transform: none; } /* ========================================================= Hero — ambient floating blobs + image entrance Decorative pseudo-elements only; markup untouched. ========================================================= */ .hero-banner { position: relative; overflow: hidden; isolation: isolate; } .hero-banner::before, .hero-banner::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none; } .hero-banner::before { width: 460px; height: 460px; top: -150px; right: -110px; background: radial-gradient(circle at 30% 30%, rgba(247, 171, 30, 0.45), transparent 70%); animation: ms-blob-a 15s ease-in-out infinite; } .hero-banner::after { width: 380px; height: 380px; bottom: -140px; left: -90px; background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.28), transparent 70%); animation: ms-blob-b 19s ease-in-out infinite; } @keyframes ms-blob-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.1); } } @keyframes ms-blob-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(35px, -25px) scale(1.12); } } .hero-banner .img-1, .hero-banner .img-2 { animation: ms-hero-img 1s var(--ms-ease-smooth) 0.15s both; } @keyframes ms-hero-img { from { opacity: 0; transform: translateY(26px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= Buttons — sheen sweep + tactile press + lift (existing teal→#F7AB1E hover colour change is preserved) ========================================================= */ .hero-banner button, .home-therapies button, .about-milestone button, .new-home-about button, .about-intro button, .enquiry-form button, .join button, .contact-form-page button, .why-choose button, .thermal-banner .form-box button { position: relative; overflow: hidden; transition: background-color 0.4s ease-in-out, transform 0.25s var(--ms-ease-spring), box-shadow 0.3s var(--ms-ease-smooth); } .hero-banner button::after, .home-therapies button::after, .about-milestone button::after, .new-home-about button::after, .about-intro button::after, .enquiry-form button::after, .join button::after, .contact-form-page button::after, .why-choose button::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ms-ease-smooth); pointer-events: none; } .hero-banner button:hover::after, .home-therapies button:hover::after, .about-milestone button:hover::after, .new-home-about button:hover::after, .about-intro button:hover::after, .enquiry-form button:hover::after, .join button:hover::after, .contact-form-page button:hover::after, .why-choose button:hover::after { left: 150%; } .hero-banner button:hover, .home-therapies button:hover, .about-milestone button:hover, .new-home-about button:hover, .about-intro button:hover, .enquiry-form button:hover, .join button:hover, .contact-form-page button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(247, 171, 30, 0.5); } .hero-banner button:active, .home-therapies button:active, .about-milestone button:active, .new-home-about button:active, .about-intro button:active, .enquiry-form button:active, .join button:active, .contact-form-page button:active, .why-choose button:active { transform: translateY(1px) scale(0.985); } /* ========================================================= Cards (.col-box) — smoother lift + tinted shadow + image zoom ========================================================= */ .home-therapies .col-box, .home-team .col-box, .home-testimonial .col-box, .our-program .col-box, .what_is_early_intervention .col-box { transition: transform 0.4s var(--ms-ease-spring), box-shadow 0.4s var(--ms-ease-smooth); } .home-therapies .col-box:hover, .home-team .col-box:hover, .home-testimonial .col-box:hover { transform: translateY(-10px); box-shadow: var(--ms-shadow-strong); } .our-program .col-box:hover, .what_is_early_intervention .col-box:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(43, 171, 160, 0.55); } /* Image zoom inside card frames */ .home-therapies .img-box, .home-team .col-box { overflow: hidden; } .home-therapies .img-box img, .home-team .col-box img, .gallery-image img { transition: transform 0.6s var(--ms-ease-smooth); } .home-therapies .col-box:hover .img-box img, .home-team .col-box:hover img { transform: scale(1.06); } .gallery-image img:hover { transform: scale(1.04); } /* Large section images get a gentle lift on hover */ .new-home-about img, .about-milestone .about-image, .about-intro img, .enquiry-form img, .join img, .faq-section img, .faq-section-therapies img { transition: transform 0.5s var(--ms-ease-smooth), box-shadow 0.5s var(--ms-ease-smooth); } .new-home-about img:hover, .about-milestone .about-image:hover, .about-intro img:hover, .enquiry-form img:hover, .join img:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow); } /* ========================================================= Navigation — animated underline + clear active page ========================================================= */ .navbar .nav-item > .nav-link { position: relative; } .navbar .nav-item > .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background-color: #26ABA3; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ms-ease-smooth); } .navbar .nav-item > .nav-link:hover::after, .navbar .nav-item > .nav-link.active::after { transform: scaleX(1); } .navbar .nav-item > .nav-link.active { color: #26ABA3 !important; } .navbar .dropdown-item { transition: background-color 0.25s var(--ms-ease-smooth), padding-left 0.25s var(--ms-ease-smooth), color 0.25s var(--ms-ease-smooth); } .navbar .dropdown-item:hover { padding-left: 24px; color: #26ABA3; } /* Side share-box icons — friendly hover */ .share-box .icons a { transition: background-color 0.25s ease-in, transform 0.25s var(--ms-ease-spring) !important; } .share-box .icons a:hover { background-color: #F7AB1E; transform: translateX(-4px) scale(1.06); } /* Footer links nudge */ .foot li a { display: inline-block; transition: transform 0.25s var(--ms-ease-smooth), opacity 0.25s var(--ms-ease-smooth); } .foot li a:hover { transform: translateX(5px); opacity: 0.85; } /* ========================================================= Form fields — teal focus glow ========================================================= */ .enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus, .contact-form-page input:focus, .contact-form-page select:focus, .contact-form-page textarea:focus, .thermal-banner .form-box input:focus, .thermal-banner .form-box textarea:focus { border-color: #26ABA3 !important; box-shadow: 0 0 0 4px rgba(38, 171, 163, 0.15); } /* ========================================================= Accordion (FAQ) — smoother open feedback ========================================================= */ .accordion-button { transition: color 0.3s var(--ms-ease-smooth), background-color 0.3s var(--ms-ease-smooth); } /* ========================================================= Accessible keyboard focus rings ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .accordion-button:focus-visible { outline: 3px solid rgba(38, 171, 163, 0.6); outline-offset: 2px; border-radius: 6px; } /* ========================================================= Back-to-top control (a