/*! * Typography — Days One (display) + DM Sans (text). * * Presentation only. Loaded after Tailwind and app.css so it can win the * cascade; no markup, class or behaviour is touched. * * Days One ships a single weight (400) and is already visually heavy, so every * element that uses it is pinned to 400 — asking for 700 would make the browser * synthesise a fake bold, which renders blurry and uneven. * * 'Hind Siliguri' sits in both stacks ahead of 'Nirmala UI' to cover Bengali * glyphs — the taka sign (৳ U+09F3) and, once the interface is switched to * Bangla, every word on the screen. It is self hosted next to the Latin * faces, so Bangla needs no connection either. Latin still resolves to * DM Sans / Days One, which come first in each stack. */ :root { --font-display: 'Days One', 'Hind Siliguri', 'Nirmala UI', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'DM Sans', 'Hind Siliguri', 'Nirmala UI', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; } /* ------------------------------------------------------------------ Base text — DM Sans. `.tw-font-sans` on declares Inter at (0,1,0), so these selectors are written to outrank it. ------------------------------------------------------------------ */ html body, body.tw-font-sans, body.skin-purple, body.lockscreen { font-family: var(--font-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Form controls and tables do not inherit the body face on their own */ body input, body select, body textarea, body optgroup, body .form-control, body table, body .select2-container, body .dataTables_wrapper { font-family: inherit; } /* ------------------------------------------------------------------ Display face — Days One ------------------------------------------------------------------ */ /* Headings. font-weight is forced because Tailwind's .tw-font-bold (0,1,0) would otherwise win and make the browser synthesise a fake bold from Days One's single weight — which renders blurry. Days One is already heavy at 400. */ body h1, body h2, body h3, body h4, body h5, body h6, body .modal-title, body .box-title, body .panel-title { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: -.005em; } /* Buttons */ body .btn, body button, body [class*="tw-dw-btn"], body input[type="submit"], body input[type="button"] { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: .002em; } /* Sidebar */ body #side-bar a, body .side-bar-heading, body aside.side-bar .tw-text-gray-400 { font-family: var(--font-display); font-weight: 400 !important; } /* Top bars. `.theme-header-bg` is on the admin navbar AND on the dashboard banner, and the banner wraps the whole stat grid — so this must target the navbar (.no-print) plus the banner's own heading only, never every div inside it, or the stat labels and figures would turn into a display face too. */ body .theme-header-bg.no-print, body .theme-header-bg.no-print strong, body .theme-header-bg.no-print span, body .theme-header-bg:not(.no-print) > .tw-px-5 h1, body .pos-header, body .pos-header strong, body .pos-header > div > div > div > span { font-family: var(--font-display); font-weight: 400 !important; } /* ------------------------------------------------------------------ Where Days One must NOT win ------------------------------------------------------------------ */ /* Data stays in DM Sans: it is read, compared and scanned, and Days One has no tabular figures and only one weight. */ body .pos-header input, body .pos-header .form-control, body table td, body table th, body .dataTables_wrapper, body .select2-container, body input, body select, body textarea { font-family: var(--font-text); } /* Money and counters: DM Sans with tabular figures. The dashboard tiles carry .tw-font-mono, which reads as a different family from everything around it, so the text face is restored and the columns are aligned with tnum instead. */ body .display_currency, body .total_sell, body .total_purchase, body .invoice_due, body .total_expense, body .product_price, body .serial_entry_count, body .pos_line_total_text, body td .display_currency, body .tw-ring-1 .tw-font-mono { font-family: var(--font-text); font-variant-numeric: tabular-nums; } /* Serial numbers and SKUs stay monospaced — they are codes, not prose */ body .serial-modal__serial, body .serial-modal__scan input, body .serial_numbers_input, body .bulk_paste_input { font-family: var(--font-mono); } /* Icon fonts are deliberately NOT touched here. Font Awesome and Glyphicons set their own font-family on .fa / .glyphicon; any rule of ours on those selectors would outrank theirs (extra `body` raises specificity) and the glyphs would render as tofu. Nothing above targets `i` or `.fa`, and icons do not inherit because their own rule is an explicit declaration. */ /* ------------------------------------------------------------------ Days One is wide — protect the tight spots from overflow ------------------------------------------------------------------ */ body #side-bar a span { letter-spacing: -.01em; } body .pos-form-actions button { letter-spacing: -.01em; }