is likewise redundant now. */ main.pt-20 { padding-top: 0; } /* Grids that only ever had a two-column rule need a single-column fallback. */ @media (max-width: 700px) { .ref-hero-grid, .ref-intro-grid, .ref-facility-grid, .ref-contact-grid, .ref-metric-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Every spec table already sits in its own overflow-x-auto wrapper; this only guarantees the wrapper can actually scroll on touch. */ .overflow-x-auto, .v-table-scroll { -webkit-overflow-scrolling: touch; } /* ========================================================================== 7. Motion — scroll reveal, header state, read progress Everything here is gated on `html.v-motion`, which a tiny inline script in each sets and removes again if assets/vatsalya.js never boots. With scripting off the class is never added, so no content is ever hidden. ========================================================================== */ .v-motion [data-v-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--v-delay, 0ms), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--v-delay, 0ms); will-change: opacity, transform; } /* Pictures get a touch of settle on top of the fade. */ .v-motion img[data-v-reveal], .v-motion figure[data-v-reveal] { transform: translate3d(0, 24px, 0) scale(1.03); } /* The end state clears the transform entirely rather than resting on translate3d(0,0,0), so no element is left as a containing block. */ .v-motion [data-v-reveal].is-in { opacity: 1; transform: none; } .v-motion [data-v-reveal].is-done { transition: none; will-change: auto; } /* Consecutive blocks in the same run trail each other slightly, so a kicker, heading, paragraph and button read as one sequence rather than one flash. Wrapped in :where() so every rule here weighs the same: the longest chain an element matches is the last one written, and the grid rules below still win. */ .v-motion :where([data-v-reveal] + [data-v-reveal]) { --v-delay: 60ms; } .v-motion :where([data-v-reveal] + [data-v-reveal] + [data-v-reveal]) { --v-delay: 120ms; } .v-motion :where( [data-v-reveal] + [data-v-reveal] + [data-v-reveal] + [data-v-reveal] ) { --v-delay: 180ms; } .v-motion :where( [data-v-reveal] + [data-v-reveal] + [data-v-reveal] + [data-v-reveal] + [data-v-reveal] ) { --v-delay: 240ms; } /* Children of a staggered container arrive one after another. */ .v-motion [data-v-stagger] > [data-v-reveal] { --v-delay: 0ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(2) { --v-delay: 70ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(3) { --v-delay: 140ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(4) { --v-delay: 210ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(5) { --v-delay: 280ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(6) { --v-delay: 350ms; } .v-motion [data-v-stagger] > [data-v-reveal]:nth-child(n + 7) { --v-delay: 420ms; } /* --- header reacts to scroll ------------------------------------------- */ .v-header { transition: background 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .v-header.is-scrolled { background: rgba(18, 43, 30, 0.94); backdrop-filter: blur(10px); border-bottom-color: rgba(216, 195, 165, 0.4); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } /* --- reading progress across the bottom edge of the header -------------- */ .v-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; } .v-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--v-sage), var(--v-kraft)); transform: scaleX(0); transform-origin: 0 50%; } /* --- link and card hover ------------------------------------------------ */ .v-motion a, .v-motion button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .v-drawer, .v-scrim, .v-header { transition: none; } /* Reduced motion means no travel and no fade — the content is simply there. */ .v-motion [data-v-reveal], .v-motion img[data-v-reveal], .v-motion figure[data-v-reveal] { opacity: 1; transform: none; transition: none; } .v-progress { display: none; } *[class*="animate-"] { animation: none !important; } }