/* ============================================================================ SIGNATURE INTRO — keep this verbatim on every demo. Only --bone / --ink / --display below come from the theme palette; everything else is fixed. Pairs with intro.js. State flag lives on (see intro.html). ========================================================================== */ .intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bone); /* THEME: the solid splash field */ /* self-healing: if JS never takes over, the splash still clears on its own */ animation: introFail 1s var(--ease) 2.8s forwards; } .intro__brand { font-family: var(--display); /* THEME: display face */ font-weight: 500; font-size: clamp(3rem, 12vw, 8rem); letter-spacing: 0.2em; text-indent: 0.2em; /* must match the real .brand so it lands seamlessly */ color: var(--ink); /* THEME: ink on bone */ will-change: transform; } .intro.is-done { opacity: 0; pointer-events: none; transition: opacity .9s var(--ease); animation: none; /* JS is driving — cancel the fallback */ } @keyframes introFail { to { opacity: 0; visibility: hidden; } } html:not(.js) .intro { display: none; } /* the rest of the bar fades in after the wordmark seats (auto-completes on a timer, so it never depends on JS finishing). Target your own nav elements. */ html.intro-on .site-header__loc, html.intro-on .nav { animation: navReveal .7s var(--ease) 1.75s both; } @keyframes navReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .intro { display: none; } html.intro-on .site-header__loc, html.intro-on .nav { animation: none; } }