/* ═══════════════════════════════════════════════════════════════════
NEXT TOPPER — UNIFIED DESIGN SYSTEM
Built for MudBlazor + Bootstrap | Educational Platform
═══════════════════════════════════════════════════════════════════ */
/* ── 1. DESIGN TOKENS (CSS Variables) ── */
:root {
/* ── Brand core — deep teal (intellect + trust) ── */
--nt-primary: #0D7377;
--nt-primary-dark: #095C60;
--nt-primary-light: #14A5AA;
--nt-primary-subtle: #E6F7F7;
/* ── Achievement — amber gold ── */
--nt-gold: #F59E0B;
--nt-gold-light: #FCD34D;
--nt-gold-dark: #D97706;
--nt-gold-subtle: #FFFBEB;
/* ── Knowledge depth — indigo ── */
--nt-indigo: #4F46E5;
--nt-indigo-light: #818CF8;
--nt-indigo-subtle: #EEF2FF;
/* Semantic */
--nt-success: #10B981;
--nt-success-subtle: #ECFDF5;
--nt-warning: #F59E0B;
--nt-warning-subtle: #FFFBEB;
--nt-error: #EF4444;
--nt-error-subtle: #FEF2F2;
--nt-info: #0D7377;
--nt-info-subtle: #E6F7F7;
/* Surfaces */
--nt-bg: #F4F7FB;
--nt-surface: #FFFFFF;
--nt-surface-2: #F1F5F9;
--nt-surface-3: #E2E8F0;
--nt-glass: rgba(255,255,255,0.75);
/* Text */
--nt-text-primary: #0F172A;
--nt-text-secondary: #475569;
--nt-text-muted: #94A3B8;
--nt-text-inverse: #FFFFFF;
/* Borders */
--nt-border: #E2E8F0;
--nt-border-light: #F1F5F9;
/* ── Glow tokens ── */
--nt-glow-sm: 0 0 12px rgba(13,115,119,0.25);
--nt-glow-md: 0 0 24px rgba(13,115,119,0.35);
--nt-glow-lg: 0 0 40px rgba(13,115,119,0.4);
--nt-glow-cta: 0 4px 24px rgba(13,115,119,0.45), 0 0 0 1px rgba(13,115,119,0.2);
--nt-glow-gold: 0 0 20px rgba(245,158,11,0.3);
/* Spacing scale (4px base) */
--nt-space-1: 4px;
--nt-space-2: 8px;
--nt-space-3: 12px;
--nt-space-4: 16px;
--nt-space-5: 20px;
--nt-space-6: 24px;
--nt-space-8: 32px;
--nt-space-10: 40px;
--nt-space-12: 48px;
--nt-space-16: 64px;
--nt-space-20: 80px;
--nt-space-24: 96px;
/* Border radius */
--nt-radius-sm: 6px;
--nt-radius-md: 10px;
--nt-radius-lg: 14px;
--nt-radius-xl: 20px;
--nt-radius-2xl: 28px;
--nt-radius-full: 9999px;
/* Shadows */
--nt-shadow-xs: 0 1px 2px rgba(13,115,119,0.06);
--nt-shadow-sm: 0 1px 3px rgba(13,115,119,0.08), 0 1px 2px rgba(13,115,119,0.04);
--nt-shadow-md: 0 4px 16px rgba(13,115,119,0.10), 0 2px 4px rgba(0,0,0,0.04);
--nt-shadow-lg: 0 10px 32px rgba(13,115,119,0.12), 0 4px 8px rgba(0,0,0,0.05);
--nt-shadow-xl: 0 20px 48px rgba(13,115,119,0.14), 0 8px 16px rgba(0,0,0,0.06);
/* Transitions */
--nt-transition-fast: 150ms cubic-bezier(0.0, 0, 0.2, 1);
--nt-transition-base: 250ms cubic-bezier(0.0, 0, 0.2, 1);
--nt-transition-slow: 400ms cubic-bezier(0.0, 0, 0.2, 1);
--nt-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
--nt-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
--nt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Duration tokens ── */
--nt-dur-instant: 80ms;
--nt-dur-fast: 150ms;
--nt-dur-base: 250ms;
--nt-dur-slow: 400ms;
--nt-dur-slower: 600ms;
--nt-dur-stagger: 60ms;
--nt-dur-page: 350ms;
/* Role gradients */
--nt-grad-admin: linear-gradient(135deg, #0D7377 0%, #095C60 100%);
--nt-grad-parent: linear-gradient(135deg, #0D7377 0%, #14A5AA 100%);
--nt-grad-child: linear-gradient(135deg, #059669 0%, #047857 100%);
--nt-grad-employee: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
--nt-grad-hero: linear-gradient(135deg, #0a1628 0%, #0d2233 40%, #0D7377 100%);
/* ── Hero ambient background tokens ── */
--nt-hero-bg: #080C10;
--nt-hero-mesh: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(13,115,119,0.18) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgba(79,70,229,0.10) 0%, transparent 60%),
linear-gradient(180deg, #080C10 0%, #0a1220 100%);
}
/* ── 2. BASE RESET & GLOBAL ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
background: var(--nt-bg);
color: var(--nt-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mud-layout {
overflow: hidden;
}
h1:focus { outline: none; }
/* Blazor validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--nt-success); }
.invalid { outline: 1px solid var(--nt-error); }
.validation-message { color: var(--nt-error); font-size: 0.75rem; }
.blazor-error-boundary {
background: var(--nt-error-subtle);
border: 1px solid var(--nt-error);
border-radius: var(--nt-radius-md);
padding: var(--nt-space-4);
color: var(--nt-error);
}
.blazor-error-boundary::after { content: "An error has occurred. Please refresh the page." }
/* ── 3. ANIMATION SYSTEM ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes floatBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse-ring {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
}
@keyframes spin-in {
from { transform: rotate(0deg); }
to { transform: rotate(var(--ring-deg, 180deg)); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Animation utility classes */
.nt-fade-in { animation: fadeInUp var(--nt-transition-slow) ease-out both; }
.nt-fade-in-fast { animation: fadeIn var(--nt-transition-base) ease-out both; }
.nt-slide-in { animation: slideInLeft var(--nt-transition-slow) ease-out both; }
.nt-float { animation: floatBounce 3s ease-in-out infinite; }
.nt-pulse { animation: pulse-ring 2s infinite; }
/* Stagger delays */
.nt-delay-1 { animation-delay: 0.08s; }
.nt-delay-2 { animation-delay: 0.16s; }
.nt-delay-3 { animation-delay: 0.24s; }
.nt-delay-4 { animation-delay: 0.32s; }
.nt-delay-5 { animation-delay: 0.40s; }
/* Legacy aliases (keep existing pages working) */
.animate-fade-in { 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; }
.animate-float { animation: floatBounce 3s ease-in-out infinite; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── 4. TYPOGRAPHY UTILITIES ── */
.nt-text-primary { color: var(--nt-text-primary) !important; }
.nt-text-secondary { color: var(--nt-text-secondary) !important; }
.nt-text-muted { color: var(--nt-text-muted) !important; }
.nt-text-inverse { color: var(--nt-text-inverse) !important; }
.nt-text-accent { color: var(--nt-accent) !important; }
.nt-text-primary-color { color: var(--nt-primary) !important; }
.gradient-text {
background: linear-gradient(135deg, var(--nt-primary), var(--nt-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-accent {
background: linear-gradient(135deg, var(--nt-accent-dark), var(--nt-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── 5. MUDBLAZOR GLOBAL OVERRIDES ── */
/* AppBar */
.mud-appbar { box-shadow: var(--nt-shadow-sm) !important; }
/* Buttons — rounded, no uppercase */
.mud-button-root {
text-transform: none !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
border-radius: 10px !important;
transition: transform var(--nt-transition-fast), box-shadow var(--nt-transition-fast) !important;
}
.mud-button-root:active { transform: scale(0.97) !important; }
.mud-button-filled-primary:hover { box-shadow: 0 4px 12px rgba(13,115,119,0.35) !important; }
.mud-button-filled-secondary:hover { box-shadow: 0 4px 12px rgba(245,158,11,0.35) !important; }
/* Default size — comfortable padding */
.mud-button-root.mud-button-size-medium {
padding: 10px 24px !important;
min-height: 42px !important;
font-size: 0.9375rem !important;
}
/* Size Small — not cramped */
.mud-button-root.mud-button-size-small {
padding: 8px 20px !important;
min-height: 36px !important;
font-size: 0.875rem !important;
border-radius: 8px !important;
}
.mud-button-root.mud-button-size-small .mud-button-label {
padding: 0 !important;
line-height: 1.4 !important;
}
/* Cards & Papers */
.mud-paper {
border-radius: var(--nt-radius-lg) !important;
transition: box-shadow var(--nt-transition-base) !important;
}
/* Inputs */
.mud-input-outlined .mud-input-outlined-border {
border-radius: var(--nt-radius-md) !important;
border-color: var(--nt-border) !important;
transition: border-color var(--nt-transition-fast) !important;
}
.mud-input-outlined:hover .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
}
/* Chips */
.mud-chip { border-radius: var(--nt-radius-full) !important; font-weight: 500 !important; }
/* Tables */
.mud-table-head .mud-table-cell {
font-weight: 600 !important;
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: var(--nt-text-secondary) !important;
background: var(--nt-surface-2) !important;
}
.mud-table-row:hover { background: var(--nt-primary-subtle) !important; }
/* Drawer */
.mud-drawer { border-right: 1px solid var(--nt-border) !important; }
.mud-drawer .mud-drawer-content { overflow-x: hidden !important; overflow-y: auto !important; }
.mud-nav-link { border-radius: var(--nt-radius-md) !important; margin: 2px !important; }
.mud-nav-link.active {
background: var(--nt-primary-subtle) !important;
color: var(--nt-primary) !important;
font-weight: 600 !important;
}
.mud-nav-link:hover:not(.active) { background: var(--nt-surface-2) !important; }
/* Dialog */
.mud-dialog { border-radius: var(--nt-radius-xl) !important; }
.mud-dialog-title { font-weight: 700 !important; }
/* Snackbar */
.mud-snackbar { border-radius: var(--nt-radius-md) !important; font-weight: 500 !important; }
/* Progress */
.mud-progress-linear { border-radius: var(--nt-radius-full) !important; }
.mud-progress-linear-bar { border-radius: var(--nt-radius-full) !important; }
/* Select */
.mud-select .mud-input-outlined .mud-input-outlined-border {
border-radius: var(--nt-radius-md) !important;
}
/* ── 6. PUBLIC LAYOUT — Navbar ── */
.glass-navbar {
background: rgba(7,11,16,0.85) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: none !important;
transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
/* After scrolling past hero — slightly more opaque */
.glass-navbar-scrolled {
background: rgba(7,11,16,0.96) !important;
backdrop-filter: blur(24px) saturate(200%) !important;
-webkit-backdrop-filter: blur(24px) saturate(200%) !important;
border-bottom: 1px solid rgba(20,165,170,0.18) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4) !important;
}
/* Nav text — white on dark navbar */
.glass-navbar .mud-button-root { color: rgba(255,255,255,0.75) !important; }
.glass-navbar .mud-button-root:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
.glass-navbar .mud-button-filled-primary {
background: linear-gradient(135deg,#0D7377,#14A5AA) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(13,115,119,0.4) !important;
}
.glass-navbar .mud-button-filled-primary:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 24px rgba(13,115,119,0.55) !important;
}
.glass-navbar .mud-button-outlined { border-color: rgba(255,255,255,0.25) !important; color: rgba(255,255,255,0.8) !important; }
.glass-navbar .mud-icon-button { color: rgba(255,255,255,0.8) !important; }
/* Logo stays visible on dark */
.glass-navbar .mud-image { filter: brightness(1.1); }
.public-desktop-nav {
display: none !important;
flex-direction: row;
align-items: center;
gap: 2px;
}
.public-mobile-toggle { display: flex !important; align-items: center; }
@media (min-width: 960px) {
.public-desktop-nav { display: flex !important; }
.public-mobile-toggle { display: none !important; }
}
/* ── 7. PUBLIC PAGES — Hero & Sections ── */
.hero-gradient {
background: var(--nt-grad-hero);
position: relative;
overflow: hidden;
}
.hero-gradient::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 25% 50%, rgba(255,255,255,0.07) 0%, transparent 60%),
radial-gradient(ellipse at 75% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
pointer-events: none;
}
.section-gradient { background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%); }
.section-dark-gradient { background: linear-gradient(135deg, #0F172A 0%, #1E293B 40%, #334155 100%); }
.about-hero {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0D9488 100%);
position: relative;
overflow: hidden;
}
.pricing-hero {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0D9488 100%);
position: relative;
overflow: hidden;
}
.modern-footer {
background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
position: relative;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(16,185,129,0.5), transparent);
}
/* ── 8. CARD SYSTEM ── */
.card-hover {
border-radius: var(--nt-radius-lg) !important;
border: 1px solid var(--nt-border) !important;
transition: transform var(--nt-transition-spring), box-shadow var(--nt-transition-base) !important;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: var(--nt-shadow-xl) !important;
}
.stat-card {
border-radius: var(--nt-radius-lg) !important;
border: 1px solid var(--nt-border) !important;
transition: transform var(--nt-transition-base), box-shadow var(--nt-transition-base) !important;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--nt-shadow-lg) !important;
}
.feature-showcase {
border-radius: var(--nt-radius-xl) !important;
border: 1px solid var(--nt-border) !important;
transition: transform var(--nt-transition-base), box-shadow var(--nt-transition-base) !important;
overflow: hidden;
}
.feature-showcase:hover {
transform: translateY(-4px);
box-shadow: var(--nt-shadow-lg) !important;
}
.pricing-card {
border-radius: var(--nt-radius-xl) !important;
border: 1px solid var(--nt-border) !important;
overflow: hidden;
transition: transform var(--nt-transition-spring), box-shadow var(--nt-transition-base) !important;
}
.pricing-card:hover {
transform: translateY(-6px);
box-shadow: var(--nt-shadow-xl) !important;
}
.testimonial-card {
border-radius: var(--nt-radius-xl) !important;
border: 1px solid var(--nt-border) !important;
position: relative;
transition: transform var(--nt-transition-base), box-shadow var(--nt-transition-base) !important;
}
.testimonial-card::before {
content: '\201C';
position: absolute;
top: 12px; left: 20px;
font-size: 3.5rem;
line-height: 1;
font-family: Georgia, serif;
opacity: 0.07;
color: var(--nt-primary);
}
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: var(--nt-shadow-lg) !important;
}
/* ── 9. ICON BUBBLES ── */
.icon-bubble {
width: 64px; height: 64px;
border-radius: var(--nt-radius-lg);
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--nt-space-4);
transition: transform var(--nt-transition-spring) !important;
}
.icon-bubble:hover { transform: scale(1.08) rotate(-4deg); }
.icon-bubble-primary { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); }
.icon-bubble-success { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
.icon-bubble-warning { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.icon-bubble-info { background: linear-gradient(135deg, #CCFBF1, #99F6E4); }
.icon-bubble-error { background: linear-gradient(135deg, #FEE2E2, #FECACA); }
/* ── 10. BUTTONS ── */
.btn-pulse { animation: pulse-ring 2s infinite; }
.trust-badge {
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-md);
padding: var(--nt-space-3) var(--nt-space-5);
transition: border-color var(--nt-transition-base) !important;
}
.trust-badge:hover { border-color: var(--nt-primary); }
.number-badge {
width: 34px; height: 34px;
border-radius: var(--nt-radius-sm);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.85rem;
color: white; flex-shrink: 0;
}
/* ── 11. DASHBOARD LAYOUT ── */
.dashboard-content {
background: var(--nt-bg);
min-height: 100vh;
padding: 0 var(--nt-space-6) var(--nt-space-6);
margin-top: 100px;
}
/* Ensure main content is never hidden behind the fixed AppBar */
.mud-main-content {
padding-top: var(--mud-appbar-height, 64px) !important;
}
/* ── 12. PAGE HEADERS ── */
.page-header {
padding: var(--nt-space-5) 0;
margin-bottom: var(--nt-space-5);
background: none !important;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid var(--nt-border);
}
.page-header-admin { background: none !important; }
.page-header-parent { background: none !important; }
.page-header-child { background: none !important; }
.page-header-employee { background: none !important; }
/* Hide the decorative icon in page headers */
.page-header .mud-icon-root[class*="mud-icon-size-large"] {
display: none !important;
}
/* Heading — dark, bold */
.page-header .mud-typography-h4 {
color: var(--nt-text-primary) !important;
font-weight: 700 !important;
font-size: 1.5rem !important;
}
/* Subtitle — muted, light weight */
.page-header .page-header-subtitle {
color: var(--nt-text-secondary) !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
opacity: 1;
margin-top: 2px;
}
/* Chips / badges in page header — keep them visible */
.page-header .mud-chip {
background: var(--nt-primary-subtle) !important;
color: var(--nt-primary) !important;
}
/* ── 13. DASHBOARD STAT CARDS ── */
.dash-stat {
border-radius: var(--nt-radius-lg) !important;
padding: var(--nt-space-5) var(--nt-space-6) !important;
position: relative; overflow: hidden;
transition: transform var(--nt-transition-base), box-shadow var(--nt-transition-base) !important;
border: 1px solid var(--nt-border) !important;
}
.dash-stat:hover {
transform: translateY(-3px);
box-shadow: var(--nt-shadow-lg) !important;
}
.dash-stat-icon {
width: 48px; height: 48px;
border-radius: var(--nt-radius-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Stat icon color variants */
.dash-stat-indigo { background: #F1F5F9; color: #0F172A; }
.dash-stat-teal { background: #CCFBF1; color: #14B8A6; }
.dash-stat-amber { background: #FEF3C7; color: #F59E0B; }
.dash-stat-rose { background: #FFE4E6; color: #F43F5E; }
.dash-stat-green { background: #D1FAE5; color: #10B981; }
.dash-stat-blue { background: #DBEAFE; color: #3B82F6; }
.dash-stat-purple { background: #F3E8FF; color: #8B5CF6; }
.dash-stat-orange { background: #FFEDD5; color: #F97316; }
/* ── 14. ROLE CARDS (admin panels) ── */
.role-card {
border: 1px solid var(--nt-border) !important;
border-radius: var(--nt-radius-lg) !important;
transition: box-shadow var(--nt-transition-base) !important;
}
.role-card:hover { box-shadow: var(--nt-shadow-md) !important; }
/* ── 15. AVATARS ── */
.user-avatar-lg {
width: 52px; height: 52px;
border-radius: var(--nt-radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 700;
color: white; flex-shrink: 0;
}
.user-avatar-sm {
width: 36px; height: 36px;
border-radius: var(--nt-radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: 700;
color: white; flex-shrink: 0;
}
.avatar-indigo { background: linear-gradient(135deg, #0F172A, #1E293B); }
.avatar-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.avatar-amber { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.avatar-rose { background: linear-gradient(135deg, #F43F5E, #FB7185); }
.avatar-green { background: linear-gradient(135deg, #10B981, #34D399); }
.avatar-purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
/* ── 16. SIDEBAR ── */
.nav-section-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--nt-text-muted);
padding: var(--nt-space-1) var(--nt-space-5) var(--nt-space-1);
text-transform: uppercase;
}
/* ── 17. APPBAR USER CHIP ── */
.appbar-user-chip {
background: rgba(255,255,255,0.15);
border-radius: var(--nt-radius-full);
padding: 4px 14px 4px 6px;
display: flex; align-items: center; gap: 8px;
transition: background var(--nt-transition-fast) !important;
}
.appbar-user-chip:hover { background: rgba(255,255,255,0.25); }
.appbar-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 0.75rem;
}
/* ── 18. STUDENT / GAMIFICATION ── */
.points-trophy {
width: 90px; height: 90px;
border-radius: 50%;
background: linear-gradient(135deg, var(--nt-accent), var(--nt-accent-dark));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(245,158,11,0.3);
animation: floatBounce 3s ease-in-out infinite;
}
.score-ring {
width: 88px; height: 88px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-direction: column;
border: 4px solid var(--nt-border);
position: relative;
}
.score-ring::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: var(--ring-color, var(--nt-primary));
border-right-color: var(--ring-color, var(--nt-primary));
animation: spin-in 0.8s ease-out both;
}
.exam-card-fun {
border-radius: var(--nt-radius-xl) !important;
overflow: hidden;
transition: transform var(--nt-transition-spring), box-shadow var(--nt-transition-base) !important;
border: 1px solid var(--nt-border) !important;
}
.exam-card-fun:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: var(--nt-shadow-xl) !important;
}
.exam-card-header {
padding: var(--nt-space-5) var(--nt-space-6) var(--nt-space-4);
color: white;
}
.exam-card-header-1 { background: linear-gradient(135deg, var(--nt-primary), var(--nt-primary-dark)); }
.exam-card-header-2 { background: linear-gradient(135deg, #059669, #10B981); }
.exam-card-header-3 { background: linear-gradient(135deg, var(--nt-accent-dark), var(--nt-accent)); }
.exam-card-header-4 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.exam-card-header-5 { background: linear-gradient(135deg, #DC2626, #EF4444); }
.exam-card-header-6 { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
/* ── 19. TICKET STATUS ── */
.ticket-open { border-left: 3px solid var(--nt-info) !important; }
.ticket-inprogress { border-left: 3px solid var(--nt-warning) !important; }
.ticket-resolved { border-left: 3px solid var(--nt-success) !important; }
.ticket-closed { border-left: 3px solid var(--nt-text-muted) !important; }
/* ── 20. EMPTY STATES ── */
.empty-state {
text-align: center;
padding: var(--nt-space-12) var(--nt-space-6);
border-radius: var(--nt-radius-xl);
}
.empty-state-icon {
font-size: 3.5rem !important;
color: var(--nt-border) !important;
margin-bottom: var(--nt-space-4);
}
/* ── 21. RESULT CELEBRATION ── */
.result-celebration {
border-radius: var(--nt-radius-2xl) !important;
background: linear-gradient(135deg, var(--nt-primary-subtle) 0%, var(--nt-surface) 50%, var(--nt-success-subtle) 100%);
text-align: center;
}
/* ── 22. AUTH PAGES ── */
.auth-page { min-height: 100vh; }
.auth-brand-panel {
background: var(--nt-grad-hero);
display: flex; align-items: center; justify-content: center;
padding: var(--nt-space-12) var(--nt-space-8);
position: relative; overflow: hidden;
min-height: 100vh;
}
.auth-brand-panel::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.07) 0%, transparent 60%);
pointer-events: none;
}
.auth-brand-content {
position: relative; z-index: 1;
max-width: 420px; width: 100%;
animation: fadeInUp 0.6s ease-out both;
}
.auth-brand-title {
font-size: 2rem; font-weight: 800;
color: white; margin: var(--nt-space-6) 0 var(--nt-space-3);
line-height: 1.2;
}
.auth-brand-subtitle {
color: rgba(255,255,255,0.8);
font-size: 1rem; line-height: 1.7;
margin-bottom: var(--nt-space-8);
}
.auth-brand-features { display: flex; flex-direction: column; gap: var(--nt-space-3); }
.auth-brand-feature {
display: flex; align-items: center; gap: var(--nt-space-3);
color: rgba(255,255,255,0.9); font-size: 0.9rem;
}
.auth-form-panel {
background: var(--nt-surface);
display: flex; align-items: center; justify-content: center;
padding: var(--nt-space-8);
min-height: 100vh;
}
.auth-form-wrapper {
width: 100%; max-width: 420px;
animation: fadeInUp 0.5s ease-out 0.1s both;
}
.auth-form-header { margin-bottom: var(--nt-space-8); }
.auth-mobile-logo { display: none; margin-bottom: var(--nt-space-6); }
.auth-form-title {
font-size: 1.625rem; font-weight: 800;
color: var(--nt-text-primary); margin: 0 0 var(--nt-space-1);
}
.auth-form-subtitle { color: var(--nt-text-secondary); font-size: 0.9rem; margin: 0; }
.auth-field { margin-bottom: var(--nt-space-4); }
.auth-error {
display: flex; align-items: center; gap: var(--nt-space-2);
background: var(--nt-error-subtle);
border: 1px solid rgba(239,68,68,0.2);
border-radius: var(--nt-radius-md);
padding: var(--nt-space-3) var(--nt-space-4);
color: var(--nt-error);
font-size: 0.875rem;
margin-bottom: var(--nt-space-4);
}
.auth-error-list { margin-bottom: var(--nt-space-4); display: flex; flex-direction: column; gap: var(--nt-space-2); }
.auth-submit-btn {
height: 48px !important;
font-size: 0.9375rem !important;
font-weight: 700 !important;
border-radius: var(--nt-radius-md) !important;
transition: transform var(--nt-transition-fast), box-shadow var(--nt-transition-fast) !important;
}
.auth-submit-btn:hover { box-shadow: 0 6px 16px rgba(13,115,119,0.35) !important; }
.auth-submit-btn:active { transform: scale(0.98) !important; }
.auth-divider {
display: flex; align-items: center;
margin: var(--nt-space-5) 0;
color: var(--nt-text-muted); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
content: ''; flex: 1; height: 1px;
background: var(--nt-border);
}
.auth-divider span { padding: 0 var(--nt-space-3); }
.auth-alt-btn {
height: 44px !important;
border-radius: var(--nt-radius-md) !important;
font-weight: 600 !important;
border-color: var(--nt-border) !important;
color: var(--nt-text-primary) !important;
transition: border-color var(--nt-transition-fast), background var(--nt-transition-fast) !important;
}
.auth-alt-btn:hover {
border-color: var(--nt-primary) !important;
background: var(--nt-primary-subtle) !important;
}
.auth-footer-text {
text-align: center;
color: var(--nt-text-secondary);
font-size: 0.875rem;
margin-top: var(--nt-space-5);
}
@media (max-width: 959.98px) {
.auth-brand-panel { display: none !important; }
.auth-form-panel { min-height: 100vh; padding: var(--nt-space-6) var(--nt-space-4); }
.auth-mobile-logo { display: block !important; }
}
/* ── 23. CERTIFICATE ── */
.certificate-container { display: flex; justify-content: center; padding: var(--nt-space-4); }
.certificate {
width: 900px; max-width: 100%;
background: #fffef9;
border: 3px solid var(--nt-primary);
padding: 10px; position: relative;
box-shadow: var(--nt-shadow-xl);
}
.certificate-inner {
border: 2px solid rgba(13,115,119,0.3);
padding: 48px 56px; text-align: center; position: relative;
}
.certificate-corner {
position: absolute; width: 56px; height: 56px;
border-color: var(--nt-primary); border-style: solid; border-width: 0; z-index: 1;
}
.certificate-corner-tl { top: 18px; left: 18px; border-top-width: 3px; border-left-width: 3px; }
.certificate-corner-tr { top: 18px; right: 18px; border-top-width: 3px; border-right-width: 3px; }
.certificate-corner-bl { bottom: 18px; left: 18px; border-bottom-width: 3px; border-left-width: 3px; }
.certificate-corner-br { bottom: 18px; right: 18px; border-bottom-width: 3px; border-right-width: 3px; }
.certificate-title {
font-family: Georgia, serif; font-size: 2rem; font-weight: 700;
color: var(--nt-primary); margin: 0; letter-spacing: 2px; text-transform: uppercase;
}
.certificate-subtitle {
font-family: Georgia, serif; font-size: 1.3rem;
color: var(--nt-primary-dark); margin: 4px 0 0; font-style: italic; letter-spacing: 3px;
}
.certificate-divider {
display: flex; align-items: center; margin: 18px 60px;
}
.certificate-divider::before, .certificate-divider::after {
content: ''; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--nt-primary), transparent);
}
.certificate-divider-star { color: var(--nt-primary); font-size: 1.1rem; margin: 0 14px; }
.certificate-presented { font-size: 0.95rem; color: #555; margin: 14px 0 6px; letter-spacing: 1px; }
.certificate-student-name {
font-family: Georgia, serif; font-size: 2.2rem; font-weight: 700;
color: var(--nt-primary-dark); margin: 6px 0;
border-bottom: 2px solid rgba(13,115,119,0.2);
display: inline-block; padding: 0 28px 6px;
}
.certificate-achievement { font-size: 0.95rem; color: #555; margin: 14px 0 6px; }
.certificate-set-title {
font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700;
color: var(--nt-primary); margin: 4px 0 10px;
}
.certificate-details { font-size: 0.9rem; color: #666; margin: 0 0 20px; }
.certificate-detail-sep { margin: 0 10px; color: #ccc; }
.certificate-score-section { display: flex; justify-content: center; gap: 28px; margin: 20px 0; }
.certificate-score-box {
display: flex; flex-direction: column; align-items: center;
background: var(--nt-primary-subtle);
border-radius: var(--nt-radius-md); padding: 14px 24px; min-width: 110px;
}
.certificate-score-label { font-size: 0.7rem; color: var(--nt-primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.certificate-score-value { font-size: 1.4rem; font-weight: 800; color: var(--nt-primary-dark); margin-top: 4px; }
.certificate-congrats {
margin: 24px 36px; padding: 18px;
background: var(--nt-success-subtle); border-radius: var(--nt-radius-md);
}
.certificate-congrats p { font-size: 1rem; font-weight: 600; color: #065F46; margin: 0; }
.certificate-congrats-sub { font-size: 0.85rem !important; font-weight: 400 !important; color: #047857 !important; margin-top: 6px !important; line-height: 1.5; }
.certificate-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 32px; padding: 0 16px; }
.certificate-date, .certificate-authority { text-align: center; font-size: 0.8rem; color: #333; min-width: 150px; }
.certificate-seal { text-align: center; }
.certificate-seal-circle {
width: 52px; height: 52px; border-radius: 50%;
border: 2px solid var(--nt-primary);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 4px; background: var(--nt-primary-subtle);
}
.certificate-footer-line { width: 100%; height: 1px; background: #999; margin-bottom: 5px; }
.certificate-footer-label { display: block; font-size: 0.65rem; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.certificate-id { font-size: 0.65rem; color: #aaa; margin-top: 18px; letter-spacing: 1px; }
/* ── 24. RESPONSIVE ── */
@media (max-width: 599.98px) {
.page-header { padding: var(--nt-space-4) 0 !important; }
.page-header .mud-typography-h4 { font-size: 1.2rem !important; }
.dashboard-content { padding-left: var(--nt-space-2) !important; padding-right: var(--nt-space-2) !important; }
.appbar-user-chip .mud-text-body2 { display: none !important; }
.appbar-user-chip { padding: 4px !important; border-radius: 50% !important; }
.hero-gradient .mud-text-h2 { font-size: 1.625rem !important; }
.mud-text-h3 { font-size: 1.375rem !important; }
.mud-text-h4 { font-size: 1.125rem !important; }
.icon-bubble { width: 52px; height: 52px; border-radius: var(--nt-radius-md); }
.score-ring { width: 68px; height: 68px; }
.points-trophy { width: 72px; height: 72px; }
.exam-card-header { padding: var(--nt-space-4) !important; }
.certificate-inner { padding: 20px 14px !important; }
.certificate-student-name { font-size: 1.4rem !important; }
.certificate-title { font-size: 1.5rem !important; }
.certificate-score-section { flex-direction: column !important; gap: 10px !important; align-items: center; }
.certificate-footer { flex-direction: column !important; gap: 20px !important; align-items: center !important; }
.mud-dialog { margin: 8px !important; }
.hero-stats-bar { margin-top: 0 !important; }
}
@media (max-width: 959.98px) {
.appbar-user-chip .mud-text-body2 { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ── 25. PRINT ── */
@media print {
.mud-appbar, .mud-drawer, .mud-overlay, .mud-snackbar-provider, nav { display: none !important; }
.mud-main-content { padding: 0 !important; margin: 0 !important; }
.certificate-container { padding: 0; }
.certificate { width: 100%; box-shadow: none; border-width: 2px; page-break-inside: avoid; }
body { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ── 26. HERO STATS BAR ── */
.hero-stats-bar { margin-top: -48px; position: relative; z-index: 2; padding-bottom: 0 !important; }
/* ── 27. QUESTION HTML CONTENT ── */
.question-html img { max-width: 100%; border-radius: var(--nt-radius-md); }
.question-html p { margin: 0 0 var(--nt-space-2); }
/* ── 28. LOADING SKELETON ── */
.nt-skeleton {
background: linear-gradient(90deg, var(--nt-surface-2) 25%, var(--nt-border) 50%, var(--nt-surface-2) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--nt-radius-md);
}
/* ── 29. BOOTSTRAP INTEGRATION ── */
/* Ensure Bootstrap containers don't conflict with MudBlazor */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
font-family: inherit;
}
/* Bootstrap grid inside MudBlazor pages */
.nt-bs-section { padding: var(--nt-space-12) 0; }
.nt-bs-section-sm { padding: var(--nt-space-8) 0; }
/* ── 30. UTILITY CLASSES ── */
.nt-rounded-sm { border-radius: var(--nt-radius-sm) !important; }
.nt-rounded-md { border-radius: var(--nt-radius-md) !important; }
.nt-rounded-lg { border-radius: var(--nt-radius-lg) !important; }
.nt-rounded-xl { border-radius: var(--nt-radius-xl) !important; }
.nt-rounded-full { border-radius: var(--nt-radius-full) !important; }
.nt-shadow-sm { box-shadow: var(--nt-shadow-sm) !important; }
.nt-shadow-md { box-shadow: var(--nt-shadow-md) !important; }
.nt-shadow-lg { box-shadow: var(--nt-shadow-lg) !important; }
.nt-border { border: 1px solid var(--nt-border) !important; }
.nt-bg-surface { background: var(--nt-surface) !important; }
.nt-bg-surface-2 { background: var(--nt-surface-2) !important; }
.nt-bg-primary-subtle { background: var(--nt-primary-subtle) !important; }
.nt-bg-accent-subtle { background: var(--nt-accent-subtle) !important; }
/* ═══════════════════════════════════════════════════════════════════
PREMIUM DARK FIELD SYSTEM
Usage: wrap MudTextField/MudSelect/MudAutocomplete with
...
═══════════════════════════════════════════════════════════════════ */
:root {
--pdf-bg: #1E2433;
--pdf-bg-hover: #252B3B;
--pdf-bg-focus: #1A2030;
--pdf-border: rgba(148,163,184,0.15);
--pdf-border-hover: rgba(148,163,184,0.28);
--pdf-border-focus: rgba(13,115,119,0.6);
--pdf-label: #94A3B8;
--pdf-value: #F1F5F9;
--pdf-placeholder: #64748B;
--pdf-radius: 12px;
--pdf-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(148,163,184,0.08);
--pdf-shadow-focus: 0 0 0 3px rgba(13,115,119,0.18), 0 1px 3px rgba(0,0,0,0.3);
--pdf-error: rgba(239,68,68,0.6);
--pdf-error-glow: 0 0 0 3px rgba(239,68,68,0.15);
}
/* ── Outer wrapper ── */
.premium-dark-field {
position: relative;
}
/* ── MudTextField / MudNumericField / MudAutocomplete ── */
.premium-dark-field .mud-input-control {
background: var(--pdf-bg) !important;
border-radius: var(--pdf-radius) !important;
box-shadow: var(--pdf-shadow) !important;
transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
.premium-dark-field .mud-input-control:hover {
background: var(--pdf-bg-hover) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px var(--pdf-border-hover) !important;
}
.premium-dark-field .mud-input-control:focus-within {
background: var(--pdf-bg-focus) !important;
box-shadow: var(--pdf-shadow-focus) !important;
}
/* ── Outlined border ── */
.premium-dark-field .mud-input-outlined .mud-input-outlined-border {
border-color: var(--pdf-border) !important;
border-radius: var(--pdf-radius) !important;
border-width: 1px !important;
transition: border-color 0.2s ease !important;
}
.premium-dark-field .mud-input-control:hover .mud-input-outlined-border {
border-color: var(--pdf-border-hover) !important;
}
.premium-dark-field .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--pdf-border-focus) !important;
border-width: 1.5px !important;
}
/* ── Label ── */
.premium-dark-field .mud-input-label {
color: var(--pdf-label) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
transition: color 0.2s ease !important;
}
.premium-dark-field .mud-input-control:focus-within .mud-input-label {
color: rgba(13,115,119,0.9) !important;
}
/* ── Input text ── */
.premium-dark-field .mud-input input,
.premium-dark-field .mud-input textarea {
color: var(--pdf-value) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
caret-color: var(--nt-primary-light) !important;
}
.premium-dark-field .mud-input input::placeholder,
.premium-dark-field .mud-input textarea::placeholder {
color: var(--pdf-placeholder) !important;
font-weight: 400 !important;
}
/* ── Adornment icons ── */
.premium-dark-field .mud-input-adornment .mud-icon-root {
color: var(--pdf-label) !important;
transition: color 0.2s ease !important;
}
.premium-dark-field .mud-input-control:focus-within .mud-input-adornment .mud-icon-root {
color: var(--nt-primary-light) !important;
}
/* ── MudSelect ── */
.premium-dark-field .mud-select .mud-input-control {
background: var(--pdf-bg) !important;
border-radius: var(--pdf-radius) !important;
box-shadow: var(--pdf-shadow) !important;
}
.premium-dark-field .mud-select .mud-input-outlined-border {
border-color: var(--pdf-border) !important;
border-radius: var(--pdf-radius) !important;
}
.premium-dark-field .mud-select .mud-input-control:hover .mud-input-outlined-border {
border-color: var(--pdf-border-hover) !important;
}
.premium-dark-field .mud-select .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--pdf-border-focus) !important;
}
.premium-dark-field .mud-select .mud-input-slot {
color: var(--pdf-value) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
}
.premium-dark-field .mud-select-input .mud-input-label {
color: var(--pdf-label) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
}
/* ── Select dropdown arrow ── */
.premium-dark-field .mud-select .mud-input-adornment-end .mud-icon-root {
color: var(--pdf-label) !important;
}
/* ── Validation / Error state ── */
.premium-dark-field .mud-input-control.mud-input-error .mud-input-outlined-border {
border-color: var(--pdf-error) !important;
box-shadow: var(--pdf-error-glow) !important;
}
.premium-dark-field .mud-input-control.mud-input-error .mud-input-label {
color: rgba(239,68,68,0.8) !important;
}
.premium-dark-field .mud-input-helper-text.mud-input-error {
color: rgba(239,68,68,0.85) !important;
font-size: 0.75rem !important;
margin-top: 4px !important;
}
/* ── Disabled state ── */
.premium-dark-field .mud-input-control.mud-disabled {
background: rgba(30,36,51,0.5) !important;
opacity: 0.55 !important;
cursor: not-allowed !important;
}
.premium-dark-field .mud-input-control.mud-disabled .mud-input-outlined-border {
border-color: rgba(148,163,184,0.08) !important;
}
/* ── Helper text ── */
.premium-dark-field .mud-input-helper-text {
color: var(--pdf-placeholder) !important;
font-size: 0.75rem !important;
margin-top: 4px !important;
}
/* ── Remove default Material underline/ripple ── */
.premium-dark-field .mud-input::before,
.premium-dark-field .mud-input::after {
display: none !important;
}
/* ── Autocomplete dropdown ── */
.premium-dark-field + .mud-popover .mud-list {
background: #1E2433 !important;
border: 1px solid var(--pdf-border-hover) !important;
border-radius: var(--pdf-radius) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.premium-dark-field + .mud-popover .mud-list-item {
color: var(--pdf-value) !important;
}
.premium-dark-field + .mud-popover .mud-list-item:hover {
background: rgba(13,115,119,0.12) !important;
}
.premium-dark-field + .mud-popover .mud-list-item.mud-selected {
background: rgba(13,115,119,0.2) !important;
color: var(--nt-primary-light) !important;
}
/* ── Auto-apply premium-dark-field to all admin panel forms ── */
/* Uncomment the block below to apply dark fields globally in admin pages */
/*
.page-header-admin ~ * .mud-input-control,
.page-header-employee ~ * .mud-input-control {
background: var(--pdf-bg) !important;
border-radius: var(--pdf-radius) !important;
}
*/
/* ═══════════════════════════════════════════════════════════════════
PREMIUM LIGHT FIELD — for auth pages and light backgrounds
Usage: ...
═══════════════════════════════════════════════════════════════════ */
.premium-light-field .mud-input-control {
border-radius: 12px !important;
transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.premium-light-field .mud-input-outlined .mud-input-outlined-border {
border-color: #E2E8F0 !important;
border-radius: 12px !important;
border-width: 1.5px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.premium-light-field .mud-input-control:hover .mud-input-outlined-border {
border-color: #CBD5E1 !important;
}
.premium-light-field .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.12) !important;
}
.premium-light-field .mud-input-label {
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: #64748B !important;
letter-spacing: 0.01em !important;
}
.premium-light-field .mud-input-control:focus-within .mud-input-label {
color: var(--nt-primary) !important;
}
.premium-light-field .mud-input input,
.premium-light-field .mud-input textarea {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: #1E293B !important;
}
.premium-light-field .mud-input input::placeholder {
color: #94A3B8 !important;
}
.premium-light-field .mud-input-adornment .mud-icon-root {
color: #94A3B8 !important;
transition: color 0.2s ease !important;
}
.premium-light-field .mud-input-control:focus-within .mud-input-adornment .mud-icon-root {
color: var(--nt-primary) !important;
}
/* Error state */
.premium-light-field .mud-input-control.mud-input-error .mud-input-outlined-border {
border-color: var(--nt-error) !important;
box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
}
/* Remove Material underline */
.premium-light-field .mud-input::before,
.premium-light-field .mud-input::after {
display: none !important;
}
/* ── Apply premium-light-field globally to auth pages ── */
.auth-field {
position: relative;
overflow: visible;
}
.auth-field .mud-input-control {
border-radius: 12px !important;
}
.auth-field .mud-input-outlined .mud-input-outlined-border {
border-color: #E2E8F0 !important;
border-radius: 12px !important;
border-width: 1.5px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.auth-field .mud-input-control:hover .mud-input-outlined-border {
border-color: #CBD5E1 !important;
}
.auth-field .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.12) !important;
}
.auth-field .mud-input-label {
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: #64748B !important;
}
.auth-field .mud-input-control:focus-within .mud-input-label {
color: var(--nt-primary) !important;
}
.auth-field .mud-input input {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: #1E293B !important;
}
.auth-field .mud-input-adornment .mud-icon-root {
color: #94A3B8 !important;
transition: color 0.2s ease !important;
}
.auth-field .mud-input-control:focus-within .mud-input-adornment .mud-icon-root {
color: var(--nt-primary) !important;
}
.auth-field .mud-input::before,
.auth-field .mud-input::after {
display: none !important;
}
/* ── Apply premium-dark-field to admin panel forms ── */
.role-card .mud-input-outlined .mud-input-outlined-border {
border-radius: 10px !important;
border-color: var(--nt-border) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.role-card .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.1) !important;
}
.role-card .mud-input-label {
font-size: 0.8125rem !important;
font-weight: 500 !important;
}
.role-card .mud-input::before,
.role-card .mud-input::after {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
FLOATING LABEL FIX — ensure MudBlazor's native float behavior works
Label: centered when empty, floats to top-inside when focused/filled
═══════════════════════════════════════════════════════════════════ */
/* Ensure label transition is not broken by our overrides */
.premium-dark-field .mud-input-label,
.auth-field .mud-input-label,
.premium-light-field .mud-input-label {
transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease !important;
transform-origin: top left !important;
}
/* When label is in the "shrunk" (floated up) state — value exists or focused */
.premium-dark-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
.auth-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
.premium-light-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
font-size: 0.72rem !important;
font-weight: 500 !important;
transform: translate(14px, -9px) scale(1) !important;
}
/* When label is in the "unshrunk" (placeholder) state — empty field */
.premium-dark-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink),
.auth-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink),
.premium-light-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink) {
font-size: 0.9375rem !important;
font-weight: 400 !important;
}
/* Dark field — label colors */
.premium-dark-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink) {
color: var(--pdf-placeholder) !important;
}
.premium-dark-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
color: var(--pdf-label) !important;
}
.premium-dark-field .mud-input-control:focus-within .mud-input-label-inputcontrol.mud-shrink {
color: var(--nt-primary-light) !important;
}
/* Light/auth field — label colors */
.auth-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink),
.premium-light-field .mud-input-label-inputcontrol.mud-input-label-animated:not(.mud-shrink) {
color: #94A3B8 !important;
}
.auth-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink,
.premium-light-field .mud-input-label-inputcontrol.mud-input-label-animated.mud-shrink {
color: #64748B !important;
}
.auth-field .mud-input-control:focus-within .mud-input-label-inputcontrol.mud-shrink,
.premium-light-field .mud-input-control:focus-within .mud-input-label-inputcontrol.mud-shrink {
color: var(--nt-primary) !important;
}
/* Ensure the outlined border notch (gap for label) works correctly */
.premium-dark-field .mud-input-outlined-border legend,
.auth-field .mud-input-outlined-border legend,
.premium-light-field .mud-input-outlined-border legend {
transition: width 0.2s ease !important;
}
/* ═══════════════════════════════════════════════════════════════════
AUTH FIELD — clean minimal style, MudBlazor default float behavior
═══════════════════════════════════════════════════════════════════ */
/* Border */
.auth-field .mud-input-outlined .mud-input-outlined-border {
border-color: #E2E8F0 !important;
border-radius: 12px !important;
border-width: 1.5px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.auth-field .mud-input-control:hover .mud-input-outlined-border {
border-color: #CBD5E1 !important;
}
.auth-field .mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.1) !important;
}
/* Label */
.auth-field .mud-input-label {
color: #94A3B8 !important;
font-size: 0.875rem !important;
}
.auth-field .mud-input-control:focus-within .mud-input-label {
color: var(--nt-primary) !important;
}
/* Input text */
.auth-field .mud-input input {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: #1E293B !important;
}
/* Adornment icons */
.auth-field .mud-input-adornment .mud-icon-root {
color: #94A3B8 !important;
}
.auth-field .mud-input-control:focus-within .mud-input-adornment .mud-icon-root {
color: var(--nt-primary) !important;
}
/* Remove Material underline */
.auth-field .mud-input::before,
.auth-field .mud-input::after {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
NT-FIELD — Custom stacked label + input component
Label above, input below. Clean, premium, no MudBlazor float.
═══════════════════════════════════════════════════════════════════ */
.nt-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
overflow: visible;
}
/* Label — above the input */
.nt-field-label {
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255,255,255,0.55);
letter-spacing: 0.01em;
user-select: none;
}
/* Input wrapper — the card */
.nt-field-input-wrap {
position: relative;
display: flex;
align-items: center;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.14);
border-radius: 12px;
transition: border-color 0.2s ease, outline-color 0.2s ease, background 0.2s ease;
overflow: hidden;
outline: 3px solid transparent;
outline-offset: 0px;
}
.nt-field-input-wrap:has(textarea) {
align-items: stretch;
}
.nt-field-input-wrap:hover {
border-color: rgba(20,165,170,0.45);
}
.nt-field-input-wrap:focus-within {
border-color: #14A5AA;
outline: 3px solid rgba(13,115,119,0.2);
outline-offset: 1px;
background: rgba(255,255,255,0.06);
}
/* Error state */
.nt-field-input-wrap.nt-field-error {
border-color: var(--nt-error);
}
.nt-field-input-wrap.nt-field-error:focus-within {
box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
/* The actual input */
.nt-field-input {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 12px 14px;
font-size: 0.9375rem;
font-weight: 500;
color: #fff;
caret-color: #14A5AA;
font-family: inherit;
width: 100%;
min-height: 46px;
}
.nt-field-input::placeholder {
color: rgba(255,255,255,0.3);
font-weight: 400;
}
/* Autofill dark override */
.nt-field-input:-webkit-autofill,
.nt-field-input:-webkit-autofill:hover,
.nt-field-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #0d1520 inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: #14A5AA !important;
}
.nt-field-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Textarea variant */
.nt-field-textarea {
resize: vertical;
min-height: unset;
line-height: 1.6;
align-self: stretch;
}
/* Padding adjustments for adornments */
.nt-field-input.nt-field-input-padded-start { padding-left: 8px; }
.nt-field-input.nt-field-input-padded-end { padding-right: 8px; }
/* Adornment icons */
.nt-field-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
color: var(--nt-text-muted);
background: transparent;
border: none;
cursor: pointer;
flex-shrink: 0;
transition: color 0.2s ease;
}
.nt-field-icon-end {
cursor: pointer;
}
.nt-field-input-wrap:focus-within .nt-field-icon {
color: var(--nt-primary);
}
/* Helper & error text */
.nt-field-helper-text {
font-size: 0.75rem;
color: var(--nt-text-muted);
margin-top: 2px;
}
.nt-field-error-text {
font-size: 0.75rem;
color: var(--nt-error);
margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL MUDBLAZOR FIELD STYLE — matches NtTextField appearance
Applied to ALL MudTextField, MudSelect, MudAutocomplete globally
═══════════════════════════════════════════════════════════════════ */
/* Outlined border — clean, rounded */
.mud-input-outlined .mud-input-outlined-border {
border-color: #E2E8F0 !important;
border-radius: 12px !important;
border-width: 1.5px !important;
transition: border-color 0.2s ease, outline 0.2s ease !important;
}
.mud-input-control:hover .mud-input-outlined-border {
border-color: #CBD5E1 !important;
}
.mud-input-control:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
outline: 3px solid rgba(13,115,119,0.12) !important;
outline-offset: 1px !important;
}
/* Input text */
.mud-input input,
.mud-input textarea {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: var(--nt-text-primary) !important;
}
/* Adornment icons */
.mud-input-adornment .mud-icon-root {
color: var(--nt-text-muted) !important;
transition: color 0.2s ease !important;
}
.mud-input-control:focus-within .mud-input-adornment .mud-icon-root {
color: var(--nt-primary) !important;
}
/* Remove Material underline */
.mud-input::before,
.mud-input::after {
display: none !important;
}
/* Error state */
.mud-input-control.mud-input-error .mud-input-outlined-border {
border-color: var(--nt-error) !important;
}
.mud-input-control.mud-input-error:focus-within .mud-input-outlined-border {
outline: 3px solid rgba(239,68,68,0.12) !important;
}
.mud-input-control.mud-input-error .mud-input-label-inputcontrol {
color: var(--nt-error) !important;
}
/* Select */
.mud-select .mud-input-outlined-border {
border-radius: 12px !important;
}
/* ── NtSelect inner: hide MudSelect's own label, match NtTextField box ── */
.nt-select-inner .mud-input-label { display: none !important; }
.nt-select-inner .mud-input-outlined-border legend { width: 0 !important; padding: 0 !important; }
.nt-select-inner .mud-input-outlined { background: rgba(255,255,255,0.05) !important; border-radius: 12px !important; }
.nt-select-inner .mud-input-control:focus-within .mud-input-outlined,
.nt-select-inner:focus-within .mud-input-outlined { background: rgba(255,255,255,0.07) !important; }
.nt-select-inner .mud-input-outlined-border {
border-color: rgba(255,255,255,0.14) !important;
border-radius: 12px !important;
border-width: 1.5px !important;
}
.nt-select-inner:hover .mud-input-outlined-border { border-color: rgba(20,165,170,0.45) !important; }
.nt-select-inner:focus-within .mud-input-outlined-border {
border-color: var(--nt-primary) !important;
outline: 3px solid rgba(13,115,119,0.12) !important;
outline-offset: 1px !important;
}
.nt-select-inner .mud-select-input {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: var(--nt-text-primary) !important;
padding: 0 14px !important;
height: 46px !important;
min-height: 46px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
}
.nt-select-inner .mud-input-control { margin-bottom: 0 !important; }
.nt-select-inner .mud-input { min-height: 46px !important; height: 46px !important; padding: 0 !important; }
.nt-select-inner .mud-input-slot { padding: 0 14px !important; min-height: 46px !important; }
/* Dropdown popover — rounded, clean shadow */
.mud-popover .mud-list {
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
border: 1.5px solid #E2E8F0 !important;
padding: 6px !important;
}
/* Dropdown items */
.mud-popover .mud-list-item {
border-radius: 8px !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: var(--nt-text-primary) !important;
margin: 2px 0 !important;
transition: background 0.15s ease !important;
}
.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item.mud-selected {
background: rgba(13,115,119,0.08) !important;
color: var(--nt-primary) !important;
}
/* Validation helper text */
.mud-input-helper-text {
font-size: 0.75rem !important;
margin-top: 4px !important;
}
a[type="button"] {
padding: 14px 20px !important;
}
/* ── Social Icon Buttons (footer) ── */
.social-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.social-icon-btn:hover {
background: rgba(255, 255, 255, 0.22);
color: white;
transform: translateY(-2px);
}
.mud-button-text {
padding: 14px 20px !important;
}
/* ═══════════════════════════════════════════════════════════════════
PHASE 1 REDESIGN — SCROLL REVEAL & PREMIUM MOTION UTILITIES
═══════════════════════════════════════════════════════════════════ */
/* ── Scroll-reveal base — defined in the v2 section below ── */
/* ── Prefers-reduced-motion override ── */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .reveal-scale,
.reveal-blur, .reveal-flip {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
}
/* ── Premium hero section ── */
.hero-premium {
background: var(--nt-hero-mesh);
background-color: var(--nt-hero-bg);
position: relative;
overflow: hidden;
padding: 100px 0 120px;
color: white;
}
/* Ambient mesh grid overlay */
.hero-premium::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.07) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* Ambient glow orb top-right */
.hero-premium::after {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(13,115,119,0.22) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: hero-pulse 8s ease-in-out infinite;
}
@keyframes hero-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.hero-premium > * { position: relative; z-index: 1; }
/* Display heading scale */
.hero-display {
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: white;
}
.hero-display .accent-word {
background: linear-gradient(135deg, #14A5AA, #F59E0B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Floating dashboard preview card ── */
.hero-preview-card {
background: rgba(15, 21, 32, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(13,115,119,0.35);
border-radius: var(--nt-radius-2xl);
padding: 28px;
box-shadow: var(--nt-glow-md), 0 24px 48px rgba(0,0,0,0.4);
animation: float-card 5s ease-in-out infinite;
}
@keyframes float-card {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ── Gradient CTA button ── */
.btn-gradient-primary {
background: linear-gradient(135deg, var(--nt-primary) 0%, var(--nt-primary-light) 100%) !important;
color: white !important;
border: none !important;
box-shadow: var(--nt-glow-cta) !important;
transition: transform var(--nt-dur-fast) var(--nt-ease-spring),
box-shadow var(--nt-dur-fast) var(--nt-ease-out) !important;
}
.btn-gradient-primary:hover {
transform: scale(1.03) !important;
box-shadow: var(--nt-glow-lg), 0 8px 32px rgba(13,115,119,0.5) !important;
}
/* ── Stat tile animated ── */
.stat-tile {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--nt-radius-xl);
padding: 24px;
text-align: center;
transition: transform var(--nt-dur-base) var(--nt-ease-out),
box-shadow var(--nt-dur-base) var(--nt-ease-out);
}
.stat-tile:hover {
transform: translateY(-4px);
box-shadow: var(--nt-glow-sm);
}
.stat-tile .stat-number {
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 800;
color: var(--nt-gold);
line-height: 1;
display: block;
}
.stat-tile .stat-label {
font-size: 0.8125rem;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
display: block;
}
/* ── Animated number counter target ── */
.count-up { display: inline; }
/* ── Social proof strip ── */
.trust-strip {
background: rgba(13,115,119,0.08);
border: 1px solid rgba(13,115,119,0.15);
border-radius: var(--nt-radius-full);
padding: 8px 20px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
color: rgba(255,255,255,0.8);
backdrop-filter: blur(8px);
}
.trust-strip .avatars { display: flex; }
.trust-strip .avatars span {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--nt-primary), var(--nt-primary-light));
border: 2px solid rgba(255,255,255,0.2);
margin-left: -8px;
display: inline-block;
font-size: 0.7rem;
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 600;
}
.trust-strip .avatars span:first-child { margin-left: 0; }
/* ── Section divider gradient ── */
.section-fade-top {
height: 80px;
margin-top: -80px;
position: relative;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, transparent 0%, #080C10 100%) !important;
}
/* ── Web3 Stats Bar ── */
.hero-stats-bar-web3 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.hero-stats-bar-web3 .stats-glass-card {
background: linear-gradient(135deg,
rgba(6, 14, 24, 0.96) 0%,
rgba(9, 20, 35, 0.94) 50%,
rgba(6, 14, 24, 0.96) 100%);
backdrop-filter: blur(32px) saturate(180%);
-webkit-backdrop-filter: blur(32px) saturate(180%);
border: 1px solid rgba(20, 165, 170, 0.25);
border-radius: 24px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 80px rgba(13,115,119,0.18),
0 32px 80px rgba(0,0,0,0.6),
0 0 120px rgba(79,70,229,0.08);
overflow: hidden;
position: relative;
}
/* Top shimmer line */
.hero-stats-bar-web3 .stats-glass-card::before {
content: '';
position: absolute;
top: 0; left: -100%; right: 0;
height: 1.5px;
background: linear-gradient(90deg,
transparent 0%,
rgba(13,115,119,0.0) 10%,
rgba(20,165,170,0.9) 40%,
rgba(252,211,77,0.6) 55%,
rgba(129,140,248,0.7) 75%,
transparent 100%);
animation: stats-shimmer 4s ease-in-out infinite;
}
@keyframes stats-shimmer {
0% { left: -100%; opacity: 0.6; }
50% { opacity: 1; }
100% { left: 100%; opacity: 0.6; }
}
/* Bottom glow line */
.hero-stats-bar-web3 .stats-glass-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(79,70,229,0.5) 50%,
transparent 100%);
}
/* ── Individual stat items ── */
.stats-stat-item {
text-align: center;
position: relative;
padding: 36px 24px;
transition: background 0.3s ease;
cursor: default;
}
.stats-stat-item:hover {
background: rgba(255,255,255,0.025);
}
/* Vertical divider */
.stats-stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 15%; bottom: 15%;
width: 1px;
background: linear-gradient(to bottom,
transparent,
rgba(20,165,170,0.2),
rgba(255,255,255,0.08),
rgba(20,165,170,0.2),
transparent);
}
/* Icon dot accent above number */
.stats-stat-item::before {
content: '';
display: block;
width: 6px; height: 6px;
border-radius: 50%;
margin: 0 auto 10px;
background: currentColor;
opacity: 0.5;
filter: blur(1px);
}
.stats-stat-number {
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.03em;
display: block;
position: relative;
}
/* Subtle glow backdrop behind the number */
.stats-stat-number::after {
content: attr(data-value);
position: absolute;
inset: 0;
filter: blur(12px);
opacity: 0.35;
pointer-events: none;
z-index: -1;
}
.stats-stat-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-top: 8px;
color: rgba(255,255,255,0.38);
display: block;
font-weight: 700;
}
/* Colour tokens with stronger glow */
.stats-stat-glow-teal {
color: #14A5AA;
text-shadow:
0 0 12px rgba(20,165,170,0.8),
0 0 30px rgba(20,165,170,0.4),
0 0 60px rgba(20,165,170,0.15);
}
.stats-stat-glow-green {
color: #34D399;
text-shadow:
0 0 12px rgba(52,211,153,0.8),
0 0 30px rgba(52,211,153,0.4),
0 0 60px rgba(52,211,153,0.15);
}
.stats-stat-glow-gold {
color: #FCD34D;
text-shadow:
0 0 12px rgba(252,211,77,0.9),
0 0 30px rgba(252,211,77,0.5),
0 0 60px rgba(252,211,77,0.2);
}
.stats-stat-glow-indigo {
color: #A78BFA;
text-shadow:
0 0 12px rgba(167,139,250,0.8),
0 0 30px rgba(167,139,250,0.4),
0 0 60px rgba(167,139,250,0.15);
}
/* Hover: brighten the glow */
.stats-stat-item:hover .stats-stat-glow-teal { text-shadow: 0 0 20px rgba(20,165,170,1), 0 0 50px rgba(20,165,170,0.6); }
.stats-stat-item:hover .stats-stat-glow-green { text-shadow: 0 0 20px rgba(52,211,153,1), 0 0 50px rgba(52,211,153,0.6); }
.stats-stat-item:hover .stats-stat-glow-gold { text-shadow: 0 0 20px rgba(252,211,77,1), 0 0 50px rgba(252,211,77,0.7); }
.stats-stat-item:hover .stats-stat-glow-indigo { text-shadow: 0 0 20px rgba(167,139,250,1), 0 0 50px rgba(167,139,250,0.6); }
/* Hover: label brightens */
.stats-stat-item:hover .stats-stat-label { color: rgba(255,255,255,0.65); }
/* ── Premium card hover system ── */
.card-premium {
background: var(--nt-surface);
border: 1px solid var(--nt-border);
border-radius: var(--nt-radius-lg);
transition: transform var(--nt-dur-base) var(--nt-ease-out),
box-shadow var(--nt-dur-base) var(--nt-ease-out),
border-color var(--nt-dur-base) var(--nt-ease-out);
}
.card-premium:hover {
transform: translateY(-4px);
box-shadow: var(--nt-shadow-lg);
border-color: rgba(13,115,119,0.2);
}
/* ── Glow border card ── */
.card-glow {
position: relative;
border-radius: var(--nt-radius-xl);
background: var(--nt-surface);
border: 1px solid var(--nt-border);
overflow: hidden;
transition: transform var(--nt-dur-base) var(--nt-ease-out),
box-shadow var(--nt-dur-base) var(--nt-ease-out);
}
.card-glow::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(13,115,119,0.4), transparent 50%, rgba(79,70,229,0.2));
opacity: 0;
transition: opacity var(--nt-dur-base) var(--nt-ease-out);
z-index: -1;
}
.card-glow:hover::before { opacity: 1; }
.card-glow:hover {
transform: translateY(-4px);
box-shadow: var(--nt-glow-sm), var(--nt-shadow-lg);
}
/* ── Skeleton shimmer ── */
.skeleton {
background: linear-gradient(90deg,
var(--nt-surface-2) 0%,
var(--nt-surface-3) 40%,
var(--nt-surface-2) 80%
);
background-size: 300% 100%;
animation: shimmer 1.5s linear infinite;
border-radius: var(--nt-radius-md);
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Navbar scroll transition ── */
.glass-navbar-scrolled {
background: rgba(255,255,255,0.96) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 24px rgba(13,115,119,0.08) !important;
}
/* ── Radial score display ── */
.score-ring-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.score-ring-label {
position: absolute;
text-align: center;
font-weight: 800;
color: var(--nt-primary);
}
/* ── Section heading pattern ── */
.section-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--nt-primary);
background: var(--nt-primary-subtle);
border: 1px solid rgba(13,115,119,0.2);
border-radius: var(--nt-radius-full);
padding: 4px 14px;
margin-bottom: 16px;
}
.section-headline {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--nt-text-primary);
}
.section-subline {
font-size: 1.0625rem;
color: var(--nt-text-secondary);
line-height: 1.8;
max-width: 560px;
}
/* ═══════════════════════════════════════════════════════════════════
NEXT TOPPER — WEB 3.0 HOME PAGE STYLES (v3)
═══════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────
CURSOR GLOW
────────────────────────────────────────────────────────────────── */
.nt-cursor-glow {
position: fixed;
top: 0; left: 0;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 9999;
transition: opacity 0.3s;
will-change: transform;
}
/* ──────────────────────────────────────────────────────────────────
SCROLL REVEAL — 6 variants
────────────────────────────────────────────────────────────────── */
/* Base reveal classes — animation handles visibility; no opacity here */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-flip {
will-change: opacity, transform;
}
/* JS-driven: when IntersectionObserver adds .is-visible, use CSS transition */
.reveal.is-visible { opacity:1; transform:none; filter:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-left.is-visible { opacity:1; transform:none; filter:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-right.is-visible { opacity:1; transform:none; filter:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-scale.is-visible { opacity:1; transform:none; filter:none; transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-blur.is-visible { opacity:1; transform:none; filter:none; transition:opacity .8s ease, filter .8s ease; }
.reveal-flip.is-visible { opacity:1; transform:none; filter:none; transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
/* Stagger delays — for JS-driven .is-visible transitions */
.is-visible.delay-1 { transition-delay: 0.08s !important; }
.is-visible.delay-2 { transition-delay: 0.16s !important; }
.is-visible.delay-3 { transition-delay: 0.24s !important; }
.is-visible.delay-4 { transition-delay: 0.32s !important; }
.is-visible.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay:0.48s !important; }
/* ──────────────────────────────────────────────────────────────────
HERO v3 — full-viewport dark canvas with particles
────────────────────────────────────────────────────────────────── */
.hero-v3 {
position: relative;
min-height: 100vh;
background: #070B10;
overflow: hidden;
display: flex;
align-items: center;
color: white;
padding: 120px 0 160px;
}
/* Particle canvas fills hero */
#nt-particles {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
}
/* Ambient mesh grid */
.hero-v3-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.05) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
z-index: 0;
}
/* Radial glow orbs */
.hero-v3-orb-1 {
position: absolute;
top: -15%; right: -8%;
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.2) 0%, transparent 65%);
pointer-events: none; z-index: 0;
animation: orb-breathe 9s ease-in-out infinite;
}
.hero-v3-orb-2 {
position: absolute;
bottom: -20%; left: -5%;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,70,229,0.14) 0%, transparent 60%);
pointer-events: none; z-index: 0;
animation: orb-breathe 12s ease-in-out infinite reverse;
}
.hero-v3-orb-3 {
position: absolute;
top: 40%; left: 50%;
transform: translate(-50%,-50%);
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(252,211,77,0.04) 0%, transparent 60%);
pointer-events: none; z-index: 0;
animation: orb-breathe 15s ease-in-out infinite;
}
@keyframes orb-breathe {
0%,100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
}
/* Content above canvas */
.hero-v3 > .mud-container { position: relative; z-index: 2; }
/* ── Hero badge pill ── */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(13,115,119,0.12);
border: 1px solid rgba(20,165,170,0.35);
border-radius: 999px;
padding: 6px 18px 6px 8px;
font-size: 0.82rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
margin-bottom: 28px;
}
.hero-badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #14A5AA;
box-shadow: 0 0 8px #14A5AA;
animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.7); }
}
/* ── Hero headline ── */
.hero-v3-headline {
font-size: clamp(2.6rem, 6vw, 5rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.04em;
color: #fff;
margin: 0 0 24px;
}
.hero-v3-headline .hl-teal {
background: linear-gradient(135deg, #14A5AA 0%, #34D399 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-v3-headline .hl-gold {
background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Typewriter cursor */
.tw-cursor {
display: inline-block;
width: 3px; height: 1em;
background: #14A5AA;
border-radius: 2px;
margin-left: 3px;
vertical-align: text-bottom;
animation: blink 0.9s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* ── Hero sub-text ── */
.hero-v3-sub {
font-size: 1.1rem;
color: rgba(255,255,255,0.65);
line-height: 1.85;
max-width: 520px;
margin-bottom: 36px;
}
/* ── CTA group ── */
.hero-cta-group {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-bottom: 40px;
}
.btn-w3-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #0D7377 0%, #14A5AA 100%);
color: #fff !important;
font-weight: 700;
font-size: 1rem;
padding: 14px 32px;
border-radius: 14px;
border: none;
text-decoration: none;
box-shadow: 0 4px 24px rgba(13,115,119,0.5), 0 0 0 1px rgba(20,165,170,0.3);
transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
cursor: pointer;
}
.btn-w3-primary:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 40px rgba(13,115,119,0.65), 0 0 0 2px rgba(20,165,170,0.4);
}
.btn-w3-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.8) !important;
font-weight: 600;
font-size: 1rem;
padding: 13px 28px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,0.15);
text-decoration: none;
backdrop-filter: blur(8px);
transition: background 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(.34,1.56,.64,1);
cursor: pointer;
}
.btn-w3-ghost:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(20,165,170,0.5);
transform: translateY(-2px);
}
/* ── Social proof strip ── */
.social-proof-row {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
padding: 8px 20px;
font-size: 0.875rem;
color: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
}
.sp-avatars {
display: flex;
}
.sp-avatars span {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #0D7377, #14A5AA);
border: 2px solid rgba(255,255,255,0.15);
margin-left: -8px;
display: flex; align-items: center; justify-content: center;
font-size: 0.68rem; font-weight: 700; color: #fff;
}
.sp-avatars span:first-child { margin-left: 0; }
.sp-stars { color: #FCD34D; letter-spacing: 2px; }
/* ── Hero dashboard mock card ── */
.hero-dash-card {
background: rgba(10, 16, 26, 0.75);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(20,165,170,0.3);
border-radius: 24px;
padding: 28px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 60px rgba(13,115,119,0.2),
0 40px 80px rgba(0,0,0,0.5);
animation: float-card 6s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.hero-dash-card::before {
content: '';
position: absolute;
top: 0; left: -60%; right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.9), rgba(252,211,77,0.5), transparent);
animation: card-shimmer 3.5s ease-in-out infinite;
}
@keyframes card-shimmer {
0% { left: -60%; opacity: 0.7; }
100% { left: 120%; opacity: 0.7; }
}
@keyframes float-card {
0%,100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-10px) rotate(0.5deg); }
66% { transform: translateY(-5px) rotate(-0.3deg); }
}
/* ──────────────────────────────────────────────────────────────────
STATS BAR — already upgraded, adding micro-animation for numbers
────────────────────────────────────────────────────────────────── */
.hero-stats-bar-web3 {
padding-top: 0 !important;
padding-bottom: 40px !important;
background: #080C10;
}
/* ──────────────────────────────────────────────────────────────────
SECTION WRAPPER HELPERS
────────────────────────────────────────────────────────────────── */
.nt-section-dark {
background: linear-gradient(180deg, #080C10 0%, #0a1018 100%);
position: relative;
overflow: hidden;
}
.nt-section-mid {
background: linear-gradient(180deg, #0c1520 0%, #0f1c2c 100%);
position: relative;
overflow: hidden;
}
.nt-section-light {
background: #F4F7FB;
position: relative;
}
.nt-section-white {
background: #fff;
position: relative;
}
/* Section ambient decorative circle */
.nt-section-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(80px);
opacity: 0.18;
z-index: 0;
}
/* ──────────────────────────────────────────────────────────────────
SECTION EYEBROW / HEADINGS
────────────────────────────────────────────────────────────────── */
.nt-eyebrow-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
border: 1px solid rgba(20,165,170,0.35);
color: #14A5AA;
background: rgba(13,115,119,0.1);
backdrop-filter: blur(8px);
margin-bottom: 20px;
}
.nt-eyebrow-tag.tag-gold {
color: #FCD34D;
border-color: rgba(252,211,77,0.35);
background: rgba(252,211,77,0.08);
}
.nt-eyebrow-tag.tag-purple {
color: #A78BFA;
border-color: rgba(167,139,250,0.35);
background: rgba(124,58,237,0.1);
}
.nt-eyebrow-tag.tag-red {
color: #FCA5A5;
border-color: rgba(239,68,68,0.35);
background: rgba(239,68,68,0.1);
}
.nt-eyebrow-tag.tag-green {
color: #34D399;
border-color: rgba(52,211,153,0.35);
background: rgba(16,185,129,0.1);
}
.nt-h2-dark {
font-size: clamp(1.9rem, 4vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.15;
color: #fff;
margin-bottom: 16px;
}
.nt-h2-light {
font-size: clamp(1.9rem, 4vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.15;
color: #0F172A;
margin-bottom: 16px;
}
.nt-sub-dark { font-size: 1.05rem; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 560px; }
.nt-sub-light { font-size: 1.05rem; color: #475569; line-height: 1.8; max-width: 560px; }
/* ──────────────────────────────────────────────────────────────────
FEATURE CARDS (Web3 glass dark)
────────────────────────────────────────────────────────────────── */
.w3-card {
position: relative;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
height: 100%;
padding: 32px;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.16,1,.3,1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.w3-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 21px;
background: linear-gradient(135deg, rgba(13,115,119,0.3), transparent 50%, rgba(79,70,229,0.15));
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 0;
}
.w3-card:hover::before { opacity: 1; }
.w3-card:hover {
transform: translateY(-6px);
border-color: rgba(20,165,170,0.3);
box-shadow: 0 0 40px rgba(13,115,119,0.15), 0 24px 48px rgba(0,0,0,0.4);
}
.w3-card > * { position: relative; z-index: 1; }
/* Card icon token */
.w3-card-icon {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
font-size: 1.5rem;
}
.w3-icon-teal { background: rgba(13,115,119,0.2); border: 1px solid rgba(20,165,170,0.3); color: #14A5AA; }
.w3-icon-gold { background: rgba(245,158,11,0.15); border: 1px solid rgba(252,211,77,0.3); color: #FCD34D; }
.w3-icon-purple { background: rgba(124,58,237,0.15); border: 1px solid rgba(167,139,250,0.3); color: #A78BFA; }
.w3-icon-red { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #FCA5A5; }
.w3-icon-green { background: rgba(16,185,129,0.12); border: 1px solid rgba(52,211,153,0.25); color: #34D399; }
.w3-card-title {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.w3-card-body {
font-size: 0.9rem;
color: rgba(255,255,255,0.55);
line-height: 1.75;
}
/* ──────────────────────────────────────────────────────────────────
LIGHT FEATURE CARDS (on white/light sections)
────────────────────────────────────────────────────────────────── */
.w3-card-light {
background: #fff;
border: 1.5px solid #E2E8F0;
border-radius: 20px;
padding: 32px;
transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
.w3-card-light:hover {
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(13,115,119,0.1), 0 4px 12px rgba(0,0,0,0.05);
border-color: rgba(13,115,119,0.25);
}
.w3-card-light-icon {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
font-size: 1.4rem;
}
.li-teal { background: #E6F7F7; color: #0D7377; }
.li-gold { background: #FFFBEB; color: #D97706; }
.li-purple { background: #EDE9FE; color: #6D28D9; }
.li-green { background: #ECFDF5; color: #059669; }
.li-red { background: #FEF2F2; color: #DC2626; }
/* ──────────────────────────────────────────────────────────────────
HOW IT WORKS — STEP CARDS
────────────────────────────────────────────────────────────────── */
.step-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 36px 28px;
text-align: center;
position: relative;
overflow: hidden;
height: 100%;
transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.3s;
}
.step-card:hover {
transform: translateY(-8px) scale(1.01);
border-color: rgba(20,165,170,0.35);
box-shadow: 0 0 50px rgba(13,115,119,0.2), 0 30px 60px rgba(0,0,0,0.35);
}
.step-num {
font-size: 4rem;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
position: absolute;
top: 12px; right: 20px;
pointer-events: none;
user-select: none;
}
.step-icon-ring {
width: 72px; height: 72px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
position: relative;
}
.step-icon-ring::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--ring-color, #14A5AA), transparent 70%);
animation: spin-ring 4s linear infinite;
}
@keyframes spin-ring {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.step-icon-ring::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: #0a1018;
z-index: 1;
}
.step-icon-ring .step-icon-inner {
position: relative; z-index: 2;
font-size: 1.6rem;
}
/* ──────────────────────────────────────────────────────────────────
WALLET SECTION (purple-dark)
────────────────────────────────────────────────────────────────── */
.wallet-section {
background: linear-gradient(160deg, #0e0620 0%, #160b30 50%, #0D0D2B 100%);
position: relative;
overflow: hidden;
padding: 100px 0;
}
.wallet-section::before {
content: '';
position: absolute;
top: -30%; right: -15%;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 65%);
pointer-events: none;
}
.wallet-card {
background: rgba(124,58,237,0.1);
border: 1px solid rgba(167,139,250,0.2);
border-radius: 20px;
padding: 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.wallet-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(124,58,237,0.2);
}
/* ──────────────────────────────────────────────────────────────────
WEAKNESS REPORT SECTION (dark red accent)
────────────────────────────────────────────────────────────────── */
.weakness-section {
background: linear-gradient(160deg, #0D0D2B 0%, #1a0a0a 100%);
position: relative;
padding: 100px 0;
overflow: hidden;
}
.weakness-section::before {
content: '';
position: absolute;
bottom: -20%; left: -10%;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 65%);
pointer-events: none;
}
/* Animated progress bar */
.progress-row {
margin-bottom: 14px;
}
.progress-track {
background: rgba(255,255,255,0.07);
border-radius: 999px;
height: 8px;
overflow: hidden;
margin-top: 5px;
}
.progress-fill {
height: 100%;
border-radius: 999px;
width: 0;
transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
/* ──────────────────────────────────────────────────────────────────
PRICING CARDS (Web3 style)
────────────────────────────────────────────────────────────────── */
.pricing-w3 {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 36px 28px;
height: 100%;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.3s, border-color 0.3s;
}
.pricing-w3:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.pricing-w3.featured {
border-color: rgba(245,158,11,0.5);
background: rgba(245,158,11,0.05);
box-shadow: 0 0 40px rgba(245,158,11,0.1);
}
.pricing-w3.featured:hover {
box-shadow: 0 0 60px rgba(245,158,11,0.2), 0 30px 80px rgba(0,0,0,0.4);
}
.pricing-badge {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #F59E0B, #D97706);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 18px;
border-radius: 0 0 12px 12px;
white-space: nowrap;
}
.pricing-amount {
font-size: 3rem;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: -0.03em;
}
.pricing-period {
font-size: 0.85rem;
color: rgba(255,255,255,0.4);
margin-top: 4px;
}
.pricing-divider {
height: 1px;
background: rgba(255,255,255,0.07);
margin: 24px 0;
}
.pricing-feature {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 0.9rem;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
.pricing-feature .check-icon { color: #34D399; flex-shrink: 0; margin-top: 1px; }
/* ──────────────────────────────────────────────────────────────────
TESTIMONIAL CARDS (dark glass)
────────────────────────────────────────────────────────────────── */
.testi-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 20px;
padding: 28px;
height: 100%;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.testi-card::before {
content: '"';
position: absolute;
top: 10px; left: 20px;
font-size: 5rem;
line-height: 1;
font-family: Georgia, serif;
color: rgba(20,165,170,0.1);
pointer-events: none;
}
.testi-card:hover {
transform: translateY(-4px);
border-color: rgba(20,165,170,0.2);
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.testi-stars { color: #FCD34D; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 14px; }
.testi-body { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.8; font-style: italic; margin-bottom: 20px; }
.testi-avatar {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.9rem;
color: #fff; flex-shrink: 0;
}
.testi-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.testi-role { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
/* ──────────────────────────────────────────────────────────────────
FAQ (dark accordion)
────────────────────────────────────────────────────────────────── */
.faq-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq-item:hover { border-color: rgba(20,165,170,0.25); }
/* ──────────────────────────────────────────────────────────────────
SHLOKA BANNER (Indian heritage)
────────────────────────────────────────────────────────────────── */
.shloka-section {
background: linear-gradient(135deg, #1A1A4E 0%, #3E1C00 100%);
padding: 80px 20px;
position: relative;
overflow: hidden;
text-align: center;
}
.shloka-om {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-size: 18rem;
opacity: 0.04;
user-select: none;
pointer-events: none;
font-family: 'Noto Sans Devanagari', serif;
line-height: 1;
}
/* ──────────────────────────────────────────────────────────────────
FINAL CTA SECTION
────────────────────────────────────────────────────────────────── */
.cta-section {
background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(13,115,119,0.18) 0%, transparent 70%),
linear-gradient(180deg, #080C10 0%, #0a1018 100%);
padding: 120px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.04) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
}
.cta-glow-ring {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 600px; height: 600px;
border-radius: 50%;
border: 1px solid rgba(13,115,119,0.12);
pointer-events: none;
animation: cta-ring-pulse 4s ease-in-out infinite;
}
.cta-glow-ring:nth-child(2) { width: 900px; height: 900px; animation-delay: 1s; opacity: 0.5; }
.cta-glow-ring:nth-child(3) { width: 1200px; height: 1200px; animation-delay: 2s; opacity: 0.3; }
@keyframes cta-ring-pulse {
0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); }
}
/* ──────────────────────────────────────────────────────────────────
B2B SECTION
────────────────────────────────────────────────────────────────── */
.b2b-stat-card {
background: rgba(255,183,77,0.06);
border: 1px solid rgba(255,183,77,0.2);
border-radius: 16px;
padding: 24px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.b2b-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.3);
border-color: rgba(255,183,77,0.4);
}
/* ──────────────────────────────────────────────────────────────────
SCORING CARDS
────────────────────────────────────────────────────────────────── */
.score-pill {
background: rgba(255,255,255,0.03);
border-radius: 20px;
padding: 36px 24px;
text-align: center;
transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
}
.score-pill.score-correct { border: 1.5px solid rgba(52,211,153,0.3); }
.score-pill.score-wrong { border: 1.5px solid rgba(239,68,68,0.3); }
.score-pill.score-skip { border: 1.5px solid rgba(148,163,184,0.2); }
.score-pill:hover { transform: translateY(-6px) scale(1.02); }
.score-pill.score-correct:hover { box-shadow: 0 20px 50px rgba(16,185,129,0.15); }
.score-pill.score-wrong:hover { box-shadow: 0 20px 50px rgba(239,68,68,0.15); }
.score-pill.score-skip:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.score-big {
font-size: 3.5rem;
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
margin: 12px 0 8px;
}
/* ──────────────────────────────────────────────────────────────────
RESPONSIVE TWEAKS
────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.hero-v3 { padding: 100px 0 80px; min-height: auto; }
.hero-v3-headline { font-size: clamp(2rem, 9vw, 3rem); }
.hero-cta-group { flex-direction: column; align-items: stretch; }
.btn-w3-primary, .btn-w3-ghost { text-align: center; justify-content: center; }
.nt-h2-dark, .nt-h2-light { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.wallet-section, .weakness-section { padding: 60px 0; }
.cta-section { padding: 80px 0; }
}
/* ── Extra tag variant ── */
.nt-eyebrow-tag.tag-teal {
color: #14A5AA;
border-color: rgba(20,165,170,0.35);
background: rgba(13,115,119,0.1);
}
/* ── Pulse animation for final CTA ── */
.btn-pulse {
animation: btn-pulse-ring 2.5s ease-in-out infinite;
}
@keyframes btn-pulse-ring {
0%,100% { box-shadow: 0 6px 24px rgba(255,109,0,0.55), 0 0 0 0 rgba(255,109,0,0.4); }
50% { box-shadow: 0 6px 24px rgba(255,109,0,0.55), 0 0 0 12px rgba(255,109,0,0); }
}
/* ── Fix nt-section-orb — blur + opacity so it doesn't produce white blocks ── */
.nt-section-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(100px);
opacity: 0.12;
z-index: 0;
will-change: transform;
}
/* ── Hero v3 — ensure MudContainer is above canvas ── */
.hero-v3 .mud-container { position: relative; z-index: 2; }
/* ── Ensure stats glass card override works when nested ── */
.hero-stats-bar-web3 .stats-glass-card.hero-stats-bar-web3 {
/* remove double-nesting issue — inner div inherits */
}
/* ── Fix MudExpansionPanel dark styling ── */
.faq-item .mud-expand-panel {
background: transparent !important;
}
.faq-item .mud-expand-panel-header {
background: transparent !important;
border-radius: 14px;
}
.faq-item .mud-expand-panel-text {
color: rgba(255,255,255,0.6) !important;
}
.faq-item .mud-expand-panel-header:hover {
background: rgba(255,255,255,0.03) !important;
}
/* ══════════════════════════════════════════════════════════════════
WEB3 THEME — FINAL POLISH PASS
══════════════════════════════════════════════════════════════════ */
/* ── Mobile drawer stays light since it overlays dark content ── */
.mud-drawer-content { background: #0d1520 !important; }
.mud-nav-link { color: rgba(255,255,255,0.75) !important; }
.mud-nav-link:hover:not(.active) { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
.mud-nav-link.active { background: rgba(13,115,119,0.2) !important; color: #14A5AA !important; }
.mud-drawer .mud-divider { border-color: rgba(255,255,255,0.08) !important; }
.mud-drawer .mud-typography { color: rgba(255,255,255,0.9) !important; }
/* ── MudMainContent — remove light bg override for dark pages ── */
body { background: #070B10 !important; }
/* ── All public pages: dark background, light text base ── */
.mud-main-content { background: transparent !important; }
/* ── MudExpansionPanel inside dark sections ── */
.mud-expand-panel {
background: transparent !important;
border-radius: 14px !important;
}
.mud-expand-panel-header {
background: transparent !important;
color: rgba(255,255,255,0.85) !important;
border-radius: 14px !important;
}
.mud-expand-panel-header:hover {
background: rgba(255,255,255,0.04) !important;
}
.mud-expand-panel-text { color: rgba(255,255,255,0.6) !important; }
.mud-expand-panel-icon { color: rgba(255,255,255,0.5) !important; }
/* ── MudSelect / NtSelect inside dark cards ── */
.mud-input-outlined .mud-input-outlined-border { border-color: rgba(255,255,255,0.12) !important; }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: rgba(20,165,170,0.5) !important; }
.mud-input-label { color: rgba(255,255,255,0.5) !important; }
.mud-input-text { color: rgba(255,255,255,0.85) !important; }
.mud-select-input .mud-input-text { color: rgba(255,255,255,0.85) !important; }
/* ── MudPagination inside dark ── */
.mud-pagination-item-page { color: rgba(255,255,255,0.7) !important; }
.mud-pagination-item-page.mud-pagination-item-page-selected {
background: #0D7377 !important; color: #fff !important;
}
/* ── Price badge on question set cards ── */
.price-badge {
background: linear-gradient(135deg,#0D7377,#14A5AA);
color: #fff;
font-weight: 900;
border-radius: 10px;
padding: 5px 12px;
font-size: 0.95rem;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(13,115,119,0.4);
}
/* ── Loading spinner dark ── */
.mud-progress-circular-svg { color: #14A5AA !important; }
.mud-typography-body2.mud-loading-text { color: rgba(255,255,255,0.45) !important; }
/* ── Section separator wave between sections ── */
.nt-wave-sep {
display: block;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.3), rgba(167,139,250,0.2), transparent);
margin: 0;
}
/* ── NtTextField inside dark cards ── */
.mud-input-slot .mud-icon-root { color: rgba(255,255,255,0.4) !important; }
/* ── FAQ item MudExpansionPanel overrides ── */
.faq-item .mud-expand-panel { border: none !important; }
/* ── Contact form card — ensure white inputs remain legible on dark card ── */
.contact-form-card .mud-input-outlined-border { border-color: rgba(255,255,255,0.15) !important; }
/* ── Smooth page transition — applies to ALL pages including dashboard ── */
.mud-main-content > div,
.dashboard-content {
animation: page-enter 0.45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes page-enter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
/* ── Social icon btn in footer ── */
.social-icon-btn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.social-icon-btn:hover {
background: rgba(20,165,170,0.2);
border-color: rgba(20,165,170,0.4);
color: #14A5AA;
}
/* ── Footer modernize ── */
.modern-footer {
background: linear-gradient(160deg, #060e18 0%, #0a1220 100%) !important;
border-top: 1px solid rgba(20,165,170,0.12);
}
.modern-footer::before {
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.4), rgba(167,139,250,0.2), transparent) !important;
}
/* ── Responsive: w3-card on mobile gets less padding ── */
@media (max-width: 599px) {
.w3-card { padding: 20px !important; }
.w3-card-light { padding: 20px !important; }
.step-card { padding: 24px 16px !important; }
.testi-card { padding: 20px !important; }
}
/* ── about-hero alias → hero-v3 style ── */
.about-hero, .pricing-hero {
background: #070B10 !important;
color: white;
position: relative;
overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════════
AUTH PAGES — WEB3 DARK REDESIGN
══════════════════════════════════════════════════════════════════ */
/* ── Full-page wrapper ── */
.auth-w3-page {
min-height: 100vh;
display: flex;
background: #070B10;
}
/* ── Left branding panel ── */
.auth-w3-left {
width: 42%;
min-height: 100vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 48px;
flex-shrink: 0;
}
.auth-w3-left-bg {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #0a1220 0%, #0d1a2e 50%, #080C10 100%);
}
.auth-w3-left-bg::before {
content: '';
position: absolute;
top: -20%; right: -20%;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.25) 0%, transparent 65%);
animation: orb-breathe 8s ease-in-out infinite;
}
.auth-w3-left-bg::after {
content: '';
position: absolute;
bottom: -15%; left: -10%;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 60%);
animation: orb-breathe 12s ease-in-out infinite reverse;
}
/* Grid overlay */
.auth-w3-left-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.05) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
.auth-w3-left-content {
position: relative;
z-index: 2;
max-width: 380px;
width: 100%;
animation: fadeInUp 0.6s ease-out both;
}
.auth-w3-logo { width: 200px; object-fit: contain; margin-bottom: 36px; }
.auth-w3-title {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 900;
color: #fff;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.auth-w3-title .hl { background: linear-gradient(135deg, #14A5AA, #34D399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.auth-w3-subtitle {
font-size: 0.95rem;
color: rgba(255,255,255,0.55);
line-height: 1.8;
margin-bottom: 36px;
}
.auth-w3-features { display: flex; flex-direction: column; gap: 14px; }
.auth-w3-feature {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.88rem;
color: rgba(255,255,255,0.75);
}
.auth-w3-feature-icon {
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(13,115,119,0.2);
border: 1px solid rgba(20,165,170,0.25);
display: flex; align-items: center; justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
/* ── Right form panel ── */
.auth-w3-right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 48px;
background: #070B10;
position: relative;
overflow: hidden;
}
.auth-w3-right::before {
content: '';
position: absolute;
bottom: -10%; right: -10%;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 60%);
pointer-events: none;
}
.auth-w3-form-box {
width: 100%;
max-width: 500px;
animation: fadeInUp 0.5s ease-out 0.1s both;
}
/* ── Form header ── */
.auth-w3-icon-wrap {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.auth-w3-form-title {
font-size: 1.75rem;
font-weight: 900;
color: #fff;
letter-spacing: -0.03em;
margin-bottom: 6px;
}
.auth-w3-form-subtitle {
font-size: 0.9rem;
color: rgba(255,255,255,0.45);
margin-bottom: 32px;
line-height: 1.6;
}
/* ── Field wrapper ── */
.auth-w3-field { margin-bottom: 16px; }
/* ── Error box ── */
.auth-w3-error {
display: flex;
align-items: flex-start;
gap: 10px;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.25);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 16px;
color: #FCA5A5;
font-size: 0.875rem;
line-height: 1.5;
}
/* ── Submit button ── */
.auth-w3-submit {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #0D7377, #14A5AA) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
border-radius: 14px !important;
border: none !important;
box-shadow: 0 4px 20px rgba(13,115,119,0.45) !important;
transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.auth-w3-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 32px rgba(13,115,119,0.6) !important;
}
.auth-w3-submit:disabled {
opacity: 0.6 !important;
transform: none !important;
}
/* Variant — green for student */
.auth-w3-submit-green {
background: linear-gradient(135deg, #059669, #10B981) !important;
box-shadow: 0 4px 20px rgba(5,150,105,0.45) !important;
}
.auth-w3-submit-green:hover {
box-shadow: 0 8px 32px rgba(5,150,105,0.6) !important;
}
/* ── Divider ── */
.auth-w3-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: rgba(255,255,255,0.2);
font-size: 0.8rem;
letter-spacing: 0.06em;
}
.auth-w3-divider::before,
.auth-w3-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,0.07);
}
/* ── Alt button (outlined) ── */
.auth-w3-alt {
width: 100%;
height: 46px;
background: rgba(255,255,255,0.04) !important;
border: 1.5px solid rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.7) !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
border-radius: 12px !important;
text-transform: none !important;
transition: background 0.2s, border-color 0.2s !important;
}
.auth-w3-alt:hover {
background: rgba(255,255,255,0.07) !important;
border-color: rgba(20,165,170,0.4) !important;
color: #fff !important;
}
/* ── Footer text ── */
.auth-w3-footer {
text-align: center;
margin-top: 20px;
font-size: 0.875rem;
color: rgba(255,255,255,0.4);
}
.auth-w3-footer a { color: #14A5AA; font-weight: 700; text-decoration: none; }
.auth-w3-footer a:hover { color: #34D399; }
/* ── Remember me / checkbox ── */
.auth-w3-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.auth-w3-link {
font-size: 0.85rem;
color: #14A5AA !important;
font-weight: 600;
text-decoration: none;
}
.auth-w3-link:hover { color: #34D399 !important; }
/* MudCheckbox dark override */
.mud-checkbox .mud-checkbox-input + .mud-checkbox-label { color: rgba(255,255,255,0.65) !important; }
.mud-checkbox .mud-icon-root { color: rgba(255,255,255,0.3) !important; }
.mud-checkbox.mud-checked .mud-icon-root { color: #14A5AA !important; }
/* ── Centered auth (for simple pages: CheckEmail, ConfirmEmail, etc.) ── */
.auth-w3-center-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #070B10;
padding: 40px 20px;
position: relative;
overflow: hidden;
}
.auth-w3-center-page::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.04) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
}
.auth-w3-center-page::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.12) 0%, transparent 65%);
pointer-events: none;
}
.auth-w3-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 480px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 48px 40px;
backdrop-filter: blur(20px);
animation: fadeInUp 0.5s ease-out both;
}
/* Success / error state cards inside auth */
.auth-w3-success-icon {
width: 72px; height: 72px;
border-radius: 20px;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(52,211,153,0.25);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
font-size: 2.2rem;
}
.auth-w3-error-icon {
width: 72px; height: 72px;
border-radius: 20px;
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.25);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
font-size: 2.2rem;
}
.auth-w3-pending-icon {
width: 72px; height: 72px;
border-radius: 20px;
background: rgba(13,115,119,0.15);
border: 1px solid rgba(20,165,170,0.3);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px;
font-size: 2.2rem;
}
/* ── Password strength hints ── */
.pwd-hint {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: rgba(255,255,255,0.45);
margin-bottom: 6px;
}
.pwd-hint .check { color: #34D399; }
/* ── Mobile: stack panels ── */
@media (max-width: 899px) {
.auth-w3-left { display: none; }
.auth-w3-right { padding: 40px 24px; }
.auth-w3-card { padding: 32px 24px; }
.auth-w3-form-title { font-size: 1.5rem; }
}
/* ══════════════════════════════════════════════════════════════════
AUTH PAGES — FULL VISUAL OVERHAUL v2
High-contrast, attractive, clearly readable Web3 auth
══════════════════════════════════════════════════════════════════ */
/* ── Override MudBlazor layout padding for auth pages ── */
.mud-main-content:has(.auth-w3-page),
.mud-main-content:has(.auth-w3-center-page) {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Fallback for browsers without :has() */
.auth-w3-page,
.auth-w3-center-page {
margin-top: 64px; /* undo the MudAppBar offset */
}
/* ─────────────────────────────────────────────────────
FULL PAGE WRAPPER
───────────────────────────────────────────────────── */
.auth-w3-page {
min-height: 100vh !important;
display: flex !important;
background: #070B10 !important;
position: relative;
overflow: hidden;
}
/* ─────────────────────────────────────────────────────
LEFT BRANDING PANEL
───────────────────────────────────────────────────── */
.auth-w3-left {
width: 45% !important;
min-height: 100vh !important;
position: relative;
overflow: hidden;
display: flex !important;
align-items: center;
justify-content: center;
padding: 80px 52px !important;
flex-shrink: 0;
}
/* Deep dark with teal gradient */
.auth-w3-left-bg {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(145deg, #060f1c 0%, #091828 40%, #0a1e30 100%) !important;
}
/* Large glowing orb top-right */
.auth-w3-left-bg::before {
content: '' !important;
position: absolute !important;
top: -120px; right: -120px;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.45) 0%, rgba(13,115,119,0.1) 50%, transparent 70%);
animation: orb-breathe 7s ease-in-out infinite;
}
/* Indigo orb bottom-left */
.auth-w3-left-bg::after {
content: '' !important;
position: absolute !important;
bottom: -80px; left: -80px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,70,229,0.35) 0%, rgba(79,70,229,0.08) 50%, transparent 70%);
animation: orb-breathe 10s ease-in-out infinite reverse;
}
/* Subtle grid mesh */
.auth-w3-left-grid {
position: absolute !important;
inset: 0 !important;
background-image:
linear-gradient(rgba(20,165,170,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(20,165,170,0.07) 1px, transparent 1px) !important;
background-size: 44px 44px !important;
pointer-events: none;
}
/* Bright top shimmer line */
.auth-w3-left::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.8), rgba(252,211,77,0.4), transparent);
animation: stats-shimmer 4s ease-in-out infinite;
}
/* Content */
.auth-w3-left-content {
position: relative !important;
z-index: 2 !important;
max-width: 400px;
width: 100%;
animation: fadeInUp 0.7s ease-out both;
}
.auth-w3-logo {
width: 180px !important;
object-fit: contain !important;
margin-bottom: 40px !important;
filter: drop-shadow(0 0 16px rgba(20,165,170,0.4));
}
/* Big gradient headline */
.auth-w3-title {
font-size: clamp(2rem, 3vw, 2.8rem) !important;
font-weight: 900 !important;
color: #fff !important;
line-height: 1.15 !important;
letter-spacing: -0.04em !important;
margin-bottom: 16px !important;
}
.auth-w3-title .hl {
background: linear-gradient(135deg, #14A5AA 0%, #34D399 60%, #FCD34D 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.auth-w3-subtitle {
font-size: 0.97rem !important;
color: rgba(255,255,255,0.6) !important;
line-height: 1.8 !important;
margin-bottom: 40px !important;
}
/* Feature items */
.auth-w3-features {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.auth-w3-feature {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 12px 16px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(20,165,170,0.15) !important;
border-radius: 12px !important;
font-size: 0.9rem !important;
color: rgba(255,255,255,0.8) !important;
backdrop-filter: blur(4px);
transition: background 0.2s, border-color 0.2s;
}
.auth-w3-feature:hover {
background: rgba(20,165,170,0.08) !important;
border-color: rgba(20,165,170,0.3) !important;
}
.auth-w3-feature-icon {
width: 38px !important; height: 38px !important;
border-radius: 10px !important;
background: rgba(13,115,119,0.25) !important;
border: 1px solid rgba(20,165,170,0.3) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 1.1rem !important;
flex-shrink: 0 !important;
box-shadow: 0 0 12px rgba(13,115,119,0.2);
}
/* ─────────────────────────────────────────────────────
RIGHT FORM PANEL
───────────────────────────────────────────────────── */
.auth-w3-right {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 80px 60px !important;
background: #070B10 !important;
position: relative;
}
/* Subtle right side ambient glow */
.auth-w3-right::before {
content: '';
position: absolute;
top: 20%; right: -100px;
width: 350px; height: 350px;
border-radius: 50%;
background: radial-gradient(circle, rgba(79,70,229,0.1) 0%, transparent 65%);
pointer-events: none;
}
.auth-w3-right::after {
content: '';
position: absolute;
bottom: 15%; left: -60px;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.08) 0%, transparent 65%);
pointer-events: none;
}
/* The form container */
.auth-w3-form-box {
width: 100% !important;
max-width: 500px !important;
position: relative;
z-index: 2;
animation: fadeInUp 0.5s ease-out 0.1s both;
}
/* Glass card wrapping the form box */
.auth-w3-form-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 24px;
padding: 40px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.03) inset,
0 0 60px rgba(13,115,119,0.08),
0 32px 64px rgba(0,0,0,0.4);
backdrop-filter: blur(20px) saturate(120%);
-webkit-backdrop-filter: blur(20px) saturate(120%);
position: relative;
overflow: hidden;
}
/* Top shimmer line on form card */
.auth-w3-form-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.7), rgba(252,211,77,0.3), transparent);
}
/* Icon */
.auth-w3-icon-wrap {
width: 56px !important; height: 56px !important;
border-radius: 16px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
margin-bottom: 24px !important;
box-shadow: 0 0 20px rgba(13,115,119,0.2);
}
.auth-w3-form-title {
font-size: 1.9rem !important;
font-weight: 900 !important;
color: #fff !important;
letter-spacing: -0.04em !important;
margin-bottom: 8px !important;
line-height: 1.15;
}
.auth-w3-form-subtitle {
font-size: 0.92rem !important;
color: rgba(255,255,255,0.5) !important;
margin-bottom: 32px !important;
line-height: 1.6 !important;
}
/* ─────────────────────────────────────────────────────
FORM FIELDS — visible on dark background
───────────────────────────────────────────────────── */
.auth-w3-field { margin-bottom: 18px !important; }
/* NtTextField / MudTextField inside auth dark ── bright border, light text */
.auth-w3-page .mud-input-outlined .mud-input-outlined-border,
.auth-w3-center-page .mud-input-outlined .mud-input-outlined-border {
border-color: rgba(255,255,255,0.18) !important;
border-width: 1.5px !important;
border-radius: 12px !important;
background: rgba(255,255,255,0.05) !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
.auth-w3-page .mud-input-outlined:hover .mud-input-outlined-border,
.auth-w3-center-page .mud-input-outlined:hover .mud-input-outlined-border {
border-color: rgba(20,165,170,0.5) !important;
}
.auth-w3-page .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.auth-w3-center-page .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
border-color: #14A5AA !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.2) !important;
}
.auth-w3-page .mud-input-text,
.auth-w3-page input,
.auth-w3-page textarea {
color: #fff !important;
caret-color: #14A5AA !important;
}
.auth-w3-page .mud-input-label,
.auth-w3-page .mud-input-label-inputcontrol {
color: rgba(255,255,255,0.5) !important;
}
.auth-w3-page .mud-input-label.mud-input-label-focused,
.auth-w3-page .mud-input-outlined.mud-input-focused .mud-input-label {
color: #14A5AA !important;
}
.auth-w3-page .mud-icon-root.mud-input-adornment {
color: rgba(255,255,255,0.3) !important;
}
.auth-w3-page .mud-icon-button { color: rgba(255,255,255,0.5) !important; }
.auth-w3-page .mud-icon-button:hover { color: #14A5AA !important; }
/* Checkbox label */
.auth-w3-page .mud-checkbox .mud-button-label { color: rgba(255,255,255,0.65) !important; }
.auth-w3-page .mud-checkbox-input:not(:checked) + .mud-checkbox-icons .mud-icon-root { color: rgba(255,255,255,0.25) !important; }
.auth-w3-page .mud-checkbox-input:checked + .mud-checkbox-icons .mud-icon-root { color: #14A5AA !important; }
/* ─────────────────────────────────────────────────────
SUBMIT BUTTON — high-visibility teal glow
───────────────────────────────────────────────────── */
.auth-w3-submit {
width: 100% !important;
height: 52px !important;
background: linear-gradient(135deg, #0D7377 0%, #14A5AA 100%) !important;
color: #fff !important;
font-weight: 800 !important;
font-size: 1rem !important;
border-radius: 14px !important;
border: none !important;
box-shadow:
0 0 0 1px rgba(20,165,170,0.4),
0 4px 24px rgba(13,115,119,0.55),
0 0 40px rgba(13,115,119,0.2) !important;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease !important;
text-transform: none !important;
letter-spacing: 0 !important;
position: relative;
overflow: hidden;
}
.auth-w3-submit::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.auth-w3-submit:hover:not(:disabled) {
transform: translateY(-3px) scale(1.01) !important;
box-shadow:
0 0 0 1px rgba(20,165,170,0.6),
0 8px 40px rgba(13,115,119,0.7),
0 0 60px rgba(13,115,119,0.3) !important;
}
.auth-w3-submit:disabled {
opacity: 0.55 !important;
transform: none !important;
}
/* Green variant for student */
.auth-w3-submit-green {
background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
box-shadow:
0 0 0 1px rgba(52,211,153,0.4),
0 4px 24px rgba(5,150,105,0.55),
0 0 40px rgba(5,150,105,0.15) !important;
}
.auth-w3-submit-green:hover:not(:disabled) {
box-shadow:
0 0 0 1px rgba(52,211,153,0.6),
0 8px 40px rgba(5,150,105,0.7),
0 0 60px rgba(5,150,105,0.25) !important;
}
/* ─────────────────────────────────────────────────────
ALT BUTTON — visible outlined
───────────────────────────────────────────────────── */
.auth-w3-alt {
width: 100% !important;
height: 48px !important;
background: rgba(255,255,255,0.05) !important;
border: 1.5px solid rgba(255,255,255,0.15) !important;
color: rgba(255,255,255,0.8) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
border-radius: 12px !important;
text-transform: none !important;
transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.auth-w3-alt:hover {
background: rgba(20,165,170,0.08) !important;
border-color: rgba(20,165,170,0.45) !important;
color: #fff !important;
}
/* ─────────────────────────────────────────────────────
DIVIDER
───────────────────────────────────────────────────── */
.auth-w3-divider {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin: 22px 0 !important;
color: rgba(255,255,255,0.25) !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
}
.auth-w3-divider::before,
.auth-w3-divider::after {
content: '' !important;
flex: 1 !important;
height: 1px !important;
background: rgba(255,255,255,0.08) !important;
}
/* ─────────────────────────────────────────────────────
FOOTER LINK ROW
───────────────────────────────────────────────────── */
.auth-w3-footer {
text-align: center !important;
margin-top: 22px !important;
font-size: 0.88rem !important;
color: rgba(255,255,255,0.4) !important;
}
.auth-w3-footer a,
.auth-w3-link {
color: #14A5AA !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.auth-w3-footer a:hover,
.auth-w3-link:hover { color: #34D399 !important; }
/* Remember me / row */
.auth-w3-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 18px !important;
}
/* ─────────────────────────────────────────────────────
ERROR BOX — bright red, clearly visible
───────────────────────────────────────────────────── */
.auth-w3-error {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
background: rgba(239,68,68,0.12) !important;
border: 1px solid rgba(239,68,68,0.35) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin-bottom: 16px !important;
color: #FCA5A5 !important;
font-size: 0.875rem !important;
line-height: 1.5 !important;
animation: fadeInUp 0.3s ease-out both;
}
/* ─────────────────────────────────────────────────────
CENTERED UTILITY PAGES (CheckEmail, ConfirmEmail, etc.)
───────────────────────────────────────────────────── */
.auth-w3-center-page {
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #070B10 !important;
padding: 40px 20px !important;
position: relative;
overflow: hidden;
}
/* Mesh + center glow */
.auth-w3-center-page::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(13,115,119,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,115,119,0.05) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
}
.auth-w3-center-page::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,115,119,0.15) 0%, transparent 65%);
pointer-events: none;
}
/* Glass card for utility pages */
.auth-w3-card {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 500px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 28px !important;
padding: 52px 44px !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 80px rgba(13,115,119,0.12),
0 40px 80px rgba(0,0,0,0.5) !important;
animation: fadeInUp 0.5s ease-out both;
overflow: hidden;
}
.auth-w3-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.7), rgba(252,211,77,0.3), transparent);
}
/* Status icon wells */
.auth-w3-success-icon,
.auth-w3-error-icon,
.auth-w3-pending-icon {
width: 80px !important; height: 80px !important;
border-radius: 24px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
margin: 0 auto 28px !important;
font-size: 2.4rem !important;
}
.auth-w3-success-icon {
background: rgba(16,185,129,0.15) !important;
border: 1.5px solid rgba(52,211,153,0.3) !important;
box-shadow: 0 0 30px rgba(16,185,129,0.15) !important;
}
.auth-w3-error-icon {
background: rgba(239,68,68,0.12) !important;
border: 1.5px solid rgba(239,68,68,0.3) !important;
box-shadow: 0 0 30px rgba(239,68,68,0.12) !important;
}
.auth-w3-pending-icon {
background: rgba(13,115,119,0.18) !important;
border: 1.5px solid rgba(20,165,170,0.3) !important;
box-shadow: 0 0 30px rgba(13,115,119,0.15) !important;
}
/* ─────────────────────────────────────────────────────
MOBILE RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 959px) {
.auth-w3-left { display: none !important; }
.auth-w3-right { padding: 40px 24px !important; }
.auth-w3-page { margin-top: 0 !important; }
}
@media (max-width: 599px) {
.auth-w3-right { padding: 24px 16px !important; }
.auth-w3-form-card { padding: 28px 20px !important; }
.auth-w3-card { padding: 36px 24px !important; border-radius: 20px !important; }
.auth-w3-form-title { font-size: 1.5rem !important; }
}
/* ══════════════════════════════════════════════════════════════════
AUTH v3 — MAXIMUM SPECIFICITY VISUAL FIXES
Forces styles through MudBlazor SSR overrides
══════════════════════════════════════════════════════════════════ */
/* ── STEP 1: Kill the navbar top padding on auth pages ── */
body:has(.auth-w3-page) .mud-main-content,
body:has(.auth-w3-center-page) .mud-main-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
.auth-w3-page { margin-top: 64px !important; padding-top: 0 !important; }
.auth-w3-center-page { margin-top: 64px !important; padding-top: 0 !important; }
/* ── STEP 2: Form inputs — force white text + bright border on dark ── */
.auth-w3-page .mud-input-root-outlined,
.auth-w3-page .mud-input-control,
.auth-w3-page .mud-input {
background: rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
}
/* Label color */
.auth-w3-page label.mud-input-label,
.auth-w3-page .mud-input-label {
color: rgba(255,255,255,0.55) !important;
font-size: 0.9rem !important;
}
.auth-w3-page label.mud-input-label--focused,
.auth-w3-page .mud-input-label-animated.mud-input-label-inputcontrol.mud-input-label-focused {
color: #14A5AA !important;
}
/* The actual text input */
.auth-w3-page input[type="text"],
.auth-w3-page input[type="email"],
.auth-w3-page input[type="password"],
.auth-w3-page input[type="tel"],
.auth-w3-page textarea,
.auth-w3-page .mud-input-slot input {
color: #ffffff !important;
background: transparent !important;
caret-color: #14A5AA !important;
font-size: 0.95rem !important;
}
/* Input border via fieldset/notch */
.auth-w3-page fieldset,
.auth-w3-page .mud-input-outlined-border {
border-color: rgba(255,255,255,0.2) !important;
border-width: 1.5px !important;
border-radius: 12px !important;
}
.auth-w3-page .mud-input-outlined:hover fieldset,
.auth-w3-page .mud-input-outlined:hover .mud-input-outlined-border {
border-color: rgba(20,165,170,0.55) !important;
}
.auth-w3-page .mud-focused fieldset,
.auth-w3-page .mud-input-outlined.mud-focused .mud-input-outlined-border,
.auth-w3-page .mud-input-outlined:focus-within fieldset {
border-color: #14A5AA !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.22) !important;
}
/* Adornment icon (show/hide password) */
.auth-w3-page .mud-input-adornment .mud-icon-root,
.auth-w3-page .mud-input-adornment-end .mud-icon-root {
color: rgba(255,255,255,0.35) !important;
}
.auth-w3-page .mud-input-adornment .mud-icon-button:hover .mud-icon-root {
color: #14A5AA !important;
}
/* ── STEP 3: MudButton — force submit to be fully visible ── */
.auth-w3-submit.mud-button-root {
background: linear-gradient(135deg, #0D7377, #14A5AA) !important;
color: #fff !important;
border-radius: 14px !important;
height: 52px !important;
font-size: 1rem !important;
font-weight: 800 !important;
box-shadow: 0 0 0 1px rgba(20,165,170,0.4), 0 6px 28px rgba(13,115,119,0.6), 0 0 50px rgba(13,115,119,0.2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
width: 100% !important;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s !important;
}
.auth-w3-submit.mud-button-root:hover {
transform: translateY(-3px) scale(1.01) !important;
box-shadow: 0 0 0 1px rgba(20,165,170,0.6), 0 10px 44px rgba(13,115,119,0.75), 0 0 70px rgba(13,115,119,0.3) !important;
}
.auth-w3-submit-green.mud-button-root {
background: linear-gradient(135deg, #059669, #10B981) !important;
box-shadow: 0 0 0 1px rgba(52,211,153,0.4), 0 6px 28px rgba(5,150,105,0.6) !important;
}
.auth-w3-submit-green.mud-button-root:hover {
box-shadow: 0 0 0 1px rgba(52,211,153,0.6), 0 10px 44px rgba(5,150,105,0.75) !important;
}
/* Alt button */
.auth-w3-alt.mud-button-root {
background: rgba(255,255,255,0.05) !important;
border: 1.5px solid rgba(255,255,255,0.15) !important;
border-radius: 12px !important;
color: rgba(255,255,255,0.8) !important;
height: 48px !important;
font-weight: 600 !important;
width: 100% !important;
text-transform: none !important;
}
.auth-w3-alt.mud-button-root:hover {
background: rgba(20,165,170,0.1) !important;
border-color: rgba(20,165,170,0.45) !important;
color: #fff !important;
}
/* ── STEP 4: Checkbox ── */
.auth-w3-page .mud-checkbox .mud-button-label,
.auth-w3-page .mud-checkbox .mud-typography {
color: rgba(255,255,255,0.65) !important;
font-size: 0.85rem !important;
}
.auth-w3-page .mud-checkbox .mud-icon-root { color: rgba(255,255,255,0.25) !important; }
.auth-w3-page .mud-checkbox.mud-checked .mud-icon-root { color: #14A5AA !important; }
/* ── STEP 5: Progress circle inside button stays white ── */
.auth-w3-submit .mud-progress-circular { color: rgba(255,255,255,0.9) !important; }
/* ── STEP 6: Left panel — boost orb brightness ── */
.auth-w3-left-bg::before {
background: radial-gradient(circle, rgba(13,115,119,0.55) 0%, rgba(13,115,119,0.15) 45%, transparent 70%) !important;
width: 600px !important; height: 600px !important;
top: -150px !important; right: -150px !important;
}
.auth-w3-left-bg::after {
background: radial-gradient(circle, rgba(79,70,229,0.45) 0%, rgba(79,70,229,0.1) 45%, transparent 70%) !important;
width: 450px !important; height: 450px !important;
}
/* ── STEP 7: Form card — brighter, more visible ── */
.auth-w3-form-card {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(20,165,170,0.2) !important;
border-top: 1px solid rgba(20,165,170,0.4) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 80px rgba(13,115,119,0.1),
0 40px 80px rgba(0,0,0,0.5),
0 2px 4px rgba(20,165,170,0.15) !important;
}
/* ── STEP 8: Utility card boost ── */
.auth-w3-card {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(20,165,170,0.2) !important;
border-top: 1px solid rgba(20,165,170,0.4) !important;
box-shadow:
0 0 80px rgba(13,115,119,0.15),
0 40px 80px rgba(0,0,0,0.5) !important;
}
/* ── STEP 9: MudLink dark color override in auth ── */
.auth-w3-page .mud-link { color: #14A5AA !important; font-weight: 700 !important; }
.auth-w3-page .mud-link:hover { color: #34D399 !important; }
/* ── STEP 10: MudCheckBox inside dark form card ── */
.auth-w3-form-card .mud-form-control,
.auth-w3-form-card .mud-input-control { margin-bottom: 0 !important; }
/* ══════════════════════════════════════════════════════════════════
PARENT DASHBOARD — WEB3 DARK THEME
══════════════════════════════════════════════════════════════════ */
/* ── Dashboard body background ── */
.dashboard-content {
background: #080C10 !important;
min-height: 100vh;
padding: 0 24px 32px !important;
margin-top: 100px;
}
/* ── MudAppBar Web3 ── */
.mud-appbar {
background: linear-gradient(135deg, #080C10 0%, #0a1220 100%) !important;
border-bottom: 1px solid rgba(20,165,170,0.15) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.4) !important;
}
/* ── MudDrawer Web3 dark sidebar ── */
.mud-drawer {
background: #060A10 !important;
border-right: 1px solid rgba(20,165,170,0.12) !important;
}
.mud-drawer-content { background: #060A10 !important; }
.mud-drawer .mud-nav-item .mud-nav-link { color: rgba(255,255,255,0.6) !important; border-radius: 10px !important; margin: 1px 2px !important; }
.mud-drawer .mud-nav-item .mud-nav-link:hover { background: rgba(13,115,119,0.12) !important; color: rgba(255,255,255,0.9) !important; }
.mud-drawer .mud-nav-item .mud-nav-link.active { background: rgba(13,115,119,0.2) !important; color: #14A5AA !important; font-weight: 700 !important; border-left: 2px solid #14A5AA; }
.mud-drawer .mud-nav-item .mud-nav-link.active .mud-nav-link-icon { color: #14A5AA !important; }
.mud-drawer .mud-nav-item .mud-nav-link .mud-nav-link-icon { color: rgba(255,255,255,0.4) !important; }
.mud-drawer .nav-section-label { color: rgba(20,165,170,0.6) !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; padding: 8px 20px 4px !important; }
.mud-drawer .mud-divider { border-color: rgba(255,255,255,0.06) !important; }
.mud-drawer .mud-chip { background: rgba(239,68,68,0.2) !important; color: #FCA5A5 !important; }
/* ── Page header Web3 ── */
.page-header,
.page-header-parent,
.page-header-admin,
.page-header-child {
background: linear-gradient(135deg, rgba(13,115,119,0.15) 0%, rgba(9,92,96,0.1) 100%) !important;
border: 1px solid rgba(20,165,170,0.2) !important;
border-radius: 16px !important;
padding: 20px 24px !important;
margin-bottom: 24px !important;
margin-top: 20px !important;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px rgba(13,115,119,0.08) !important;
}
.page-header::before,
.page-header-parent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.6), rgba(252,211,77,0.3), transparent);
}
.page-header .mud-typography,
.page-header-parent .mud-typography { color: #fff !important; }
.page-header-subtitle { color: rgba(255,255,255,0.55) !important; font-size: 0.85rem !important; }
.page-header .mud-icon-root { color: #14A5AA !important; font-size: 2rem !important; }
/* ── Stat cards (dash-stat) Web3 ── */
.dash-stat {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 16px !important;
padding: 20px 24px !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s !important;
position: relative;
overflow: hidden;
}
.dash-stat:hover {
transform: translateY(-3px) !important;
border-color: rgba(20,165,170,0.25) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(13,115,119,0.08) !important;
}
.dash-stat .mud-typography-h4 { color: #fff !important; font-weight: 800 !important; }
.dash-stat .mud-typography-caption { color: rgba(255,255,255,0.45) !important; }
.dash-stat-icon {
width: 48px !important; height: 48px !important;
border-radius: 12px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
.dash-stat-teal { background: rgba(13,115,119,0.2) !important; color: #14A5AA !important; }
.dash-stat-green { background: rgba(16,185,129,0.15) !important; color: #34D399 !important; }
.dash-stat-blue { background: rgba(59,130,246,0.15) !important; color: #60A5FA !important; }
.dash-stat-amber { background: rgba(245,158,11,0.15) !important; color: #FCD34D !important; }
.dash-stat-purple { background: rgba(124,58,237,0.15) !important; color: #A78BFA !important; }
.dash-stat-rose { background: rgba(244,63,94,0.15) !important; color: #FB7185 !important; }
.dash-stat-orange { background: rgba(249,115,22,0.15) !important; color: #FB923C !important; }
/* ── Role card (panels/papers) Web3 ── */
.role-card,
.role-card.mud-paper {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
box-shadow: none !important;
transition: border-color 0.3s !important;
}
.role-card:hover { border-color: rgba(20,165,170,0.2) !important; }
/* ── MudPaper inside dashboard ── */
.dashboard-content .mud-paper:not(.mud-dialog):not(.mud-popover-paper):not(.mud-snackbar) {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
}
/* ── Typography inside dashboard ── */
.dashboard-content .mud-typography-h4,
.dashboard-content .mud-typography-h5,
.dashboard-content .mud-typography-h6,
.dashboard-content .mud-typography-subtitle1,
.dashboard-content .mud-typography-subtitle2,
.dashboard-content .mud-typography-body1,
.dashboard-content .mud-typography-body2 { color: rgba(255,255,255,0.88) !important; }
.dashboard-content .mud-text-secondary,
.dashboard-content .mud-typography.mud-secondary-text { color: rgba(255,255,255,0.48) !important; }
/* ── Form inputs inside dashboard ── */
.dashboard-content .mud-input-outlined .mud-input-outlined-border,
.dashboard-content fieldset.mud-input-outlined-border {
border-color: rgba(255,255,255,0.15) !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.04) !important;
}
.dashboard-content .mud-input-outlined:focus-within fieldset {
border-color: #14A5AA !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.18) !important;
}
.dashboard-content .mud-input-slot input,
.dashboard-content .mud-input-slot textarea { color: #fff !important; caret-color: #14A5AA !important; -webkit-text-fill-color: #fff !important; }
.dashboard-content .mud-input-label { color: rgba(255,255,255,0.45) !important; }
.dashboard-content .mud-shrink { color: #14A5AA !important; background: #060A10 !important; padding: 0 4px !important; }
/* ── MudTable Web3 ── */
.dashboard-content .mud-table { background: transparent !important; }
.dashboard-content .mud-table-head .mud-table-cell {
background: rgba(255,255,255,0.04) !important;
color: rgba(255,255,255,0.5) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
font-size: 0.72rem !important;
letter-spacing: 0.1em !important;
}
.dashboard-content .mud-table-row .mud-table-cell {
color: rgba(255,255,255,0.8) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.dashboard-content .mud-table-row:hover .mud-table-cell { background: rgba(13,115,119,0.08) !important; }
.dashboard-content .mud-table-body { background: transparent !important; }
/* ── MudChip in dark ── */
.dashboard-content .mud-chip { border-radius: 8px !important; }
.dashboard-content .mud-chip.mud-chip-outlined { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.7) !important; }
/* ── Divider in dark ── */
.dashboard-content .mud-divider { border-color: rgba(255,255,255,0.07) !important; }
/* ── MudAlert ── */
.dashboard-content .mud-alert { border-radius: 12px !important; }
/* ── MudAvatar ── */
.dashboard-content .mud-avatar { border: 1px solid rgba(255,255,255,0.1) !important; }
/* ── MudBadge ── */
.dashboard-content .mud-badge-content { background: #EF4444 !important; color: #fff !important; }
/* ── Buttons in dashboard ── */
.dashboard-content .mud-button-filled-primary {
background: linear-gradient(135deg, #0D7377, #14A5AA) !important;
box-shadow: 0 4px 16px rgba(13,115,119,0.4) !important;
}
.dashboard-content .mud-button-filled-primary:hover { box-shadow: 0 6px 24px rgba(13,115,119,0.6) !important; }
.dashboard-content .mud-button-filled-warning {
background: linear-gradient(135deg, #D97706, #F59E0B) !important;
color: #fff !important;
box-shadow: 0 4px 16px rgba(245,158,11,0.4) !important;
}
.dashboard-content .mud-button-filled-success {
background: linear-gradient(135deg, #059669, #10B981) !important;
box-shadow: 0 4px 16px rgba(5,150,105,0.35) !important;
}
/* ── Wallet balance card ── */
.wallet-balance-card {
background: linear-gradient(135deg, #0f1a30 0%, #0D7377 100%) !important;
border: 1px solid rgba(20,165,170,0.4) !important;
border-radius: 20px !important;
box-shadow: 0 0 60px rgba(13,115,119,0.3), 0 20px 40px rgba(0,0,0,0.4) !important;
position: relative;
overflow: hidden;
}
.wallet-balance-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(20,165,170,0.9), rgba(252,211,77,0.4), transparent);
}
/* ── Question set catalog cards ── */
.catalog-qs-card {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 16px !important;
transition: transform 0.3s cubic-bezier(.16,1,.3,1), border-color 0.3s, box-shadow 0.3s !important;
}
.catalog-qs-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(20,165,170,0.3) !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 24px rgba(13,115,119,0.1) !important;
}
/* ── Price badge ── */
.qs-price-badge {
background: linear-gradient(135deg, #059669, #10B981) !important;
color: #fff !important;
border-radius: 8px !important;
padding: 4px 12px !important;
font-weight: 800 !important;
font-size: 0.9rem !important;
box-shadow: 0 4px 12px rgba(5,150,105,0.4) !important;
}
.qs-price-badge.free {
background: linear-gradient(135deg, #059669, #34D399) !important;
box-shadow: 0 4px 12px rgba(52,211,153,0.4) !important;
}
.qs-price-badge.unlocked {
background: rgba(52,211,153,0.15) !important;
color: #34D399 !important;
border: 1px solid rgba(52,211,153,0.3) !important;
box-shadow: none !important;
}
/* ── Support ticket cards ── */
.ticket-card {
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 14px !important;
transition: border-color 0.2s !important;
}
.ticket-card:hover { border-color: rgba(20,165,170,0.2) !important; }
.ticket-open { border-left: 3px solid #14A5AA !important; }
.ticket-inprogress { border-left: 3px solid #FCD34D !important; }
.ticket-resolved { border-left: 3px solid #34D399 !important; }
.ticket-closed { border-left: 3px solid rgba(255,255,255,0.2) !important; }
/* ── Cart summary card ── */
.cart-summary-card {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(20,165,170,0.2) !important;
border-radius: 20px !important;
position: sticky;
top: 80px;
box-shadow: 0 0 40px rgba(13,115,119,0.08) !important;
}
/* ── Payment result pages ── */
.payment-result-card {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 24px !important;
padding: 56px 40px !important;
box-shadow: 0 0 80px rgba(13,115,119,0.12), 0 40px 80px rgba(0,0,0,0.5) !important;
}
/* ── MudProgressLinear ── */
.dashboard-content .mud-progress-linear { background: rgba(255,255,255,0.06) !important; border-radius: 4px !important; }
.dashboard-content .mud-progress-linear-bar { background: linear-gradient(90deg, #0D7377, #14A5AA) !important; }
/* ── Empty state ── */
.empty-state {
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 20px !important;
padding: 64px 40px !important;
text-align: center;
}
.empty-state-icon { color: rgba(255,255,255,0.12) !important; font-size: 4rem !important; margin-bottom: 16px; }
/* ── MudPagination ── */
.dashboard-content .mud-pagination-item-page { color: rgba(255,255,255,0.6) !important; background: rgba(255,255,255,0.05) !important; border-radius: 8px !important; }
.dashboard-content .mud-pagination-item-page.mud-pagination-item-page-selected { background: linear-gradient(135deg,#0D7377,#14A5AA) !important; color: #fff !important; }
/* ── MudSelect in dashboard ── */
.dashboard-content .mud-select-input .mud-input-text { color: rgba(255,255,255,0.85) !important; }
.dashboard-content .mud-popover-paper { background: #0d1a28 !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.dashboard-content .mud-list-item:hover { background: rgba(13,115,119,0.12) !important; }
.dashboard-content .mud-list-item-text { color: rgba(255,255,255,0.85) !important; }
/* ── Code tag ── */
.dashboard-content code { background: rgba(20,165,170,0.15) !important; color: #34D399 !important; padding: 2px 8px !important; border-radius: 6px !important; font-size: 0.85rem !important; }
/* ── Toggle icon button ── */
.dashboard-content .mud-toggle-icon-button { color: rgba(255,255,255,0.5) !important; }
/* ── Cart description ── */
.cart-desc { color: rgba(255,255,255,0.5) !important; }
.cart-desc * { color: rgba(255,255,255,0.5) !important; }
/* ══════════════════════════════════════════════════════════════════
GLOBAL DARK FORM FIELDS — fix white background on all pages
══════════════════════════════════════════════════════════════════ */
/* Force all MudTextField/MudSelect/NtTextField to dark on dark pages */
.mud-input-outlined .mud-input-outlined-border,
fieldset.mud-input-outlined-border {
border-color: rgba(255,255,255,0.15) !important;
background: rgba(255,255,255,0.04) !important;
border-radius: 10px !important;
}
.mud-input-outlined:hover .mud-input-outlined-border,
.mud-input-outlined:hover fieldset {
border-color: rgba(20,165,170,0.45) !important;
}
.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input-outlined:focus-within fieldset {
border-color: #14A5AA !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.2) !important;
}
.mud-input-slot input,
.mud-input-slot textarea,
.mud-input-slot .mud-input-text {
color: #fff !important;
background: transparent !important;
caret-color: #14A5AA !important;
-webkit-text-fill-color: #fff !important;
}
/* Autofill override — prevents browser white autofill background */
.mud-input-slot input:-webkit-autofill,
.mud-input-slot input:-webkit-autofill:hover,
.mud-input-slot input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #0d1520 inset !important;
-webkit-text-fill-color: #fff !important;
caret-color: #14A5AA !important;
border-radius: 10px !important;
}
.mud-input-label,
label.mud-input-label {
color: rgba(255,255,255,0.45) !important;
}
.mud-input-label.mud-input-label-animated.mud-shrink,
.mud-input-label.mud-shrink {
color: #14A5AA !important;
background: #0a1018 !important;
padding: 0 4px !important;
}
.mud-input-adornment .mud-icon-root,
.mud-input-adornment-start .mud-icon-root,
.mud-input-adornment-end .mud-icon-root {
color: rgba(255,255,255,0.3) !important;
}
.mud-input-adornment .mud-icon-button { color: rgba(255,255,255,0.4) !important; }
.mud-input-adornment .mud-icon-button:hover { color: #14A5AA !important; }
/* Select arrow */
.mud-select .mud-select-input .mud-input-text { color: #fff !important; }
.mud-select .mud-input-adornment-end .mud-icon-root { color: rgba(255,255,255,0.35) !important; }
/* Helper text */
.mud-input-helper-text { color: rgba(255,255,255,0.35) !important; }
/* MudNumericField */
.mud-numeric-field input { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* ── FAQ ACCORDION FIX — prevent content disappearing on expand ── */
/* Override MudExpansionPanel which hides content via transform/overflow */
.mud-expand-panel .mud-expand-panel-content {
overflow: visible !important;
}
.mud-expand-panel .mud-expand-panel-content .mud-expand-panel-text {
color: rgba(255,255,255,0.65) !important;
overflow: visible !important;
}
/* The panel itself should not clip */
.faq-item { overflow: visible !important; }
.faq-item .mud-expand-panel { overflow: visible !important; }
/* Ensure header and content stay on screen */
.faq-item .mud-expand-panel-header {
position: relative !important;
z-index: 1 !important;
}
/* Remove any scroll-to-top or transform that hides content */
.mud-expand-panel-content-expanded {
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ══════════════════════════════════════════════════════════════════
NtSelect & NtTextField DARK FIX — final pass
══════════════════════════════════════════════════════════════════ */
/* NtTextField wrapper */
.nt-field-input-wrap {
background: rgba(255,255,255,0.05) !important;
border-color: rgba(255,255,255,0.14) !important;
}
.nt-field-input-wrap:hover { border-color: rgba(20,165,170,0.45) !important; }
.nt-field-input-wrap:focus-within {
border-color: #14A5AA !important;
background: rgba(255,255,255,0.07) !important;
outline-color: rgba(13,115,119,0.2) !important;
}
/* Input text white */
.nt-field-input {
color: #fff !important;
caret-color: #14A5AA !important;
}
.nt-field-input::placeholder { color: rgba(255,255,255,0.28) !important; }
/* Label */
.nt-field-label { color: rgba(255,255,255,0.5) !important; }
/* Autofill */
.nt-field-input:-webkit-autofill,
.nt-field-input:-webkit-autofill:hover,
.nt-field-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #0c1520 inset !important;
-webkit-text-fill-color: #fff !important;
}
/* NtSelect inner dark */
.nt-select-inner .mud-input-outlined { background: rgba(255,255,255,0.05) !important; }
.nt-select-inner:focus-within .mud-input-outlined { background: rgba(255,255,255,0.07) !important; }
.nt-select-inner .mud-input-outlined-border { border-color: rgba(255,255,255,0.14) !important; border-width: 1.5px !important; }
.nt-select-inner:hover .mud-input-outlined-border { border-color: rgba(20,165,170,0.45) !important; }
.nt-select-inner:focus-within .mud-input-outlined-border { border-color: #14A5AA !important; }
/* Make selected value text white */
.nt-select-inner .mud-select-input .mud-input-text,
.nt-select-inner .mud-select-input input,
.nt-select-inner .mud-input-slot,
.nt-select-inner .mud-input-slot span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.nt-select-inner .mud-input-adornment-end .mud-icon-root { color: rgba(255,255,255,0.35) !important; }
/* MudNumericField on dark pages */
.mud-numeric-field input { color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; }
/* ─── cache-bust v3 ─── */
/* ══════════════════════════════════════════════════════════════════
TARGETED UI FIXES — v4
1. Dropdown popup dark + visible options
2. MudSelect dropdown/popover list items
3. Table row hover — no more cyan/teal wash
4. Tab text visibility (inactive tabs)
5. NtField icon visibility
6. NtField consistency
7. Add Child button alignment
══════════════════════════════════════════════════════════════════ */
/* ── 1. MudSelect dropdown popup ── */
.mud-popover-paper,
.mud-list,
.mud-list-padding,
.mud-popover.mud-select-popover {
background: #0d1a28 !important;
border: 1px solid rgba(20,165,170,0.25) !important;
border-radius: 12px !important;
box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(20,165,170,0.15) !important;
}
/* ── 2. Dropdown option items ── */
.mud-list-item,
.mud-list-item-text,
.mud-list-item .mud-typography,
.mud-list-item span {
color: rgba(255,255,255,0.85) !important;
background: transparent !important;
}
.mud-list-item:hover,
.mud-list-item:hover .mud-list-item-text {
background: rgba(13,115,119,0.18) !important;
color: #fff !important;
}
.mud-list-item.mud-selected,
.mud-list-item.mud-selected .mud-list-item-text {
background: rgba(13,115,119,0.25) !important;
color: #14A5AA !important;
}
/* Checkmark / radio in list item */
.mud-list-item .mud-icon-root { color: rgba(255,255,255,0.5) !important; }
.mud-list-item.mud-selected .mud-icon-root { color: #14A5AA !important; }
/* ── 3. Table row hover — replace light cyan with subtle dark ── */
.mud-table-row:hover,
.mud-table-row:hover .mud-table-cell {
background: rgba(13,115,119,0.1) !important;
color: rgba(255,255,255,0.9) !important;
}
/* Remove the teal/cyan striped background completely */
.mud-table-body .mud-table-row:nth-child(odd) { background: transparent !important; }
.mud-table-body .mud-table-row:nth-child(even) { background: rgba(255,255,255,0.015) !important; }
/* ── 4. Inactive tab text visibility ── */
.mud-tabs .mud-tab:not(.mud-tab-active) .mud-tab-text,
.mud-tabs .mud-tab:not(.mud-tab-active) {
color: rgba(255,255,255,0.55) !important;
opacity: 1 !important;
}
.mud-tabs .mud-tab:hover:not(.mud-tab-active) {
color: rgba(255,255,255,0.85) !important;
background: rgba(255,255,255,0.04) !important;
}
.mud-tabs .mud-tab-active,
.mud-tabs .mud-tab-active .mud-tab-text {
color: #14A5AA !important;
}
.mud-tabs .mud-tab-slider { background: #14A5AA !important; }
/* ── 5. NtField icon visibility fix ── */
.nt-field-icon {
color: rgba(255,255,255,0.4) !important;
display: flex;
align-items: center;
padding: 0 10px;
flex-shrink: 0;
}
.nt-field-icon .mud-icon-root { color: rgba(255,255,255,0.4) !important; font-size: 1.1rem !important; }
.nt-field-input-wrap:focus-within .nt-field-icon .mud-icon-root { color: #14A5AA !important; }
/* End adornment button */
.nt-field-icon-end {
background: none;
border: none;
cursor: pointer;
padding: 0 10px;
color: rgba(255,255,255,0.35) !important;
}
.nt-field-icon-end:hover { color: #14A5AA !important; }
.nt-field-icon-end .mud-icon-root { color: inherit !important; font-size: 1.1rem !important; }
/* ── 6. NtTextField height/alignment consistency with NtSelect ── */
.nt-field-input {
height: 46px !important;
min-height: 46px !important;
padding: 0 14px !important;
display: flex !important;
align-items: center !important;
line-height: 46px !important;
font-size: 0.9375rem !important;
box-sizing: border-box !important;
}
.nt-field-textarea {
height: auto !important;
line-height: 1.6 !important;
padding: 12px 14px !important;
min-height: 90px !important;
}
.nt-field-input-wrap {
min-height: 46px !important;
height: 46px !important;
}
.nt-field-input-wrap:has(textarea) {
height: auto !important;
}
/* Ensure NtSelect matches same height */
.nt-select-inner .mud-input,
.nt-select-inner .mud-input-slot {
min-height: 46px !important;
height: 46px !important;
}
/* ── 7. Add Child button full height alignment ── */
.mud-grid .mud-grid-item .mud-button-root.mud-button-size-large {
height: 46px !important;
min-height: 46px !important;
align-self: flex-end !important;
}
/* Specifically the parent add child grid row */
.mud-grid-item.d-flex.align-center .mud-button-root {
height: 46px !important;
}
/* ── 8. Dropdown popup z-index ── */
.mud-popover { z-index: 1500 !important; }
/* ── 9. MudAlert in dark context ── */
.mud-alert { border-radius: 12px !important; }
.mud-alert-filled-info { background: rgba(13,115,119,0.2) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(20,165,170,0.25) !important; }
.mud-alert-filled-warning { background: rgba(245,158,11,0.15) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(252,211,77,0.25) !important; }
.mud-alert-filled-error { background: rgba(239,68,68,0.12) !important; color: #FCA5A5 !important; border: 1px solid rgba(239,68,68,0.25) !important; }
.mud-alert-filled-success { background: rgba(16,185,129,0.12) !important; color: #34D399 !important; border: 1px solid rgba(52,211,153,0.25) !important; }
/* ── Reveal fallback: CSS-driven animation for all reveal elements.
Works on Blazor Server where JS may fire before DOM is ready.
The animation runs on load; JS IntersectionObserver adds .is-visible
for below-fold elements to re-trigger the entrance on scroll. ── */
@keyframes reveal-fallback {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-left-fallback {
from { opacity: 0; transform: translateX(-36px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-right-fallback {
from { opacity: 0; transform: translateX(36px); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-scale-fallback {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: none; }
}
@keyframes reveal-blur-fallback {
from { opacity: 0; filter: blur(10px); }
to { opacity: 1; filter: none; }
}
/* CSS-driven entrance for all variants.
'both' = apply 'from' before delay (element starts invisible)
AND hold 'to' after end (element stays visible) */
.reveal:not(.is-visible) { animation: reveal-fallback 0.7s cubic-bezier(.16,1,.3,1) 0.1s both; }
.reveal-left:not(.is-visible) { animation: reveal-left-fallback 0.7s cubic-bezier(.16,1,.3,1) 0.1s both; }
.reveal-right:not(.is-visible) { animation: reveal-right-fallback 0.7s cubic-bezier(.16,1,.3,1) 0.1s both; }
.reveal-scale:not(.is-visible) { animation: reveal-scale-fallback 0.6s cubic-bezier(.16,1,.3,1) 0.1s both; }
.reveal-blur:not(.is-visible) { animation: reveal-blur-fallback 0.8s ease 0.1s both; }
.reveal-flip:not(.is-visible) { animation: reveal-fallback 0.7s cubic-bezier(.16,1,.3,1) 0.1s both; }
/* Stagger delays */
.delay-1:not(.is-visible) { animation-delay: 0.2s !important; }
.delay-2:not(.is-visible) { animation-delay: 0.32s !important; }
.delay-3:not(.is-visible) { animation-delay: 0.44s !important; }
.delay-4:not(.is-visible) { animation-delay: 0.56s !important; }
.delay-5:not(.is-visible) { animation-delay: 0.68s !important; }
/* When JS adds .is-visible, disable the CSS animation so transition takes over */
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible,
.reveal-scale.is-visible, .reveal-blur.is-visible, .reveal-flip.is-visible {
animation: none !important;
}
/* ══════════════════════════════════════════════════════════════════
v5 — Dropdown hover, responsiveness, ManageUsers, ManageQuestionSets
══════════════════════════════════════════════════════════════════ */
/* ── 1. Dropdown: remove double background — kill MudBlazor's ripple/hover ── */
.mud-list-item::before { display: none !important; }
.mud-list-item .mud-ripple { display: none !important; }
.mud-list-item {
background: transparent !important;
transition: background 0.15s ease !important;
border-radius: 8px !important;
margin: 2px 6px !important;
}
.mud-list-item:hover {
background: rgba(13,115,119,0.2) !important;
}
.mud-list-item.mud-selected {
background: rgba(13,115,119,0.3) !important;
}
.mud-list-item.mud-selected:hover {
background: rgba(13,115,119,0.35) !important;
}
/* Ensure the list padding doesn't add gap */
.mud-list { padding: 6px !important; }
/* ── 2. ManageUsers: responsive action buttons ── */
/* Parent card action area — wrap on small screens */
.manage-user-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
}
@media (max-width: 599px) {
/* Parent row stack on mobile */
.mud-paper .mud-stack[class*="row"] {
flex-wrap: wrap !important;
}
/* Chips in header overflow */
.page-header .mud-stack[class*="row"] {
flex-wrap: wrap !important;
gap: 6px !important;
}
}
/* ── 3. ManageQuestionSets form — fix checkbox + save button alignment ── */
.manage-qs-form-row {
display: flex !important;
align-items: center !important;
gap: 24px !important;
flex-wrap: wrap !important;
margin-top: 12px !important;
}
/* MudCheckbox label color in dark */
.mud-checkbox .mud-button-label,
.mud-checkbox .mud-typography,
.mud-form-control-label-input { color: rgba(255,255,255,0.75) !important; }
.mud-checkbox.mud-checked .mud-icon-root { color: #14A5AA !important; }
.mud-checkbox .mud-icon-root { color: rgba(255,255,255,0.3) !important; }
/* MudNumericField dark ── */
.mud-numeric-field .mud-input-outlined { background: rgba(255,255,255,0.05) !important; }
.mud-numeric-field .mud-input-outlined-border { border-color: rgba(255,255,255,0.14) !important; border-radius:12px!important; }
.mud-numeric-field .mud-input-outlined:hover .mud-input-outlined-border { border-color: rgba(20,165,170,0.45)!important; }
.mud-numeric-field .mud-input-outlined:focus-within .mud-input-outlined-border { border-color:#14A5AA!important; }
.mud-numeric-field .mud-input-slot { min-height:46px!important; }
.mud-numeric-field input { color:#fff!important; -webkit-text-fill-color:#fff!important; caret-color:#14A5AA!important; }
.mud-numeric-field .mud-input-label { color:rgba(255,255,255,0.45)!important; }
.mud-numeric-field .mud-shrink { color:#14A5AA!important; background:#0a1018!important; padding:0 4px!important; }
/* ── 4. Page header chips — prevent overflow ── */
.page-header .mud-chip { max-width: 180px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
@media (max-width: 767px) {
.page-header .mud-stack { flex-wrap: wrap !important; }
.page-header .mud-spacer { display: none !important; }
.page-header .mud-chip { max-width: 140px !important; font-size: 0.75rem !important; }
}
/* ── 5. Quill editor dark styling ── */
.ql-toolbar { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.14) !important; border-radius: 10px 10px 0 0 !important; }
.ql-toolbar .ql-stroke { stroke: rgba(255,255,255,0.55) !important; }
.ql-toolbar .ql-fill { fill: rgba(255,255,255,0.55) !important; }
.ql-toolbar button:hover .ql-stroke { stroke: #14A5AA !important; }
.ql-toolbar button:hover .ql-fill { fill: #14A5AA !important; }
.ql-toolbar button.ql-active .ql-stroke { stroke: #14A5AA !important; }
.ql-container { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.14) !important; border-radius: 0 0 10px 10px !important; }
.ql-editor { color: rgba(255,255,255,0.85) !important; min-height: 150px !important; }
.ql-editor.ql-blank::before { color: rgba(255,255,255,0.28) !important; }
/* ── 6. ManageUsers — parent card responsive ── */
.manage-user-card { overflow: hidden !important; }
.manage-user-card .mud-stack { flex-wrap: wrap !important; }
@media (max-width: 767px) {
.manage-user-card .mud-stack[class*="row"] > .mud-stack { width: 100% !important; justify-content: flex-start !important; }
}
/* ── 7. View All Sets button in header ── */
@media (max-width: 599px) {
.page-header .mud-button-root { font-size: 0.78rem !important; padding: 6px 12px !important; }
}
/* ── 8. Sort By dropdown text white ── */
.nt-select-inner .mud-select .mud-input-text { color: #fff !important; }
/* ── 9. Fix MudButton text color in primary outlined context ── */
.mud-button-outlined-primary { color: rgba(255,255,255,0.8) !important; border-color: rgba(255,255,255,0.2) !important; }
.mud-button-outlined-error { border-color: rgba(248,113,113,0.4) !important; color: #F87171 !important; }
.mud-button-outlined-success { border-color: rgba(52,211,153,0.4) !important; color: #34D399 !important; }
/* ── 10. MudSelect pagination dropdown ── */
.mud-select .mud-input-outlined { background: rgba(255,255,255,0.05) !important; }
.mud-select .mud-input-outlined-border { border-color: rgba(255,255,255,0.14) !important; }
.mud-select .mud-input-outlined-border:hover { border-color: rgba(20,165,170,0.45) !important; }
.mud-select .mud-input-slot { color: #fff !important; }
/* ── Hide number input spinner arrows (up/down buttons) ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
display: none !important;
}
input[type="number"] {
-moz-appearance: textfield !important;
appearance: textfield !important;
}
/* Also target the NtTextField number input specifically */
.nt-field-input[type="number"]::-webkit-inner-spin-button,
.nt-field-input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
display: none !important;
}
.nt-field-input[type="number"] {
-moz-appearance: textfield !important;
}
/* ── Native date input dark theme (used in onboarding wizard) ── */
.nt-field-input[type="date"] {
color-scheme: dark;
-webkit-text-fill-color: #fff !important;
}
.nt-field-input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) opacity(0.5);
cursor: pointer;
}
.nt-field-input[type="date"]::-webkit-calendar-picker-indicator:hover {
filter: invert(1) opacity(0.85);
}
/* Parallax integration – convert JS variable into movement */
[data-parallax] {
--nt-parallax-y: 0px;
transform: translate3d(0, var(--nt-parallax-y), 0);
will-change: transform;
}