/*! * Solanke Themes - Professional Color Themes Library * Version: 1.2.0 (Universal Theme System) * Author: Saurabh Solanke * License: MIT * Description: A complete CSS framework with universal theme system - just add colors! * * ✨ NEW: Universal Theme System ✨ * Define any theme with just 12 color variables (6 for light, 6 for dark) * Everything else adapts automatically - no CSS changes needed! * * Features: * - Universal theme system - add unlimited themes easily * - Three professional themes included (Luxury Green, Corporate Blue, Shadcn) * - Consistent brightness/intensity across ALL themes * - Full dark mode support for every theme * - Complete layout system with sidebar & navbar * - Bootstrap-inspired components * - Typography utilities & animations * - Form components & responsive design * - Cards, Lists, Accordions & more * - No dependencies required * * Usage: * 1. Include this CSS file in your project * 2. Add data-color-theme="luxury" or "corporate" or "shadcn" to your tag * 3. Add class="dark" to for dark mode * 4. Add data-theme-enabled to tag * 5. Use utility classes throughout your project * * Adding Custom Themes: * Just define 6 variables for light mode + 6 for dark mode at the top of this file * See the included themes as examples - it's that easy! * * CDN: https://cdn.jsdelivr.net/npm/solanke-themes@latest/solanke-themes.css */ /* ======================================== Theme Variables ======================================== */ /* * THEME STRUCTURE: * Each theme needs 6 color variables for light mode and 6 for dark mode * * --theme-darkest: Darkest color (text in light mode, becomes lightest in dark mode) * --theme-dark: Dark color (secondary text) * --theme-sage: Medium color (interactive elements, accents) * --theme-mint: Light color (borders, subtle backgrounds) * --theme-cream: Lightest color (backgrounds in light mode, becomes darkest in dark mode) * --theme-accent: Accent color (highlights, focus states) */ :root { /* Default: Luxury Green Theme */ --theme-darkest: #0D2B1D; --theme-dark: #345635; --theme-sage: #6B8F71; --theme-mint: #AEC3B0; --theme-cream: #E3EFD3; --theme-accent: #6B8F71; } /* ============================================ LUXURY GREEN THEME ============================================ */ /* Luxury Green - Light Mode */ :root[data-color-theme="luxury"] { --theme-darkest: #0D2B1D; /* Deep forest green - Text */ --theme-dark: #345635; /* Dark green - Secondary text */ --theme-sage: #6B8F71; /* Sage green - Interactive elements */ --theme-mint: #AEC3B0; /* Mint green - Borders/subtle */ --theme-cream: #E3EFD3; /* Light cream - Background */ --theme-accent: #6B8F71; /* Sage green - Accent */ } /* Luxury Green - Dark Mode */ :root[data-color-theme="luxury"].dark { --theme-darkest: #E3EFD3; /* Light cream - Now text color */ --theme-dark: #0D2B1D; /* Deep forest - Now dark background */ --theme-sage: #6B8F71; /* Sage green - Stays for consistency */ --theme-mint: #345635; /* Dark green - Now borders */ --theme-cream: #1a3a28; /* Dark green surface - Card backgrounds */ --theme-accent: #8fae94; /* Lighter sage - Better for dark mode */ } /* ============================================ CORPORATE BLUE THEME ============================================ */ /* Corporate Blue - Light Mode */ :root[data-color-theme="corporate"] { --theme-darkest: #1a2c42; /* Deep navy blue - Text */ --theme-dark: #2d4a63; /* Dark blue-gray - Secondary text */ --theme-sage: #5b7a94; /* Steel blue - Interactive elements */ --theme-mint: #a3b8cc; /* Light blue-gray - Borders/subtle */ --theme-cream: #e8f0f7; /* Soft blue-white - Background */ --theme-accent: #3498db; /* Bright blue - Accent */ } /* Corporate Blue - Dark Mode */ :root[data-color-theme="corporate"].dark { --theme-darkest: #e8f0f7; /* Soft blue-white - Now text color */ --theme-dark: #1a2c42; /* Deep navy - Now dark background */ --theme-sage: #5b7a94; /* Steel blue - Stays for consistency */ --theme-mint: #2d4a63; /* Dark blue - Now borders */ --theme-cream: #233649; /* Dark blue surface - Card backgrounds */ --theme-accent: #5dade2; /* Lighter blue - Better for dark mode */ } /* ============================================ SHADCN BLACK & WHITE THEME ============================================ */ /* Shadcn - Light Mode */ :root[data-color-theme="shadcn"] { --theme-darkest: #0a0a0a; /* Almost black - Text */ --theme-dark: #171717; /* Dark gray - Secondary text */ --theme-sage: #525252; /* Medium gray - Interactive elements */ --theme-mint: #a3a3a3; /* Light gray - Borders/subtle */ --theme-cream: #fafafa; /* Off white - Background */ --theme-accent: #737373; /* Mid gray - Accent */ } /* Shadcn - Dark Mode */ :root[data-color-theme="shadcn"].dark { --theme-darkest: #fafafa; /* Off white - Now text color */ --theme-dark: #0a0a0a; /* Almost black - Now dark background */ --theme-sage: #737373; /* Mid gray - Stays for consistency */ --theme-mint: #404040; /* Dark gray - Now borders */ --theme-cream: #171717; /* Dark surface - Card backgrounds */ --theme-accent: #a3a3a3; /* Light gray - Better for dark mode */ } /* ======================================== Base Body Styles ======================================== */ /* Base Reset */ * { box-sizing: border-box; } body[data-theme-enabled] { margin: 0; padding: 0; background-color: var(--theme-cream); color: var(--theme-darkest); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; } body[data-theme-enabled].dark { background-color: var(--theme-darkest); color: var(--theme-cream); } /* ======================================== Background Colors ======================================== */ .bg-theme-darkest { background-color: var(--theme-darkest) !important; } .bg-theme-dark { background-color: var(--theme-dark) !important; } .bg-theme-sage { background-color: var(--theme-sage) !important; } .bg-theme-mint { background-color: var(--theme-mint) !important; } .bg-theme-cream { background-color: var(--theme-cream) !important; } .bg-theme-accent { background-color: var(--theme-accent) !important; } /* Background with opacity */ .bg-theme-darkest-80 { background-color: color-mix(in srgb, var(--theme-darkest) 80%, transparent) !important; } .bg-theme-darkest-60 { background-color: color-mix(in srgb, var(--theme-darkest) 60%, transparent) !important; } .bg-theme-darkest-40 { background-color: color-mix(in srgb, var(--theme-darkest) 40%, transparent) !important; } .bg-theme-darkest-20 { background-color: color-mix(in srgb, var(--theme-darkest) 20%, transparent) !important; } .bg-theme-dark-80 { background-color: color-mix(in srgb, var(--theme-dark) 80%, transparent) !important; } .bg-theme-dark-60 { background-color: color-mix(in srgb, var(--theme-dark) 60%, transparent) !important; } .bg-theme-dark-40 { background-color: color-mix(in srgb, var(--theme-dark) 40%, transparent) !important; } .bg-theme-dark-20 { background-color: color-mix(in srgb, var(--theme-dark) 20%, transparent) !important; } .bg-theme-sage-60 { background-color: color-mix(in srgb, var(--theme-sage) 60%, transparent) !important; } .bg-theme-sage-40 { background-color: color-mix(in srgb, var(--theme-sage) 40%, transparent) !important; } .bg-theme-sage-20 { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent) !important; } .bg-theme-sage-10 { background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent) !important; } .bg-theme-mint-60 { background-color: color-mix(in srgb, var(--theme-mint) 60%, transparent) !important; } .bg-theme-mint-40 { background-color: color-mix(in srgb, var(--theme-mint) 40%, transparent) !important; } .bg-theme-mint-20 { background-color: color-mix(in srgb, var(--theme-mint) 20%, transparent) !important; } .bg-theme-mint-10 { background-color: color-mix(in srgb, var(--theme-mint) 10%, transparent) !important; } .bg-theme-cream-80 { background-color: color-mix(in srgb, var(--theme-cream) 80%, transparent) !important; } .bg-theme-cream-60 { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent) !important; } .bg-theme-cream-40 { background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent) !important; } .bg-theme-cream-20 { background-color: color-mix(in srgb, var(--theme-cream) 20%, transparent) !important; } /* Transparent background */ .bg-transparent { background-color: transparent !important; } /* ======================================== Text Colors ======================================== */ .text-theme-darkest { color: var(--theme-darkest) !important; } .text-theme-dark { color: var(--theme-dark) !important; } .text-theme-sage { color: var(--theme-sage) !important; } .text-theme-mint { color: var(--theme-mint) !important; } .text-theme-cream { color: var(--theme-cream) !important; } .text-theme-accent { color: var(--theme-accent) !important; } /* Text with opacity */ .text-theme-darkest-80 { color: color-mix(in srgb, var(--theme-darkest) 80%, transparent) !important; } .text-theme-darkest-60 { color: color-mix(in srgb, var(--theme-darkest) 60%, transparent) !important; } .text-theme-dark-80 { color: color-mix(in srgb, var(--theme-dark) 80%, transparent) !important; } .text-theme-dark-60 { color: color-mix(in srgb, var(--theme-dark) 60%, transparent) !important; } .text-theme-sage-80 { color: color-mix(in srgb, var(--theme-sage) 80%, transparent) !important; } .text-theme-mint-80 { color: color-mix(in srgb, var(--theme-mint) 80%, transparent) !important; } .text-theme-mint-60 { color: color-mix(in srgb, var(--theme-mint) 60%, transparent) !important; } /* ======================================== Border Colors ======================================== */ .border-theme-darkest { border-color: var(--theme-darkest) !important; } .border-theme-dark { border-color: var(--theme-dark) !important; } .border-theme-sage { border-color: var(--theme-sage) !important; } .border-theme-mint { border-color: var(--theme-mint) !important; } .border-theme-cream { border-color: var(--theme-cream) !important; } .border-theme-accent { border-color: var(--theme-accent) !important; } /* Border with opacity */ .border-theme-sage-50 { border-color: color-mix(in srgb, var(--theme-sage) 50%, transparent) !important; } .border-theme-sage-30 { border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent) !important; } .border-theme-mint-50 { border-color: color-mix(in srgb, var(--theme-mint) 50%, transparent) !important; } .border-theme-mint-30 { border-color: color-mix(in srgb, var(--theme-mint) 30%, transparent) !important; } .border-theme-dark-50 { border-color: color-mix(in srgb, var(--theme-dark) 50%, transparent) !important; } /* ======================================== Gradient Utilities ======================================== */ .gradient-theme-primary { background: linear-gradient(180deg, var(--theme-darkest) 0%, var(--theme-sage) 50%, var(--theme-mint) 100%); } .gradient-theme-secondary { background: linear-gradient(180deg, var(--theme-sage) 0%, var(--theme-mint) 100%); } .gradient-theme-accent { background: linear-gradient(180deg, var(--theme-accent) 0%, var(--theme-sage) 100%); } /* Text gradients */ .text-gradient-theme { background: linear-gradient(180deg, var(--theme-darkest) 0%, var(--theme-sage) 50%, var(--theme-mint) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Glass Effect (Liquid Glass Design) ======================================== */ .glass-theme { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-sage) 15%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--theme-cream) 50%, transparent), inset 0 -1px 0 0 color-mix(in srgb, var(--theme-mint) 10%, transparent); } .dark .glass-theme { background-color: color-mix(in srgb, var(--theme-dark) 40%, transparent); border: 1px solid color-mix(in srgb, var(--theme-sage) 30%, transparent); box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-darkest) 30%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--theme-sage) 10%, transparent), inset 0 -1px 0 0 color-mix(in srgb, var(--theme-sage) 5%, transparent); } /* ======================================== Button Styles ======================================== */ /* Base Button */ .btn { display: inline-block; font-weight: 600; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.75rem 1.5rem; font-size: 1rem; line-height: 1.5; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Button Primary */ .btn-primary { background: linear-gradient(180deg, var(--theme-dark) 0%, var(--theme-sage) 100%); color: var(--theme-cream); border: none; } .btn-primary:hover { box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-sage) 30%, transparent); } /* Button Secondary */ .btn-secondary { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); backdrop-filter: blur(10px); } .btn-secondary:hover { background-color: var(--theme-cream); } .dark .btn-secondary { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .btn-secondary:hover { background-color: color-mix(in srgb, var(--theme-cream) 80%, transparent); } /* Button Success */ .btn-success { background-color: var(--theme-sage); color: var(--theme-cream); border: none; } .btn-success:hover { filter: brightness(1.1); box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-sage) 30%, transparent); } /* Button Danger */ .btn-danger { background-color: #dc3545; color: white; border: none; } .btn-danger:hover { background-color: #c82333; box-shadow: 0 10px 20px rgba(220, 53, 69, 0.3); } /* Button Warning */ .btn-warning { background-color: var(--theme-accent); color: white; border: none; } .btn-warning:hover { filter: brightness(1.1); box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-accent) 30%, transparent); } /* Button Info */ .btn-info { background-color: var(--theme-mint); color: var(--theme-darkest); border: none; } .btn-info:hover { filter: brightness(0.95); box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-mint) 30%, transparent); } /* Button Light */ .btn-light { background-color: var(--theme-cream); color: var(--theme-darkest); border: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); } .btn-light:hover { background-color: var(--theme-mint); } /* Button Dark */ .btn-dark { background-color: var(--theme-darkest); color: var(--theme-cream); border: none; } .btn-dark:hover { background-color: var(--theme-dark); } /* Legacy Theme Buttons */ .btn-theme-primary { background: linear-gradient(180deg, var(--theme-dark) 0%, var(--theme-sage) 100%); color: var(--theme-cream); padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: none; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-theme-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-sage) 30%, transparent); } .btn-theme-secondary { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); font-weight: 600; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease; } .btn-theme-secondary:hover { background-color: var(--theme-cream); transform: translateY(-2px); } .btn-theme-accent { background-color: var(--theme-accent); color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: none; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-theme-accent:hover { filter: brightness(1.1); transform: translateY(-2px); } /* ======================================== Card Components (Bootstrap-inspired) ======================================== */ /* Base Card */ .card-theme { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-sage) 15%, transparent); transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; word-wrap: break-word; } .dark .card-theme { background-color: color-mix(in srgb, var(--theme-dark) 40%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .card-theme:hover { transform: translateY(-4px); box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--theme-sage) 25%, transparent); } /* Alias: .card for compatibility */ .card { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-sage) 15%, transparent); transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; word-wrap: break-word; } .dark .card { background-color: color-mix(in srgb, var(--theme-dark) 40%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px 0 color-mix(in srgb, var(--theme-sage) 25%, transparent); } /* Card Sections */ .card-header { padding: 1rem 1.5rem; margin: -1.5rem -1.5rem 1.5rem -1.5rem; background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 1.5rem 1.5rem 0 0; font-weight: 600; color: var(--theme-darkest); } .card-header h3 { margin: 0; font-size: 1.25rem; font-weight: 600; } .card-body { flex: 1 1 auto; padding: 0; } .card-body p { margin: 0.5rem 0; color: var(--theme-dark); } .card-body strong { font-weight: 600; color: var(--theme-darkest); } .card-footer { padding: 1rem 1.5rem; margin: 1.5rem -1.5rem -1.5rem -1.5rem; background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0 0 1.5rem 1.5rem; } .dark .card-header, .dark .card-footer { background-color: color-mix(in srgb, var(--theme-dark) 80%, transparent); color: var(--theme-darkest); } .dark .card-header h3 { color: var(--theme-darkest); } .dark .card-body p { color: var(--theme-darkest); opacity: 0.9; } .dark .card-body strong { color: var(--theme-darkest); } .dark .card-subtitle { color: var(--theme-accent); } .dark .card-text { color: var(--theme-darkest); } /* Card Title & Text */ .card-title { margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; color: var(--theme-darkest); } .dark .card-title { color: var(--theme-darkest); } .card-subtitle { margin-top: -0.375rem; margin-bottom: 0.5rem; color: var(--theme-dark); font-size: 0.875rem; } .card-text { color: var(--theme-dark); margin-bottom: 1rem; } .card-text:last-child { margin-bottom: 0; } /* Card Image */ .card-img-top { width: 100%; border-radius: 1.5rem 1.5rem 0 0; margin: -1.5rem -1.5rem 1.5rem -1.5rem; } .card-img-bottom { width: 100%; border-radius: 0 0 1.5rem 1.5rem; margin: 1.5rem -1.5rem -1.5rem -1.5rem; } .card-img-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.5rem; border-radius: 1.5rem; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--theme-darkest) 70%, transparent) 100%); color: var(--theme-cream); } /* Card Variants */ .card-outline { background-color: transparent; border: 2px solid var(--theme-sage); backdrop-filter: none; } .card-solid { background-color: var(--theme-cream); backdrop-filter: none; } .dark .card-solid { background-color: var(--theme-dark); } /* Horizontal Card */ .card-horizontal { flex-direction: row; } .card-horizontal .card-img-top { width: 40%; border-radius: 1.5rem 0 0 1.5rem; margin: -1.5rem 1.5rem -1.5rem -1.5rem; } @media (max-width: 768px) { .card-horizontal { flex-direction: column; } .card-horizontal .card-img-top { width: 100%; border-radius: 1.5rem 1.5rem 0 0; margin: -1.5rem -1.5rem 1.5rem -1.5rem; } } /* Card Groups */ .card-group { display: flex; flex-flow: row wrap; gap: 1.5rem; } .card-group > .card-theme { flex: 1 0 0%; margin-bottom: 0; } @media (max-width: 768px) { .card-group { flex-direction: column; } } /* Card Grid */ .card-columns { column-count: 3; column-gap: 1.5rem; } .card-columns .card-theme { display: inline-block; width: 100%; margin-bottom: 1.5rem; } @media (max-width: 992px) { .card-columns { column-count: 2; } } @media (max-width: 576px) { .card-columns { column-count: 1; } } /* Card List Group */ .card-list-group { list-style: none; padding: 0; margin: -1.5rem; } .card-list-item { padding: 0.75rem 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); } .card-list-item:first-child { border-radius: 1.5rem 1.5rem 0 0; } .card-list-item:last-child { border-bottom: none; border-radius: 0 0 1.5rem 1.5rem; } .card-list-item:hover { background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); } /* ======================================== Badge Components ======================================== */ .badge-theme-primary { background-color: var(--theme-sage); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; display: inline-block; } .badge-theme-secondary { background-color: color-mix(in srgb, var(--theme-mint) 40%, transparent); color: var(--theme-darkest); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; display: inline-block; border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); } .badge-theme-accent { background-color: var(--theme-accent); color: white; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; display: inline-block; } /* ======================================== Alert Components ======================================== */ .alert-theme-info { background-color: color-mix(in srgb, var(--theme-mint) 20%, transparent); border-left: 4px solid var(--theme-sage); padding: 1rem; border-radius: 0.5rem; color: var(--theme-darkest); } .dark .alert-theme-info { background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); color: var(--theme-darkest); } .alert-theme-success { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); border-left: 4px solid var(--theme-sage); padding: 1rem; border-radius: 0.5rem; color: var(--theme-darkest); } .dark .alert-theme-success { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); color: var(--theme-darkest); } .alert-theme-warning { background-color: color-mix(in srgb, var(--theme-accent) 20%, transparent); border-left: 4px solid var(--theme-accent); padding: 1rem; border-radius: 0.5rem; color: var(--theme-darkest); } /* ======================================== Utility Classes ======================================== */ .shadow-theme-sm { box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-sage) 10%, transparent); } .shadow-theme-md { box-shadow: 0 4px 16px color-mix(in srgb, var(--theme-sage) 15%, transparent); } .shadow-theme-lg { box-shadow: 0 8px 32px color-mix(in srgb, var(--theme-sage) 20%, transparent); } .shadow-theme-xl { box-shadow: 0 12px 48px color-mix(in srgb, var(--theme-sage) 25%, transparent); } /* Hover effects */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-sage) 20%, transparent); } /* ======================================== Animations ======================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out; } /* Animation Delays */ .delay-200 { animation-delay: 0.2s !important; } .delay-300 { animation-delay: 0.3s !important; } .delay-400 { animation-delay: 0.4s !important; } .delay-500 { animation-delay: 0.5s !important; } .delay-600 { animation-delay: 0.6s !important; } .delay-800 { animation-delay: 0.8s !important; } .delay-1000 { animation-delay: 1s !important; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .animate-slide-in { animation: slideIn 0.6s ease-out; } @keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .animate-slide-in-right { animation: slideInRight 0.6s ease-out; } @keyframes slideInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slideInUp 0.6s ease-out; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } .animate-bounce { animation: bounce 2s infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s ease-in-out infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } @keyframes scaleUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .animate-scale-up { animation: scaleUp 0.3s ease-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .animate-shake { animation: shake 0.5s ease-in-out; } /* ======================================== AOS (Animate On Scroll) System ======================================== */ /* Base AOS Setup */ [data-aos] { pointer-events: auto; transition-property: transform, opacity; transition-duration: 600ms; transition-timing-function: ease; opacity: 0; } [data-aos].aos-animate { opacity: 1; } /* AOS Fade Animations */ [data-aos="fade-up"] { transform: translateY(100px); } [data-aos="fade-up"].aos-animate { transform: translateY(0); } [data-aos="fade-down"] { transform: translateY(-100px); } [data-aos="fade-down"].aos-animate { transform: translateY(0); } [data-aos="fade-left"] { transform: translateX(100px); } [data-aos="fade-left"].aos-animate { transform: translateX(0); } [data-aos="fade-right"] { transform: translateX(-100px); } [data-aos="fade-right"].aos-animate { transform: translateX(0); } [data-aos="fade-up-right"] { transform: translate(-100px, 100px); } [data-aos="fade-up-right"].aos-animate { transform: translate(0, 0); } [data-aos="fade-up-left"] { transform: translate(100px, 100px); } [data-aos="fade-up-left"].aos-animate { transform: translate(0, 0); } [data-aos="fade-down-right"] { transform: translate(-100px, -100px); } [data-aos="fade-down-right"].aos-animate { transform: translate(0, 0); } [data-aos="fade-down-left"] { transform: translate(100px, -100px); } [data-aos="fade-down-left"].aos-animate { transform: translate(0, 0); } /* AOS Zoom Animations */ [data-aos="zoom-in"] { transform: scale(0.6); } [data-aos="zoom-in"].aos-animate { transform: scale(1); } [data-aos="zoom-in-up"] { transform: scale(0.6) translateY(100px); } [data-aos="zoom-in-up"].aos-animate { transform: scale(1) translateY(0); } [data-aos="zoom-in-down"] { transform: scale(0.6) translateY(-100px); } [data-aos="zoom-in-down"].aos-animate { transform: scale(1) translateY(0); } [data-aos="zoom-in-left"] { transform: scale(0.6) translateX(100px); } [data-aos="zoom-in-left"].aos-animate { transform: scale(1) translateX(0); } [data-aos="zoom-in-right"] { transform: scale(0.6) translateX(-100px); } [data-aos="zoom-in-right"].aos-animate { transform: scale(1) translateX(0); } [data-aos="zoom-out"] { transform: scale(1.2); } [data-aos="zoom-out"].aos-animate { transform: scale(1); } [data-aos="zoom-out-up"] { transform: scale(1.2) translateY(100px); } [data-aos="zoom-out-up"].aos-animate { transform: scale(1) translateY(0); } [data-aos="zoom-out-down"] { transform: scale(1.2) translateY(-100px); } [data-aos="zoom-out-down"].aos-animate { transform: scale(1) translateY(0); } [data-aos="zoom-out-left"] { transform: scale(1.2) translateX(100px); } [data-aos="zoom-out-left"].aos-animate { transform: scale(1) translateX(0); } [data-aos="zoom-out-right"] { transform: scale(1.2) translateX(-100px); } [data-aos="zoom-out-right"].aos-animate { transform: scale(1) translateX(0); } /* AOS Flip Animations */ [data-aos="flip-up"] { transform: perspective(2500px) rotateX(-100deg); } [data-aos="flip-up"].aos-animate { transform: perspective(2500px) rotateX(0); } [data-aos="flip-down"] { transform: perspective(2500px) rotateX(100deg); } [data-aos="flip-down"].aos-animate { transform: perspective(2500px) rotateX(0); } [data-aos="flip-left"] { transform: perspective(2500px) rotateY(100deg); } [data-aos="flip-left"].aos-animate { transform: perspective(2500px) rotateY(0); } [data-aos="flip-right"] { transform: perspective(2500px) rotateY(-100deg); } [data-aos="flip-right"].aos-animate { transform: perspective(2500px) rotateY(0); } /* AOS Slide Animations */ [data-aos="slide-up"] { transform: translateY(100%); opacity: 1; } [data-aos="slide-up"].aos-animate { transform: translateY(0); } [data-aos="slide-down"] { transform: translateY(-100%); opacity: 1; } [data-aos="slide-down"].aos-animate { transform: translateY(0); } [data-aos="slide-left"] { transform: translateX(100%); opacity: 1; } [data-aos="slide-left"].aos-animate { transform: translateX(0); } [data-aos="slide-right"] { transform: translateX(-100%); opacity: 1; } [data-aos="slide-right"].aos-animate { transform: translateX(0); } /* AOS Duration Settings */ [data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { transition-duration: 50ms; } [data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { transition-duration: 100ms; } [data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { transition-duration: 150ms; } [data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { transition-duration: 200ms; } [data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { transition-duration: 250ms; } [data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { transition-duration: 300ms; } [data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { transition-duration: 350ms; } [data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { transition-duration: 400ms; } [data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { transition-duration: 450ms; } [data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { transition-duration: 500ms; } [data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { transition-duration: 550ms; } [data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { transition-duration: 600ms; } [data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { transition-duration: 650ms; } [data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { transition-duration: 700ms; } [data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { transition-duration: 750ms; } [data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { transition-duration: 800ms; } [data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { transition-duration: 850ms; } [data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { transition-duration: 900ms; } [data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { transition-duration: 950ms; } [data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: 1000ms; } [data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { transition-duration: 1050ms; } [data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { transition-duration: 1100ms; } [data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { transition-duration: 1150ms; } [data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1200ms; } [data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { transition-duration: 1250ms; } [data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { transition-duration: 1300ms; } [data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { transition-duration: 1350ms; } [data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { transition-duration: 1400ms; } [data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { transition-duration: 1450ms; } [data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { transition-duration: 1500ms; } [data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { transition-duration: 1550ms; } [data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { transition-duration: 1600ms; } [data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { transition-duration: 1650ms; } [data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { transition-duration: 1700ms; } [data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { transition-duration: 1750ms; } [data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { transition-duration: 1800ms; } [data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { transition-duration: 1850ms; } [data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { transition-duration: 1900ms; } [data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { transition-duration: 1950ms; } [data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2000ms; } [data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { transition-duration: 2500ms; } [data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { transition-duration: 3000ms; } /* AOS Delay Settings */ [data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { transition-delay: 50ms; } [data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { transition-delay: 100ms; } [data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { transition-delay: 150ms; } [data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { transition-delay: 200ms; } [data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { transition-delay: 250ms; } [data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { transition-delay: 300ms; } [data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { transition-delay: 350ms; } [data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { transition-delay: 400ms; } [data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { transition-delay: 450ms; } [data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { transition-delay: 500ms; } [data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { transition-delay: 550ms; } [data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { transition-delay: 600ms; } [data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { transition-delay: 650ms; } [data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { transition-delay: 700ms; } [data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { transition-delay: 750ms; } [data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { transition-delay: 800ms; } [data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { transition-delay: 850ms; } [data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { transition-delay: 900ms; } [data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { transition-delay: 950ms; } [data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { transition-delay: 1000ms; } [data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { transition-delay: 1500ms; } [data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { transition-delay: 2000ms; } [data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { transition-delay: 2500ms; } [data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { transition-delay: 3000ms; } /* AOS Easing Functions */ [data-aos][data-aos-easing="linear"], body[data-aos-easing="linear"] [data-aos] { transition-timing-function: linear; } [data-aos][data-aos-easing="ease"], body[data-aos-easing="ease"] [data-aos] { transition-timing-function: ease; } [data-aos][data-aos-easing="ease-in"], body[data-aos-easing="ease-in"] [data-aos] { transition-timing-function: ease-in; } [data-aos][data-aos-easing="ease-out"], body[data-aos-easing="ease-out"] [data-aos] { transition-timing-function: ease-out; } [data-aos][data-aos-easing="ease-in-out"], body[data-aos-easing="ease-in-out"] [data-aos] { transition-timing-function: ease-in-out; } [data-aos][data-aos-easing="ease-in-back"], body[data-aos-easing="ease-in-back"] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [data-aos][data-aos-easing="ease-out-back"], body[data-aos-easing="ease-out-back"] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-aos][data-aos-easing="ease-in-out-back"], body[data-aos-easing="ease-in-out-back"] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [data-aos][data-aos-easing="ease-in-sine"], body[data-aos-easing="ease-in-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [data-aos][data-aos-easing="ease-out-sine"], body[data-aos-easing="ease-out-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [data-aos][data-aos-easing="ease-in-out-sine"], body[data-aos-easing="ease-in-out-sine"] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [data-aos][data-aos-easing="ease-in-quad"], body[data-aos-easing="ease-in-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos-easing="ease-out-quad"], body[data-aos-easing="ease-out-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos-easing="ease-in-out-quad"], body[data-aos-easing="ease-in-out-quad"] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos-easing="ease-in-cubic"], body[data-aos-easing="ease-in-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } [data-aos][data-aos-easing="ease-out-cubic"], body[data-aos-easing="ease-out-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } [data-aos][data-aos-easing="ease-in-out-cubic"], body[data-aos-easing="ease-in-out-cubic"] [data-aos] { transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } [data-aos][data-aos-easing="ease-in-quart"], body[data-aos-easing="ease-in-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } [data-aos][data-aos-easing="ease-out-quart"], body[data-aos-easing="ease-out-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } [data-aos][data-aos-easing="ease-in-out-quart"], body[data-aos-easing="ease-in-out-quart"] [data-aos] { transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } /* ======================================== Layout - Container ======================================== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .container-sm { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 1rem; } .container-md { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 1rem; } .container-lg { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 1rem; } .container-xl { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; } .container-full { width: 100%; padding: 0 1rem; } /* ======================================== Layout - Section ======================================== */ .section { padding: 6rem 2rem; } .section-sm { padding: 4rem 2rem; } .section-lg { padding: 8rem 2rem; } .section-xl { padding: 12rem 2rem; } /* ======================================== Flexbox Utilities ======================================== */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-initial { flex: 0 1 auto; } .flex-none { flex: none; } /* Justify Content */ .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } /* Align Items */ .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } /* Gap */ .gap-0 { gap: 0; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; } /* Space Between */ .space-y-4 > * + * { margin-top: 1rem !important; } /* ======================================== Grid Utilities ======================================== */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Responsive Grid Helpers */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ======================================== Spacing - Margin ======================================== */ .m-0 { margin: 0 !important; } .m-1 { margin: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .m-3 { margin: 0.75rem !important; } .m-4 { margin: 1rem !important; } .m-5 { margin: 1.25rem !important; } .m-6 { margin: 1.5rem !important; } .m-8 { margin: 2rem !important; } .m-10 { margin: 2.5rem !important; } .m-12 { margin: 3rem !important; } .m-16 { margin: 4rem !important; } .m-20 { margin: 5rem !important; } .m-auto { margin: auto !important; } /* Margin X-axis */ .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-3 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-6 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-8 { margin-left: 2rem !important; margin-right: 2rem !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } /* Margin Y-axis */ .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } .my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; } .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-8 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .my-12 { margin-top: 3rem !important; margin-bottom: 3rem !important; } .my-16 { margin-top: 4rem !important; margin-bottom: 4rem !important; } /* Margin Top */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mt-8 { margin-top: 2rem !important; } .mt-12 { margin-top: 3rem !important; } .mt-16 { margin-top: 4rem !important; } /* Margin Bottom */ .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mb-8 { margin-bottom: 2rem !important; } .mb-12 { margin-bottom: 3rem !important; } .mb-16 { margin-bottom: 4rem !important; } /* Margin Left */ .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: 0.25rem !important; } .ml-2 { margin-left: 0.5rem !important; } .ml-3 { margin-left: 0.75rem !important; } .ml-4 { margin-left: 1rem !important; } .ml-6 { margin-left: 1.5rem !important; } .ml-8 { margin-left: 2rem !important; } .ml-auto { margin-left: auto !important; } /* Margin Right */ .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: 0.25rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mr-3 { margin-right: 0.75rem !important; } .mr-4 { margin-right: 1rem !important; } .mr-6 { margin-right: 1.5rem !important; } .mr-8 { margin-right: 2rem !important; } .mr-auto { margin-right: auto !important; } /* ======================================== Spacing - Padding ======================================== */ .p-0 { padding: 0 !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.25rem !important; } .p-6 { padding: 1.5rem !important; } .p-8 { padding: 2rem !important; } .p-10 { padding: 2.5rem !important; } .p-12 { padding: 3rem !important; } .p-16 { padding: 4rem !important; } .p-20 { padding: 5rem !important; } /* Padding X-axis */ .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-12 { padding-left: 3rem !important; padding-right: 3rem !important; } /* Padding Y-axis */ .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } /* Padding Top */ .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 0.25rem !important; } .pt-2 { padding-top: 0.5rem !important; } .pt-3 { padding-top: 0.75rem !important; } .pt-4 { padding-top: 1rem !important; } .pt-6 { padding-top: 1.5rem !important; } .pt-8 { padding-top: 2rem !important; } .pt-12 { padding-top: 3rem !important; } .pt-16 { padding-top: 4rem !important; } /* Padding Bottom */ .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 0.25rem !important; } .pb-2 { padding-bottom: 0.5rem !important; } .pb-3 { padding-bottom: 0.75rem !important; } .pb-4 { padding-bottom: 1rem !important; } .pb-6 { padding-bottom: 1.5rem !important; } .pb-8 { padding-bottom: 2rem !important; } .pb-12 { padding-bottom: 3rem !important; } .pb-16 { padding-bottom: 4rem !important; } /* Padding Left */ .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: 0.25rem !important; } .pl-2 { padding-left: 0.5rem !important; } .pl-3 { padding-left: 0.75rem !important; } .pl-4 { padding-left: 1rem !important; } .pl-6 { padding-left: 1.5rem !important; } .pl-8 { padding-left: 2rem !important; } .pl-12 { padding-left: 3rem !important; } /* Padding Right */ .pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: 0.25rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pr-3 { padding-right: 0.75rem !important; } .pr-4 { padding-right: 1rem !important; } .pr-6 { padding-right: 1.5rem !important; } .pr-8 { padding-right: 2rem !important; } /* ======================================== Typography ======================================== */ /* Font Sizes */ .text-xs { font-size: 0.75rem !important; line-height: 1rem; } .text-sm { font-size: 0.875rem !important; line-height: 1.25rem; } .text-base { font-size: 1rem !important; line-height: 1.5rem; } .text-lg { font-size: 1.125rem !important; line-height: 1.75rem; } .text-xl { font-size: 1.25rem !important; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem !important; line-height: 2rem; } .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; } .text-5xl { font-size: 3rem !important; line-height: 1; } .text-6xl { font-size: 3.75rem !important; line-height: 1; } .text-7xl { font-size: 4.5rem !important; line-height: 1; } .text-8xl { font-size: 6rem !important; line-height: 1; } .text-9xl { font-size: 8rem !important; line-height: 1; } /* Font Weights */ .font-thin { font-weight: 100 !important; } .font-extralight { font-weight: 200 !important; } .font-light { font-weight: 300 !important; } .font-normal { font-weight: 400 !important; } .font-medium { font-weight: 500 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .font-extrabold { font-weight: 800 !important; } .font-black { font-weight: 900 !important; } /* Text Alignment */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-justify { text-align: justify !important; } /* Text Transform */ .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .capitalize { text-transform: capitalize !important; } .normal-case { text-transform: none !important; } /* Text Decoration */ .underline { text-decoration: underline !important; } .line-through { text-decoration: line-through !important; } .no-underline { text-decoration: none !important; } /* Word Break */ .break-all { word-break: break-all !important; } .break-words { word-break: break-word !important; } /* Line Height */ .leading-none { line-height: 1 !important; } .leading-tight { line-height: 1.25 !important; } .leading-snug { line-height: 1.375 !important; } .leading-normal { line-height: 1.5 !important; } .leading-relaxed { line-height: 1.625 !important; } .leading-loose { line-height: 2 !important; } /* Letter Spacing */ .tracking-tighter { letter-spacing: -0.05em !important; } .tracking-tight { letter-spacing: -0.025em !important; } .tracking-normal { letter-spacing: 0 !important; } .tracking-wide { letter-spacing: 0.025em !important; } .tracking-wider { letter-spacing: 0.05em !important; } .tracking-widest { letter-spacing: 0.1em !important; } /* ======================================== Display Utilities ======================================== */ .block { display: block !important; } .inline-block { display: inline-block !important; } .inline { display: inline !important; } .hidden { display: none !important; } /* ======================================== Position Utilities ======================================== */ .static { position: static !important; } .fixed { position: fixed !important; } .absolute { position: absolute !important; } .relative { position: relative !important; } .sticky { position: sticky !important; } /* Position Values */ .top-0 { top: 0 !important; } .top-1-2 { top: 50% !important; transform: translateY(-50%); } .right-0 { right: 0 !important; } .right-4 { right: 1rem !important; } .bottom-0 { bottom: 0 !important; } .left-0 { left: 0 !important; } .left-4 { left: 1rem !important; } .inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } /* Z-index */ .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .z-40 { z-index: 40 !important; } .z-50 { z-index: 50 !important; } .z-100 { z-index: 100 !important; } .z-999 { z-index: 999 !important; } .z-9999 { z-index: 9999 !important; } /* ======================================== Width & Height Utilities ======================================== */ /* Width */ .w-auto { width: auto !important; } .w-full { width: 100% !important; } .w-screen { width: 100vw !important; } .w-1-2 { width: 50% !important; } .w-1-3 { width: 33.333333% !important; } .w-2-3 { width: 66.666667% !important; } .w-1-4 { width: 25% !important; } .w-3-4 { width: 75% !important; } .w-15 { width: 60px !important; } .w-60 { width: 60% !important; } .w-75 { width: 75% !important; } .w-80 { width: 80% !important; } /* Min Width */ .min-w-0 { min-width: 0 !important; } .min-w-full { min-width: 100% !important; } /* Max Width */ .max-w-xs { max-width: 320px !important; } .max-w-sm { max-width: 384px !important; } .max-w-md { max-width: 448px !important; } .max-w-lg { max-width: 512px !important; } .max-w-xl { max-width: 576px !important; } .max-w-2xl { max-width: 672px !important; } .max-w-3xl { max-width: 768px !important; } .max-w-4xl { max-width: 896px !important; } .max-w-5xl { max-width: 1024px !important; } .max-w-6xl { max-width: 1152px !important; } .max-w-7xl { max-width: 1280px !important; } .max-w-full { max-width: 100% !important; } .max-w-screen { max-width: 100vw !important; } .max-w-100 { max-width: 400px !important; } .max-w-600 { max-width: 600px !important; } /* Height */ .h-auto { height: auto !important; } .h-full { height: 100% !important; } .h-screen { height: 100vh !important; } .h-15 { height: 60px !important; } .h-25 { height: 100px !important; } .h-30 { height: 120px !important; } /* Min Height */ .min-h-0 { min-height: 0 !important; } .min-h-full { min-height: 100% !important; } .min-h-screen { min-height: 100vh !important; } /* ======================================== Border Utilities ======================================== */ .border { border: 1px solid !important; } .border-0 { border: none !important; } .border-2 { border-width: 2px !important; } .border-4 { border-width: 4px !important; } .border-t { border-top: 1px solid !important; } .border-t-1 { border-top-width: 1px !important; border-top-style: solid !important; } .border-r { border-right: 1px solid !important; } .border-b { border-bottom: 1px solid !important; } .border-l { border-left: 1px solid !important; } /* Border Radius */ .rounded-none { border-radius: 0 !important; } .rounded-sm { border-radius: 0.125rem !important; } .rounded { border-radius: 0.25rem !important; } .rounded-md { border-radius: 0.375rem !important; } .rounded-lg { border-radius: 0.5rem !important; } .rounded-xl { border-radius: 0.75rem !important; } .rounded-2xl { border-radius: 1rem !important; } .rounded-3xl { border-radius: 1.5rem !important; } .rounded-full { border-radius: 9999px !important; } /* ======================================== Overflow Utilities ======================================== */ .overflow-auto { overflow: auto !important; } .overflow-hidden { overflow: hidden !important; } .overflow-visible { overflow: visible !important; } .overflow-scroll { overflow: scroll !important; } .overflow-x-auto { overflow-x: auto !important; } .overflow-y-auto { overflow-y: auto !important; } .overflow-x-hidden { overflow-x: hidden !important; } .overflow-y-hidden { overflow-y: hidden !important; } /* ======================================== Opacity Utilities ======================================== */ .opacity-0 { opacity: 0 !important; } .opacity-10 { opacity: 0.1 !important; } .opacity-20 { opacity: 0.2 !important; } .opacity-30 { opacity: 0.3 !important; } .opacity-40 { opacity: 0.4 !important; } .opacity-50 { opacity: 0.5 !important; } .opacity-60 { opacity: 0.6 !important; } .opacity-70 { opacity: 0.7 !important; } .opacity-80 { opacity: 0.8 !important; } .opacity-90 { opacity: 0.9 !important; } .opacity-100 { opacity: 1 !important; } /* ======================================== Transition Utilities ======================================== */ .transition-none { transition: none !important; } .transition-all { transition: all 0.3s ease !important; } .transition-fast { transition: all 0.15s ease !important; } .transition-slow { transition: all 0.5s ease !important; } .transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important; } .transition-transform { transition: transform 0.3s ease !important; } .transition-opacity { transition: opacity 0.3s ease !important; } /* ======================================== Cursor Utilities ======================================== */ .cursor-auto { cursor: auto !important; } .cursor-pointer { cursor: pointer !important; } .cursor-not-allowed { cursor: not-allowed !important; } .cursor-move { cursor: move !important; } .cursor-grab { cursor: grab !important; } .cursor-grabbing { cursor: grabbing !important; } /* ======================================== More Gradient Variations ======================================== */ .gradient-theme-vertical { background: linear-gradient(180deg, var(--theme-darkest) 0%, var(--theme-sage) 50%, var(--theme-mint) 100%); } .gradient-theme-radial { background: radial-gradient(circle, var(--theme-mint) 0%, var(--theme-sage) 50%, var(--theme-darkest) 100%); } .gradient-theme-subtle { background: linear-gradient(180deg, var(--theme-cream) 0%, var(--theme-mint) 100%); } .gradient-overlay { background: linear-gradient(180deg, transparent 0%, var(--theme-mint) 5%, var(--theme-mint) 10%, transparent 100%); } /* Text Gradient Variations */ .text-gradient-accent { background: linear-gradient(180deg, var(--theme-accent) 0%, var(--theme-sage) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-vertical { background: linear-gradient(180deg, var(--theme-darkest) 0%, var(--theme-mint) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Navigation & Navbar Components (Bootstrap-inspired) ======================================== */ /* Base Nav */ .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; text-decoration: none; color: var(--theme-dark); border-radius: 0.5rem; transition: all 0.3s ease; } .nav-link:hover { background-color: color-mix(in srgb, var(--theme-mint) 20%, transparent); color: var(--theme-darkest); } .nav-link.active { background-color: var(--theme-sage); color: var(--theme-cream); } .nav-link.disabled { color: var(--theme-dark); opacity: 0.5; pointer-events: none; cursor: default; } .dark .nav-link { color: var(--theme-darkest); } .dark .nav-link.disabled { color: var(--theme-sage); } /* Nav Tabs */ .nav-tabs { border-bottom: 2px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); } .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; margin-bottom: -2px; } .nav-tabs .nav-link:hover { border-color: color-mix(in srgb, var(--theme-mint) 30%, transparent); background-color: transparent; } .nav-tabs .nav-link.active { color: var(--theme-darkest); background-color: transparent; border-color: color-mix(in srgb, var(--theme-mint) 30%, transparent) color-mix(in srgb, var(--theme-mint) 30%, transparent) transparent; border-bottom: 2px solid var(--theme-sage); } /* Nav Pills */ .nav-pills .nav-link { border-radius: 0.75rem; } .nav-pills .nav-link.active { background-color: var(--theme-sage); color: var(--theme-cream); } /* Nav Fill & Justified */ .nav-fill .nav-link { flex: 1 1 auto; text-align: center; } .nav-justified .nav-link { flex-basis: 0; flex-grow: 1; text-align: center; } /* Navbar */ .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.5rem; font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--theme-darkest); transition: all 0.3s ease; } .navbar-brand:hover { color: var(--theme-sage); } .dark .navbar-brand { color: var(--theme-darkest); } /* Navbar Nav */ .navbar-nav { display: flex; flex-direction: row; padding-left: 0; margin-bottom: 0; list-style: none; gap: 0.5rem; align-items: center; } .nav-item { display: list-item; } .navbar-nav .nav-link { padding-right: 0.75rem; padding-left: 0.75rem; } /* Navbar Toggler (Mobile Menu) */ .navbar-toggler { padding: 0.5rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 2px solid color-mix(in srgb, var(--theme-sage) 50%, transparent); border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; display: none; position: relative; width: 45px; height: 45px; } .navbar-toggler:hover { background-color: color-mix(in srgb, var(--theme-sage) 15%, transparent); border-color: var(--theme-sage); } .navbar-toggler:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-sage) 20%, transparent); } /* Hamburger Icon */ .navbar-toggler-icon { display: block; width: 24px; height: 2px; background-color: var(--theme-sage); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ""; display: block; width: 24px; height: 2px; background-color: var(--theme-sage); position: absolute; left: 0; transition: all 0.3s ease; } .navbar-toggler-icon::before { top: -8px; } .navbar-toggler-icon::after { bottom: -8px; } /* Animated Hamburger (when open) */ .navbar-toggler.active .navbar-toggler-icon { background-color: transparent; } .navbar-toggler.active .navbar-toggler-icon::before { transform: rotate(45deg); top: 0; } .navbar-toggler.active .navbar-toggler-icon::after { transform: rotate(-45deg); bottom: 0; } /* Dark mode toggler */ .dark .navbar-toggler { border-color: color-mix(in srgb, var(--theme-mint) 50%, transparent); } .dark .navbar-toggler:hover { border-color: var(--theme-mint); } .dark .navbar-toggler-icon, .dark .navbar-toggler-icon::before, .dark .navbar-toggler-icon::after { background-color: var(--theme-mint); } /* Navbar Collapse */ .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; transition: all 0.3s ease; } /* Desktop: Always show */ @media (min-width: 769px) { .navbar-collapse { display: flex !important; justify-content: flex-end; } } /* Mobile: Toggle functionality */ @media (max-width: 768px) { .navbar-toggler { display: block; } .navbar-collapse { display: none; width: 100%; } .navbar-collapse.show { display: flex !important; flex-direction: column; align-items: flex-start; padding-top: 1rem; animation: slideDown 0.3s ease-out; } .navbar-nav { flex-direction: column; width: 100%; margin-top: 0; gap: 0; } .navbar-nav .nav-link { padding: 0.75rem 1rem; width: 100%; border-radius: 0.5rem; } .navbar-nav .nav-item { width: 100%; margin-bottom: 0.25rem; } } /* Slide Down Animation */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Navbar Variants */ .navbar-light { background-color: color-mix(in srgb, var(--theme-cream) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .navbar-dark { background-color: color-mix(in srgb, var(--theme-darkest) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .navbar-dark .navbar-brand, .navbar-dark .nav-link { color: var(--theme-cream); } .navbar-dark .navbar-toggler { border-color: color-mix(in srgb, var(--theme-cream) 30%, transparent); } .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(227, 239, 211, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Glass Navbar */ .navbar-glass { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); } .dark .navbar-glass { background-color: color-mix(in srgb, var(--theme-dark) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); } /* Fixed Navbar */ .navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .navbar-fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030; } .navbar-sticky-top { position: sticky; top: 0; z-index: 1030; } /* Legacy Header Classes (for backwards compatibility) */ .header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--theme-cream) 80%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); padding: 1rem 0; transition: all 0.3s ease; } .header.scrolled { box-shadow: 0 4px 20px color-mix(in srgb, var(--theme-sage) 10%, transparent); } .dark .header { background: color-mix(in srgb, var(--theme-dark) 80%, transparent); border-bottom-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); } /* Fixed Header */ .header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.3s ease; } .header-scrolled { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 4px 20px color-mix(in srgb, var(--theme-sage) 10%, transparent); } /* Dropdown Menu */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { cursor: pointer; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0.5rem 0 0; font-size: 1rem; color: var(--theme-darkest); background-color: color-mix(in srgb, var(--theme-cream) 95%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-sage) 15%, transparent); list-style: none; } .dropdown-menu.show { display: block; } .dropdown-item { display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: var(--theme-darkest); text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; cursor: pointer; transition: all 0.3s ease; } .dropdown-item:hover { background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); color: var(--theme-darkest); } .dropdown-item.active { background-color: var(--theme-sage); color: var(--theme-cream); } .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); } .dark .dropdown-menu { background-color: color-mix(in srgb, var(--theme-dark) 95%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .dropdown-item { color: var(--theme-darkest); } .dark .dropdown-item:hover { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); color: var(--theme-darkest); } /* Breadcrumb */ .breadcrumb { display: flex; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; list-style: none; background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); border-radius: 0.75rem; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: var(--theme-dark); content: "/"; } .breadcrumb-item.active { color: var(--theme-dark); font-weight: 600; } .breadcrumb-item a { color: var(--theme-sage); text-decoration: none; transition: all 0.3s ease; } .breadcrumb-item a:hover { color: var(--theme-darkest); text-decoration: underline; } .dark .breadcrumb { background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); } .dark .breadcrumb-item a { color: var(--theme-accent); } .dark .breadcrumb-item + .breadcrumb-item::before { color: var(--theme-sage); } .dark .breadcrumb-item.active { color: var(--theme-darkest); } /* Pagination */ .pagination { display: flex; padding-left: 0; list-style: none; gap: 0.5rem; } .page-item { display: block; } .page-link { position: relative; display: block; padding: 0.5rem 0.75rem; color: var(--theme-sage); text-decoration: none; background-color: transparent; border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.5rem; transition: all 0.3s ease; } .page-link:hover { color: var(--theme-cream); background-color: var(--theme-sage); border-color: var(--theme-sage); } .page-item.active .page-link { color: var(--theme-cream); background-color: var(--theme-sage); border-color: var(--theme-sage); } .page-item.disabled .page-link { color: var(--theme-dark); opacity: 0.5; pointer-events: none; background-color: transparent; } .dark .page-link { color: var(--theme-accent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .page-item.disabled .page-link { color: var(--theme-sage); } /* Accordion */ .accordion { display: flex; flex-direction: column; gap: 1rem; } .accordion-item { background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; overflow: hidden; } .accordion-header { margin-bottom: 0; } .accordion-button { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; font-weight: 600; color: var(--theme-darkest); text-align: left; background-color: transparent; border: 0; border-radius: 0; overflow-anchor: none; cursor: pointer; transition: all 0.3s ease; } .accordion-button:not(.collapsed) { color: var(--theme-sage); background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); } .accordion-button::after { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: ""; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B8F71'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1.25rem; transition: transform 0.3s ease; } .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } .accordion-button:hover { background-color: color-mix(in srgb, var(--theme-sage) 5%, transparent); } .accordion-collapse { border-top: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); } .accordion-body { padding: 1rem 1.25rem; color: var(--theme-dark); } .dark .accordion-item { background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .accordion-button { color: var(--theme-darkest); } .dark .accordion-button:not(.collapsed) { color: var(--theme-accent); } .dark .accordion-body { color: var(--theme-darkest); } /* ======================================== Form Elements ======================================== */ .input-theme { width: 100%; padding: 0.75rem 1rem; border: 2px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); font-size: 1rem; transition: all 0.3s ease; outline: none; } .input-theme:focus { border-color: var(--theme-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-sage) 20%, transparent); } .input-theme::placeholder { color: color-mix(in srgb, var(--theme-dark) 50%, transparent); } .dark .input-theme { background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); color: var(--theme-darkest); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .textarea-theme { width: 100%; padding: 0.75rem 1rem; border: 2px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); font-size: 1rem; font-family: inherit; resize: vertical; min-height: 120px; transition: all 0.3s ease; outline: none; } .textarea-theme:focus { border-color: var(--theme-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-sage) 20%, transparent); } .select-theme { width: 100%; padding: 0.75rem 1rem; border: 2px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); color: var(--theme-darkest); font-size: 1rem; cursor: pointer; transition: all 0.3s ease; outline: none; } .select-theme:focus { border-color: var(--theme-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-sage) 20%, transparent); } .label-theme { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--theme-darkest); font-size: 0.875rem; } .dark .label-theme { color: var(--theme-darkest); } /* Checkbox & Radio */ .checkbox-theme, .radio-theme { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--theme-sage); } /* ======================================== List Styles ======================================== */ .list-none { list-style: none !important; padding-left: 0 !important; } .list-disc { list-style-type: disc !important; padding-left: 1.5rem !important; } .list-decimal { list-style-type: decimal !important; padding-left: 1.5rem !important; } /* ======================================== Link Styles ======================================== */ .link-theme { color: var(--theme-sage); text-decoration: underline; transition: color 0.3s ease; } .link-theme:hover { color: var(--theme-darkest); } .link-unstyled { color: inherit; text-decoration: none; } /* ======================================== Divider ======================================== */ .divider { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--theme-mint) 50%, transparent 100%); margin: 2rem 0; border: none; } .divider-vertical { width: 1px; height: 100%; background: linear-gradient(180deg, transparent 0%, var(--theme-mint) 50%, transparent 100%); margin: 0 2rem; } /* ======================================== Image Utilities ======================================== */ .img-fluid { max-width: 100%; height: auto; } .img-cover { object-fit: cover; } .img-contain { object-fit: contain; } .img-rounded { border-radius: 0.75rem; } .img-circle { border-radius: 9999px; } /* ======================================== Backdrop Utilities ======================================== */ .backdrop-blur { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .backdrop-blur-lg { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .backdrop-blur-xl { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } /* ======================================== Button Group ======================================== */ .button-group { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; } .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-group-center { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } /* Button Sizes */ .btn-sm { padding: 0.5rem 1rem !important; font-size: 0.875rem !important; } .btn-lg { padding: 1rem 2rem !important; font-size: 1.125rem !important; } .btn-xl { padding: 1.25rem 2.5rem !important; font-size: 1.25rem !important; } /* Button Variants */ .btn-outline { background: transparent !important; border: 2px solid var(--theme-sage) !important; color: var(--theme-sage) !important; } .btn-outline:hover { background: var(--theme-sage) !important; color: var(--theme-cream) !important; } .btn-ghost { background: transparent !important; border: none !important; color: var(--theme-sage) !important; } .btn-ghost:hover { background: color-mix(in srgb, var(--theme-sage) 10%, transparent) !important; } /* ======================================== Scroll Indicator ======================================== */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; color: var(--theme-sage); font-size: 2rem; } /* ======================================== Loading Spinner ======================================== */ .spinner { width: 40px; height: 40px; border: 4px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-top-color: var(--theme-sage); border-radius: 50%; animation: spin 1s linear infinite; } .spinner-sm { width: 24px; height: 24px; border-width: 3px; } .spinner-lg { width: 60px; height: 60px; border-width: 5px; } /* ======================================== Tooltip ======================================== */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; background-color: var(--theme-darkest); color: var(--theme-cream); text-align: center; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; white-space: nowrap; font-size: 0.875rem; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* ======================================== Notification/Toast ======================================== */ .notification { position: fixed; top: 5rem; right: 2rem; z-index: 9999; animation: slideInRight 0.3s ease-out; max-width: 300px; } /* ======================================== Modal Overlay ======================================== */ .modal-overlay { position: fixed; inset: 0; background-color: color-mix(in srgb, var(--theme-darkest) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9998; align-items: center; justify-content: center; } .modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; max-width: 90%; max-height: 90%; overflow-y: auto; } #searchModal .modal-content { animation: slideInUp 0.3s ease-out; } @keyframes slideInUp { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } } /* ======================================== Progress Bar ======================================== */ .progress-bar { width: 100%; height: 0.5rem; background-color: color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 9999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--theme-sage) 0%, var(--theme-mint) 100%); border-radius: 9999px; transition: width 0.3s ease; } /* ======================================== Skeleton Loading ======================================== */ .skeleton { background: linear-gradient( 90deg, color-mix(in srgb, var(--theme-mint) 20%, transparent) 25%, color-mix(in srgb, var(--theme-mint) 30%, transparent) 50%, color-mix(in srgb, var(--theme-mint) 20%, transparent) 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 0.5rem; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 1rem; margin-bottom: 0.5rem; } .skeleton-title { height: 2rem; margin-bottom: 1rem; } .skeleton-avatar { width: 3rem; height: 3rem; border-radius: 50%; } /* ======================================== Code Block ======================================== */ .code-block { background: color-mix(in srgb, var(--theme-darkest) 5%, transparent); padding: 1.5rem; border-radius: 0.75rem; overflow-x: auto; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.9rem; line-height: 1.6; border: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); } .dark .code-block { background: color-mix(in srgb, var(--theme-cream) 5%, transparent); } .code-inline { background: color-mix(in srgb, var(--theme-mint) 20%, transparent); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.875em; } /* ======================================== Responsive Utilities ======================================== */ /* Mobile First - Base styles above */ /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { .container { max-width: 540px; } .section-title { font-size: clamp(2rem, 5vw, 3rem); } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .container { max-width: 720px; } .container-md { max-width: 720px; } .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hidden-md { display: none !important; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .container { max-width: 960px; } .container-lg { max-width: 960px; } .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hidden-lg { display: none !important; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .container { max-width: 1140px; } .container-xl { max-width: 1320px; } .grid-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-xl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-xl-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hidden-xl { display: none !important; } } /* Mobile/Tablet adjustments */ @media (max-width: 768px) { .section { padding: 4rem 1.5rem; } .section-lg { padding: 6rem 1.5rem; } .section-xl { padding: 8rem 1.5rem; } .card-theme { padding: 1rem; } .btn-theme-primary, .btn-theme-secondary, .btn-theme-accent { padding: 0.625rem 1.25rem; font-size: 0.875rem; } .hidden-sm { display: none !important; } .text-sm-center { text-align: center !important; } .flex-sm-col { flex-direction: column !important; } .gap-sm-2 { gap: 0.5rem !important; } .px-sm-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .py-sm-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } } /* Mobile only */ @media (max-width: 576px) { .text-xs-center { text-align: center !important; } .hidden-xs { display: none !important; } .btn-group { flex-direction: column; width: 100%; } .btn-group > * { width: 100%; } .modal-content { max-width: 95%; } .notification { right: 1rem; left: 1rem; max-width: calc(100% - 2rem); } } /* ======================================== Hover Effects (Desktop Only) ======================================== */ @media (hover: hover) and (pointer: fine) { .hover-scale:hover { transform: scale(1.05); } .hover-rotate:hover { transform: rotate(5deg); } .hover-brightness:hover { filter: brightness(1.1); } .hover-shadow:hover { box-shadow: 0 20px 50px color-mix(in srgb, var(--theme-sage) 30%, transparent); } } /* ======================================== Utility Helpers ======================================== */ /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 80px; } .hero-title { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; margin-bottom: 1.5rem; } .hero-subtitle { font-size: clamp(1.1rem, 3vw, 1.5rem); margin-bottom: 2rem; opacity: 0.9; } /* Section Title */ .section-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; text-align: center; } .section-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); text-align: center; margin-bottom: 3rem; opacity: 0.8; } /* Feature Card */ .feature-card { text-align: center; } .feature-icon { font-size: 3rem; margin-bottom: 1rem; display: block; } .feature-title { font-size: 1.5rem; margin-bottom: 0.5rem; } /* Stats */ .stat-number { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; } /* Logo */ .logo { font-size: 1.5rem; font-weight: 700; text-decoration: none; } /* Nav Container */ .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; } .nav-links { display: flex; gap: 1rem; align-items: center; list-style: none; } .nav-links a { text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: all 0.3s ease; } /* Theme Toggle Button */ .theme-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.5rem; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .theme-btn:hover { transform: translateY(-4px); box-shadow: 0 6px 30px rgba(0,0,0,0.3); } /* Theme Controls */ .theme-controls { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; display: flex; gap: 0.5rem; } @media (max-width: 768px) { .theme-controls { bottom: 1rem; right: 1rem; gap: 0.25rem; } .theme-btn { width: 45px; height: 45px; font-size: 1.25rem; } .nav-links { gap: 0.5rem; } .nav-links a { padding: 0.5rem; font-size: 0.875rem; } } /* ======================================== Print Styles ======================================== */ @media print { .glass-theme, .card-theme { background-color: white !important; border: 1px solid #ddd !important; box-shadow: none !important; } .theme-controls, .nav, .btn-group, .notification, .modal-overlay { display: none !important; } .container { max-width: 100% !important; } .section { padding: 2rem 0 !important; } } /* ======================================== Universal Theme System ======================================== */ /* * All themes now use the same CSS variables system. * No theme-specific overrides needed! * * To add a new theme: * 1. Define 6 variables for light mode * 2. Define 6 variables for dark mode * 3. Everything else works automatically! */ /* ======================================== Dark Mode Enhancements ======================================== */ .dark { color-scheme: dark; } .dark body[data-theme-enabled] { background-color: var(--theme-dark); color: var(--theme-darkest); } .dark .bg-theme-cream { background-color: var(--theme-cream) !important; } .dark .text-theme-darkest { color: var(--theme-darkest) !important; } .dark .text-theme-dark { color: var(--theme-darkest) !important; opacity: 0.9; } .dark .text-theme-dark-80 { color: var(--theme-darkest) !important; opacity: 0.8; } .dark .text-theme-dark-60 { color: var(--theme-darkest) !important; opacity: 0.7; } .dark .text-theme-sage { color: var(--theme-sage) !important; } .dark .text-theme-sage-80 { color: var(--theme-sage) !important; opacity: 0.9; } .dark .text-theme-mint { color: var(--theme-accent) !important; opacity: 0.95; } .dark .text-theme-mint-80 { color: var(--theme-accent) !important; opacity: 0.85; } .dark .text-theme-mint-60 { color: var(--theme-accent) !important; opacity: 0.75; } .dark .border-theme-cream { border-color: var(--theme-mint) !important; } /* Dark mode badge improvements */ .dark .badge-theme-secondary { background-color: color-mix(in srgb, var(--theme-sage) 40%, transparent); color: var(--theme-darkest); border-color: color-mix(in srgb, var(--theme-sage) 40%, transparent); } /* Dark mode code block improvements */ .dark .code-inline { background: color-mix(in srgb, var(--theme-sage) 30%, transparent); color: var(--theme-darkest); } /* Dark mode heading improvements */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: var(--theme-darkest); } /* Dark mode link improvements */ .dark .link-theme { color: var(--theme-accent); } .dark .link-theme:hover { color: var(--theme-darkest); } /* Dark mode nav improvements */ .dark .nav-links a { color: var(--theme-darkest); opacity: 0.9; } .dark .nav-links a:hover { opacity: 1; background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); color: var(--theme-darkest); } /* ======================================== Accessibility ======================================== */ /* Focus visible for keyboard navigation */ *:focus-visible { outline: 3px solid var(--theme-accent); outline-offset: 2px; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .glass-theme, .card-theme { border: 2px solid var(--theme-darkest); } .btn-theme-primary, .btn-theme-secondary, .btn-theme-accent { border: 2px solid currentColor; } } /* ======================================== Utility: Collapse (for Accordion & Navbar) ======================================== */ .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height 0.35s ease; } /* ======================================== List Group ======================================== */ .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 0.75rem; } .list-group-item { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; color: var(--theme-darkest); text-decoration: none; background-color: color-mix(in srgb, var(--theme-cream) 60%, transparent); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-bottom: none; transition: all 0.3s ease; gap: 1rem; } .list-group-item > div { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; } .list-group-item h4 { margin: 0 0 0.25rem 0; font-size: 1.125rem; font-weight: 600; } .list-group-item p { margin: 0; font-size: 0.875rem; color: var(--theme-dark); opacity: 0.9; } .list-group-item:first-child { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; } .list-group-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } .list-group-item:hover { background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); cursor: pointer; } .list-group-item.active { color: var(--theme-cream); background-color: var(--theme-sage); border-color: var(--theme-sage); } .list-group-item.disabled { color: var(--theme-dark); opacity: 0.5; pointer-events: none; background-color: transparent; } .dark .list-group-item { color: var(--theme-darkest); background-color: color-mix(in srgb, var(--theme-cream) 40%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .list-group-item p { color: var(--theme-darkest); opacity: 0.8; } .dark .list-group-item.disabled { color: var(--theme-sage); } /* List Group Flush */ .list-group-flush .list-group-item { border-width: 0 0 1px; border-radius: 0; background-color: transparent; } .list-group-flush .list-group-item:last-child { border-bottom-width: 0; } /* ======================================== Sidebar Component ======================================== */ .sidebar { width: 280px; min-height: 100vh; padding: 2rem 1.5rem; background-color: color-mix(in srgb, var(--theme-cream) 70%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); position: fixed; left: 0; top: 0; overflow-y: auto; z-index: 100; transition: all 0.3s ease; } .sidebar h2 { font-size: 1.5rem; font-weight: 700; color: var(--theme-darkest); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid color-mix(in srgb, var(--theme-sage) 30%, transparent); } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar ul li { margin-bottom: 0.5rem; } .sidebar ul li a { display: block; padding: 0.75rem 1rem; color: var(--theme-dark); text-decoration: none; border-radius: 0.5rem; transition: all 0.3s ease; font-weight: 500; } .sidebar ul li a:hover { background-color: color-mix(in srgb, var(--theme-sage) 15%, transparent); color: var(--theme-darkest); transform: translateX(5px); } .sidebar ul li a.active { background-color: var(--theme-sage); color: var(--theme-cream); } .dark .sidebar { background-color: color-mix(in srgb, var(--theme-dark) 90%, transparent); border-right-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .sidebar h2 { color: var(--theme-darkest); } .dark .sidebar ul li a { color: var(--theme-darkest); } .dark .sidebar ul li a:hover { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); color: var(--theme-darkest); } /* Main Content with Sidebar Layout */ main { margin-left: 280px; padding: 2rem; min-height: 100vh; transition: all 0.3s ease; } main h1 { font-size: 2.5rem; font-weight: 700; color: var(--theme-darkest); margin-bottom: 2rem; } main h2 { font-size: 2rem; font-weight: 600; color: var(--theme-darkest); margin: 3rem 0 1.5rem 0; } .dark main h1, .dark main h2 { color: var(--theme-darkest); } /* Card Flex Layout */ main > div:first-of-type { /* display: flex; */ flex-wrap: wrap; gap: 1.5rem; margin-bottom: 4rem; } main > div:first-of-type > .card { flex: 1 1 320px; max-width: calc(33.333% - 1rem); } @media (max-width: 1200px) { main > div:first-of-type > .card { max-width: calc(50% - 0.75rem); } } @media (max-width: 768px) { main > div:first-of-type > .card { max-width: 100%; flex: 1 1 100%; } } /* Responsive Sidebar */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .sidebar.show { transform: translateX(0); } main { margin-left: 0; padding: 1.5rem; } } @media (max-width: 768px) { .sidebar { width: 100%; } main { padding: 1rem; } main h1 { font-size: 2rem; } main > div:first-of-type { grid-template-columns: 1fr; } } /* ======================================== Toast Notifications ======================================== */ .toast { max-width: 350px; overflow: hidden; font-size: 0.875rem; background-color: color-mix(in srgb, var(--theme-cream) 95%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-clip: padding-box; border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); box-shadow: 0 8px 32px 0 color-mix(in srgb, var(--theme-sage) 15%, transparent); border-radius: 0.75rem; margin-bottom: 1rem; } .toast-header { display: flex; align-items: center; padding: 0.5rem 0.75rem; color: var(--theme-darkest); background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 20%, transparent); border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px); } .toast-body { padding: 0.75rem; color: var(--theme-dark); } .toast-container { position: fixed; z-index: 9999; top: 1rem; right: 1rem; max-width: 100%; } .dark .toast { background-color: color-mix(in srgb, var(--theme-cream) 95%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .toast-header { color: var(--theme-darkest); } .dark .toast-body { color: var(--theme-darkest); } /* ======================================== Offcanvas (Sidebar) ======================================== */ .offcanvas { position: fixed; bottom: 0; z-index: 1050; display: flex; flex-direction: column; max-width: 100%; visibility: hidden; background-color: color-mix(in srgb, var(--theme-cream) 95%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); background-clip: padding-box; outline: 0; transition: transform 0.3s ease-in-out; } .offcanvas.show { visibility: visible; } .offcanvas-start { top: 0; left: 0; width: 300px; border-right: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); transform: translateX(-100%); } .offcanvas-start.show { transform: translateX(0); } .offcanvas-end { top: 0; right: 0; width: 300px; border-left: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); transform: translateX(100%); } .offcanvas-end.show { transform: translateX(0); } .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); } .offcanvas-title { margin-bottom: 0; font-size: 1.25rem; font-weight: 600; color: var(--theme-darkest); } .offcanvas-body { flex-grow: 1; padding: 1.5rem; overflow-y: auto; } .dark .offcanvas { background-color: color-mix(in srgb, var(--theme-dark) 95%, transparent); border-color: color-mix(in srgb, var(--theme-sage) 30%, transparent); } .dark .offcanvas-title { color: var(--theme-darkest); } /* Offcanvas Backdrop */ .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: color-mix(in srgb, var(--theme-darkest) 60%, transparent); backdrop-filter: blur(8px); } .offcanvas-backdrop.fade { opacity: 0; } .offcanvas-backdrop.show { opacity: 1; } /* ======================================== Close Button ======================================== */ .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em; color: var(--theme-darkest); background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230D2B1D'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: 0.25rem; opacity: 0.5; cursor: pointer; transition: all 0.3s ease; } .btn-close:hover { opacity: 1; } .dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ======================================== DOCUMENTATION PAGE COMPONENTS ======================================== */ /* Documentation Navbar */ .docs-navbar { position: fixed; top: 0; left: 0; right: 0; height: 60px; background-color: color-mix(in srgb, var(--theme-cream) 90%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); display: flex; align-items: center; padding: 0 2rem; z-index: 100; } .dark .docs-navbar { background-color: color-mix(in srgb, var(--theme-dark) 90%, transparent); } /* Documentation Sidebar */ .docs-sidebar { position: fixed; left: 0; top: 60px; width: 250px; height: calc(100vh - 60px); overflow-y: auto; background-color: var(--theme-cream); border-right: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); padding: 2rem 0; z-index: 50; } .dark .docs-sidebar { background-color: var(--theme-dark); } .dark .docs-sidebar a { color: var(--theme-darkest); } .dark .docs-sidebar a:hover { background-color: color-mix(in srgb, var(--theme-sage) 20%, transparent); color: var(--theme-accent); } .docs-sidebar a { display: block; padding: 0.5rem 1.5rem; color: var(--theme-dark); text-decoration: none; font-size: 0.875rem; transition: all 0.2s ease; } .docs-sidebar a:hover { background-color: color-mix(in srgb, var(--theme-sage) 10%, transparent); color: var(--theme-darkest); } .docs-sidebar a.active { background-color: var(--theme-sage); color: var(--theme-cream); font-weight: 600; } .docs-sidebar .sidebar-section { margin-bottom: 1.5rem; } .docs-sidebar .sidebar-title { padding: 0.5rem 1.5rem; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-sage); } /* Documentation Main Content */ .docs-main { margin-left: 250px; padding: 2rem 3rem; max-width: 1400px; } .docs-main-content { padding-top: 80px; } .docs-navbar-brand { text-decoration: none; } .docs-navbar-actions { margin-left: auto; display: flex; gap: 0.5rem; } /* Documentation Class Card */ .class-card { background: color-mix(in srgb, var(--theme-cream) 60%, transparent); border: 1px solid color-mix(in srgb, var(--theme-mint) 30%, transparent); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; transition: all 0.2s ease; } .class-card:hover { border-color: var(--theme-sage); transform: translateX(4px); } .class-name { font-family: 'Monaco', 'Courier New', monospace; font-size: 0.875rem; color: var(--theme-sage); font-weight: 600; } .class-desc { font-size: 0.8125rem; color: var(--theme-dark); margin: 0.25rem 0 0 0; } .dark .class-desc { color: var(--theme-accent); } .example-box { border: 2px dashed color-mix(in srgb, var(--theme-mint) 40%, transparent); padding: 1rem; border-radius: 0.5rem; margin-top: 0.5rem; } /* Responsive Documentation Layout */ @media (max-width: 992px) { .docs-sidebar { transform: translateX(-100%); } .docs-main { margin-left: 0; padding: 2rem 1rem; } } /* ======================================== END OF SOLANKE THEMES v1.1.0 ======================================== */ /* Thank you for using Solanke Themes! * * ✨ UNIVERSAL THEME SYSTEM ✨ * * Three Beautiful Themes Included: * - Luxury Green: Natural, elegant design with forest tones * - Corporate Blue: Professional, business-ready blue palette * - Shadcn: Modern, minimal black & white aesthetics * * 🎨 ADD YOUR OWN THEME: * Just define 6 color variables for light mode and 6 for dark mode * at the top of this file - everything else works automatically! * * Example: * :root[data-color-theme="mytheme"] { * --theme-darkest: #your-darkest-color; * --theme-dark: #your-dark-color; * --theme-sage: #your-medium-color; * --theme-mint: #your-light-color; * --theme-cream: #your-lightest-color; * --theme-accent: #your-accent-color; * } * * :root[data-color-theme="mytheme"].dark { * --theme-darkest: #inverted-for-dark-mode; * --theme-dark: #inverted-for-dark-mode; * --theme-sage: #adjusted-for-dark-mode; * --theme-mint: #adjusted-for-dark-mode; * --theme-cream: #inverted-for-dark-mode; * --theme-accent: #adjusted-for-dark-mode; * } * * Then use: * * Built with ❤️ by Saurabh Solanke */