/* * fluio-boost.css — Charcoal Dark + Green Accent * Deep neutral base. Green only on interactive elements and values. * Linked last in — wins the cascade. */ /* ── 1. Color system ── */ :root { /* Brand accent — vivid, used sparingly */ --green: #2fcf8e; --green-light: #45dfa0; --green-dim: rgba(47, 207, 142, .10); --green-glow: rgba(47, 207, 142, .18); /* Base — charcoal, no color tint */ --bg: #0c0d10; --surf: #13151a; --surf2: #1a1d24; --border:#252830; /* Text */ --cream: #edecea; --muted: #6b7280; --label: #9ba3af; /* Accent palette */ --tan: #d4b880; --amber: #e8973a; --blue: #4ba8d4; --red: #e05c44; --purple:#9b8fe8; --teal: #3dd8c8; } /* ── 2. Body ── */ body { background: var(--bg) !important; color: var(--cream) !important; -webkit-font-smoothing: antialiased; } /* Single subtle glow — top left, very faint */ body::before { background: radial-gradient(ellipse at 0% 0%, rgba(47,207,142,.05) 0%, transparent 60%) !important; } /* ── 3. Nav ── */ nav { background: rgba(12,13,16,.92) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; border-bottom-color: rgba(255,255,255,.06) !important; } .nav-logo span, .logo span { color: var(--green) !important; } /* ── 4. Dashboard sidebar ── */ .sidebar { background: var(--bg) !important; border-right: 1px solid rgba(255,255,255,.06) !important; border-right-color: rgba(255,255,255,.06) !important; } .sidebar-section-label { color: rgba(255,255,255,.2) !important; } .nav-badge { background: rgba(47,207,142,.1) !important; color: var(--green) !important; border-color: rgba(47,207,142,.18) !important; } .nav-item { color: var(--muted) !important; } .nav-item:hover { background: rgba(255,255,255,.04) !important; color: var(--cream) !important; } .nav-item.active { background: rgba(47,207,142,.08) !important; color: var(--green) !important; } .plan-dot { background: var(--green) !important; } /* ── 5. Tool grid cards ── */ .tg-card { background: var(--surf) !important; border: 1px solid rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.06) !important; transition: all .18s cubic-bezier(.4,0,.2,1) !important; } .tg-card:hover { border-color: rgba(47,207,142,.3) !important; background: rgba(47,207,142,.03) !important; box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(47,207,142,.1) !important; transform: translateY(-2px) !important; } .tg-card.tg-new { border-color: rgba(255,255,255,.09) !important; } .tg-name { color: var(--cream) !important; } .tg-desc { color: var(--muted) !important; } .tg-cta { color: var(--green) !important; font-weight: 700; } /* Colored top stripe */ .tg-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 16px 16px 0 0; } .tg-card:nth-child(1)::after { background: var(--green); } .tg-card:nth-child(2)::after { background: var(--amber); } .tg-card:nth-child(3)::after { background: var(--blue); } .tg-card:nth-child(4)::after { background: var(--red); } .tg-card:nth-child(5)::after { background: var(--purple); } .tg-card:nth-child(6)::after { background: var(--teal); } .tg-card:nth-child(7)::after { background: var(--amber); } .tg-card:nth-child(8)::after { background: var(--blue); } .tg-card:nth-child(9)::after { background: var(--purple); } .tg-card.tg-coming::after { background: rgba(255,255,255,.1); } /* ── 6. Score widget ── */ .score-widget { background: var(--surf) !important; border-color: rgba(255,255,255,.07) !important; } .sw-cta { color: var(--green) !important; } /* ── 7. Pro banner ── */ .pro-banner { background: var(--surf) !important; border-color: rgba(255,255,255,.07) !important; } .pb-eyebrow { color: var(--green) !important; } .pb-feat::before { color: var(--green) !important; } .pb-btn { background: rgba(47,207,142,.1) !important; border-color: rgba(47,207,142,.22) !important; color: var(--green) !important; } .pb-btn:hover { background: rgba(47,207,142,.18) !important; } /* ── 8. Express mode ── */ .express-result.positive { border-color: rgba(47,207,142,.4) !important; } .ex-field:focus-within { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(47,207,142,.07) !important; } .ex-btn-detail { background: rgba(47,207,142,.08) !important; border-color: rgba(47,207,142,.2) !important; color: var(--green) !important; } .er-amount.pos { color: var(--green) !important; } /* ── 9. Form inputs ── */ input:focus, select:focus, textarea:focus { border-color: rgba(47,207,142,.5) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(47,207,142,.07) !important; } /* ── 10. Buttons ── */ .btn-primary, button.btn-primary { background: var(--green) !important; color: #050e08 !important; font-weight: 800 !important; } .btn-primary:hover { background: var(--green-light) !important; box-shadow: 0 4px 16px rgba(47,207,142,.22) !important; } .calc-btn { background: var(--green) !important; color: #050e08 !important; font-weight: 800 !important; box-shadow: 0 2px 10px rgba(47,207,142,.18) !important; } .calc-btn:hover { background: var(--green-light) !important; } /* ── 11. General cards ── */ .calc-card, .panel, .rcard, .tools-card, .breakdown-card, .insight-card, .result-cta, .score-ring-wrap { background: var(--surf) !important; border-color: rgba(255,255,255,.07) !important; } /* ── 12. Result metrics ── */ .r-val.pos, .stat-value, .sw-score { color: var(--green) !important; } /* ── 13. Score page ── */ .opt:hover { border-color: rgba(47,207,142,.35) !important; background: rgba(47,207,142,.04) !important; } .opt.selected { border-color: var(--green) !important; background: rgba(47,207,142,.07) !important; } .opt.selected .opt-letter { background: var(--green) !important; border-color: var(--green) !important; color: #050e08 !important; } .btn-next { background: var(--green) !important; color: #050e08 !important; font-weight: 800 !important; box-shadow: 0 2px 10px rgba(47,207,142,.18) !important; } .btn-next:hover:not(:disabled) { background: var(--green-light) !important; transform: translateY(-1px) !important; } .step-dot.done { background: var(--green) !important; } .step-dot.active { background: var(--green) !important; box-shadow: 0 0 8px rgba(47,207,142,.4) !important; } .gate-btn, .gate-btn:hover { background: var(--green) !important; color: #050e08 !important; font-weight: 800 !important; } /* ── 14. Precios ── */ .mtab.active.t-hora { background: rgba(47,207,142,.12) !important; color: var(--green) !important; } .mtab.active.t-proyecto { background: rgba(232,151,58,.1) !important; color: var(--amber) !important; } .mtab.active.t-materiales{ background: rgba(75,168,212,.1) !important; color: var(--blue) !important; } .mtab.active.t-mercado { background: rgba(155,143,232,.1) !important; color: var(--purple) !important; } .band-v.bv-min { color: var(--red) !important; } .band-v.bv-rec { color: var(--amber) !important; } .band-v.bv-max { color: var(--green) !important; } /* ── 15. Deudas ── */ .freedom-banner { border-color: rgba(47,207,142,.2) !important; } /* ── 16. Section dividers ── */ .section-divider::before, .section-divider::after { background: rgba(255,255,255,.07) !important; } /* ── 17. Topbar ── */ .topbar { background: var(--bg) !important; border-bottom-color: rgba(255,255,255,.06) !important; } .topbar-btn { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: var(--muted) !important; } .topbar-btn:hover { background: rgba(47,207,142,.08) !important; border-color: rgba(47,207,142,.2) !important; color: var(--green) !important; } /* ── 18. Unified footer ── */ .fluio-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; padding: 12px 32px; background: rgba(12,13,16,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fluio-footer .foot-logo { font-family: 'DM Serif Display', serif; font-size: .82rem; color: var(--cream); text-decoration: none; white-space: nowrap; } .fluio-footer .foot-logo span { color: var(--green) !important; } .fluio-footer .foot-txt { font-size: .58rem; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: .04em; line-height: 1.5; text-align: right; } /* Compensate for fixed footer height (~52px) */ body:has(.fluio-footer) { padding-bottom: 56px; } @media(max-width:520px) { .fluio-footer { padding: 10px 18px; } .fluio-footer .foot-txt { display: none; } } /* ── 19. Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); } /* ── 20. Selection ── */ ::selection { background: rgba(47,207,142,.2); color: var(--cream); } /* ── 21. Tool pages — card overrides ── */ .goal-form, .card, .result-card, .result-hero, .igv-result, .day-card, .sc-card, .whatif-card, .s4-box, .stats-row .stat-box, .regime-card, .verdict, .balance-bar-wrap, .summary-bar .sb-box { background: var(--surf) !important; border-color: rgba(255,255,255,.07) !important; } /* Regime card selected state — must come after the reset above */ .regime-card.active { border-color: var(--purple) !important; background: rgba(155,143,232,.1) !important; box-shadow: 0 0 0 1px rgba(155,143,232,.25) !important; } .regime-card:hover:not(.active) { border-color: rgba(155,143,232,.3) !important; background: rgba(155,143,232,.04) !important; } /* Form wrap containers */ .f-wrap, .f-input-wrap { background: var(--surf2) !important; border-color: rgba(255,255,255,.08) !important; } .f-wrap:focus-within, .f-input-wrap:focus-within { border-color: rgba(47,207,142,.5) !important; box-shadow: 0 0 0 3px rgba(47,207,142,.07) !important; } .f-sign { background: rgba(255,255,255,.03) !important; border-right-color: rgba(255,255,255,.07) !important; } /* Sunat box */ .sunat-box { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; } /* Toggle buttons */ .toggle-group { border-color: rgba(255,255,255,.08) !important; } .toggle-opt.active { background: rgba(255,255,255,.06) !important; color: var(--cream) !important; } /* Verdicts */ .verdict.ok { background: rgba(47,207,142,.06) !important; border-color: rgba(47,207,142,.18) !important; } .verdict.warn { background: rgba(232,151,58,.06) !important; border-color: rgba(232,151,58,.18) !important; } .verdict.bad { background: rgba(224,92,68,.06) !important; border-color: rgba(224,92,68,.18) !important; } /* Alert boxes */ .alert-box.good { background: rgba(47,207,142,.05) !important; border-color: rgba(47,207,142,.18) !important; } .alert-box.neutral { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; } .alert-box.danger { background: rgba(224,92,68,.06) !important; border-color: rgba(224,92,68,.16) !important; } /* Day cards */ .day-card.has-entries { border-color: rgba(47,207,142,.22) !important; } .day-dot { background: rgba(255,255,255,.12) !important; } .day-card.has-entries .day-dot { background: var(--green) !important; } /* Entry buttons */ .entry-type.income { background: rgba(47,207,142,.1) !important; border-color: rgba(47,207,142,.22) !important; } .entry-type.expense { background: rgba(224,92,68,.08) !important; border-color: rgba(224,92,68,.18) !important; } .add-income-btn { background: rgba(47,207,142,.07) !important; border-color: rgba(47,207,142,.18) !important; } .add-expense-btn { background: rgba(224,92,68,.06) !important; border-color: rgba(224,92,68,.16) !important; } /* Scenario cards */ .sc-card:hover, .sc-card.active { border-color: var(--blue) !important; background: rgba(75,168,212,.05) !important; } /* Pro gate */ .pro-card { background: var(--surf) !important; border-color: rgba(255,255,255,.07) !important; } .pro-eyebrow { color: var(--green) !important; } .pro-feat::before { color: var(--green) !important; } .pro-btn { background: rgba(47,207,142,.1) !important; border-color: rgba(47,207,142,.22) !important; color: var(--green) !important; } .pro-btn:hover { background: rgba(47,207,142,.18) !important; } /* Share buttons */ .share-wa { background: rgba(37,211,102,.08) !important; border-color: rgba(37,211,102,.2) !important; } .share-copy { background: rgba(47,207,142,.08) !important; border-color: rgba(47,207,142,.2) !important; color: var(--green) !important; } /* Nav badge new */ .nav-badge-new { background: rgba(47,207,142,.1) !important; border-color: rgba(47,207,142,.2) !important; color: var(--green) !important; } /* Progress tracks */ .bb-track, .prog-track { background: var(--surf2) !important; } input[type=range] { background: rgba(255,255,255,.1) !important; } /* Emoji picker */ .emoji-btn { border-color: rgba(255,255,255,.08) !important; background: var(--surf2) !important; } .emoji-btn.active { border-color: var(--green) !important; background: rgba(47,207,142,.08) !important; }