/* ============================================================ Dr. Zakir HM — Design System (style.css) Premium Academic + Neumorphic + Glassmorphism ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES (Design Tokens) ============================================================ */ :root { /* ---- PRIMARY PALETTE ---- */ --primary: #7C3AED; --primary-light: #A78BFA; --primary-lighter: #DDD6FE; --primary-dark: #5B21B6; --primary-50: #F5F3FF; --primary-100: #EDE9FE; --primary-200: #DDD6FE; --primary-500: #7C3AED; --primary-600: #6D28D9; --primary-700: #5B21B6; --primary-800: #4C1D95; --primary-900: #3B0764; /* ---- SECONDARY (Blue) ---- */ --secondary: #3B82F6; --secondary-light: #93C5FD; --secondary-dark: #1D4ED8; /* ---- MICRO ACCENTS ---- */ --accent-pink: #EC4899; --accent-orange: #F97316; --accent-teal: #14B8A6; --accent-gold: #F59E0B; --accent-emerald: #10B981; --accent-red: #EF4444; /* ---- NEUTRALS ---- */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --black: #000000; /* ---- BACKGROUNDS ---- */ --bg-body: #F8F7FC; --bg-card: #FFFFFF; --bg-glass: rgba(255, 255, 255, 0.72); --bg-glass-strong: rgba(255, 255, 255, 0.88); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-admin: #F0EEFB; --bg-sidebar: #FFFFFF; /* ---- GRADIENTS ---- */ --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%); --gradient-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 50%, #F0EEFB 100%); --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); --gradient-purple-blue: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%); --gradient-award: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%); --gradient-footer: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%); /* ---- SHADOWS (Neumorphic) ---- */ --shadow-xs: 0 1px 2px rgba(124, 58, 237, 0.04); --shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.06); --shadow-md: 0 4px 16px rgba(124, 58, 237, 0.08); --shadow-lg: 0 8px 32px rgba(124, 58, 237, 0.10); --shadow-xl: 0 16px 48px rgba(124, 58, 237, 0.12); --shadow-2xl: 0 24px 64px rgba(124, 58, 237, 0.16); --shadow-inner: inset 0 2px 4px rgba(124, 58, 237, 0.04); --shadow-card: 0 4px 24px rgba(124, 58, 237, 0.07), 0 1px 4px rgba(0,0,0,0.03); --shadow-card-hover: 0 12px 40px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(0,0,0,0.04); --shadow-button: 0 4px 14px rgba(124, 58, 237, 0.25); --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.15); --shadow-neumorphic: 6px 6px 18px rgba(124, 58, 237, 0.06), -6px -6px 18px rgba(255, 255, 255, 0.9); --shadow-neumorphic-inset: inset 4px 4px 8px rgba(124, 58, 237, 0.06), inset -4px -4px 8px rgba(255, 255, 255, 0.8); /* ---- MULTI-COLOR DYNAMIC SHADOWS ---- */ --shadow-color-1: rgba(124, 58, 237, 0.3); /* Purple */ --shadow-color-2: rgba(59, 130, 246, 0.2); /* Blue */ --shadow-color-3: rgba(236, 72, 153, 0.25); /* Pink */ --shadow-dynamic-mix: 0 10px 20px rgba(0,0,0,0.05), inset 2px 2px 5px rgba(255,255,255,0.8), inset -3px -3px 7px rgba(0,0,0,0.03), 0 0 20px var(--shadow-color-1), 0 0 40px var(--shadow-color-2); --shadow-dynamic-mix-hover: 0 15px 30px rgba(0,0,0,0.08), inset 2px 2px 5px rgba(255,255,255,0.9), inset -3px -3px 7px rgba(0,0,0,0.04), 0 0 25px var(--shadow-color-3), 0 0 50px var(--shadow-color-1); /* ---- TYPOGRAPHY ---- */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-hindi: 'Noto Sans Devanagari', var(--font-body); --font-urdu: 'Noto Nastaliq Urdu', var(--font-body); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ---- SPACING ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---- BORDERS ---- */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-full: 9999px; --border-light: 1px solid rgba(124, 58, 237, 0.08); --border-medium: 1px solid rgba(124, 58, 237, 0.12); /* ---- TRANSITIONS ---- */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Z-INDEX ---- */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-tooltip: 600; --z-toast: 700; /* ---- LAYOUT ---- */ --container-max: 1280px; --container-padding: 1.5rem; --navbar-height: 72px; --sidebar-width: 280px; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow-x: hidden; position: relative; width: 100%; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--gray-800); background-color: var(--bg-body); } /* ---- Links ---- */ a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--gray-900); line-height: var(--leading-tight); font-weight: 700; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } /* ---- Images ---- */ img { max-width: 100%; height: auto; display: block; } /* ---- Lists ---- */ ul, ol { list-style: none; } /* ---- Selection ---- */ ::selection { background-color: var(--primary-200); color: var(--primary-900); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .section { padding: var(--space-20) 0; position: relative; } .section-sm { padding: var(--space-12) 0; } .section-lg { padding: var(--space-32) 0; } /* ---- Section Headers ---- */ .section-header { text-align: center; margin-bottom: var(--space-12); max-width: 700px; margin-left: auto; margin-right: auto; } .section-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--primary-50); color: var(--primary); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-full); margin-bottom: var(--space-4); font-family: var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; } .section-title { font-size: var(--text-4xl); margin-bottom: var(--space-4); background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-subtitle { font-size: var(--text-lg); color: var(--gray-500); font-family: var(--font-body); font-weight: 400; line-height: var(--leading-relaxed); } /* ---- Hindi Text ---- */ .text-hindi { font-family: var(--font-hindi); } .text-urdu { font-family: var(--font-urdu); direction: rtl; } /* ---- Grid Utilities ---- */ .grid { display: grid; gap: var(--space-6); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* ---- Text Utilities ---- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--primary); } .text-muted { color: var(--gray-500); } .text-sm { font-size: var(--text-sm); } .text-lg { font-size: var(--text-lg); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ---- Spacing Utilities ---- */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* ---- Skip Link (Accessibility) ---- */ .skip-link { position: absolute; top: -100%; left: var(--space-4); background: var(--primary); color: var(--white); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); z-index: var(--z-toast); font-weight: 600; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-4); color: var(--white); } /* ---- Screen Reader Only (SEO & Accessibility) ---- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }