/** * theme-gov.css * ============= * UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com) * * HOW IT WORKS * ------------ * This file is loaded AFTER style.css when THEME_NAME=gov is set in .env. * It overrides only the CSS custom properties defined in style.css :root, * so every component that uses those variables (sidebar, buttons, login page, * links, badges, focus rings) automatically adopts the new palette. * No existing files are duplicated or heavily modified. * * TO CUSTOMISE * ------------ * 1. Change --primary-color / --primary-hover to your desired brand colors. * 2. Adjust --brand-text and --brand-icon-class below if needed. * 3. For the original LT Services instance: set THEME_NAME= (empty) in its * .env — this file will not load at all, leaving the default blue intact. * * ADDING A THIRD THEME (future) * ----------------------------- * Create static/css/theme-{name}.css and set THEME_NAME={name} in that * instance's .env. No code changes required. */ /* ------------------------------------------------------------------ */ /* 1. COLOR PALETTE — GOV Services green */ /* ------------------------------------------------------------------ */ :root { /* Primary brand color: bright institutional green */ --primary-color: #16a34a; --primary-hover: #15803d; /* Accent used for links, focus rings, active states */ --info-color: #16a34a; } /* ------------------------------------------------------------------ */ /* 2. SIDEBAR BRAND TEXT & ICON */ /* Replaces the hardcoded "QR Manager" text in base_authenticated */ /* ------------------------------------------------------------------ */ .brand-text::before { content: "GOV QR"; } .sidebar-brand .brand-content > span.brand-text { /* Hide the original text node rendered by the template, show our pseudo-element instead. */ font-size: 0; } .sidebar-brand .brand-content > span.brand-text::before { font-size: 1.125rem; /* matches original brand-text size */ font-weight: 700; letter-spacing: 0.02em; } /* ------------------------------------------------------------------ */ /* 3. LOGIN PAGE HEADER ("QR Manager" h1) */ /* Replaces the hardcoded h1 in login.html without editing the file */ /* ------------------------------------------------------------------ */ .auth-header h1 { font-size: 0 !important; /* hide original text */ } .auth-header h1::before { content: "GOV Services"; font-size: 2.25rem !important; font-weight: 700 !important; color: var(--gray-900) !important; } /* ------------------------------------------------------------------ */ /* 4. FOOTER COPYRIGHT LINE */ /* Now handled dynamically in base.html / base_authenticated.html */ /* via {{ CURRENT_YEAR }} and {{ COMPANY_NAME }} — no CSS needed. */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* 5. SIDEBAR GRADIENT — re-declare to pick up new variables */ /* (Browsers resolve var() at paint time so this block is only */ /* needed if the gradient was hard-coded; here it is variable- */ /* driven, so this section is a safety net.) */ /* ------------------------------------------------------------------ */ .sidebar { background: linear-gradient( 180deg, var(--primary-color), var(--primary-hover) ); } /* ------------------------------------------------------------------ */ /* 6. AUTH CONTAINER GRADIENT (login background) */ /* ------------------------------------------------------------------ */ .auth-container { background: linear-gradient( 135deg, var(--primary-color), var(--primary-hover) ) !important; } .auth-logo { background: linear-gradient( 135deg, var(--primary-color), var(--primary-hover) ) !important; } .auth-card::before { background: linear-gradient( 90deg, var(--primary-color), var(--primary-hover) ) !important; } /* ------------------------------------------------------------------ */ /* 7. PAGE TITLE / BROWSER TAB — handled via COMPANY_NAME in .env */ /* (no CSS needed; Flask injects it from COMPANY_NAME=GOV. Serv...) */ /* ------------------------------------------------------------------ */