/* global.css - CONSOLIDATED GLOBAL STYLESHEET (every ibmarker portal)
= MainStyles.css + icons.css + consent-banner.css, merged 2026-05-25 (v4.27.0).
Loaded by Student / Teacher / Public. School stays self-contained (school-site.css)
and does NOT load this. The _tokens.css @import below must remain first. */
/* MainStyles.css - Student portal theme + common styles.
Pulls shared tokens (typography, spacing, radii, shadows, status colours)
from _tokens.css. The student portal keeps its own --font-body (Outfit)
and its 18-token --palette-* which the profile-themes JS overrides at
runtime. Future site-wide token edits land in _tokens.css. */
@import url('_tokens.css');
/* ==================== THEME VARIABLES ==================== */
/* Default Theme - Bright Accents with Subtle Backgrounds */
/* NOTE: Profile themes (database-driven) override these variables via profile-themes.js */
:root {
/* Sora (headers) + Outfit (body) - the student dashboard typeface, now the
site-wide pairing. These intentionally shadow the _tokens.css --font-body
so the student/teacher/public portals render Outfit/Sora; --font-header is
the portal's heading alias (mirrors --font-display in _tokens.css). */
--font-body: 'Outfit', system-ui, sans-serif;
--font-header: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--primary-bg: #0a0a14;
/* Three-Tone Color System */
/* Primary: Headers, navigation, sidebars (structural elements) */
--theme-primary: #0f0f0f;
--theme-primary-rgb: 15, 15, 15;
/* Accent: Buttons, links, interactive elements, highlights */
--theme-accent: #4ade80;
--theme-accent-rgb: 74, 222, 128;
/* Secondary: Borders, subtle backgrounds, supporting UI */
--theme-secondary: #1e293b;
--theme-secondary-rgb: 30, 41, 59;
/* Secondary ACCENT: text/icon-grade second tone paired with --theme-accent
(hub secondary highlights, dual-tone gradients, Play CTA). Distinct from
--theme-secondary above, which is a slate SURFACE tone - deriving accents
from it rendered them near-invisible navy for un-themed users. Default =
the dashboard teal (--brand-teal in _tokens.css) so every student page
shares the dashboard's palette; profile presets override it via the
Site.Master IIFE / profile-themes.js (preset secondaryColor). */
--theme-secondary-accent: var(--brand-teal, #2dd4a8);
--theme-secondary-accent-rgb: var(--brand-teal-rgb, 45, 212, 168);
/* ============================================================
18-TOKEN PALETTE
Single source of truth for theme-aware colour. Each profile
theme overrides these via Site.Master IIFE / profile-themes.js
(keys live in ProfileBackgroundThemes.ThemeStyles JSON).
Values below = default theme.
============================================================ */
/* Surfaces (5) */
--palette-bg-base: #0a0a14;
--palette-bg-subtle: #0d0d1a;
--palette-surface-1: rgba(15, 15, 15, 0.8);
--palette-surface-2: rgba(30, 30, 40, 0.85);
--palette-border-subtle: rgba(30, 41, 59, 0.4);
--palette-border-strong: rgba(30, 41, 59, 0.5);
/* Text (2) */
--palette-text-primary: #f8fafc;
--palette-text-muted: #94a3b8;
/* Accent (4) */
--palette-accent: #4ade80;
--palette-accent-rgb: 74, 222, 128;
--palette-accent-hover: #6ee7b7;
--palette-accent-on: #0a0a14;
/* Status (5 + subtles) */
--palette-success: #4ade80;
--palette-success-rgb: 74, 222, 128;
--palette-success-subtle: rgba(74, 222, 128, 0.15);
--palette-danger: #f87171;
--palette-danger-rgb: 248, 113, 113;
--palette-danger-subtle: rgba(248, 113, 113, 0.15);
--palette-warning: #fbbf24;
--palette-warning-rgb: 251, 191, 36;
/* Focus (1) */
--palette-focus-ring: rgba(74, 222, 128, 0.4);
/* Mesh background hues (decorative; consumed by site-chrome.css) */
--mesh-hue-1-rgb: 74, 222, 128;
--mesh-hue-2-rgb: 56, 189, 248;
--mesh-hue-3-rgb: 167, 139, 250;
/* Primary Accent Colors (Bright - for text, borders, highlights) */
--accent-primary: #4ade80;
--accent-secondary: #1e293b;
--accent-color-rgb: 74, 222, 128;
/* Secondary/Muted Colors (Subtle - for backgrounds, secondary elements) */
--muted-primary: #64748b;
--muted-secondary: #475569;
--muted-color-rgb: 100, 116, 139;
--secondary-bg: rgba(var(--student-accent-rgb, 74, 222, 128), 0.6);
/* Text Colors */
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.5);
--border-color: rgba(255, 255, 255, 0.1);
/* Accent-tinted shadows - track the selected preset's primary accent. */
--shadow-primary: 0 8px 32px rgba(var(--student-accent-rgb, 74, 222, 128), 0.3);
--shadow-hover: 0 12px 40px rgba(var(--student-accent-rgb, 74, 222, 128), 0.5);
--sidebar-bg: transparent;
--topbar-bg: transparent;
--grid-color: rgba(var(--student-accent-rgb, 74, 222, 128), 0.1);
--sidebar-width: 220px;
/* Card/Div Gradient Backgrounds */
--card-bg-gradient: linear-gradient(135deg, #0a0a14 0%, #0d1117 50%, #0a0e1a 100%);
--secondary-bg-gradient: linear-gradient(135deg, rgba(var(--student-accent-rgb, 74, 222, 128), 0.12) 0%, rgba(var(--student-accent-2-rgb, 45, 212, 168), 0.08) 100%);
--hover-bg-gradient: linear-gradient(135deg, var(--student-accent, #4ade80) 0%, var(--student-accent-2, #2dd4a8) 100%);
/* Utility Colors for Gradients and Accents */
--utility-purple: #8b5cf6;
--utility-pink: #ec4899;
--utility-orange: #f97316;
--utility-cyan: #5eead4;
/* Legacy Variables for Backward Compatibility */
--primary-color: #0a0a14;
--secondary-color: var(--student-accent, #4ade80);
--accent-color: var(--student-accent, #4ade80);
--text-color: #ffffff;
--shadow-color: 0 8px 32px rgba(var(--student-accent-rgb, 74, 222, 128), 0.3);
--shadow-color-hover: 0 12px 40px rgba(var(--student-accent-rgb, 74, 222, 128), 0.5);
--shadow-color-text: 0 2px 4px rgba(0, 0, 0, 0.3);
--primary-bg-rgb: 10, 10, 20;
/* Status colours - now theme-aware via the palette tokens above.
Legacy --info-color stays fixed (no semantic info slot in the palette). */
--success-color: var(--palette-success);
--success-color-light: var(--palette-success);
--danger-color: var(--palette-danger);
--warning-color: var(--palette-warning);
--info-color: #2196F3;
--card-bg-color: #252525;
--card-bg-hover: #2d2d2d;
/* Common Hardcoded Colors (now centralized) */
--sidebar-bg-alt: rgba(26, 26, 46, 0.95);
--dark-bg-alt: rgba(22, 33, 62, 0.95);
--dark-bg-deep-rgb: 15, 15, 35; /* Deep dark background for dropdowns/inputs */
/* Platform brand blue used by the dark credential pages (Login / Signup /
ForgotPassword / SchoolSignup / Startup) for glass-morphism tints,
borders, shadows, and focus glows. Matches --theme-secondary-accent
(#3b82f6) so the auth flow reads as part of the same dark theme as
the rest of the app instead of its own deep-navy/cyan variant. */
--credential-blue: #3b82f6;
--credential-blue-rgb: 59, 130, 246;
/* Signature glass-morphism panel gradient for credential surfaces
(form container, signup modal, welcome card). */
--credential-glass-gradient: linear-gradient(145deg,
rgba(var(--credential-blue-rgb), 0.15) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(var(--credential-blue-rgb), 0.12) 100%);
/* --emerald-green is used in ~26 gradients across the practice +
multiplayer pages of the form
linear-gradient(135deg, var(--accent-primary), var(--emerald-green))
i.e. as the "secondary tone" paired with the user's accent. With
the C1 preset model each user picks a dual-tone preset, so we
resolve this to the preset's secondary colour and fall back to the
original green only when no theme is active. Effect: every gradient
retints in lockstep with the preset, without touching the 26 call
sites. Semantic success markers (--v3-green / --v3-green-dim) stay
fixed - correct/easy = green is a universal convention.
Anchored to --theme-secondary-accent (NOT --theme-secondary, whose
un-themed default is a slate surface tone): un-themed users get the
dashboard teal, preset users get their preset secondary. */
--emerald-green: var(--theme-secondary-accent, #10b981);
--emerald-green-dark: #059669;
/* Dashboard Card Backgrounds (Subtle Glass-morphism) */
--card-bg-subtle: rgba(255, 255, 255, 0.04);
--card-bg-prominent: rgba(255, 255, 255, 0.05);
--card-bg-hover: rgba(255, 255, 255, 0.08);
/* University/Gradient Colors - Used across university pages */
--university-primary: #667eea;
--university-secondary: #764ba2;
--university-primary-rgb: 102, 126, 234;
--university-secondary-rgb: 118, 75, 162;
--university-gradient: linear-gradient(135deg, var(--university-primary) 0%, var(--university-secondary) 100%);
/* Glass-morphism blur values */
--glass-blur-light: blur(10px);
--glass-blur-standard: blur(20px);
--glass-blur-heavy: blur(30px);
/* Rank/Medal Colors - Universal across themes */
--rank-gold: #ffd700;
--rank-gold-glow: rgba(255, 215, 0, 0.5);
--rank-silver: #c0c0c0;
--rank-silver-glow: rgba(192, 192, 192, 0.5);
--rank-bronze: #cd7f32;
--rank-bronze-glow: rgba(205, 127, 50, 0.5);
/* Score State Colors */
--score-excellent: #4CAF50;
--score-good: #2196F3;
--score-average: #FFC107;
--score-needs-improvement: #FF5722;
/* Animation Timing Scale */
--duration-fast: 0.15s;
--duration-normal: 0.3s;
--duration-slow: 0.6s;
--ease-default: cubic-bezier(0.4, 0.0, 0.2, 1);
/* Spacing Scale */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Component Spacing */
--card-padding: var(--space-md);
--card-padding-lg: var(--space-lg);
--grid-gap: var(--space-lg);
/* ==================== V3 DESIGN SYSTEM ==================== */
/* Derived from profile theme variables (set by profile-themes.js).
Falls back to V3 defaults when no theme is active. */
/* Backgrounds */
--v3-bg-base: var(--primary-bg, #0c0e16);
--v3-bg-surface: var(--sidebar-bg, rgba(13, 13, 26, 0.95));
--v3-bg-raised: rgba(255, 255, 255, 0.05);
--v3-bg-hover: rgba(255, 255, 255, 0.08);
/* Primary accent - adapts to user's chosen theme accent */
--v3-teal: var(--theme-accent, #2dd4a8);
--v3-teal-bright: var(--theme-accent, #5eead4);
--v3-teal-dim: rgba(var(--theme-accent-rgb, 45, 212, 168), 0.10);
--v3-teal-glow: rgba(var(--theme-accent-rgb, 45, 212, 168), 0.20);
/* Supplementary palette - fixed utility colors for differentiation */
--v3-coral: #ff8c8c;
--v3-coral-bright: #ffa0a0;
--v3-coral-dim: rgba(255, 140, 140, 0.10);
--v3-violet: #a78bfa;
--v3-violet-dim: rgba(167, 139, 250, 0.10);
--v3-amber: #fbbf24;
--v3-amber-dim: rgba(251, 191, 36, 0.10);
--v3-sky: #38bdf8;
--v3-sky-dim: rgba(56, 189, 248, 0.10);
--v3-green: #34d399;
--v3-green-dim: rgba(52, 211, 153, 0.10);
/* Text - follow theme text colors */
--v3-text-1: var(--text-primary, #f0f2f5);
--v3-text-2: var(--text-secondary, #9ca3b4);
--v3-text-3: var(--text-muted, #5c6478);
/* Borders - follow theme border */
--v3-border: var(--border-color, rgba(255,255,255,0.06));
--v3-border-hover: rgba(255,255,255,0.10);
--v3-border-teal: rgba(var(--theme-accent-rgb, 45, 212, 168), 0.20);
/* Supplementary palette - pink */
--v3-pink: #f472b6;
--v3-pink-dim: rgba(244, 114, 182, 0.10);
/* Elevation layers (glassmorphism) */
--v3-layer-0: rgba(255, 255, 255, 0.02);
--v3-layer-1: rgba(255, 255, 255, 0.04);
--v3-layer-2: rgba(255, 255, 255, 0.07);
--v3-layer-3: rgba(255, 255, 255, 0.10);
--v3-layer-4: rgba(255, 255, 255, 0.14);
/* Blur levels */
--v3-blur-1: 8px;
--v3-blur-2: 16px;
--v3-blur-3: 24px;
--v3-blur-4: 32px;
/* Radii */
--v3-radius: 16px;
--v3-radius-sm: 10px;
--v3-radius-xs: 6px;
/* Accent border glow */
--v3-border-glow: rgba(var(--theme-accent-rgb, 45, 212, 168), 0.25);
}
/* DEPRECATED: data-theme="purple" removed - use profile themes instead */
/* DEPRECATED: data-theme="neon" removed - use profile themes instead */
/* DEPRECATED: data-theme="minimal" removed - use profile themes instead */
/* DEPRECATED: data-theme="corporate" removed - use profile themes instead */
/* ==================== BASE STYLES ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
padding: 0;
color: var(--text-primary);
background: var(--primary-bg);
min-height: 100vh;
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* Login/standalone page-specific styles - only apply when NOT using Site.Master
AND NOT using TeacherSite.Master / SchoolSite.Master layouts. Without the
:not(:has(.teacher-app)) exclusion, this rule's high specificity (#container
inside :not(:has(...)) = 0,1,1,1) overrides per-portal body chassis on
teacher pages, blanking out the green-glow triangle pattern. */
body:not(:has(#container)):not(:has(.layout-container)):not(:has(.teacher-app)):not(:has(.school-app)):not(:has(.app-container)):not(:has(.profile-theme-container)) {
text-align: center;
background: linear-gradient(135deg, #0a0a0a 0%, #151515 50%, #0a0a0a 100%);
display: flex;
justify-content: center;
align-items: center;
}
/* Dashboard / Site.Master / Profile pages - layout reset only. Background
is owned by each portal's C1 chassis rule (site-chrome.css /
teacher-site.css / school-site.css / profile.css); setting it here
would override the triangle + radial glow paint. */
body:has(#container),
body:has(.layout-container),
body:has(.app-container),
body:has(.profile-theme-container) {
display: block !important;
justify-content: initial !important;
align-items: initial !important;
text-align: left !important;
}
/* Form centering for standalone pages (login, signup, etc.) - exclude pages with specific containers */
form:not(:has(.admin-content)):not(:has(.app-container)):not(:has(.layout-container)):not(:has(#container)) {
display: flex;
justify-content: center;
align-items: center;
}
h1, h2, h3, h4, h5, h6 {
color: var(--text-primary);
font-weight: 600;
margin-top: 0;
}
/* ==================== SHARED ANIMATED BACKGROUND ==================== */
/* Opt-in via markup:
Page-scoped overrides live in profile.css (theme accent dots),
pfp-creator.css (compact static grid), etc. */
.background-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(var(--credential-blue-rgb), 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--credential-blue-rgb), 0.1) 1px, transparent 1px);
background-size: 80px 80px;
background-position: 0 0, 0 0;
animation: gridMove 20s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(80px, 80px); }
}
.floating-dots {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-dots .dot {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, var(--accent-color), transparent);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-dots .dot:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; animation-duration: 8s; }
.floating-dots .dot:nth-child(2) { top: 60%; left: 20%; animation-delay: 2s; animation-duration: 6s; }
.floating-dots .dot:nth-child(3) { top: 40%; right: 15%; animation-delay: 1s; animation-duration: 7s; }
.floating-dots .dot:nth-child(4) { bottom: 30%; right: 25%; animation-delay: 3s; animation-duration: 9s; }
.floating-dots .dot:nth-child(5) { bottom: 20%; left: 30%; animation-delay: 1.5s; animation-duration: 5s; }
.floating-dots .dot:nth-child(6) { top: 15%; right: 40%; animation-delay: 4s; animation-duration: 8s; }
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.3; }
25% { transform: translateY(-20px) translateX(10px) scale(1.2); opacity: 0.6; }
50% { transform: translateY(-10px) translateX(-5px) scale(0.8); opacity: 1; }
75% { transform: translateY(-30px) translateX(15px) scale(1.1); opacity: 0.4; }
}
/* ==================== MODERN BUTTON STYLES ==================== */
/* Glass-morphism buttons with accent edges - consistent with IBMarker theme */
.btnDefault {
width: 100%;
padding: 18px 32px;
margin: 10px 0 5px 0;
font-size: var(--font-size-xl);
font-weight: 600;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--accent-primary);
border-right: 3px solid var(--accent-primary);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btnDefault:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--accent-primary);
border-right-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
.btnDefault:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.08);
}
.btnDefault.secondary {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--accent-secondary);
border-right: 3px solid var(--accent-secondary);
font-size: var(--font-size-xl);
font-weight: 500;
text-transform: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.btnDefault.secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--accent-secondary);
border-right-color: var(--accent-secondary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
.btnBack, .BackClass {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 16px 32px;
font-size: var(--font-size-xl);
font-weight: 500;
margin: 10px 0 5px 0;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
width: 100%;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
text-align: center;
text-decoration: none;
display: inline-block;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btnBack:hover, .BackClass:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btnBack:active, .BackClass:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.06);
}
/* ==================== GLASS BUTTON STYLES ==================== */
/* Refined glass-morphism buttons with accent edges */
/* Primary glass button style */
.btn-glass, .btn-primary-glass {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--accent-primary);
border-right: 3px solid var(--accent-primary);
border-radius: 3px;
padding: 12px 24px;
font-size: var(--font-size-lg);
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
letter-spacing: 0.3px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.btn-glass:hover, .btn-primary-glass:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--accent-primary);
border-right-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
.btn-glass:active, .btn-primary-glass:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.08);
}
/* Secondary glass button */
.btn-secondary-glass {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
padding: 10px 20px;
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
letter-spacing: 0.3px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-secondary-glass:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Large glass button */
.btn-large-glass {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--accent-primary);
border-right: 3px solid var(--accent-primary);
border-radius: 3px;
padding: 18px 40px;
font-size: var(--font-size-xl);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
margin-top: 15px;
}
.btn-large-glass:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--accent-primary);
border-right-color: var(--accent-primary);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
/* Success glass button */
.btn-success-glass {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--success-color);
border-right: 3px solid var(--success-color);
border-radius: 3px;
padding: 12px 24px;
font-size: var(--font-size-lg);
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
letter-spacing: 0.3px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-success-glass:hover {
background: rgba(8, 186, 47, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--success-color);
border-right-color: var(--success-color);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(8, 186, 47, 0.15);
}
/* Danger glass button */
.btn-danger-glass {
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 3px solid var(--danger-color);
border-right: 3px solid var(--danger-color);
border-radius: 3px;
padding: 12px 24px;
font-size: var(--font-size-lg);
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
letter-spacing: 0.3px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-danger-glass:hover {
background: rgba(220, 53, 69, 0.1);
border-color: rgba(255, 255, 255, 0.15);
border-left-color: var(--danger-color);
border-right-color: var(--danger-color);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(220, 53, 69, 0.15);
}
/* ==================== MODERN CARD STYLES ==================== */
/* C1 card chrome - shared with teacher/school stakeholder surface family.
Site-chrome.css owns the canonical rule; this block kept for any page
that loads MainStyles.css only. */
.card {
background: linear-gradient(180deg,
rgba(15, 23, 42, 0.85) 0%,
rgba(10, 14, 26, 0.85) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 20px;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.30),
inset 0 0 0 1px rgba(255, 255, 255, 0.02);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
/* Bootstrap 5.3's own .card sets color: var(--bs-body-color) (near-black,
#212529) - this project reuses the "card" class name, so any text inside
that doesn't have its own colour rule (card-title/form-label/etc do)
inherited Bootstrap's dark default instead of the theme's light ink. */
color: var(--text-primary);
}
.card:hover {
border-color: rgba(var(--student-accent-rgb, 74, 222, 128), 0.30);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.40),
inset 0 0 0 1px rgba(var(--student-accent-rgb, 74, 222, 128), 0.06);
}
/* ==================== FORM CONTROLS ==================== */
input, select, textarea {
background: var(--v3-layer-2);
border: 1px solid var(--v3-border);
border-radius: 8px;
padding: 10px 15px;
color: var(--v3-text-1);
transition: all 0.3s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--v3-border-teal);
box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb, 45, 212, 168), 0.15);
}
select option {
background: var(--primary-bg, #1a1a2e);
color: var(--v3-text-1);
}
input::placeholder,
textarea::placeholder {
color: var(--v3-text-3);
}
/* ==================== REUSABLE COMPONENTS ==================== */
/* Card Base - Minimalistic glass-morphism card component
* Use this class as a base for any card-like containers across the site
* Provides consistent background, border, padding, and hover effects
*
* Usage Examples:
* Simple card content
* Card with more padding
* Non-clickable card
*
* Extends: .stat-card and .dashboard-card use these same base styles
*/
.card-base, .card-base-info {
background: var(--card-bg-subtle);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 1rem;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.card-base:hover, .card-base-info:hover {
border-color: var(--accent-primary);
background: var(--card-bg-hover);
transform: translateY(-2px);
}
/* Card Base Info - Non-interactive variant for informational displays
* Same visual styling as .card-base but without interactive cursor/hover
* Use for displaying information that doesn't have click actions
*
* Usage Examples:
* Stats display
* Read-only information
*/
.card-base-info {
cursor: default;
}
/* ==================== BEM CARD COMPONENT SYSTEM ==================== */
/*
* BEM Card Component - Unified card styling with modifiers
* Use alongside existing classes for gradual migration: class="stat-card card--stat"
*
* Block: .card (already defined above)
* Modifiers: .card--glass, .card--stat, .card--dashboard, .card--sidebar, .card--university
* Elements: .card__header, .card__title, .card__icon, .card__value, .card__label, .card__body, .card__footer
*/
/* Card Modifiers */
.card--glass {
background: rgba(var(--primary-bg-rgb), 0.6);
backdrop-filter: var(--glass-blur-standard);
-webkit-backdrop-filter: var(--glass-blur-standard);
}
.card--stat {
text-align: center;
min-width: 140px;
padding: 1.25rem;
}
.card--dashboard {
display: flex;
flex-direction: column;
min-height: 160px;
justify-content: center;
align-items: center;
text-align: center;
}
.card--sidebar {
border-radius: 6px;
padding: 28px;
margin-bottom: 20px;
}
.card--university {
background: var(--university-gradient);
border: none;
}
.card--clickable {
cursor: pointer;
}
.card--clickable:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-primary);
}
/* Card Elements */
.card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.card__title {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.card__icon {
width: 40px;
height: 40px;
background: var(--hover-bg-gradient);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
}
.card__value {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.card__label {
font-size: var(--font-size-base);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card__body {
flex: 1;
}
.card__footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
/* ==================== BEM BUTTON COMPONENT SYSTEM ==================== */
/*
* BEM Button Component - Glass-morphism buttons with accent edges
* Use alongside existing classes for gradual migration: class="btnDefault btn--primary"
*
* Block: .btn
* Modifiers: .btn--primary, .btn--secondary, .btn--outline, .btn--success, .btn--danger, .btn--sm, .btn--lg, .btn--block
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-size: var(--font-size-md);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
text-decoration: none;
position: relative;
overflow: hidden;
font-family: var(--font-body);
/* Default glass style */
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn:active {
transform: translateY(0);
background: rgba(255, 255, 255, 0.08);
}
/* Button Modifiers */
.btn--primary {
border-left: 3px solid var(--accent-primary);
border-right: 3px solid var(--accent-primary);
}
.btn--primary:hover {
border-left-color: var(--accent-primary);
border-right-color: var(--accent-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
.btn--secondary {
border-left: 3px solid var(--accent-secondary);
border-right: 3px solid var(--accent-secondary);
}
.btn--secondary:hover {
border-left-color: var(--accent-secondary);
border-right-color: var(--accent-secondary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 20px rgba(74, 222, 128, 0.1);
}
.btn--outline {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn--outline:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
.btn--success {
border-left: 3px solid var(--success-color);
border-right: 3px solid var(--success-color);
}
.btn--success:hover {
background: rgba(8, 186, 47, 0.1);
border-left-color: var(--success-color);
border-right-color: var(--success-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(8, 186, 47, 0.15);
}
.btn--danger {
border-left: 3px solid var(--danger-color);
border-right: 3px solid var(--danger-color);
}
.btn--danger:hover {
background: rgba(220, 53, 69, 0.1);
border-left-color: var(--danger-color);
border-right-color: var(--danger-color);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(220, 53, 69, 0.15);
}
.btn--university {
border-left: 3px solid var(--university-primary);
border-right: 3px solid var(--university-primary);
}
.btn--university:hover {
background: rgba(102, 126, 234, 0.1);
border-left-color: var(--university-primary);
border-right-color: var(--university-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(102, 126, 234, 0.15);
}
/* Button Size Modifiers */
.btn--sm {
padding: 8px 16px;
font-size: var(--font-size-base);
}
.btn--lg {
padding: 16px 32px;
font-size: var(--font-size-xl);
}
.btn--block {
width: 100%;
}
.btn--auto {
width: auto;
}
/* Legacy .button class alias - maps to BEM .btn system for backward compatibility */
.button {
display: inline-block;
padding: 12px 16px;
font-size: var(--font-size-md);
text-align: center;
text-decoration: none;
background: var(--card-bg-subtle);
backdrop-filter: var(--glass-blur-light);
-webkit-backdrop-filter: var(--glass-blur-light);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-primary);
border-right: 3px solid var(--accent-primary);
border-radius: 3px;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
font-weight: 600;
}
.button:hover {
background: var(--card-bg-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* ==================== BEM MODAL COMPONENT SYSTEM ==================== */
/*
* BEM Modal Component - Unified modal/overlay styling
* Use for consistent modal dialogs across the application
*
* Block: .modal
* Modifiers: .modal--active, .modal--fullscreen
* Elements: .modal__overlay, .modal__content, .modal__header, .modal__title, .modal__close, .modal__body, .modal__footer
*/
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: var(--glass-blur-light);
-webkit-backdrop-filter: var(--glass-blur-light);
}
.modal--active,
.modal.active {
opacity: 1;
visibility: visible;
}
.modal--fullscreen {
background: var(--primary-bg);
overflow-y: auto;
}
.modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal__content {
background: var(--sidebar-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideUp 0.3s ease;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.modal__title {
margin: 0;
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--text-primary);
}
.modal__close {
background: transparent;
border: none;
color: var(--text-primary);
font-size: var(--font-size-4xl);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
line-height: 1;
}
.modal__close:hover {
color: var(--accent-primary);
transform: scale(1.1);
}
.modal__body {
padding: 20px;
}
.modal__footer {
padding: 20px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 10px;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== BEM TOAST/NOTIFICATION COMPONENT ==================== */
/*
* BEM Toast Component - Unified notification styling
* Consolidated from TeacherSite.Master and AdminSite.Master
*/
.toast {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
border-radius: 12px;
background: var(--sidebar-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
font-weight: 500;
z-index: 10001;
animation: slideInRight 0.3s ease;
backdrop-filter: var(--glass-blur-standard);
-webkit-backdrop-filter: var(--glass-blur-standard);
box-shadow: var(--shadow-primary);
}
.toast--success {
border-color: var(--success-color);
background: rgba(8, 186, 47, 0.1);
}
.toast--error {
border-color: var(--danger-color);
background: rgba(244, 67, 54, 0.1);
}
.toast--warning {
border-color: var(--warning-color);
background: rgba(255, 152, 0, 0.1);
}
.toast--info {
border-color: var(--info-color);
background: rgba(33, 150, 243, 0.1);
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ==================== CONSOLIDATED ANIMATIONS ==================== */
/*
* All shared animations consolidated here
* Remove duplicates from individual CSS files
*/
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0%, 100% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50% {
transform: translateX(0%) translateY(0%) rotate(45deg);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ==================== UPDATES POPUP (Extracted from Dashboard.aspx) ==================== */
/*
* Updates popup component - used for showing platform updates
*/
.updates-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.3s ease;
}
.updates-popup.hidden {
display: none !important;
}
.updates-content {
background: var(--sidebar-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
animation: slideUp 0.3s ease;
}
.updates-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
background: rgba(74, 222, 128, 0.1);
border-radius: 4px 4px 0 0;
}
.updates-header h2 {
margin: 0;
color: var(--accent-primary);
font-size: var(--font-size-3xl);
}
.close-updates {
background: transparent;
border: none;
color: var(--text-primary);
font-size: var(--font-size-4xl);
cursor: pointer;
transition: all 0.3s ease;
}
.close-updates:hover {
color: var(--accent-primary);
transform: scale(1.1);
}
.updates-body {
padding: 20px;
}
.update-date {
color: var(--text-secondary);
margin-bottom: 15px;
font-size: var(--font-size-base);
}
#updateFeaturesList {
list-style: none;
padding: 0;
margin: 0;
}
#updateFeaturesList li {
padding: 10px;
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--accent-primary);
border-radius: 2px;
}
/* ==================== UTILITY CLASSES ==================== */
/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* Margin Utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-6 { margin: 4rem; }
.m-7 { margin: 5rem; }
.m-8 { margin: 6rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; }
.mt-7 { margin-top: 5rem; }
.mt-8 { margin-top: 6rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 4rem; }
.mb-7 { margin-bottom: 5rem; }
.mb-8 { margin-bottom: 6rem; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
/* Padding Utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.p-6 { padding: 4rem; }
.p-7 { padding: 5rem; }
.p-8 { padding: 6rem; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 3rem; }
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 3rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
/* Typography Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-base); }
.text-base { font-size: var(--font-size-lg); }
.text-md { font-size: var(--font-size-lg); }
.text-lg { font-size: var(--font-size-xl); }
.text-xl { font-size: var(--font-size-2xl); }
.text-2xl { font-size: var(--font-size-3xl); }
.text-3xl { font-size: var(--font-size-4xl); }
.font-light { font-weight: 400; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 700; }
/* Color Utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-primary); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
/* Display Utilities */
.hidden { display: none !important; }
.visible { display: block !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
/* Width/Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }
/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Border Radius Utilities */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 2px; }
.rounded { border-radius: 3px; }
.rounded-md { border-radius: 3px; }
.rounded-lg { border-radius: 3px; }
.rounded-xl { border-radius: 4px; }
.rounded-2xl { border-radius: 6px; }
.rounded-full { border-radius: 9999px; }
/* Animation Utilities */
.fade-in {
animation: fadeIn 0.6s ease-in-out;
}
.slide-up {
animation: fadeInUp 0.6s ease-in-out;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
/* ==================== MODERN SCROLLBAR STYLES ==================== */
/* Custom Scrollbar Styles - Uses Active Theme Colors */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 12px !important;
height: 12px !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
background: rgba(var(--theme-secondary-rgb, 30, 41, 59), 0.3) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
backdrop-filter: blur(5px) !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
background: rgba(var(--theme-accent-rgb, 74, 222, 128), 0.4) !important;
border-radius: 8px !important;
border: 1px solid var(--border-color) !important;
box-shadow:
0 2px 8px rgba(var(--theme-accent-rgb, 74, 222, 128), 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
background: rgba(var(--theme-accent-rgb, 74, 222, 128), 0.6) !important;
box-shadow:
0 4px 12px rgba(var(--theme-accent-rgb, 74, 222, 128), 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
background: var(--theme-accent) !important;
box-shadow:
0 2px 6px var(--border-color),
inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
background: var(--primary-bg) !important;
border: 1px solid var(--border-color) !important;
}
/* Firefox Scrollbar Support */
* {
scrollbar-width: thin;
scrollbar-color: rgba(var(--theme-accent-rgb, 74, 222, 128), 0.4) rgba(var(--theme-secondary-rgb, 30, 41, 59), 0.3);
}
/* Enhanced container scrollbar - Uses Active Theme */
#container::-webkit-scrollbar {
width: 16px !important;
height: 16px !important;
}
#container::-webkit-scrollbar-track {
background: rgba(var(--theme-secondary-rgb, 30, 41, 59), 0.3) !important;
border-radius: 3px !important;
border: 2px solid var(--border-color) !important;
backdrop-filter: blur(15px) !important;
}
#container::-webkit-scrollbar-thumb {
background: linear-gradient(135deg,
var(--accent-secondary) 0%,
var(--accent-primary) 50%,
var(--accent-secondary) 100%) !important;
border-radius: 3px !important;
border: 2px solid var(--border-color) !important;
box-shadow:
var(--shadow-primary),
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
#container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg,
var(--accent-primary) 0%,
var(--accent-secondary) 50%,
var(--accent-primary) 100%) !important;
border-color: var(--accent-primary) !important;
box-shadow:
var(--shadow-hover),
inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
transform: scale(1.1) !important;
}
#container::-webkit-scrollbar-thumb:active {
background: var(--accent-primary) !important;
border-color: var(--accent-secondary) !important;
box-shadow:
0 4px 10px var(--border-color),
inset 0 3px 6px rgba(0, 0, 0, 0.4) !important;
transform: scale(1.06) !important;
}
/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ==================== RESPONSIVE UTILITIES ==================== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Student portal 1280/1024/720 family - folded the old 768/480 container
padding steps into a single small-phone tier. */
@media (max-width: 720px) {
.container {
padding: 12px;
}
}
/* ==================== MARKETING GRADIENT STYLES ==================== */
/* Gradient backgrounds and accent colors */
:root {
/* Technical gradient colors */
--gradient-purple-start: #8B5CF6;
--gradient-purple-end: #6B21A8;
--gradient-cyan-start: #06B6D4;
--gradient-cyan-end: #0891B2;
--gradient-emerald-start: #10B981;
--gradient-emerald-end: #047857;
--gradient-indigo-start: #6366F1;
--gradient-indigo-end: #4F46E5;
/* Background gradients */
--bg-gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
--bg-gradient-mesh: radial-gradient(at 40% 20%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
radial-gradient(at 80% 100%, rgba(99, 102, 241, 0.15) 0px, transparent 50%);
/* Text gradients */
--text-gradient-purple-cyan: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);
--text-gradient-emerald-cyan: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
--text-gradient-indigo-purple: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
}
/* Marketing page body styles - cinematic dark background (matches the redesign
marketing site: edge-confined emerald/blue pools + a centre-darkening vignette,
a slowly drifting glow layer, and a faint film-grain overlay). */
.marketing-body {
background-color: #0c0f17;
background-image:
radial-gradient(ellipse 60% 50% at 15% 0%, rgba(80, 230, 195, 0.10), transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(99, 130, 255, 0.10), transparent 60%),
radial-gradient(ellipse 90% 70% at 50% 38%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
background-attachment: fixed;
position: relative;
overflow-x: hidden;
}
.marketing-body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 800px 500px at 18% 35%, rgba(80, 230, 195, 0.10), transparent 70%),
radial-gradient(ellipse 700px 600px at 88% 75%, rgba(99, 130, 255, 0.08), transparent 70%);
pointer-events: none;
z-index: 0;
animation: glowDrift 18s ease-in-out infinite alternate;
}
@keyframes glowDrift {
from { background-position: 0% 0%; filter: hue-rotate(0deg); }
to { background-position: 100% 100%; filter: hue-rotate(8deg); }
}
/* Faint film-grain overlay (replaces the old technical grid). */
.noise {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml;utf8,