/* * Local overrides for the vendored digit-ui CSS bundle. Loaded AFTER * /digit-ui/vendor/digit-ui-css.css in public/index.html so rules here * win by cascade without !important. Keep this file small — anything * structural should go upstream to @egovernments/digit-ui-css. */ /* Pre-MDMS pages (login screen, splash) render BEFORE the tenant theme * loads — they always pick up vendor :root defaults regardless of which * tenant this build is deployed to. Don't try to themed them per-tenant * here; let them stay tenant-neutral and good-looking on DIGIT defaults. * The CSS-var-driven polish blocks below still apply, but their var * references resolve to DIGIT defaults pre-MDMS — which is the intent. */ /* Citizen home: align ServicesSection top padding with the 15px side * padding so the gap above the cards matches the gap on the sides * (closes egovernments/CCRS#421). Upstream digit-ui-css 1.8.37 sets * top padding to 40px, which looks off on tenants whose banner image * isn't tall enough to absorb the gap. */ .HomePageWrapper .ServicesSection { padding: 15px 15px 0; } @media (min-width: 780px) { .HomePageWrapper .ServicesSection { padding: 15px 15px 0; width: 100%; } } /* Employee landing logos — upstream sizes the banner logo at 50px which * crops the NCCG coat-of-arms badly. Constrain by max-width and let * the image scale, keeping object-fit so the SVG isn't squashed * (closes egovernments/CCRS#443 sub-7). */ .bannerCard .bannerHeader .bannerLogo, .languageSelection .bannerHeader .bannerLogo { max-width: 96px; max-height: 96px; width: auto; height: auto; object-fit: contain; } /* Employee language-selection card — vendor wraps each language button * in `.language-button-container` and applies `margin: 0 4.65% 0 0` to the * `.customBtn` itself, so per-row gap is calculated against the parent * card width and the wrapped 4th button (German) ends up alone on a * second row, ragged against the wide gaps on row 1 (Subhashini flagged * "alignment of the buttons is off" — egovernments/CCRS#500). The JSX * inline-style now sets `justify-content: center; gap: 12px` so the rows * align centered with consistent spacing; zero the per-button margin * here so `gap` is the sole spacing source. */ .bannerCard.languageSelection .language-selector .customBtn, .bannerCard.languageSelection .language-selector .customBtn-selected { margin: 0 !important; } /* Radio button layout — vendor's `.digit-radio-options-wrap .digit-radio-btn` * declares `position:absolute; height:1.5rem; width:1.5rem` but the cascade * loses to a generic `input` rule somewhere upstream, so the input ends up * `position:relative; 16x16` IN-flow. That pushes the visible * `.digit-radio-btn-checkmark` down — circle and selected-dot end up beside * each other (Subhashini flagged "Assigned to All / Assigned to Me"). Restate * the absolute-overlay positioning at higher specificity + !important so the * input sits invisibly on top of the checkmark and the dot lands inside the * ring. */ .digit-radio-options-wrap .digit-radio-btn-wrap, .radio-wrap .radio-btn-wrap { width: 1.5rem; height: 1.5rem; } .digit-radio-options-wrap .digit-radio-btn-wrap .digit-radio-btn, .radio-wrap .radio-btn-wrap .radio-btn { position: absolute !important; top: 0 !important; left: 0 !important; width: 1.5rem !important; height: 1.5rem !important; margin: 0 !important; } /* Older react-components Radio variant uses `.radio-wrap` / * `.radio-btn-wrap` / `.radio-btn-checkmark` (no `digit-` prefix). The * checkmark span ships statically positioned, so when the input above * it is in flow rather than absolutely overlapped, the ring renders * BELOW the label text and the selected dot lands beside the ring. Make * the wrap relative + position the checkmark absolutely on top of the * input rect. Also lay out each radio option (`.radio-wrap > div`) as * a flex row so the ring + label sit on the same baseline. */ .radio-wrap > div { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 8px !important; } .radio-wrap > div > label { margin: 0 !important; } .radio-wrap .radio-btn-wrap { position: relative !important; display: inline-block !important; flex: 0 0 auto !important; } .radio-wrap .radio-btn-wrap .radio-btn-checkmark { position: absolute !important; top: 0 !important; left: 0 !important; width: 1.5rem !important; height: 1.5rem !important; /* Both the input and the checkmark span are absolute-positioned over * the same 24x24 area; the checkmark sits later in DOM and would * otherwise paint above the input and intercept clicks. Disable * pointer events on the visual ring so the click goes through to the * input. */ pointer-events: none !important; } .radio-wrap .radio-btn-wrap .radio-btn-checkmark:after { pointer-events: none !important; } /* Ensure the input itself stays above the checkmark in the stacking * order and accepts pointer events. */ .radio-wrap .radio-btn-wrap .radio-btn { z-index: 1 !important; pointer-events: auto !important; cursor: pointer !important; } /* Selected-dot pseudo for the unprefixed radio: vendor sets dot to * 1.25rem with `top: 10px; left: 10px` which (combined with our 24px * ring) places the dot's top-left at (10,10) and overflows the ring * down-right. Shrink to 0.75rem and center on the ring. */ .radio-wrap .radio-btn-wrap input:checked ~ .radio-btn-checkmark:after { width: 0.75rem !important; height: 0.75rem !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Privacy-checkbox row breathing room. Vendor stacks the row with * `.digit-privacy-checkbox { margin-top: -1.5rem; margin-bottom: -2.5rem }` * + `.digit-privacy-checkbox-align { margin-top: -1.5rem !important }`, * which yanks the "I agree" line up underneath the field above it (Subhashini * flagged this on the employee login). Reset to a small positive gap so the * row reads as its own block. The ::#65 click-eat fix moved the submit button * into its own stacking layer, so the negative margin no longer protects * the button hit-area — safe to drop. */ .digit-privacy-checkbox, .digit-privacy-checkbox-align { margin-top: 0.75rem !important; margin-bottom: 0 !important; } /* Login submit button hit-area (closes egovernments/CCRS#443 sub-9). * * The PrivacyComponent sibling rendered just above the submit button has * `.digit-privacy-checkbox { margin-bottom: -2.5rem }` — exactly the * button height — combined with `.digit-privacy-checkbox-align * { position: relative !important }`. Because the privacy row is * positioned and the button is static, CSS paints the positioned * sibling above the static one regardless of DOM order, so the lower * ~2.5rem of the privacy row overlays the upper portion of the button * and intercepts pointer events. Promote the button into its own * stacking layer so it sits above the privacy row across the whole * rendered area. */ .loginCardClassName button[type="submit"], .login-form-container button[type="submit"], .bannerCard button[type="submit"] { cursor: pointer; position: relative; z-index: 1; } .loginCardClassName button[type="submit"] *, .login-form-container button[type="submit"] *, .bannerCard button[type="submit"] * { pointer-events: none; } /* ─── v3 designer-1:1 surgical overrides ────────────────────────────────── * * These rules wire CSS vars introduced for the v3 schema (designer's New * System spreadsheet) to elements whose upstream rules either hard-coded * a hex or collapsed two distinct semantic roles onto one var. Each block * cites the designer's role from the spreadsheet so the rationale is * traceable. Loaded after the vendored CSS, so wins by cascade — !important * is reserved for selectors where upstream rules have higher specificity * (e.g. ".citizen .sidebar .sidebar-link.active" is .2.0 specificity). */ /* Sidebar selected pill — designer's "Sidebar / Selected Background" * (Nairobi: #FEC931 yellow). Upstream uses --color-primary-main directly; * promotes to a dedicated var so a tenant whose brand color isn't yellow * can have a non-brand selected pill. */ .citizen .sidebar .sidebar-link.active, .citizen .sidebar .dropdown-link.active, .citizen .sidebar .dropdown-link.active.level-1, .citizen .sidebar .dropdown-link.active.level-2, .employee .sidebar .sidebar-link.active, .digit-side-nav-active, .digit-side-nav-item.selected, .digit-side-nav-item.active { background-color: var(--color-sidebar-selected-bg, #c84c0e) !important; color: var(--color-sidebar-selected-text, #FFFFFF) !important; } .citizen .sidebar .sidebar-link.active svg, .citizen .sidebar .sidebar-link.active svg path, .employee .sidebar .sidebar-link.active svg, .employee .sidebar .sidebar-link.active svg path, .digit-side-nav-item.active svg, .digit-side-nav-item.active svg path { fill: var(--color-sidebar-selected-text, #FFFFFF) !important; } /* Sidebar default (non-active) text — designer's "Sidebar / Text Default" * (Nairobi: #D1D5DB). Upstream uses #FFF for everything; differentiates * active vs idle items. */ .citizen .sidebar .sidebar-link, .employee .sidebar .sidebar-link, .digit-side-nav-item:not(.active):not(.selected) { color: var(--color-sidebar-text-default, #D1D5DB); } /* Primary button hover — designer's "Primary Button / Background Hover" * (Nairobi: #E6B800). Upstream often uses theme(colors.primary.dark) * which compiles to a literal; this lets a tenant set a distinct hover * color (typically a darker shade of brand-default). */ .digit-btn.primary:hover, .digit-button.primary:hover, .digit-button-primary:hover, button.digit-submit-bar:hover, button[class*="submit-bar"]:hover { background-color: var(--color-button-primary-bg-hover, #B8420C) !important; color: var(--color-button-primary-text, #FFFFFF) !important; } /* Primary button pressed — designer's "Primary Button / Background Pressed" * (Nairobi: #CC9F00). Active state during click. */ .digit-btn.primary:active, .digit-button.primary:active, .digit-button-primary:active, button.digit-submit-bar:active, button[class*="submit-bar"]:active { background-color: var(--color-button-primary-bg-pressed, #A03A0A) !important; } /* Foreground (text + svg) on primary-2 surfaces. Vendor hardcodes * `color: rgba(255,255,255,…)` inside `.digit-button-primary h2` / * `.digit-submit-bar h2`, which fails WCAG once MDMS swaps the primary * surface to a light brand colour (Nairobi yellow #FEC931). Route through * --color-text-primary (kenya-green sets it to #0B0C0C ≈ black) so the * contrast colour stays theme-configurable without introducing a new var. */ .digit-button-primary, .digit-button-primary h2, .digit-button.primary, .digit-btn.primary, button.digit-submit-bar, button[class*="submit-bar"], .digit-submit-bar h2 { color: var(--color-text-primary, #0B0C0C) !important; } .digit-button-primary svg, .digit-button-primary svg path, .digit-submit-bar svg, .digit-submit-bar svg path, button.digit-submit-bar svg, button.digit-submit-bar svg path, button[class*="submit-bar"] svg, button[class*="submit-bar"] svg path { fill: var(--color-text-primary, #0B0C0C) !important; color: var(--color-text-primary, #0B0C0C) !important; } /* Input focus border — designer's "Inputs / Border Focus" (Nairobi: #204F37, * primary-1). Upstream typically uses outline:black; this gives focus a * brand-aware ring. */ .digit-text-input input:focus, .digit-form-input:focus, input.digit-input-text:focus, input[type="text"].digit-input:focus, input[type="email"]:focus, input[type="password"]:focus, .digit-employee-form-field input:focus, .digit-textarea:focus, textarea.digit-textarea:focus { border-color: var(--color-input-border-focus, #c84c0e) !important; outline: 2px solid var(--color-input-border-focus, #c84c0e) !important; outline-offset: 0 !important; } /* Input error border — designer's "Inputs / Border Error" (Nairobi: #C62828, * status-error-border). When a field has a validation error class, its * border picks up the dedicated error border var. */ .digit-text-input.digit-error input, .digit-text-input input.error, .digit-form-error input, input.digit-input-error, input[aria-invalid="true"] { border-color: var(--color-input-border-error, #D4351C) !important; } /* Input placeholder — designer's "Inputs / Placeholder" (Nairobi: #9CA3AF, * matches text-disabled). */ .digit-text-input input::placeholder, .digit-form-input::placeholder, input.digit-input::placeholder, textarea.digit-textarea::placeholder { color: var(--color-input-placeholder, #9CA3AF); opacity: 1; } /* Input label — designer's "Inputs / Label" (Nairobi: #4B5563). Upstream * uses --color-text-secondary which is too light per designer. */ .digit-text-input label, .digit-form-field label, .digit-card-label, label.digit-form-field-label { color: var(--color-input-label, #4B5563); } /* Input helper text — designer's "Inputs / Helper" (Nairobi: #6B7280). */ .digit-form-helper-text, .digit-form-field-helper, .digit-helper-text, .digit-input-helper { color: var(--color-input-helper, #6B7280); } /* Tables hover row — designer's "Tables / Hover" (Nairobi: #FFF4D7, * primary-1-bg tint). Replaces upstream rules that use grey-mid or * grey-lighter for hover, which doesn't carry brand identity. */ .digit-table tbody tr:hover, .digit-data-table tbody tr:hover, table.digit-table-main tbody tr:hover, .digit-table-row:hover { background-color: var(--color-table-hover, #FBEEE8) !important; color: var(--color-table-hover-text, var(--color-text-primary, #0B0C0C)) !important; } /* Tables selected row — designer's "Tables / Selected" (Nairobi: #FFF4D7). */ .digit-table tbody tr.selected, .digit-table tbody tr.active, .digit-data-table tbody tr.selected, .digit-table-row.selected, .digit-table-row.active { background-color: var(--color-table-selected, #FBEEE8) !important; color: var(--color-table-selected-text, var(--color-primary-1, #c84c0e)) !important; } /* Tables header — designer's "Tables / Header Background" (Nairobi: * #F3F4F6) and "Header Text" (#204F37, primary-1). */ .digit-table thead, .digit-table thead th, .digit-data-table thead, .digit-data-table thead th, table.digit-table-main thead { background-color: var(--color-table-header-bg, #F3F4F6); } .digit-table thead th, .digit-data-table thead th, table.digit-table-main thead th { color: var(--color-table-header-text, var(--color-primary-1, #c84c0e)); } /* Tables alternate row stripe — designer's "Tables / Alternate Row" * (Nairobi: #FAFAFA, page-secondary-bg). */ .digit-table tbody tr:nth-child(even):not(:hover):not(.selected):not(.active), .digit-data-table tbody tr:nth-child(even):not(:hover):not(.selected):not(.active) { background-color: var(--color-table-alt-row, #FAFAFA); } /* Tooltip — designer's "Misc / Tooltip Background" (Nairobi: #204F37, * primary-1) + "Tooltip Text" (#FFFFFF). Upstream tooltip rules vary * across components; this catches the common selectors. */ .digit-tooltip, .digit-tooltip-content, [role="tooltip"], .tippy-box, .tippy-content { background-color: var(--color-tooltip-bg, #22394D) !important; color: var(--color-tooltip-text, #FFFFFF) !important; } /* Loader / progress — designer's "Misc / Loader" + "Progress" (both * Nairobi: #204F37, primary-1). */ .digit-loader, .digit-loader-spinner, .digit-progress-bar-fill, .digit-progress-fill { border-color: var(--color-loader, #c84c0e); background-color: var(--color-progress, #c84c0e); } /* Status alerts — designer splits Text / Border / Background into three * distinct roles (was 2 vars: text+border collapsed into --color-error, * --color-success etc.). v3 lets a tenant tint borders darker than text * or vice-versa. */ .digit-alert-success .digit-alert-text, .digit-alert.digit-success-alert, .digit-toast-success .digit-toast-text { color: var(--color-status-success-text, #00703C); border-left-color: var(--color-status-success-border, #00703C); background-color: var(--color-status-success-bg, #BAD6C9); } .digit-alert-error .digit-alert-text, .digit-alert.digit-error-alert, .digit-toast-error .digit-toast-text { color: var(--color-status-error-text, #D4351C); border-left-color: var(--color-status-error-border, #D4351C); background-color: var(--color-status-error-bg, #EFC7C1); } .digit-alert-warning .digit-alert-text, .digit-alert.digit-warning-alert, .digit-toast-warning .digit-toast-text { color: var(--color-status-warning-text, #9E5F00); border-left-color: var(--color-status-warning-border, #9E5F00); background-color: var(--color-status-warning-bg, #FFF4D6); } .digit-alert-info .digit-alert-text, .digit-alert.digit-info-alert, .digit-toast-info .digit-toast-text { color: var(--color-status-info-text, #0057BD); border-left-color: var(--color-status-info-border, #0057BD); background-color: var(--color-status-info-bg, #C7E0F1); } /* Header bar — designer's "Header / Background" (Nairobi: #204F37, primary-1) * + "Header / Text" (#FFFFFF). v2 used --color-secondary for navbar bg * (which is fine — primary-1 writes there too); this also explicitly sets * header text/icon vars so a tenant can theme them without inheriting * from header-sidenav. */ .navbar, .digit-employee-header, .digit-topbar.light { /* bg already inherited from --color-secondary via primary-1 fan-out; these overrides apply when the header uses its own bg var instead. */ background-color: var(--color-header-bg, var(--color-secondary, #22394D)); } .navbar, .digit-topbar.light, .digit-employee-header { color: var(--color-header-text, #FFFFFF); } .navbar svg, .navbar svg path, .digit-topbar.light svg, .digit-topbar.light svg path, .digit-employee-header svg, .digit-employee-header svg path { fill: var(--color-header-icon, var(--color-header-text, #FFFFFF)); } /* Page surfaces — designer's "Page / Background" (#FFFFFF) + * "Page / Secondary Background" (#FAFAFA). Set on the root document so * nothing requires bg overrides per-page. */ html, body { background-color: var(--color-page-bg, #FFFFFF); color: var(--color-text-primary, #0B0C0C); } /* ─── SVG fill / stroke override ────────────────────────────────────────── * * Upstream SVG icon components (packages/svg-components and inline JSX * paths) hard-code DIGIT-brand hex values as `fill="#c84c0e"` on * / / elements. That's a presentation attribute with * specificity 0,0,0 — any CSS rule that matches the element overrides it. * * Mapping the canonical DIGIT defaults to their v3 CSS vars makes those * SVG icons themable without editing a single SVG file. Tenants whose * v3 record sets a non-orange brand color get themed icons automatically. * * Case-insensitive attribute match (`i` flag, CSS Selectors Level 4 — * supported in all modern browsers since 2018) handles both #c84c0e * and #C84C0E. Only canonical 6-digit hex matches; alpha-suffixed * variants like `#c84c0e80` are deliberately untouched (they signal an * intentional partial-opacity tint, not a primary fill). * * Each rule covers fill AND stroke so icons that use stroke for their * outline (line icons rather than filled glyphs) follow theme too. */ /* DIGIT primary-main (#c84c0e) → v3 primary-2 / button-primary */ [fill="#c84c0e" i], [fill="#C84C0E" i] { fill: var(--color-primary-2, var(--color-primary-main, #c84c0e)); } [stroke="#c84c0e" i], [stroke="#C84C0E" i] { stroke: var(--color-primary-2, var(--color-primary-main, #c84c0e)); } /* DIGIT primary-dark (#C8602B) → v3 primary-1 (the dominant brand) */ [fill="#C8602B" i] { fill: var(--color-primary-1, var(--color-primary-dark, #C8602B)); } [stroke="#C8602B" i] { stroke: var(--color-primary-1, var(--color-primary-dark, #C8602B)); } /* DIGIT primary-accent (#F47738) — orange-ish accent, often the * notification bell, status alert glyphs, info chevrons. Maps to v3 * primary-2 since the designer collapsed accent into the secondary brand. */ [fill="#F47738" i], [fill="#f47738" i] { fill: var(--color-primary-2, var(--color-primary-accent, #F47738)); } [stroke="#F47738" i], [stroke="#f47738" i] { stroke: var(--color-primary-2, var(--color-primary-accent, #F47738)); } /* DIGIT primary-light (#F18F5E) — lighter accent variant. */ [fill="#F18F5E" i] { fill: var(--color-primary-2, var(--color-primary-light, #F18F5E)); } /* DIGIT secondary (#22394D) → v3 header-bg path / primary-1 */ [fill="#22394D" i], [fill="#22394d" i] { fill: var(--color-primary-1, var(--color-secondary, #22394D)); } [stroke="#22394D" i], [stroke="#22394d" i] { stroke: var(--color-primary-1, var(--color-secondary, #22394D)); } /* DIGIT digitv2 header-sidenav (#0B4B66) — same role as secondary in v3. */ [fill="#0B4B66" i], [fill="#0b4b66" i] { fill: var(--color-primary-1, var(--color-digitv2-header-sidenav, #0B4B66)); } /* DIGIT text-primary (#0B0C0C) → v3 text-primary */ [fill="#0B0C0C" i], [fill="#0b0c0c" i] { fill: var(--color-text-primary, #0B0C0C); } [stroke="#0B0C0C" i], [stroke="#0b0c0c" i] { stroke: var(--color-text-primary, #0B0C0C); } /* DIGIT text-secondary (#505A5F) */ [fill="#505A5F" i], [fill="#505a5f" i] { fill: var(--color-text-secondary, #505A5F); } /* DIGIT error (#D4351C) → v3 status-error */ [fill="#D4351C" i], [fill="#d4351c" i] { fill: var(--color-status-error-text, var(--color-error, #D4351C)); } [stroke="#D4351C" i], [stroke="#d4351c" i] { stroke: var(--color-status-error-border, var(--color-error, #D4351C)); } /* DIGIT error-dark (#B91900) — same role as error in v3. */ [fill="#B91900" i], [fill="#b91900" i] { fill: var(--color-status-error-text, var(--color-error-dark, #B91900)); } /* DIGIT success (#00703C) → v3 status-success */ [fill="#00703C" i], [fill="#00703c" i] { fill: var(--color-status-success-text, var(--color-success, #00703C)); } [stroke="#00703C" i], [stroke="#00703c" i] { stroke: var(--color-status-success-border, var(--color-success, #00703C)); } /* DIGIT link-normal (#1D70B8) → v3 button-tertiary-text / link */ [fill="#1D70B8" i], [fill="#1d70b8" i] { fill: var(--color-button-tertiary-text, var(--color-link-normal, #1D70B8)); } [stroke="#1D70B8" i], [stroke="#1d70b8" i] { stroke: var(--color-button-tertiary-text, var(--color-link-normal, #1D70B8)); } /* DIGIT link-hover (#003078) */ [fill="#003078" i] { fill: var(--color-link-hover, #003078); } /* ─── v3 polish layer — ports Figma's design rules ──────────────────────── * * Goal: make the deployed UI feel as restrained and intentional as the * designer's Figma — clean typography, generous whitespace (already present * upstream — preserved), soft shadows, smooth interaction transitions, * brand-aware focus rings, and unified employee + citizen design language. * * Strict scope: pure CSS, targeted selectors, no architecture change. No * layout-altering rules (padding/margin/width) so existing component * widths and grids stay intact. Only color, typography weight/spacing, * shadow, transition. * * Each rule cites the Figma decision it implements. */ /* 1. Default anchor color — Figma: links are dark-green primary-1, never * browser-blue and never primary-2 yellow. The navbar/sidebar override * below pulls them back to white where the bg is dark. */ a:not(.digit-button):not(.button) { color: var(--color-button-tertiary-text, var(--color-link-normal, #204F37)); text-decoration: none; transition: color 0.15s ease-out, opacity 0.15s ease-out; } a:not(.digit-button):not(.button):hover { color: var(--color-link-hover, var(--color-button-tertiary-text, #204F37)); text-decoration: underline; text-underline-offset: 2px; } /* 2. Navbar / employee header — Figma: dark-green bg, WHITE everything * inside (logo, links, icons, dropdown chevrons). Upstream uses * --color-text-primary which becomes invisible on dark green. */ .navbar, .navbar a, .navbar span, .navbar div, .digit-employee-header, .digit-employee-header a, .digit-employee-header span, .digit-employee-header div, .digit-topbar.light, .digit-topbar.light *, .digit-topbar:not(.dark) { color: var(--color-header-text, #FFFFFF); } .navbar svg, .navbar svg path, .navbar svg circle, .navbar svg rect, .digit-employee-header svg, .digit-employee-header svg path, .digit-employee-header svg circle, .digit-employee-header svg rect, .digit-topbar.light svg, .digit-topbar.light svg path { fill: var(--color-header-icon, var(--color-header-text, #FFFFFF)); } /* Navbar layout — citizen `.navbar` is `display:block` and its single child * `.center-container.back-wrapper` is `inline-flex` (width:fit-content), so * the logo + language-dropdown cluster on the left and the entire right * side of the navbar shows as empty dark green. Make navbar a flex row and * stretch its children to full width so `justify-content:space-between` * actually pushes the language picker to the far right. */ .navbar { display: flex; align-items: center; } .navbar > .center-container, .navbar > .back-wrapper, .navbar > .center-container.back-wrapper { flex: 1 1 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } /* Navbar language dropdown — upstream ships the trigger with bg:white, * which inside the dark-green navbar paints a white pill that clashes * with the brand. The text inside is also white (per .navbar color rule * above), so the trigger reads as a blank white box. Make it transparent * with a thin border-bottom so it still reads as a control, and ensure * the open menu has dark text on white. */ .navbar .language-dropdown, .navbar .digit-dropdown-select-wrap.language-dropdown, .navbar .digit-dropdown-select-wrap.language-dropdown .digit-dropdown-select { background-color: transparent !important; color: var(--color-header-text, #FFFFFF) !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 0; } .navbar .language-dropdown .header-dropdown-label, .navbar .language-dropdown .header-dropdown-arrow, .navbar .language-dropdown svg, .navbar .language-dropdown svg path { color: var(--color-header-text, #FFFFFF) !important; fill: var(--color-header-text, #FFFFFF) !important; } /* Open dropdown menu — dark text on white so options are legible. * Citizen language picker uses .header-dropdown-options / .header-dropdown-option * (not .digit-dropdown-options-card). Cover both, since the navbar's * `.navbar * { color: white }` rule above otherwise leaks into the menu * and renders the option labels white-on-white. */ .navbar .header-dropdown-options, .navbar .digit-dropdown-options-card, .navbar .language-dropdown + .digit-dropdown-options-card { background-color: #FFFFFF !important; border: 1px solid var(--color-card-border, #E5E7EB) !important; border-radius: 4px; box-shadow: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06) !important; overflow: hidden; z-index: 1000; } .navbar .header-dropdown-options, .navbar .header-dropdown-option, .navbar .header-dropdown-option *, .navbar .digit-dropdown-options-card .digit-dropdown-options-item, .navbar .digit-dropdown-options-card p { color: var(--color-text-primary, #363636) !important; background-color: #FFFFFF !important; } .navbar .header-dropdown-option:hover, .navbar .header-dropdown-option:hover * { background-color: var(--color-primary-1-bg, #FFF4D7) !important; color: var(--color-primary-1, #204F37) !important; cursor: pointer; } /* The popup container `.header-dropdown-menu` is `position:fixed` with * `left: px` set by vendor JS, anchoring it under its * trigger. That overflows the viewport when the trigger sits near the * right edge (citizen language picker, employee user-menu, etc.). * * Position clamping is handled in index.html — a MutationObserver * adjusts `left` after vendor sets it, keeping the popup's right edge * 16px inside the viewport. That works dynamically for any future * header layout (e.g. if the configurator removes a trigger), unlike * a static `right: 16px` that would overlap multiple triggers. * * CSS here only handles cosmetics. */ html .header-dropdown-menu { background-color: #FFFFFF !important; border: 1px solid var(--color-card-border, #E5E7EB); border-radius: 4px; box-shadow: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); overflow: hidden; /* Size to content with sensible bounds — vendor's fixed 248px width * overshoots short option lists like "English / SWAHILI" or * "Edit Profile / Logout". */ width: max-content !important; min-width: 160px !important; max-width: 280px !important; } /* Hide the search input — these popups are tiny option lists (2-3 * items), search is noise. */ html .header-dropdown-menu input[type="text"], html .header-dropdown-menu .digit-search-wrapper, html .header-dropdown-menu .header-dropdown-search-container { display: none !important; } /* 3. Card surfaces — Figma: white card, soft 1px border, subtle dual-layer * shadow for elevation, smooth hover lift. Box-shadow only — does NOT * touch padding/margin/width to avoid layout regressions. */ .digit-card, .employeeCard, .card, .citizen-home-card, .CitizenHomeCard, .digit-card-container, [class*="home-card"]:not([class*="card-text"]) { border: 1px solid var(--color-card-border, #E5E7EB); border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 1px 1px 0 rgba(16, 24, 40, 0.02); transition: box-shadow 0.18s ease-out, transform 0.18s ease-out; } /* Hover lift only on cards that are actually CTAs (clickable cards * like CitizenHomeCard tile). Form-cards / dashboard tiles have * interactive children (links, buttons) and the parent-card lift * fires when you hover those children, making the whole card bob up * — tonally jumpy. Keep lift only for cards that wrap a top-level * action (.CitizenHomeCard, [class*="home-card"]) and skip the * generic .digit-card / .employeeCard. */ .CitizenHomeCard:hover, [class*="home-card"]:not([class*="card-text"]):hover { box-shadow: 0 4px 6px -1px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04); } /* Sidebar item readability — vendor renders .menu-label at rgb(95,92,98) * gray on white background (~3.8:1 contrast — fails WCAG AA). Bump to * text-primary and add font-weight 500. Also unify hover behavior so * the entire row gets a tint + underline regardless of whether the row * is wrapped in an (Home, Citizen Complaint Resolution System) or * sits as a bare (Edit Profile, Logout, HELPLINE). * * Implementation note: vendor's .menu-item is `display:inline` so a * background on it only paints around the SVG icon line — leaves a * "colored square" around the icon and the label sticking out un-tinted. * Force display:flex so the hover bg covers the full 187x48 row. */ .SideBarStatic .menu-label, .sidebar-list .menu-label, [class*="SideBar"] .menu-label { color: var(--color-text-primary, #363636); font-weight: 500; transition: color 0.15s ease-out; } .SideBarStatic .menu-item, .sidebar-list .menu-item { display: flex; align-items: center; gap: 0; padding: 0; cursor: pointer; transition: background-color 0.15s ease-out; } /* Vendor ships icons at varying sizes (Home is a 24x24 svg, Citizen * Complaint Resolution is 35x39 viewBox squashed to ~10x21, Edit Profile * is 18x18 …). Force a fixed 20x20 box so all rows have the same * icon footprint and labels start at the same X. */ .SideBarStatic .menu-item > svg, .SideBarStatic .menu-item > img.icon, .sidebar-list .menu-item > svg, .sidebar-list .menu-item > img.icon { width: 20px !important; height: 20px !important; flex: 0 0 20px; object-fit: contain; /* Vendor adds margin-top:12px on the icon for inline flow alignment. * With flex parent + align-items:center, that extra margin offsets * the icon below the label's text-center. Zero it out. */ margin: 0 !important; } /* Vendor sets `.menu-label { margin-left: 36px; line-height: 48px }`. * The 36px gap is too wide and the 48px line-height makes the label * box 48px tall which throws off vertical alignment with the 20px icon * even though the flex parent has align-items:center. Reset to natural * line-height so flex centering actually centers visually. */ .SideBarStatic .menu-item .menu-label, .sidebar-list .menu-item .menu-label { margin-left: 12px !important; line-height: 1.5 !important; height: auto !important; } /* Status pill polish — vendor renders `.status-highlight` with no * horizontal padding (the tinted bg crowds the label) and font-weight * 400 so OPEN/CLOSED don't have the weight a status indicator needs. * Add 8px horizontal padding so the bg has breathing room around the * label, bump weight to 600, and tighten letter-spacing slightly so * the all-caps text reads cleanly. */ .status-highlight, .status-highlight.success { display: inline-flex; align-items: center; padding: 4px 12px !important; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } .status-highlight p, .status-highlight.success p { padding: 0 !important; font-weight: 600; letter-spacing: 0.02em; } /* Header dropdown menus (.header-dropdown-menu) — both citizen and * employee surfaces. Vendor renders option text as white because the * containing topbar (.navbar / .digit-employee-header) sets `color: * white` on all descendants. Once the popup opens with white bg, the * white option labels become invisible. Force dark text inside the * menu regardless of which app or topbar opened it. */ html .header-dropdown-menu, html .header-dropdown-menu *, html .header-dropdown-options, html .header-dropdown-options *, html .header-dropdown-option, html .header-dropdown-option * { color: var(--color-text-primary, #363636) !important; } html .header-dropdown-menu input, html .header-dropdown-menu input::placeholder { color: var(--color-text-primary, #363636) !important; } html .header-dropdown-option:hover, html .header-dropdown-option:hover * { background-color: var(--color-primary-1-bg, #FFF4D7) !important; color: var(--color-primary-1, #204F37) !important; cursor: pointer; } /* Employee surface vertical rhythm — * * Vendor stacks `.main.digit-home-main { padding-top:80px; margin-top:16px }` * + `.employee-app-wrapper { margin-top:70px }` for a total of ~166px of * empty space above the content, even though the fixed topbar is only * 72px tall. That shoves every page below a big top gap and pushes the * footer down to where it overlaps the fixed `.digit-action-bar` at the * bottom of the viewport. * * Tighten the top gap to ~88px (topbar 72 + 16px breathing room) and * add bottom padding equal to the action bar's typical 72px height so * the page can scroll past the action bar without the footer hiding * behind it. */ .main.digit-home-main { padding-top: 88px !important; margin-top: 0 !important; } .employee-app-wrapper.digit-home-app-wrapper { margin-top: 0 !important; padding-bottom: 16px; } /* The fixed `.digit-action-bar-wrap` (h:72px, position:fixed, bottom:0) * sits at the viewport bottom and covers anything in the bottom 72px. * The footer is below the form in the document flow, so when the user * scrolls all the way down, the footer ends up under the action bar. * * Add a 72px bottom margin on the footer so the body's scroll length * extends 72px past the footer — at scroll-bottom the footer sits ABOVE * the fixed action bar, fully visible. The 16px form padding-bottom * (above) keeps the form's tail close to the footer. */ .employee-home-footer, .citizen-home-footer { margin-bottom: 72px; } /* Employee sidebar item icon fallback — vendor's React component * leaves `` empty when the menu item's MDMS config * doesn't declare an iconUrl/iconName. Without an icon, the selected * yellow indicator bar reads as a blank colored rectangle. * * The employee dashboard only mounts ONE sidebar item by default * (Home), so paint a home icon as a CSS mask on any empty `.icon` * inside a sidebar item. mask-image lets the glyph pick up * sidebar-icon white via background-color, so it works on the yellow * selected indicator and the dark green non-selected items alike. */ .digit-sidebar-item .icon:empty { background-color: var(--color-sidebar-selected-text, #FFFFFF); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .digit-sidebar-item.selected .icon:empty { background-color: var(--color-sidebar-selected-text, #FFFFFF); } /* Tertiary button label — vendor renders `.digit-button-teritiary * .digit-button-label` (note vendor's typo) at primary-main yellow, * but per the v3 designer spec a tertiary button reads as a TEXT * action and should use --color-button-tertiary-text (primary-1 * green). Affects employee card-link CTAs like "Create Complaint", * "Search Complaint", "Manage Master Data", etc. */ html .digit-button-teritiary .digit-button-label, html [class*="teritiary"] .digit-button-label, html [class*="tertiary"] .digit-button-label { color: var(--color-button-tertiary-text, var(--color-primary-1, #204F37)) !important; } html .digit-button-teritiary svg path:not([fill="none"]), html [class*="teritiary"] svg path:not([fill="none"]), html [class*="tertiary"] svg path:not([fill="none"]) { fill: var(--color-button-tertiary-text, var(--color-primary-1, #204F37)) !important; } /* Suppress duplicate `.digit-topbar` header on /pgr/create-complaint/* * surfaces. Vendor mounts `.digit-topbar` (white bg, position:fixed, * z-index:9999999) on top of the existing dark-green `.navbar` so the * file-complaint flow suddenly shows a white "Powered by DIGIT" bar * instead of the green navbar that every other citizen surface uses. * Hide the second header so the consistent navbar shows through. * * IMPORTANT: scope to citizen-only via `:not(.digit-employee-header)` * — the employee surfaces use `.digit-topbar.digit-employee-header.light` * as their PRIMARY (and only) header, hiding it leaves them with no * topbar at all. */ html .digit-topbar:not(.digit-employee-header) { display: none !important; } /* When wrapped in an , kill the anchor's underline so the row reads * as a button. The :hover label rule below adds underline back. */ .sidebar-list a { text-decoration: none !important; } .SideBarStatic .menu-item:hover, .sidebar-list .menu-item:hover, .sidebar-list a:hover .menu-item { background-color: var(--color-page-secondary-bg, #FAFAFA); } .SideBarStatic .menu-item:hover .menu-label, .sidebar-list .menu-item:hover .menu-label, .sidebar-list a:hover .menu-item .menu-label { color: var(--color-primary-1, #204F37); text-decoration: underline; text-underline-offset: 2px; } /* Sidebar SVGs ship with a transparent backing rect (path d="M0 0h24v24H0z" * fill="none") that defines the viewBox padding. Filling all paths makes * the rect render as a solid square covering the actual icon glyph behind * it. Skip paths whose fill is explicitly "none". */ .SideBarStatic .menu-item:hover svg path:not([fill="none"]), .sidebar-list .menu-item:hover svg path:not([fill="none"]), .sidebar-list a:hover .menu-item svg path:not([fill="none"]) { fill: var(--color-primary-1, #204F37) !important; } .SideBarStatic .menu-item:hover svg, .sidebar-list .menu-item:hover svg, .sidebar-list a:hover .menu-item svg { fill: var(--color-primary-1, #204F37); } /* ---------------------------------------------------------------------- * Layout tokens (2026-05-06) — single source of truth for the topbar / * page-footer heights so v2 components subtracting them have one knob to * adjust. Used by the v2 ScreenContainer (form column height) and * CitizenSidebar (sidebar height = viewport − topbar − page-footer). * * Topbar = 82px (vendor `.citizen .main { padding-top: 82px }`, so * everything below the topbar starts 82px down from the viewport top). * Footer = 38px (10px top padding + 1.25em logo + 1px border ≈ 38px on * the .citizen-home-footer rule below). * * The .citizen .main override that follows pins the container's * available content area to exactly `100vh - topbar - footer`, so the * v2 sidebar (height: 100vh - topbar - footer) and the v2 ScreenContainer * (same calc) align flush — sidebar bottom and FormFooter (Cancel/Next) * land on the same y-line, just above "Powered by DIGIT". * -------------------------------------------------------------------- */ :root { --v2-page-footer-height: 38px; /* PR #99 reduced the topbar from the legacy ~82px to 56px (see * `.employee .digit-topbar` rules earlier in this file). The var * was left at 82px which made the citizen sidebar end ~26px above * the viewport bottom. Aligned to the actual topbar height. */ --v2-topbar-height: 56px; } /* Vendor sets `.citizen .main { padding-top: 82px; min-height: calc(100vh - 90px) }`. * The `100vh - 90` content min-height plus the 82px padding makes the * .main border-box span `100vh - 8px` — way more than the actual room * between topbar and page footer (100vh - 82 - 38 = 100vh - 120). That * extra ~30+ pixels is dead space *inside* .main below our v2 children, * which then forces the page footer past the viewport (global scroll). * * Override: shrink .main's content min-height so its content-area height * matches the v2 child height calc exactly. Sidebar bottom and FormFooter * both land on the page-footer top with zero gap and no scroll. * * !important is needed because vendor's `.citizen .main` rule sets * min-height with the same specificity — last-rule-wins isn't reliable * across CSS load order, and this is a pure layout correction. */ .citizen .main.center-container.citizen-home-container, .main.center-container.citizen-home-container:has(> aside.v2-scope) { min-height: calc( 100vh - var(--v2-topbar-height, 82px) - var(--v2-page-footer-height, 38px) ) !important; } /* Some citizen surfaces (e.g. /user/profile, edit profile) mount under * the `.employee` wrapper because of how `useRouteSubscription` flips on * those paths. Vendor css then pins the citizen page footer with * `.employee .citizen-home-footer { position: fixed; bottom: 0 }`, * which on a modernized route lays the "Powered by DIGIT" bar OVER the * v2 sidebar/form column instead of below them. Whenever the v2 sidebar * is present in main, force the footer back to normal flow + clear the * 72px legacy margin so it parks flush below the v2 column. */ body:has(.main.center-container.citizen-home-container > aside.v2-scope) .citizen-home-footer { position: static !important; bottom: auto !important; margin-bottom: 0 !important; /* Reserve the 260px sidebar gutter on the left so the "Powered by * DIGIT" text lands in the centre of the right-side content area * (the same column the form / module list sits in) rather than the * centre of the full viewport — which would put it visually under * the sidebar's right edge. Only kicks in when the v2 sidebar is * actually mounted (via the body :has() guard above). */ padding-left: 260px !important; } @media (max-width: 47.99rem) { /* Mobile: sidebar is hidden, drop the gutter so the footer text is * centred to the full viewport again. */ body:has(.main.center-container.citizen-home-container > aside.v2-scope) .citizen-home-footer { padding-left: 0 !important; } } /* Sidebar modernization moved out of CSS — see * `packages/digit-ui-components-v2/src/components/layout/citizen-sidebar.tsx`. * The legacy `` wrapper is no longer mounted on the * citizen routes (replaced by ``); pre-existing * `.SideBarStatic` rules above are retained because the employee surface * still mounts that component. */ /* ---------------------------------------------------------------------- * Citizen footer modernization (2026-05-06) * * Vendor footer is just a centered "Powered by DIGIT" with no * separator and inconsistent padding. Add a soft top divider, balance * vertical rhythm, and constrain the logo to a sensible size on desktop. * -------------------------------------------------------------------- */ .citizen-home-footer { /* Theme-aware: borders use --color-border, surface uses * --color-page-bg (both already defined in vendor digit-ui-css). */ border-top: 1px solid var(--color-border, #d6d5d4); background-color: var(--color-page-bg, #fafafa); /* Zero bottom padding (was 14px) — the logo line itself is the floor of * the page; any further space below it just pushed the citizen page * past the viewport. Top padding stays so the logo gets some breathing * room from the divider. */ padding: 10px 16px 0 16px !important; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary, #505a5f); } .citizen-home-footer img { height: 1.25em !important; width: auto !important; display: block; opacity: 0.85; transition: opacity 0.15s ease-out; } .citizen-home-footer img:hover { opacity: 1; } /* `.citizen-home-container` ships with `mb-25` (margin-bottom: 25px), * which left a 25px void between the form area and the page footer — * pushed the footer below the viewport on otherwise short pages. Zero it * out so the footer sits flush against the form column. */ .citizen-home-container.mb-25 { margin-bottom: 0 !important; } /* The citizen page footer ships with `margin-bottom: 72px` (rule above — * legacy reservation for the fixed `.digit-action-bar-wrap`). On v2 * citizen surfaces there's no action bar; the 72px just inflates the * page past the viewport and forces a global scroll. Zero it out on * citizen routes so total = topbar(82) + main(100vh-120) + footer(38) = * exactly 100vh, no scroll, page footer flush at viewport bottom. */ .citizen .citizen-home-footer { margin-bottom: 0 !important; } /* Yellow-CTA text colour — vendor renders the label inside primary * buttons via varied tags depending on the atom: `

`, `
` (in the InboxSearchComposer's Search * atom), or a bare ``. Each carries its own hardcoded * `color: #fff` and reads white-on-yellow on Search / Submit / Save * buttons. Force every yellow-bg CTA AND every descendant element to * honour `--color-text-primary` so the label reads as the tenant's * configured body text colour (#363636 on naipepea). */ .digit-button-primary, .digit-button-primary *, button.submit-bar, button.submit-bar *, button.digit-submit-bar, button.digit-submit-bar *, button[class*="submit-bar"], button[class*="submit-bar"] *, .digit-formcomposer-submitbar, .digit-formcomposer-submitbar * { color: var(--color-text-primary, #0B0C0C) !important; } /* Sidebar rows in the v2 CitizenSidebar (Edit Profile / Logout / Helpline * are rendered as ` * inside `.input-container`; older surfaces use * `.digit-text-input-field.prefix` or `.component-in-front`. Cover all * three so the rule fires regardless of which atom is in use. */ /* Only the prefix BUTTON gets the yellow tint — not the wrapper, * because painting `.digit-text-input-field.prefix` (the wrapper) * yellow leaves the inner input area looking yellow too. The * unified `.digit-text-input-field` rule keeps the wrapper bg * white; the inner `.digit-prefix` button gets the yellow chip * with a 1px right separator from the unified-input block. */ .v2-employee-create-complaint button.digit-prefix, .v2-employee-create-complaint .digit-prefix, .v2-employee-create-complaint .digit-mobile-number-container .prefix, .v2-employee-create-complaint .component-in-front { color: var(--color-primary-1, var(--color-primary-main, #c84c0e)) !important; font-weight: 600 !important; cursor: default !important; } /* Lighten the phone input's vendor-default `1px solid rgb(90, 90, 90)` * so it visually matches the yellow prefix chip and the v2 inputs * around it. */ .v2-employee-create-complaint .digit-mobile-number-container .digit-employeeCard-input, .v2-employee-create-complaint .input-container input[type="text"] { border: 1px solid var(--color-border, #d6d5d4) !important; } /* Citizen topbar logo — vendor ships `.navbar img { height: 24px; * min-width: 78px }` for the wordmark in `.hambuger-back-wrapper`. At * 24px on a 56px+ topbar it reads small and disconnected from the * surrounding chrome. Bump the logo to 32px and let width auto so the * wordmark keeps its native aspect ratio. * * The navbar itself is pinned to its original 56px (8px top/bottom * padding around the 32px logo + 16-line-height controls) so the bigger * logo doesn't make the entire topbar taller — that previously knocked * the v2 layout calc (--v2-topbar-height: 82px) and pushed the page * footer past the viewport. Pinning here keeps the topbar visually * unchanged in height while the wordmark itself reads larger. */ .citizen .navbar { height: 56px !important; min-height: 56px !important; padding-top: 8px !important; padding-bottom: 8px !important; align-items: center; } .citizen .navbar img.city, .citizen .hambuger-back-wrapper img.city { height: 32px !important; min-width: 0 !important; max-width: 160px !important; width: auto !important; } /* 4. Buttons — smooth transitions, depth on hover, tactile press feedback. * No color changes (those come from --color-button-* vars). */ button, .digit-button, .digit-btn, button.digit-submit-bar, button[class*="submit-bar"], input[type="submit"], input[type="button"] { transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out, color 0.1s ease-out, transform 0.05s ease-out; } /* Submit/CTA polish — vendor ships `padding: 1px 24px` (vertical near-zero) * with `border-radius: 0` and `font-weight: 400`. The primary CTA needs * more presence: vertical breathing room, slight rounding, and a heavier * weight. Color and bg still come from the v3 button-primary-* vars. * Flex centering ensures the label sits in the middle of the box * (vendor ships `display:block` so text otherwise sticks to the top). * Height 40px (not 44) matches the form filter dropdowns next to it * so the search button aligns vertically with the input row. */ button.digit-submit-bar, button[class*="submit-bar"], .digit-submit-bar, [class*="submit-bar"] { padding: 8px 28px !important; font-weight: 600 !important; border-radius: 4px !important; font-size: 14px; letter-spacing: 0.02em; min-height: 40px; height: 40px; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Search-row alignment — wrapper around the Search button has * `padding-top: 8px` + `margin-top: 32px` for ~40px of top offset. * The filter dropdowns next to it have a label (~20px) + 4px gap * above their 40px input — the input top sits ~24px below the row * top. Match the button's top offset to the input's top by trimming * the wrapper's margin-top to 24px and zeroing padding-top. */ /* Filter wrappers next to the search button have label (20px) + gap * above their 40px input — input top sits ~40px below the row top. * Match that offset on the button wrapper, use align-items:center + * fixed height matching the input (40px) so both children — the * "Clear Search" label AND the Search button — center on the SAME * Y line that the dropdown text baseline sits on. */ .search-button-wrapper.search { padding-top: 0 !important; margin-top: 40px !important; height: 40px !important; align-items: center !important; } /* Bare `