/* Splash do Operations Manager. A paleta abaixo é a mesma família do Primary #4D6D5D do app (bloco Theme do appsettings.json): a splash antecipa o sistema que abre em seguida, em vez de introduzir uma identidade própria. */ html, body { min-width: 320px; min-height: 100%; margin: 0; } /* O escuro da splash fica no body, nunca no html. Com fundo próprio no html é ele que vira o canvas, e o body passa a pintar só a própria caixa — que começa 64px abaixo, porque a margem do MudMainContent colapsa para fora dele. No celular o AppBar tem 56px e não alcança esses 64px: os 8px restantes apareciam como uma faixa preta sob a barra verde. Sem fundo no html, o do body volta a ser propagado para o canvas e a faixa some. */ /* Os tokens --om-* vivem no :root do raizen.css, que e a ultima folha do e portanto vencia esta lista de qualquer forma. Manter as duas era ter duas verdades para a mesma paleta -- e elas ja divergiam em --om-mint. */ body { background: var(--om-ink-900); } body.om-app-ready { background: var(--om-on-dark); color: inherit; } .om-splash { position: fixed; inset: 0; z-index: 100000; overflow: hidden; color: var(--om-on-dark); background: var(--om-ink-900); font-family: Inter, "Segoe UI", Arial, sans-serif; isolation: isolate; transition: opacity 450ms ease, transform 450ms ease, filter 450ms ease; } .om-splash::before { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 86%); content: ""; pointer-events: none; } .om-splash::after { position: absolute; z-index: 1; width: 34rem; height: 34rem; bottom: -24rem; left: 18%; border-radius: 50%; background: rgba(0, 93, 94, 0.45); filter: blur(110px); content: ""; pointer-events: none; } .om-splash--hidden { opacity: 0; transform: scale(1.015); filter: blur(4px); pointer-events: none; } .om-splash__visual { position: absolute; inset: 0 0 0 38%; z-index: 0; overflow: hidden; } .om-splash__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; transform: scale(1.035); animation: om-splash-visual-drift 12s ease-out both; } /* A foto da base é clara (céu, pátio) — bem mais que o fundo anterior. As paradas abaixo sustentam o contraste do texto sobre ela; clarear a máscara derruba a legibilidade. */ .om-splash__visual-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--om-ink-900) 0%, rgba(0, 28, 29, 0.97) 16%, rgba(0, 28, 29, 0.7) 52%, rgba(0, 28, 29, 0.26) 100%), linear-gradient(0deg, rgba(0, 28, 29, 0.78) 0%, rgba(0, 28, 29, 0.06) 40%, rgba(0, 28, 29, 0.45) 100%), linear-gradient(0deg, rgba(0, 93, 94, 0.22), rgba(0, 93, 94, 0.22)); } .om-splash__shell { position: relative; z-index: 2; width: min(100%, 1440px); min-height: 100%; margin: 0 auto; padding: clamp(22px, 4vw, 56px) clamp(22px, 5vw, 72px) clamp(24px, 4vw, 52px); box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vh, 48px); } .om-splash__topbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; } .om-splash__product-brand { display: inline-flex; align-items: center; gap: 13px; } .om-splash__product-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 28, 29, 0.24); } .om-splash__product-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .om-splash__product-copy { display: flex; flex-direction: column; gap: 3px; } .om-splash__product-copy strong { font-size: 1.05rem; line-height: 1; letter-spacing: -0.015em; } .om-splash__product-copy small { color: var(--om-on-dark-muted); font-size: 0.63rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; } .om-splash__hero { width: min(700px, 62vw); align-self: center; } .om-splash__eyebrow { margin: 0 0 clamp(18px, 2.5vh, 28px); color: var(--om-mint); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .om-splash__eyebrow > span { width: 26px; height: 2px; background: var(--om-gradient); box-shadow: 0 0 14px rgba(127, 201, 163, 0.6); } .om-splash__hero h1 { margin: 0; max-width: 12ch; font-family: Manrope, "Segoe UI", system-ui, sans-serif; font-size: clamp(3.15rem, 5.45vw, 5rem); font-weight: 800; line-height: 0.93; letter-spacing: -0.05em; } .om-splash__hero h1 > span { color: transparent; background: linear-gradient(90deg, #FFFFFF 0%, #9AD37F 48%, #6CBE4B 100%); background-clip: text; -webkit-background-clip: text; } .om-splash__lead { max-width: 55ch; margin: clamp(22px, 3vh, 32px) 0 0; color: var(--om-on-dark-body); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; } .om-splash__capabilities { margin-top: clamp(22px, 3vh, 32px); color: var(--om-on-dark-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } .om-splash__capabilities span { display: inline-flex; align-items: center; gap: 20px; } .om-splash__capabilities span:not(:last-child)::after { width: 4px; height: 4px; border-radius: 50%; background: var(--om-mint); box-shadow: 0 0 10px rgba(127, 201, 163, 0.85); content: ""; } .om-splash__loading { width: min(690px, 100%); padding: 20px 22px 17px; border: 1px solid var(--om-line); border-radius: 18px; box-sizing: border-box; background: rgba(0, 28, 29, 0.82); box-shadow: 0 18px 48px rgba(4, 12, 9, 0.32); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .om-splash__loading-header, .om-splash__loading-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .om-splash__loading-label { color: var(--om-mint); font-size: 0.64rem; font-weight: 700; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase; } .om-splash__message { margin: 6px 0 0; color: var(--om-on-dark); font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .om-splash__progress-info { color: var(--om-on-dark); font-family: Manrope, "Segoe UI", system-ui, sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; } .om-splash__progress-bar { position: relative; height: 4px; margin: 17px 0 14px; border-radius: 999px; overflow: hidden; background: rgba(201, 226, 226, 0.14); } .om-splash__progress-fill { position: relative; width: 0; height: 100%; border-radius: inherit; background: var(--om-gradient); box-shadow: 0 0 18px rgba(127, 201, 163, 0.42); transition: width 600ms cubic-bezier(0.2, 0.6, 0.2, 1); } .om-splash__progress-fill::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%); transform: translateX(-100%); animation: om-splash-progress-shine 1.8s ease-in-out infinite; content: ""; } .om-splash__loading-footer { color: var(--om-on-dark-muted); font-size: 0.72rem; line-height: 1.35; } .om-splash__loading-state { min-width: 0; display: inline-flex; align-items: center; gap: 8px; } .om-splash__status-light { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--om-mint); box-shadow: 0 0 0 4px rgba(127, 201, 163, 0.1), 0 0 12px rgba(127, 201, 163, 0.65); animation: om-splash-status-pulse 1.8s ease-in-out infinite; } .om-splash__status-light--success { background: #54e69d; box-shadow: 0 0 0 4px rgba(84, 230, 157, 0.12), 0 0 16px rgba(84, 230, 157, 0.7); animation: none; } /* Crédito da fabricante: presente, mas subordinado ao produto — some junto com o rodapé. */ .om-splash__credit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; color: var(--om-on-dark-muted); text-decoration: none; transition: color 180ms ease; } .om-splash__credit img { width: 18px; height: 18px; object-fit: contain; opacity: 0.85; } .om-splash__credit strong { font-weight: 700; } .om-splash__credit:hover { color: var(--om-on-dark-body); } .om-splash__credit:focus-visible { border-radius: 8px; outline: 3px solid rgba(127, 201, 163, 0.42); outline-offset: 5px; } @keyframes om-splash-visual-drift { from { transform: scale(1.035) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-0.8%, -0.4%, 0); } } @keyframes om-splash-progress-shine { 55%, 100% { transform: translateX(180%); } } @keyframes om-splash-status-pulse { 0%, 100% { opacity: 0.65; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } } @media (max-width: 900px) { .om-splash__visual { inset: 0; } .om-splash__visual img { object-position: 66% 42%; } /* Sem a coluna sólida da esquerda, aqui o texto assenta direto sobre a foto: a faixa central precisa ficar bem mais fechada que no desktop ou as "capabilities" (10px) caem abaixo de 4.5:1. */ .om-splash__visual-shade { background: linear-gradient(90deg, rgba(0, 28, 29, 0.98) 0%, rgba(0, 28, 29, 0.93) 48%, rgba(0, 28, 29, 0.72) 100%), linear-gradient(0deg, rgba(0, 28, 29, 0.9) 0%, rgba(0, 28, 29, 0.32) 58%, rgba(0, 28, 29, 0.58) 100%), linear-gradient(0deg, rgba(0, 93, 94, 0.22), rgba(0, 93, 94, 0.22)); } .om-splash__hero { width: min(650px, 88vw); } } @media (max-width: 640px) { .om-splash::before { background-size: 48px 48px; } .om-splash__shell { padding: 20px 18px 18px; gap: 22px; } .om-splash__product-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; } .om-splash__product-copy small { display: none; } .om-splash__hero { width: 100%; } .om-splash__eyebrow { margin-bottom: 18px; font-size: 0.67rem; } .om-splash__hero h1 { max-width: 11ch; font-size: clamp(2.55rem, 12.5vw, 3.55rem); } .om-splash__lead { margin-top: 20px; font-size: 0.94rem; line-height: 1.48; } .om-splash__capabilities { margin-top: 18px; gap: 8px 12px; font-size: 0.64rem; } .om-splash__capabilities span { gap: 12px; } .om-splash__loading { padding: 17px 16px 15px; border-radius: 15px; } .om-splash__loading-header { align-items: flex-end; } .om-splash__message { font-size: 0.82rem; } .om-splash__progress-info { font-size: 1.15rem; } .om-splash__loading-footer { align-items: flex-start; flex-direction: column; gap: 7px; font-size: 0.68rem; } } @media (max-height: 700px) and (min-width: 641px) { .om-splash__shell { padding-top: 22px; padding-bottom: 22px; gap: 18px; } .om-splash__hero h1 { font-size: clamp(2.7rem, 8vh, 4rem); } .om-splash__lead { margin-top: 16px; } .om-splash__capabilities { margin-top: 15px; } } @media (max-height: 610px) { .om-splash__lead, .om-splash__capabilities { display: none; } } @media (prefers-reduced-motion: reduce) { .om-splash, .om-splash__visual img, .om-splash__progress-fill, .om-splash__progress-fill::after, .om-splash__status-light { animation: none; transition-duration: 1ms; } }