/* Shared site-wide motion layer — reveal-on-scroll, hover polish, hero entrance, header scroll state. Linked from every page's . Uses only the CSS custom properties already defined per-page (--navy/--steel/--amber/--muted etc.) — no new colors introduced. */ /* ---------- Reduced motion: disable everything below ---------- */ @media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none !important;} .hero-copy .eyebrow,.hero-copy h1,.hero-copy p,.hero-copy .cta-row,.hero-art{ animation:none !important;opacity:1 !important;transform:none !important; } body .btn,body .btn.secondary,body .btn.secondary.on-light,body .call-btn,.footer-grid a, body .icard,body .industry-card,body .proc,body .wizard-opt,body .stat{transition:none !important;} } /* ---------- Scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;} .reveal.in-view{opacity:1;transform:none;} /* ---------- Hero entrance (fires on load, hero is above the fold) ---------- */ @keyframes heroFadeUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} } .hero-copy .eyebrow,.hero-copy h1,.hero-copy p,.hero-copy .cta-row,.hero-art{ opacity:0;animation:heroFadeUp .7s ease forwards; } .hero-copy .eyebrow{animation-delay:.05s;} .hero-copy h1{animation-delay:.15s;} .hero-copy p{animation-delay:.28s;} .hero-copy .cta-row{animation-delay:.4s;} .hero-art{animation-delay:.3s;} /* ---------- Header scroll state ---------- */ header.site-header{transition:box-shadow .25s ease,padding .25s ease;} header.site-header.scrolled{box-shadow:0 2px 14px #13273b1c;} header.site-header.scrolled .header-inner{padding-top:10px;padding-bottom:10px;} /* ---------- Button micro-interactions ---------- */ body .btn,body .btn.secondary,body .btn.secondary.on-light,body .call-btn{ transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .btn:hover,.btn.secondary:hover,.btn.secondary.on-light:hover,.call-btn:hover{ transform:translateY(-2px);box-shadow:0 6px 16px #13273b22; } .footer-grid a{transition:color .2s ease;} /* ---------- Card / tile hover-lift ---------- */ /* `body` prefix outranks each page's own inline .icard/.industry-card transition rule */ body .icard,body .industry-card,body .proc,body .wizard-opt,body .stat{ /* opacity kept so the scroll-reveal fade still works on these same elements */ transition:opacity .6s ease,box-shadow .2s ease,border-color .2s ease,transform .35s ease; } .icard:hover,.industry-card:hover,.proc:hover,.wizard-opt:hover,.stat:hover{ transform:translateY(-3px); } /* ---------- Small screens: the fixed-width hero image must not exceed the viewport ---------- */ body .hero-art{max-width:100%;flex-shrink:1;} /* ---------- Mobile navigation: hamburger menu (button is injected by site.js; without JS the normal nav stays) ---------- */ .nav-toggle,.call-icon{display:none;} nav.main-nav li.nav-call{display:none;} @media (max-width:1180px){ header.js-nav .header-inner{flex-wrap:nowrap;gap:8px;} header.js-nav .brand{margin-right:auto;} header.js-nav > .header-inner > .call-btn{display:none;} header.js-nav .call-icon,header.js-nav .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:0;cursor:pointer;flex:0 0 auto;} header.js-nav .call-icon{background:var(--navy);color:#fff;} header.js-nav .nav-toggle{background:transparent;color:var(--navy);flex-direction:column;gap:5px;padding:0;} header.js-nav .nav-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease;} header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} header.nav-open .nav-toggle span:nth-child(2){opacity:0;} header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} header.js-nav nav.main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px #13273b1a;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease,opacity .25s ease,visibility 0s linear .3s;} header.js-nav.nav-open nav.main-nav{max-height:460px;opacity:1;visibility:visible;transition:max-height .3s ease,opacity .25s ease,visibility 0s;} header.js-nav nav.main-nav ul{flex-direction:column;flex-wrap:nowrap;gap:0;padding:6px 22px 18px;} header.js-nav nav.main-nav li{border-bottom:1px solid var(--line);} header.js-nav nav.main-nav li a{display:block;padding:14px 0;font-size:1.02rem;} header.js-nav nav.main-nav li.nav-call{display:list-item;border-bottom:0;padding-top:14px;} header.js-nav nav.main-nav li.nav-call a{background:var(--navy);color:#fff;text-align:center;border-radius:10px;padding:13px 16px;font-weight:600;} } @media (prefers-reduced-motion: reduce){ header.js-nav nav.main-nav,.nav-toggle span{transition:none !important;} } /* ---------- Larger logo ---------- */ body .brand-logo{height:54px;} body nav.main-nav ul{gap:16px;} @media (max-width:860px){ body .brand-logo{height:50px;} }