/* Grana — design system portado do Securo (tokens copiados 1:1 do index.css do fork). CSS artesanal, zero build. Tema via classe .dark no (dark é o padrão). */ /* ============ 1. Fonte (Geist variable, self-hosted — OFL 1.1 em fonts/OFL.txt) ============ */ @font-face { font-family: 'Geist'; src: url('/static/fonts/GeistVF.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============ 2. Tokens (Securo: :root light / .dark) ============ */ :root { --background: #F8F9FB; --foreground: #0F172A; --card: #FFFFFF; --popover: #FFFFFF; --primary: #6366F1; --primary-foreground: #FFFFFF; --secondary: #F1F5F9; --muted: #F1F5F9; --muted-foreground: #64748B; --accent: #EEF2FF; --accent-foreground: #4F46E5; --destructive: #F43F5E; --border: #E8ECF1; --input: #E8ECF1; --ring: #6366F1; --radius: 0.625rem; --sidebar: #FFFFFF; --sidebar-border: #E8ECF1; --sidebar-accent: #F1F5F9; --sidebar-muted: #64748B; --success: #059669; --warn: #D97706; --warn-strong: #F59E0B; --chart-1: #6366F1; --chart-2: #8B5CF6; --chart-3: #10B981; --chart-4: #F59E0B; --chart-5: #F43F5E; } .dark { --background: #0C0D12; --foreground: #F0F0F5; --card: #16171F; --popover: #16171F; --primary: #818CF8; --primary-foreground: #FFFFFF; --secondary: #252836; --muted: #252836; --muted-foreground: #8A8F9E; --accent: #1E1B4B; --accent-foreground: #A5B4FC; --destructive: #FB7185; --border: #2A2D3A; --input: #2A2D3A; --ring: #818CF8; --sidebar: #16171F; --sidebar-border: #2A2D3A; --sidebar-accent: #252836; --sidebar-muted: #8A8F9E; --success: #34D399; --warn: #FBBF24; } /* ============ 3. Base ============ */ * { box-sizing: border-box; border-color: var(--border); } html { color-scheme: light; } html.dark { color-scheme: dark; } html, body { margin: 0; padding: 0; } body { background: var(--background); color: var(--foreground); font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-size: 0.875rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; } h1, h2, h3 { letter-spacing: -0.035em; } a { color: var(--primary); text-decoration: none; } code { background: var(--secondary); padding: 1px 5px; border-radius: 6px; font-size: .9em; } .icon { flex-shrink: 0; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* toggle de tema: o par sol/lua é renderizado junto; o CSS decide qual aparece */ .only-dark { display: none; } .dark .only-dark { display: inline-flex; } .dark .only-light { display: none; } /* ============ 4. Shell: header mobile + sidebar + main ============ */ .mobile-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--sidebar); border-bottom: 1px solid var(--sidebar-border); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.025em; } .brand .icon { color: var(--primary); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--sidebar-muted); cursor: pointer; transition: background .15s, color .15s; } .icon-btn:hover { background: var(--sidebar-accent); color: var(--foreground); } .sidebar-overlay { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .5); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sidebar-overlay.open { opacity: 1; pointer-events: auto; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: calc(240px + env(safe-area-inset-left)); /* box-sizing border-box: sem o calc, o notch em landscape comeria os 240px internos */ display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--sidebar-border); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); transform: translateX(-100%); visibility: hidden; /* drawer fechado sai do tab order (transform sozinho não tira) */ transition: transform .2s ease, visibility .2s; } .sidebar.open { transform: translateX(0); visibility: visible; } body:has(.sidebar.open) { overflow: hidden; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; height: 64px; min-height: 64px; padding: 0 20px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; } .nav-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: color-mix(in srgb, var(--sidebar-muted) 70%, transparent); padding: 14px 12px 4px; } .nav-item { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; border-radius: var(--radius); padding: 8px 12px; color: var(--sidebar-muted); transition: background .15s, color .15s; } .nav-item:hover { background: var(--sidebar-accent); color: var(--foreground); } .nav-item.active { background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); border-left: 3px solid var(--primary); padding-left: 9px; /* compensa a borda: alinhamento idêntico ao item inativo */ } .sidebar-footer { border-top: 1px solid var(--sidebar-border); padding: 12px; } .user-block { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; } .user-block .user-name { flex: 1; font-size: .75rem; font-weight: 600; min-width: 0; } .avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-size: .75rem; font-weight: 600; } .main { min-height: 100dvh; } .container { max-width: 80rem; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left)); } @media (min-width: 640px) { .container { padding: 24px max(24px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(24px, env(safe-area-inset-left)); } } @media (min-width: 1024px) { .mobile-header { display: none; } .sidebar { transform: none; visibility: visible; } .sidebar-overlay { display: none; } .main { margin-left: calc(240px + env(safe-area-inset-left)); } } /* ============ 5. PageHeader ============ */ .page-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } @media (min-width: 640px) { .page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .page-eyebrow { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 2px; } .page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; margin: 0; } .page-meta { font-size: .75rem; color: var(--muted-foreground); margin: 6px 0 0; } .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .page-actions form { display: flex; gap: 8px; } .page-actions .input { width: auto; } /* ============ 6. Componentes ============ */ .card { background: var(--card); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: calc(var(--radius) + 4px); box-shadow: 0 1px 2px 0 rgb(0 0 0 / .03); padding: 16px 20px; } .card-flush { padding: 0; overflow: hidden; } .card h2 { font-size: .875rem; font-weight: 600; margin: 0 0 10px; } .card > p { margin: 6px 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--foreground); font: 500 .875rem 'Geist', 'Inter', system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; text-decoration: none; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); } .btn:has(> svg) { padding: 0 16px; } .btn-outline { border-color: var(--border); background: var(--background); } .btn-outline:hover { background: var(--accent); color: var(--accent-foreground); } .btn-ghost { color: var(--muted-foreground); } .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); } .btn-destructive { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 40%, transparent); } .btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); } /* dark: outline/ghost seguem neutros no hover, como no Securo (input/30 → input/50, accent/50) */ .dark .btn-outline { background: color-mix(in srgb, var(--input) 30%, transparent); } .dark .btn-outline:hover { background: color-mix(in srgb, var(--input) 50%, transparent); } .dark .btn-outline.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); } .dark .btn-ghost:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); } .btn-sm { height: 36px; padding: 0 16px; gap: 6px; } .btn-sm:has(> svg) { padding: 0 12px; } .btn-block { display: flex; width: 100%; } .btn:active { transform: scale(.98); } .field-label { display: block; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 6px; } .input { width: 100%; height: 36px; padding: 0 12px; background: transparent; color: var(--foreground); border: 1px solid var(--input); border-radius: 8px; font-size: 1rem; /* 16px no iPhone = sem zoom automático ao focar */ font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .dark .input { background: color-mix(in srgb, var(--input) 30%, transparent); } .input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 30%, transparent); } .input::placeholder { color: var(--muted-foreground); } /* 16px até 1024px: iPad em retrato também dá zoom automático em input menor que 16px */ @media (min-width: 1024px) { .input { font-size: .875rem; } } input[type="file"].input, textarea.input { height: auto; padding: 8px 12px; } textarea.input { resize: vertical; } .form-stack { display: flex; flex-direction: column; gap: 10px; } .form-row { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } } .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; border: 1px solid transparent; padding: 2px 8px; font-size: .75rem; font-weight: 500; width: fit-content; white-space: nowrap; } .badge-primary { background: var(--primary); color: var(--primary-foreground); } .badge-secondary { background: var(--secondary); color: var(--foreground); } .badge-outline { border-color: var(--border); color: var(--foreground); } .badge-amber { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .badge-blue { color: #2563EB; border-color: color-mix(in srgb, #2563EB 40%, transparent); } .dark .badge-blue { color: #60A5FA; border-color: color-mix(in srgb, #60A5FA 40%, transparent); } .badge-violet { color: #7C3AED; border-color: color-mix(in srgb, #7C3AED 40%, transparent); } .dark .badge-violet { color: #A78BFA; border-color: color-mix(in srgb, #A78BFA 40%, transparent); } .badge-emerald { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); } /* chips de responsável (receita das pills de Faturas do fork Securo) + abas do extrato */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .chip, .tab { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 12px; font-size: .75rem; font-weight: 500; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; text-decoration: none; } .chip:hover, .tab:hover { border-color: var(--primary); color: var(--foreground); } .chip.on, .tab.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .chip-none { border-style: dashed; } .chip-none.on { background: var(--muted-foreground); /* sólido: a 70% o contraste com o texto caía p/ ~2,7:1 no claro */ border-color: transparent; border-style: solid; color: var(--background); } .chip:active { transform: scale(.96); } .tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 16px; -webkit-overflow-scrolling: touch; /* 4px: anel de foco não é cortado pelo overflow */ } /* listas de linhas (extrato, fatura, pessoas) — card sem padding + rows com hover */ .rowlist { display: flex; flex-direction: column; } .row { padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background .15s; } .row:last-child { border-bottom: none; } .row:hover { background: color-mix(in srgb, var(--muted) 40%, transparent); } .row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .row-desc { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-meta { font-size: .75rem; color: var(--muted-foreground); margin: 0; } .row-meta .badge { vertical-align: middle; } .row-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; } .row-link .chevron { color: var(--muted-foreground); } .row.nocharge { opacity: .55; } .row-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .875rem; white-space: nowrap; } .amount-pos { color: var(--success); } .amount-neg { color: var(--destructive); } /* barra-resumo da fatura (bills.tsx do fork) */ .summary-bar { border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 50%, transparent); padding: 12px 16px; font-size: .875rem; display: flex; flex-direction: column; gap: 8px; } .summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; } .summary-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .summary-bar b { font-weight: 600; } .empty-state { padding: 64px 16px; text-align: center; color: var(--muted-foreground); font-size: .875rem; } .banner { border: 1px solid; border-radius: var(--radius); padding: 12px 16px; font-size: .875rem; margin: 0 0 16px; } .banner-error { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); } .banner-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); } /* ============ 7. Painel (home) ============ */ .hero { display: grid; grid-template-columns: 1fr; } .hero-main { padding: 20px; } .hero-value { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 2px 0 0; } .metric-row { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 18px; } .metric-label { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0 2px; } .metric-value { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; } .hero-side { border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 20px; text-align: center; color: inherit; transition: background .15s; } a.hero-side:hover { background: color-mix(in srgb, var(--muted) 40%, transparent); } @media (min-width: 1024px) { .hero { grid-template-columns: 2fr 1fr; } .hero-side { border-top: none; border-left: 1px solid var(--border); } } .cta-circle { width: 56px; height: 56px; border-radius: 999px; background: #D97706; color: #fff; /* amber-600: branco passa AA large-text; amber-500 ficava em 2,2:1 */ display: grid; place-items: center; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cta-label { font-size: .875rem; font-weight: 500; } .cta-hint { font-size: .875rem; font-weight: 600; color: var(--warn); } .cta-ok { color: var(--success); display: inline-flex; } .grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; } @media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } /* ============ 8. Login (painel-marca com gradiente + aurora do Securo) ============ */ .login-split { display: grid; grid-template-columns: 1fr; min-height: 100dvh; } .login-brand { display: none; position: relative; overflow: hidden; background: linear-gradient(150deg, #3F37C9 0%, #5B30C9 48%, #6D28D9 100%); color: #fff; } .login-brand::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(115% 90% at 78% 8%, transparent 42%, rgb(20 12 60 / .38) 100%); } @media (min-width: 1024px) { .login-split { grid-template-columns: 1fr 1fr; } .login-brand { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; } } .login-brand-word { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.25rem; z-index: 1; } .login-brand-word .logo-tile { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / .15); } .login-tagline { z-index: 1; } .login-tagline h2 { font-size: 2.6rem; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 12px; max-width: 22ch; } .login-tagline p { color: rgb(255 255 255 / .7); font-size: .9375rem; margin: 0; max-width: 44ch; } .login-watermark { position: absolute; right: -112px; bottom: -96px; color: rgb(255 255 255 / .06); transform: rotate(-8deg); pointer-events: none; } /* blobs com falloff radial e dimensões % do painel, como o securo-aurora do index.css */ .aurora { position: absolute; border-radius: 999px; filter: blur(72px); pointer-events: none; will-change: transform; } .aurora-1 { width: 62%; height: 62%; left: -12%; top: -10%; background: radial-gradient(circle at center, #818CF8 0%, transparent 70%); opacity: .55; animation: aurora-1 24s ease-in-out infinite; } .aurora-2 { width: 68%; height: 68%; right: -14%; top: 30%; background: radial-gradient(circle at center, #A78BFA 0%, transparent 70%); opacity: .5; animation: aurora-2 29s ease-in-out infinite; } .aurora-3 { width: 46%; height: 46%; left: 22%; top: 28%; background: radial-gradient(circle at center, #C4B5FD 0%, transparent 70%); opacity: .4; animation: aurora-3 33s ease-in-out infinite; } @keyframes aurora-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8%, 6%, 0) scale(1.12); } } @keyframes aurora-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7%, -5%, 0) scale(1.08); } } @keyframes aurora-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, -8%, 0) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .aurora { animation: none; } } .login-side { display: grid; place-items: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; padding: 24px; } .login-card .logo-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); margin-bottom: 14px; } .login-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; } .login-error { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); border-radius: 8px; padding: 10px 12px; font-size: .875rem; margin: 12px 0 0; } /* ============ 9. Helpers ============ */ .muted { color: var(--muted-foreground); } .tnum { font-variant-numeric: tabular-nums; } .text-xs { font-size: .75rem; } .inline { display: inline; margin: 0; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mb-4 { margin-bottom: 16px; }