/* ========================================================================== echoSignals — typography and shape ========================================================================== Replaces the SmartAdmin theme layer rather than sitting on top of one: load this INSTEAD of css/themes/.css. It redefines the Bootstrap 5.3 tokens and the template's own shell variables, so every template component — cards, tables, dropdowns, alerts, the header, the sidebar, the drawers — follows it without any selector being overridden. Generated from a verified palette. Every text colour in here clears WCAG AA (4.5:1) on all three surfaces of its mode and, where it is used as a pill, on its own 12% tint as well. Profit and loss additionally hold a 12+ point L* gap and dE 19+ across protan/deutan/tritan, so they stay distinct when hue is gone entirely — the one pair in a trading panel that must never be confused, because both are bare numbers with no icon to fall back on. Two things this theme deliberately does not do: * it never assumes the accent is legible as text. The fill, the link colour and the ink that goes on the fill are three separate tokens, solved per mode. A deep blue happens to serve as both fill and link; the previous gold was 2.4:1 on white and could serve as neither. * it does not make colour the only signal. Green/amber/red collapse under deuteranopia no matter how they are chosen, so every status pill carries an icon and a word, and every money figure carries an explicit + or -. ========================================================================== */ /* --- type ----------------------------------------------------------------- Archivo for the interface: a grotesque with a slightly narrow set width, which buys real estate back in dense tables, and true tabular figures. JetBrains Mono for tickets, logins, hosts and prices: it was drawn for reading code, so 0/O and 1/l/I are unmistakable — which matters when the string is an account number a client is about to retype. Both are variable, latin + latin-ext, self-hosted (SIL OFL). No network dependency, so the panel looks the same on a locked-down desktop. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- type scale ------------------------------------------------------ 14px base, not 16. A trading panel is a data instrument: the reader is scanning a table of forty rows, not reading prose, and 16px forces the columns apart until the table needs scrolling that 14px does not. The steps are deliberately close together at the bottom, where almost all the text lives, and open up only for display numbers. 11px exists for one job — uppercase tracked micro-labels, which read a size larger than they measure — and nothing a client must read is set below 12px. */ --es-text-nano: 0.6875rem; /* 11px uppercase micro-labels only */ --es-text-xs: 0.75rem; /* 12px table meta, timestamps, help */ --es-text-sm: 0.8125rem; /* 13px secondary body, table cells */ --es-text-base: 0.875rem; /* 14px body, controls */ --es-text-md: 0.9375rem; /* 15px card titles */ --es-text-lg: 1.0625rem; /* 17px section headings */ --es-text-xl: 1.25rem; /* 20px page titles */ --es-text-2xl: 1.625rem; /* 26px KPI values */ --es-text-3xl: 2.125rem; /* 34px hero figures */ --es-lh-tight: 1.15; /* display numbers */ --es-lh-snug: 1.35; /* headings, table cells */ --es-lh-base: 1.55; /* body copy */ /* Archivo tightens well at display sizes and needs tracking out when set small and uppercase. Both are set once here and applied by role. */ --es-track-tight: -0.021em; --es-track-label: 0.062em; --es-font-sans: 'Archivo', 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --es-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --bs-font-sans-serif: var(--es-font-sans); --bs-font-monospace: var(--es-font-mono); --bs-body-font-family: var(--es-font-sans); --bs-body-font-size: var(--es-text-base); --bs-body-line-height: var(--es-lh-base); --bs-body-font-weight: 400; /* --- shape ------------------------------------------------------------ One step larger than Bootstrap's default. Cards at 10px read as panels rather than boxes; controls stay tighter at 7px so a field never looks like a pill. */ --es-radius-sm: 0.4375rem; /* 7px inputs, small buttons */ --es-radius: 0.625rem; /* 10px cards, panels */ --es-radius-lg: 0.875rem; /* 14px modals, drawers */ --bs-border-radius-sm: var(--es-radius-sm); --bs-border-radius: var(--es-radius); --bs-border-radius-lg: var(--es-radius-lg); --bs-border-radius-xl: 1.125rem; --bs-border-radius-pill: 999px; --bs-card-border-radius: var(--es-radius); --bs-card-inner-border-radius: calc(var(--es-radius) - 1px); --bs-modal-border-radius: var(--es-radius-lg); --bs-dropdown-border-radius: var(--es-radius); } /* --- shadows -------------------------------------------------------------- Light mode only, and barely there: cards are separated by their own white against a warm canvas, so the shadow is a hint of depth rather than the thing doing the separating. On dark they are removed outright — a shadow on a near-black ground renders as nothing at all. */ :root { --es-shadow-sm: 0 1px 2px rgba(23, 26, 29, 0.05); --es-shadow: 0 1px 3px rgba(23, 26, 29, 0.06), 0 8px 24px -12px rgba(23, 26, 29, 0.10); --es-shadow-lg: 0 2px 6px rgba(23, 26, 29, 0.07), 0 24px 48px -20px rgba(23, 26, 29, 0.16); --app-shadow-sm: var(--es-shadow-sm); --app-shadow: var(--es-shadow); --app-shadow-lg: var(--es-shadow-lg); --bs-box-shadow-sm: var(--es-shadow-sm); --bs-box-shadow: var(--es-shadow); --bs-box-shadow-lg: var(--es-shadow-lg); } :root[data-bs-theme="dark"] { --es-shadow-sm: none; --es-shadow: none; --es-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7); --app-shadow-sm: none; --app-shadow: none; --app-shadow-lg: var(--es-shadow-lg); --bs-box-shadow-sm: none; --bs-box-shadow: none; --bs-box-shadow-lg: var(--es-shadow-lg); } /* --- applying the type ----------------------------------------------------- Tokens alone do not change the template's own sizes, so the roles that matter are set explicitly. Everything here is a size, weight, tracking or numeral setting: no colour, no layout. */ body { font-family: var(--es-font-sans); font-size: var(--es-text-base); line-height: var(--es-lh-base); font-weight: 400; background-color: var(--es-canvas); color: var(--es-text); /* Archivo's default figures are proportional. Everything in this panel is either a number in a column or a label above one, so tabular is the right default and the exceptions are nil. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, kbd, pre, samp, .es-code, .font-monospace { font-family: var(--es-font-mono); font-variant-ligatures: none; /* -> and != must stay two glyphs in an ID */ } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--es-font-sans); font-weight: 600; line-height: var(--es-lh-snug); letter-spacing: var(--es-track-tight); color: var(--es-text); } /* The page title. Uppercase and tracked rather than large: it identifies the page without competing with the numbers, which are the actual content. */ .subheader-title { font-size: var(--es-text-xs); font-weight: 600; letter-spacing: var(--es-track-label); text-transform: uppercase; color: var(--es-text-2); text-shadow: none; } .card-header { font-size: var(--es-text-base); } .card-header .fw-500 { font-size: var(--es-text-md); letter-spacing: -0.006em; } .fs-nano { font-size: var(--es-text-nano); } .fs-xs { font-size: var(--es-text-xs); } .fs-sm { font-size: var(--es-text-sm); } .fs-md { font-size: var(--es-text-md); } .fs-lg { font-size: var(--es-text-lg); letter-spacing: -0.012em; } .fs-xl { font-size: var(--es-text-xl); letter-spacing: var(--es-track-tight); } .fw-500 { font-weight: 500; } .app-breadcrumb .breadcrumb { font-size: var(--es-text-xs); } .form-label { font-size: var(--es-text-xs); font-weight: 500; color: var(--es-text-2); margin-bottom: 0.3rem; } .form-control, .form-select, .input-group-text { font-size: var(--es-text-base); border-color: var(--es-border-input); border-radius: var(--es-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--es-accent); box-shadow: 0 0 0 3px rgba(var(--es-accent-rgb), 0.18); } .btn { font-size: var(--es-text-base); font-weight: 500; border-radius: var(--es-radius-sm); } .btn-sm { font-size: var(--es-text-sm); } .btn-lg { font-size: var(--es-text-md); }