/* ============================================================================ JAT design tokens — from the "Just Ask Them Web Style Guide" Figma file bQsd66bE6fyMR3jdDsk3g6. Values below are taken from the file's published variables and from get_design_context on the Sidenav component, not eyeballed from screenshots. Figma variable names are quoted so the mapping stays checkable. The brand colour is unchanged: Figma "Green" #AFBC21 is the same lime tabler-brand.css already pins as --tblr-primary. What the new design changes is the LAYOUT SYSTEM (vertical sidebar, card surfaces, table treatment), not the palette. Load order: after tabler.min.css and tabler-brand.css, before page CSS. ============================================================================ */ /* ---------------------------------------------------------------------------- Inter — self-hosted, matching how assets/tabler is already served. No request to fonts.googleapis.com, so the app does not depend on Google being reachable and no page load leaks a referrer to a third party. Google now ships Inter as a VARIABLE font, so one file per unicode subset covers the whole 100-900 range — two files instead of the eight a static 400/500/600/700 set would need. 133 KB total. Only latin and latin-ext are shipped: the app is English with some French accents, so cyrillic/greek/vietnamese subsets would be dead weight. Add them from the same Google CSS if the app is ever localised further. ---------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* variable axis */ font-display: swap; src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------------------- Cancel Tabler's scrollbar-gutter offset. assets/tabler/css/tabler.min.css ships: @media (min-width: 992px) { :host, :root { margin-left: calc(100vw - 100%); margin-right: 0 } } It reserves the scrollbar width as a left margin so the page does not jump when a scrollbar appears. With the full-bleed sidebar layout that reads as an unwanted gap down the left edge instead. Overridden here rather than edited in the vendored file: tabler.min.css is a third-party dist, and patching it means the next re-download silently undoes the fix with nothing to show why. Equal specificity plus a later load order is enough to win — no !important needed, and media queries add no specificity, so this unconditional rule also beats the ≥992px one. Note this applies to every page, not only the redesigned ones, since Tabler was already applying the offset app-wide. ---------------------------------------------------------------------------- */ :host, :root { margin-left: 0; margin-right: 0; } :root { /* --- Palette (Figma variables, verbatim) ------------------------------ */ --jat-green: #AFBC21; /* "Green" — primary action, active accents */ --jat-black: #2B2C30; /* "Black" — primary text, active nav, dark buttons */ --jat-gray: #C9CACC; /* "Gray" — borders, section labels */ --jat-white: #FFFFFF; /* "White" — card surfaces */ --jat-gray-mid: #8E8E93; /* "Grays/Gray" — secondary text */ --jat-gray-dark: #6F7074; /* "Dark Gray" — tertiary text, muted labels */ --jat-mint: #76C38B; /* "Mint Green" — success, icon buttons, help badge */ --jat-field-stroke: #3c3c434a; /* "Miscellaneous/Text Field - Outline" (has alpha) */ /* Page ground. The mockups sit cards on a very light neutral, not pure white. */ --jat-bg: #F7F7F8; /* --- Typography ------------------------------------------------------- */ /* Inter, weight 500 throughout the nav; the app currently loads only Cuprum, so Inter has to be added to styles.view.php for this to take effect. */ --jat-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --jat-fs-page-title: 32px; /* "Surveys" / "Dashboard" page heading */ --jat-fs-card-title: 20px; /* "Client Surveys", "Recent Surveys" */ --jat-fs-nav: 18px; /* sidebar item label */ --jat-fs-body: 14px; /* table cells, form labels */ --jat-fs-label: 16px; /* MAIN MENU / PROFILE / SYSTEM */ --jat-fs-small: 14px; /* meta text, timestamps */ --jat-label-tracking: 1.92px; /* section labels are widely tracked */ /* --- Text hierarchy — style guide §03 Typography (364:9641) ------------- Typefaces frame (364:9509) declares ONE family: Inter, in Regular / Medium / Bold. (Some unused named styles in the file still reference Mulish; the guide's Typefaces page does not, so it is not loaded.) Heading 1-6 Bold 40 32 30 24 22 20 lh 1.3 Subheading 1-5 Medium 20 18 16 14 12 lh 1.3 Body 1-6 Regular / Medium / Bold 24 20 18 16 14 12 lh 1.5 The sizes the app already uses were a subset of this and matched; what was missing is the two line-height rules. */ --jat-lh-heading: 1.3; --jat-lh-body: 1.5; --jat-fs-h1: 40px; --jat-fs-h2: 32px; --jat-fs-h3: 30px; --jat-fs-h4: 24px; --jat-fs-h5: 22px; --jat-fs-h6: 20px; /* --- Field palette — style guide §05 Input Fields (367:12992) ----------- Published variables from that section, plus two values read off the native-resolution render because the design did not tokenise them. */ --jat-light-1: #DDE5E9; /* "Light / Light 1" */ --jat-light-3: #F2F2F5; /* "Light / Light 3" — inactive field fill */ --jat-light-4: #FAFAFC; /* "Light / Light 4" — subtlest surface */ --jat-dark-1: #3A3A3C; /* "Dark / Dark 1" — field text */ --jat-dark-2: #6B7588; /* "Dark / Dark 2" — assistive text */ /* "Miscellaneous/Text Field - Outline" — black at 29%, which is what the rendered field borders sample to. */ --jat-field-border: #3c3c434a; /* Error red, sampled from the Error state at native resolution: #FF0004. It measures 4.00:1 on white — enough for a BORDER (1.4.11 asks 3:1) but not for message TEXT (1.4.3 asks 4.5:1), so the text tone is darkened to 5.03:1. Same red, one step down. */ --jat-danger: #FF0004; --jat-danger-text: #E00004; /* --- Button scale — style guide §04 "Button & Link" (365:10658) --------- The guide ships five sizes; each states its own vertical padding, horizontal padding, font size and icon size: Extra Small 12 / 16 14px icon 14px <- the app default Small 12 / 20 16px icon 16px Normal 18 / 24 18px icon 18px Large 18 / 24 20px icon 20px Extra Large 18 / 24 22px icon 22px Extra Small is the default because this app's screens are far denser than the mockups. The other four are opt-in classes in jat-components.css that simply re-declare these four properties on the element, so the button rule itself never needs to know which size it is. */ --jat-btn-py: 12px; --jat-btn-px: 16px; --jat-btn-fs: 14px; --jat-btn-icon: 14px; /* --- Shape and rhythm ------------------------------------------------- */ --jat-radius-sm: 6px; --jat-radius: 8px; /* nav items, buttons, inputs */ --jat-radius-lg: 12px; /* cards */ --jat-nav-pad-x: 12px; --jat-nav-pad-y: 20px; --jat-nav-gap: 16px; /* icon -> label */ --jat-icon: 24px; --jat-sidebar-w: 283px; /* content width inside the sidebar */ --jat-sidebar-pad: 25px; --jat-card-pad: 24px; --jat-card-gap: 24px; /* --- Elevation -------------------------------------------------------- The mockups use a very soft shadow; cards read as raised only slightly. */ --jat-shadow: 0 1px 2px rgba(43, 44, 48, .04), 0 4px 16px rgba(43, 44, 48, .06); } /* ---------------------------------------------------------------------------- Role badge colours. "Super Admin" is green, "Client Admin" is amber — the two are distinguished by colour alone in the design, so the label text must stay present for anyone who cannot rely on that. ---------------------------------------------------------------------------- */ :root { --jat-role-super-bg: #8FD5A6; --jat-role-super-fg: #14361F; --jat-role-client-bg: #F0B429; --jat-role-client-fg: #3D2A00; } /* ---------------------------------------------------------------------------- Report series colours, read from the bar/line charts in style-guide §08. Deliberately kept as a named list so charts can be driven from tokens rather than hardcoding hex per page. ---------------------------------------------------------------------------- */ :root { --jat-series-1: #4BC15F; /* Accounting */ --jat-series-2: #3B77E8; /* Administrative */ --jat-series-3: #E33B2E; /* Marketing */ --jat-series-4: #F55FD4; /* Operations */ --jat-series-5: #F5CE2E; /* Sales */ }