/* Charti App Styles * * Table of contents (section comments below match these titles): * 1. Fonts & design tokens (:root, [data-theme="dark"]) * 2. Base (reset, body, typography, x-cloak, focus-visible, reduced motion) * 3. Layout: Header, Container, Navigation, Sidebar (desktop), Side Menu, * Main content * 4. Components: Card, Button, Alert/Toast, Dialog, Loading/Spinners, Form, * Tag, Icon, Utilities * 5. Features: Document list & expanded panel, Document detail, Pull-to-refresh, * Processing tasks, Stats, Cloud sync/preferences, eBanking QR carousel, * Document scanner, Recent scans, About page, Auth pages * 6. Responsive (mobile ≤768px; desktop ≥1024px sidebar; eBanking ≥769px) * 7. Third-party overrides: Tom Select (field theme), impersonation banner, * Django debug toolbar * * TOKEN RULE: component rules use the semantic role tokens below — never raw * hex values. New colors go into BOTH the :root (light) and [data-theme="dark"] * blocks. The theme is resolved by an inline script in (base.html) that * always stamps data-theme="light|dark" on before this file loads. */ /* * Self-hosted Inter (variable font, weights 100-900 in one file). * Used for the brand voice: headings and logo. The dense app UI keeps the * native system stack (see --font-sans) so we pay no webfont cost there. * font-display: swap -> text renders immediately in the fallback, then * upgrades to Inter when it loads (no invisible-text flash). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format('woff2'); } :root { /* Body / dense app UI: native per-platform UI font, zero load cost. */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Brand voice: Inter for headings and logo, system stack as fallback. */ --font-brand: 'Inter', var(--font-sans); color-scheme: light; /* * Teal-led "modern" brand direction. Teal is the trust color (finance/ * fintech) without red's "debt / error" baggage, on a clean Swiss-minimal * neutral base. Red is demoted to a functional accent: errors, destructive * actions, and genuine urgency only (--color-error), where its high-arousal * signal is an asset rather than an everyday background. */ /* -- Color roles: brand -- */ --color-primary: #0f766e; /* deep teal - primary actions, links, accents */ --color-primary-dark: #0c5d57; /* teal hover/active */ --color-on-primary: #fff; --color-primary-container: #e0f2f1; /* light teal tint: paid tag, active field items */ --color-on-primary-container: #0f766e; --color-primary-outline: #a7d8d2; /* soft teal hairline (secondary buttons) */ --color-header-bg: #0f766e; /* app header / menu header surface */ --color-on-header: #fff; /* -- Color roles: surfaces & text -- */ --color-surface: #fff; /* cards, nav, panels */ --color-surface-dim: #f4f7f8; /* cool near-white app canvas */ --color-surface-container: #f0f2f5; /* inset boxes, code blocks, spinner tracks */ --color-surface-alt: #f9f9f9; /* subtle alternate surface: stat boxes, info panels */ --color-on-surface: #1a2027; /* near-black for crisp Swiss-minimal text */ --color-on-surface-variant: #5b6771; /* secondary text: meta lines, labels, help text */ --color-on-surface-muted: #757575; /* hints, separators (AA on white; never lighter) */ --color-outline: #e2e8f0; /* light cool border */ --color-outline-strong: #c3cbd5; /* hover borders, placeholder text, scroll thumbs */ --color-inverse-surface: #1e1e1e; /* tooltips */ --color-on-inverse-surface: #fff; --color-scrim: rgba(0, 0, 0, 0.4); /* menu/dialog overlays */ /* -- Color roles: status -- */ --color-error: #dc2626; /* red - errors, destructive, urgency ONLY */ --color-error-soft: #ef4444; /* lighter red for non-destructive error text */ --color-error-container: #fef2f2; --color-secondary: #334155; /* slate for secondary text/UI */ --color-success: #4caf50; --color-success-container: #edf7f6; /* teal-tinted "good/in-progress" surface */ --color-warning: #ff9800; --color-warning-container: #fff4e5; --color-on-warning-container: #b45309; --color-info: #1565c0; --color-info-container: #e3f2fd; --color-sync-synced: #2e7d32; --color-sync-moved: #6a1b9a; /* -- Shape scale -- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* -- Elevation scale -- */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.12); --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-4: 0 10px 40px rgba(0, 0, 0, 0.12); /* -- Spacing scale (use for new rules; legacy literals migrate over time) -- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; /* -- Type scale -- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; /* -- Motion -- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 100ms; --duration-base: 200ms; /* -- Z scale -- */ --z-header: 40; --z-nav: 50; --z-banner: 60; --z-overlay: 90; --z-menu: 100; /* -- Field metrics (form controls & Tom Select) -- */ --field-height: 40px; --touch-target: 48px; /* -- Layout -- */ --sidebar-width: 240px; } /* * Dark theme. The inline script in base.html resolves the stored * preference (or the OS setting) and stamps data-theme BEFORE this stylesheet * applies, so there is no light flash. Shadows fade out in dark mode; surfaces * lift tonally instead (surface-container is lighter than surface). */ [data-theme="dark"] { color-scheme: dark; --color-primary: #2fbfae; --color-primary-dark: #4ecdbe; /* hover = lighter in dark */ --color-on-primary: #06211e; --color-primary-container: #123f39; --color-on-primary-container: #7edcd2; --color-primary-outline: #2a5f59; --color-header-bg: #0d3833; --color-on-header: #f0f4f4; --color-surface: #1c2226; --color-surface-dim: #12171a; --color-surface-container: #262e33; --color-surface-alt: #20272b; --color-on-surface: #e6e9eb; --color-on-surface-variant: #a6b0b5; --color-on-surface-muted: #8b959b; --color-outline: #323b41; --color-outline-strong: #4b565e; --color-inverse-surface: #e6e9eb; --color-on-inverse-surface: #1a2027; --color-scrim: rgba(0, 0, 0, 0.6); --color-error: #e05252; --color-error-soft: #f28b8b; --color-error-container: #3a2023; --color-secondary: #b9c4d0; --color-success: #66bb6a; --color-success-container: #16302c; --color-warning: #d98a2b; --color-warning-container: #3a2f1a; --color-on-warning-container: #ecb36c; --color-info: #64b5f6; --color-info-container: #16283a; --color-sync-synced: #81c784; --color-sync-moved: #ce93d8; --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-4: 0 10px 40px rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Alpine.js: hide x-cloak elements until Alpine initializes (prevents a flash of tooltips/error hints on page load; Alpine removes the attribute). */ [x-cloak] { display: none !important; } /* Reserve the scrollbar gutter so the page never reflows when a vertical scrollbar appears/disappears (e.g. a hover card opening near the bottom of a list). Without this, the right-aligned meta row jumps left as the scrollbar claims width. No-op on platforms with overlay scrollbars (mobile app). */ html { scrollbar-gutter: stable; } body { font-family: var(--font-sans); background-color: var(--color-surface-dim); color: var(--color-on-surface); line-height: 1.6; /* Safety net: a single over-wide element must never widen the layout viewport — that stretches the fixed header/bottom-nav past the screen edge on phones. `clip` avoids creating a scroll container. */ overflow-x: clip; } /* Long unbroken strings (URLs, paths, tokens) in inline code must wrap instead of forcing horizontal overflow on narrow screens. */ code { overflow-wrap: anywhere; } /* * Brand typeface for headings and logo only. Keeps the dense document * lists on the fast system stack while giving Charti an identity on the * surfaces that carry brand voice. */ h1, h2, h3, .header h1 { font-family: var(--font-brand); letter-spacing: -0.01em; } /* * Tabular (monospaced) figures for financial data: amounts, IBANs, dates, * QR values. Digits share a fixed width so numbers align in columns and are * easier to scan. 'zero' enables Inter's slashed zero (0 vs O clarity). */ .tabular-nums, .amount, .iban, .qr-amount { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: 'tnum' 1, 'zero' 1; } /* Visible keyboard focus everywhere; invisible for mouse/touch. */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Screen-reader-only text (state labels next to icons, etc.). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respect the OS "reduce motion" setting: drop transitions/transforms but keep spinners (progress feedback) at a slower, calmer speed. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .spinner, .spinner-sm, .qr-spinner-inner { animation: spin 2s linear infinite !important; } } /* Header */ .header { background-color: var(--color-header-bg); color: var(--color-on-header); padding: 1rem; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-1); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); will-change: transform; } /* Extend header background above to mask the brief gap during gesture bar animation */ .header::before { content: ''; position: absolute; top: -100px; left: 0; right: 0; height: 100px; background-color: var(--color-header-bg); } .header h1 { font-size: 1.5rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .header-actions { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .header-username { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } /* Card */ .card { background-color: var(--color-surface); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); } .card.mb-sm { margin-bottom: var(--space-3); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-outline); } .card-title { font-size: 1.1rem; font-weight: 600; } .card-body { font-size: 0.9rem; } .card-inset { box-shadow: none; border: 1px solid var(--color-outline); margin-bottom: 0; padding: 0.5rem 0.75rem; } .card-inset .card-header { padding-bottom: 0.25rem; margin-bottom: 0.25rem; border-bottom: none; } .card-header .btn { background: transparent; color: var(--color-on-surface-muted); border: none; padding: 0 0.25rem; box-shadow: none; } .card-inset .card-title { font-size: 0.875rem; } .doc-id-badge { font-size: 0.75rem; color: var(--color-on-surface-muted); } /* Button */ .btn { /* inline-flex (not the browser default `inline` for ) so vertical padding and margins take up layout space instead of painting over adjacent lines. An inline otherwise overlaps the text above it. */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 1px solid transparent; /* variants set the edge color; keeps all buttons the same size */ border-radius: var(--radius-md); font-size: 1rem; /* Browsers don't give