/* Motion and interaction layer. Loaded after components.css on every page. Rule for everything here: nothing moves for longer than 500ms, nothing moves without a scroll, hover or click, and nothing moves under prefers-reduced-motion (see the block at the end). */ /* Reveal on scroll. The hidden state only applies once JS has run (.js is set in ). */ .js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 400ms var(--ease), translate 400ms var(--ease); } .js [data-reveal].is-in { opacity: 1; translate: none; } /* Grids reveal their children one after another instead of moving as one block. */ .js :is(.grid-2, .grid-3)[data-reveal] { opacity: 1; translate: none; } .js :is(.grid-2, .grid-3)[data-reveal] > * { opacity: 0; translate: 0 16px; transition: opacity 400ms var(--ease) calc(var(--i, 0) * 80ms), translate 400ms var(--ease) calc(var(--i, 0) * 80ms), transform 200ms var(--ease), box-shadow 200ms var(--ease); } .js :is(.grid-2, .grid-3)[data-reveal].is-in > * { opacity: 1; translate: none; } /* Anything already on screen at load appears without moving. */ .js [data-reveal].is-instant, .js [data-reveal].is-instant > * { transition: none; } /* Cards. */ .card { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); } /* Primary buttons carry a trailing arrow that nudges on hover. Buttons that already have one in their markup keep it. */ .btn:not(.secondary, .ghost, .icon):not(:has(> [aria-hidden="true"]))::after { content: "→"; content: "→" / ""; } .btn > [aria-hidden="true"], .btn::after { display: inline-block; transition: translate 180ms var(--ease); } .btn:is(:hover, :focus-visible) > [aria-hidden="true"], .btn:is(:hover, :focus-visible)::after { translate: 3px 0; } /* Text links: an underline that grows from the left. Links inside running text keep a 1px underline at rest and thicken. */ a:not(.btn, .brand) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size 200ms var(--ease), color 180ms var(--ease); } a:not(.btn, .brand):is(:hover, :focus-visible) { background-size: 100% 1px; } p a:not(.btn) { background-size: 100% 1px; } p a:not(.btn):is(:hover, :focus-visible) { background-size: 100% 2px; } .product-tabs a { background-image: none; } @media (min-width: 900px) { .nav-links a { padding-block: var(--s-2); } } .nav-links a { background-origin: content-box; background-position: 0 calc(100% + 6px); } .nav-links a[aria-current="page"] { background-size: 100% 2px; } /* Copy feedback. */ .chip { --pulse-base: var(--surface); } .chip.is-copied { animation: copy-pulse 1.5s var(--ease) forwards; } @keyframes copy-pulse { from { background-color: var(--green-bg); } to { background-color: var(--pulse-base); } } /* Header. */ .site-header { transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease); } /* Mobile drawer. */ @media (max-width: 899px) { .nav-links { transition: transform 260ms var(--ease), visibility 0s linear 260ms; } .nav-links.is-open { transition: transform 260ms var(--ease), visibility 0s; } .nav-backdrop { transition: opacity 260ms var(--ease), visibility 0s linear 260ms; } .nav-backdrop.is-open { transition: opacity 260ms var(--ease), visibility 0s; } } @media (min-width: 900px) { .nav-backdrop { display: none; } } /* Theme switch: colours cross-fade for 220ms while .theming is on . */ .theming body, .theming .site-header::before, .theming .site-footer, .theming .card { transition: background-color 220ms var(--ease), color 220ms var(--ease); } /* Frames: a 1px top highlight. */ .frame::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 1px 0 var(--frame-highlight); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js :is(.grid-2, .grid-3)[data-reveal] > * { opacity: 1; translate: none; transition: none; } .card:hover, .btn:hover { transform: none; } .btn:is(:hover, :focus-visible) > [aria-hidden="true"], .btn:is(:hover, :focus-visible)::after { translate: none; } .hero-media .frame, .hero-media .frame:hover { transform: none; } .chip.is-copied { animation: none; } *, *::before, *::after { transition: none !important; animation: none !important; } }