/* =================================================================== Fintec Control — Tema (limão claro / limão escuro) Os valores são triplets RGB para o Tailwind aplicar opacidade (ex.: bg-surface/70). Trocar de tema = só alternar a classe .dark no ; todas as cores semânticas seguem estas variáveis. =================================================================== */ :root{ --c-bg: 233 233 234; /* fundo da página #e9e9ea */ --c-surface: 255 255 255; /* cartões #ffffff */ --c-surface2: 243 243 245; /* superfícies sutis#f3f3f5 */ --c-text: 16 17 19; /* texto principal #101113 */ --c-muted: 138 140 146; /* texto secundário #8a8c92 */ --c-line: 231 231 234; /* bordas #e7e7ea */ --c-ink: 18 19 22; /* preto forte #121316 */ --c-onink: 255 255 255; /* texto sobre ink #ffffff */ --c-brand: 196 245 60; /* verde-limão #c4f53c */ --c-onbrand: 16 17 19; /* texto sobre limão#101113 */ --c-btn: 18 19 22; /* botão primário: preto no claro */ --c-onbtn: 255 255 255; } .dark{ --c-bg: 14 15 18; /* #0e0f12 */ --c-surface: 23 25 30; /* #17191e */ --c-surface2: 30 33 39; /* #1e2127 */ --c-text: 237 239 243; /* #edeff3 */ --c-muted: 154 157 166; /* #9a9da6 */ --c-line: 39 43 51; /* #272b33 */ --c-ink: 0 0 0; /* #000000 */ --c-onink: 255 255 255; --c-brand: 196 245 60; --c-onbrand: 16 17 19; --c-btn: 196 245 60; /* botão primário: limão no escuro */ --c-onbtn: 16 17 19; } :root{ color-scheme: light; } .dark{ color-scheme: dark; } html{ background:rgb(var(--c-bg)); } body{ font-family:'Inter', sans-serif; } /* Hero (cabeçalho do saldo): preto com um brilho limão no canto. No escuro vira uma superfície elevada com o mesmo brilho. */ .fintec-hero{ background: radial-gradient(120% 120% at 90% -10%, rgba(196,245,60,.18), transparent 45%), #121316; } .dark .fintec-hero{ background: radial-gradient(120% 120% at 90% -10%, rgba(196,245,60,.14), transparent 45%), #17191e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } /* Transição suave ao alternar tema (sem animar hover/foco). */ body, .fintec-hero, .bg-bg, .bg-surface, .bg-surface2, .bg-ink{ transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* ---- Novo layout do dashboard (estilo Pesse) ---- */ .no-scrollbar{ scrollbar-width:none; } .no-scrollbar::-webkit-scrollbar{ display:none; } .fc-cards{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 4px; } .fc-cards > *{ scroll-snap-align:center; flex:0 0 86%; } .fc-card{ position:relative; overflow:hidden; } .fc-card .fc-wm{ position:absolute; right:-10px; bottom:-22px; font-size:80px; font-weight:900; opacity:.12; letter-spacing:-.05em; pointer-events:none; line-height:1; } .fc-bar{ height:9px; border-radius:999px; background:rgb(var(--c-surface2)); overflow:hidden; } .fc-bar > i{ display:block; height:100%; border-radius:999px; } .fintec-hero-toggle{ } /* Migrado do