/** * Page transition veil and nav-card styles. * Veil: full-screen overlay that masks flash during MPA navigation. * NavCard: accent-colored card that rises from bottom on home->experiment. */ /* Full-screen veil - always present, normally invisible */ .page-veil { position: fixed; inset: 0; background: var(--color-bg); z-index: 9999; pointer-events: none; opacity: 0; transition: opacity var(--veil-duration) var(--motion-ease-out); } /* Veil is opaque when navigating in (set by inline script before first paint) */ .nav-entering .page-veil { opacity: 1; pointer-events: all; } /* Veil fades in during programmatic navigation (experiment exit, back button) */ .page-veil.is-covering { opacity: 1; pointer-events: all; transition: opacity var(--veil-duration) var(--motion-ease-out); } /* Nav card: sits below veil, starts off-screen at bottom */ .nav-card { position: fixed; inset: 0; background: var(--color-accent); z-index: 9998; transform: translateY(100%); transition: transform var(--card-rise-duration) var(--motion-ease-standard); display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Card slides up to cover screen */ .nav-card.is-rising { transform: translateY(0); } /* Card fades from accent to bg color after holding */ .nav-card.is-fading { background: var(--color-bg); transition: transform var(--card-rise-duration) var(--motion-ease-standard), background var(--card-fade-duration) var(--motion-ease-in); } /* Identity content centered on the card */ .nav-card__content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: 2rem; } .nav-card__icon { width: 3rem; height: 3rem; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; } .nav-card__icon img { width: 1.5rem; height: 1.5rem; } .nav-card__icon svg { width: 1.5rem; height: 1.5rem; } .nav-card__number { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); } .nav-card__title { font-size: 1.1rem; font-weight: 400; color: rgba(0, 0, 0, 0.75); letter-spacing: -0.01em; line-height: 1.2; } .nav-card__preset { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2rem; padding: 0.15rem 0.6rem; display: none; } /* Show preset badge only when non-default */ .nav-card__preset.is-visible { display: inline-block; }