/* ========================================================================== IñigoSync — Real loading overlay (auth + dashboard session checks) Uses the same design tokens defined in LandingPage.css :root, and follows the same overlay/[data-open]/[hidden] pattern as Auth.css's .auth-overlay. Revision A2 (implementation_plan.md) — fonts/sizes/weights come from Style/typography.css (linked before every other stylesheet on all five pages). Every font-size below is an --fs-* token; this file never used --font-mono, so there is nothing to re-home here. ========================================================================== */ .inigo-loading-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 6, 0.82); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .inigo-loading-overlay[data-open] { opacity: 1; pointer-events: auto; } .inigo-loading-overlay[hidden] { display: flex; opacity: 0; pointer-events: none; } .inigo-loading-card { display: flex; flex-direction: column; align-items: center; gap: 18px; transform: translateY(8px); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } .inigo-loading-overlay[data-open] .inigo-loading-card { transform: translateY(0); opacity: 1; } .inigo-loading-ring { position: relative; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; } .inigo-loading-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(244, 239, 230, 0.16); border-top-color: var(--color-primary); animation: inigo-spin 0.9s linear infinite; } .inigo-loading-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; } .inigo-loading-text { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500; color: #f4efe6; letter-spacing: 0.01em; } @keyframes inigo-spin { to { transform: rotate(360deg); } } /* ========================================================================== Shared toast — real success/error feedback for dashboard actions (booking submit, profile save, etc). Same fixed-pill pattern as Auth.css's .auth-status, factored out here so every dashboard can share one class. ========================================================================== */ .inigo-toast { position: fixed; top: 28px; left: 50%; z-index: 210; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 12px 22px; border-radius: 999px; background: var(--color-bg-elevated); border: 1px solid var(--color-line); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transform: translate(-50%, -12px); transition: opacity 0.25s ease, transform 0.25s ease; } .inigo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .inigo-toast.is-error { border-color: var(--color-alert); color: var(--color-alert); } /* ========================================================================== Dashboard reveal — content stays hidden behind the overlay until the real session + profile check (authGuard.js) resolves, then fades in. The `inigo-auth-pending` class is set synchronously in (before paint) and removed by authGuard.js once the real data is ready. Scoped to the explicit `.inigo-reveal` class (put on each dashboard's shell wrapper) rather than a blanket `body > *` selector — a blanket selector would also match unrelated fixed-position elements on other pages (e.g. the login modal's overlay on the landing page) and force their opacity open regardless of their own hidden/closed state. R4-2 (implementation_plan.md, "Revision 4") — this rule USED to also transition/set a `transform: translateY(0)`. That value was a pure visual no-op (nothing anywhere ever set a non-zero translate on .inigo-reveal to animate FROM), but any transform value other than `none` — even a resolved-to-identity one — makes its element the containing block for `position: fixed` descendants. .dash-shell (the customer dashboard's own .inigo-reveal element) contains .dash-sidebar, which becomes `position: fixed` below 860px (Style/Dashboard.css) to act as an off-canvas drawer — with that containing block in place, the drawer (and its scrim) positioned themselves relative to .dash-shell's own box instead of the viewport, so both silently scrolled away with the page instead of staying pinned. Removing the transform fixes that while changing nothing visible: the fade-in animation below is unaffected, since it never depended on the transform to begin with. Applies to owner_dashboard.html/staff_dashboard.html too (same .inigo-reveal class) — a benign fix there as well, not a behavior change either. ========================================================================== */ html.inigo-auth-pending .inigo-reveal { opacity: 0; } .inigo-reveal { transition: opacity 0.45s ease; } html:not(.inigo-auth-pending) .inigo-reveal { opacity: 1; }