/* ============================================================================= NDPC design tokens — the single source of truth (TASK-07). Every colour, radius and type value the design system uses lives here as a CSS custom property. Components reference the variables; nothing hardcodes these values. That is what stops the "scattered greens" problem from recurring. The primary is the deep NDPC green sampled from the official logo (#00482A) — not flag green, not the lighter greens that used to be scattered in templates. ============================================================================= */ :root { --ndpc-green: #00482A; /* primary — logo green */ --ndpc-green-hover: #00351F; /* darker, for button hover/active */ --ndpc-green-soft: #E7F0EC; /* pale tint for subtle fills */ --ndpc-ink: #1A1A1A; /* headings / primary text */ --ndpc-body: #4A4A4A; /* body text */ --ndpc-muted: #6B6B6B; /* secondary text, hints */ --ndpc-line: #E4E4E4; /* hairline borders */ --ndpc-field-bg: #FAFAFA; /* input background */ --ndpc-field-border: #D8D8D8; /* input border */ --ndpc-surface: #FFFFFF; /* card / form surface */ /* Status — reserved for credential state ONLY, never decorative. Declared now because the verification page needs them next; unused in this task. */ --ndpc-status-valid: #00482A; --ndpc-status-expired: #B26A00; /* amber */ --ndpc-status-suspended: #9A6700; --ndpc-status-revoked: #A32D2D; /* red */ --ndpc-status-removed: #6B6B6B; /* --------------------------------------------------------------------- TASK-21 — the dark staff shell and the tinted dashboard. These are the approved mockup's exact values, added alongside the tokens above rather than replacing any of them: the public pages, the IIM portal and the auth shell also load this file, and re-pointing an existing token would re-theme all three. Only the values the mockup introduces are new. Mockup names that already exist here, and are reused rather than re-declared: green #00482A -> --ndpc-green green-dark #00351F -> --ndpc-green-hover soft #E7F0EC -> --ndpc-green-soft card #FFFFFF -> --ndpc-surface ink #1A1A1A -> --ndpc-ink body #4A4A4A -> --ndpc-body muted #6B6B6B -> --ndpc-muted --------------------------------------------------------------------- */ --ndpc-green-light: #0A5A38; /* the light end of the green gradient */ --ndpc-gold: #C9A961; /* active-icon accent on the dark sidebar */ --ndpc-canvas: #EEF1EE; /* staff page background — white cards float on it */ --ndpc-hairline: #E7E7E4; /* the shell's hairline; warmer than --ndpc-line */ /* Status-card tints. Background / border / ink, one triple per status. These are card fills, not credential-state colour: --ndpc-status-* above still owns "what a certificate's standing is" and is unchanged. */ --ndpc-valid-bg: #EAF3EE; --ndpc-valid-br: #CFE3D9; --ndpc-valid-ink: #00482A; --ndpc-exp-bg: #FBF3E7; --ndpc-exp-br: #F0DDB8; --ndpc-exp-ink: #8A5200; --ndpc-sus-bg: #F1F0EC; --ndpc-sus-br: #DEDCD5; --ndpc-sus-ink: #5F5E5A; --ndpc-rev-bg: #F8EBEB; --ndpc-rev-br: #EBD2D2; --ndpc-rev-ink: #8F2A2A; /* The pale end of the lapsed alert's amber gradient. */ --ndpc-exp-bg-2: #FCF7EE; --ndpc-radius: 8px; --ndpc-radius-lg: 16px; --ndpc-radius-card: 14px; /* TASK-21: the mockup's status/alert card radius */ /* Typography — keep the existing font stack; standardise the scale here. Headings 22px/500, body 14–16px/400, hints 13px. Two weights only: 400/500. */ --ndpc-fs-heading: 22px; --ndpc-fw-heading: 500; --ndpc-fs-body: 15px; --ndpc-fw-body: 400; --ndpc-fs-hint: 13px; } /* ----------------------------------------------------------------------------- Re-tint Bootstrap's "success" to the one NDPC green, so every shared green element (staff header, buttons, links) across the app resolves to a single value instead of Bootstrap's lighter #198754. Colour only — no layout change. Loaded wherever the token file is (auth + staff). Public pages don't load it, so they are unaffected until their own task. -------------------------------------------------------------------------- */ .btn-success { --bs-btn-bg: var(--ndpc-green); --bs-btn-border-color: var(--ndpc-green); --bs-btn-hover-bg: var(--ndpc-green-hover); --bs-btn-hover-border-color: var(--ndpc-green-hover); --bs-btn-active-bg: var(--ndpc-green-hover); --bs-btn-active-border-color: var(--ndpc-green-hover); --bs-btn-disabled-bg: var(--ndpc-green); --bs-btn-disabled-border-color: var(--ndpc-green); } .btn-outline-success { --bs-btn-color: var(--ndpc-green); --bs-btn-border-color: var(--ndpc-green); --bs-btn-hover-bg: var(--ndpc-green); --bs-btn-hover-border-color: var(--ndpc-green); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ndpc-green-hover); --bs-btn-active-border-color: var(--ndpc-green-hover); --bs-btn-active-color: #fff; } /* ----------------------------------------------------------------------------- Legibility guard: a filled green button always has white text. allauth renders an action with an href as , so any area stylesheet that colours its links (".auth-form-panel a { color: green }") would otherwise repaint the caption dark green on a dark green fill and make it invisible. That was a real bug on the MFA pages. Written as .btn.btn-success (two classes) so it outranks a one-class-plus-type link rule regardless of which stylesheet loads later, and without !important. Icons inherit, so a inside a green button turns white with it. -------------------------------------------------------------------------- */ .btn.btn-success, .btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active, .btn.btn-success:disabled, .btn.btn-success.disabled, .btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary:disabled, .btn.btn-danger, .btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:active, .btn.btn-outline-success:hover, .btn.btn-outline-success:active, .btn.btn-outline-danger:hover, .btn.btn-outline-danger:active { color: #fff; } .btn.btn-success .bi, .btn.btn-primary .bi, .btn.btn-danger .bi, .btn.btn-outline-success:hover .bi, .btn.btn-outline-danger:hover .bi { color: inherit; } /* Same reasoning for a filled green badge or pill: the fill is dark, so the text on it is white. */ .badge.bg-success, .badge.text-bg-success { color: #fff; } .bg-success { background-color: var(--ndpc-green) !important; } .text-success { color: var(--ndpc-green) !important; } .border-success { border-color: var(--ndpc-green) !important; }