diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 8a129f2..aed3f52 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -82,8 +82,12 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); @mixin glass-effect($bg-opacity: 0.7, $blur: 20px) { background: rgba(255, 255, 255, $bg-opacity); - backdrop-filter: blur($blur); - -webkit-backdrop-filter: blur($blur); + + @supports (backdrop-filter: blur($blur)) or (-webkit-backdrop-filter: blur($blur)) { + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + } + border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: $shadow-glass; } @@ -106,19 +110,26 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); // Enhanced glass effect with gradient and inner glow @mixin enhanced-glass($opacity: 0.9, $blur: 30px) { + // Fallback for browsers without backdrop-filter support + background: rgba(255, 255, 255, $opacity * 0.95); background: linear-gradient( 135deg, rgba(255, 255, 255, $opacity * 0.95), rgba(255, 255, 255, $opacity * 0.85), rgba(255, 255, 255, $opacity * 0.75) - ); - backdrop-filter: blur($blur) saturate(180%); - -webkit-backdrop-filter: blur($blur) saturate(180%); - border: 1px solid rgba(255, 255, 255, 0.25); + ) !important; + + // Modern browsers with backdrop-filter support + @supports (backdrop-filter: blur($blur)) or (-webkit-backdrop-filter: blur($blur)) { + backdrop-filter: blur($blur) saturate(180%); + -webkit-backdrop-filter: blur($blur) saturate(180%); + } + + border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.6), - inset 0 -2px 4px rgba(0, 0, 0, 0.05); + inset 0 -2px 4px rgba(0, 0, 0, 0.05) !important; position: relative; // Noise texture overlay @@ -126,6 +137,10 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); content: ''; position: absolute; inset: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; opacity: 0.03; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px); @@ -828,4 +843,134 @@ $screen-xl: 1280px; &:hover { background: $gradient-monaco-dark; } +} + +// ============================================ +// 11. Global Production Overrides +// ============================================ + +// Ensure glass morphism is applied to all dashboard cards +.v-card, +.glass-card, +.dashboard-header, +.stat-card { + @include enhanced-glass(); + border-radius: 20px !important; +} + +// Bento Grid System - Global Application +.bento-grid { + display: grid !important; + grid-template-columns: repeat(12, 1fr) !important; + gap: 1.5rem !important; + + .bento-item { + border-radius: 20px !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + + &--small { grid-column: span 3 !important; } + &--medium { grid-column: span 4 !important; } + &--large { grid-column: span 6 !important; } + &--xlarge { grid-column: span 8 !important; } + &--full { grid-column: span 12 !important; } + + &:hover { + transform: translateY(-4px) !important; + } + } + + // Responsive overrides + @media (max-width: 1280px) { + .bento-item--xlarge { + grid-column: span 12 !important; + } + .bento-item--large { + grid-column: span 6 !important; + } + .bento-item--medium { + grid-column: span 6 !important; + } + } + + @media (max-width: 960px) { + .bento-item--large { + grid-column: span 12 !important; + } + .bento-item--medium { + grid-column: span 12 !important; + } + } +} + +// Dashboard specific glass overrides +.admin-dashboard, +.board-dashboard, +.member-dashboard { + .dashboard-header { + @include enhanced-glass(); + text-align: center !important; + padding: 2rem !important; + margin-bottom: 2rem !important; + } + + .dashboard-title { + font-size: 2.5rem !important; + font-weight: 700 !important; + background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; + } + + .glass-badge { + background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; + color: white !important; + font-weight: 600 !important; + } +} + +// Sidebar fixed width enforcement +.v-navigation-drawer { + width: 280px !important; + max-width: 280px !important; + min-width: 280px !important; + + &__content { + @include glass-effect(0.95, 10px); + } +} + +// Remove any hamburger menu +.v-app-bar__nav-icon, +.menu-toggle, +.hamburger-menu { + display: none !important; +} + +// Animation classes +.animated-entrance { + animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; +} + +@keyframes slide-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Mobile responsiveness improvements +@media (max-width: 375px) { + .dashboard-title { + font-size: 1.8rem !important; + word-break: break-word !important; + } + + .dashboard-header { + padding: 1rem !important; + } } \ No newline at end of file