/* ===================================================================== Welioya Divisional Secretariat — Theme tokens (Light + Dark) --------------------------------------------------------------------- Light is the DEFAULT theme (plain :root). Dark is opt-in via . The user's choice is stored in a cookie (welioya_theme) so PHP can render the right theme on the first byte, plus localStorage so it survives even when cookies are blocked. See inc/theme_boot.php. NOTE ON NAMING The historical variables (--white, --white-90 ... --white-05) are kept because css/web_style.css, web/citizen_charter.css and web/rti_styles.php already use them everywhere. They no longer mean "white" — they mean "foreground at N% opacity" and flip with the theme. Anything that must stay light-on-dark in BOTH themes (the top bar, the header band, the navbar, the footer) uses the --chrome-* tokens. ===================================================================== */ /* ===================================================================== Sinhala typeface — Iskoola Pota --------------------------------------------------------------------- Iskoola Pota ships with Windows and is installed on the office PCs, so it is picked up from the reader's own machine with local(); it is not redistributed here. The unicode-range confines it to Sinhala code points (plus ZWJ/ZWNJ, which Sinhala conjuncts depend on) so Latin and Tamil keep their own faces. When the font is not installed — phones, Linux, macOS — the family simply resolves to nothing and the browser falls through to the next family in the stack, Noto Sans Sinhala. ===================================================================== */ @font-face { font-family: 'Iskoola Pota Sinhala'; src: local('Iskoola Pota'), local('IskoolaPota'), local('iskpota'); font-weight: 400; font-style: normal; unicode-range: U+0D80-0DFF, U+200C-200D; } @font-face { font-family: 'Iskoola Pota Sinhala'; src: local('Iskoola Pota Bold'), local('IskoolaPota-Bold'), local('iskpotab'); font-weight: 700; font-style: normal; unicode-range: U+0D80-0DFF, U+200C-200D; } /* --------------------------------------------------------------- Brand scale + chrome — identical in both themes --------------------------------------------------------------- */ :root { --blue-900: #0a1628; --blue-800: #0f2240; --blue-700: #1a365d; --blue-600: #1e3a5f; --blue-500: #2563eb; --blue-400: #3b82f6; --blue-300: #60a5fa; --blue-200: #93c5fd; --blue-100: #dbeafe; --pure-white: #ffffff; /* The header chrome (top bar + navbar + dropdowns) flips with the theme - see the --chrome-* tokens in each theme block below. The footer follows the theme too - see the --footer-* tokens in each theme block below. The legacy dashboard banner and menu use the --legacy-* tokens and flip the same way. */ } /* --------------------------------------------------------------- LIGHT THEME — the default --------------------------------------------------------------- */ :root { color-scheme: light; /* Foreground ramp */ --white: #10243f; --white-90: rgba(16, 36, 63, 0.92); --white-70: rgba(16, 36, 63, 0.70); --white-50: rgba(16, 36, 63, 0.54); --white-30: rgba(16, 36, 63, 0.38); --white-15: rgba(16, 36, 63, 0.14); --white-10: rgba(16, 36, 63, 0.10); --white-05: rgba(16, 36, 63, 0.06); /* Header chrome - light bands with navy type */ --chrome-topbar-bg: #e6edf7; --chrome-nav-bg: rgba(255, 255, 255, 0.92); --chrome-dropdown-bg: rgba(255, 255, 255, 0.98); --chrome-collapse-bg: rgba(255, 255, 255, 0.98); --chrome-border: rgba(16, 36, 63, 0.12); --chrome-border-soft: rgba(16, 36, 63, 0.07); --chrome-border-strong: rgba(16, 36, 63, 0.25); --chrome-hover-bg: rgba(16, 36, 63, 0.07); --chrome-fg: #10243f; --chrome-fg-70: rgba(16, 36, 63, 0.72); --chrome-fg-50: rgba(16, 36, 63, 0.55); --chrome-fg-30: rgba(16, 36, 63, 0.38); --chrome-accent: #0369a1; --chrome-active-bg: rgba(3, 105, 161, 0.12); /* Legacy dashboard banner + menu bar (css/dashboard.css) */ --legacy-bar-bg: linear-gradient(135deg, #dfe8f5 0%, #edf3fb 55%, #e2ebf7 100%); --legacy-nav-bg: rgba(255, 255, 255, 0.94); --chrome-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816, 36, 63, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Footer */ --footer-bg: #dfe7f3; --footer-fg: #10243f; --footer-fg-70: rgba(16, 36, 63, 0.72); --footer-fg-50: rgba(16, 36, 63, 0.58); --footer-fg-30: rgba(16, 36, 63, 0.42); --footer-border: rgba(16, 36, 63, 0.12); --footer-border-soft: rgba(16, 36, 63, 0.07); --footer-hover-bg: rgba(16, 36, 63, 0.06); --footer-accent: #0369a1; --copyright-bg: rgba(16, 36, 63, 0.05); /* Page canvas */ --body-bg: linear-gradient(135deg, #eaf1fa 0%, #f7fbff 40%, #eef4fc 70%, #e6eef9 100%); --orb-1: rgba(37, 99, 235, 0.13); --orb-2: rgba(2, 132, 199, 0.10); /* Panels / cards */ --glass-bg: rgba(255, 255, 255, 0.78); --glass-bg-soft: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.92); --glass-border: rgba(16, 36, 63, 0.10); --glass-shadow: rgba(16, 36, 63, 0.10); --surface-subtle: rgba(16, 36, 63, 0.04); --surface-raised: rgba(255, 255, 255, 0.95); --panel-bg: linear-gradient(160deg, #ffffff, #f4f8fd); --overlay-bg: rgba(16, 36, 63, 0.45); --shadow-sm: 0 4px 16px rgba(16, 36, 63, 0.07); --shadow-md: 0 10px 28px rgba(16, 36, 63, 0.11); --shadow-lg: 0 16px 40px rgba(16, 36, 63, 0.16); --shadow-xl: 0 30px 80px rgba(16, 36, 63, 0.25); /* Accent */ --accent: #0284c7; --accent-rgb: 2, 132, 199; --accent-soft: rgba(2, 132, 199, 0.10); --accent-glow: rgba(2, 132, 199, 0.22); --accent-grad: linear-gradient(135deg, #0284c7, #2563eb); --on-accent: #ffffff; /* Links */ --link: #1d4ed8; --link-hover: #0284c7; /* Forms */ --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: rgba(16, 36, 63, 0.18); --option-bg: #ffffff; /* Tables */ --table-head-bg: #e6effb; --table-head-solid: #e6effb; --table-head-fg: #10243f; --table-stripe: rgba(16, 36, 63, 0.035); --table-hover: rgba(2, 132, 199, 0.08); /* Status colours */ --ok: #15803d; --ok-bg: rgba(22, 163, 74, 0.10); --ok-border: rgba(22, 163, 74, 0.30); --err: #b91c1c; --err-bg: rgba(220, 38, 38, 0.08); --err-border: rgba(220, 38, 38, 0.28); --warn: #b45309; /* Scrollbar */ --scroll-track: #e3ebf6; --scroll-thumb: #b6c6dc; --scroll-thumb-hover: #8ea7c8; /* Tinted panels that stay brand-blue with white type in both themes */ --header-tint-bg: linear-gradient(135deg, #1d4ed8, #2563eb); --header-tint-fg: #ffffff; --info-card-bg: linear-gradient(135deg, #1e3a8a, #2563eb); /* Misc */ --code-bg: #f1f5fb; --code-fg: #10243f; --hero-fg: #ffffff; } /* --------------------------------------------------------------- DARK THEME — the original glassmorphism look --------------------------------------------------------------- */ html[data-theme="dark"] { color-scheme: dark; --white: #ffffff; --white-90: rgba(255, 255, 255, 0.9); --white-70: rgba(255, 255, 255, 0.7); --white-50: rgba(255, 255, 255, 0.5); --white-30: rgba(255, 255, 255, 0.3); --white-15: rgba(255, 255, 255, 0.15); --white-10: rgba(255, 255, 255, 0.10); --white-05: rgba(255, 255, 255, 0.05); /* The original frosted chrome, unchanged */ --chrome-topbar-bg: rgba(255, 255, 255, 0.06); --chrome-nav-bg: rgba(10, 22, 40, 0.65); --chrome-dropdown-bg: rgba(15, 34, 64, 0.90); --chrome-collapse-bg: rgba(10, 22, 40, 0.90); --chrome-border: rgba(255, 255, 255, 0.10); --chrome-border-soft: rgba(255, 255, 255, 0.05); --chrome-border-strong: rgba(255, 255, 255, 0.30); --chrome-hover-bg: rgba(255, 255, 255, 0.15); --chrome-fg: #ffffff; --chrome-fg-70: rgba(255, 255, 255, 0.70); --chrome-fg-50: rgba(255, 255, 255, 0.50); --chrome-fg-30: rgba(255, 255, 255, 0.30); --chrome-accent: #38bdf8; --chrome-active-bg: rgba(56, 189, 248, 0.10); /* Legacy dashboard banner + menu bar - the original navy */ --legacy-bar-bg: linear-gradient(135deg, #0a1628 0%, #12294a 60%, #17325a 100%); --legacy-nav-bg: rgba(10, 22, 40, 0.92); --chrome-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Footer - the original navy */ --footer-bg: rgba(10, 22, 40, 0.75); --footer-fg: #ffffff; --footer-fg-70: rgba(255, 255, 255, 0.70); --footer-fg-50: rgba(255, 255, 255, 0.50); --footer-fg-30: rgba(255, 255, 255, 0.30); --footer-border: rgba(255, 255, 255, 0.10); --footer-border-soft: rgba(255, 255, 255, 0.05); --footer-hover-bg: rgba(255, 255, 255, 0.15); --footer-accent: #38bdf8; --copyright-bg: rgba(0, 0, 0, 0.2); --body-bg: linear-gradient(135deg, #0a1628 0%, #1a365d 40%, #1e3a5f 70%, #0f2240 100%); --orb-1: rgba(37, 99, 235, 0.15); --orb-2: rgba(56, 189, 248, 0.10); --glass-bg: rgba(255, 255, 255, 0.12); --glass-bg-soft: rgba(255, 255, 255, 0.08); --glass-bg-strong: rgba(255, 255, 255, 0.18); --glass-border: rgba(255, 255, 255, 0.2); --glass-shadow: rgba(0, 0, 0, 0.15); --surface-subtle: rgba(255, 255, 255, 0.05); --surface-raised: rgba(255, 255, 255, 0.10); --panel-bg: linear-gradient(160deg, rgba(15, 34, 64, 0.96), rgba(10, 22, 40, 0.97)); --overlay-bg: rgba(5, 12, 24, 0.66); --shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.20); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.25); --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.50); --accent: #38bdf8; --accent-rgb: 56, 189, 248; --accent-soft: rgba(56, 189, 248, 0.10); --accent-glow: rgba(56, 189, 248, 0.3); --accent-grad: linear-gradient(135deg, #38bdf8, #60a5fa); --on-accent: #0a1628; --link: #93c5fd; --link-hover: #38bdf8; --input-bg: rgba(255, 255, 255, 0.08); --input-bg-focus: rgba(255, 255, 255, 0.12); --input-border: rgba(255, 255, 255, 0.15); --option-bg: #0f2240; --table-head-bg: rgba(37, 99, 235, 0.25); --table-head-solid: #1d3d69; --table-head-fg: #ffffff; --table-stripe: rgba(255, 255, 255, 0.04); --table-hover: rgba(255, 255, 255, 0.08); --ok: #4ade80; --ok-bg: rgba(34, 197, 94, 0.15); --ok-border: rgba(34, 197, 94, 0.30); --err: #f87171; --err-bg: rgba(239, 68, 68, 0.15); --err-border: rgba(239, 68, 68, 0.30); --warn: #fbbf24; --scroll-track: #0a1628; --scroll-thumb: #1e3a5f; --scroll-thumb-hover: #2563eb; --header-tint-bg: rgba(37, 99, 235, 0.18); --header-tint-fg: #ffffff; --info-card-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(30, 58, 95, 0.50)); --code-bg: rgba(3, 10, 22, 0.6); --code-fg: #e7f2f8; --hero-fg: #ffffff; } /* Smooth the flip, but never fight the first paint or reduced motion. */ html.theme-ready body, html.theme-ready .card, html.theme-ready .navbar, html.theme-ready .govt-footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce) { html.theme-ready body, html.theme-ready .card, html.theme-ready .navbar, html.theme-ready .govt-footer { transition: none; } } /* ===================================================================== Theme toggle control ===================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--chrome-border-strong); background: var(--chrome-hover-bg); color: var(--chrome-fg-70); font: inherit; font-size: 0.95rem; line-height: 1; border-radius: 50%; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, transform .1s; } .theme-toggle:hover { color: var(--chrome-accent); background: var(--chrome-active-bg); border-color: var(--chrome-accent); } .theme-toggle:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } /* Press feedback - the control should feel like a button. */ .theme-toggle:active { transform: scale(0.9); } .theme-toggle .bi { line-height: 1; } /* Icon swap: sun shows in dark mode (click = go light) and vice versa. */ .theme-toggle .theme-toggle__dark { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle__dark { display: inline-flex; } html[data-theme="dark"] .theme-toggle .theme-toggle__light { display: none; } /* Floating variant — used on pages that have no place to put a button (the legacy dashboard screens). Injected by inc/theme_boot.php. */ .theme-toggle--float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; background: var(--accent-grad); color: var(--on-accent); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); font-size: 1.1rem; } .theme-toggle--float:hover, .theme-toggle--float:focus-visible { background: var(--accent-grad); color: var(--on-accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .theme-toggle--float:active { transform: scale(0.92); } @media print { .theme-toggle { display: none !important; } }