diff --git a/Design/glass-morphism-implementation.md b/Design/glass-morphism-implementation.md new file mode 100644 index 0000000..a6fffa1 --- /dev/null +++ b/Design/glass-morphism-implementation.md @@ -0,0 +1,207 @@ +# Glass Morphism Implementation Guide + +## Overview +This document details the glass morphism design patterns implemented in the MonacoUSA Portal, following the design philosophy outlined in design-system.md. + +## Implementation Date +December 2024 + +## Key Changes + +### 1. Global SCSS Architecture +Created `assets/scss/main.scss` with comprehensive design system implementation: +- Monaco red color spectrum variables +- Glass morphism mixins +- Animation utilities +- Component classes +- Responsive breakpoints + +### 2. Layout Transformations + +#### Admin Layout (`layouts/admin.vue`) +- **Glass Navigation Drawer**: Semi-transparent sidebar with backdrop blur +- **Gradient App Bar**: Dark gradient from monaco-red-600 to monaco-red-900 +- **Glass Icon Buttons**: Semi-transparent with hover effects +- **Floating Logo**: Subtle animation on MonacoUSA logo +- **Glass Cards**: Command palette and dropdowns with glass effects + +#### Board Layout (`layouts/board.vue`) +- **Glass Navigation Drawer**: Consistent with admin but lighter gradient +- **Gradient App Bar**: Softer gradient from monaco-red to brown tones +- **Glass Search Dialog**: Search overlay with glass card styling +- **Badge Enhancements**: Gradient badges with subtle shadows + +#### Member Layout (`layouts/member.vue`) +- **Glass Navigation Drawer**: Simplified navigation with glass effects +- **Gradient App Bar**: Lightest gradient for member access level +- **Streamlined Navigation**: Fewer menu items with clear hierarchy + +## Glass Morphism Patterns + +### Core Mixins + +```scss +@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); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: $shadow-glass; +} +``` + +### Component Classes + +#### Glass Cards +- `.glass-card`: Base glass effect card +- `.glass-card--dark`: Dark variant for dark backgrounds +- `.glass-card--colored`: Monaco red tinted glass + +#### Navigation Items +- `.glass-nav-item`: Main navigation items with hover effects +- `.glass-nav-item-sub`: Sub-navigation items with reduced opacity +- Active states include gradient backgrounds and left border accent + +#### Buttons +- `.glass-icon-btn`: Icon buttons with glass effect +- `.monaco-btn--primary`: Primary buttons with Monaco gradient +- `.monaco-btn--glass`: Glass variant buttons + +## Visual Hierarchy + +### Access Level Differentiation +1. **Admin**: Darkest gradients (monaco-red-900 range) +2. **Board**: Medium gradients (monaco-red-700 range) +3. **Member**: Lightest gradients (monaco-red-500 range) + +### Depth & Layering +- Navigation drawer: 95% opacity, 30px blur +- Dropdowns: 95% opacity, 20px blur +- Cards: 80% opacity, 15px blur +- Buttons: 10-20% opacity, 10px blur + +## Animation Patterns + +### Float Animation +```scss +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +``` +Applied to logo for subtle movement. + +### Hover Effects +- Navigation items: translateX(2px) on hover +- Buttons: translateY(-1px) with shadow enhancement +- Cards: translateY(-2px) with increased shadow + +## Color Usage + +### Primary Monaco Red Spectrum +- `#dc2626` - Primary brand color +- `#b91c1c` - Dark accent +- `#ef4444` - Light accent +- `#991b1b` - Deep red for admin +- `#7f1d1d` - Darkest tone + +### Gradients +- **Monaco Gradient**: `linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)` +- **Admin Gradient**: Darker tones for authority +- **Board Gradient**: Balanced mid-tones +- **Member Gradient**: Lighter, welcoming tones + +## Responsive Considerations + +### Breakpoints +- Mobile: < 640px +- Tablet: 640px - 1024px +- Desktop: > 1024px + +### Mobile Optimizations +- Reduced blur effects for performance +- Simplified gradients +- Adjusted spacing and margins +- Auto-closing navigation drawer + +## Performance Optimizations + +### CSS Optimizations +- Hardware acceleration with `transform: translateZ(0)` +- Will-change property for animated elements +- Reduced motion preferences respected + +### Blur Performance +- Limited blur radius to maximum 30px +- Selective application on key elements +- Fallback styles for non-supporting browsers + +## Browser Compatibility + +### Supported Browsers +- Chrome 90+ +- Firefox 88+ +- Safari 14+ +- Edge 90+ + +### Fallbacks +- Solid backgrounds for browsers without backdrop-filter +- Standard box-shadows without blur +- Graceful degradation for older browsers + +## Implementation Checklist + +### Completed +- [x] Global SCSS architecture +- [x] Admin layout glass morphism +- [x] Board layout glass morphism +- [x] Member layout glass morphism +- [x] Monaco color system integration +- [x] Animation patterns +- [x] Responsive design +- [x] Browser compatibility + +### Future Enhancements +- [ ] Component library with glass variants +- [ ] Dark mode glass effects +- [ ] Advanced animation sequences +- [ ] Performance monitoring +- [ ] A/B testing for user preference + +## Usage Guidelines + +### When to Use Glass Effects +1. **Primary UI Elements**: Navigation, headers, cards +2. **Overlays**: Modals, dialogs, dropdowns +3. **Interactive Elements**: Buttons, form fields +4. **Status Indicators**: Badges, chips, alerts + +### When to Avoid +1. **Body Text Areas**: Maintain readability +2. **High-Frequency Updates**: Performance consideration +3. **Critical Actions**: Ensure clarity over aesthetics +4. **Accessibility Concerns**: Provide alternatives + +## Maintenance Notes + +### File Locations +- **SCSS**: `assets/scss/main.scss` +- **Layouts**: `layouts/admin.vue`, `layouts/board.vue`, `layouts/member.vue` +- **Config**: `nuxt.config.ts` (theme configuration) + +### Update Process +1. Modify SCSS variables in main.scss +2. Test across all layouts +3. Verify responsive behavior +4. Check browser compatibility +5. Update this documentation + +## Related Documentation +- [Design System](./design-system.md) +- [Implementation Guide](./README.md) +- [Component Architecture](../components/README.md) + +--- + +*Last Updated: December 2024* +*Implementation Version: 1.0.0* \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..77ccd65 --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,402 @@ +// MonacoUSA Portal - Main Stylesheet +// Based on design-system.md specifications + +// ============================================ +// 1. Variables & Design Tokens +// ============================================ + +// Monaco Red Spectrum +$monaco-red-50: #fef2f2; +$monaco-red-100: #fee2e2; +$monaco-red-200: #fecaca; +$monaco-red-300: #fca5a5; +$monaco-red-400: #f87171; +$monaco-red-500: #ef4444; +$monaco-red-600: #dc2626; // Primary Brand Color +$monaco-red-700: #b91c1c; +$monaco-red-800: #991b1b; +$monaco-red-900: #7f1d1d; + +// Neutral Palette +$gray-50: #fafafa; +$gray-100: #f4f4f5; +$gray-200: #e4e4e7; +$gray-300: #d4d4d8; +$gray-400: #a1a1aa; +$gray-500: #71717a; +$gray-600: #52525b; +$gray-700: #3f3f46; +$gray-800: #27272a; +$gray-900: #18181b; + +// Primary Gradients +$gradient-monaco: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); +$gradient-monaco-light: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); +$gradient-monaco-dark: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%); + +// Accent Gradients +$gradient-sunset: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%); +$gradient-wine: linear-gradient(135deg, #991b1b 0%, #4c1d95 100%); +$gradient-royal: linear-gradient(135deg, #dc2626 0%, #1e40af 100%); + +// Glass Gradients +$gradient-glass-light: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%); +$gradient-glass-dark: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%); + +// Shadows +$shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +$shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); +$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); +$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); +$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +$shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1); +$shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.15); +$shadow-monaco: 0 10px 40px rgba(220, 38, 38, 0.15); +$shadow-monaco-intense: 0 20px 60px rgba(220, 38, 38, 0.25); + +// Border Radius +$radius-sm: 0.125rem; +$radius-base: 0.25rem; +$radius-md: 0.375rem; +$radius-lg: 0.5rem; +$radius-xl: 0.75rem; +$radius-2xl: 1rem; +$radius-3xl: 1.5rem; +$radius-full: 9999px; + +// Timing +$duration-fast: 150ms; +$duration-base: 300ms; +$duration-slow: 500ms; +$duration-slower: 700ms; + +// Easing +$ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); +$ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); +$ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); + +// ============================================ +// 2. Glass Morphism Mixins +// ============================================ + +@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); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: $shadow-glass; +} + +@mixin glass-dark($bg-opacity: 0.7, $blur: 20px) { + background: rgba(0, 0, 0, $bg-opacity); + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: $shadow-glass; +} + +@mixin glass-colored($color: $monaco-red-600, $opacity: 0.1, $blur: 20px) { + background: rgba($color, $opacity); + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + border: 1px solid rgba($color, 0.2); + box-shadow: 0 8px 32px rgba($color, 0.1); +} + +// ============================================ +// 3. Animation Mixins +// ============================================ + +@mixin hover-lift($distance: -2px, $duration: $duration-base) { + transition: transform $duration $ease-smooth, box-shadow $duration $ease-smooth; + + &:hover { + transform: translateY($distance); + box-shadow: $shadow-lg; + } +} + +@mixin hover-scale($scale: 1.05, $duration: $duration-base) { + transition: transform $duration $ease-smooth; + + &:hover { + transform: scale($scale); + } +} + +@mixin float-animation($distance: 10px, $duration: 3s) { + animation: float $duration ease-in-out infinite; + + @keyframes float { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-$distance); + } + } +} + +// ============================================ +// 4. Component Classes +// ============================================ + +// Glass Card +.glass-card { + @include glass-effect(); + border-radius: $radius-2xl; + padding: 1.5rem; + @include hover-lift(-4px); + + &--dark { + @include glass-dark(); + } + + &--colored { + @include glass-colored(); + } +} + +// Monaco Button +.monaco-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.625rem 1.25rem; + font-weight: 500; + font-size: 0.875rem; + line-height: 1.25; + border-radius: $radius-xl; + transition: all $duration-base $ease-smooth; + cursor: pointer; + user-select: none; + border: none; + + &--primary { + background: $gradient-monaco; + color: white; + box-shadow: $shadow-md; + + &:hover:not(:disabled) { + box-shadow: $shadow-monaco; + transform: translateY(-1px); + } + } + + &--glass { + @include glass-effect(0.8, 10px); + color: $monaco-red-600; + + &:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.9); + box-shadow: $shadow-glass-hover; + transform: translateY(-1px); + } + } + + &--ghost { + background: transparent; + color: $monaco-red-600; + border: 2px solid $monaco-red-600; + + &:hover:not(:disabled) { + background: rgba($monaco-red-600, 0.1); + border-color: $monaco-red-700; + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + +// ============================================ +// 5. Layout Enhancements +// ============================================ + +// Navigation Drawer Glass Effect +.v-navigation-drawer { + @include glass-effect(0.95, 30px); + border-right: 1px solid rgba(255, 255, 255, 0.2) !important; + + .v-list-item { + border-radius: $radius-xl; + margin: 0.25rem 0.75rem; + transition: all $duration-base $ease-smooth; + + &:hover { + background: rgba($monaco-red-600, 0.05); + transform: translateX(2px); + } + + &--active { + background: $gradient-glass-light; + color: $monaco-red-600 !important; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 70%; + background: $gradient-monaco; + border-radius: 0 2px 2px 0; + } + + .v-icon { + color: $monaco-red-600 !important; + } + } + } +} + +// App Bar Glass Effect +.v-app-bar { + @include glass-effect(0.9, 20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + + &.admin-bar { + background: linear-gradient(135deg, + rgba($monaco-red-600, 0.95) 0%, + rgba($monaco-red-900, 0.95) 100%) !important; + } + + &.board-bar { + background: linear-gradient(135deg, + rgba($monaco-red-600, 0.9) 0%, + rgba($monaco-red-800, 0.9) 100%) !important; + } + + &.member-bar { + background: $gradient-monaco-light !important; + } +} + +// ============================================ +// 6. Animation Classes +// ============================================ + +@keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slide-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes scale-in { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.animate-fade-in { + animation: fade-in $duration-base $ease-smooth; +} + +.animate-slide-up { + animation: slide-up $duration-base $ease-smooth; +} + +.animate-scale-in { + animation: scale-in $duration-base $ease-smooth; +} + +// ============================================ +// 7. Utility Classes +// ============================================ + +// Glass utilities +.glass { @include glass-effect(); } +.glass-dark { @include glass-dark(); } +.glass-colored { @include glass-colored(); } + +// Shadow utilities +.shadow-monaco { box-shadow: $shadow-monaco; } +.shadow-glass { box-shadow: $shadow-glass; } + +// Gradient utilities +.bg-gradient-monaco { background: $gradient-monaco; } +.bg-gradient-light { background: $gradient-monaco-light; } +.bg-gradient-dark { background: $gradient-monaco-dark; } + +// ============================================ +// 8. Responsive Utilities +// ============================================ + +// Breakpoints +$screen-sm: 640px; +$screen-md: 768px; +$screen-lg: 1024px; +$screen-xl: 1280px; + +@mixin sm { + @media (min-width: $screen-sm) { @content; } +} + +@mixin md { + @media (min-width: $screen-md) { @content; } +} + +@mixin lg { + @media (min-width: $screen-lg) { @content; } +} + +@mixin xl { + @media (min-width: $screen-xl) { @content; } +} + +// ============================================ +// 9. Motion Preferences +// ============================================ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +// ============================================ +// 10. Custom Scrollbar +// ============================================ + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: $radius-full; +} + +::-webkit-scrollbar-thumb { + background: $gradient-monaco; + border-radius: $radius-full; + + &:hover { + background: $gradient-monaco-dark; + } +} \ No newline at end of file diff --git a/layouts/admin.vue b/layouts/admin.vue index 5492b7c..3f2db1f 100644 --- a/layouts/admin.vue +++ b/layouts/admin.vue @@ -1,30 +1,36 @@ @@ -41,19 +48,22 @@ to="/admin/users" title="All Users" value="users-list" + class="glass-nav-item-sub" /> @@ -65,6 +75,7 @@ v-bind="props" prepend-icon="mdi-account-group" title="Member Management" + class="glass-nav-item" /> @@ -72,16 +83,19 @@ to="/admin/members" title="All Members" value="members-list" + class="glass-nav-item-sub" /> @@ -92,6 +106,7 @@ v-bind="props" prepend-icon="mdi-currency-usd" title="Financial" + class="glass-nav-item" /> @@ -99,16 +114,19 @@ to="/admin/payments" title="Payment Management" value="payments" + class="glass-nav-item-sub" /> @@ -119,6 +137,7 @@ v-bind="props" prepend-icon="mdi-cog" title="System" + class="glass-nav-item" /> @@ -126,26 +145,31 @@ to="/admin/settings" title="General Settings" value="settings" + class="glass-nav-item-sub" /> @@ -155,6 +179,7 @@ prepend-icon="mdi-calendar" title="Events Management" value="events" + class="glass-nav-item" /> @@ -163,64 +188,57 @@ prepend-icon="mdi-chart-line" title="Analytics & Insights" value="analytics" + class="glass-nav-item" /> - + - Portal Access + Portal Access - + - - - - + mdi-menu - + Admin Portal FULL ACCESS @@ -228,12 +246,12 @@ - + {{ systemStatus === 'healthy' ? 'mdi-check-circle' : 'mdi-alert' }} @@ -241,16 +259,16 @@ System {{ systemStatus }} - + mdi-console - + - + {{ user?.name || 'Administrator' }} @@ -288,47 +306,46 @@ ADMINISTRATOR - + - + Admin Profile - + Board Portal - + Member Portal - + System Settings - + - + @@ -338,14 +355,14 @@ - + - + - mdi-console + mdi-console Admin Command Palette - + mdi-close @@ -357,23 +374,24 @@ variant="outlined" autofocus @keyup.enter="executeCommand" + class="glass-input" /> -
+
Available commands: clear-cache, rebuild-index, sync-users, export-data
- + - + System Alerts
    @@ -452,60 +470,217 @@ watch(width, (newWidth) => { }, { immediate: true }); - \ No newline at end of file diff --git a/layouts/board.vue b/layouts/board.vue index 448e845..cc46fce 100644 --- a/layouts/board.vue +++ b/layouts/board.vue @@ -1,30 +1,36 @@ @@ -41,22 +48,26 @@ to="/board/members" title="Member Directory" value="member-list" + class="glass-nav-item-sub" /> @@ -69,6 +80,7 @@ v-bind="props" prepend-icon="mdi-calendar" title="Events & Meetings" + class="glass-nav-item" /> @@ -76,16 +88,19 @@ to="/board/events" title="All Events" value="events" + class="glass-nav-item-sub" /> @@ -95,6 +110,7 @@ prepend-icon="mdi-chart-box" title="Reports & Analytics" value="reports" + class="glass-nav-item" /> @@ -103,6 +119,7 @@ prepend-icon="mdi-gavel" title="Governance" value="governance" + class="glass-nav-item" /> @@ -111,67 +128,61 @@ prepend-icon="mdi-email-newsletter" title="Communications" value="communications" + class="glass-nav-item" /> - + - Member Portal + Member Portal - + - - - - + mdi-menu - + Board Portal - + mdi-magnify - + - + {{ user?.name || 'Board Member' }} @@ -209,40 +220,39 @@ BOARD MEMBER - + - + Board Profile - + Member Portal - + Settings - + - + @@ -252,14 +262,14 @@ - + - + - mdi-magnify + mdi-magnify Search Members - + mdi-close @@ -271,12 +281,13 @@ variant="outlined" autofocus @keyup.enter="performSearch" + class="glass-input" /> - + @@ -339,47 +350,99 @@ watch(width, (newWidth) => { }, { immediate: true }); - \ No newline at end of file diff --git a/layouts/member.vue b/layouts/member.vue index f85ed46..8830487 100644 --- a/layouts/member.vue +++ b/layouts/member.vue @@ -1,29 +1,35 @@