/* * Critical first-paint cover for the Salla homepage. * This file must live in Salla's Advanced CSS so it is parsed in * before the custom HTML component is hydrated. */ html { background: #fffdf3; } body.theme-raed.index { background: #fffdf3 !important; } /* The landing page replaces Salla's shell, so never paint it on home. */ html:not(.loe-critical-failed) body.theme-raed.index > .app-inner > salla-advertisement, html:not(.loe-critical-failed) body.theme-raed.index > .app-inner > header[data-testid="store-header"], html:not(.loe-critical-failed) body.theme-raed.index > .app-inner > footer[data-testid="store-footer"], html:not(.loe-critical-failed) body.theme-raed.index > .app-inner > .store-header, html:not(.loe-critical-failed) body.theme-raed.index > .app-inner > .store-footer { display: none !important; } /* Warm paper cover. JS releases it when the landing is ready; CSS is the last-resort release. */ body.theme-raed.index::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; display: block; width: 100vw; min-height: 100vh; min-height: 100dvh; background: #fffdf3; opacity: 1; visibility: visible; pointer-events: auto; touch-action: none; animation: loe-critical-failsafe 1ms step-end 4800ms both !important; } /* Circular flower: eight cover-palette petals, no stem or text. */ body.theme-raed.index::after { content: ""; position: fixed; top: 50%; left: 50%; z-index: 2147483647; width: clamp(96px, 29vw, 116px); aspect-ratio: 1; display: block; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='44' fill='%23fff8df' stroke='%23d7dfc8' stroke-width='1.2'/%3E%3Cg stroke='%23352622' stroke-opacity='.34' stroke-width='.8'%3E%3Cellipse cx='60' cy='28' rx='7.4' ry='16.8' fill='%23e45b73'/%3E%3Cellipse cx='60' cy='28' rx='7.8' ry='17.2' fill='%23f3ca4e' transform='rotate(45 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.2' ry='16.4' fill='%2378b9c7' transform='rotate(90 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.7' ry='17' fill='%23e79aaa' transform='rotate(135 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.3' ry='16.6' fill='%23e88750' transform='rotate(180 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.8' ry='17.3' fill='%23f6da7a' transform='rotate(225 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.2' ry='16.5' fill='%239ccbd1' transform='rotate(270 60 60)'/%3E%3Cellipse cx='60' cy='28' rx='7.6' ry='16.9' fill='%23d85a67' transform='rotate(315 60 60)'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='12' fill='%23fff4c7' stroke='%23352622' stroke-opacity='.34' stroke-width='.8'/%3E%3Ccircle cx='60' cy='60' r='6.5' fill='%23f3ca4e'/%3E%3C/svg%3E"); opacity: 1; visibility: visible; pointer-events: none; transform: translate(-50%, -50%) rotate(-45deg) scale(.88); transform-origin: center; animation: loe-critical-flower-turn 1000ms cubic-bezier(.33, .02, .24, 1) both, loe-critical-failsafe 1ms step-end 4800ms both !important; } /* Added by Advanced JS after >= 1 second and after the custom landing is interactive. */ html.loe-critical-ready body.theme-raed.index::before { animation: loe-critical-cover-out 200ms ease forwards !important; } html.loe-critical-ready body.theme-raed.index::after { animation: loe-critical-flower-out 200ms ease forwards !important; } html.loe-critical-failed body.theme-raed.index::before, html.loe-critical-failed body.theme-raed.index::after { animation: loe-critical-flower-out 1ms step-end forwards !important; } @keyframes loe-critical-flower-turn { from { transform: translate(-50%, -50%) rotate(-45deg) scale(.88); } 72% { transform: translate(-50%, -50%) rotate(245deg) scale(1.04); } to { transform: translate(-50%, -50%) rotate(315deg) scale(1); } } @keyframes loe-critical-cover-out { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes loe-critical-flower-out { to { opacity: 0; visibility: hidden; } } @keyframes loe-critical-failsafe { from { opacity: 1; visibility: visible; pointer-events: auto; } to { opacity: 0; visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { body.theme-raed.index::after { animation: loe-critical-failsafe 1ms step-end 4800ms both !important; transform: translate(-50%, -50%); } html.loe-critical-ready body.theme-raed.index::before, html.loe-critical-ready body.theme-raed.index::after, html.loe-critical-failed body.theme-raed.index::before, html.loe-critical-failed body.theme-raed.index::after { animation: loe-critical-flower-out 1ms step-end forwards !important; } }