/* ============================================================================= Pasaka — Design System ----------------------------------------------------------------------------- */ :root { /* Typography — one face. Nunito for body + display. Fredoka was dropped: two rounded-friendly fonts competed instead of complemented, and a single subset face saves ~80–120 KB on first paint (matters for the "jalan di antrian warung" PWA promise). */ --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: "Nunito", system-ui, sans-serif; --font-arcade: var(--font-display); /* Palette — deliberate, calm, Indonesia-rooted. Primary is terracotta (was indigo). Indigo #6366f1 is the default SaaS color of the last 5 years; terracotta carries the "pusaka / heritage" feel of the brand name without changing a single icon. */ --bt-bg: #f6f8fb; --bt-surface: #ffffff; --bt-surface-alt: #f1f4f9; --bt-border: #e6eaf2; --bt-border-strong:#d3d9e6; --bt-ink: #0f1729; /* Muted text — used for eyebrows, founder microcopy, small captions. The previous #5b6478 was ~5:1 on white, borderline for <14px text. #475569 hits 6.6:1 so the small surfaces stay readable per WCAG 2.1 AA. Dark mode lifts to its own value below — no change needed there. */ --bt-ink-muted: #475569; --bt-ink-soft: #8a93a6; --bt-primary: #ea580c; --bt-primary-700: #c2410c; --bt-primary-900: #7c2d12; --bt-primary-100: #fed7aa; --bt-primary-50: #fff7ed; /* Text-color companion: same as primary-700 in light mode (dark terracotta on light tints), but lifts to a lighter terracotta in dark mode so it stays legible on the now-dark tint backgrounds. Use this whenever `--bt-primary-700` is being applied as a text color, not a background. */ --bt-primary-ink: #c2410c; --bt-success: #047857; --bt-success-100: #d1fae5; --bt-success-700: #065f46; --bt-warning: #b45309; --bt-warning-100: #fef3c7; --bt-warning-700: #92400e; --bt-danger: #b91c1c; --bt-danger-500: #ef4444; --bt-danger-100: #fee2e2; --bt-danger-700: #991b1b; /* Secondary accent — kept as a soft sand / clay tone for low-emphasis surfaces (was the previous accent slot). */ --bt-accent: #d97757; --bt-accent-100: #fbe4d6; --bt-accent-50: #fdf2eb; --bt-accent-700: #a14e2f; /* Category swatches — restructured around semantic intent. Red is now reserved exclusively for the "overspent" state; "bills" is hidden from the daily picker entirely (recurring outflows live in Plan), so its swatch only shows on historical rows. */ --cat-food: #ea580c; /* warm orange */ --cat-transport: #92400e; /* clay */ --cat-shopping: #be185d; /* rose */ --cat-bills: #6b7280; /* slate — legacy display only */ --cat-entertainment: #6d28d9; /* lavender */ --cat-health: #4d7c0f; /* sage — not red */ --cat-other: #57534e; /* stone */ /* Geometry */ --bt-radius-sm: 8px; --bt-radius: 14px; --bt-radius-lg: 20px; --bt-radius-pill: 999px; --bt-shadow-sm: 0 1px 2px rgba(15,23,41,0.05), 0 1px 3px rgba(15,23,41,0.04); --bt-shadow: 0 4px 12px -2px rgba(15,23,41,0.06), 0 2px 6px -1px rgba(15,23,41,0.04); --bt-shadow-lg: 0 14px 32px -10px rgba(15,23,41,0.18), 0 6px 14px -4px rgba(15,23,41,0.08); --bt-ring: 0 0 0 3px rgba(234,88,12,0.18); } /* ────────────────────────────────────────────────────────────────────── Dark mode — finance apps get checked at night. Triggered by `data-theme="dark"` on , set by the inline head script before render based on (a) stored user choice or (b) the OS `prefers-color-scheme` preference. The navbar's theme toggle persists the user's pick to localStorage; matchMedia changes only apply when the user hasn't opted out of auto. Layout: a single rule for design-token + Bootstrap-variable overrides, then a flat list of selectors scoped under [data-theme="dark"] so they only fire when the attribute is set. No media query — JS owns OS pref. ────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bt-bg: #0b1220; --bt-surface: #131a2c; --bt-surface-alt: #1a2238; --bt-border: #232c44; --bt-border-strong:#2d3754; --bt-ink: #f1f5f9; --bt-ink-muted: #94a3b8; --bt-ink-soft: #64748b; --bt-primary-50: #2a1808; --bt-primary-100: #3a2110; /* Lifted terracotta for text — see --bt-primary-ink rationale in :root. */ --bt-primary-ink: #fdba74; /* Bootstrap 5 component variables — overriding here cascades into every .card, .modal, .form-control, .btn-close, .dropdown-menu, .alert, .table, etc. without touching their per-component CSS. */ --bs-body-bg: #0b1220; --bs-body-color: #f1f5f9; /* Bootstrap utilities like .text-body, .text-secondary, .text-emphasis resolve to `rgba(var(--bs-*-color-rgb), opacity)` — they read the RGB triplet, not the hex. Without these overrides those utilities fall back to Bootstrap's light-mode dark grays and render near-invisibly on the dark surfaces. */ --bs-body-color-rgb: 241, 245, 249; --bs-secondary-color: #94a3b8; --bs-secondary-color-rgb: 148, 163, 184; --bs-tertiary-color: #64748b; --bs-tertiary-color-rgb: 100, 116, 139; --bs-tertiary-bg: #1a2238; --bs-border-color: #232c44; --bs-border-color-translucent: rgba(255,255,255,0.08); --bs-emphasis-color: #f1f5f9; --bs-emphasis-color-rgb: 241, 245, 249; --bs-link-color: #fb923c; --bs-link-hover-color: #fdba74; --bs-card-bg: #131a2c; --bs-card-color: #f1f5f9; --bs-card-border-color: #232c44; --bs-modal-bg: #131a2c; --bs-modal-color: #f1f5f9; --bs-modal-border-color:#232c44; --bs-modal-header-border-color: #232c44; --bs-modal-footer-border-color: #232c44; --bs-dropdown-bg: #131a2c; --bs-dropdown-color: #f1f5f9; --bs-dropdown-border-color: #232c44; --bs-dropdown-link-color: #f1f5f9; --bs-dropdown-link-hover-bg: #1a2238; --bs-dropdown-link-hover-color: #fff; --bs-form-control-bg: #131a2c; --bs-form-control-disabled-bg: #1a2238; --bs-form-select-bg: #131a2c; --bs-table-bg: transparent; --bs-table-color: #f1f5f9; --bs-table-border-color:#232c44; --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.05); } /* Bootstrap text/bg utilities — Bootstrap 5.3 binds these to `data-bs-theme` but this project uses `data-theme`, so the native dark-mode variants never fire. Force the dark colors explicitly. */ [data-theme="dark"] .text-body { color: #f1f5f9 !important; } [data-theme="dark"] .text-body-secondary { color: #94a3b8 !important; } [data-theme="dark"] .text-body-tertiary { color: #64748b !important; } [data-theme="dark"] .text-body-emphasis { color: #f1f5f9 !important; } [data-theme="dark"] .bg-body-secondary { background-color: #1a2238 !important; } [data-theme="dark"] .bg-body-tertiary { background-color: #232c44 !important; } /* Form fields: Bootstrap pins color but not bg in some places — force. */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bs-form-control-bg); color: var(--bt-ink); border-color: var(--bt-border); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bs-form-control-bg); color: var(--bt-ink); border-color: var(--bt-primary); } [data-theme="dark"] .form-control::placeholder { color: var(--bt-ink-soft); } [data-theme="dark"] .form-control:disabled { background-color: var(--bt-surface-alt); color: var(--bt-ink-soft); } /* Bootstrap's .btn-close uses a black SVG mask. Invert it. */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* `.alert-*` variants ship with light bg / dark text; remap. */ [data-theme="dark"] .alert-light, [data-theme="dark"] .alert-info { background-color: var(--bt-surface-alt); color: var(--bt-ink); border-color: var(--bt-border); } [data-theme="dark"] .alert-success { background-color: rgba(4,120,87,0.18); color: #6ee7b7; border-color: rgba(4,120,87,0.35); } [data-theme="dark"] .alert-warning { background-color: rgba(180,83,9,0.18); color: #fbbf24; border-color: rgba(180,83,9,0.35); } [data-theme="dark"] .alert-danger { background-color: rgba(185,28,28,0.18); color: #fca5a5; border-color: rgba(185,28,28,0.35); } /* Hardcoded light fills (grep'd) remapped to surface vars. */ [data-theme="dark"] .bt-navbar, [data-theme="dark"] .month-pager-select, [data-theme="dark"] .modal-content, [data-theme="dark"] .toast, [data-theme="dark"] .dropdown-menu { background-color: var(--bt-surface); color: var(--bt-ink); } /* Category badge / expense-icon tints — the light palette uses near-white tinted backgrounds (#fff7ed etc.) which become bright bricks on a dark page. Single subtle surface, keep the text accent. */ [data-theme="dark"] .expense-icon, [data-theme="dark"] .cat-badge { background: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .cat-pill { background: transparent; border-color: var(--bt-border); } [data-theme="dark"] .cat-pill:hover { background: var(--bt-surface-alt); } /* Lift success/danger text for WCAG on dark surfaces. */ [data-theme="dark"] .text-success, [data-theme="dark"] .day-saldo.text-success, [data-theme="dark"] .day-budget.text-success { color: #6ee7b7 !important; } [data-theme="dark"] .text-danger, [data-theme="dark"] .day-saldo.text-danger, [data-theme="dark"] .day-budget.text-danger { color: #fca5a5 !important; } /* --bt-danger-700 (#991b1b) is tuned for white surfaces; on the navy dark-mode bg it fails AA. Lift to the same red used by .text-danger. */ [data-theme="dark"] .spent-amount, [data-theme="dark"] .daily-card-mobile-spent { color: #fca5a5; } [data-theme="dark"] .text-muted-soft { color: var(--bt-ink-muted) !important; } /* calc-result gradient: --bt-accent-100 (#fbe4d6) isn't dark-remapped, so the card lands brown→cream and the subtitle disappears in the warm end. Pin both stops to dark browns and lift the subtitle to a warm light tone. */ [data-theme="dark"] .calc-result { background: linear-gradient(135deg, var(--bt-primary-50) 0%, var(--bt-primary-100) 100%); } [data-theme="dark"] .calc-result-sub { color: rgba(255,255,255,0.78); } /* Support link (donate/buy-coffee) — pink is its semantic. Lift the hue in dark mode so it stays legible on the near-black surface. */ [data-theme="dark"] .bt-support-link { color: #f9a8d4; } [data-theme="dark"] .bt-support-link:hover { color: #fbcfe8; background: rgba(244,114,182,0.12); } [data-theme="dark"] .bt-support-link.active { color: #f9a8d4; background: rgba(244,114,182,0.12); } /* Hero gradient stays terracotta — it's branded surface. Overspent gets a darker base so it doesn't glow against near-black. */ [data-theme="dark"] .hero-card.hero-overspent { background: linear-gradient(135deg, var(--bt-primary-900) 0%, #9a1f0e 55%, #6b1f08 100%); } [data-theme="dark"] .hero-card-bare, [data-theme="dark"] .first-time-hero { color: var(--bt-ink); } /* Donation / welcome-back banners — pin to surface-alt. */ [data-theme="dark"] .welcome-back-banner, [data-theme="dark"] .donation-prompt { background-color: var(--bt-surface-alt); border-color: var(--bt-border-strong) !important; color: var(--bt-ink); } /* Plan + setup surfaces. */ [data-theme="dark"] .plan-tile, [data-theme="dark"] .setup-modal-headline { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border); } /* Coba preview frame, pricing card, landing surfaces. */ [data-theme="dark"] .coba-preview-frame, [data-theme="dark"] .coba-result, [data-theme="dark"] .landing-pricing-card, [data-theme="dark"] .landing-feature, [data-theme="dark"] .landing-mock, [data-theme="dark"] .landing-quote-card, [data-theme="dark"] .landing-principle-card { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border); } [data-theme="dark"] .landing-principle-why { background: rgba(234,88,12,0.14); color: #fdba74; } [data-theme="dark"] .landing-principle-why strong { color: #fed7aa; } /* Landing feature icons — lift the tint + text in dark mode so they don't render dark-on-dark (primary variant) or jar as bright bricks on the dark feature card (warning / success variants). Same pattern as the dark-mode alert overrides. */ [data-theme="dark"] .landing-feature-icon--primary { background: rgba(234,88,12,0.18); color: #fdba74; } [data-theme="dark"] .landing-feature-icon--warning { background: rgba(180,83,9,0.18); color: #fbbf24; } [data-theme="dark"] .landing-feature-icon--success { background: rgba(4,120,87,0.18); color: #6ee7b7; } /* Landing trifecta + mock savestate — `--bt-success-700` (#065f46) on the dark page reads at ~2.4:1, well below AA. Lift the green in dark mode the same way `[data-theme="dark"] .text-success` does. */ [data-theme="dark"] .landing-trust-trifecta li { color: #6ee7b7; } [data-theme="dark"] .landing-mock-savestate { background: rgba(4,120,87,0.18); color: #6ee7b7; } /* Founder card stays a warm pastel surface in both themes, so the buttons inside it must keep their light-mode styling — otherwise the dark-mode `.btn-outline-secondary` flips to a dark-on-pastel chip. */ [data-theme="dark"] .landing-founder-links .btn-outline-secondary { background: #ffffff; color: #5b6478; border-color: #d3d9e6; } [data-theme="dark"] .landing-founder-links .btn-outline-secondary:hover { background: #f1f4f9; color: #0f1729; border-color: #c7ced9; } [data-theme="dark"] .coba-preview-tag { background: var(--bt-surface-alt); border-color: var(--bt-border-strong); color: var(--bt-ink-muted); } /* Week strip + mobile day cards. */ [data-theme="dark"] .week-pill, [data-theme="dark"] .daily-card-mobile { background: var(--bt-surface); border-color: var(--bt-border); color: var(--bt-ink); } [data-theme="dark"] .daily-card-mobile.is-today { background: rgba(234,88,12,0.12); border-color: var(--bt-primary); } /* PWA install nudge. */ [data-theme="dark"] .pwa-install-nudge { background: linear-gradient(135deg, var(--bt-surface) 0%, var(--bt-surface-alt) 100%); border-color: var(--bt-border-strong); color: var(--bt-ink); } /* Onboarding shell. */ [data-theme="dark"] .onboarding-shell { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border); } [data-theme="dark"] .onboarding-amount-input { background: var(--bt-surface-alt); border-color: var(--bt-border); } [data-theme="dark"] .onboarding-currency { color: var(--bt-ink-muted); } /* Settings-page danger receipt + coachmark. */ [data-theme="dark"] .settings-danger-receipt { background: var(--bt-surface-alt); color: var(--bt-ink-muted); } [data-theme="dark"] .settings-danger-receipt strong { color: var(--bt-ink); } [data-theme="dark"] .coachmark-card { background: var(--bt-surface); color: var(--bt-ink); } /* ---------------------------------------------------------------------------- Base ---------------------------------------------------------------------------- */ html, body { height: 100%; } body { background: var(--bt-bg); color: var(--bt-ink); font-family: var(--font-body); letter-spacing: -0.005em; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display headings — single-face system, heavier weight does the display work. */ .auth-marketing h2, h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } main.container { max-width: 1100px; } h1, h2, h3, h4, h5 { letter-spacing: -0.02em; color: var(--bt-ink); } a { color: var(--bt-primary); text-decoration: none; } a:hover { color: var(--bt-primary-ink); text-decoration: underline; } ::selection { background: var(--bt-primary-100); color: var(--bt-primary-ink); } /* ---------------------------------------------------------------------------- Navigation ---------------------------------------------------------------------------- */ .bt-navbar { background: var(--bt-surface); border-bottom: 1px solid var(--bt-border); padding: 0.65rem 0; margin-bottom: 2rem; position: sticky; top: 0; z-index: 1020; backdrop-filter: saturate(180%) blur(8px); } .bt-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--bt-ink) !important; text-decoration: none; letter-spacing: 0; } .bt-brand:hover { text-decoration: none; color: var(--bt-ink) !important; } .bt-brand-mark { display: inline-flex; align-items: center; justify-content: center; } .bt-nav { display: flex; gap: 0.25rem; align-items: center; } .bt-nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: var(--bt-radius-sm); color: var(--bt-ink-muted); font-weight: 500; font-size: 0.92rem; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .bt-nav-link:hover { background: var(--bt-surface-alt); color: var(--bt-ink); text-decoration: none; } .bt-nav-link.active { background: var(--bt-primary-50); color: var(--bt-primary-ink); } .bt-support-link { color: #be185d; } .bt-support-link:hover { color: #9f1239; background: #fdf2f8; } .bt-support-link.active { background: #fdf2f8; color: #be185d; } .bt-nav-icon { width: 18px; height: 18px; flex-shrink: 0; } .bt-lang-select { height: 36px; border: 1px solid var(--bt-border); background: var(--bt-surface); border-radius: var(--bt-radius-sm); font-size: 0.85rem; color: var(--bt-ink-muted); padding: 0 0.6rem; } .bt-lang-select:focus { outline: none; border-color: var(--bt-primary); box-shadow: var(--bt-ring); } .bt-user-btn { display: inline-flex; align-items: center; gap: 0.45rem; height: 36px; padding: 0 0.85rem; background: var(--bt-surface); border: 1px solid var(--bt-border); color: var(--bt-ink); border-radius: var(--bt-radius-sm); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .bt-user-btn:hover { background: var(--bt-surface-alt); border-color: var(--bt-border-strong); } .bt-user-btn::after { display: none; } .bt-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--bt-primary), var(--bt-primary-700)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .bt-dropdown-menu { border: 1px solid var(--bt-border); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow-lg); padding: 0.5rem; min-width: 220px; } .bt-dropdown-menu .dropdown-item { border-radius: var(--bt-radius-sm); padding: 0.5rem 0.75rem; font-size: 0.9rem; } .bt-dropdown-menu .dropdown-item:hover { background: var(--bt-surface-alt); color: var(--bt-ink); } /* ---------------------------------------------------------------------------- Buttons ---------------------------------------------------------------------------- */ .btn { border-radius: var(--bt-radius-sm); font-weight: 500; letter-spacing: -0.005em; transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .btn:focus-visible { box-shadow: var(--bt-ring); outline: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--bt-primary); border-color: var(--bt-primary); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(15,23,41,0.08); } .btn-primary:hover { background: var(--bt-primary-700); border-color: var(--bt-primary-ink); } .btn-primary:focus, .btn-primary:active { background: var(--bt-primary-700) !important; border-color: var(--bt-primary-ink) !important; } .btn-outline-primary { border-color: var(--bt-border-strong); color: var(--bt-primary); background: var(--bt-surface); } .btn-outline-primary:hover { background: var(--bt-primary-50); color: var(--bt-primary-ink); border-color: var(--bt-primary); } .btn-outline-secondary { border-color: var(--bt-border); color: var(--bt-ink-muted); background: var(--bt-surface); } .btn-outline-secondary:hover { background: var(--bt-surface-alt); color: var(--bt-ink); border-color: var(--bt-border-strong); } .btn-outline-danger { border-color: var(--bt-border); color: var(--bt-danger); background: var(--bt-surface); } .btn-outline-danger:hover { background: var(--bt-danger-100); color: var(--bt-danger-700); border-color: var(--bt-danger-100); } .btn-secondary { background: var(--bt-surface-alt); border-color: var(--bt-border); color: var(--bt-ink); } .btn-secondary:hover { background: var(--bt-surface-alt); color: var(--bt-ink); border-color: var(--bt-border-strong); } .btn-light { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border); } .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------------------- Cards ---------------------------------------------------------------------------- */ .card { border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: var(--bt-surface); box-shadow: none; } .card-body { padding: 1.25rem 1.4rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; font-weight: 600; color: var(--bt-ink-muted); } .metric { font-variant-numeric: tabular-nums; letter-spacing: 0; } .metric-xl { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1.1; } .metric-lg { font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; line-height: 1.2; } .metric-md { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; } @keyframes metric-tick-up { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes metric-tick-down { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } } .metric.is-tick-up { animation: metric-tick-up 0.7s ease-out; color: var(--bt-success-700); } .metric.is-tick-down { animation: metric-tick-down 0.7s ease-out; color: var(--bt-warning-700); } @media (prefers-reduced-motion: reduce) { .metric.is-tick-up, .metric.is-tick-down { animation: none; } } /* ---------------------------------------------------------------------------- Hero card (today's allowance) ---------------------------------------------------------------------------- */ .hero-card { position: relative; overflow: hidden; border-radius: var(--bt-radius-lg); background: linear-gradient(135deg, var(--bt-accent) 0%, var(--bt-primary) 55%, var(--bt-primary-700) 100%); color: #fff; padding: 1.6rem 1.75rem; box-shadow: 0 14px 30px -12px rgba(234,88,12,0.45); } .hero-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .hero-card .eyebrow { color: rgba(255,255,255,0.92); } /* was 0.78 → 4.3:1; 0.92 → ~6:1, passes AA */ .hero-card .metric-xl { color: #fff; } .hero-card .hero-sub { color: rgba(255,255,255,0.92); font-size: 0.92rem; } /* was 0.85 → 5:1; 0.92 → ~6:1, more comfortable */ /* Microstrip + buttons inside the terracotta hero — without these overrides text-muted-soft renders dark gray on terracotta and fails AA contrast. */ .hero-card .hero-microstrip { color: rgba(255,255,255,0.88); } /* was 0.82; 0.88 → ~5.6:1, comfortably above AA */ .hero-card .text-muted-soft { color: rgba(255,255,255,0.88) !important; } .hero-card .hero-microstrip .btn-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .hero-card .hero-microstrip .btn-link:hover { color: #fff; opacity: 0.92; } .hero-card .opacity-75 { color: rgba(255,255,255,0.6); } /* divider dot — slightly more visible */ /* ── Primary CTA inside the hero (Catat pengeluaran). Solid white pill on the terracotta gradient with terracotta-700 text — passes AAA. 48px min-height clears Apple HIG; full-width on mobile for thumb-reach. ── */ .hero-card .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.5rem; background: #fff; color: var(--bt-primary-700); border: 0; border-radius: var(--bt-radius-pill); font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .hero-card .hero-cta:hover { transform: translateY(-1px); background: var(--bt-primary-50); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.4); color: var(--bt-primary-ink); } .hero-card .hero-cta:active { transform: translateY(0); } .hero-card .hero-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.65), 0 8px 20px -10px rgba(0,0,0,0.35); } .hero-card .hero-cta-kbd { margin-left: 0.25rem; padding: 2px 8px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; background: var(--bt-primary); color: #fff; border: 0; border-radius: 5px; letter-spacing: 0.02em; } @media (max-width: 480px) { /* Full-width on phones — the most reachable target on a single-hand grip. */ .hero-card .hero-cta { width: 100%; font-size: 1.05rem; } } .hero-card.hero-overspent { background: linear-gradient(135deg, var(--bt-danger-500) 0%, var(--bt-danger) 60%, var(--bt-danger-700) 100%); box-shadow: 0 14px 30px -12px rgba(239,68,68,0.45); } /* When the hero card has no gradient background (bare + first-time variants), the white-pill CTA designed for the gradient floats as white-on-page. Flip it to a solid terracotta pill with white text so it reads as the page's primary action instead of a stray chip. */ .hero-card-bare .hero-cta, .first-time-hero .hero-cta { background: var(--bt-primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(234, 88, 12, 0.35); } .hero-card-bare .hero-cta:hover, .first-time-hero .hero-cta:hover { background: var(--bt-primary-700); color: #fff; box-shadow: 0 8px 20px -6px rgba(234, 88, 12, 0.45); } .hero-card-bare .hero-cta:focus-visible, .first-time-hero .hero-cta:focus-visible { box-shadow: 0 0 0 3px var(--bt-primary-100), 0 6px 16px -6px rgba(234, 88, 12, 0.35); } /* The "N" keyboard hint on the bare-hero pill: inverted (translucent white on terracotta) so it stays legible against the solid button. */ .hero-card-bare .hero-cta-kbd, .first-time-hero .hero-cta-kbd { background: rgba(255, 255, 255, 0.22); color: #fff; } /* Lift the bare-hero pill slightly in dark mode so it still has presence on the near-black page background. Triggered by [data-theme="dark"] like every other dark rule. */ [data-theme="dark"] .hero-card-bare .hero-cta, [data-theme="dark"] .first-time-hero .hero-cta { box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5); } /* ---------------------------------------------------------------------------- Stat tiles ---------------------------------------------------------------------------- */ .stat-tile { border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: var(--bt-surface); padding: 1.1rem 1.2rem; height: 100%; } /* ---------------------------------------------------------------------------- Progress ---------------------------------------------------------------------------- */ .progress { height: 10px; background: var(--bt-surface-alt); border-radius: var(--bt-radius-pill); overflow: hidden; } .progress-bar { background: var(--bt-success); transition: width 0.5s ease, background 0.2s ease; } .progress-bar.bg-success { background: var(--bt-success) !important; } .progress-bar.bg-warning { background: var(--bt-warning) !important; } .progress-bar.bg-danger { background: var(--bt-danger) !important; } .progress-track { background: rgba(255,255,255,0.22); } .progress-track .progress-bar { background: rgba(255,255,255,0.85) !important; } /* ---------------------------------------------------------------------------- Forms ---------------------------------------------------------------------------- */ .form-control, .form-select { border: 1px solid var(--bt-border); border-radius: var(--bt-radius-sm); background: var(--bt-surface); color: var(--bt-ink); font-size: 0.95rem; padding: 0.55rem 0.75rem; transition: border-color 0.12s, box-shadow 0.12s; } .form-control:hover, .form-select:hover { border-color: var(--bt-border-strong); } .form-control:focus, .form-select:focus { border-color: var(--bt-primary); box-shadow: var(--bt-ring); outline: none; } .form-control-lg { font-size: 1.1rem; padding: 0.7rem 0.9rem; } .form-label { font-weight: 500; font-size: 0.88rem; color: var(--bt-ink); margin-bottom: 0.35rem; } .form-text { color: var(--bt-ink-soft); } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--bt-danger); background-image: none; padding-right: 0.75rem; } .invalid-feedback { color: var(--bt-danger-700); font-size: 0.82rem; } /* Currency field with a leading symbol */ .input-currency { position: relative; } .input-currency::before { content: attr(data-symbol); position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--bt-ink-soft); font-weight: 500; pointer-events: none; font-size: 1.05rem; } .input-currency .form-control { padding-left: 2.6rem; } /* ---------------------------------------------------------------------------- List group / expense rows ---------------------------------------------------------------------------- */ .list-group-flush .list-group-item { border-color: var(--bt-border); padding: 0.85rem 1.4rem; } .expense-row { gap: 0.75rem; transition: background 0.12s ease; } .expense-row:hover { background: var(--bt-surface-alt); } .expense-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--bt-surface-alt); color: var(--bt-ink-muted); } .expense-icon.cat-food { background: #fff7ed; color: var(--cat-food); } .expense-icon.cat-transport { background: #fef3c7; color: var(--cat-transport); } .expense-icon.cat-shopping { background: #fdf2f8; color: var(--cat-shopping); } .expense-icon.cat-bills { background: #f1f5f9; color: var(--cat-bills); } .expense-icon.cat-entertainment { background: #f5f3ff; color: var(--cat-entertainment); } .expense-icon.cat-health { background: #f7fee7; color: var(--cat-health); } .expense-icon.cat-other { background: #f5f5f4; color: var(--cat-other); } .expense-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bt-ink); } .cat-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; padding: 0.18rem 0.55rem; border-radius: var(--bt-radius-pill); border: 1px solid transparent !important; background: var(--bt-surface-alt); color: var(--bt-ink-muted); } .cat-badge.cat-food { background: #fff7ed !important; color: var(--cat-food) !important; } .cat-badge.cat-transport { background: #fef3c7 !important; color: var(--cat-transport) !important; } .cat-badge.cat-shopping { background: #fdf2f8 !important; color: var(--cat-shopping) !important; } .cat-badge.cat-bills { background: #f1f5f9 !important; color: var(--cat-bills) !important; } .cat-badge.cat-entertainment { background: #f5f3ff !important; color: var(--cat-entertainment) !important; } .cat-badge.cat-health { background: #f7fee7 !important; color: var(--cat-health) !important; } .cat-badge.cat-other { background: #f5f5f4 !important; color: var(--cat-other) !important; } .row-actions { display: inline-flex; gap: 0.25rem; opacity: 0; transition: opacity 0.12s ease; } .expense-row:hover .row-actions, .expense-row:focus-within .row-actions { opacity: 1; } .row-actions .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .row-actions { opacity: 1; } /* always visible on touch */ } /* ---------------------------------------------------------------------------- Category picker (in expense modal) ---------------------------------------------------------------------------- */ .cat-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } @media (max-width: 480px) { .cat-picker { grid-template-columns: repeat(3, 1fr); } } .cat-pill { cursor: pointer; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 0.55rem 0.4rem; text-align: center; background: var(--bt-surface); font-size: 0.8rem; font-weight: 500; color: var(--bt-ink-muted); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; transition: border-color 0.12s, background 0.12s, transform 0.06s; } .cat-pill:hover { border-color: var(--bt-border-strong); background: var(--bt-surface-alt); } .cat-pill input { display: none; } .cat-pill.is-active { border-color: var(--bt-primary); background: var(--bt-primary-50); color: var(--bt-primary-ink); } .cat-pill .cat-pill-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; border-radius: 8px; background: var(--bt-surface-alt); } .cat-pill.is-active .cat-pill-icon { background: rgba(234,88,12,0.12); } .quick-amounts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; } .quick-amounts .quick-amount { border: 1px solid var(--bt-border); background: var(--bt-surface); border-radius: var(--bt-radius-pill); padding: 0.25rem 0.7rem; font-size: 0.78rem; color: var(--bt-ink-muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .quick-amounts .quick-amount:hover { background: var(--bt-primary-50); color: var(--bt-primary-ink); border-color: var(--bt-primary); } /* ---------------------------------------------------------------------------- Modal ---------------------------------------------------------------------------- */ .modal-content { border: 0; border-radius: var(--bt-radius-lg); box-shadow: var(--bt-shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--bt-border); padding: 1.1rem 1.4rem; } .modal-title { font-weight: 600; } .modal-body { padding: 1.4rem; } .modal-footer { border-top: 1px solid var(--bt-border); padding: 0.9rem 1.4rem; background: var(--bt-surface-alt); } /* ---------------------------------------------------------------------------- Alerts & toasts ---------------------------------------------------------------------------- */ .alert { border: 1px solid transparent; border-radius: var(--bt-radius); padding: 0.85rem 1.1rem; font-size: 0.93rem; } .alert-info { background: var(--bt-primary-50); color: var(--bt-primary-ink); border-color: rgba(234,88,12,0.18); } .alert-success { background: var(--bt-success-100); color: var(--bt-success-700); border-color: rgba(16,185,129,0.22); } .alert-warning { background: var(--bt-warning-100); color: var(--bt-warning-700); border-color: rgba(245,158,11,0.22); } .alert-danger { background: var(--bt-danger-100); color: var(--bt-danger-700); border-color: rgba(239,68,68,0.22); } #toast-area { position: fixed; right: 1.25rem; bottom: 1.25rem; /* Above Bootstrap modal (1055/1060) so a save-failure toast surfaces while the expense modal is still open. The previous 1080 was just above modal-backdrop but BELOW the modal itself in some browsers. */ z-index: 1090; display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; pointer-events: none; } .bt-toast { pointer-events: auto; background: var(--bt-surface); border: 1px solid var(--bt-border); border-left: 3px solid var(--bt-primary); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow-lg); padding: 0.75rem 1rem; display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; color: var(--bt-ink); animation: bt-toast-in 0.18s ease; } .bt-toast.success { border-left-color: var(--bt-success); } .bt-toast.warning { border-left-color: var(--bt-warning); } .bt-toast.danger { border-left-color: var(--bt-danger); } .bt-toast.is-leaving { animation: bt-toast-out 0.18s ease forwards; } .bt-toast-body { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .bt-toast-detail { font-size: 0.78rem; color: var(--bt-ink-muted); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .bt-toast.warning .bt-toast-detail { color: var(--bt-warning-700); } .bt-toast.success .bt-toast-detail { color: var(--bt-success-700); } .bt-toast-action { flex-shrink: 0; margin-left: 0.4rem; background: transparent; border: 0; color: var(--bt-primary-ink); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--bt-radius-sm); cursor: pointer; } .bt-toast-action:hover { background: var(--bt-primary-50); } @keyframes bt-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes bt-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } @media (max-width: 480px) { #toast-area { left: 1rem; right: 1rem; bottom: 5.5rem; max-width: none; } } /* ---------------------------------------------------------------------------- Month pager — prev / jump-to-month / next, sits in a single pill row ---------------------------------------------------------------------------- */ .month-pager { display: inline-flex; align-items: stretch; flex-wrap: nowrap; flex-shrink: 0; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-pill); padding: 3px; gap: 2px; max-width: 100%; } .month-pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--bt-radius-pill); color: var(--bt-ink-muted); background: transparent; border: 0; flex-shrink: 0; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .month-pager-arrow:hover { background: var(--bt-surface-alt); color: var(--bt-ink); text-decoration: none; } .month-pager-select { border: 0; background: transparent; font-size: 0.85rem; font-weight: 500; color: var(--bt-ink); padding: 0 0.6rem; min-width: 0; max-width: 200px; text-align: center; cursor: pointer; outline: none; } .month-pager-select:hover { color: var(--bt-primary-ink); } .month-pager-select:focus-visible { background: var(--bt-surface-alt); border-radius: var(--bt-radius-pill); } @media (max-width: 380px) { .month-pager-select { max-width: 130px; } } /* ---------------------------------------------------------------------------- Daily breakdown table (list view) ---------------------------------------------------------------------------- */ /* Plan summary cards (Pemasukan / Pengeluaran tetap / Budget·Bulan) — 3-up row above the rincian table. Each card is a button that opens the Setup modal, since tapping the totals is the natural way to edit. */ .plan-cards .stat-tile { padding: 0.85rem 1rem; } .plan-cards .eyebrow { font-size: 0.65rem; } .plan-cards .metric-md { font-size: 1.05rem; line-height: 1.15; } @media (min-width: 768px) { .plan-cards .metric-md { font-size: 1.25rem; } } .stat-tile-tappable { border: 1px solid var(--bt-border); background: var(--bt-surface); cursor: pointer; transition: border-color 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease; } .stat-tile-tappable:hover, .stat-tile-tappable:focus-visible { border-color: var(--bt-primary); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.08); outline: none; } .stat-tile-tappable:active { transform: scale(0.99); } /* Calc list tables — Income / Fixed Expenses side-by-side on the public /calc/ pages. Compact rows, tabular nums, tfoot total separated from the body with a soft top border. */ .calc-list-table { font-size: 0.92rem; } .calc-list-table td { padding: 0.45rem 0.5rem; border-color: var(--bt-border); font-variant-numeric: tabular-nums; } .calc-list-table tfoot td { border-top: 1px solid var(--bt-border); background: var(--bt-surface-alt); } /* Description cell — truncate long expense names so a single multi-word note doesn't blow the row up. Cap width prevents the description column from dominating on desktop. */ .daily-table .day-desc { max-width: 22ch; } .daily-table .day-desc-text { display: inline-block; max-width: 100%; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Overspend "!" prefix — sits inline before a negative saldo. Pure visual reinforcement, no extra column needed. */ .overspend-bang { display: inline-block; font-weight: 700; font-size: 0.75rem; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: var(--bt-danger-100); color: var(--bt-danger); margin-right: 4px; } /* Day-detail expand-list — inline expense rows revealed by the per-row chevron. Horizontal: icon · text · amount · actions. Show/hide is handled by Bootstrap's .collapse / .collapse.show rules above; we only style the inner layout here. */ .daily-table tbody tr.day-detail > td { background: var(--bt-surface-alt); } .day-detail-list { padding: 0; } .day-detail-item { display: flex; align-items: center; gap: 12px; padding: 0.55rem 1rem 0.55rem 1.5rem; border-top: 1px solid var(--bt-border); } .day-detail-item:first-child { border-top: 0; } .day-detail-item .expense-icon { flex-shrink: 0; } .day-detail-text { flex: 1 1 auto; min-width: 0; } .day-detail-text .fw-semibold { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .day-detail-item .expense-amount { flex-shrink: 0; font-variant-numeric: tabular-nums; } .day-detail-item .row-actions { display: inline-flex; gap: 4px; flex-shrink: 0; } .daily-table { font-size: 0.92rem; } .daily-table th { white-space: nowrap; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bt-ink-soft); background: transparent !important; border-bottom: 1px solid var(--bt-border) !important; border-top: 0; padding: 0.7rem 0.75rem; } .daily-table td { vertical-align: middle; font-variant-numeric: tabular-nums; padding: 0.7rem 0.75rem; border-color: var(--bt-border); } .daily-table tbody tr.day-row { transition: background 0.12s ease; } .daily-table tbody tr.day-row:hover { background: var(--bt-surface-alt); } .daily-table tbody tr.collapse { display: none; } .daily-table tbody tr.collapse.show { display: table-row; } .daily-table tbody tr.is-today { background: linear-gradient(90deg, var(--bt-primary-50) 0%, transparent 80%); } .daily-table tbody tr.is-today:hover { background: linear-gradient(90deg, var(--bt-primary-100) 0%, var(--bt-surface-alt) 80%); } .daily-table tbody tr.is-today td { border-color: rgba(234,88,12,0.15); } .daily-table tbody tr.is-future { color: var(--bt-ink-soft); } .daily-table tbody tr.is-future td { padding-top: 0.55rem; padding-bottom: 0.55rem; opacity: 0.55; } /* Empty days hidden by default; "show empty" toggle reveals them. */ .daily-table tbody tr.is-empty td { padding-top: 0.5rem; padding-bottom: 0.5rem; } .daily-table tbody tr.is-empty .day-cell-num { color: var(--bt-ink-soft); } .daily-card:not(.show-empty) .daily-table tbody tr.is-empty { display: none; } .daily-table tfoot td { background: var(--bt-surface-alt); border-top: 2px solid var(--bt-border-strong); font-weight: 600; padding: 0.85rem 0.75rem; } .day-cell { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .day-cell-num { font-weight: 700; font-size: 1rem; color: var(--bt-ink); width: 24px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } .day-cell-name { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--bt-ink-muted); } .today-pill { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bt-primary-100); color: var(--bt-primary-ink); padding: 0.1rem 0.45rem; border-radius: var(--bt-radius-pill); display: inline-block; margin-left: 0.4rem; vertical-align: middle; } .spent-amount { color: var(--bt-danger-700); font-weight: 600; font-variant-numeric: tabular-nums; } .items-pill { display: inline-block; min-width: 24px; padding: 0.1rem 0.4rem; background: var(--bt-surface-alt); border-radius: var(--bt-radius-pill); font-size: 0.78rem; font-weight: 600; color: var(--bt-ink-muted); } /* Detail collapse arrow rotation */ .detail-toggle svg { transition: transform 0.2s ease; } .detail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* ───────── Setup page (income + fixed → derived cap) ───────── */ .setup-headline { border-radius: var(--bt-radius-lg); padding: 1.4rem 1.5rem; background: linear-gradient(135deg, var(--bt-primary) 0%, var(--bt-primary-700) 100%); color: #fff; box-shadow: 0 14px 30px -12px rgba(234,88,12,0.45); } .setup-headline .eyebrow, .setup-headline .hero-sub { color: rgba(255,255,255,0.85); } .setup-headline .metric-xl { color: #fff; } .setup-headline .text-muted-soft { color: rgba(255,255,255,0.78) !important; } .setup-headline .text-success, .setup-headline .text-danger { color: #fff !important; } .setup-formula { background: rgba(255,255,255,0.14); border-radius: var(--bt-radius); padding: 0.85rem 1rem; } .setup-formula-row { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; font-variant-numeric: tabular-nums; } .setup-formula-divider { height: 1px; background: rgba(255,255,255,0.25); margin: 0.4rem 0; } /* Setup list rows */ .setup-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem; border-radius: var(--bt-radius-sm); background: var(--bt-surface); border: 1px solid var(--bt-border); transition: background 0.12s ease; } .setup-row:hover { background: var(--bt-surface-alt); } .setup-row.is-paused { opacity: 0.55; } .setup-row-name { color: var(--bt-ink); } .setup-row-amount { font-variant-numeric: tabular-nums; } .setup-row-actions { display: inline-flex; gap: 0.2rem; flex-shrink: 0; } .setup-row-actions .btn { width: 30px; height: 30px; padding: 0; line-height: 1; } .setup-add-form { display: grid; grid-template-columns: 1fr 130px auto; gap: 0.4rem; align-items: stretch; } @media (max-width: 540px) { .setup-add-form { grid-template-columns: 1fr; } } /* Smaller currency input variant for setup add-forms */ .input-currency-sm::before { font-size: 0.85rem; left: 0.65rem; } .input-currency-sm .form-control { padding-left: 2rem; } /* Date quick-chips inside the expense modal — Today / Yesterday shortcuts. */ .date-quick-chips { display: flex; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; } .date-chip { padding: 0.2rem 0.65rem; background: var(--bt-surface-alt); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-pill); font-size: 0.78rem; font-weight: 500; color: var(--bt-ink-muted); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .date-chip:hover { background: var(--bt-primary-50); color: var(--bt-primary-ink); border-color: var(--bt-primary-100); } .date-chip.is-active { background: var(--bt-primary); color: #fff; border-color: var(--bt-primary); } @media (max-width: 768px) { .daily-table { font-size: 0.88rem; } .daily-table th, .daily-table td { padding: 0.55rem 0.4rem; } .daily-table th.ps-4, .daily-table td.ps-4 { padding-left: 1rem !important; } .daily-table th.pe-4, .daily-table td.pe-4 { padding-right: 1rem !important; } .day-cell-num { font-size: 0.95rem; width: 20px; } .day-cell-name { font-size: 0.85rem; } } /* ---------------------------------------------------------------------------- Auth split-screen ---------------------------------------------------------------------------- */ .auth-shell { min-height: calc(100vh - 75px); display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .auth-form-side { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; } .auth-form-card { width: 100%; max-width: 420px; } .auth-form-card h1 { font-size: 1.65rem; font-weight: 700; margin-bottom: 0.4rem; } .auth-form-card .auth-sub { color: var(--bt-ink-muted); font-size: 0.95rem; margin-bottom: 1.5rem; } .auth-marketing { background: linear-gradient(135deg, var(--bt-primary) 0%, var(--bt-primary-700) 55%, var(--bt-primary-900) 110%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .auth-marketing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18), transparent 40%), radial-gradient(circle at 20% 80%, rgba(255,255,255,0.12), transparent 50%); pointer-events: none; } .auth-marketing > * { position: relative; } .auth-marketing h2 { color: #fff; font-size: 2rem; font-weight: 700; margin-bottom: 0.85rem; letter-spacing: -0.02em; } .auth-marketing .auth-marketing-sub { color: rgba(255,255,255,0.86); font-size: 1.05rem; margin-bottom: 2rem; max-width: 420px; } .auth-feature { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.1rem; max-width: 420px; } .auth-feature .auth-feature-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .auth-feature h4 { color: #fff; font-size: 1rem; font-weight: 600; margin: 0 0 0.15rem; } .auth-feature p { color: rgba(255,255,255,0.82); font-size: 0.9rem; margin: 0; } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-marketing { display: none; } } /* "Continue with Google" button — Google-recommended look (white, gray border, Google logo + "Continue with Google" text). Matches Google's identity guidelines closely enough for a self-hosted app. */ .btn-google { background: #fff; color: #1f2937; border: 1px solid var(--bt-border-strong); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.7rem 1.2rem; border-radius: var(--bt-radius-sm); transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; } .btn-google:hover { background: var(--bt-surface-alt); color: var(--bt-ink); border-color: var(--bt-border-strong); text-decoration: none; } .btn-google:focus-visible { outline: none; box-shadow: var(--bt-ring); } .btn-google svg { flex-shrink: 0; } /* ---------------------------------------------------------------------------- Settings page ---------------------------------------------------------------------------- */ .settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .settings-grid > section { min-width: 0; } .settings-grid .settings-danger { grid-column: 1 / -1; border-color: var(--bt-danger-100); } .settings-grid .settings-danger .eyebrow { color: var(--bt-danger-700); } @media (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; } } /* The danger-zone form sits flat in the card now (collapsible
was removed per audit §9.2 #4 — export and delete carry equal weight). */ /* ---------------------------------------------------------------------------- Monthly view — search input ---------------------------------------------------------------------------- */ .monthly-search { max-width: 460px; } .monthly-search-wrap { position: relative; display: flex; align-items: center; } .monthly-search-icon { position: absolute; left: 0.85rem; color: var(--bt-ink-soft); pointer-events: none; } .monthly-search-input { padding-left: 2.4rem !important; padding-right: 2.4rem !important; background: var(--bt-surface); } .monthly-search-clear { position: absolute; right: 0.65rem; width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bt-surface-alt); color: var(--bt-ink-muted); text-decoration: none; font-size: 0.78rem; line-height: 1; } .monthly-search-clear:hover { background: var(--bt-border); color: var(--bt-ink); text-decoration: none; } /* ---------------------------------------------------------------------------- Dashboard — first-run welcome state ---------------------------------------------------------------------------- */ .hero-card.hero-welcome { text-align: center; } .hero-card.hero-welcome .metric-lg { font-size: 1.5rem; color: #fff; margin: 0; } .hero-card.hero-welcome .btn-light { color: var(--bt-primary-700); border-color: rgba(255,255,255,0.7); } .hero-card.hero-welcome .btn-outline-light { color: #fff; border-color: rgba(255,255,255,0.55); background: transparent; } .hero-card.hero-welcome .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); color: #fff; } /* Streak callout removed — design-rejected anti-pattern. */ /* ---------------------------------------------------------------------------- Setup modal — inline-editable rows, headline gradient ---------------------------------------------------------------------------- */ .setup-modal-headline { border-radius: var(--bt-radius); padding: 1rem 1.15rem; background: linear-gradient(135deg, var(--bt-primary) 0%, var(--bt-primary-700) 100%); color: #fff; box-shadow: 0 8px 18px -10px rgba(234,88,12,0.45); } .setup-modal-headline .eyebrow, .setup-modal-headline .text-muted-soft { color: rgba(255,255,255,0.8) !important; } .setup-modal-headline .metric-lg { color: #fff; } .setup-modal-headline .setup-formula { background: rgba(255,255,255,0.14); border-radius: var(--bt-radius-sm); padding: 0.55rem 0.8rem; } .setup-modal-headline .setup-formula-divider { background: rgba(255,255,255,0.25); } .setup-section { padding: 0.25rem 0; } .setup-list { min-height: 1px; } .setup-empty { padding: 0.5rem 0.25rem; font-style: italic; } /* Inline-editable setup rows */ .setup-row { display: block; padding: 0; border-radius: var(--bt-radius-sm); background: var(--bt-surface); border: 1px solid var(--bt-border); transition: background 0.12s ease, border-color 0.12s ease; } .setup-row:hover { background: var(--bt-surface-alt); } .setup-row.is-paused { opacity: 0.55; } .setup-row.is-editing { background: var(--bt-primary-50); border-color: var(--bt-primary-100); } .setup-row-display { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; } .setup-row.is-editing > .setup-row-display { display: none; } .setup-row-name { color: var(--bt-ink); } .setup-row-amount { font-variant-numeric: tabular-nums; } .setup-row-actions { display: inline-flex; gap: 0.2rem; flex-shrink: 0; } .setup-row-actions .btn { width: 30px; height: 30px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* Edit form is hidden by default — `is-editing` on the parent row reveals it. Author CSS would normally override the UA `[hidden] { display: none }` rule if we relied on the attribute alone, so use a class toggle instead. */ .setup-row > .setup-row-edit { display: none; } .setup-row.is-editing > .setup-row-edit { display: grid; grid-template-columns: 1fr 130px auto; gap: 0.4rem; padding: 0.5rem 0.6rem; align-items: center; } .setup-row-edit-actions { display: inline-flex; gap: 0.2rem; flex-shrink: 0; } .setup-row-edit-actions .btn { width: 30px; height: 30px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 540px) { .setup-row-edit { grid-template-columns: 1fr; } .setup-row-edit-actions { justify-content: flex-end; } } /* ---------------------------------------------------------------------------- Empty states ---------------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--bt-ink-soft); } .empty-state .empty-icon { width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--bt-surface-alt); display: inline-flex; align-items: center; justify-content: center; color: var(--bt-ink-soft); font-size: 1.4rem; } .empty-state h6 { color: var(--bt-ink); font-weight: 600; margin: 0 0 0.25rem; } .empty-state p { margin: 0; font-size: 0.9rem; } /* ---------------------------------------------------------------------------- Misc helpers ---------------------------------------------------------------------------- */ /* Resolved to the darker --bt-ink-muted (#5b6478) so timestamps/labels meet WCAG AA contrast on white surfaces (4.7:1). Use --bt-ink-soft only on surfaces dimmer than white (badges, muted controls). */ .text-muted-soft { color: var(--bt-ink-muted) !important; } .divider { height: 1px; background: var(--bt-border); margin: 1.25rem 0; } hr { border-color: var(--bt-border); } .kbd { display: inline-block; padding: 0.05rem 0.4rem; background: var(--bt-surface); border: 1px solid var(--bt-border); border-bottom-width: 2px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--bt-ink-muted); } /* Mobile niceties */ @media (max-width: 576px) { main.container { padding-bottom: 6rem; } .metric-xl { font-size: 2.1rem; } .hero-card { padding: 1.3rem 1.4rem; } .card-body { padding: 1.1rem 1.2rem; } .modal-body { padding: 1.1rem; } .modal-footer { padding: 0.75rem 1.1rem; } .bt-nav-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; } .bt-nav-link span:not(.visually-hidden) { display: none; } .bt-brand span:last-child { display: none; } } @media (max-width: 576px) { } #dayDetailModal .modal-body { padding: 0; } #dayDetailModal .row-actions { display: inline-flex; gap: 0.25rem; } /* ---------------------------------------------------------------------------- Landing page (public marketing surface at /) ---------------------------------------------------------------------------- */ .landing-hero { margin: -2rem -12px 4rem; padding: 4rem 1.5rem 3rem; background: radial-gradient(circle at 90% 10%, rgba(234,88,12,0.08), transparent 45%), radial-gradient(circle at 10% 90%, rgba(236,72,153,0.06), transparent 45%); } .landing-hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .landing-hero-copy { max-width: 520px; } .landing-eyebrow { display: inline-block; background: var(--bt-primary-50); color: var(--bt-primary-ink); font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: var(--bt-radius-pill); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.2rem; } .landing-h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; color: var(--bt-ink); } .landing-lede { font-size: 1.15rem; color: var(--bt-ink-muted); line-height: 1.55; margin-bottom: 1.6rem; } .landing-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .landing-microcopy { font-size: 0.85rem; } .landing-hero-visual { display: flex; justify-content: center; align-items: center; } .landing-mock { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-lg); box-shadow: var(--bt-shadow-lg); padding: 1.4rem 1.5rem; width: 100%; max-width: 380px; transform: rotate(-1.5deg); } .landing-mock-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bt-ink-soft); } .landing-mock-amount { font-family: var(--font-display); font-size: 2.6rem; color: var(--bt-primary-ink); line-height: 1.05; margin: 0.2rem 0 0.4rem; } .landing-mock-sub { font-size: 0.85rem; color: var(--bt-ink-muted); margin-bottom: 0.85rem; } .landing-mock-bar { height: 6px; background: var(--bt-surface-alt); border-radius: var(--bt-radius-pill); overflow: hidden; margin-bottom: 1rem; } .landing-mock-fill { height: 100%; background: linear-gradient(90deg, var(--bt-primary), var(--bt-accent)); border-radius: var(--bt-radius-pill); } .landing-section-head { text-align: center; margin-bottom: 2rem; } .landing-section-head .eyebrow { display: inline-block; margin-bottom: 0.6rem; } .landing-h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.15; margin: 0; } .landing-features { margin-bottom: 4rem; } .landing-feature { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 1.6rem; height: 100%; transition: transform 0.18s, box-shadow 0.18s; } .landing-feature:hover { transform: translateY(-2px); box-shadow: var(--bt-shadow); } .landing-feature-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; } .landing-feature-icon--primary { background: var(--bt-primary-50); color: var(--bt-primary-ink); } .landing-feature-icon--warning { background: var(--bt-warning-100); color: var(--bt-warning); } .landing-feature-icon--success { background: var(--bt-success-100); color: var(--bt-success); } .landing-feature h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; font-family: var(--font-body); color: var(--bt-ink); letter-spacing: -0.01em; } .landing-feature p { color: var(--bt-ink-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; } .landing-how { margin-bottom: 4rem; } .landing-steps { list-style: none; padding: 0; margin: 0; max-width: 720px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 1.2rem; } .landing-steps li { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 1.3rem 1.5rem; } .landing-step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--bt-primary-50); color: var(--bt-primary-ink); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .landing-steps h4 { font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; font-family: var(--font-body); color: var(--bt-ink); letter-spacing: -0.01em; } .landing-steps p { color: var(--bt-ink-muted); font-size: 0.92rem; margin: 0; } .landing-pricing { margin-bottom: 4rem; } .landing-pricing-card { max-width: 380px; margin: 0 auto; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-lg); padding: 1.8rem; text-align: center; box-shadow: var(--bt-shadow); } .landing-pricing-amount { font-family: var(--font-display); font-size: 2.8rem; color: var(--bt-primary-ink); line-height: 1; } .landing-pricing-period { color: var(--bt-ink-muted); font-size: 0.9rem; margin-bottom: 1.2rem; } .landing-pricing-features { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 0.55rem; } .landing-pricing-features li { font-size: 0.95rem; color: var(--bt-ink); } .landing-faq { margin-bottom: 4rem; } .landing-faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; } .landing-faq-item { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 1rem 1.2rem; } .landing-faq-item summary { cursor: pointer; font-weight: 600; color: var(--bt-ink); list-style: none; position: relative; padding-right: 1.5rem; } .landing-faq-item summary::-webkit-details-marker { display: none; } .landing-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.2rem; color: var(--bt-ink-soft); transition: transform 0.18s; } .landing-faq-item[open] summary::after { transform: rotate(45deg); } .landing-faq-item p { color: var(--bt-ink-muted); font-size: 0.92rem; margin: 0.7rem 0 0; line-height: 1.55; } .landing-final-cta { text-align: center; padding: 3rem 1rem; background: var(--bt-primary-50); border-radius: var(--bt-radius-lg); margin: 0 -12px 3rem; } .landing-footer { border-top: 1px solid var(--bt-border); padding: 1.5rem 0; margin-top: 1rem; } .landing-quote { max-width: 760px; margin: 0 auto 4rem; padding: 0 12px; } .landing-quote-card { position: relative; background: var(--bt-surface); border: 1px solid var(--bt-border); border-left: 4px solid var(--bt-primary); border-radius: var(--bt-radius-lg); padding: 2rem 2rem 1.6rem; margin: 0; box-shadow: var(--bt-shadow); } .landing-quote-mark { position: absolute; top: -0.4rem; left: 1.2rem; font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--bt-primary); opacity: 0.18; pointer-events: none; user-select: none; } .landing-quote-text { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.35; color: var(--bt-ink); margin: 0 0 0.8rem; font-style: italic; } .landing-quote-author { font-size: 0.95rem; font-weight: 700; color: var(--bt-ink-muted); letter-spacing: 0.02em; } .landing-quote-gloss { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--bt-border); font-size: 0.95rem; line-height: 1.55; color: var(--bt-ink-muted); } .landing-principle { margin-bottom: 4rem; } .landing-principle-grid { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .landing-principle-card { position: relative; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 1.6rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; } .landing-principle-num { width: 32px; height: 32px; border-radius: 999px; background: var(--bt-primary-50); color: var(--bt-primary-ink); font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.2rem; } .landing-principle-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; font-family: var(--font-body); color: var(--bt-ink); letter-spacing: -0.01em; line-height: 1.3; } .landing-principle-card > p { color: var(--bt-ink-muted); font-size: 0.93rem; line-height: 1.55; margin: 0; } .landing-principle-why { margin-top: auto; background: var(--bt-primary-50); border-radius: var(--bt-radius-sm, 0.5rem); padding: 0.75rem 0.9rem; font-size: 0.88rem; line-height: 1.5; color: var(--bt-primary-ink); } .landing-principle-why strong { font-weight: 700; margin-right: 0.25rem; } .landing-principle-footer { max-width: 760px; margin: 1.6rem auto 0; padding: 1.2rem 1.5rem; text-align: center; border-top: 1px dashed var(--bt-border); } .landing-principle-footer p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--bt-ink-muted); } .landing-principle-footer strong { color: var(--bt-ink); } @media (max-width: 900px) { .landing-hero { padding: 3rem 1rem 2rem; } .landing-hero-inner { grid-template-columns: 1fr; gap: 2rem; } .landing-mock { transform: none; max-width: 340px; } .landing-cta-row .btn { width: 100%; } .landing-principle-grid { grid-template-columns: 1fr; } .landing-quote-card { padding: 1.6rem 1.4rem 1.4rem; } .landing-quote-mark { font-size: 4rem; } } /* ── Onboarding shell ─────────────────────────────────────────────────── */ .onboarding-shell { max-width: 460px; margin: 0 auto; padding: 1rem 0 4rem; } .onboarding-progress { width: 100%; height: 6px; background: var(--bt-border); border-radius: 6px; overflow: hidden; margin-bottom: 8px; } .onboarding-progress-fill { height: 100%; background: linear-gradient(90deg, var(--bt-primary) 0%, var(--bt-primary-700) 100%); border-radius: 6px; transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .onboarding-step-counter { text-align: right; font-family: var(--font-arcade); font-size: 0.78rem; color: var(--bt-ink-soft); margin-bottom: 1.5rem; } .onboarding-step { display: none; text-align: center; animation: ob-fade 0.3s ease; } .onboarding-step.is-active { display: block; } @keyframes ob-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .onboarding-mascot { margin: 0 auto 1.25rem; display: inline-block; } .onboarding-mascot-celebrate { animation: ob-bounce 0.8s ease infinite alternate; } @keyframes ob-bounce { from { transform: translateY(0); } to { transform: translateY(-6px); } } .onboarding-h1 { font-family: var(--font-display); font-weight: 800; font-size: 2rem; margin: 0 0 0.5rem; color: var(--bt-ink); } .onboarding-h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin: 0 0 0.5rem; color: var(--bt-ink); } .onboarding-lede, .onboarding-sub { color: var(--bt-ink-muted); font-size: 1rem; line-height: 1.5; margin-bottom: 1.25rem; } .onboarding-input { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; } .onboarding-amount-input { display: flex; align-items: center; background: var(--bt-surface); border: 2px solid var(--bt-border-strong); border-radius: 14px; padding: 4px 12px 4px 16px; transition: border-color 0.15s ease; } .onboarding-amount-input:focus-within { border-color: var(--bt-primary); box-shadow: 0 0 0 4px var(--bt-primary-50); } .onboarding-currency { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--bt-ink-muted); margin-right: 8px; } .onboarding-amount-input input { border: none !important; box-shadow: none !important; background: transparent !important; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; text-align: left; padding-left: 0; } .onboarding-quick-amounts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; } /* Income-anchor disclosure (optional) — collapsed by default so the primary CTA "Mulai" stays the dominant action. Opening it reveals the Income field so users who want their cap anchored to a real salary can do that in one form instead of finding /setup/ later. */ .onboarding-income-anchor { background: var(--bt-surface-alt); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 0.6rem 0.9rem; } .onboarding-income-anchor > summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--bt-ink-muted); list-style: none; } .onboarding-income-anchor > summary::-webkit-details-marker { display: none; } .onboarding-income-anchor > summary::after { content: "▾"; margin-left: 0.5rem; transition: transform 0.15s ease; display: inline-block; } .onboarding-income-anchor[open] > summary::after { transform: rotate(180deg); } .onboarding-income-anchor[open] > summary { color: var(--bt-ink); } .onboarding-income-body { padding-top: 0.5rem; } .onboarding-preview { background: var(--bt-primary-50); border-radius: 12px; padding: 12px 16px; margin-top: 12px; text-align: center; } .onboarding-preview-amount { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--bt-primary-ink); } .onboarding-prev { display: block; margin: 8px auto 0; color: var(--bt-ink-soft); text-decoration: none; } .onboarding-skip { display: block; text-align: center; margin-top: 1rem; text-decoration: underline; } /* ── /coba public calculator ──────────────────────────────────────────── */ .coba-shell { max-width: 480px; margin: 0 auto; padding: 2rem 0 4rem; text-align: center; } .coba-mascot { margin-bottom: 1rem; display: inline-block; } .coba-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--bt-ink); } .coba-lede { color: var(--bt-ink-muted); margin-bottom: 1.5rem; } .coba-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: 18px; padding: 1.25rem; text-align: left; box-shadow: var(--bt-shadow-sm, 0 1px 3px rgba(0,0,0,0.06)); } .coba-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--bt-ink); margin-bottom: 6px; } .coba-amount-input { display: flex; align-items: center; background: var(--bt-surface-alt); border: 1px solid var(--bt-border); border-radius: 12px; padding: 4px 14px; } .coba-amount-input input { border: none !important; box-shadow: none !important; background: transparent !important; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; } .coba-currency { font-family: var(--font-display); font-weight: 700; color: var(--bt-ink-muted); margin-right: 8px; } .coba-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .coba-quick button { border: 1px solid var(--bt-border-strong); background: var(--bt-surface); border-radius: 999px; padding: 4px 12px; font-size: 0.85rem; cursor: pointer; } .coba-quick button:hover { background: var(--bt-primary-50); border-color: var(--bt-primary); } .coba-preview-frame { margin-top: 1.25rem; position: relative; padding: 1.5rem 0.5rem 0.5rem; background: var(--bt-surface-alt); border-radius: var(--bt-radius); border: 1px dashed var(--bt-border-strong); } .coba-preview-tag { position: absolute; top: -10px; left: 14px; background: var(--bt-surface); color: var(--bt-ink-muted); font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: var(--bt-radius-pill); border: 1px solid var(--bt-border-strong); } .coba-result { background: linear-gradient(135deg, var(--bt-primary-50) 0%, var(--bt-accent-50) 100%); border-radius: 12px; padding: 16px; text-align: center; margin: 0; } .coba-result-eyebrow { font-family: var(--font-arcade); font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bt-primary-ink); } .coba-result-amount { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--bt-ink); margin-top: 4px; } .coba-result-sub { font-size: 0.85rem; color: var(--bt-ink-muted); margin-top: 4px; } .coba-cta-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 1.5rem; } /* ── Landing trust trifecta + new sections ──────────────────────────── */ .landing-trust-trifecta { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 0 0 1.25rem; } .landing-trust-trifecta li { font-size: 0.92rem; font-weight: 600; color: var(--bt-success-700); } .landing-mock-savestate { margin-top: 12px; background: var(--bt-success-100); color: var(--bt-success-700); border-radius: 999px; padding: 6px 12px; display: inline-block; font-size: 0.85rem; font-weight: 600; } .landing-mock-savestate-dot { font-size: 1rem; } .landing-founder { padding: 3rem 0; } .landing-founder-card { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; /* Warm sand-to-clay tints, hardcoded so they don't theme-flip — the founder card stays a light pastel surface in dark mode too (text below is hardcoded dark for the same reason). */ background: linear-gradient(135deg, #fdf2eb 0%, #fbe4d6 50%, #fed7aa 100%); border-radius: 24px; padding: 1.5rem; margin: 0 -12px; } .landing-founder-mascot { flex-shrink: 0; background: rgba(255, 255, 255, 0.55); border-radius: 50%; padding: 12px; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } .landing-founder-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; } .landing-founder-initials { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--bt-primary) 0%, var(--bt-accent) 100%); color: #fff; font-family: var(--font-display); font-size: 48px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; /* Soft shadow + inner highlight so the initials feel more "person-shaped" than the generic-circle look. Real photo is preferred (set FOUNDER_PHOTO) but this carries the "indie creator" trust signal better than a flat disk. */ box-shadow: 0 6px 18px -6px rgba(124, 45, 18, 0.6), inset 0 -8px 24px rgba(0, 0, 0, 0.12); position: relative; } .landing-founder-initials::after { /* Subtle online-presence dot, mirroring the "Made by someone real" vibe. */ content: ""; position: absolute; bottom: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; border: 3px solid var(--bt-surface, #fff); } .landing-founder-text { flex: 1; min-width: 240px; } /* The founder card stays a warm pastel surface in dark mode too — so text inside MUST stay dark regardless of theme, otherwise the dark-mode `--bt-ink` near-white renders invisibly on the pastel. These colors are absolute (#hex), not var(--bt-ink), on purpose. */ .landing-founder-text p { margin-bottom: 0.75rem; font-size: 1rem; color: #0f1729; } .landing-founder-quote { margin: 0 0 1rem; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.4; font-weight: 600; color: #0f1729; } .landing-founder-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.875rem; font-weight: 500; color: #5b6478; } .landing-founder-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5rem; } .landing-final-mascot { margin: 0 auto 0.75rem; display: inline-block; } /* ── Founder dashboard ─────────────────────────────────────────────── */ .founder-dash .card { background: var(--bt-surface); } /* ── Programmatic SEO calculator (/calc/gaji-X-juta/) ─────────────────── */ .calc-shell { max-width: 620px; margin: 0 auto; padding: 2rem 0 4rem; } .calc-mascot { display: inline-block; margin-bottom: 1rem; } .calc-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; color: var(--bt-ink); margin-bottom: 0.5rem; } .calc-lede { color: var(--bt-ink-muted); margin-bottom: 1.5rem; } .calc-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: 18px; padding: 1.25rem; } .calc-result { background: linear-gradient(135deg, var(--bt-primary-50) 0%, var(--bt-accent-100) 100%); border-radius: 14px; padding: 16px; text-align: center; } .calc-result-eyebrow { font-family: var(--font-arcade); font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bt-primary-ink); } .calc-result-amount { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--bt-ink); margin-top: 4px; } .calc-result-sub { font-size: 0.85rem; color: var(--bt-ink-muted); margin-top: 4px; } .calc-breakdown { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 8px; } .calc-breakdown-row { display: flex; justify-content: space-between; } .calc-breakdown-divider { height: 1px; background: var(--bt-border); margin: 4px 0; } .calc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .calc-chip { border: 1px solid var(--bt-border-strong); background: var(--bt-surface); border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; color: var(--bt-ink); text-decoration: none; transition: all 0.12s ease; } .calc-chip:hover { background: var(--bt-primary-50); border-color: var(--bt-primary); color: var(--bt-ink); } .calc-chip.is-active { background: var(--bt-primary); color: #fff; border-color: var(--bt-primary); } .calc-cta { display: flex; flex-direction: column; } .calc-article { border-top: 1px solid var(--bt-border); padding-top: 1.5rem; } .calc-article p { line-height: 1.6; color: var(--bt-ink); } .calc-formula { background: var(--bt-surface-alt); border: 1px solid var(--bt-border); border-radius: 10px; padding: 12px; font-family: var(--font-display); font-size: 0.92rem; color: var(--bt-ink); white-space: pre-wrap; } @media (min-width: 540px) { } @keyframes ledger-saka-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 60% { transform: scale(0.95); } 100% { transform: scale(1.06); } } @keyframes ledger-coin-fly { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } 20% { opacity: 1; } 90% { opacity: 0.85; } 100% { transform: translate(calc(-50% + var(--coin-dx, 0px)), calc(-50% + var(--coin-dy, 0px))) scale(0.35); opacity: 0; } } /* SEO tier chips — landing-page footer link block to the /calc/gaji-N-juta/ programmatic pages. Builds an internal-link graph for crawlers + lets visitors jump straight to "their" calculator. */ .landing-seo-tiers { padding: 2.5rem 1rem 3rem; max-width: 960px; margin: 0 auto; text-align: center; } /* Compact variant — used at the foot of the landing where the chips are an internal-link aid, not a featured section. Smaller heading, left-aligned, noticeably less visual weight than .landing-seo-tiers default. */ .landing-seo-tiers--compact { padding: 1.5rem 1rem 2rem; text-align: left; } .landing-seo-tiers--compact .landing-seo-tiers-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0.5rem; } .landing-seo-tiers--compact .landing-seo-tier-grid { justify-content: flex-start; margin-top: 0.5rem; } .landing-seo-tier-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 1.25rem; } .landing-seo-tier-chip { display: inline-block; padding: 0.5rem 0.95rem; background: var(--bt-surface-alt); color: var(--bt-ink); border-radius: 999px; font-size: 0.92rem; font-weight: 600; text-decoration: none; border: 1px solid var(--bt-border); transition: background 0.18s, transform 0.18s, border-color 0.18s; } .landing-seo-tier-chip:hover, .landing-seo-tier-chip:focus-visible { background: var(--bt-primary-50); border-color: var(--bt-primary); color: var(--bt-primary-ink); text-decoration: none; transform: translateY(-1px); } /* PWA install nudge — fixed bottom toast, dismissible. Shown only after the user has earned the home-screen install (profile aged ≥3d OR ≥3 expenses). `right` is pulled in on mobile so the floating FAB stays clickable in the thumb zone — earlier it sat under the nudge at the same anchor. */ .pwa-install-nudge { position: fixed; left: 12px; right: 92px; bottom: 80px; z-index: 1090; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--bt-surface) 0%, var(--bt-primary-50) 100%); border: 1px solid var(--bt-primary-100); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 28px rgba(15, 23, 41, 0.15); max-width: 460px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { /* Desktop: no FAB, so the nudge can stretch back to the right edge. */ .pwa-install-nudge { bottom: 24px; right: 12px; } } .pwa-install-mascot { flex-shrink: 0; } .pwa-install-text { flex-grow: 1; min-width: 0; } .pwa-install-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--bt-ink); line-height: 1.2; } .pwa-install-sub { font-size: 0.82rem; color: var(--bt-ink-muted); margin-top: 2px; } .pwa-install-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .pwa-install-actions .btn { white-space: nowrap; } /* Respect reduced-motion preference — skip the choreography. */ @media (prefers-reduced-motion: reduce) { .ledger-saka-target.saka-grow, .ledger-coin, .ledger-stage-up-pill { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .ledger-cta-hidden { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } } .goal-card { overflow: hidden; } .goal-photo-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; transition: filter 600ms ease; background: linear-gradient(135deg, var(--bt-warning-100), var(--bt-primary-100)); display: flex; align-items: center; justify-content: center; } .goal-photo-emoji { font-size: 5rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); } @media (max-width: 480px) { } /* ============================================================================ UI/UX best-practice baseline (audited 2026-05-12) ============================================================================ */ /* ── Tap-target floors. Chips were ~24px tall; WCAG 2.5.5 wants ≥24 with spacing, Apple HIG wants ≥44. We split the difference at 36px and keep the visual identity tight. ────────────────────────────────────────────── */ .quick-amounts .quick-amount, .coba-quick button, .date-chip, .onboarding-quick-amounts .btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; } /* ── aria-pressed visual: quick-amount + coba-quick chips reflect the currently-selected value via aria-pressed="true". ────────────────────── */ .quick-amounts .quick-amount[aria-pressed="true"], .coba-quick button[aria-pressed="true"], .onboarding-quick-amounts .btn[aria-pressed="true"] { background: var(--bt-primary); color: #fff; border-color: var(--bt-primary); } /* ── aria-current=page: the active nav link should also be reachable as a landmark. Color/active state already styled via .active class; this just ensures aria-current carries the same weight. ──────────────────── */ .bt-nav-link[aria-current="page"] { background: var(--bt-primary-50); color: var(--bt-primary-ink); } /* ── Skip link: was already in base.html, just give it a visible state on focus. Default 'visually-hidden' until focused. ──────────────────── */ .skip-link { position: absolute; top: -40px; left: 1rem; z-index: 2000; padding: 0.5rem 1rem; background: var(--bt-primary); color: #fff; border-radius: var(--bt-radius-sm); font-weight: 600; text-decoration: none; transition: top 0.18s ease; } .skip-link:focus, .skip-link:focus-visible { top: 1rem; outline: none; box-shadow: var(--bt-ring); } /* Skip-link target.
has tabindex="-1" so JS can focus it without it being in the regular tab order. Without an outline, the target lands focus invisibly — keyboard users hit the skip-link then can't see what the focus moved to. Mirror the focus-visible ring used elsewhere. */ main:focus, main:focus-visible { outline: none; box-shadow: var(--bt-ring); border-radius: var(--bt-radius); } /* Dashboard summary strip — slim, low-emphasis link to the full monthly summary. Replaces the buried "Lihat ringkasan bulan ini" centered link that lived under 31 day rows. */ .dashboard-summary-strip { display: block; } .dashboard-summary-link { display: block; padding: 0.7rem 0.95rem; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); text-decoration: none; transition: background 0.12s, border-color 0.12s; } .dashboard-summary-link:hover { background: var(--bt-surface-alt); border-color: var(--bt-border-strong); } .dashboard-summary-strip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* Coarse-pointer (touch) input has no real :hover — we want the hover *visual* (lift, shadow, color tint) to skip on touch, so the user gets a stable state until they actually tap. Default browser :hover on touch fires sticky after a tap, leaving the previously-tapped row highlighted until something else is tapped. */ @media (hover: none) and (pointer: coarse) { .daily-table tbody tr.day-row:hover { background: transparent; } .bt-fab:hover { transform: none; } } /* ── Disabled / aria-busy state: forms that flip a submit button to "Menyiapkan…" need a clear visual signal it's not retry-able. ──────── */ button[aria-busy="true"], .btn[aria-busy="true"] { opacity: 0.65; cursor: progress; } button[disabled], .btn[disabled] { cursor: not-allowed; } /* ── Global reduced-motion override. The two existing media blocks only covered tick animation + ledger choreography; this catches every remaining `transition:` / `animation:` rule for users who opted out. ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Smooth scroll for users who haven't opted out (overridden above). ── */ html { scroll-behavior: smooth; } /* ── Scroll-margin for anchored links (e.g. /#faq from landing). Keeps the target from hiding under the fixed navbar. ─────────────────────── */ :target { scroll-margin-top: 80px; } /* ── Shortcuts modal — fine-pointer devices only. ─────────────────────── */ @media (pointer: coarse) { .shortcuts-modal-wrap { display: none !important; } } /* ── Plan tiles — Notion-style inline-edit lists on the dashboard. Cells look like plain text at rest; row controls fade in on hover. Whole-row click → edit. Enter/blur saves. Esc cancels. ────────────── */ .plan-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .plan-tile-header { padding: 0.65rem 1rem 0.35rem; } .plan-tile-list { list-style: none; margin: 0; padding: 0 0.5rem; display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-height: 48px; } .plan-tile-list .setup-empty { padding: 0.5rem 0.75rem 0.75rem; font-style: normal; } /* Row at rest: flat, no border, no background. */ .plan-tile-list .setup-row { background: transparent; border: 0; border-radius: 4px; border-bottom: 1px solid transparent; transition: background 0.08s ease, border-color 0.08s ease; cursor: pointer; } .plan-tile-list .setup-row + .setup-row { border-top: 1px solid var(--bt-border); } .plan-tile-list .setup-row:hover { background: rgba(234, 88, 12, 0.04); } .plan-tile-list .setup-row.is-editing { background: rgba(234, 88, 12, 0.06); border-color: transparent; } .plan-tile-list .setup-row-display { padding: 0.45rem 0.6rem; gap: 0.5rem; min-height: 36px; } /* Hide the explicit edit pencil — whole row is the trigger. */ .plan-tile-list .setup-edit-btn { display: none !important; } /* Trash icon: invisible at rest, fades in on row hover or keyboard focus. */ .plan-tile-list .setup-row-actions { opacity: 0; transition: opacity 0.12s ease; } .plan-tile-list .setup-row:hover .setup-row-actions, .plan-tile-list .setup-row:focus-within .setup-row-actions { opacity: 1; } .plan-tile-list .setup-row-actions .btn { width: 26px; height: 26px; border: 0; background: transparent; color: var(--bt-ink-soft); } .plan-tile-list .setup-row-actions .btn:hover { background: var(--bt-danger-100); color: var(--bt-danger-700); } /* Edit-mode: inputs look like flat text, no border, transparent bg. */ .plan-tile-list .setup-row.is-editing > .setup-row-edit { padding: 0.35rem 0.45rem; grid-template-columns: 1fr 130px; gap: 0.5rem; } .plan-tile-list .setup-row-edit .form-control { background: transparent; border: 1px solid transparent; border-radius: 4px; box-shadow: none; padding: 0.25rem 0.4rem; font-size: 0.92rem; } /* Inside .input-currency, preserve the left padding for the Rp prefix. */ .plan-tile-list .setup-row-edit .input-currency .form-control { padding-left: 2rem; } .plan-tile-list .setup-row-edit .form-control:focus { background: var(--bt-surface); border-color: var(--bt-primary-100); box-shadow: var(--bt-ring); outline: none; } .plan-tile-list .setup-row-edit .input-currency::before { font-size: 0.85rem; opacity: 0.7; } /* Save/cancel buttons hidden — Enter saves, Esc cancels, blur saves. */ .plan-tile-list .setup-row-edit-actions { display: none !important; } /* "+ Tambah" placeholder (Notion's "+ New" row). */ .plan-tile-add-trigger { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: transparent; border: 0; border-top: 1px solid var(--bt-border); color: var(--bt-ink-soft); font: inherit; font-size: 0.88rem; text-align: left; padding: 0.55rem 0.85rem; cursor: pointer; transition: background 0.08s ease, color 0.08s ease; } .plan-tile-add-trigger:hover { background: rgba(234, 88, 12, 0.04); color: var(--bt-ink); } .plan-tile-add-trigger .plan-tile-add-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-weight: 700; color: var(--bt-ink-soft); } .plan-tile-add-trigger:hover .plan-tile-add-icon { color: var(--bt-primary-ink); } /* Add-form when expanded: same flat look as the edit row. */ .plan-tile-list ~ .plan-tile-add, .plan-tile-add { display: none; grid-template-columns: 1fr 130px; gap: 0.5rem; padding: 0.45rem 0.85rem 0.6rem; border-top: 1px solid var(--bt-border); background: rgba(234, 88, 12, 0.04); } .plan-tile-add:not([hidden]) { display: grid; } .plan-tile-add .form-control { background: var(--bt-surface); border: 1px solid transparent; border-radius: 4px; box-shadow: none; padding: 0.3rem 0.5rem; font-size: 0.92rem; } /* Inside .input-currency, preserve the left padding for the Rp prefix. */ .plan-tile-add .input-currency .form-control { padding-left: 2rem; } .plan-tile-add .form-control:focus { border-color: var(--bt-primary-100); box-shadow: var(--bt-ring); outline: none; } .plan-tile-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 1rem; border-top: 1px solid var(--bt-border); font-size: 0.92rem; } /* ── Day-cat dot — mobile-only scannable category cue in the date cell. When the description column is hidden (<576px), this dot reveals the day's primary expense category without expanding the row. ─────────── */ .day-cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 0.35rem; vertical-align: middle; background: var(--cat-other); } .day-cat-dot.cat-food { background: var(--cat-food); } .day-cat-dot.cat-transport { background: var(--cat-transport); } .day-cat-dot.cat-shopping { background: var(--cat-shopping); } .day-cat-dot.cat-bills { background: var(--cat-bills); } .day-cat-dot.cat-entertainment { background: var(--cat-entertainment); } .day-cat-dot.cat-health { background: var(--cat-health); } /* ============================================================================ Audit follow-up components — hero bare layout, FAB, no-spend link, streak, goal slot, week strip, mobile day cards, count-down feedback, coachmark, welcome-back / donation banners, deletion receipt. ============================================================================ */ .hero-card-bare, .first-time-hero { background: transparent; border: 0; box-shadow: none; padding: 1.25rem 0 0.25rem; text-align: left; color: var(--bt-ink); } .first-time-hero .metric-xl { font-size: clamp(48px, 12vw, 96px); line-height: 1; letter-spacing: -2px; font-weight: 800; color: var(--bt-ink); } .first-time-hero .hero-sub { color: var(--bt-ink-muted); font-size: 0.95rem; } .hero-greeting { font-size: 0.95rem; font-weight: 600; color: var(--bt-ink-muted); margin-bottom: 0.25rem; } .hero-card-bare .metric-xl { font-size: clamp(48px, 12vw, 96px); line-height: 1; letter-spacing: -2px; font-weight: 800; color: var(--bt-ink); } .hero-card-bare.hero-overspent .metric-xl { color: var(--bt-danger-700); } .hero-card-bare .hero-sub { color: var(--bt-ink-muted); font-size: 0.95rem; } .hero-streak { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; color: var(--bt-ink); background: var(--bt-surface-alt); border-radius: var(--bt-radius-pill); padding: 0.2rem 0.65rem; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; } .hero-nospend-link { appearance: none; background: transparent; border: 0; padding: 0.4rem 0.5rem; color: var(--bt-ink-muted); font-size: 0.9rem; cursor: pointer; border-radius: var(--bt-radius-sm); } .hero-nospend-link:hover, .hero-nospend-link:focus-visible { background: var(--bt-surface-alt); color: var(--bt-success-700); outline: none; } .hero-nospend-link[disabled] { opacity: 0.6; cursor: default; } /* Number ticker — visible feedback for amount changes. The previous `is-tick` glow rendered invisibly on the light surface; this replaces it. */ .metric.is-ticking { background: linear-gradient(90deg, var(--bt-primary-50), transparent); border-radius: var(--bt-radius-sm); transition: background-color 350ms ease; } .metric.is-tick-down { color: var(--bt-warning-700); } .metric.is-tick-up { color: var(--bt-success-700); } /* Persistent FAB — visible on mobile only. Lives in the iOS thumb zone. */ .bt-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--bt-primary); color: #fff; border: 0; box-shadow: var(--bt-shadow-lg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; /* Sit above the PWA install nudge (z-index 1090) and Bootstrap toasts. Bootstrap modals use z-index 1055 (backdrop) / 1060 (dialog), so the FAB stays below an open modal — which is correct, since the modal replaces the FAB as the active action. */ z-index: 1095; transition: transform 120ms ease; } .bt-fab:hover { transform: scale(1.04); } .bt-fab:focus-visible { outline: 3px solid var(--bt-primary-100); outline-offset: 3px; } .bt-fab svg { width: 24px; height: 24px; } /* Hide on devices that have a fine pointer (mouse / trackpad / pen). Touch users keep the thumb-zone FAB regardless of viewport width — a tablet in portrait is still operated with a thumb. */ @media (pointer: fine) { .bt-fab { display: none; } } @media (display-mode: standalone) { .bt-fab { bottom: calc(20px + env(safe-area-inset-bottom)); } } /* Hide both FAB and PWA install nudge while any Bootstrap modal is open — `body.modal-open` is the official hook. Without this, the FAB at z-index 1095 would float above the modal backdrop. */ body.modal-open .bt-fab, body.modal-open .pwa-install-nudge { display: none !important; } /* Coachmark overlay (first-expense nudge) */ .coachmark-overlay { position: fixed; inset: 0; background: rgba(15, 23, 41, 0.45); z-index: 1040; display: flex; align-items: flex-start; justify-content: center; padding-top: 110px; animation: coachmark-fade 240ms ease-out; } @keyframes coachmark-fade { from { opacity: 0; } to { opacity: 1; } } .coachmark-card { background: var(--bt-surface); border-radius: var(--bt-radius-lg); box-shadow: var(--bt-shadow-lg); padding: 1rem 1.25rem; max-width: 320px; text-align: center; position: relative; } .coachmark-arrow { font-size: 28px; line-height: 1; color: var(--bt-primary); margin-bottom: 0.4rem; } .coachmark-dismiss { margin-top: 0.25rem; color: var(--bt-ink-muted); } /* Welcome-back + donation banners (re-engagement surfaces) */ .welcome-back-banner, .donation-prompt { border-radius: var(--bt-radius); background: var(--bt-primary-50); border-color: var(--bt-primary-100) !important; } .donation-prompt { background: var(--bt-accent-50); border-color: var(--bt-accent-100) !important; } /* Welcome-back tiered cards (medium/heavy variants). The only in-app retention surface this product has — sized up so the gap acknowledgement feels substantial. */ .welcome-back-card { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--bt-shadow); } .welcome-back-card--medium { background: var(--bt-primary-50); border-color: var(--bt-primary-100); } .welcome-back-card--heavy { background: linear-gradient(135deg, var(--bt-primary-50), var(--bt-accent-50)); border-color: var(--bt-primary-100); } .welcome-back-h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 0; } .welcome-back-actions { display: flex; flex-wrap: wrap; gap: 8px; } .welcome-back-actions .btn { min-height: 44px; } .welcome-back-recap { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 0.7rem 0.9rem; } .welcome-back-recap-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.15rem; } [data-theme="dark"] .goal-photo-wrap { background: linear-gradient(135deg, #78350f, var(--bt-primary-900)); } /* Google "Continue with Google" — Google publishes a dark-mode variant (near-black surface, light text). Use it so the button doesn't burn white on the dark page. */ [data-theme="dark"] .btn-google { background: #131314; color: #e3e3e3; border-color: #3c4043; } [data-theme="dark"] .btn-google:hover { background: #1f1f20; color: #e3e3e3; border-color: #5f6368; } [data-theme="dark"] .welcome-back-card { background: var(--bt-surface); border-color: var(--bt-border); } [data-theme="dark"] .welcome-back-card--medium { background: rgba(234,88,12,0.08); } [data-theme="dark"] .welcome-back-card--heavy { background: rgba(234,88,12,0.10); } [data-theme="dark"] .welcome-back-recap { background: var(--bt-surface-alt); } /* Ghost-data preview — first-time-only fake breakdown so the new user's dashboard isn't an empty void. Decorative: aria-hidden, no click handlers, no DB rows. Disappears when is_first_time flips after the first real log. */ .ghost-preview { opacity: 0.42; pointer-events: none; user-select: none; border: 1px dashed var(--bt-border); border-radius: var(--bt-radius); padding: 0.9rem 1rem; background: var(--bt-surface-alt); } .ghost-list { list-style: none; padding: 0; margin: 0; } .ghost-row { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--bt-border); font-size: 0.92rem; } .ghost-row:last-child { border-bottom: 0; } .ghost-time { font-family: var(--font-display); font-weight: 600; color: var(--bt-ink-muted); font-size: 0.85rem; } .ghost-desc { color: var(--bt-ink); } .ghost-cat { font-size: 1rem; } .ghost-amt { font-family: var(--font-display); font-weight: 700; color: var(--bt-ink); white-space: nowrap; } .ghost-footnote { margin-top: 0.6rem; text-align: center; font-style: italic; } .eyebrow--soft { background: transparent; color: var(--bt-ink-muted); padding: 0; } @media (prefers-reduced-motion: no-preference) { .ghost-preview { transition: opacity 220ms ease; } } /* Weekly strip — 7-day overview below the hero. Each pill is the day number; today pulses; future days are muted. */ .week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 1rem; } .week-pill { text-align: center; background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius-sm); padding: 0.4rem 0.25rem; font-size: 0.75rem; color: var(--bt-ink-muted); cursor: default; } .week-pill .week-pill-wd { display: block; font-weight: 700; color: var(--bt-ink); } .week-pill .week-pill-num { display: block; font-size: 1.1rem; font-weight: 800; color: var(--bt-ink); } .week-pill .week-pill-mark { display: block; margin-top: 2px; height: 6px; } .week-pill.is-today { border-color: var(--bt-primary); box-shadow: 0 0 0 2px var(--bt-primary-100); } .week-pill.is-green .week-pill-mark::before { content: "▲"; color: var(--bt-success-700); font-size: 0.7rem; } .week-pill.is-red .week-pill-mark::before { content: "▼"; color: var(--bt-danger-700); font-size: 0.7rem; } .week-pill.is-future { opacity: 0.45; } /* Mobile day-cards (replaces the desktop table on small screens) */ .daily-cards { display: none; } @media (max-width: 575.98px) { .daily-table { display: none; } .daily-cards { display: flex; flex-direction: column; gap: 8px; padding: 0.75rem; } .daily-card-mobile { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 0.75rem 0.85rem; } .daily-card-mobile.is-today { border-color: var(--bt-primary); background: var(--bt-primary-50); } .daily-card-mobile.is-future { opacity: 0.5; } .daily-card-mobile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .daily-card-mobile-date { font-weight: 700; color: var(--bt-ink); } .daily-card-mobile-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.25rem; vertical-align: middle; } .daily-card-mobile-dot.is-green { background: var(--bt-success); } .daily-card-mobile-dot.is-red { background: var(--bt-danger); } .daily-card-mobile-dot.is-zero { background: var(--bt-ink-soft); } .daily-card-mobile-spent { font-weight: 700; color: var(--bt-danger-700); } .daily-card-mobile-left { font-size: 0.85rem; color: var(--bt-ink-muted); } .daily-card-mobile-tags { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.75rem; } } /* Deletion receipt — shows scale of what will be deleted */ .settings-danger-receipt { background: var(--bt-surface-alt); border-radius: var(--bt-radius-sm); padding: 0.75rem 1rem; margin: 0.5rem 0 1rem; font-size: 0.9rem; color: var(--bt-ink-muted); } .settings-danger-receipt strong { color: var(--bt-ink); } /* Expense modal — split footer for primary + "Save & add another" */ .expense-modal-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* On mobile (coarse pointer + small screen), anchor the modal action buttons to the bottom edge so the user's thumb doesn't travel from the keyboard to the top of the modal to hit Save. safe-area-inset handles iOS notch / home-indicator. Bootstrap's modal-dialog gets a flex column so the footer stays sticky inside the modal viewport. */ @media (max-width: 576px) and (pointer: coarse) { #expenseModal .modal-dialog { margin: 0; height: 100%; max-width: none; display: flex; align-items: flex-end; } #expenseModal .modal-content { border-radius: var(--bt-radius-lg) var(--bt-radius-lg) 0 0; max-height: 92vh; display: flex; flex-direction: column; } #expenseModal .modal-body { overflow-y: auto; flex: 1 1 auto; } .expense-modal-footer { position: sticky; bottom: 0; background: var(--bt-surface); border-top: 1px solid var(--bt-border); padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 1; } .expense-modal-footer > .d-flex { width: 100%; } .expense-modal-footer .btn { flex: 1 1 auto; min-height: 48px; } } /* Setup formula details — power-user math behind a disclosure */ .setup-formula-details summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.4rem; border-radius: var(--bt-radius-sm); } .setup-formula-details summary:hover { background: var(--bt-surface-alt); } /* Hide the native triangle across browsers — Chrome/Safari use ::-webkit-details-marker, Firefox uses ::marker on summary. */ .setup-formula-details summary::-webkit-details-marker { display: none; } .setup-formula-details summary::marker { content: ""; } .setup-formula-details summary::after { content: "▾"; font-size: 0.75rem; color: var(--bt-ink-soft); transition: transform 200ms ease; } .setup-formula-details[open] summary::after { transform: rotate(180deg); } /* Keyboard-shortcut hint button — visible on desktop next to the user menu. Discoverability path that's lighter than a tooltip and doesn't compete with the dropdown trigger. Hidden on touch viewports. */ .bt-shortcut-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bt-surface-alt); color: var(--bt-ink-muted); border: 1px solid var(--bt-border); font-weight: 700; font-size: 0.95rem; cursor: pointer; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; } .bt-shortcut-btn:hover, .bt-shortcut-btn:focus-visible { background: var(--bt-primary-50); color: var(--bt-primary-ink); outline: none; } @media (pointer: coarse) { .bt-shortcut-btn { display: none !important; } } /* ── Theme toggle (navbar) ───────────────────────────────────────────── One circular button, sun↔moon icon. Active icon swaps based on the `data-theme` attribute on . Persists to localStorage; OS pref is the auto fallback when no choice is stored. */ .bt-theme-toggle { width: 32px; height: 32px; border-radius: 50%; background: var(--bt-surface-alt); color: var(--bt-ink-muted); border: 1px solid var(--bt-border); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .bt-theme-toggle:hover, .bt-theme-toggle:focus-visible { background: var(--bt-primary-50); color: var(--bt-primary-ink); outline: none; } .bt-theme-icon { display: none; } :root[data-theme="light"] .bt-theme-icon-moon { display: block; } :root[data-theme="dark"] .bt-theme-icon-sun { display: block; } /* ── Touch targets (coarse pointer) ───────────────────────────────────── WCAG 2.5.5 and Apple HIG both want ≥44×44px tappable targets. Bootstrap defaults land near that on standard text sizes but not on the small chips (quick-amounts, categories, date shortcuts) where a mis-tap silently picks the wrong category for an expense. Coarse-pointer-only so we don't bloat mouse-driven layouts. */ @media (pointer: coarse) { .btn-sm, .onboarding-quick-amounts .btn, [data-quick-cap], [data-quick-amount], [data-quick-date], .cat-picker .cat-pill, .category-pill, .amount-chip, .dropdown-item, .bt-lang-select { min-height: 44px; min-width: 44px; } }