/* RothBodyWork - custom styles layered on top of Tailwind (Stitch design system). Animations are gated behind the .js class (set inline in ) so that if scripting is unavailable, nothing is hidden. All motion is disabled for users who prefer reduced motion. */ .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } /* Scroll progress bar */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #e9c349; z-index: 100; transition: width 0.1s ease-out; } /* Sticky nav background once scrolled */ [data-nav] { transition: background-color 0.3s ease, box-shadow 0.3s ease; } .nav-solid { background-color: #ffffff !important; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07); } /* Mobile / tablet dropdown menu. Hidden by default via the [hidden] attribute, so it stays closed even if this stylesheet is cached/stale or slow to load. */ #mobile-menu { position: absolute; top: 100%; left: 0; right: 0; } #mobile-menu[hidden] { display: none; } #mobile-menu:not([hidden]) { display: block; animation: menuDrop 0.22s ease-out; } @keyframes menuDrop { from { transform: translateY(-10px); } to { transform: none; } } #menu-toggle { background: transparent; border: 0; cursor: pointer; line-height: 0; } /* Parallax hero image */ .parallax-bg { will-change: transform; } /* Scroll reveal (active only when JS is on) */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .js .reveal.in { opacity: 1; transform: none; } /* Hero curtain text (lines rise into view) */ .curtain-text { display: block; overflow: hidden; } .curtain-text > span { display: block; } .js .curtain-text > span { transform: translateY(110%); animation: curtainUp 1.1s cubic-bezier(0.7, 0, 0.3, 1) forwards; } @keyframes curtainUp { to { transform: translateY(0); } } /* Fade for hero CTA group */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Button + card micro-interactions */ .btn-hover { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease, box-shadow 0.45s ease; } .btn-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 52, 51, 0.4); } .card-hover { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease, border-color 0.4s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.18); } .magnetic { transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } /* Gentle float (contact accent image) */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .js .animate-float { animation: float 6s ease-in-out infinite; } /* Underline-style form fields */ .form-line { border-bottom: 1px solid rgba(25, 28, 29, 0.2); transition: border-color 0.3s ease; } .form-line:focus-within { border-bottom-color: #735c00; } .form-line label { display: block; } .form-line input, .form-line textarea { width: 100%; background: transparent; border: none; padding: 4px 0; color: #191c1d; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 16px; } .form-line input::placeholder, .form-line textarea::placeholder { color: rgba(25, 28, 29, 0.3); } .form-line input:focus, .form-line textarea:focus { outline: none; box-shadow: none; } .form-line textarea { resize: none; } .form-line[data-invalid="true"] { border-bottom-color: #ba1a1a; } .form-status { min-height: 1.4em; } .form-status.ok { color: #0f4c4a; } .form-status.err { color: #8a1f1f; } /* Reviews auto-scroll marquee */ .reviews-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .reviews-track { display: flex; gap: 20px; width: max-content; padding: 6px 10px; } .js .reviews-track.scrolling { animation: marquee var(--marquee-dur, 50s) linear infinite; } .reviews-marquee:hover .reviews-track.scrolling, .reviews-marquee:focus-within .reviews-track.scrolling { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .reviews-track { align-items: stretch; } .review-card { flex: 0 0 340px; max-width: 340px; background: #ffffff; border: 1px solid #e2e6e6; padding: 26px 24px 22px; text-align: left; box-shadow: 0 12px 30px -18px rgba(15, 76, 74, 0.20); display: flex; flex-direction: column; } .review-stars { color: #e9c349; letter-spacing: 2px; font-size: 18px; margin-bottom: 12px; } .review-text { color: #404848; font-size: 15px; line-height: 1.6; margin: 0 0 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; } .review-author { margin: auto 0 0; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #0f4c4a; } .review-source { font-size: 11px; color: #707978; text-transform: uppercase; letter-spacing: 0.12em; } @media (max-width: 620px) { .review-card { flex-basis: 80vw; max-width: 80vw; } } @media (prefers-reduced-motion: reduce) { .reviews-marquee { overflow-x: auto; } .js .reviews-track.scrolling { animation: none; } } /* Keyboard focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #e9c349; outline-offset: 2px; } /* Reduced motion: show everything, no movement */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .js .curtain-text > span { transform: none !important; animation: none !important; } .parallax-bg { transform: none !important; } }