/** * Strony logowania / auth premium — kolory jak na makiecie (złoto #C5A059, krem #F5F1E6). * Klasa na : mm-auth-blyszcz-premium */ :root { --mm-auth-gold: #c5a059; --mm-auth-gold-mid: #d4af37; --mm-auth-gold-deep: #8a6621; --mm-auth-gold-soft: #f9e8a2; --mm-auth-cream: #f5f1e6; --mm-auth-cream-panel: #f5f1e6; --mm-auth-ink: #1a1a1a; --mm-auth-muted: #3d362f; --mm-auth-hero-title: #000000; /* Ciemniejszy placeholder — czytelny na białym polu input */ --mm-auth-placeholder: rgba(62, 52, 38, 0.88); --mm-auth-input-border: rgba(197, 160, 89, 0.55); --mm-auth-shadow-btn: 0 4px 14px rgba(138, 102, 33, 0.28); --mm-auth-fb: #1877f2; --mm-auth-ig-from: #405de6; --mm-auth-ig-via: #c13584; --mm-auth-ig-to: #f09433; --mm-auth-tt: #000000; } body.mm-auth-blyszcz-premium { /* Jasny „kremowy” formularz także w iOS PWA (inaczej systemowy dark / color-scheme zasmaża pola). */ color-scheme: light; background: var(--mm-auth-cream-panel) !important; } body.mm-auth-blyszcz-premium .notice-top-bar, body.mm-auth-blyszcz-premium #header, body.mm-auth-blyszcz-premium .mm-pwa-app-topbar { display: none !important; } body.mm-auth-blyszcz-premium .body > .main { min-height: 70vh; } /* PWA: pełny ekran, bez przewijania dokumentu; treść formularza w panelu jeśli się nie mieści */ html.mm-pwa-standalone:has(body.mm-auth-blyszcz-premium) { overflow-x: hidden; overflow-y: hidden; height: 100%; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium { overflow: hidden; height: 100%; max-height: 100dvh; margin: 0; box-sizing: border-box; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .body { min-height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100vw; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-panel { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Jednolite #F5F1E6 od treści strony do stopki (bez ciemnych pasów z motywu / PWA) */ body.mm-auth-blyszcz-premium .body { background: var(--mm-auth-cream-panel) !important; background-color: var(--mm-auth-cream-panel) !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main { background: var(--mm-auth-cream-panel) !important; background-color: var(--mm-auth-cream-panel) !important; color: var(--mm-auth-ink) !important; } .mm-blyszcz-auth-wrap { max-width: 420px; margin: 0 auto; padding: 0 1.25rem 2.5rem; } .mm-blyszcz-auth-topbar { display: flex; align-items: center; justify-content: space-between; background: #000000; color: var(--mm-auth-gold); padding: 0.5rem 0.75rem; min-height: 80px; box-sizing: border-box; } .mm-blyszcz-auth-topbar--banner { position: relative; min-height: 130px; padding: 0; padding-top: env(safe-area-inset-top, 0px); overflow: hidden; align-items: stretch; } .mm-blyszcz-auth-topbar-spacer { width: 2.25rem; flex-shrink: 0; } .mm-blyszcz-auth-brand { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; min-width: 0; padding: 0.15rem 0.35rem; /* Pełny czarny pod logo (PNG z alfą — bez „szachownicy” / półprzezroczystej płyty) */ background: #000000 !important; border-radius: 0; box-shadow: none; } .mm-blyszcz-auth-brand:hover { opacity: 0.92; background: #000000 !important; } .mm-blyszcz-auth-logo { display: block; max-height: 98px; width: auto; max-width: min(490px, 90vw); height: auto; object-fit: contain; transform: translateX(-20px); } .mm-blyszcz-auth-topbar-banner-bg { position: absolute; left: 0; right: 0; top: calc(-1 * env(safe-area-inset-top, 0px)); bottom: 0; z-index: 0; pointer-events: none; } .mm-blyszcz-auth-topbar--banner .mm-blyszcz-auth-banner-img { display: block; width: calc(100% + 30px); height: 100%; max-width: none; object-fit: cover; object-position: center; transform: translateX(-30px); } .mm-blyszcz-auth-topbar-front { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 130px; box-sizing: border-box; padding: 0.35rem max(0.5rem, env(safe-area-inset-right)) 0.35rem max(0.5rem, env(safe-area-inset-left)); pointer-events: none; } .mm-blyszcz-auth-topbar-front .mm-blyszcz-auth-brand--banner, .mm-blyszcz-auth-topbar-front .mm-blyszcz-auth-bell { pointer-events: auto; } .mm-blyszcz-auth-brand--banner { flex: 1; min-width: 0; min-height: 2.75rem; justify-content: center; align-self: stretch; align-items: center; background: transparent !important; padding: 0.25rem 0.35rem !important; } .mm-blyszcz-auth-topbar--banner .mm-blyszcz-auth-brand--banner:hover, .mm-blyszcz-auth-topbar--banner .mm-blyszcz-auth-brand--banner:focus { background: transparent !important; opacity: 0.92; } @keyframes mm-auth-bell-swing { 0%, 45%, 100% { transform: rotate(0); } 5% { transform: rotate(14deg); } 10% { transform: rotate(-12deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-6deg); } 25% { transform: rotate(4deg); } 30% { transform: rotate(0); } } .mm-blyszcz-auth-bell--anim i { animation: mm-auth-bell-swing 2.8s ease-in-out infinite; transform-origin: 50% 6px; } .mm-blyszcz-auth-topbar--banner .mm-blyszcz-auth-bell { position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)); } .mm-blyszcz-auth-bell__dot { position: absolute; top: 0.12rem; right: 0.05rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); pointer-events: none; } .mm-blyszcz-auth-bell { position: relative; width: 2.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--mm-auth-gold-mid); font-size: 1.1rem; padding: 0.25rem; line-height: 1; background: none; border: none; cursor: default; font-family: inherit; } /* Shell React PWA (Start): min. ~44×44 pt cel dotyku + focus przy obsłudze klawiatury */ body.mm-pwa-blyszcz-react-shell .mm-blyszcz-auth-topbar-front .mm-blyszcz-auth-bell { min-width: 44px; min-height: 44px; box-sizing: border-box; align-self: center; border-radius: 12px; padding: 0; } body.mm-pwa-blyszcz-react-shell .mm-blyszcz-auth-topbar-front .mm-blyszcz-auth-bell:focus-visible { outline: 2px solid var(--mm-auth-gold-mid); outline-offset: 2px; } /* Start PWA (React): tło belki jak ekran — żeby pod / nad teksturą banneru nie było czarnego paska (status bar / safe area) */ body.mm-pwa-blyszcz-react-shell .mm-blyszcz-auth-topbar--banner { background-color: #f5f1e6; } .mm-blyszcz-auth-hero { /* dodatkowe +30px w pionie (+15 góra +15 dół) */ padding: calc(1.55rem + 25px) 1.35rem calc(1.35rem + 25px); background-color: #f5f1e6; /* Warstwa 1 (na wierzchu): lekki krem — tekstura img/tekstura.png pod spodem */ background-image: linear-gradient( 180deg, rgba(255, 252, 246, 0.55) 0%, rgba(245, 241, 230, 0.65) 45%, rgba(236, 230, 216, 0.72) 100% ), url(../img/tekstura.png); background-size: auto, cover; background-position: center, center center; background-repeat: no-repeat, no-repeat; border-bottom: 1px solid rgba(197, 160, 89, 0.22); } .mm-blyszcz-auth-hero-title { margin: 0 auto; max-width: 20rem; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.55rem; line-height: 1.28; color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; text-align: left; letter-spacing: 0.01em; } .mm-blyszcz-auth-panel { padding-top: 1.65rem; background: var(--mm-auth-cream-panel); } body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-panel { background: var(--mm-auth-cream-panel); } .mm-blyszcz-auth-alert { background: rgba(229, 57, 53, 0.08); border: 1px solid rgba(229, 57, 53, 0.35); color: #8b1d1d; border-radius: 10px; padding: 0.65rem 0.85rem; font-size: 0.88rem; margin-bottom: 1rem; } .mm-blyszcz-auth-field-wrap { position: relative; margin-bottom: 1rem; } .mm-blyszcz-auth-field-wrap .mm-blyszcz-auth-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--mm-auth-gold); font-size: 0.95rem; pointer-events: none; z-index: 1; } .mm-blyszcz-auth-input { width: 100%; border: 1px solid var(--mm-auth-input-border); border-radius: 10px; background: #ffffff; padding: 0.8rem 0.9rem 0.8rem 2.55rem; font-size: 0.93rem; color: var(--mm-auth-ink); box-sizing: border-box; font-family: "Inter", system-ui, -apple-system, sans-serif; } .mm-blyszcz-auth-input::placeholder { color: var(--mm-auth-placeholder); } .mm-blyszcz-auth-input:focus { outline: none; border-color: var(--mm-auth-gold); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.22); } .mm-blyszcz-auth-submit { display: block; width: 100%; box-sizing: border-box; margin-top: 0.35rem; padding: 0.95rem 1rem; border: none; border-radius: 10px; background: var(--mm-auth-gold); color: #ffffff; font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; box-shadow: var(--mm-auth-shadow-btn); } .mm-blyszcz-auth-submit:hover { filter: brightness(1.04); } .mm-blyszcz-auth-submit:active { transform: translateY(1px); } .mm-blyszcz-auth-divider-line--full { flex: none; width: 100%; height: 1px; margin: 1.65rem 0 1.15rem; background: linear-gradient(90deg, transparent 0%, rgba(197, 160, 89, 0.5) 12%, rgba(197, 160, 89, 0.5) 88%, transparent 100%); } .mm-blyszcz-auth-social { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 0.65rem; width: 100%; } .mm-blyszcz-auth-social-btn { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; min-height: 56px; box-sizing: border-box; border-radius: 10px; font-size: 1.38rem; text-decoration: none !important; background: #2e2926 !important; color: var(--mm-auth-gold) !important; border: 1px solid rgba(197, 160, 89, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease; } .mm-blyszcz-auth-social-btn:hover { filter: brightness(1.12); color: var(--mm-auth-gold-soft) !important; } .mm-blyszcz-auth-social-btn:active { transform: scale(0.99); } /* Na docelowej makiecie: jeden styl — ciemne pole, złota ikona */ .mm-blyszcz-auth-social-btn--fb, .mm-blyszcz-auth-social-btn--ig, .mm-blyszcz-auth-social-btn--tt { background: #2e2926 !important; } .mm-blyszcz-auth-foot { margin-top: 2rem; text-align: center; display: flex; flex-direction: column; gap: 0.75rem; } .mm-blyszcz-auth-foot a { color: #a67c32 !important; -webkit-text-fill-color: #a67c32 !important; font-family: "Inter", system-ui, sans-serif; font-size: 0.98rem; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(197, 160, 89, 0.25); } .mm-blyszcz-auth-foot a:hover { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:focus, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:focus-visible, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:active { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; text-decoration: none !important; } /* PWA: nadpisanie złoty+biały :hover z mm-pwa-app-shell (gdyby klasa została na body) */ html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a { color: #a67c32 !important; -webkit-text-fill-color: #a67c32 !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:hover, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:focus, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:focus-visible, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:active { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; text-decoration: none !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:link, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:visited { color: #a67c32 !important; -webkit-text-fill-color: #a67c32 !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:visited:hover, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-foot a:visited:active { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; } .mm-blyszcz-auth-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0; font-size: 0.84rem; color: var(--mm-auth-ink); font-family: "Inter", system-ui, sans-serif; } .mm-blyszcz-auth-check input { margin-top: 0.2rem; accent-color: #1a1a1a; } .mm-blyszcz-auth-info-box { background: #fffef9; border: 1px solid var(--mm-auth-input-border); border-radius: 10px; padding: 1.1rem 1rem; font-size: 0.9rem; line-height: 1.55; color: var(--mm-auth-ink); margin-bottom: 1.25rem; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box p, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box li { color: #1a1816 !important; -webkit-text-fill-color: #1a1816 !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box strong { color: #0f0e0c !important; -webkit-text-fill-color: #0f0e0c !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box a { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-info-box a:hover { color: #3d2a10 !important; -webkit-text-fill-color: #3d2a10 !important; } /* Akapit pod ramką (rejestracja / weryfikacja) — wcześniej var(--mm-auth-muted) bez definicji */ body.mm-auth-blyszcz-premium .mm-blyszcz-auth-note { color: var(--mm-auth-muted) !important; -webkit-text-fill-color: var(--mm-auth-muted) !important; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-note a { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; font-weight: 600; } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-note a:hover { color: #3d2a10 !important; -webkit-text-fill-color: #3d2a10 !important; } .mm-blyszcz-auth-back { display: block; margin-top: 1.15rem; text-align: center; font-size: 0.98rem; font-weight: 700; color: #a67c32; } .mm-blyszcz-auth-back a { color: #a67c32 !important; -webkit-text-fill-color: #a67c32 !important; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: rgba(197, 160, 89, 0.25); } body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:hover, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:focus, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:focus-visible, body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:active { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; text-decoration: none !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a { color: #a67c32 !important; -webkit-text-fill-color: #a67c32 !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:hover, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:focus, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:focus-visible, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-back a:active { color: #5c4018 !important; -webkit-text-fill-color: #5c4018 !important; text-decoration: none !important; } /* Logowanie / planer powitalny / konto Błyszcz: bez pełnej stopki witryny, docka PWA i widgetu (jak w aplikacji) */ body.mm-auth-blyszcz-premium #footer, body.mm-auth-blyszcz-premium .mm-blyszcz-os-dock, body.mm-auth-blyszcz-premium #charity-widget-trigger, body.mm-auth-blyszcz-premium #charitySidebar, body.mm-auth-blyszcz-premium .scroll-to-top { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Ekran powitalny planera (planer-powitalny.php) */ .mm-blyszcz-auth-hero--planner-welcome { text-align: center; } .mm-blyszcz-auth-planner-kicker { margin: 0 0 0.5rem; font-family: "Inter", system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mm-auth-gold-deep); } .mm-blyszcz-auth-planner-main-title { max-width: none; text-align: center; margin-bottom: 0.65rem; } .mm-blyszcz-auth-planner-greet { margin: 0 auto; max-width: 22rem; font-family: "Inter", system-ui, sans-serif; font-size: 1.05rem; font-weight: 500; line-height: 1.45; color: var(--mm-auth-ink) !important; -webkit-text-fill-color: var(--mm-auth-ink) !important; } .mm-blyszcz-auth-planner-greet strong { color: #0f0e0c !important; -webkit-text-fill-color: #0f0e0c !important; font-weight: 700; } .mm-blyszcz-auth-input--date { min-height: 2.85rem; padding-left: 2.55rem; } .mm-blyszcz-auth-planner-date-hint { color: var(--mm-auth-muted) !important; -webkit-text-fill-color: var(--mm-auth-muted) !important; line-height: 1.45; } /* * PWA standalone + globalny ciemny motyw witryny (color-scheme.css): bez tego .main i pola * mogą wyglądać jak pusty czarny ekran mimo że HTML formularza (planer-powitalny) jest w DOM. * Specyficzność celowo wysoka — musi wygrywać z [data-mm-theme="dark"] .main … ładowanym później. */ html.mm-pwa-standalone body.mm-auth-blyszcz-premium .body, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-panel, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-wrap { background-color: #f5f1e6 !important; color: #1a1a1a !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-hero { background-color: #f5f1e6 !important; color: #1a1a1a !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-hero-title, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-main-title, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-kicker, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-greet, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-greet strong, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main h1 { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-kicker { color: var(--mm-auth-gold-deep) !important; -webkit-text-fill-color: var(--mm-auth-gold-deep) !important; } html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-input, html.mm-pwa-standalone body.mm-auth-blyszcz-premium .mm-blyszcz-auth-input:focus { background: #ffffff !important; color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; border-color: var(--mm-auth-input-border) !important; } html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .body, html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .main, html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .mm-blyszcz-auth-hero, html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .mm-blyszcz-auth-panel { background-color: #f5f1e6 !important; color: #1a1a1a !important; } html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-hero-title, html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .main h1, html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .main .mm-blyszcz-auth-planner-greet { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } html[data-mm-theme="dark"] body.mm-auth-blyszcz-premium .mm-blyszcz-auth-input { background: #ffffff !important; color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } /* Splash przed formularzem — tylko gałąź PWA (logowanie.php + mm_pwa_gate), klasa na body z inline skryptu */ .mm-pwa-login-splash { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: var(--mm-auth-cream); transition: opacity 0.38s ease, visibility 0.38s; } .mm-pwa-login-splash__ring { padding: 3px; border-radius: 16px; background: linear-gradient( 115deg, rgba(197, 160, 89, 0.45) 0%, rgba(232, 201, 106, 0.95) 28%, rgba(201, 165, 74, 0.55) 52%, rgba(138, 102, 33, 0.75) 72%, rgba(197, 160, 89, 0.5) 100% ); box-shadow: 0 0 0 1px rgba(168, 131, 42, 0.28), 0 12px 40px rgba(90, 68, 32, 0.12); } .mm-pwa-login-splash__icon { display: block; width: 120px; height: 120px; border-radius: 14px; object-fit: contain; } .mm-pwa-auth-reveal { opacity: 0; transition: opacity 0.38s ease; } body.mm-pwa-login-splash-done .mm-pwa-login-splash { opacity: 0; visibility: hidden; pointer-events: none; } body.mm-pwa-login-splash-done .mm-pwa-auth-reveal { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mm-pwa-login-splash, .mm-pwa-auth-reveal { transition: none; } .mm-pwa-login-splash__ring { background: linear-gradient(145deg, rgba(197, 160, 89, 0.55), rgba(138, 102, 33, 0.35)); } }