/* ──────────────────────────────────────────────────────────────────── Pessoas — design system "Confiança Premium" Paleta: azul-noite + coral + dourado Tipografia: Plus Jakarta Sans (hero) + Inter (corpo) Vibe: Hinge + Stripe + Apple ──────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────── TEMA — claro / escuro adaptativo - Default: respeita prefers-color-scheme do sistema - Override manual: ou - Identidade Confiança Premium mantida nos dois (coral + dourado iguais) ──────────────────────────────────────────────────────────────── */ :root { /* ── Cores em oklch (gamut wider que rgb, mais previsível) ───── */ --cor-fundo: oklch(13% 0.04 250); /* azul-noite */ --cor-fundo-superficie: oklch(17% 0.045 250); /* camada intermediária */ --cor-fundo-elevado: oklch(20% 0.05 250); /* cards, inputs */ --cor-fundo-glass: oklch(20% 0.05 250 / 0.72); --cor-borda: oklch(28% 0.04 250); --cor-borda-suave: oklch(24% 0.035 250); --cor-primaria: oklch(72% 0.15 25); /* coral vivo */ --cor-primaria-clara: oklch(82% 0.13 25); /* hover */ --cor-primaria-escura: oklch(62% 0.17 25); /* pressed */ --cor-primaria-texto: oklch(98% 0 0); --cor-acento: oklch(85% 0.12 80); /* dourado suave */ --cor-acento-clara: oklch(92% 0.08 85); /* Coral pra TEXTO/links — coral 72% é ótimo de fundo (botão), mas como texto sobre claro tem contraste baixo; no light vira coral escuro (AA). */ --cor-link: oklch(72% 0.15 25); --cor-sucesso: oklch(72% 0.18 160); --cor-aviso: oklch(78% 0.16 80); --cor-erro: oklch(68% 0.22 25); --cor-texto: oklch(98% 0 0); --cor-texto-suave: oklch(75% 0.02 250); --cor-texto-fraco: oklch(55% 0.02 250); --cor-texto-muito-fraco:oklch(45% 0.015 250); /* ── Gradients signature ─────────────────────────────────────── */ --grad-primario: linear-gradient(135deg, oklch(72% 0.15 25) 0%, oklch(80% 0.13 35) 50%, oklch(85% 0.12 80) 100%); /* Gradient pra BOTÃO — não vai até o dourado claro (texto branco fica legível em toda a extensão; o --grad-primario clareava demais no fim). */ --grad-botao: linear-gradient(135deg, oklch(64% 0.19 28) 0%, oklch(67% 0.17 42) 100%); --grad-mesh: radial-gradient(ellipse 80% 60% at 20% 0%, oklch(45% 0.18 25 / 0.55) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 15%, oklch(55% 0.14 280 / 0.45) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 50% 100%, oklch(50% 0.16 30 / 0.4) 0%, transparent 60%); --grad-card: linear-gradient(180deg, oklch(20% 0.05 250) 0%, oklch(17% 0.045 250) 100%); /* Gradient do hero título — claro no escuro; escurece no light (contraste AA) */ --grad-hero-titulo: linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(75% 0.02 250) 100%); /* ── Sombras ─────────────────────────────────────────────────── */ --sombra-xs: 0 1px 2px oklch(0% 0 0 / 0.25); --sombra-sm: 0 2px 8px oklch(0% 0 0 / 0.25); --sombra-md: 0 8px 24px oklch(0% 0 0 / 0.3); --sombra-lg: 0 16px 48px oklch(0% 0 0 / 0.4); --sombra-coral: 0 8px 32px oklch(72% 0.15 25 / 0.4); --sombra-ring-coral: 0 0 0 4px oklch(72% 0.15 25 / 0.22); /* ── Espaçamento ─────────────────────────────────────────────── */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-7: 2rem; --esp-8: 2.5rem; --esp-10: 3.5rem; --esp-12: 5rem; /* ── Raios ───────────────────────────────────────────────────── */ --raio-xs: 6px; --raio-sm: 10px; --raio-md: 16px; --raio-lg: 22px; --raio-xl: 32px; --raio-pill: 999px; /* ── Tipografia ──────────────────────────────────────────────── */ --fonte-hero: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── Tabbar ──────────────────────────────────────────────────── */ --tabbar-altura: 68px; --tabbar-altura-segura: calc(var(--tabbar-altura) + env(safe-area-inset-bottom, 0px)); /* ── Transições ──────────────────────────────────────────────── */ --easing-padrao: cubic-bezier(0.4, 0, 0.2, 1); --easing-suave: cubic-bezier(0.32, 0.72, 0, 1); --easing-spring: cubic-bezier(0.5, 1.5, 0.6, 1); --transicao-rapida: 150ms var(--easing-padrao); --transicao-padrao: 250ms var(--easing-padrao); --transicao-lenta: 400ms var(--easing-suave); } /* ── LIGHT MODE — sistema OU data-tema="light" ──────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-tema="dark"]) { --cor-fundo: oklch(97% 0.01 80); /* creme suave */ --cor-fundo-superficie: oklch(94% 0.013 80); --cor-fundo-elevado: oklch(99% 0.005 80); /* cards quase branco */ --cor-fundo-glass: oklch(99% 0.005 80 / 0.85); --cor-borda: oklch(88% 0.012 80); --cor-borda-suave: oklch(92% 0.01 80); --cor-texto: oklch(18% 0.04 250); /* +contraste */ --cor-texto-suave: oklch(30% 0.035 250); /* +contraste (era 40%) — passa AA sobre mesh coral */ --cor-texto-fraco: oklch(45% 0.025 250); /* +contraste (era 55%) */ --cor-texto-muito-fraco:oklch(62% 0.015 250); /* +contraste (era 70%) */ /* Destaques legíveis no claro (regra #9 AA) — dourado/título escurecem */ --cor-acento: oklch(52% 0.14 72); --cor-acento-clara: oklch(46% 0.14 72); --grad-hero-titulo: linear-gradient(180deg, oklch(28% 0.04 250) 0%, oklch(46% 0.05 250) 100%); /* Cores de status legíveis sobre fundo claro (erro/aviso/sucesso) */ --cor-sucesso: oklch(50% 0.15 155); --cor-aviso: oklch(50% 0.12 70); --cor-erro: oklch(53% 0.21 25); --cor-link: oklch(52% 0.19 27); /* coral escuro p/ texto/link (AA) */ --grad-mesh: radial-gradient(ellipse 80% 60% at 20% 0%, oklch(85% 0.12 25 / 0.25) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 15%, oklch(85% 0.10 280 / 0.20) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 50% 100%, oklch(88% 0.10 80 / 0.30) 0%, transparent 60%); --grad-card: linear-gradient(180deg, oklch(99% 0.005 80) 0%, oklch(96% 0.008 80) 100%); --sombra-xs: 0 1px 2px oklch(30% 0.02 250 / 0.06); --sombra-sm: 0 2px 8px oklch(30% 0.02 250 / 0.08); --sombra-md: 0 8px 24px oklch(30% 0.02 250 / 0.10); --sombra-lg: 0 16px 48px oklch(30% 0.02 250 / 0.14); --sombra-coral: 0 8px 32px oklch(72% 0.15 25 / 0.28); } } /* Override manual sobrescreve sistema */ :root[data-tema="light"] { --cor-fundo: oklch(97% 0.01 80); --cor-fundo-superficie: oklch(94% 0.013 80); --cor-fundo-elevado: oklch(99% 0.005 80); --cor-fundo-glass: oklch(99% 0.005 80 / 0.85); --cor-borda: oklch(88% 0.012 80); --cor-borda-suave: oklch(92% 0.01 80); --cor-texto: oklch(22% 0.04 250); --cor-texto-suave: oklch(40% 0.03 250); --cor-texto-fraco: oklch(55% 0.02 250); --cor-texto-muito-fraco:oklch(70% 0.015 250); /* Destaques legíveis no claro (regra #9 AA) — dourado/título escurecem */ --cor-acento: oklch(52% 0.14 72); --cor-acento-clara: oklch(46% 0.14 72); --grad-hero-titulo: linear-gradient(180deg, oklch(28% 0.04 250) 0%, oklch(46% 0.05 250) 100%); /* Cores de status legíveis sobre fundo claro (erro/aviso/sucesso) */ --cor-sucesso: oklch(50% 0.15 155); --cor-aviso: oklch(50% 0.12 70); --cor-erro: oklch(53% 0.21 25); --cor-link: oklch(52% 0.19 27); /* coral escuro p/ texto/link (AA) */ --grad-mesh: radial-gradient(ellipse 80% 60% at 20% 0%, oklch(85% 0.12 25 / 0.25) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 15%, oklch(85% 0.10 280 / 0.20) 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 50% 100%, oklch(88% 0.10 80 / 0.30) 0%, transparent 60%); --grad-card: linear-gradient(180deg, oklch(99% 0.005 80) 0%, oklch(96% 0.008 80) 100%); --sombra-xs: 0 1px 2px oklch(30% 0.02 250 / 0.06); --sombra-sm: 0 2px 8px oklch(30% 0.02 250 / 0.08); --sombra-md: 0 8px 24px oklch(30% 0.02 250 / 0.10); --sombra-lg: 0 16px 48px oklch(30% 0.02 250 / 0.14); --sombra-coral: 0 8px 32px oklch(72% 0.15 25 / 0.28); } /* ──────────────────────────────────────────────────────────────────── Reset moderno + base ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; scroll-behavior: smooth; height: 100%; } body { height: 100%; font-family: var(--fonte-corpo); font-size: 16px; line-height: 1.5; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; background: var(--cor-fundo); color: var(--cor-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* O body NÃO rola: a rolagem vive no .app-scroll. Assim o rubber-band do iOS PWA não arrasta a tabbar `fixed` ("ícones sobem" ao chegar no fim). */ overflow: hidden; } /* Container de scroll dedicado — replica o box-model que o tinha (safe-area no topo + altura da tabbar embaixo) pra os títulos sticky das telas grudarem no mesmo lugar de antes. É ELE quem rola, não o body. */ .app-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Sem chaining: o bounce interno não "vaza" pro body (que está travado). */ overscroll-behavior-y: contain; /* Respeita notch/status bar (iOS Capacitor) E tabbar inferior */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: var(--tabbar-altura-segura); } a { color: var(--cor-primaria); text-decoration: none; transition: color var(--transicao-rapida); } a:hover { color: var(--cor-primaria-clara); } a:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 3px; border-radius: var(--raio-xs); } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--fonte-hero); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } ::selection { background: oklch(72% 0.15 25 / 0.3); color: var(--cor-texto); } /* ──────────────────────────────────────────────────────────────────── Layout base ──────────────────────────────────────────────────────────────────── */ .conteudo { max-width: 460px; margin: 0 auto; padding: var(--esp-6) var(--esp-5); /* Preenche o .app-scroll (que já desconta tabbar + safe-area no padding). */ min-height: 100%; position: relative; } /* ── Fundo decorativo global (mesh aurora) ─────────────────────── */ body::before { content: ''; position: fixed; inset: 0; background: var(--grad-mesh); pointer-events: none; z-index: -1; opacity: 0.85; } /* ──────────────────────────────────────────────────────────────────── Tabbar fixa de 6 ícones (glassmorphism) ──────────────────────────────────────────────────────────────────── */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: grid; /* auto-flow: distribui N itens (6 do usuário, ou 7 quando admin) numa linha só — sem quebrar pra baixo (regra #7 preservada pro usuário). */ grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; height: var(--tabbar-altura-segura); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--cor-fundo-glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid oklch(100% 0 0 / 0.08); box-shadow: 0 -8px 32px oklch(0% 0 0 / 0.3); } .tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--esp-2) 2px; min-width: 0; color: var(--cor-texto-fraco); text-decoration: none; transition: color var(--transicao-rapida), transform var(--transicao-rapida); -webkit-tap-highlight-color: transparent; position: relative; } .tabbar__item:hover { color: var(--cor-texto-suave); } .tabbar__item:active { transform: scale(0.9); } .tabbar__item--ativo { color: var(--cor-primaria); } .tabbar__item--ativo::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 0 0 var(--raio-pill) var(--raio-pill); background: var(--grad-primario); box-shadow: 0 2px 8px oklch(72% 0.15 25 / 0.6); animation: tabbar-indicador 0.4s var(--easing-spring); } @keyframes tabbar-indicador { from { width: 0; opacity: 0; } to { width: 32px; opacity: 1; } } .tabbar__icone { font-size: 22px; line-height: 1; } .tabbar__label { font-family: var(--fonte-corpo); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ──────────────────────────────────────────────────────────────────── Hero (usado na tela de cadastro) ──────────────────────────────────────────────────────────────────── */ .hero { text-align: center; padding: var(--esp-8) 0 var(--esp-6); position: relative; } .hero__logo { width: 88px; height: 88px; margin: 0 auto var(--esp-5); border-radius: 28%; background: var(--grad-primario); display: grid; place-items: center; font-size: 44px; color: white; box-shadow: 0 16px 48px oklch(72% 0.15 25 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.3); position: relative; animation: logo-flutuar 4s ease-in-out infinite; } .hero__logo::before { content: ''; position: absolute; inset: -8px; border-radius: 30%; background: var(--grad-primario); opacity: 0.5; filter: blur(20px); z-index: -1; animation: logo-glow 3s ease-in-out infinite; } @keyframes logo-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes logo-glow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.08); } } .hero__titulo { font-family: var(--fonte-hero); font-size: clamp(28px, 7vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; background: var(--grad-hero-titulo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--esp-3); } .hero__titulo--coral { background: var(--grad-primario); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__subtitulo { color: var(--cor-texto-suave); font-size: 16px; line-height: 1.55; max-width: 320px; margin: 0 auto; } .hero__selo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: oklch(85% 0.12 80 / 0.15); border: 1px solid oklch(85% 0.12 80 / 0.35); color: var(--cor-acento-clara); font-size: 12px; font-weight: 600; border-radius: var(--raio-pill); margin-bottom: var(--esp-4); } .hero__selo::before { content: '✓'; font-size: 11px; color: var(--cor-acento); } /* ──────────────────────────────────────────────────────────────────── Formulários ──────────────────────────────────────────────────────────────────── */ .formulario { display: flex; flex-direction: column; gap: var(--esp-4); margin-top: var(--esp-2); } .campo { display: flex; flex-direction: column; gap: 6px; position: relative; } .campo__label { font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); letter-spacing: 0.01em; } .campo__obrigatorio { color: var(--cor-primaria); margin-left: 2px; } .campo__input { width: 100%; padding: 16px 18px; background: var(--cor-fundo-elevado); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-md); color: var(--cor-texto); font-size: 16px; font-family: var(--fonte-corpo); transition: border-color var(--transicao-rapida), background var(--transicao-rapida), box-shadow var(--transicao-rapida); } .campo__input::placeholder { color: var(--cor-texto-muito-fraco); } .campo__input--com-icone { padding-right: 52px; } /* Campo data: input texto com máscara + botão calendário + date picker oculto */ .campo-data { position: relative; display: block; } .campo-data__btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: var(--raio-sm); background: var(--cor-fundo-superficie); color: var(--cor-primaria); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background var(--transicao-rapida), transform var(--transicao-rapida); -webkit-tap-highlight-color: transparent; } .campo-data__btn:hover { background: color-mix(in oklch, var(--cor-fundo-superficie) 80%, var(--cor-primaria) 12%); } .campo-data__btn:active { transform: translateY(-50%) scale(0.92); } .campo-data__nativo { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0; margin: 0; border: 0; } .campo__input:focus { outline: none; border-color: var(--cor-primaria); background: color-mix(in oklch, var(--cor-fundo-elevado) 90%, var(--cor-primaria) 4%); box-shadow: var(--sombra-ring-coral); } .campo__input[aria-invalid="true"] { border-color: var(--cor-erro); animation: shake 0.3s var(--easing-padrao); } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .campo__ajuda { font-size: 12.5px; color: var(--cor-texto-fraco); margin-top: 2px; } .campo__erro { font-size: 13px; color: var(--cor-erro); font-weight: 500; margin-top: 2px; display: flex; align-items: center; gap: 4px; } .campo__erro::before { content: '⚠'; font-size: 12px; } .formulario__aviso { background: color-mix(in oklch, var(--cor-erro) 12%, transparent); border: 1px solid color-mix(in oklch, var(--cor-erro) 40%, transparent); color: oklch(85% 0.05 25); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); font-size: 14px; text-align: center; } .formulario__rodape { margin-top: var(--esp-3); text-align: center; font-size: 12.5px; color: var(--cor-texto-fraco); line-height: 1.6; } .formulario__rodape a { color: var(--cor-texto-suave); border-bottom: 1px solid currentColor; } /* ──────────────────────────────────────────────────────────────────── Botões ──────────────────────────────────────────────────────────────────── */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: 16px 28px; border: none; border-radius: var(--raio-pill); font-family: var(--fonte-corpo); font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; cursor: pointer; transition: transform var(--transicao-rapida), background var(--transicao-rapida), box-shadow var(--transicao-padrao); -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .botao:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .botao:active:not(:disabled) { transform: scale(0.97); } .botao--primario { background: var(--grad-botao); color: oklch(100% 0 0); box-shadow: var(--sombra-coral); } .botao--primario:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 40px oklch(72% 0.15 25 / 0.55); } .botao--primario:active:not(:disabled) { transform: translateY(0) scale(0.98); } .botao--primario::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, oklch(100% 0 0 / 0.1), transparent); transform: rotate(45deg) translateY(-100%); transition: transform 0.6s var(--easing-suave); } .botao--primario:hover::before { transform: rotate(45deg) translateY(100%); } .botao--secundario { background: var(--cor-fundo-elevado); color: var(--cor-texto); border: 1.5px solid var(--cor-borda); } .botao--secundario:hover:not(:disabled) { background: var(--cor-fundo-superficie); border-color: var(--cor-primaria); } .botao--bloco { width: 100%; } /* Spinner inline pro botão em loading */ .botao__spinner { width: 18px; height: 18px; border: 2.5px solid oklch(100% 0 0 / 0.3); border-top-color: oklch(100% 0 0); border-radius: 50%; animation: girar 0.7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ──────────────────────────────────────────────────────────────────── Cards de feature (linha de selos abaixo do hero) ──────────────────────────────────────────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); margin: var(--esp-6) 0; } .feature { text-align: center; padding: var(--esp-3) var(--esp-2); background: var(--grad-card); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-md); backdrop-filter: blur(8px); } .feature__icone { font-size: 24px; margin-bottom: var(--esp-2); display: block; } .feature__titulo { font-family: var(--fonte-hero); font-size: 12px; font-weight: 700; color: var(--cor-texto); letter-spacing: 0.01em; line-height: 1.3; } /* ──────────────────────────────────────────────────────────────────── Modal ──────────────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; width: 100%; height: 100%; background: oklch(0% 0 0 / 0.65); backdrop-filter: blur(12px); display: grid; place-items: center; border: none; padding: var(--esp-4); z-index: 200; animation: modal-aparecer 0.3s var(--easing-suave); } @keyframes modal-aparecer { from { opacity: 0; } to { opacity: 1; } } .modal__caixa { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-xl); padding: var(--esp-7); text-align: center; max-width: 360px; width: 100%; box-shadow: var(--sombra-lg); animation: modal-subir 0.4s var(--easing-spring); } @keyframes modal-subir { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal__icone { width: 64px; height: 64px; margin: 0 auto var(--esp-4); border-radius: 50%; background: var(--grad-primario); display: grid; place-items: center; font-size: 32px; box-shadow: var(--sombra-coral); } .modal__titulo { font-family: var(--fonte-hero); font-size: 22px; font-weight: 800; margin-bottom: var(--esp-3); letter-spacing: -0.01em; color: var(--cor-texto); /* escuro no claro, claro no escuro (era branco herdado) */ } .modal__texto { color: var(--cor-texto-suave); font-size: 15px; line-height: 1.6; margin-bottom: var(--esp-5); } /* ──────────────────────────────────────────────────────────────────── Cabeçalho de tela (Cruzados / Descobrir / etc) ──────────────────────────────────────────────────────────────────── */ .cab-tela { display: flex; align-items: center; flex-wrap: wrap; /* sub/extras quebram pra baixo em vez de espremer */ justify-content: space-between; gap: var(--esp-2) var(--esp-3); padding: var(--esp-2) 0 var(--esp-5); } /* Título ocupa o espaço da 1ª linha (ao lado do voltar) sem encolher a ponto de virar 1 letra por linha; subtítulo e qualquer

extra vão pra linha de baixo (flex-basis 100%). Corrige o "texto vertical" no header do quiz. */ .cab-tela > .cab-tela__titulo { flex: 1 1 auto; min-width: 0; } .cab-tela > .cab-tela__sub, .cab-tela > p { flex-basis: 100%; margin-top: 2px; } /* Botão voltar padrão — círculo coral com seta branca (mesma linguagem visual dos botões de ação). O comportamento (history.back + scroll preservado) vem do listener global em ui-extras.js, que pega qualquer .cab-tela__voltar. */ .cab-tela__voltar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--grad-primario); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none; border: none; cursor: pointer; box-shadow: var(--sombra-coral); -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease; } .cab-tela__voltar:active { transform: scale(0.9); } .cab-tela__lado { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cab-tela__saudacao { font-size: 13px; color: var(--cor-texto-fraco); font-weight: 500; } .cab-tela__titulo { font-family: var(--fonte-hero); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(78% 0.02 250) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Tema claro: o gradiente branco→cinza do título fica ILEGÍVEL (prateado) sobre fundo claro. Troca por cor de texto sólida (escura no claro). */ @media (prefers-color-scheme: light) { :root:not([data-tema="dark"]) .cab-tela__titulo { background: none; -webkit-text-fill-color: var(--cor-texto); color: var(--cor-texto); } } :root[data-tema="light"] .cab-tela__titulo { background: none; -webkit-text-fill-color: var(--cor-texto); color: var(--cor-texto); } .cab-tela__contador { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cor-acento-clara); margin-top: 4px; } .cab-tela__contador::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-acento); box-shadow: 0 0 8px var(--cor-acento); animation: pulso-acento 2s ease-in-out infinite; } @keyframes pulso-acento { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } .avatar-mini { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-primario); display: grid; place-items: center; color: white; font-family: var(--fonte-hero); font-weight: 800; font-size: 18px; flex-shrink: 0; box-shadow: var(--sombra-sm); border: 1.5px solid oklch(100% 0 0 / 0.1); } /* ──────────────────────────────────────────────────────────────────── Chips de filtro (Hoje / Ontem / Esta semana) LGPD-safe — sem filtros demográficos. ──────────────────────────────────────────────────────────────────── */ .chips-filtro { /* Linha ÚNICA (decisão Paulo 06/06/2026) — não quebra pra outra linha. Os labels foram encurtados ("Verificados") pra caber; scroll-x só de segurança em telas muito estreitas (não corta nada no uso normal). */ display: flex; flex-wrap: nowrap; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--esp-3); } .chips-filtro::-webkit-scrollbar { display: none; } .chip { padding: 8px 16px; background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda); border-radius: var(--raio-pill); font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); cursor: pointer; white-space: nowrap; transition: all var(--transicao-rapida); -webkit-tap-highlight-color: transparent; scroll-snap-align: start; flex-shrink: 0; } .chip:hover { color: var(--cor-texto); border-color: var(--cor-primaria); } .chip:active { transform: scale(0.96); } .chip--ativo { background: var(--grad-primario); color: white; border-color: transparent; box-shadow: var(--sombra-sm); } /* ──────────────────────────────────────────────────────────────────── Avatar com gradient + inicial (mock até ter fotos reais) ──────────────────────────────────────────────────────────────────── */ .avatar { width: 84px; height: 84px; border-radius: 22%; display: grid; place-items: center; color: white; font-family: var(--fonte-hero); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; flex-shrink: 0; position: relative; box-shadow: 0 6px 20px oklch(0% 0 0 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.25); overflow: hidden; } .avatar::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, oklch(100% 0 0 / 0.25), transparent 50%); pointer-events: none; } /* ──────────────────────────────────────────────────────────────────── Card de cruzamento (núcleo do produto) ──────────────────────────────────────────────────────────────────── */ .cruzados-lista { display: flex; flex-direction: column; gap: var(--esp-3); } .cruzado { display: flex; gap: var(--esp-4); padding: var(--esp-4); background: var(--grad-card); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-lg); transition: transform var(--transicao-padrao), border-color var(--transicao-padrao), box-shadow var(--transicao-padrao); cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } .cruzado::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.1), transparent); pointer-events: none; } .cruzado:hover { border-color: oklch(35% 0.06 250); transform: translateY(-2px); box-shadow: var(--sombra-md); } .cruzado:active { transform: translateY(0) scale(0.99); } .cruzado__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .cruzado__topo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; } .cruzado__nome { font-family: var(--fonte-hero); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--cor-texto); } .cruzado__idade { color: var(--cor-texto-fraco); font-weight: 500; } .selo-verificado { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: oklch(85% 0.12 80 / 0.18); border: 1px solid oklch(85% 0.12 80 / 0.4); color: var(--cor-acento-clara); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; border-radius: var(--raio-pill); text-transform: uppercase; } .selo-verificado::before { content: '✓'; font-size: 10px; font-weight: 900; } .cruzado__meta { display: flex; align-items: center; gap: var(--esp-3); font-size: 12.5px; color: var(--cor-texto-suave); font-weight: 500; } .cruzado__meta span { display: inline-flex; align-items: center; gap: 4px; } /* Data + hora absolutas (BRT) do cruzamento — complementa o tempo relativo */ .cruzado__quando { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--cor-texto-suave); opacity: 0.85; } /* Badge "Sugestão da cidade" — quando perfil vem via fallback */ .modo-cidade-badge { padding: 2px 8px; background: oklch(85% 0.12 80 / 0.15); border: 1px solid oklch(85% 0.12 80 / 0.35); color: var(--cor-acento-clara) !important; font-size: 10.5px; font-weight: 700; border-radius: var(--raio-pill); text-transform: uppercase; letter-spacing: 0.03em; } .cruzado__bio { color: var(--cor-texto-suave); font-size: 13.5px; line-height: 1.45; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cruzado__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-2); } .afinidade { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: color-mix(in oklch, var(--cor-primaria) 14%, transparent); border: 1px solid color-mix(in oklch, var(--cor-primaria) 40%, transparent); color: var(--cor-primaria-clara); font-size: 12px; font-weight: 700; border-radius: var(--raio-pill); letter-spacing: 0.01em; } .afinidade::before { content: '✨'; font-size: 11px; } .acoes-cruzado { display: flex; gap: var(--esp-3); } .acao-icone { width: 52px; height: 52px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer; font-size: 23px; transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida); -webkit-tap-highlight-color: transparent; } .acao-icone:active { transform: scale(0.88); } .acao-icone--like { background: var(--grad-primario); color: white; box-shadow: 0 4px 14px oklch(72% 0.15 25 / 0.4); } .acao-icone--like:hover { box-shadow: 0 6px 22px oklch(72% 0.15 25 / 0.55); } .acao-icone--pular { background: var(--cor-fundo-elevado); color: var(--cor-texto-fraco); border: 1px solid var(--cor-borda); } .acao-icone--pular:hover { color: var(--cor-texto-suave); border-color: var(--cor-borda); } /* ──────────────────────────────────────────────────────────────────── Empty state das telas ──────────────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: var(--esp-10) var(--esp-4); display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); } .empty-state__icone { width: 80px; height: 80px; border-radius: 28%; background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda); display: grid; place-items: center; font-size: 40px; opacity: 0.7; } .empty-state__titulo { font-family: var(--fonte-hero); font-size: 20px; font-weight: 800; } .empty-state__texto { color: var(--cor-texto-suave); font-size: 14.5px; max-width: 280px; line-height: 1.5; } /* ──────────────────────────────────────────────────────────────────── Placeholder (telas das abas em construção) ──────────────────────────────────────────────────────────────────── */ .placeholder { text-align: center; padding: var(--esp-12) var(--esp-4) var(--esp-8); display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); } .placeholder__icone { width: 96px; height: 96px; border-radius: 28%; background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda); display: grid; place-items: center; font-size: 48px; opacity: 0.9; box-shadow: var(--sombra-md); } .placeholder__titulo { font-family: var(--fonte-hero); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .placeholder__texto { color: var(--cor-texto-suave); font-size: 15px; max-width: 280px; line-height: 1.55; } /* ──────────────────────────────────────────────────────────────────── Reminder geo (banner topo discreto) ──────────────────────────────────────────────────────────────────── */ .reminder-geo { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px var(--esp-4); background: color-mix(in oklch, var(--cor-acento) 18%, var(--cor-fundo-elevado)); border-bottom: 1px solid color-mix(in oklch, var(--cor-acento) 35%, transparent); color: var(--cor-acento-clara); font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: reminder-slide-down 400ms var(--easing-spring); } .reminder-geo:active { background: color-mix(in oklch, var(--cor-acento) 25%, var(--cor-fundo-elevado)); } .reminder-geo__icone { font-size: 16px; flex-shrink: 0; } .reminder-geo__texto { flex: 1; line-height: 1.35; } .reminder-geo__fechar { background: none; border: none; color: var(--cor-texto-fraco); font-size: 22px; font-weight: 300; cursor: pointer; padding: 0 8px; line-height: 1; } @keyframes reminder-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ──────────────────────────────────────────────────────────────────── Acessibilidade ──────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero__logo, .hero__logo::before { animation: none; } } /* ──────────────────────────────────────────────────────────────────── Telas largas (refino só, sem ocultar nada) ──────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) { .conteudo { padding: var(--esp-8) var(--esp-6); max-width: 480px; } }