/* Instant interaction feedback: stable navigation/read states without skeletons. */ :root { --panel-feedback-bg: var(--ui-surface, #ffffff); --panel-feedback-accent: var(--ui-brand-action, #d7181c); --panel-feedback-muted: var(--ui-text-secondary, #636363); --panel-feedback-nav-height: calc(5rem + max(0.5rem, env(safe-area-inset-bottom))); } .panel-soft-loader { min-height: 88px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--panel-feedback-muted); text-align: center; pointer-events: none; } .panel-soft-loader__spinner, .panel-navigation-overlay__spinner { width: 24px; height: 24px; border: 2px solid rgba(215, 24, 28, 0.16); border-top-color: var(--panel-feedback-accent); border-radius: 999px; opacity: 0.01; animation: panel-feedback-reveal var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)) 50ms forwards, panel-feedback-spin 700ms linear 50ms infinite; } .panel-soft-loader__label { max-width: 260px; font-size: 12px; font-weight: 600; line-height: 1.35; opacity: 0.72; } .panel-navigation-overlay { position: absolute; inset: 0 0 var(--panel-feedback-nav-height) 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: var(--panel-feedback-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)); } .panel-navigation-overlay.is-active { opacity: 1; visibility: visible; } .bottom-nav-responsive.is-panel-nav-transition a, .bottom-nav-responsive.is-panel-nav-transition button { transition: color var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)), opacity var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)), transform var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)); } .bottom-nav-responsive.is-panel-nav-transition > :not(.is-panel-nav-pending) { color: #cbd5e1 !important; } .bottom-nav-responsive .is-panel-nav-pending:not([aria-label="Grafik"]) { color: var(--panel-feedback-accent) !important; } .bottom-nav-responsive .is-panel-nav-pending span { font-weight: 700 !important; } .bottom-nav-responsive .is-panel-nav-pending[aria-label="Grafik"] { transform: scale(0.96); } /* * Portfel is the only primary screen where production early-frame captures * showed a material viewport change in the first ~50 ms. The class is set in * , so users never see its short text placeholders expand into cards. * Bottom navigation remains visible and interactive-looking while content is * held behind the same neutral surface used for page navigation. */ html.panel-critical-boot .phone-frame::before { content: ''; position: absolute; inset: 0 0 var(--panel-feedback-nav-height) 0; z-index: 44; background: var(--panel-feedback-bg); pointer-events: none; } html.panel-critical-boot .phone-frame::after { content: ''; position: absolute; left: 50%; top: calc(50% - 2.5rem); z-index: 45; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid rgba(215, 24, 28, 0.16); border-top-color: var(--panel-feedback-accent); border-radius: 999px; opacity: 0.01; pointer-events: none; animation: panel-feedback-reveal var(--motion-micro, 160ms) var(--motion-ease, cubic-bezier(.2, .8, .2, 1)) 50ms forwards, panel-feedback-spin 700ms linear 50ms infinite; } .panel-write-pending-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .panel-write-pending-label::before { content: ''; width: 12px; height: 12px; flex: 0 0 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 999px; opacity: 0.72; animation: panel-feedback-spin 700ms linear infinite; } @keyframes panel-feedback-reveal { from { opacity: 0.01; } to { opacity: 1; } } @keyframes panel-feedback-spin { to { transform: rotate(360deg); } } @media (min-width: 768px) { :root { --panel-feedback-nav-height: 5rem; } } @media (prefers-reduced-motion: reduce) { .panel-soft-loader__spinner, .panel-navigation-overlay__spinner, html.panel-critical-boot .phone-frame::after, .panel-write-pending-label::before { animation: panel-feedback-reveal 1ms linear 50ms forwards; } .panel-navigation-overlay, .bottom-nav-responsive.is-panel-nav-transition a, .bottom-nav-responsive.is-panel-nav-transition button { transition-duration: 1ms; } }