/* ============================================================================ * TOFF Stylist Widget — placeholder & dimensions CSS * * Loaded by toff.ro VTEX theme (one in ). Provides: * 1. Reserved widget dimensions (matches the React widget exactly — no CLS). * 2. A branded loading state (blurred hero image + dark overlay + subtle * pulse) that's visible from first paint until toff-widget.js mounts. * * When toff-widget.js calls ReactDOM.createRoot(...).render(...), React * replaces the container's children entirely — the widget's own background * layers fade in on top of these ::before/::after layers, which keep working * but become visually invisible underneath the absolutely-positioned widget * content. * * Hosted at: * https://traveline-images.s3.us-east-1.amazonaws.com/toff/toff-widget-placeholder.css * Update via: `npm run deploy:toff` from runa_web (uploads JS + CSS together). * ============================================================================ */ /* Heights match the TOFF site headers: * Mobile header = 65 px * Desktop header = 144 + 16 = 160 px * Widget fills the rest of the viewport (true fullscreen hero on mobile, * capped at TOFF's editorial grid width of 82.75rem on wide desktop). */ #root_toff_stylist_widget { position: relative; display: block; width: 100%; height: calc(100dvh - 65px); /* Cap the entire widget (including the hero background image) at the * site's editorial grid width on wide screens, centered. Below 82.75rem * (1324 px) viewports this is a no-op — widget remains 100% full-bleed. */ max-width: 82.75rem; margin: 0 auto; overflow: hidden; background: #1a1008; } @media (min-width: 768px) { #root_toff_stylist_widget { height: calc(100dvh - 160px); min-height: 520px; max-height: 625px; } } /* Blurred hero image — first paint without waiting for JS. * Blur intentionally hides specific image identity so VTEX-wipe-induced * re-mounts don't show a visible "image jump" between cycles. * Default = women's image. Men's variant overrides via [data-gender="men"]. */ #root_toff_stylist_widget::before { content: ""; position: absolute; inset: 0; background: url("https://traveline-images.s3.us-east-1.amazonaws.com/toff/mobile/1.jpg") center / cover; filter: blur(12px); transform: scale(1.1); opacity: 0.7; z-index: 1; animation: tf-pulse 3s ease-in-out infinite; } @media (min-width: 768px) { #root_toff_stylist_widget::before { background-image: url("https://traveline-images.s3.us-east-1.amazonaws.com/toff/desktop/1.jpg"); } } /* Men variant — placeholder image for /barbati page */ #root_toff_stylist_widget[data-gender="men"]::before { background-image: url("https://traveline-images.s3.us-east-1.amazonaws.com/toff/mobile_man/1.jpg"); } @media (min-width: 768px) { #root_toff_stylist_widget[data-gender="men"]::before { background-image: url("https://traveline-images.s3.us-east-1.amazonaws.com/toff/desktop_man/1.jpg"); } } /* Subtle dark overlay for visual depth while loading */ #root_toff_stylist_widget::after { content: ""; position: absolute; inset: 0; background: rgba(26, 16, 8, 0.45); z-index: 2; } @keyframes tf-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.85; } } /* Once toff-widget.js mounts, the React tree adds .tf-widget-root inside the * container. Hide the placeholder pseudo-elements so they don't double-darken * the loaded widget (they kept painting on top of the widget content because * pseudo-elements aren't replaced by ReactDOM.createRoot). */ #root_toff_stylist_widget:has(.tf-widget-root)::before, #root_toff_stylist_widget:has(.tf-widget-root)::after { display: none; }