/*
* =============================================================================
* MEGA-SITE GLOBAL THEME — Single Source of Truth
* File : wwwroot/css/theme.css
* Load : App.razor → after Bootstrap CSS, before app.css
*
* ┌─ HOW TO USE ────────────────────────────────────────────────────────────┐
* │ Every design decision lives here as a CSS Custom Property. │
* │ Change a value once → the entire site reflects it instantly. │
* │ Custom vars → var(--ms-*) │
* │ Bootstrap overrides → var(--bs-*) — picked up automatically │
* └─────────────────────────────────────────────────────────────────────────┘
*
* FONT STRATEGY — Zero-Latency / Zero External Dependency
* ─────────────────────────────────────────────────────────
* We use the native "system-ui" font stack exclusively.
* No Google Fonts. No CDN. No @font-face downloads.
* Each OS renders its own premium system font instantly at 0 ms:
* • Windows → Segoe UI (sharp, modern, Microsoft's premium font)
* • macOS/iOS→ SF Pro / San Francisco (Apple's premium system font)
* • Android → Roboto (Google's clean material font)
* • Linux → Ubuntu / Cantarell / DejaVu Sans
* Result: text appears at the same moment the first byte arrives — no FOUT,
* no layout shift, no render-blocking, no network roundtrip.
* FONT STRATEGY — Roboto (Google Fonts) + System Fallback Stack
* ──────────────────────────────────────────────────────────────
* LOCKED FONT: Roboto — loaded via Google Fonts CDN in App.razor.
* Two hints warm up DNS + TLS before the
* stylesheet request fires, cutting latency to near zero.
* font-display: swap → browser renders with the fallback font
* immediately; Roboto swaps in once downloaded — ZERO render blocking.
* • Android → Roboto is a system font → 0 ms download needed
* • All else → system-ui / Segoe UI / SF Pro shown instantly as
* fallback until Roboto loads (typically < 200 ms)
* Only 3 weights requested (400, 500, 700) — minimal payload.
* =============================================================================
*/
/* =============================================================================
1. TYPOGRAPHY
============================================================================= */
:root {
/* --- Font Families ------------------------------------------------------- */
/*
* PRIMARY (body text, paragraphs, labels, inputs)
* Roboto is loaded via Google Fonts (preconnected in App.razor).
* System fonts below are instant fallbacks — shown while Roboto loads.
* display=swap in the ensures zero render blocking.
* On Android, Roboto is already a system font → 0 ms download needed.
*/
--ms-font-sans:
"Roboto", /* Brand font — loaded via Google Fonts */
system-ui, /* W3C spec — OS default UI font (fallback) */
-apple-system, /* Safari / macOS / iOS → SF Pro */
BlinkMacSystemFont, /* Chrome on macOS → SF Pro */
"Segoe UI", /* Windows 10/11 → Segoe UI */
Oxygen, /* KDE Linux → Oxygen */
Ubuntu, /* Ubuntu Linux → Ubuntu font */
"Helvetica Neue", /* Older macOS fallback */
Arial, /* Universal fallback */
sans-serif; /* Generic category fallback */
/*
* MONOSPACE (code blocks, data tables, quiz IDs)
* Native mono stack — no download, crisp on all screens.
*/
--ms-font-mono:
ui-monospace, /* W3C spec — maps to OS mono font */
"Cascadia Code", /* Windows 11 → Microsoft's premium mono */
"Cascadia Mono", /* Windows 11 alt */
"Menlo", /* macOS Terminal font */
"Consolas", /* Windows/VS Code classic */
"Liberation Mono", /* Linux RedHat/Fedora */
"Courier New", /* Universal fallback */
monospace; /* Generic category fallback */
/* --- Font Sizes (fluid type scale using clamp for responsive sizing) ----- */
--ms-text-xs: 0.75rem; /* 12px — fine print, badges */
--ms-text-sm: 0.875rem; /* 14px — secondary labels, captions */
--ms-text-base: 1rem; /* 16px — body text baseline */
--ms-text-lg: 1.125rem; /* 18px — lead paragraphs */
--ms-text-xl: 1.25rem; /* 20px — card headings */
--ms-text-2xl: 1.5rem; /* 24px — section headings */
--ms-text-3xl: 1.875rem; /* 30px — page titles */
--ms-text-4xl: 2.25rem; /* 36px — hero headings */
--ms-text-5xl: 3rem; /* 48px — banner / display text */
/* --- Font Weights -------------------------------------------------------- */
--ms-weight-light: 300;
--ms-weight-regular: 400;
--ms-weight-medium: 500;
--ms-weight-semibold: 600;
--ms-weight-bold: 700;
--ms-weight-extrabold:800;
/* --- Line Heights --------------------------------------------------------- */
--ms-leading-tight: 1.25; /* Headings */
--ms-leading-snug: 1.375; /* Subheadings */
--ms-leading-normal: 1.5; /* Body text */
--ms-leading-relaxed:1.625; /* Long-form reading (articles) */
--ms-leading-loose: 2; /* Spacious layouts */
/* --- Letter Spacing ------------------------------------------------------ */
--ms-tracking-tighter: -0.05em;
--ms-tracking-tight: -0.025em;
--ms-tracking-normal: 0em;
--ms-tracking-wide: 0.025em;
--ms-tracking-wider: 0.05em;
--ms-tracking-widest: 0.1em; /* All-caps labels, badges */
/* =============================================================================
2. COLOR PALETTE — Google Enterprise Blue #1A73E8 & High-Contrast Neutrals
=============================================================================
Palette name : "Google Enterprise Material"
Brand primary : #1A73E8 (Google Blue) — modern, enterprise-grade, authoritative
Character : Crisp pure-white canvas, hairline separation (#DADCE0), optimal contrast
Accessibility : All text/bg combinations meet WCAG AAA / AA (>7:1 / >4.5:1 contrast)
============================================================================= */
/* --- Blue Scale — anchored to #1A73E8 (Google Blue) ----------------------- */
--ms-blue-50: #E8F0FE; /* Google Blue tint — active chips, soft highlights */
--ms-blue-100: #D2E3FC; /* Light tint — sidebar bg, badges */
--ms-blue-200: #AECBFA; /* Soft blue — borders, dividers */
--ms-blue-300: #8AB4F8; /* Medium-light — accent outlines */
--ms-blue-400: #669DF6; /* Medium — icons, secondary buttons */
--ms-blue-500: #4285F4; /* True mid-blue — link hover, accents */
--ms-blue-600: #1A73E8; /* ** BRAND PRIMARY ** Google Blue #1A73E8 */
--ms-blue-700: #174EA6; /* Dark primary — hover state of primary btn */
--ms-blue-800: #185ABC; /* Deep Google blue */
--ms-blue-900: #174EA6; /* Darkest link/contrast */
--ms-blue-950: #202124; /* Google Dark Charcoal */
/* --- Semantic / Functional Colors ---------------------------------------- */
--ms-color-primary: var(--ms-blue-600); /* #1A73E8 — main brand */
--ms-color-primary-hover: var(--ms-blue-700); /* #174EA6 — hover/active */
--ms-color-primary-light: var(--ms-blue-50); /* #E8F0FE — soft bg */
--ms-color-primary-dark: var(--ms-blue-800); /* #185ABC */
--ms-color-primary-darker: var(--ms-blue-900); /* #174EA6 */
/* Accent — Google Cyan / Sky highlight */
--ms-color-accent: #0288D1; /* Vivid highlight accent */
--ms-color-accent-hover: #0277BD; /* Hover */
/* --- Neutrals (Google High-Contrast Scale) ------------------------------- */
--ms-gray-50: #FFFFFF; /* Pure White — primary canvas */
--ms-gray-100: #F8FAFD; /* Google Subtle Surface — soft background */
--ms-gray-200: #E8EAED; /* Google Light Separator */
--ms-gray-300: #DADCE0; /* Google Signature Hairline Border */
--ms-gray-400: #BDC1C6; /* Disabled borders, outline focus */
--ms-gray-500: #5F6368; /* Google Secondary / Muted Text (Dates, Tags) */
--ms-gray-600: #4D5156; /* Supporting metadata */
--ms-gray-700: #3C4043; /* Google Body Text (high-legibility Slate) */
--ms-gray-800: #3C4043; /* Primary body text */
--ms-gray-900: #202124; /* Google Dark Charcoal (Headings H1-H6) */
/* --- Semantic Status Colors (Google Material 3) --------------------------- */
--ms-color-success: #1E8E3E; /* Google Green */
--ms-color-success-light: #E6F4EA; /* Light Green bg */
--ms-color-warning: #F9AB00; /* Google Amber */
--ms-color-warning-light: #FEF7E0; /* Light Amber bg */
--ms-color-danger: #D93025; /* Google Red */
--ms-color-danger-light: #FCE8E6; /* Light Red bg */
--ms-color-info: #1A73E8; /* Info Blue */
--ms-color-info-light: #E8F0FE; /* Info Light bg */
/* --- Surface / Background Colors ------------------------------------------ */
--ms-bg-page: #FFFFFF; /* Crisp Pure White Canvas */
--ms-bg-card: #FFFFFF; /* Card / panel surface */
--ms-bg-overlay: rgba(32, 33, 36, 0.6); /* Modal / drawer overlay */
--ms-bg-dark: #202124; /* Dark sections */
/* --- Text Colors ---------------------------------------------------------- */
--ms-text-heading: var(--ms-gray-900); /* #202124 — H1–H6 */
--ms-text-body: var(--ms-gray-800); /* #3C4043 — Paragraphs */
--ms-text-muted: var(--ms-gray-500); /* #5F6368 — Secondary / captions */
--ms-text-disabled: var(--ms-gray-400); /* Disabled states */
--ms-text-inverse: #FFFFFF; /* Text on dark backgrounds */
--ms-text-link: var(--ms-blue-600); /* Hyperlinks */
--ms-text-link-hover:var(--ms-blue-700); /* Hovered links */
/* --- Border Colors -------------------------------------------------------- */
--ms-border-light: var(--ms-gray-200); /* #E8EAED */
--ms-border-default: var(--ms-gray-300); /* #DADCE0 Google Hairline */
--ms-border-strong: var(--ms-gray-400); /* #BDC1C6 */
--ms-border-focus: var(--ms-blue-600); /* #1A73E8 */
/* =============================================================================
3. SPACING SCALE (8-point grid)
============================================================================= */
--ms-space-1: 0.25rem; /* 4px */
--ms-space-2: 0.5rem; /* 8px */
--ms-space-3: 0.75rem; /* 12px */
--ms-space-4: 1rem; /* 16px */
--ms-space-5: 1.25rem; /* 20px */
--ms-space-6: 1.5rem; /* 24px */
--ms-space-8: 2rem; /* 32px */
--ms-space-10: 2.5rem; /* 40px */
--ms-space-12: 3rem; /* 48px */
--ms-space-16: 4rem; /* 64px */
--ms-space-20: 5rem; /* 80px */
--ms-space-24: 6rem; /* 96px */
/* =============================================================================
4. BORDER RADIUS
============================================================================= */
--ms-radius-sm: 0.25rem; /* 4px — tags, badges */
--ms-radius-md: 0.5rem; /* 8px — buttons, inputs, chips */
--ms-radius-lg: 0.75rem; /* 12px — cards */
--ms-radius-xl: 1rem; /* 16px — panels, modals */
--ms-radius-2xl: 1.5rem; /* 24px — hero sections, large cards */
--ms-radius-full: 9999px; /* Pill / circular badges, search chips */
/* =============================================================================
5. SHADOWS (Google Material 3 Elevation System)
============================================================================= */
--ms-shadow-xs: 0 1px 2px 0 rgba(60, 64, 67, 0.08);
--ms-shadow-sm: 0 1px 3px 0 rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.1);
--ms-shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.2), 0 4px 8px 3px rgba(60, 64, 67, 0.1);
--ms-shadow-lg: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 8px 24px 4px rgba(60, 64, 67, 0.12);
--ms-shadow-xl: 0 4px 12px 4px rgba(60, 64, 67, 0.16), 0 16px 40px 8px rgba(60, 64, 67, 0.14);
--ms-shadow-2xl: 0 6px 16px 6px rgba(60, 64, 67, 0.18), 0 24px 64px 12px rgba(60, 64, 67, 0.18);
/* Focus ring (Google Blue accessibility) */
--ms-shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.35);
/* =============================================================================
6. TRANSITIONS & ANIMATION
============================================================================= */
--ms-duration-fast: 100ms; /* Micro interactions (checkbox, toggle) */
--ms-duration-base: 200ms; /* Buttons, links, hover effects */
--ms-duration-slow: 350ms; /* Panels, dropdowns, modals */
--ms-duration-slower: 500ms; /* Page transitions, hero animations */
--ms-ease-in: cubic-bezier(0.4, 0, 1, 1);
--ms-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Most UI transitions */
--ms-ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* Menus, modals */
--ms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful, gamified */
/* =============================================================================
7. Z-INDEX SCALE
============================================================================= */
--ms-z-below: -1;
--ms-z-base: 0;
--ms-z-raised: 10; /* Cards on hover, sticky sidebars */
--ms-z-dropdown: 100; /* Dropdown menus */
--ms-z-sticky: 200; /* Sticky navbar */
--ms-z-overlay: 300; /* Backdrop overlays */
--ms-z-modal: 400; /* Modal dialogs */
--ms-z-toast: 500; /* Notification toasts */
--ms-z-tooltip: 600; /* Tooltips (must be above everything) */
/* =============================================================================
8. LAYOUT
============================================================================= */
--ms-container-sm: 540px;
--ms-container-md: 720px;
--ms-container-lg: 960px;
--ms-container-xl: 1140px;
--ms-container-xxl: 1320px;
--ms-navbar-height: 60px; /* Matches Bootstrap navbar default */
--ms-sidebar-width: 260px; /* Future student/admin sidebar */
/* =============================================================================
9. BOOTSTRAP 5.3 VARIABLE OVERRIDES
These use Bootstrap's own CSS custom property names so Bootstrap's
compiled components automatically adopt the Google Enterprise Material theme.
============================================================================= */
/* Primary color (affects .btn-primary, .bg-primary, .text-primary, etc.) */
--bs-primary: #1A73E8;
--bs-primary-rgb: 26, 115, 232;
/* Link color */
--bs-link-color: var(--ms-blue-600);
--bs-link-color-rgb: 26, 115, 232;
--bs-link-hover-color: var(--ms-blue-700);
--bs-link-hover-color-rgb: 23, 78, 166;
/* Status Colors */
--bs-success: #1E8E3E;
--bs-success-rgb: 30, 142, 62;
--bs-danger: #D93025;
--bs-danger-rgb: 217, 48, 37;
--bs-warning: #F9AB00;
--bs-warning-rgb: 249, 171, 0;
/* Body */
--bs-body-font-family: var(--ms-font-sans);
--bs-body-font-size: var(--ms-text-base);
--bs-body-font-weight: var(--ms-weight-regular);
--bs-body-line-height: var(--ms-leading-normal);
--bs-body-color: var(--ms-gray-800);
--bs-body-bg: #FFFFFF;
/* Headings */
--bs-heading-color: var(--ms-gray-900);
/* Border */
--bs-border-color: var(--ms-gray-300);
--bs-border-radius: var(--ms-radius-md);
--bs-border-radius-sm: var(--ms-radius-sm);
--bs-border-radius-lg: var(--ms-radius-lg);
--bs-border-radius-xl: var(--ms-radius-xl);
--bs-border-radius-xxl: var(--ms-radius-2xl);
--bs-border-radius-pill: var(--ms-radius-full);
/* Code */
--bs-code-color: var(--ms-blue-600);
/* Focus ring */
--bs-focus-ring-color: rgba(26, 115, 232, 0.25);
--bs-focus-ring-width: 3px;
/* Tables */
--bs-table-color: var(--ms-gray-800);
--bs-table-bg: #FFFFFF;
--bs-table-border-color: var(--ms-gray-300);
--bs-table-striped-bg: #F8FAFD;
--bs-table-hover-bg: #F1F3F4;
/* Navbar / dark */
--bs-dark: #202124;
--bs-dark-rgb: 32, 33, 36;
}
/* =============================================================================
10. GLOBAL BASE STYLES
Applied globally using the custom properties above.
============================================================================= */
*, *::before, *::after {
box-sizing: border-box;
}
html {
/* GPU-accelerated text rendering for crispness on all screens */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--ms-font-sans);
font-size: var(--ms-text-base);
font-weight: var(--ms-weight-regular);
line-height: var(--ms-leading-normal);
color: var(--ms-text-body);
background-color: var(--ms-bg-page);
/* Optimise font rendering on all platforms */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
color: var(--ms-text-heading);
font-weight: var(--ms-weight-bold);
line-height: var(--ms-leading-tight);
letter-spacing: var(--ms-tracking-tight);
}
a {
color: var(--ms-text-link);
transition: color var(--ms-duration-base) var(--ms-ease-out);
}
a:hover {
color: var(--ms-text-link-hover);
}
code, kbd, pre, samp {
font-family: var(--ms-font-mono);
}
/* Accessible focus ring using the theme focus color */
:focus-visible {
outline: 2px solid var(--ms-border-focus);
outline-offset: 2px;
border-radius: var(--ms-radius-sm);
}
/* =============================================================================
11. GOOGLE ENTERPRISE UTILITY CLASSES
============================================================================= */
.bg-light {
background-color: var(--bs-light) !important;
}
.text-dark {
color: var(--ms-text-heading) !important;
}
.text-muted {
color: var(--ms-text-muted) !important;
}
.border {
border-color: var(--ms-border-default) !important;
}
.border-light {
border-color: var(--ms-border-light) !important;
}
/* Question Statement & Multi-Line UPSC Support */
.ms-statement-text {
white-space: pre-line !important;
line-height: 1.7 !important;
word-break: break-word;
}