/* ============================================================================ ACHARYA ANAND ยท POLISH LAYER (motion-only) ============================================================================ ADDITIVE, MOTION-ONLY enhancement for the PUBLIC site. The locked visual design lives in /styles.css and is NOT touched here. This file may ONLY add: - transitions (160-240ms ease) on existing interactive elements - subtle hover lifts (translateY) on cards / buttons / links - focus-visible rings (accessibility) - scroll-reveal entrance (opacity + translateY) - smooth anchor scrolling - a tasteful button sheen on primary CTAs It MUST NOT change any color, background, font, size, spacing, width, height, position, or layout. Transforms used here translate by a couple of pixels only and never alter document flow. PROGRESSIVE ENHANCEMENT: polish.js adds `js-polish` to . Every "hidden" initial reveal state is scoped under `html.js-polish` ONLY โ€” so with JS disabled the page is 100% visible and pixel-identical to the locked design. REDUCED MOTION: The whole file is wrapped so that `prefers-reduced-motion: reduce` users get NO transitions, NO transforms, NO reveals (fully visible, static). Palette: only the locked brand tokens are referenced (saffron #D97706, gold #C8A44D) for the focus ring + sheen. No new hues introduced. ========================================================================== */ /* Only apply motion when the user has not asked to reduce it. Everything inside this block is purely cosmetic motion and is safely skippable. */ @media (prefers-reduced-motion: no-preference) { /* ---- Smooth anchor scrolling -------------------------------------------- */ html { scroll-behavior: smooth; } /* ---- Gentle transitions on existing interactive elements ---------------- */ /* Transition only motion/affordance properties โ€” NOT color/background/etc., so the locked palette and look are never animated into a different state. */ a, .btn, .nav-link, .menu a, .logo, button, .card, [class*="card"], .service, [class*="service"], .tile, [class*="tile"], .chip, .badge { transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease, filter 200ms ease; } /* ---- Subtle hover lifts -------------------------------------------------- */ /* Cards / tiles / services: a 2px lift. Transform only โ€” no reflow. */ .card:hover, [class*="card"]:hover, .service:hover, [class*="service"]:hover, .tile:hover, [class*="tile"]:hover { transform: translateY(-2px); } /* Buttons & primary CTAs: a touch of lift on hover, settle on press. */ .btn:hover, button:hover { transform: translateY(-2px); } .btn:active, button:active { transform: translateY(0); } /* Plain links / nav links: faint upward nudge for tactility. */ .menu a:hover, .nav-link:hover { transform: translateY(-1px); } /* Logo: a barely-there nudge so the mark feels alive on hover. */ .logo:hover { transform: translateY(-1px); } /* ---- Tasteful sheen on primary CTAs ------------------------------------- */ /* A diagonal highlight sweeps across the primary button on hover. Drawn with a pseudo-element overlay so it never affects layout or the button's own colors. The button must establish a stacking/clipping context; .btn is already a styled pill in the locked CSS, so we only add overflow + relative which do not move anything. */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none; background: linear-gradient( 100deg, rgba(255, 253, 247, 0) 0%, rgba(255, 253, 247, 0.35) 50%, rgba(255, 253, 247, 0) 100% ); transform: skewX(-18deg); transition: left 520ms ease; } .btn:hover::after { left: 130%; } /* ---- Scroll-reveal entrance (JS-gated) ---------------------------------- */ /* Initial hidden state applies ONLY when JS is active (html.js-polish) so a no-JS visitor sees a fully-rendered page. `.in` (added by the IntersectionObserver) restores the natural state. */ html.js-polish [data-reveal], html.js-polish section, html.js-polish .reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease; will-change: opacity, transform; } html.js-polish [data-reveal].in, html.js-polish section.in, html.js-polish .reveal.in { opacity: 1; transform: none; } } /* ---- Focus-visible rings (accessibility) ---------------------------------- */ /* Kept OUTSIDE the reduced-motion guard: this is a non-motion accessibility affordance that should always work. It uses outline (which does not affect layout) and the locked saffron/gold accent tokens only. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .menu a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #D97706; /* brand saffron */ outline-offset: 3px; border-radius: 6px; } /* ---- Reduced motion: belt-and-braces ------------------------------------- */ /* Even though the motion block above is gated by no-preference, we explicitly neutralise any reveal/transition/transform for reduce users and guarantee full visibility of JS-gated reveal targets. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-polish [data-reveal], html.js-polish section, html.js-polish .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .btn::after { display: none; } * { /* No motion-only animation/transition for reduce users. */ animation-duration: 0.001ms !important; transition-property: none !important; } }