/* Shared base styles for every page. Page-specific styling stays in Tailwind classes. */ html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* fixed header is h-20 (5rem) */ html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } /* Material Symbols: stop the icon ligature text from showing before the font loads */ .material-symbols-outlined { display: inline-block; width: 1em; overflow: hidden; line-height: 1; } /* FAQ: hide the default
marker in Safari */ summary::-webkit-details-marker { display: none; } /* ---------- Motion ---------- Rules: only transform / opacity / box-shadow, no libraries, everything is visible without JS. `.js` is set on by assets/js/tailwind-config.js, so hidden start states apply only when JS runs. */ /* Hover lift for cards: add class="lift" (+ hover:border-gray-300 on white cards) */ .lift { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; } .lift:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -14px rgba(10,10,12,.16); } /* Scroll reveal: site.js adds .reveal to section blocks, then .is-visible when they enter the screen */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Hero chart: line + area reveal left to right, then the end dot appears */ @keyframes chart-reveal { from { transform: scaleX(0); } } .chart-reveal { transform-box: fill-box; transform-origin: left center; animation: chart-reveal 2.2s cubic-bezier(.45,0,.2,1) .3s both; } @keyframes fade-in { from { opacity: 0; } } .chart-dot { animation: fade-in .4s ease 2.4s both; } /* Case sparklines draw when their card is revealed */ .spark-line { stroke-dasharray: 1; stroke-dashoffset: 0; } .js .reveal .spark-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .25s; } .js .reveal.is-visible .spark-line { stroke-dashoffset: 0; } /* ✦ icon: slow twinkle */ @keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.8) rotate(45deg); } } .sparkle { animation: twinkle 3.2s ease-in-out infinite; transform-origin: center; } /* Header gets a soft shadow after scrolling */ header { transition: box-shadow .3s ease; } header.is-scrolled { box-shadow: 0 8px 28px -12px rgba(10,10,12,.14); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal { opacity: 1; transform: none; } .js .reveal .spark-line { stroke-dashoffset: 0; } }