/* ========================================================================== Kotinski Fidelidade — shell PWA · /_shell/app.css Direcao "Selo vivo": a sobriedade institucional do SELO (fundo identico ao do app, hierarquia por peso, curvas sem overshoot) com o campo de luz em deriva lenta e a marca-estrela da direcao FIDELIDADE VIVA. Zero rede: nenhuma fonte, imagem, icone ou CDN de terceiros. ========================================================================== */ /* 1 — TOKENS ============================================================== */ :root { color-scheme: light; /* Paleta espelhada 1:1 do app (shadcn blue + slate). Se o app trocar de tema, atualizar SOMENTE estes triplets "H S% L%". */ --background: 0 0% 100%; /* #ffffff */ --foreground: 222.2 84% 4.9%; /* #020817 */ --muted: 210 40% 96.1%; /* #f1f5f9 */ --muted-foreground: 215.4 16.3% 46.9%; /* #64748b */ --primary: 221.2 83.2% 53.3%; /* #2563eb */ --primary-foreground: 210 40% 98%; /* #f8fafc */ --destructive: 0 84.2% 60.2%; /* #ef4444 */ --border: 214.3 31.8% 91.4%; /* #e2e8f0 */ --ring: 221.2 83.2% 53.3%; --elevated: 0 0% 100%; --scrim: 222 84% 5% / 0.38; /* Marca Kotinski (o gradiente do cartao de fidelidade do app) */ --seal-from: #3b82f6; --seal-mid: #1d4ed8; --seal-deep: #004e8a; --seal-edge: hsl(0 0% 100% / 0.22); --seal-star: #ffffff; --seal-glint: hsl(0 0% 100% / 0.85); --seal-ring: hsl(var(--primary) / 0.26); --seal-lift: drop-shadow(0 18px 34px hsl(var(--primary) / 0.30)); /* Campo de luz (splash + painel de estado) */ --field-core: hsl(var(--primary) / 0.10); --field-a: hsl(var(--primary) / 0.16); --field-b: hsl(202 100% 27% / 0.10); --frost: hsl(0 0% 100% / 0.84); /* Tipografia: EXATAMENTE a declaracao do app. Ele pede "DM Sans" mas nunca a embarca (0 @font-face, 0 woff2 no bundle), entao cai no generico sans-serif. Repetir a mesma declaracao e o unico jeito de shell e app resolverem para a MESMA fonte em qualquer plataforma - com ui-sans-serif no meio, o iOS daria SF Pro no shell e Helvetica no app, e a costura apareceria. */ --font: "DM Sans", sans-serif; --fs-xs: 0.6875rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: clamp(1.5rem, 1.18rem + 1.5vw, 1.875rem); --track-tight: -0.021em; --track-eyebrow: 0.14em; /* Ritmo, toque e forma (espelha --touch-target 44/48 do app) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --touch: 44px; --touch-lg: 48px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-md: 0 6px 18px -8px hsl(222 84% 5% / 0.18), 0 2px 5px -3px hsl(222 84% 5% / 0.10); --shadow-lg: 0 -14px 44px -16px hsl(222 84% 5% / 0.24), 0 -2px 8px -5px hsl(222 84% 5% / 0.12); /* Movimento — nenhuma curva com overshoot: fintech seria nao quica. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 380ms; --dur-out: 300ms; /* Safe areas (viewport-fit=cover) + inset do teclado virtual (app.js) */ --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --kb: 0px; /* Altura da viewport: dvh quando existir; app.js sobrescreve no fallback. */ --app-h: 100dvh; } @supports not (height: 100dvh) { :root { --app-h: 100vh; } } /* SEM esquema escuro, de proposito. O app embutido e LIGHT-ONLY: o CSS dele nao tem uma unica media query prefers-color-scheme, o tema escuro do Tailwind esta atras da classe `.dark` (darkMode:'class') e nada no bundle a aplica — o dele e #ffffff sempre. Um shell escuro produziria splash #020817 -> app #ffffff (o pior flash possivel), faixas de safe area pretas em volta de um app branco e barra de status preta colada num app claro. Se um dia o app passar a ligar `.dark`, o bloco @media volta aqui. */ /* 2 — BASE E MOLDURA ====================================================== */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } /* position:fixed + overflow:hidden matam o bounce/pull-to-refresh do DOCUMENTO sem tocar no scroll interno do iframe (contexto proprio). */ body { position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :where(button, a, [tabindex]):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: var(--r-sm); } /* O app embutido nao conhece env(): quem o mantem fora do notch e do home indicator e a moldura. As faixas ficam na cor do . */ .frame { /* - var(--kb): no iOS o teclado NAO encolhe o layout viewport, so o visual. Sem descontar esse inset o campo de senha e o botao "Entrar" do app ficam embaixo do teclado, e o body fixo nao deixa rolar para compensar. */ position: fixed; left: 0; top: 0; width: 100%; height: calc(var(--app-h) - var(--kb)); padding: var(--sat) var(--sar) var(--sab) var(--sal); background: hsl(var(--background)); } #app-frame { display: block; width: 100%; height: 100%; border: 0; background: hsl(var(--background)); color-scheme: normal; opacity: 0; transition: opacity var(--dur) var(--ease-out); } body[data-frame="ready"] #app-frame { opacity: 1; } /* Campo de luz reaproveitado pelo splash E pelo painel de estado: um erro de rede parece o mesmo produto, nunca uma pagina de servidor. */ .field { position: absolute; inset: 0; overflow: hidden; contain: paint; background-color: hsl(var(--background)); background-image: radial-gradient(118% 86% at 50% 34%, var(--field-core), transparent 62%); } .field > i { position: absolute; display: block; border-radius: 50%; will-change: transform; } .field > i:nth-child(1) { width: 118vmax; height: 118vmax; left: -46vmax; top: -64vmax; background: radial-gradient(circle at 50% 50%, var(--field-a) 0%, transparent 62%); animation: drift-a 26s linear infinite; } .field > i:nth-child(2) { width: 96vmax; height: 96vmax; right: -42vmax; bottom: -46vmax; background: radial-gradient(circle at 50% 50%, var(--field-b) 0%, transparent 60%); animation: drift-b 21s linear infinite; } /* 3 — SPLASH ============================================================== */ .splash { /* Mesma caixa canonica da .frame (--app-h = dvh). Com inset:0 o overlay mediria o layout viewport (lvh) e, no Safari em aba, ficaria mais alto que o iframe: o centro nao coincidiria e o crossfade daria um salto vertical. */ position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h); z-index: 20; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: calc(var(--sat) + var(--sp-6)) calc(var(--sar) + var(--sp-6)) calc(var(--sab) + var(--sp-6)) calc(var(--sal) + var(--sp-6)); background: hsl(var(--background)); transition: opacity var(--dur-out) var(--ease-inout); } .splash[data-state="out"] { opacity: 0; pointer-events: none; } .splash__stage { position: relative; grid-row: 1; align-self: center; max-width: 21rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; } .mark__halo { position: absolute; inset: 2%; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 50% 52%, hsl(var(--primary) / 0.45) 0%, transparent 66%); animation: halo 3.4s var(--ease-inout) 700ms infinite; } .seal { position: relative; display: block; width: 100%; height: auto; filter: var(--seal-lift); } /* stops do gradiente da marca (splash e banner) */ .s0 { stop-color: var(--seal-from); } .s1 { stop-color: var(--seal-mid); } .s2 { stop-color: var(--seal-deep); } .seal__ring { fill: none; stroke: var(--seal-ring); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 60px 60px; } .seal__edge { fill: none; stroke: var(--seal-edge); stroke-width: 1.25; } .seal__star { fill: var(--seal-star); } .seal__glint { fill: var(--seal-glint); transform-origin: 74px 26px; } .wordmark { margin: var(--sp-6) 0 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.1; } .wordmark span { font-weight: 500; color: hsl(var(--muted-foreground)); } .rule { display: block; width: 32px; height: 1px; margin: var(--sp-4) 0; background: hsl(var(--border)); } .tagline { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: hsl(var(--muted-foreground)); text-wrap: balance; } /* Trilho: diz "estamos carregando" (verdade). Um spinner diria "estamos processando" — mentira, nao ha como medir o progresso dentro do iframe. */ .rail { position: relative; width: 128px; height: 2px; margin-top: var(--sp-7); border-radius: var(--r-pill); background: hsl(var(--foreground) / 0.10); overflow: hidden; } .rail > i { position: absolute; inset-block: 0; left: 0; width: 40%; border-radius: inherit; background: hsl(var(--primary)); } .seal-note { grid-row: 2; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); /* Sem alfa: 0.72 sobre o fundo dava 2.82:1, reprovado no AA (4.5:1 para texto normal). Opaco da 4.76:1. Quem "apaga" aqui e o tamanho/peso. */ text-transform: uppercase; color: hsl(var(--muted-foreground)); } @media (max-height: 520px) { .mark { width: 80px; height: 80px; } .wordmark { margin-top: var(--sp-4); font-size: var(--fs-xl); } .rule { margin: var(--sp-3) 0; } .rail { margin-top: var(--sp-5); } .seal-note { display: none; } } /* 4 — BOTOES ============================================================== */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-inout), border-color var(--dur-fast) var(--ease-inout), transform var(--dur-fast) var(--ease-inout), opacity var(--dur-fast) linear; } .btn:active { transform: scale(0.985); } .btn[disabled] { opacity: 0.6; pointer-events: none; } .btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 8px 20px -10px hsl(var(--primary) / 0.85); } .btn--primary:hover { background: hsl(var(--primary) / 0.92); } .btn--ghost { background: transparent; color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); } .btn--ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); } @media (hover: none) { .btn--primary:hover { background: hsl(var(--primary)); } .btn--ghost:hover { background: transparent; color: hsl(var(--muted-foreground)); } } .dot { width: 6px; height: 6px; flex: none; border-radius: var(--r-pill); background: hsl(var(--muted-foreground)); animation: breathe 1.8s var(--ease-inout) infinite alternate; } /* 5 — PAINEL OFFLINE / ERRO =============================================== */ .status { /* z-index ABAIXO do splash (20): o painel entra por baixo e o splash faz crossfade revelando-o — nunca ha um corte seco nem uma tela vazia. */ position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h); z-index: 18; display: grid; place-items: center; padding: calc(var(--sat) + var(--sp-6)) calc(var(--sar) + var(--sp-5)) calc(var(--sab) + var(--sp-6)) calc(var(--sal) + var(--sp-5)); background: hsl(var(--background)); } .status__box { position: relative; max-width: 21rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .status__badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-pill); border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.6); color: hsl(var(--muted-foreground)); } .status[data-kind="error"] .status__badge { border-color: hsl(var(--destructive) / 0.32); background: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); } /* Troca de icone e de copy pelo data-kind — o JS nunca escreve innerHTML. */ .status[data-kind="offline"] [data-when="error"], .status[data-kind="error"] [data-when="offline"] { display: none; } .status__title { margin: var(--sp-5) 0 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--track-tight); } .status__text { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); text-wrap: pretty; } .status__meta { display: inline-flex; align-items: center; gap: var(--sp-2); margin: var(--sp-5) 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: hsl(var(--muted-foreground)); } /* 6 — BARRA DE REDE E CHIP DE ATUALIZACAO ================================= */ .netbar, .chip { position: fixed; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 38px; padding: 0 var(--sp-4); border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); background: var(--frost); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .netbar { z-index: 32; bottom: calc(var(--sab) + var(--kb) + var(--sp-4)); color: hsl(var(--foreground)); } .chip { z-index: 34; top: calc(var(--sat) + var(--sp-3)); font: inherit; /* Unico alvo de toque solto do shell: precisa dos 44px do contrato. */ min-height: var(--touch); padding-inline: var(--sp-5); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; border-color: hsl(var(--primary) / 0.28); color: hsl(var(--primary)); } .chip strong { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .chip__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: hsl(var(--primary)); animation: breathe 1.8s var(--ease-inout) infinite alternate; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .netbar, .chip { background: hsl(var(--elevated)); } } /* 7 — BANNER DE INSTALACAO ================================================ */ .sheet { position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h); z-index: 40; display: grid; align-items: end; background: hsl(var(--scrim)); } .sheet__card { padding: var(--sp-6) calc(var(--sar) + var(--sp-6)) calc(var(--sab) + var(--kb) + var(--sp-6)) calc(var(--sal) + var(--sp-6)); border-top: 1px solid hsl(var(--border)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: hsl(var(--elevated)); box-shadow: var(--shadow-lg); } .sheet__head { display: flex; gap: var(--sp-4); align-items: flex-start; } .sheet__icon { flex: none; filter: drop-shadow(0 6px 14px hsl(var(--primary) / 0.3)); } .sheet__title { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--track-tight); } .sheet__text { margin: 6px 0 0; font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); text-wrap: pretty; } .sheet__text strong { color: hsl(var(--foreground)); font-weight: 600; } .ico-share { vertical-align: -3px; margin-inline: 2px; color: hsl(var(--primary)); } .sheet__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); } .sheet__actions .btn { flex: 1; min-height: var(--touch-lg); } .sheet[data-mode="prompt"] [data-when="ios"], .sheet[data-mode="ios"] [data-when="prompt"] { display: none !important; } @media (min-width: 560px) { .sheet { place-items: center; } .sheet__card { width: min(26rem, 100%); margin: var(--sp-6); border: 1px solid hsl(var(--border)); border-radius: var(--r-lg); padding-bottom: var(--sp-6); } } /* 8 — MOVIMENTO =========================================================== Partitura da abertura (520ms ate assentar, stagger de 70ms): 0ms selo (escala .94 -> 1) · 60ms anel se desenha · 70ms wordmark 110ms fio · 140ms tagline · 210ms trilho · 320ms assinatura Saida: crossfade de 300ms — o iframe ja esta pintado por tras. ========================================================================= */ @keyframes seal-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes ring-draw { from { stroke-dashoffset: 1; opacity: 0; } 25% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rule-grow { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes travel { 0% { transform: translateX(-105%); } 50% { transform: translateX(150%); } 100% { transform: translateX(-105%); } } @keyframes halo { 0% { opacity: 0; transform: scale(0.9); } 30% { opacity: 0.5; } 100% { opacity: 0; transform: scale(1.24); } } @keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1.12); } } @keyframes breathe { from { opacity: 0.35; } to { opacity: 1; } } @keyframes drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); } } @keyframes drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); } 50% { transform: translate3d(-6vmax, -4vmax, 0) scale(0.94); } } @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes pill-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes pill-in-top { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } .splash[data-state="in"] :is(.mark, .wordmark, .rule, .tagline, .rail) { animation-delay: var(--d, 0ms); animation-fill-mode: both; animation-timing-function: var(--ease-out); } .splash[data-state="in"] .mark { animation-name: seal-in; animation-duration: 560ms; } .splash[data-state="in"] .wordmark { animation-name: rise; animation-duration: 420ms; } .splash[data-state="in"] .rule { animation-name: rule-grow; animation-duration: 300ms; } .splash[data-state="in"] .tagline { animation-name: rise; animation-duration: 420ms; } .splash[data-state="in"] .rail { animation-name: fade-in; animation-duration: 340ms; } .splash[data-state="in"] .seal-note { animation: fade-in 500ms var(--ease-out) 320ms both; } .splash[data-state="in"] .seal__ring { animation: ring-draw 900ms var(--ease-inout) 60ms both; } .rail > i { animation: travel 1500ms var(--ease-inout) 320ms infinite; } .seal__glint { animation: twinkle 2.8s var(--ease-inout) 900ms infinite; } .status:not([hidden]) { animation: fade-in var(--dur) var(--ease-inout) both; } .status:not([hidden]) .status__box { animation: panel-in var(--dur-slow) var(--ease-out) 40ms both; } .sheet:not([hidden]) { animation: fade-in var(--dur) var(--ease-inout) both; } .sheet:not([hidden]) .sheet__card { animation: sheet-up 360ms var(--ease-out) both; } .netbar:not([hidden]) { animation: pill-in var(--dur-slow) var(--ease-out) both; } .chip:not([hidden]) { animation: pill-in-top var(--dur-slow) var(--ease-out) both; } /* Reduced motion: nao e "desligar tudo", e trocar deslocamento por opacidade. O trilho para de viajar e vira indicador estatico — nada pisca. */ @media (prefers-reduced-motion: reduce) { .splash[data-state="in"] :is(.mark, .wordmark, .rule, .tagline, .rail, .seal-note), .status:not([hidden]), .status:not([hidden]) .status__box, .sheet:not([hidden]), .sheet:not([hidden]) .sheet__card, .netbar:not([hidden]), .chip:not([hidden]) { animation-name: fade-in; animation-duration: 150ms; animation-delay: 0ms; animation-timing-function: linear; } .sheet:not([hidden]) .sheet__card { transform: none; } .netbar, .chip { transform: translateX(-50%); } /* Especificidade casada com as regras originais (.field > i:nth-child(n) e .splash[data-state="in"] .seal__ring): media query nao soma especificidade, e um seletor mais fraco aqui seria simplesmente ignorado. */ .field > i:nth-child(1), .field > i:nth-child(2), .mark__halo, .dot, .chip__dot { animation: none; } .field > i:nth-child(1) { transform: translate3d(3vmax, 2vmax, 0) scale(1.06); } .field > i:nth-child(2) { transform: translate3d(-3vmax, -2vmax, 0) scale(1); } .splash[data-state="in"] .seal__ring { animation: none; stroke-dashoffset: 0; } .seal__glint { animation: none; opacity: 0.85; } .rail > i { animation: none; width: 34%; left: 33%; } .splash, #app-frame { transition-duration: 140ms; } .btn:active { transform: none; } } /* Economia de dados/bateria: o usuario pediu menos, entregamos menos. */ @media (prefers-reduced-data: reduce) { .field > i:nth-child(2), .mark__halo { display: none; } }