/* ============================================================ GLOBAL.CSS — Design System & Core Layout ============================================================ HOW THIS FILE WORKS: -------------------- This file is the FOUNDATION of the entire app. Every single page imports this file. It defines: 1. CSS Variables (Custom Properties) → Your color palette, spacing, shadows, and blur values. Changing one variable here changes the ENTIRE app's look instantly. 2. Two Theme Sets → Light (default) and Dark. The dark theme activates when gets a `data-theme="dark"` attribute, which is toggled by JavaScript. 3. CSS Reset → Removes default browser styles so the UI looks identical on Chrome, Firefox, Safari, and Edge. 4. Base Layout → The CSS Grid that positions the sidebar next to the main content area. ESSENTIAL-TO-KNOW: - All colors use CSS variables like var(--color-primary). - To add a new color, just add it to BOTH :root AND [data-theme="dark"]. - The layout uses CSS Grid: `grid-template-columns: var(--sidebar-width) 1fr` meaning the sidebar is fixed-width and the content takes all remaining space. ============================================================ */ /* ── Google Fonts (Formal, Government-Portal Style) ─────────── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap'); /* ── Light Theme (Default) ──────────────────────────────────── */ :root { /* ─ Primary Palette ─ */ --color-primary: #4f46e5; --color-primary-light: #818cf8; --color-primary-dark: #3730a3; --color-secondary: #06b6d4; --color-accent: #f59e0b; --color-danger: #ef4444; --color-success: #10b981; /* ─ Surfaces ─ */ --color-bg: #f0f4f8; --color-surface: rgba(255, 255, 255, 0.72); --color-surface-solid: #ffffff; --color-sidebar: rgba(255, 255, 255, 0.65); --color-border: rgba(99, 102, 241, 0.15); --color-overlay: rgba(15, 23, 42, 0.45); /* ─ Text ─ */ --color-text: #1e293b; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; --color-text-inverse: #ffffff; /* ─ Glassmorphism ─ */ --glass-blur: 16px; --glass-border: 1px solid rgba(255, 255, 255, 0.35); --glass-shadow: 0 8px 32px rgba(79, 70, 229, 0.08); /* ─ Layout ─ */ --sidebar-width: 270px; --header-height: 64px; --border-radius: 16px; --border-radius-sm: 10px; --border-radius-xs: 6px; /* ─ Spacing ─ */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ─ Transitions ─ */ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* ─ Gradient ─ */ --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); --gradient-surface: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(241,245,249,0.9) 100%); } /* ── Dark Theme ─────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #0b1120; --color-surface: rgba(30, 41, 59, 0.65); --color-surface-solid: #1e293b; --color-sidebar: rgba(15, 23, 42, 0.8); --color-border: rgba(99, 102, 241, 0.2); --color-overlay: rgba(0, 0, 0, 0.6); --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --glass-blur: 20px; --glass-border: 1px solid rgba(99, 102, 241, 0.15); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --gradient-surface: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.9) 100%); } /* ── CSS Reset ──────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 15px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Noto Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.7; min-height: 100vh; letter-spacing: 0.01em; transition: background-color var(--transition-normal), color var(--transition-normal); } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ LAYOUT SYSTEM — CSS Grid ============================================================ HOW THE LAYOUT WORKS: --------------------- The page uses a CSS Grid with two columns: ┌──────────────┬────────────────────────────────────┐ │ │ │ │ SIDEBAR │ MAIN CONTENT │ │ (270px) │ (1fr = rest) │ │ │ │ │ Fixed width │ Fluid, stretches to fill │ │ │ │ └──────────────┴────────────────────────────────────┘ On mobile (< 768px), the grid becomes a single column and the sidebar slides in from the left as an overlay. ============================================================ */ .app-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } .main-content { padding: var(--space-xl); overflow-y: auto; min-height: 100vh; } /* ── Background Decorative Blobs ────────────────────────────── */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(100px); opacity: 0.15; z-index: -1; pointer-events: none; transition: opacity var(--transition-slow); } body::before { width: 500px; height: 500px; background: var(--color-primary); top: -100px; right: -100px; } body::after { width: 400px; height: 400px; background: var(--color-secondary); bottom: -50px; left: -50px; } /* ── Mobile Header ──────────────────────────────────────────── */ .mobile-header { display: none; /* hidden on desktop */ position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--color-surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: var(--glass-border); padding: 0 var(--space-md); align-items: center; justify-content: space-between; z-index: 1000; transition: background var(--transition-normal); } .mobile-header .logo { font-weight: 700; font-size: 1.2rem; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hamburger { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-xs); transition: background var(--transition-fast); } .hamburger:hover { background: var(--color-border); } .hamburger svg { width: 24px; height: 24px; stroke: var(--color-text); fill: none; stroke-width: 2; stroke-linecap: round; } /* ── Overlay (behind mobile sidebar) ────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay); z-index: 998; opacity: 0; transition: opacity var(--transition-normal); } .sidebar-overlay.active { display: block; opacity: 1; } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ HOW RESPONSIVE WORKS: --------------------- Below 768px: 1. The Grid switches to a single column (sidebar disappears) 2. A mobile header appears at the top with a hamburger button 3. The sidebar gets position: fixed and slides in from left 4. An overlay appears behind the sidebar for dismissal 5. main-content gets top padding to avoid the fixed header ============================================================ */ @media (max-width: 768px) { .app-layout { grid-template-columns: 1fr; } .mobile-header { display: flex; } .main-content { padding: var(--space-md); padding-top: calc(var(--header-height) + var(--space-md)); } } /* ── Typography Utilities ───────────────────────────────────── */ .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 2rem; } .text-4xl { font-size: 2.5rem; } .text-muted { color: var(--color-text-secondary); } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-black { font-weight: 900; } /* ── Spacing Utilities ──────────────────────────────────────── */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } /* ── Keyframes ──────────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out both; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; }