/* * Motion layer. Hand-maintained — the build does not overwrite this file. * * The design is a restrained corporate layout, so everything here is short, * small in distance, and eased out. The rule of thumb: motion should confirm * that something responded, never perform. All of it is disabled wholesale * under prefers-reduced-motion at the bottom of the file. * * Hooks the build provides: * [data-reveal] section-level scroll reveal (site.js drives it) * [data-item] one repeated item from an loop */ :root { --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .18s; --dur-mid: .34s; } /* --- Page entrance --------------------------------------------------- Above-the-fold content is not scroll-revealed, so it gets its own entrance on load. Applied by site.js adding .sds-ready to , which means the content is visible if scripts never run. */ html.sds-ready [data-reveal] > * { animation: sdsRise .62s var(--ease-out) both; } html.sds-ready [data-reveal] > *:nth-child(2) { animation-delay: .07s } html.sds-ready [data-reveal] > *:nth-child(3) { animation-delay: .14s } @keyframes sdsRise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } /* --- Repeated items -------------------------------------------------- Cards, process steps, insight tiles. The lift is 2px: enough to register as a response, not enough to disturb a dense grid. */ [data-item] { transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), background-color var(--dur-fast) ease; will-change: transform; } [data-item]:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(12, 35, 64, .38); position: relative; z-index: 1; } /* Items inside the navy sections read on a dark ground, so they get a light wash rather than a shadow, which would be invisible there. */ [style*="background:#0C2340"] [data-item]:hover, [style*="background:#08182C"] [data-item]:hover { box-shadow: none; transform: translateY(-2px); } /* --- Links and buttons ----------------------------------------------- */ /* Nav items get an underline that grows from the left. */ header nav > a, header nav > div > a, header nav > div > button { position: relative; } header nav > a::after, header nav > div > button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: #0F6E75; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out); } header nav > a:hover::after, header nav > div > button:hover::after { transform: scaleX(1); } /* Solid buttons settle very slightly when pressed. */ a[href], button { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; } a[href]:active, button:active { transform: translateY(1px) } /* The arrow in a call-to-action nudges forward on hover. Only the trailing glyph moves, so the label stays put and the text does not reflow. */ .sds-arrow { display: inline-block; transition: transform var(--dur-mid) var(--ease-out); } a:hover > .sds-arrow, button:hover > .sds-arrow { transform: translateX(4px) } /* --- Overlays -------------------------------------------------------- The mega panel and drawer already animate in via the design's own keyframes; this adds the matching exit-less polish for the mobile menu and keeps the panel from snapping when the header resizes under it. */ [data-when="mega"] > div { transition: top var(--dur-mid) var(--ease-out) } /* --- Logo ------------------------------------------------------------- */ header img { transition: transform var(--dur-mid) var(--ease-out) } header a:hover img { transform: scale(1.04) } /* --- Reduced motion --------------------------------------------------- One switch that turns the whole layer off, including the design's own entrance keyframes and the scroll reveals in styles.css. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-item]:hover { transform: none; box-shadow: none } a[href]:active, button:active { transform: none } }