268 lines
6.5 KiB
SCSS
268 lines
6.5 KiB
SCSS
// Bolt.ai Glass Style Overrides
|
|
// Ensures all glass components use the subtle bolt.ai design system
|
|
|
|
// Import design tokens
|
|
@import 'design-tokens';
|
|
|
|
// ============================================
|
|
// GLOBAL GLASS STYLES - Bolt.ai Pattern
|
|
// ============================================
|
|
|
|
// All glass elements get the subtle treatment
|
|
.glass,
|
|
.glass-light,
|
|
.glass-ultra,
|
|
.glass-card,
|
|
.glass-stat-card,
|
|
.glass-dues-card,
|
|
.glass-navbar,
|
|
.glass-sidebar,
|
|
.glass-app-bar,
|
|
.glass-card-bright {
|
|
// Subtle glass effect like bolt.ai
|
|
background: rgba(255, 255, 255, 0.6) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
// Hover state
|
|
&:hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
// Ultra glass variant (slightly more opaque)
|
|
.glass-ultra {
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
backdrop-filter: blur(2px) !important;
|
|
-webkit-backdrop-filter: blur(2px) !important;
|
|
}
|
|
|
|
// Glass Monaco soft colors - very subtle
|
|
.bg-glass-monaco-soft,
|
|
.glass-monaco-soft {
|
|
background: rgba(220, 38, 38, 0.03) !important; // Very subtle red tint
|
|
|
|
&:hover {
|
|
background: rgba(220, 38, 38, 0.05) !important; // Slightly more on hover
|
|
}
|
|
}
|
|
|
|
// Border radius consistency
|
|
.rounded-glass {
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
// ============================================
|
|
// TEXT COLORS - Dark on Light
|
|
// ============================================
|
|
|
|
// Ensure text is always readable on light backgrounds
|
|
.glass,
|
|
.glass-light,
|
|
.glass-ultra,
|
|
.glass-card,
|
|
.glass-stat-card,
|
|
.glass-dues-card,
|
|
.glass-navbar,
|
|
.glass-sidebar,
|
|
.glass-card-bright {
|
|
color: var(--color-text-primary, #27272a) !important;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--color-text-primary, #27272a) !important;
|
|
}
|
|
|
|
p {
|
|
color: var(--color-text-secondary, #6b7280) !important;
|
|
}
|
|
|
|
.text-gray-500 {
|
|
color: var(--color-text-muted, #9ca3af) !important;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// GRADIENT OVERRIDES - Subtle Bolt.ai Style
|
|
// ============================================
|
|
|
|
// Hero gradients - Clean white/gray
|
|
.hero-gradient,
|
|
.bg-gradient-monaco,
|
|
.gradient-monaco {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important; // White to light gray
|
|
}
|
|
|
|
// Monaco gradient for text
|
|
.text-gradient-monaco {
|
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
|
-webkit-background-clip: text !important;
|
|
background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
}
|
|
|
|
// ============================================
|
|
// BUTTON STYLES - Bolt.ai Pattern
|
|
// ============================================
|
|
|
|
.btn-glass,
|
|
.btn-glass-primary,
|
|
.btn-glass-secondary {
|
|
background: rgba(255, 255, 255, 0.6) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
color: var(--color-text-primary, #27272a) !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.btn-glass-primary {
|
|
border-color: rgba(220, 38, 38, 0.1) !important;
|
|
color: #dc2626 !important;
|
|
|
|
&:hover {
|
|
background: rgba(254, 242, 242, 0.8) !important;
|
|
border-color: rgba(220, 38, 38, 0.2) !important;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// ANIMATION OVERRIDES - Simple and Subtle
|
|
// ============================================
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out !important;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// Remove complex animations
|
|
.animate-float,
|
|
.animate-bounce,
|
|
.animate-pulse-glow,
|
|
.animate-shimmer-slow {
|
|
animation: none !important;
|
|
}
|
|
|
|
// ============================================
|
|
// SHADOW OVERRIDES - Subtle Shadows
|
|
// ============================================
|
|
|
|
.shadow-glass,
|
|
.shadow-glass-hover,
|
|
.shadow-glass-lg,
|
|
.shadow-monaco,
|
|
.shadow-monaco-sm,
|
|
.shadow-monaco-intense {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
|
|
.shadow-glass-hover:hover,
|
|
.shadow-glass-lg:hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
// ============================================
|
|
// SIDEBAR SPECIFIC
|
|
// ============================================
|
|
|
|
.glass-sidebar {
|
|
background: rgba(255, 255, 255, 0.6) !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
|
|
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08) !important;
|
|
|
|
.bg-glass-light {
|
|
background: rgba(255, 255, 255, 0.4) !important;
|
|
backdrop-filter: blur(2px) !important;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// GLOBAL BLUR REDUCTION
|
|
// ============================================
|
|
|
|
// Override any high blur values
|
|
* {
|
|
&[style*="blur(60px)"],
|
|
&[style*="blur(50px)"],
|
|
&[style*="blur(40px)"],
|
|
&[style*="blur(30px)"],
|
|
&[style*="blur(20px)"],
|
|
&[style*="blur(10px)"] {
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
}
|
|
}
|
|
|
|
// Ensure maximum blur is 8px
|
|
.backdrop-blur-3xl,
|
|
.backdrop-blur-2xl,
|
|
.backdrop-blur-xl,
|
|
.backdrop-blur-lg {
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
}
|
|
|
|
.backdrop-blur-md {
|
|
backdrop-filter: blur(4px) !important;
|
|
-webkit-backdrop-filter: blur(4px) !important;
|
|
}
|
|
|
|
.backdrop-blur-sm {
|
|
backdrop-filter: blur(2px) !important;
|
|
-webkit-backdrop-filter: blur(2px) !important;
|
|
}
|
|
|
|
// ============================================
|
|
// RESPONSIVE ADJUSTMENTS
|
|
// ============================================
|
|
|
|
@media (max-width: 768px) {
|
|
.glass,
|
|
.glass-light,
|
|
.glass-ultra,
|
|
.glass-card {
|
|
backdrop-filter: blur(2px) !important;
|
|
-webkit-backdrop-filter: blur(2px) !important;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// PERFORMANCE OPTIMIZATIONS
|
|
// ============================================
|
|
|
|
// Reduce motion for better performance
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
// GPU acceleration for transforms
|
|
.glass,
|
|
.glass-card,
|
|
.glass-stat-card {
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
} |