/* src/index.css - Root styles using theme variables */ /* Import theme system */ /* src/styles/themes/variables.css - Complete Arctic Frost Theme System */ /* ===== ARCTIC FROST THEME ARCHITECTURE ===== */ /* This file defines a complete, consistent Arctic Frost theme */ /* Colors are intelligently chosen for proper contrast and visual hierarchy */ :root { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Cool blue - main brand color inspired by arctic ice */ --gd-color-primary: #4A90E2; /* Main primary - arctic blue */ --gd-color-primary-50: #F0F7FF; /* Lightest - for subtle backgrounds */ --gd-color-primary-100: #E1EFFF; /* Very light - for hover states on light backgrounds */ --gd-color-primary-200: #C3DFFF; /* Light - for disabled states, light accents */ --gd-color-primary-300: #94C5FF; /* Medium light - for borders, secondary elements */ --gd-color-primary-400: #5BA0F2; /* Medium - for hover states */ --gd-color-primary-500: #4A90E2; /* Base primary color */ --gd-color-primary-600: #3B7BC9; /* Medium dark - for active states */ --gd-color-primary-700: #2D5FA0; /* Dark - for pressed states */ --gd-color-primary-800: #1E4277; /* Darker - for strong contrast */ --gd-color-primary-900: #0F254E; /* Darkest - for maximum contrast */ /* ===== SECONDARY COLOR SYSTEM ===== */ /* Icy cyan - complementary to primary, like frozen water */ --gd-color-secondary: #7DD3FC; /* Main secondary - icy cyan */ --gd-color-secondary-50: #F0FCFF; /* Lightest */ --gd-color-secondary-100: #E0F9FF; /* Very light */ --gd-color-secondary-200: #BAE6FD; /* Light */ --gd-color-secondary-300: #7DD3FC; /* Medium light */ --gd-color-secondary-400: #38BDF8; /* Medium */ --gd-color-secondary-500: #0EA5E9; /* Base secondary */ --gd-color-secondary-600: #0284C7; /* Medium dark */ --gd-color-secondary-700: #0369A1; /* Dark */ --gd-color-secondary-800: #075985; /* Darker */ --gd-color-secondary-900: #0C4A6E; /* Darkest */ /* ===== ACCENT COLOR SYSTEM ===== */ /* Aurora green - like northern lights over ice */ --gd-color-accent: #34D399; /* Main accent - aurora green */ --gd-color-accent-50: #ECFDF5; /* Lightest */ --gd-color-accent-100: #D1FAE5; /* Very light */ --gd-color-accent-200: #A7F3D0; /* Light */ --gd-color-accent-300: #6EE7B7; /* Medium light */ --gd-color-accent-400: #34D399; /* Medium */ --gd-color-accent-500: #10B981; /* Base accent */ --gd-color-accent-600: #059669; /* Medium dark */ --gd-color-accent-700: #047857; /* Dark */ --gd-color-accent-800: #065F46; /* Darker */ --gd-color-accent-900: #064E3B; /* Darkest */ /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Light backgrounds with proper contrast ratios */ --gd-bg-primary: #FAFBFF; /* Main background - very light blue-white */ --gd-bg-secondary: #F1F5FF; /* Secondary background */ --gd-bg-tertiary: #E8EFFF; /* Tertiary background */ --gd-bg-quaternary: #DFE9FF; /* Fourth level background */ --gd-bg-elevated: #FFFFFF; /* Elevated surfaces (cards, modals) */ --gd-bg-overlay: rgba(15, 37, 78, 0.4); /* Dark overlay for modals */ /* Background variants based on primary colors */ --gd-bg-primary-subtle: var(--gd-color-primary-50); /* Primary tinted background */ --gd-bg-secondary-subtle: var(--gd-color-secondary-50); /* Secondary tinted background */ --gd-bg-accent-subtle: var(--gd-color-accent-50); /* Accent tinted background */ /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Dark text for light backgrounds - ensures readability */ --gd-text-primary: #0F172A; /* Main text - very dark slate */ --gd-text-secondary: #334155; /* Secondary text - medium dark */ --gd-text-tertiary: #64748B; /* Tertiary text - medium */ --gd-text-quaternary: #94A3B8; /* Quaternary text - light gray */ --gd-text-disabled: #CBD5E1; /* Disabled text - very light */ --gd-text-inverse: #FFFFFF; /* Inverse text - white for dark backgrounds */ --gd-text-muted: #64748B; /* Muted text - same as tertiary */ /* Text on colored backgrounds */ --gd-text-on-primary: #FFFFFF; /* White text on primary backgrounds */ --gd-text-on-secondary: #FFFFFF; /* White text on secondary backgrounds */ --gd-text-on-accent: #FFFFFF; /* White text on accent backgrounds */ /* ===== SEMANTIC COLORS ===== */ /* Status colors with proper contrast */ --gd-color-success: #10B981; /* Success - emerald */ --gd-color-success-light: #ECFDF5; /* Light success background */ --gd-color-success-dark: #047857; /* Dark success for contrast */ --gd-color-warning: #F59E0B; /* Warning - amber */ --gd-color-warning-light: #FFFBEB; /* Light warning background */ --gd-color-warning-dark: #D97706; /* Dark warning for contrast */ --gd-color-danger: #EF4444; /* Danger - red */ --gd-color-danger-light: #FEF2F2; /* Light danger background */ --gd-color-danger-dark: #DC2626; /* Dark danger for contrast */ --gd-color-info: var(--gd-color-primary-500); /* Info uses primary color */ --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== BORDER SYSTEM ===== */ /* Consistent border colors with proper visibility */ --gd-border-light: rgba(148, 163, 184, 0.2); /* Very subtle borders */ --gd-border-medium: rgba(148, 163, 184, 0.3); /* Standard borders */ --gd-border-strong: rgba(148, 163, 184, 0.5); /* Strong borders */ --gd-border-primary: var(--gd-color-primary-300); /* Primary colored borders */ --gd-border-focus: var(--gd-color-primary-500); /* Focus state borders */ /* ===== SURFACE COLORS ===== */ /* Layered surface system for depth */ --gd-surface-1: var(--gd-bg-primary); /* Base surface */ --gd-surface-2: var(--gd-bg-secondary); /* Elevated surface */ --gd-surface-3: var(--gd-bg-tertiary); /* More elevated surface */ --gd-surface-4: var(--gd-bg-quaternary); /* Highest surface */ --gd-surface-raised: var(--gd-bg-elevated); /* Card/modal surface */ --gd-surface-overlay: var(--gd-bg-overlay); /* Modal backdrop */ /* ===== GRADIENTS ===== */ /* Arctic-inspired gradients */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 50%, var(--gd-color-secondary-700) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-secondary-400) 35%, var(--gd-color-accent-400) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ /* Subtle shadows for Arctic theme */ --gd-shadow-sm: 0 1px 2px 0 rgba(15, 37, 78, 0.05); --gd-shadow-base: 0 1px 3px 0 rgba(15, 37, 78, 0.1), 0 1px 2px 0 rgba(15, 37, 78, 0.06); --gd-shadow-md: 0 4px 6px -1px rgba(15, 37, 78, 0.1), 0 2px 4px -1px rgba(15, 37, 78, 0.06); --gd-shadow-lg: 0 10px 15px -3px rgba(15, 37, 78, 0.1), 0 4px 6px -2px rgba(15, 37, 78, 0.05); --gd-shadow-xl: 0 20px 25px -5px rgba(15, 37, 78, 0.1), 0 10px 10px -5px rgba(15, 37, 78, 0.04); --gd-shadow-2xl: 0 25px 50px -12px rgba(15, 37, 78, 0.25); --gd-shadow-inner: inset 0 2px 4px 0 rgba(15, 37, 78, 0.06); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(74, 144, 226, 0.15); --gd-shadow-secondary: 0 4px 14px 0 rgba(125, 211, 252, 0.15); --gd-shadow-accent: 0 4px 14px 0 rgba(52, 211, 153, 0.15); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; --gd-font-size-xs: 0.75rem; /* 12px */ --gd-font-size-sm: 0.875rem; /* 14px */ --gd-font-size-base: 1rem; /* 16px */ --gd-font-size-lg: 1.125rem; /* 18px */ --gd-font-size-xl: 1.25rem; /* 20px */ --gd-font-size-2xl: 1.5rem; /* 24px */ --gd-font-size-3xl: 1.875rem; /* 30px */ --gd-font-size-4xl: 2.25rem; /* 36px */ --gd-font-size-5xl: 3rem; /* 48px */ --gd-font-size-6xl: 4rem; /* 64px */ --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; /* 2px */ --gd-space-1: 0.25rem; /* 4px */ --gd-space-1_5: 0.375rem; /* 6px */ --gd-space-2: 0.5rem; /* 8px */ --gd-space-2_5: 0.625rem; /* 10px */ --gd-space-3: 0.75rem; /* 12px */ --gd-space-3_5: 0.875rem; /* 14px */ --gd-space-4: 1rem; /* 16px */ --gd-space-5: 1.25rem; /* 20px */ --gd-space-6: 1.5rem; /* 24px */ --gd-space-7: 1.75rem; /* 28px */ --gd-space-8: 2rem; /* 32px */ --gd-space-9: 2.25rem; /* 36px */ --gd-space-10: 2.5rem; /* 40px */ --gd-space-11: 2.75rem; /* 44px */ --gd-space-12: 3rem; /* 48px */ --gd-space-14: 3.5rem; /* 56px */ --gd-space-16: 4rem; /* 64px */ --gd-space-20: 5rem; /* 80px */ --gd-space-24: 6rem; /* 96px */ --gd-space-28: 7rem; /* 112px */ --gd-space-32: 8rem; /* 128px */ /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; /* 2px */ --gd-radius-base: 0.25rem; /* 4px */ --gd-radius-md: 0.375rem; /* 6px */ --gd-radius-lg: 0.5rem; /* 8px */ --gd-radius-xl: 0.75rem; /* 12px */ --gd-radius-2xl: 1rem; /* 16px */ --gd-radius-3xl: 1.5rem; /* 24px */ --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* 70px */ /* ===== BREAKPOINTS (for reference) ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(255, 255, 255, 0.85); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: var(--gd-border-light); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-elevated); --gd-input-border: var(--gd-border-medium); --gd-input-border-hover: var(--gd-border-strong); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(74, 144, 226, 0.1); /* Overlays & Modals */ --gd-overlay-bg: rgba(15, 37, 78, 0.4); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: var(--gd-shadow-lg); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); } /* ===== UTILITY CLASSES ===== */ .gd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gd-no-scroll { overflow: hidden; } .gd-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ===== REDUCED MOTION SUPPORT ===== */ @media (prefers-reduced-motion: reduce) { :root { --gd-transition-fast: none; --gd-transition-base: none; --gd-transition-slow: none; --gd-transition-slowest: none; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== HIGH CONTRAST SUPPORT ===== */ @media (prefers-contrast: high) { :root { --gd-border-light: rgba(148, 163, 184, 0.4); --gd-border-medium: rgba(148, 163, 184, 0.6); --gd-border-strong: rgba(148, 163, 184, 0.8); --gd-text-primary: #000000; --gd-text-secondary: #1a1a1a; } } html[data-theme="dark-cyber"] { /* ===== PRIMARY COLOR SYSTEM ===== */ --gd-color-primary: #00ffff; --gd-color-primary-50: #001a1a; --gd-color-primary-100: #003333; --gd-color-primary-200: #004d4d; --gd-color-primary-300: #006666; --gd-color-primary-400: #00cccc; --gd-color-primary-500: #00ffff; --gd-color-primary-600: #00e6e6; --gd-color-primary-700: #00cccc; --gd-color-primary-800: #00b3b3; --gd-color-primary-900: #009999; /* ===== SECONDARY COLOR SYSTEM ===== */ --gd-color-secondary: #ff00ff; --gd-color-secondary-50: #1a001a; --gd-color-secondary-100: #330033; --gd-color-secondary-200: #4d004d; --gd-color-secondary-300: #660066; --gd-color-secondary-400: #cc00cc; --gd-color-secondary-500: #ff00ff; --gd-color-secondary-600: #e600e6; --gd-color-secondary-700: #cc00cc; --gd-color-secondary-800: #b300b3; --gd-color-secondary-900: #990099; /* ===== ACCENT COLOR SYSTEM ===== */ --gd-color-accent: #00ff88; --gd-color-accent-50: #001a0f; --gd-color-accent-100: #00331f; --gd-color-accent-200: #004d2e; --gd-color-accent-300: #00663d; --gd-color-accent-400: #00cc66; --gd-color-accent-500: #00ff88; --gd-color-accent-600: #00e677; --gd-color-accent-700: #00cc66; --gd-color-accent-800: #00b355; --gd-color-accent-900: #009944; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ --gd-bg-primary: #0a0a0f; --gd-bg-secondary: #0f0f1a; --gd-bg-tertiary: #1a1a2e; --gd-bg-quaternary: #262647; --gd-bg-elevated: #1a1a2e; --gd-bg-overlay: rgba(0, 255, 255, 0.2); --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #ffffff; --gd-text-secondary: #b3b3ff; --gd-text-tertiary: #8080ff; --gd-text-quaternary: #6666cc; --gd-text-disabled: #404080; --gd-text-inverse: #0a0a0f; --gd-text-muted: #6666cc; --gd-text-on-primary: #000000; --gd-text-on-secondary: #000000; --gd-text-on-accent: #000000; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #00ff88; --gd-color-success-light: #001a0f; --gd-color-success-dark: #00cc66; --gd-color-warning: #ffaa00; --gd-color-warning-light: #1a1100; --gd-color-warning-dark: #cc8800; --gd-color-danger: #ff0066; --gd-color-danger-light: #1a0009; --gd-color-danger-dark: #cc0052; --gd-color-info: #0088ff; --gd-color-info-light: #000f1a; --gd-color-info-dark: #0066cc; /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(0, 255, 255, 0.2); --gd-border-medium: rgba(0, 255, 255, 0.4); --gd-border-strong: rgba(0, 255, 255, 0.6); --gd-border-primary: var(--gd-color-primary-600); --gd-border-focus: var(--gd-color-primary); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-secondary); --gd-surface-2: var(--gd-bg-tertiary); --gd-surface-3: var(--gd-bg-quaternary); --gd-surface-4: #333366; --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%); --gd-gradient-secondary: linear-gradient(135deg, #0088ff 0%, #8800ff 100%); --gd-gradient-accent: linear-gradient(45deg, #00ff88, #00ffff); --gd-gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%); --gd-gradient-subtle: linear-gradient(135deg, #0a0a0f 0%, #0f0f1a 50%, #1a1a2e 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(0, 255, 255, 0.1); --gd-shadow-base: 0 1px 3px 0 rgba(0, 255, 255, 0.2), 0 1px 2px 0 rgba(0, 255, 255, 0.1); --gd-shadow-md: 0 4px 6px -1px rgba(0, 255, 255, 0.2), 0 2px 4px -1px rgba(0, 255, 255, 0.1); --gd-shadow-lg: 0 10px 15px -3px rgba(0, 255, 255, 0.3), 0 4px 6px -2px rgba(0, 255, 255, 0.2); --gd-shadow-xl: 0 20px 25px -5px rgba(0, 255, 255, 0.4), 0 10px 10px -5px rgba(0, 255, 255, 0.3); --gd-shadow-2xl: 0 25px 50px -12px rgba(0, 255, 255, 0.5); --gd-shadow-inner: inset 0 2px 4px 0 rgba(0, 255, 255, 0.2); --gd-shadow-primary: 0 4px 14px 0 rgba(0, 255, 255, 0.4); --gd-shadow-secondary: 0 4px 14px 0 rgba(255, 0, 255, 0.4); --gd-shadow-accent: 0 4px 14px 0 rgba(0, 255, 136, 0.4); /* ===== COMPONENT SPECIFIC ===== */ --gd-nav-bg: rgba(10, 10, 15, 0.95); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(0, 255, 255, 0.2); --gd-nav-shadow: 0 4px 20px rgba(0, 255, 255, 0.3); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-primary); --gd-nav-link-active: var(--gd-color-accent); --gd-card-bg: var(--gd-surface-2); --gd-card-border: rgba(0, 255, 255, 0.2); --gd-card-shadow: 0 4px 20px rgba(0, 255, 255, 0.2); --gd-card-shadow-hover: 0 8px 30px rgba(0, 255, 255, 0.4); --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: rgba(0, 255, 255, 0.3); --gd-input-border-hover: rgba(0, 255, 255, 0.5); --gd-input-border-focus: var(--gd-color-primary); --gd-input-shadow-focus: 0 0 0 3px rgba(0, 255, 255, 0.2); --gd-overlay-bg: rgba(0, 255, 255, 0.2); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-shadow: 0 25px 50px -12px rgba(0, 255, 255, 0.6); --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-shadow: 0 10px 20px rgba(0, 255, 255, 0.4); --gd-loading-primary: var(--gd-color-primary); --gd-loading-secondary: var(--gd-color-primary-300); --gd-progress-bg: var(--gd-color-primary-200); --gd-progress-fill: var(--gd-color-primary); /* ===== CYBER SPECIFIC EFFECTS ===== */ --gd-cyber-glow: 0 0 20px rgba(0, 255, 255, 0.5); --gd-cyber-text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); --gd-cyber-border-glow: 0 0 15px rgba(0, 255, 255, 0.6); } /* Add other theme imports here */ /* Root variables are still available globally */ :root { font-family: var(--gd-font-family-primary); line-height: var(--gd-line-height-relaxed); font-weight: var(--gd-font-weight-normal); color-scheme: light dark; color: var(--gd-text-primary); background-color: var(--gd-bg-primary); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Isolate styles from Terraceon3 page */ body:not(.terrace-page) a { font-weight: var(--gd-font-weight-medium); color: var(--gd-color-primary); text-decoration: inherit; transition: var(--gd-transition-fast); } body:not(.terrace-page) a:hover { color: var(--gd-color-primary-hover); } body:not(.terrace-page) a:focus-visible { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; border-radius: var(--gd-radius-sm); } body:not(.terrace-page) { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; background: var(--gd-bg-primary); color: var(--gd-text-primary); } /* Reset styles for Terrace page */ body.terrace-page { margin: 0; display: block; min-width: 320px; min-height: 100vh; background: initial; color: initial; font-family: initial; line-height: initial; font-weight: initial; } body:not(.terrace-page) h1 { font-size: var(--gd-font-size-5xl); line-height: var(--gd-line-height-tight); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); } body:not(.terrace-page) button { border-radius: var(--gd-radius-lg); border: 1px solid transparent; padding: var(--gd-space-3) var(--gd-space-5); font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-medium); font-family: inherit; background-color: var(--gd-surface-2); color: var(--gd-text-primary); cursor: pointer; transition: var(--gd-transition-base); box-shadow: var(--gd-shadow-sm); } body:not(.terrace-page) button:hover { border-color: var(--gd-color-primary); background-color: var(--gd-surface-3); box-shadow: var(--gd-shadow-md); } body:not(.terrace-page) button:focus, body:not(.terrace-page) button:focus-visible { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; } body:not(.terrace-page) button:active { transform: translateY(1px); box-shadow: var(--gd-shadow-sm); } body:not(.terrace-page) button:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--gd-surface-1); color: var(--gd-text-disabled); } /* Dark mode specific adjustments */ @media (prefers-color-scheme: dark) { body:not(.terrace-page) { color: var(--gd-text-primary); background-color: var(--gd-bg-primary); } body:not(.terrace-page) a:hover { color: var(--gd-color-primary-hover); } body:not(.terrace-page) button { background-color: var(--gd-surface-2); color: var(--gd-text-primary); } body:not(.terrace-page) button:hover { background-color: var(--gd-surface-3); } } /* High contrast mode support */ @media (prefers-contrast: high) { body:not(.terrace-page) button { border: 2px solid var(--gd-text-primary); } body:not(.terrace-page) button:hover { background: var(--gd-text-primary); color: var(--gd-bg-primary); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { body:not(.terrace-page) * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Print styles */ @media print { body:not(.terrace-page) { color: #000000; background-color: #ffffff; } body:not(.terrace-page) button { border: 1px solid #000000; background: #ffffff; color: #000000; } }/* src/styles/themes/all-themes.css - Import all available themes */ /* ===== CORE THEME SYSTEM ===== */ /* src/styles/themes/variables.css - Complete Arctic Frost Theme System */ /* ===== ARCTIC FROST THEME ARCHITECTURE ===== */ /* This file defines a complete, consistent Arctic Frost theme */ /* Colors are intelligently chosen for proper contrast and visual hierarchy */ :root { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Cool blue - main brand color inspired by arctic ice */ --gd-color-primary: #4A90E2; /* Main primary - arctic blue */ --gd-color-primary-50: #F0F7FF; /* Lightest - for subtle backgrounds */ --gd-color-primary-100: #E1EFFF; /* Very light - for hover states on light backgrounds */ --gd-color-primary-200: #C3DFFF; /* Light - for disabled states, light accents */ --gd-color-primary-300: #94C5FF; /* Medium light - for borders, secondary elements */ --gd-color-primary-400: #5BA0F2; /* Medium - for hover states */ --gd-color-primary-500: #4A90E2; /* Base primary color */ --gd-color-primary-600: #3B7BC9; /* Medium dark - for active states */ --gd-color-primary-700: #2D5FA0; /* Dark - for pressed states */ --gd-color-primary-800: #1E4277; /* Darker - for strong contrast */ --gd-color-primary-900: #0F254E; /* Darkest - for maximum contrast */ /* ===== SECONDARY COLOR SYSTEM ===== */ /* Icy cyan - complementary to primary, like frozen water */ --gd-color-secondary: #7DD3FC; /* Main secondary - icy cyan */ --gd-color-secondary-50: #F0FCFF; /* Lightest */ --gd-color-secondary-100: #E0F9FF; /* Very light */ --gd-color-secondary-200: #BAE6FD; /* Light */ --gd-color-secondary-300: #7DD3FC; /* Medium light */ --gd-color-secondary-400: #38BDF8; /* Medium */ --gd-color-secondary-500: #0EA5E9; /* Base secondary */ --gd-color-secondary-600: #0284C7; /* Medium dark */ --gd-color-secondary-700: #0369A1; /* Dark */ --gd-color-secondary-800: #075985; /* Darker */ --gd-color-secondary-900: #0C4A6E; /* Darkest */ /* ===== ACCENT COLOR SYSTEM ===== */ /* Aurora green - like northern lights over ice */ --gd-color-accent: #34D399; /* Main accent - aurora green */ --gd-color-accent-50: #ECFDF5; /* Lightest */ --gd-color-accent-100: #D1FAE5; /* Very light */ --gd-color-accent-200: #A7F3D0; /* Light */ --gd-color-accent-300: #6EE7B7; /* Medium light */ --gd-color-accent-400: #34D399; /* Medium */ --gd-color-accent-500: #10B981; /* Base accent */ --gd-color-accent-600: #059669; /* Medium dark */ --gd-color-accent-700: #047857; /* Dark */ --gd-color-accent-800: #065F46; /* Darker */ --gd-color-accent-900: #064E3B; /* Darkest */ /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Light backgrounds with proper contrast ratios */ --gd-bg-primary: #FAFBFF; /* Main background - very light blue-white */ --gd-bg-secondary: #F1F5FF; /* Secondary background */ --gd-bg-tertiary: #E8EFFF; /* Tertiary background */ --gd-bg-quaternary: #DFE9FF; /* Fourth level background */ --gd-bg-elevated: #FFFFFF; /* Elevated surfaces (cards, modals) */ --gd-bg-overlay: rgba(15, 37, 78, 0.4); /* Dark overlay for modals */ /* Background variants based on primary colors */ --gd-bg-primary-subtle: var(--gd-color-primary-50); /* Primary tinted background */ --gd-bg-secondary-subtle: var(--gd-color-secondary-50); /* Secondary tinted background */ --gd-bg-accent-subtle: var(--gd-color-accent-50); /* Accent tinted background */ /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Dark text for light backgrounds - ensures readability */ --gd-text-primary: #0F172A; /* Main text - very dark slate */ --gd-text-secondary: #334155; /* Secondary text - medium dark */ --gd-text-tertiary: #64748B; /* Tertiary text - medium */ --gd-text-quaternary: #94A3B8; /* Quaternary text - light gray */ --gd-text-disabled: #CBD5E1; /* Disabled text - very light */ --gd-text-inverse: #FFFFFF; /* Inverse text - white for dark backgrounds */ --gd-text-muted: #64748B; /* Muted text - same as tertiary */ /* Text on colored backgrounds */ --gd-text-on-primary: #FFFFFF; /* White text on primary backgrounds */ --gd-text-on-secondary: #FFFFFF; /* White text on secondary backgrounds */ --gd-text-on-accent: #FFFFFF; /* White text on accent backgrounds */ /* ===== SEMANTIC COLORS ===== */ /* Status colors with proper contrast */ --gd-color-success: #10B981; /* Success - emerald */ --gd-color-success-light: #ECFDF5; /* Light success background */ --gd-color-success-dark: #047857; /* Dark success for contrast */ --gd-color-warning: #F59E0B; /* Warning - amber */ --gd-color-warning-light: #FFFBEB; /* Light warning background */ --gd-color-warning-dark: #D97706; /* Dark warning for contrast */ --gd-color-danger: #EF4444; /* Danger - red */ --gd-color-danger-light: #FEF2F2; /* Light danger background */ --gd-color-danger-dark: #DC2626; /* Dark danger for contrast */ --gd-color-info: var(--gd-color-primary-500); /* Info uses primary color */ --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== BORDER SYSTEM ===== */ /* Consistent border colors with proper visibility */ --gd-border-light: rgba(148, 163, 184, 0.2); /* Very subtle borders */ --gd-border-medium: rgba(148, 163, 184, 0.3); /* Standard borders */ --gd-border-strong: rgba(148, 163, 184, 0.5); /* Strong borders */ --gd-border-primary: var(--gd-color-primary-300); /* Primary colored borders */ --gd-border-focus: var(--gd-color-primary-500); /* Focus state borders */ /* ===== SURFACE COLORS ===== */ /* Layered surface system for depth */ --gd-surface-1: var(--gd-bg-primary); /* Base surface */ --gd-surface-2: var(--gd-bg-secondary); /* Elevated surface */ --gd-surface-3: var(--gd-bg-tertiary); /* More elevated surface */ --gd-surface-4: var(--gd-bg-quaternary); /* Highest surface */ --gd-surface-raised: var(--gd-bg-elevated); /* Card/modal surface */ --gd-surface-overlay: var(--gd-bg-overlay); /* Modal backdrop */ /* ===== GRADIENTS ===== */ /* Arctic-inspired gradients */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 50%, var(--gd-color-secondary-700) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-secondary-400) 35%, var(--gd-color-accent-400) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ /* Subtle shadows for Arctic theme */ --gd-shadow-sm: 0 1px 2px 0 rgba(15, 37, 78, 0.05); --gd-shadow-base: 0 1px 3px 0 rgba(15, 37, 78, 0.1), 0 1px 2px 0 rgba(15, 37, 78, 0.06); --gd-shadow-md: 0 4px 6px -1px rgba(15, 37, 78, 0.1), 0 2px 4px -1px rgba(15, 37, 78, 0.06); --gd-shadow-lg: 0 10px 15px -3px rgba(15, 37, 78, 0.1), 0 4px 6px -2px rgba(15, 37, 78, 0.05); --gd-shadow-xl: 0 20px 25px -5px rgba(15, 37, 78, 0.1), 0 10px 10px -5px rgba(15, 37, 78, 0.04); --gd-shadow-2xl: 0 25px 50px -12px rgba(15, 37, 78, 0.25); --gd-shadow-inner: inset 0 2px 4px 0 rgba(15, 37, 78, 0.06); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(74, 144, 226, 0.15); --gd-shadow-secondary: 0 4px 14px 0 rgba(125, 211, 252, 0.15); --gd-shadow-accent: 0 4px 14px 0 rgba(52, 211, 153, 0.15); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; --gd-font-size-xs: 0.75rem; /* 12px */ --gd-font-size-sm: 0.875rem; /* 14px */ --gd-font-size-base: 1rem; /* 16px */ --gd-font-size-lg: 1.125rem; /* 18px */ --gd-font-size-xl: 1.25rem; /* 20px */ --gd-font-size-2xl: 1.5rem; /* 24px */ --gd-font-size-3xl: 1.875rem; /* 30px */ --gd-font-size-4xl: 2.25rem; /* 36px */ --gd-font-size-5xl: 3rem; /* 48px */ --gd-font-size-6xl: 4rem; /* 64px */ --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; /* 2px */ --gd-space-1: 0.25rem; /* 4px */ --gd-space-1_5: 0.375rem; /* 6px */ --gd-space-2: 0.5rem; /* 8px */ --gd-space-2_5: 0.625rem; /* 10px */ --gd-space-3: 0.75rem; /* 12px */ --gd-space-3_5: 0.875rem; /* 14px */ --gd-space-4: 1rem; /* 16px */ --gd-space-5: 1.25rem; /* 20px */ --gd-space-6: 1.5rem; /* 24px */ --gd-space-7: 1.75rem; /* 28px */ --gd-space-8: 2rem; /* 32px */ --gd-space-9: 2.25rem; /* 36px */ --gd-space-10: 2.5rem; /* 40px */ --gd-space-11: 2.75rem; /* 44px */ --gd-space-12: 3rem; /* 48px */ --gd-space-14: 3.5rem; /* 56px */ --gd-space-16: 4rem; /* 64px */ --gd-space-20: 5rem; /* 80px */ --gd-space-24: 6rem; /* 96px */ --gd-space-28: 7rem; /* 112px */ --gd-space-32: 8rem; /* 128px */ /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; /* 2px */ --gd-radius-base: 0.25rem; /* 4px */ --gd-radius-md: 0.375rem; /* 6px */ --gd-radius-lg: 0.5rem; /* 8px */ --gd-radius-xl: 0.75rem; /* 12px */ --gd-radius-2xl: 1rem; /* 16px */ --gd-radius-3xl: 1.5rem; /* 24px */ --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* 70px */ /* ===== BREAKPOINTS (for reference) ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(255, 255, 255, 0.85); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: var(--gd-border-light); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-elevated); --gd-input-border: var(--gd-border-medium); --gd-input-border-hover: var(--gd-border-strong); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(74, 144, 226, 0.1); /* Overlays & Modals */ --gd-overlay-bg: rgba(15, 37, 78, 0.4); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: var(--gd-shadow-lg); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); } /* ===== UTILITY CLASSES ===== */ .gd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gd-no-scroll { overflow: hidden; } .gd-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ===== REDUCED MOTION SUPPORT ===== */ @media (prefers-reduced-motion: reduce) { :root { --gd-transition-fast: none; --gd-transition-base: none; --gd-transition-slow: none; --gd-transition-slowest: none; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== HIGH CONTRAST SUPPORT ===== */ @media (prefers-contrast: high) { :root { --gd-border-light: rgba(148, 163, 184, 0.4); --gd-border-medium: rgba(148, 163, 184, 0.6); --gd-border-strong: rgba(148, 163, 184, 0.8); --gd-text-primary: #000000; --gd-text-secondary: #1a1a1a; } } /* ===== THEME VARIATIONS ===== */ /* Import all theme variations - each theme overrides the base variables */ html[data-theme="arctic-frost"] { /* ===== PRIMARY COLOR SYSTEM ===== */ --gd-color-primary: #4169e1; --gd-color-primary-50: #f0f4ff; --gd-color-primary-100: #e1efff; --gd-color-primary-200: #c3dfff; --gd-color-primary-300: #94c5ff; --gd-color-primary-400: #5ba0f2; --gd-color-primary-500: #4169e1; --gd-color-primary-600: #3355cc; --gd-color-primary-700: #2640b8; --gd-color-primary-800: #1e338f; --gd-color-primary-900: #1a2866; /* ===== SECONDARY COLOR SYSTEM ===== */ --gd-color-secondary: #87ceeb; --gd-color-secondary-50: #f8fcff; --gd-color-secondary-100: #e6f7ff; --gd-color-secondary-200: #b8e6ff; --gd-color-secondary-300: #87ceeb; --gd-color-secondary-400: #78c4e6; --gd-color-secondary-500: #5fa8d1; --gd-color-secondary-600: #4a8cb8; --gd-color-secondary-700: #3d709e; --gd-color-secondary-800: #2e5485; --gd-color-secondary-900: #1f386b; /* ===== ACCENT COLOR SYSTEM ===== */ --gd-color-accent: #00ced1; --gd-color-accent-50: #f0feff; --gd-color-accent-100: #ccfcff; --gd-color-accent-200: #99f7ff; --gd-color-accent-300: #66f2ff; --gd-color-accent-400: #33edff; --gd-color-accent-500: #00ced1; --gd-color-accent-600: #00b8bb; --gd-color-accent-700: #00a0a3; --gd-color-accent-800: #00888b; --gd-color-accent-900: #006b73; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ --gd-bg-primary: #f0f8ff; --gd-bg-secondary: #e6f3ff; --gd-bg-tertiary: #ddeeff; --gd-bg-quaternary: #d4e9ff; --gd-bg-elevated: #ffffff; --gd-bg-overlay: rgba(26, 40, 184, 0.4); --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #1a1a2e; --gd-text-secondary: #2e4057; --gd-text-tertiary: #3d5a80; --gd-text-quaternary: #5c7a99; --gd-text-disabled: #8fa4c4; --gd-text-inverse: #ffffff; --gd-text-muted: #5c7a99; --gd-text-on-primary: #ffffff; --gd-text-on-secondary: #ffffff; --gd-text-on-accent: #ffffff; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #059669; --gd-color-success-light: #ecfdf5; --gd-color-success-dark: #047857; --gd-color-warning: #d97706; --gd-color-warning-light: #fffbeb; --gd-color-warning-dark: #b45309; --gd-color-danger: #dc2626; --gd-color-danger-light: #fef2f2; --gd-color-danger-dark: #b91c1c; --gd-color-info: var(--gd-color-primary-500); --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(65, 105, 225, 0.15); --gd-border-medium: rgba(65, 105, 225, 0.25); --gd-border-strong: rgba(65, 105, 225, 0.4); --gd-border-primary: var(--gd-color-primary-300); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, #4169e1 0%, #87ceeb 50%, #00ced1 100%); --gd-gradient-secondary: linear-gradient(135deg, #87ceeb 0%, #00ced1 100%); --gd-gradient-accent: linear-gradient(135deg, #00ced1 0%, #4169e1 100%); --gd-gradient-hero: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #4169e1 100%); --gd-gradient-subtle: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 50%, #ddeeff 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(26, 40, 184, 0.08); --gd-shadow-base: 0 1px 3px 0 rgba(26, 40, 184, 0.12), 0 1px 2px 0 rgba(26, 40, 184, 0.08); --gd-shadow-md: 0 4px 6px -1px rgba(26, 40, 184, 0.12), 0 2px 4px -1px rgba(26, 40, 184, 0.08); --gd-shadow-lg: 0 10px 15px -3px rgba(26, 40, 184, 0.12), 0 4px 6px -2px rgba(26, 40, 184, 0.06); --gd-shadow-xl: 0 20px 25px -5px rgba(26, 40, 184, 0.12), 0 10px 10px -5px rgba(26, 40, 184, 0.05); --gd-shadow-2xl: 0 25px 50px -12px rgba(26, 40, 184, 0.3); --gd-shadow-inner: inset 0 2px 4px 0 rgba(26, 40, 184, 0.08); --gd-shadow-primary: 0 4px 14px 0 rgba(65, 105, 225, 0.2); --gd-shadow-secondary: 0 4px 14px 0 rgba(135, 206, 235, 0.2); --gd-shadow-accent: 0 4px 14px 0 rgba(0, 206, 209, 0.2); /* ===== COMPONENT SPECIFIC ===== */ --gd-nav-bg: rgba(240, 248, 255, 0.95); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(65, 105, 225, 0.2); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-input-bg: var(--gd-bg-elevated); --gd-input-border: var(--gd-border-medium); --gd-input-border-hover: var(--gd-border-strong); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-shadow-focus: 0 0 0 3px rgba(65, 105, 225, 0.15); --gd-overlay-bg: rgba(26, 40, 184, 0.4); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-shadow: var(--gd-shadow-lg); --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); } html[data-theme="dark-cyber"] { /* ===== PRIMARY COLOR SYSTEM ===== */ --gd-color-primary: #00ffff; --gd-color-primary-50: #001a1a; --gd-color-primary-100: #003333; --gd-color-primary-200: #004d4d; --gd-color-primary-300: #006666; --gd-color-primary-400: #00cccc; --gd-color-primary-500: #00ffff; --gd-color-primary-600: #00e6e6; --gd-color-primary-700: #00cccc; --gd-color-primary-800: #00b3b3; --gd-color-primary-900: #009999; /* ===== SECONDARY COLOR SYSTEM ===== */ --gd-color-secondary: #ff00ff; --gd-color-secondary-50: #1a001a; --gd-color-secondary-100: #330033; --gd-color-secondary-200: #4d004d; --gd-color-secondary-300: #660066; --gd-color-secondary-400: #cc00cc; --gd-color-secondary-500: #ff00ff; --gd-color-secondary-600: #e600e6; --gd-color-secondary-700: #cc00cc; --gd-color-secondary-800: #b300b3; --gd-color-secondary-900: #990099; /* ===== ACCENT COLOR SYSTEM ===== */ --gd-color-accent: #00ff88; --gd-color-accent-50: #001a0f; --gd-color-accent-100: #00331f; --gd-color-accent-200: #004d2e; --gd-color-accent-300: #00663d; --gd-color-accent-400: #00cc66; --gd-color-accent-500: #00ff88; --gd-color-accent-600: #00e677; --gd-color-accent-700: #00cc66; --gd-color-accent-800: #00b355; --gd-color-accent-900: #009944; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ --gd-bg-primary: #0a0a0f; --gd-bg-secondary: #0f0f1a; --gd-bg-tertiary: #1a1a2e; --gd-bg-quaternary: #262647; --gd-bg-elevated: #1a1a2e; --gd-bg-overlay: rgba(0, 255, 255, 0.2); --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #ffffff; --gd-text-secondary: #b3b3ff; --gd-text-tertiary: #8080ff; --gd-text-quaternary: #6666cc; --gd-text-disabled: #404080; --gd-text-inverse: #0a0a0f; --gd-text-muted: #6666cc; --gd-text-on-primary: #000000; --gd-text-on-secondary: #000000; --gd-text-on-accent: #000000; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #00ff88; --gd-color-success-light: #001a0f; --gd-color-success-dark: #00cc66; --gd-color-warning: #ffaa00; --gd-color-warning-light: #1a1100; --gd-color-warning-dark: #cc8800; --gd-color-danger: #ff0066; --gd-color-danger-light: #1a0009; --gd-color-danger-dark: #cc0052; --gd-color-info: #0088ff; --gd-color-info-light: #000f1a; --gd-color-info-dark: #0066cc; /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(0, 255, 255, 0.2); --gd-border-medium: rgba(0, 255, 255, 0.4); --gd-border-strong: rgba(0, 255, 255, 0.6); --gd-border-primary: var(--gd-color-primary-600); --gd-border-focus: var(--gd-color-primary); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-secondary); --gd-surface-2: var(--gd-bg-tertiary); --gd-surface-3: var(--gd-bg-quaternary); --gd-surface-4: #333366; --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%); --gd-gradient-secondary: linear-gradient(135deg, #0088ff 0%, #8800ff 100%); --gd-gradient-accent: linear-gradient(45deg, #00ff88, #00ffff); --gd-gradient-hero: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%); --gd-gradient-subtle: linear-gradient(135deg, #0a0a0f 0%, #0f0f1a 50%, #1a1a2e 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(0, 255, 255, 0.1); --gd-shadow-base: 0 1px 3px 0 rgba(0, 255, 255, 0.2), 0 1px 2px 0 rgba(0, 255, 255, 0.1); --gd-shadow-md: 0 4px 6px -1px rgba(0, 255, 255, 0.2), 0 2px 4px -1px rgba(0, 255, 255, 0.1); --gd-shadow-lg: 0 10px 15px -3px rgba(0, 255, 255, 0.3), 0 4px 6px -2px rgba(0, 255, 255, 0.2); --gd-shadow-xl: 0 20px 25px -5px rgba(0, 255, 255, 0.4), 0 10px 10px -5px rgba(0, 255, 255, 0.3); --gd-shadow-2xl: 0 25px 50px -12px rgba(0, 255, 255, 0.5); --gd-shadow-inner: inset 0 2px 4px 0 rgba(0, 255, 255, 0.2); --gd-shadow-primary: 0 4px 14px 0 rgba(0, 255, 255, 0.4); --gd-shadow-secondary: 0 4px 14px 0 rgba(255, 0, 255, 0.4); --gd-shadow-accent: 0 4px 14px 0 rgba(0, 255, 136, 0.4); /* ===== COMPONENT SPECIFIC ===== */ --gd-nav-bg: rgba(10, 10, 15, 0.95); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(0, 255, 255, 0.2); --gd-nav-shadow: 0 4px 20px rgba(0, 255, 255, 0.3); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-primary); --gd-nav-link-active: var(--gd-color-accent); --gd-card-bg: var(--gd-surface-2); --gd-card-border: rgba(0, 255, 255, 0.2); --gd-card-shadow: 0 4px 20px rgba(0, 255, 255, 0.2); --gd-card-shadow-hover: 0 8px 30px rgba(0, 255, 255, 0.4); --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: rgba(0, 255, 255, 0.3); --gd-input-border-hover: rgba(0, 255, 255, 0.5); --gd-input-border-focus: var(--gd-color-primary); --gd-input-shadow-focus: 0 0 0 3px rgba(0, 255, 255, 0.2); --gd-overlay-bg: rgba(0, 255, 255, 0.2); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-shadow: 0 25px 50px -12px rgba(0, 255, 255, 0.6); --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-shadow: 0 10px 20px rgba(0, 255, 255, 0.4); --gd-loading-primary: var(--gd-color-primary); --gd-loading-secondary: var(--gd-color-primary-300); --gd-progress-bg: var(--gd-color-primary-200); --gd-progress-fill: var(--gd-color-primary); /* ===== CYBER SPECIFIC EFFECTS ===== */ --gd-cyber-glow: 0 0 20px rgba(0, 255, 255, 0.5); --gd-cyber-text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); --gd-cyber-border-glow: 0 0 15px rgba(0, 255, 255, 0.6); } /* Default theme - uses base variables from variables.css */ /* This theme doesn't override any variables, using the Arctic Frost base theme */ :root { /* Default theme uses base Arctic Frost variables */ /* No overrides needed - variables.css provides the complete theme */ } /* src/styles/themes/electric-storm.css - ⚡ Electric Storm Theme (Refined) */ html[data-theme="electric-storm"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Electric blue-cyan - vibrant yet pleasing */ --gd-color-primary: #00D4FF; --gd-color-primary-50: #F0FDFF; --gd-color-primary-100: #E0F9FF; --gd-color-primary-200: #BAF2FF; --gd-color-primary-300: #7AECFF; --gd-color-primary-400: #33E3FF; --gd-color-primary-500: #00D4FF; --gd-color-primary-600: #00B8E6; --gd-color-primary-700: #009CC4; --gd-color-primary-800: #0080A1; --gd-color-primary-900: #006B87; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Electric purple - vibrant complement to the cyan */ --gd-color-secondary: #8A2BE2; --gd-color-secondary-50: #F7F2FF; --gd-color-secondary-100: #EEE5FF; --gd-color-secondary-200: #DCC9FF; --gd-color-secondary-300: #C5A4FF; --gd-color-secondary-400: #A972FF; --gd-color-secondary-500: #8A2BE2; --gd-color-secondary-600: #7B24CB; --gd-color-secondary-700: #6B1FB3; --gd-color-secondary-800: #5A1A9B; --gd-color-secondary-900: #4A1580; /* ===== ACCENT COLOR SYSTEM ===== */ /* Electric lime - energetic and vibrant */ --gd-color-accent: #ADFF2F; --gd-color-accent-50: #FCFFF7; --gd-color-accent-100: #F7FFED; --gd-color-accent-200: #EDFFCC; --gd-color-accent-300: #DDFF9A; --gd-color-accent-400: #C9FF5C; --gd-color-accent-500: #ADFF2F; --gd-color-accent-600: #9AE629; --gd-color-accent-700: #86CC22; --gd-color-accent-800: #72B31C; --gd-color-accent-900: #5E9915; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Darker electric backgrounds for better contrast with bright colors */ --gd-bg-primary: #0A0B1A; --gd-bg-secondary: #131426; --gd-bg-tertiary: #1C1D33; --gd-bg-quaternary: #25263F; --gd-bg-elevated: #131426; --gd-bg-overlay: rgba(0, 212, 255, 0.1); --gd-bg-primary-subtle: #161729; --gd-bg-secondary-subtle: #0A0B1A; --gd-bg-accent-subtle: #0F1A0F; /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #E6F7FF; --gd-text-secondary: #B3E5FF; --gd-text-tertiary: #80D4FF; --gd-text-quaternary: #4DC2FF; --gd-text-disabled: #2A7A9A; --gd-text-inverse: #0A0B1A; --gd-text-muted: #66B8E6; --gd-text-on-primary: #0A0B1A; --gd-text-on-secondary: #E6F7FF; --gd-text-on-accent: #0A0B1A; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #4ADE80; --gd-color-success-light: #0F1A0F; --gd-color-success-dark: #22C55E; --gd-color-warning: #FBBF24; --gd-color-warning-light: #1F1A0D; --gd-color-warning-dark: #F59E0B; --gd-color-danger: #F87171; --gd-color-danger-light: #1F1212; --gd-color-danger-dark: #EF4444; --gd-color-info: var(--gd-color-accent-500); --gd-color-info-light: var(--gd-color-accent-50); --gd-color-info-dark: var(--gd-color-accent-700); /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(0, 212, 255, 0.2); --gd-border-medium: rgba(0, 212, 255, 0.35); --gd-border-strong: rgba(0, 212, 255, 0.5); --gd-border-primary: var(--gd-color-primary-400); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-400) 0%, var(--gd-color-secondary-600) 50%, var(--gd-color-secondary-800) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, #050510 0%, var(--gd-bg-primary) 30%, var(--gd-bg-secondary) 70%, rgba(138, 43, 226, 0.3) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(0, 212, 255, 0.15); --gd-shadow-base: 0 1px 3px 0 rgba(0, 212, 255, 0.2), 0 1px 2px 0 rgba(0, 212, 255, 0.15); --gd-shadow-md: 0 4px 6px -1px rgba(0, 212, 255, 0.2), 0 2px 4px -1px rgba(0, 212, 255, 0.15); --gd-shadow-lg: 0 10px 15px -3px rgba(0, 212, 255, 0.25), 0 4px 6px -2px rgba(0, 212, 255, 0.2); --gd-shadow-xl: 0 20px 25px -5px rgba(0, 212, 255, 0.3), 0 10px 10px -5px rgba(0, 212, 255, 0.25); --gd-shadow-2xl: 0 25px 50px -12px rgba(0, 212, 255, 0.35); --gd-shadow-inner: inset 0 2px 4px 0 rgba(0, 212, 255, 0.2); --gd-shadow-primary: 0 4px 14px 0 rgba(0, 212, 255, 0.3); --gd-shadow-secondary: 0 4px 14px 0 rgba(138, 43, 226, 0.25); --gd-shadow-accent: 0 4px 14px 0 rgba(173, 255, 47, 0.25); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; --gd-font-size-xs: 0.75rem; --gd-font-size-sm: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.125rem; --gd-font-size-xl: 1.25rem; --gd-font-size-2xl: 1.5rem; --gd-font-size-3xl: 1.875rem; --gd-font-size-4xl: 2.25rem; --gd-font-size-5xl: 3rem; --gd-font-size-6xl: 4rem; --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; --gd-space-1: 0.25rem; --gd-space-1_5: 0.375rem; --gd-space-2: 0.5rem; --gd-space-2_5: 0.625rem; --gd-space-3: 0.75rem; --gd-space-3_5: 0.875rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-7: 1.75rem; --gd-space-8: 2rem; --gd-space-9: 2.25rem; --gd-space-10: 2.5rem; --gd-space-11: 2.75rem; --gd-space-12: 3rem; --gd-space-14: 3.5rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-28: 7rem; --gd-space-32: 8rem; /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; --gd-radius-base: 0.25rem; --gd-radius-md: 0.375rem; --gd-radius-lg: 0.5rem; --gd-radius-xl: 0.75rem; --gd-radius-2xl: 1rem; --gd-radius-3xl: 1.5rem; --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* ===== BREAKPOINTS ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(10, 11, 26, 0.95); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(0, 212, 255, 0.3); --gd-nav-shadow: 0 4px 20px rgba(0, 212, 255, 0.2); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-primary-400); --gd-nav-link-active: var(--gd-color-accent-400); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: rgba(0, 212, 255, 0.2); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: 0 4px 20px rgba(0, 212, 255, 0.1); --gd-card-shadow-hover: 0 8px 30px rgba(0, 212, 255, 0.25); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: rgba(0, 212, 255, 0.25); --gd-input-border-hover: rgba(0, 212, 255, 0.4); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(0, 212, 255, 0.15); /* Overlays & Modals */ --gd-overlay-bg: rgba(0, 212, 255, 0.15); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: 0 25px 50px -12px rgba(0, 212, 255, 0.35); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: 0 10px 20px rgba(0, 212, 255, 0.25); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-300); --gd-progress-bg: var(--gd-color-primary-200); --gd-progress-fill: var(--gd-color-primary-500); /* ===== ELECTRIC STORM SPECIFIC EFFECTS ===== */ --gd-electric-glow: 0 0 20px rgba(0, 212, 255, 0.4); --gd-electric-text-shadow: 0 0 10px rgba(0, 212, 255, 0.6); --gd-electric-border-glow: 0 0 15px rgba(0, 212, 255, 0.5); --gd-electric-pulse: 0 0 30px rgba(173, 255, 47, 0.3); --gd-electric-storm-gradient: linear-gradient(45deg, var(--gd-color-primary-500), var(--gd-color-secondary-500), var(--gd-color-accent-500)); } /* src/styles/themes/forest-tech.css - 🌲 Complete Forest Tech Theme */ html[data-theme="forest-tech"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Tech-enhanced forest green - main brand color */ --gd-color-primary: #22c55e; --gd-color-primary-50: #f0fdf4; --gd-color-primary-100: #dcfce7; --gd-color-primary-200: #bbf7d0; --gd-color-primary-300: #86efac; --gd-color-primary-400: #4ade80; --gd-color-primary-500: #22c55e; --gd-color-primary-600: #16a34a; --gd-color-primary-700: #15803d; --gd-color-primary-800: #166534; --gd-color-primary-900: #14532d; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Digital teal - tech-forest fusion */ --gd-color-secondary: #14b8a6; --gd-color-secondary-50: #f0fdfa; --gd-color-secondary-100: #ccfbf1; --gd-color-secondary-200: #99f6e4; --gd-color-secondary-300: #5eead4; --gd-color-secondary-400: #2dd4bf; --gd-color-secondary-500: #14b8a6; --gd-color-secondary-600: #0d9488; --gd-color-secondary-700: #0f766e; --gd-color-secondary-800: #115e59; --gd-color-secondary-900: #134e4a; /* ===== ACCENT COLOR SYSTEM ===== */ /* Electric lime - tech energy */ --gd-color-accent: #84cc16; --gd-color-accent-50: #f7fee7; --gd-color-accent-100: #ecfccb; --gd-color-accent-200: #d9f99d; --gd-color-accent-300: #bef264; --gd-color-accent-400: #a3e635; --gd-color-accent-500: #84cc16; --gd-color-accent-600: #65a30d; --gd-color-accent-700: #4d7c0f; --gd-color-accent-800: #365314; --gd-color-accent-900: #1a2e05; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #10b981; --gd-color-success-light: #d1fae5; --gd-color-success-dark: #047857; --gd-color-warning: #f59e0b; --gd-color-warning-light: #fef3c7; --gd-color-warning-dark: #d97706; --gd-color-danger: #ef4444; --gd-color-danger-light: #fecaca; --gd-color-danger-dark: #dc2626; --gd-color-info: var(--gd-color-secondary-500); --gd-color-info-light: var(--gd-color-secondary-50); --gd-color-info-dark: var(--gd-color-secondary-700); /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Lighter, more tech-inspired backgrounds */ --gd-bg-primary: #0a1f0f; --gd-bg-secondary: #0f2a16; --gd-bg-tertiary: #15351d; --gd-bg-quaternary: #1a4024; --gd-bg-elevated: #0f2a16; --gd-bg-overlay: rgba(34, 197, 94, 0.15); /* Background variants based on primary colors */ --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Enhanced contrast for better readability */ --gd-text-primary: #ffffff; --gd-text-secondary: #d1fae5; --gd-text-tertiary: #bbf7d0; --gd-text-quaternary: #86efac; --gd-text-disabled: #4ade80; --gd-text-inverse: #0a1f0f; --gd-text-muted: #86efac; /* Text on colored backgrounds */ --gd-text-on-primary: #ffffff; --gd-text-on-secondary: #ffffff; --gd-text-on-accent: #0a1f0f; /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(34, 197, 94, 0.15); --gd-border-medium: rgba(34, 197, 94, 0.25); --gd-border-strong: rgba(34, 197, 94, 0.4); --gd-border-primary: var(--gd-color-primary-400); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 50%, var(--gd-color-secondary-700) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-secondary-400) 35%, var(--gd-color-accent-400) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(34, 197, 94, 0.1); --gd-shadow-base: 0 1px 3px 0 rgba(34, 197, 94, 0.15), 0 1px 2px 0 rgba(34, 197, 94, 0.1); --gd-shadow-md: 0 4px 6px -1px rgba(34, 197, 94, 0.15), 0 2px 4px -1px rgba(34, 197, 94, 0.1); --gd-shadow-lg: 0 10px 15px -3px rgba(34, 197, 94, 0.2), 0 4px 6px -2px rgba(34, 197, 94, 0.15); --gd-shadow-xl: 0 20px 25px -5px rgba(34, 197, 94, 0.25), 0 10px 10px -5px rgba(34, 197, 94, 0.2); --gd-shadow-2xl: 0 25px 50px -12px rgba(34, 197, 94, 0.3); --gd-shadow-inner: inset 0 2px 4px 0 rgba(34, 197, 94, 0.15); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(34, 197, 94, 0.25); --gd-shadow-secondary: 0 4px 14px 0 rgba(20, 184, 166, 0.25); --gd-shadow-accent: 0 4px 14px 0 rgba(132, 204, 22, 0.25); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; --gd-font-size-xs: 0.75rem; --gd-font-size-sm: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.125rem; --gd-font-size-xl: 1.25rem; --gd-font-size-2xl: 1.5rem; --gd-font-size-3xl: 1.875rem; --gd-font-size-4xl: 2.25rem; --gd-font-size-5xl: 3rem; --gd-font-size-6xl: 4rem; --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; --gd-space-1: 0.25rem; --gd-space-1_5: 0.375rem; --gd-space-2: 0.5rem; --gd-space-2_5: 0.625rem; --gd-space-3: 0.75rem; --gd-space-3_5: 0.875rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-7: 1.75rem; --gd-space-8: 2rem; --gd-space-9: 2.25rem; --gd-space-10: 2.5rem; --gd-space-11: 2.75rem; --gd-space-12: 3rem; --gd-space-14: 3.5rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-28: 7rem; --gd-space-32: 8rem; /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; --gd-radius-base: 0.25rem; --gd-radius-md: 0.375rem; --gd-radius-lg: 0.5rem; --gd-radius-xl: 0.75rem; --gd-radius-2xl: 1rem; --gd-radius-3xl: 1.5rem; --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* ===== BREAKPOINTS (for reference) ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(15, 42, 22, 0.9); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(34, 197, 94, 0.2); --gd-nav-shadow: 0 4px 20px rgba(34, 197, 94, 0.2); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-accent-400); --gd-nav-link-active: var(--gd-color-primary-400); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-2); --gd-card-border: rgba(34, 197, 94, 0.2); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: 0 8px 30px rgba(132, 204, 22, 0.3); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: rgba(34, 197, 94, 0.25); --gd-input-border-hover: rgba(34, 197, 94, 0.4); --gd-input-border-focus: var(--gd-color-primary-400); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(34, 197, 94, 0.2); /* Overlays & Modals */ --gd-overlay-bg: rgba(34, 197, 94, 0.2); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: 0 25px 50px -12px rgba(34, 197, 94, 0.4); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: 0 10px 20px rgba(34, 197, 94, 0.25); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-400); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-200); --gd-progress-fill: var(--gd-color-primary-400); /* ===== FOREST TECH SPECIFIC EFFECTS ===== */ --gd-forest-glow: 0 0 20px rgba(34, 197, 94, 0.4); --gd-forest-text-glow: 0 0 10px rgba(132, 204, 22, 0.6); --gd-forest-border-glow: 0 0 15px rgba(34, 197, 94, 0.5); --gd-forest-accent-glow: 0 0 25px rgba(20, 184, 166, 0.4); } /* ===== FOREST TECH THEME SPECIFIC ENHANCEMENTS ===== */ html[data-theme="forest-tech"] .app__brand { background: var(--gd-gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: var(--gd-forest-text-glow); } html[data-theme="forest-tech"] .app__button--primary { box-shadow: var(--gd-forest-glow); border: 1px solid var(--gd-color-primary-400); position: relative; overflow: hidden; } html[data-theme="forest-tech"] .app__button--primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(132, 204, 22, 0.3), transparent); transition: left 0.5s; } html[data-theme="forest-tech"] .app__button--primary:hover::before { left: 100%; } html[data-theme="forest-tech"] .app__button--primary:hover { box-shadow: var(--gd-forest-border-glow); transform: translateY(-2px); } html[data-theme="forest-tech"] .app__project-card { border: 1px solid rgba(34, 197, 94, 0.2); transition: all 0.3s ease; } html[data-theme="forest-tech"] .app__project-card:hover { border-color: var(--gd-color-accent-400); box-shadow: var(--gd-forest-accent-glow); transform: translateY(-4px); } html[data-theme="forest-tech"] .modern-nav__link { position: relative; transition: all 0.3s ease; } html[data-theme="forest-tech"] .modern-nav__link:hover { color: var(--gd-color-accent-400); text-shadow: 0 0 8px rgba(132, 204, 22, 0.5); } html[data-theme="forest-tech"] .modern-nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--gd-gradient-accent); transition: width 0.3s ease; } html[data-theme="forest-tech"] .modern-nav__link:hover::after { width: 100%; } /* ===== UTILITY CLASSES ===== */ .gd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gd-no-scroll { overflow: hidden; } .gd-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* ===== REDUCED MOTION SUPPORT ===== */ @media (prefers-reduced-motion: reduce) { html[data-theme="forest-tech"] { --gd-transition-fast: none; --gd-transition-base: none; --gd-transition-slow: none; --gd-transition-slowest: none; } html[data-theme="forest-tech"] * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== HIGH CONTRAST SUPPORT ===== */ @media (prefers-contrast: high) { html[data-theme="forest-tech"] { --gd-border-light: rgba(34, 197, 94, 0.4); --gd-border-medium: rgba(34, 197, 94, 0.6); --gd-border-strong: rgba(34, 197, 94, 0.8); --gd-text-primary: #ffffff; --gd-text-secondary: #e5f5e5; } } /* src/styles/themes/gaming-inferno.css - 🔥 Gaming Inferno Theme (Refined) */ html[data-theme="gaming-inferno"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Softer orange-red - less harsh, more sophisticated */ --gd-color-primary: #E85A4F; --gd-color-primary-50: #FEF7F6; --gd-color-primary-100: #FDEAE8; --gd-color-primary-200: #FACAC5; --gd-color-primary-300: #F7AAA1; --gd-color-primary-400: #F0827A; --gd-color-primary-500: #E85A4F; --gd-color-primary-600: #D14A3E; --gd-color-primary-700: #B83A2D; --gd-color-primary-800: #9F2B1C; --gd-color-primary-900: #851E0F; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Warmer coral - complements the primary while being less intense */ --gd-color-secondary: #D2691E; --gd-color-secondary-50: #FDF6F0; --gd-color-secondary-100: #FAE8D9; --gd-color-secondary-200: #F5D1B3; --gd-color-secondary-300: #EFBA8C; --gd-color-secondary-400: #E6A066; --gd-color-secondary-500: #D2691E; --gd-color-secondary-600: #BC5E1A; --gd-color-secondary-700: #A65316; --gd-color-secondary-800: #904712; --gd-color-secondary-900: #7A3C0E; /* ===== ACCENT COLOR SYSTEM ===== */ /* Muted gold - elegant and less flashy */ --gd-color-accent: #DAA520; --gd-color-accent-50: #FEFCF0; --gd-color-accent-100: #FDF7D9; --gd-color-accent-200: #FBEFB3; --gd-color-accent-300: #F8E78C; --gd-color-accent-400: #F4DF66; --gd-color-accent-500: #DAA520; --gd-color-accent-600: #C4951D; --gd-color-accent-700: #AE851A; --gd-color-accent-800: #987516; --gd-color-accent-900: #826513; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Much lighter, more usable backgrounds */ --gd-bg-primary: #2A1F1A; --gd-bg-secondary: #352B24; --gd-bg-tertiary: #40362E; --gd-bg-quaternary: #4B4138; --gd-bg-elevated: #352B24; --gd-bg-overlay: rgba(232, 90, 79, 0.15); --gd-bg-primary-subtle: #3D2722; --gd-bg-secondary-subtle: #2A1F1A; --gd-bg-accent-subtle: #3D3520; /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #FAF5F2; --gd-text-secondary: #E8D5CB; --gd-text-tertiary: #D6C0B3; --gd-text-quaternary: #C4AA9B; --gd-text-disabled: #A3917F; --gd-text-inverse: #2A1F1A; --gd-text-muted: #C4AA9B; --gd-text-on-primary: #FAF5F2; --gd-text-on-secondary: #FAF5F2; --gd-text-on-accent: #2A1F1A; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #4ADE80; --gd-color-success-light: #0F1A0F; --gd-color-success-dark: #22C55E; --gd-color-warning: #FBBF24; --gd-color-warning-light: #1F1A0D; --gd-color-warning-dark: #F59E0B; --gd-color-danger: #F87171; --gd-color-danger-light: #1F1212; --gd-color-danger-dark: #EF4444; --gd-color-info: var(--gd-color-accent-500); --gd-color-info-light: var(--gd-color-accent-50); --gd-color-info-dark: var(--gd-color-accent-700); /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(232, 90, 79, 0.15); --gd-border-medium: rgba(232, 90, 79, 0.25); --gd-border-strong: rgba(232, 90, 79, 0.35); --gd-border-primary: var(--gd-color-primary-400); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-400) 0%, var(--gd-color-secondary-600) 50%, var(--gd-color-secondary-800) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, #1A120F 0%, var(--gd-bg-primary) 30%, var(--gd-bg-secondary) 70%, var(--gd-color-secondary-700) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(232, 90, 79, 0.1); --gd-shadow-base: 0 1px 3px 0 rgba(232, 90, 79, 0.15), 0 1px 2px 0 rgba(232, 90, 79, 0.1); --gd-shadow-md: 0 4px 6px -1px rgba(232, 90, 79, 0.15), 0 2px 4px -1px rgba(232, 90, 79, 0.1); --gd-shadow-lg: 0 10px 15px -3px rgba(232, 90, 79, 0.2), 0 4px 6px -2px rgba(232, 90, 79, 0.15); --gd-shadow-xl: 0 20px 25px -5px rgba(232, 90, 79, 0.25), 0 10px 10px -5px rgba(232, 90, 79, 0.2); --gd-shadow-2xl: 0 25px 50px -12px rgba(232, 90, 79, 0.3); --gd-shadow-inner: inset 0 2px 4px 0 rgba(232, 90, 79, 0.15); --gd-shadow-primary: 0 4px 14px 0 rgba(232, 90, 79, 0.2); --gd-shadow-secondary: 0 4px 14px 0 rgba(210, 105, 30, 0.2); --gd-shadow-accent: 0 4px 14px 0 rgba(218, 165, 32, 0.2); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; --gd-font-size-xs: 0.75rem; --gd-font-size-sm: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.125rem; --gd-font-size-xl: 1.25rem; --gd-font-size-2xl: 1.5rem; --gd-font-size-3xl: 1.875rem; --gd-font-size-4xl: 2.25rem; --gd-font-size-5xl: 3rem; --gd-font-size-6xl: 4rem; --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; --gd-space-1: 0.25rem; --gd-space-1_5: 0.375rem; --gd-space-2: 0.5rem; --gd-space-2_5: 0.625rem; --gd-space-3: 0.75rem; --gd-space-3_5: 0.875rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-7: 1.75rem; --gd-space-8: 2rem; --gd-space-9: 2.25rem; --gd-space-10: 2.5rem; --gd-space-11: 2.75rem; --gd-space-12: 3rem; --gd-space-14: 3.5rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-28: 7rem; --gd-space-32: 8rem; /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; --gd-radius-base: 0.25rem; --gd-radius-md: 0.375rem; --gd-radius-lg: 0.5rem; --gd-radius-xl: 0.75rem; --gd-radius-2xl: 1rem; --gd-radius-3xl: 1.5rem; --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* ===== BREAKPOINTS ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(42, 31, 26, 0.9); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(232, 90, 79, 0.2); --gd-nav-shadow: 0 4px 20px rgba(232, 90, 79, 0.15); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-primary-400); --gd-nav-link-active: var(--gd-color-accent-400); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: rgba(232, 90, 79, 0.15); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: 0 4px 20px rgba(210, 105, 30, 0.1); --gd-card-shadow-hover: 0 8px 30px rgba(232, 90, 79, 0.2); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: rgba(232, 90, 79, 0.2); --gd-input-border-hover: rgba(232, 90, 79, 0.3); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(232, 90, 79, 0.1); /* Overlays & Modals */ --gd-overlay-bg: rgba(232, 90, 79, 0.15); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: 0 25px 50px -12px rgba(232, 90, 79, 0.3); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: 0 10px 20px rgba(232, 90, 79, 0.2); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); /* ===== GAMING INFERNO SPECIFIC EFFECTS ===== */ --gd-fire-glow: 0 0 15px rgba(232, 90, 79, 0.3); --gd-fire-text-shadow: 0 0 8px rgba(218, 165, 32, 0.5); --gd-fire-border-glow: 0 0 12px rgba(232, 90, 79, 0.4); --gd-ember-glow: 0 0 8px rgba(218, 165, 32, 0.3); --gd-warm-glow: 0 0 20px rgba(210, 105, 30, 0.2); } /* src/styles/themes/minimal-green.css - 🍃 Minimal Green Theme */ html[data-theme="minimal-green"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Fresh green - main brand color inspired by nature */ --gd-color-primary: #10b981; --gd-color-primary-50: #ecfdf5; --gd-color-primary-100: #d1fae5; --gd-color-primary-200: #a7f3d0; --gd-color-primary-300: #6ee7b7; --gd-color-primary-400: #34d399; --gd-color-primary-500: #10b981; --gd-color-primary-600: #059669; --gd-color-primary-700: #047857; --gd-color-primary-800: #065f46; --gd-color-primary-900: #064e3b; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Sage green - complementary natural tone */ --gd-color-secondary: #16a34a; --gd-color-secondary-50: #f0fdf4; --gd-color-secondary-100: #dcfce7; --gd-color-secondary-200: #bbf7d0; --gd-color-secondary-300: #86efac; --gd-color-secondary-400: #4ade80; --gd-color-secondary-500: #22c55e; --gd-color-secondary-600: #16a34a; --gd-color-secondary-700: #15803d; --gd-color-secondary-800: #166534; --gd-color-secondary-900: #14532d; /* ===== ACCENT COLOR SYSTEM ===== */ /* Lime - vibrant nature accent */ --gd-color-accent: #84cc16; --gd-color-accent-50: #f7fee7; --gd-color-accent-100: #ecfccb; --gd-color-accent-200: #d9f99d; --gd-color-accent-300: #bef264; --gd-color-accent-400: #a3e635; --gd-color-accent-500: #84cc16; --gd-color-accent-600: #65a30d; --gd-color-accent-700: #4d7c0f; --gd-color-accent-800: #365314; --gd-color-accent-900: #1a2e05; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #10b981; --gd-color-success-light: #d1fae5; --gd-color-success-dark: #047857; --gd-color-warning: #f59e0b; --gd-color-warning-light: #fef3c7; --gd-color-warning-dark: #d97706; --gd-color-danger: #ef4444; --gd-color-danger-light: #fecaca; --gd-color-danger-dark: #dc2626; --gd-color-info: var(--gd-color-primary-500); --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ --gd-bg-primary: #fefffe; --gd-bg-secondary: #f9fef9; --gd-bg-tertiary: #f0fdf4; --gd-bg-quaternary: #e5f5e5; --gd-bg-elevated: #ffffff; --gd-bg-overlay: rgba(6, 78, 59, 0.4); /* Background variants */ --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #0f172a; --gd-text-secondary: #1e293b; --gd-text-tertiary: #475569; --gd-text-quaternary: #64748b; --gd-text-disabled: #cbd5e1; --gd-text-inverse: #ffffff; --gd-text-muted: #64748b; /* Text on colored backgrounds */ --gd-text-on-primary: #ffffff; --gd-text-on-secondary: #ffffff; --gd-text-on-accent: #ffffff; /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(16, 185, 129, 0.08); --gd-border-medium: rgba(16, 185, 129, 0.15); --gd-border-strong: rgba(16, 185, 129, 0.25); --gd-border-primary: var(--gd-color-primary-300); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-300) 0%, var(--gd-color-primary-500) 50%, var(--gd-color-primary-600) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-200) 0%, var(--gd-color-secondary-400) 50%, var(--gd-color-secondary-600) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-200) 0%, var(--gd-color-accent-400) 50%, var(--gd-color-accent-600) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-50) 0%, var(--gd-color-secondary-50) 35%, var(--gd-color-accent-50) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(16, 185, 129, 0.05); --gd-shadow-base: 0 1px 3px 0 rgba(16, 185, 129, 0.1), 0 1px 2px 0 rgba(16, 185, 129, 0.06); --gd-shadow-md: 0 4px 6px -1px rgba(16, 185, 129, 0.1), 0 2px 4px -1px rgba(16, 185, 129, 0.06); --gd-shadow-lg: 0 10px 15px -3px rgba(16, 185, 129, 0.1), 0 4px 6px -2px rgba(16, 185, 129, 0.05); --gd-shadow-xl: 0 20px 25px -5px rgba(16, 185, 129, 0.1), 0 10px 10px -5px rgba(16, 185, 129, 0.04); --gd-shadow-2xl: 0 25px 50px -12px rgba(16, 185, 129, 0.25); --gd-shadow-inner: inset 0 2px 4px 0 rgba(16, 185, 129, 0.06); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(16, 185, 129, 0.15); --gd-shadow-secondary: 0 4px 14px 0 rgba(22, 163, 74, 0.15); --gd-shadow-accent: 0 4px 14px 0 rgba(132, 204, 22, 0.15); /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-bg: rgba(255, 255, 255, 0.85); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: var(--gd-border-light); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); } /* ===== MINIMAL GREEN THEME SPECIFIC ENHANCEMENTS ===== */ html[data-theme="minimal-green"] .app__brand { background: var(--gd-gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html[data-theme="minimal-green"] .app__button--primary { box-shadow: var(--gd-shadow-md); border: none; font-weight: var(--gd-font-weight-semibold); } html[data-theme="minimal-green"] .app__button--primary:hover { box-shadow: var(--gd-shadow-lg); transform: translateY(-1px); } html[data-theme="minimal-green"] .app__button--primary:focus-visible { box-shadow: var(--gd-minimal-glow), var(--gd-shadow-md); } html[data-theme="minimal-green"] .app__project-card:hover { border-left: var(--gd-minimal-border-accent); transform: translateX(4px); } html[data-theme="minimal-green"] .modern-nav__link:hover { color: var(--gd-color-primary); } html[data-theme="minimal-green"] .modern-nav__link::after { background: var(--gd-gradient-primary); height: 3px; } /* src/styles/themes/ocean-deep.css - 🌊 Ocean Deep Theme - Improved Light Version */ html[data-theme="ocean-deep"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Ocean blue - main brand color inspired by tropical waters */ --gd-color-primary: #0891b2; --gd-color-primary-50: #f0f9ff; --gd-color-primary-100: #e0f2fe; --gd-color-primary-200: #bae6fd; --gd-color-primary-300: #7dd3fc; --gd-color-primary-400: #38bdf8; --gd-color-primary-500: #0891b2; --gd-color-primary-600: #0e7490; --gd-color-primary-700: #155e75; --gd-color-primary-800: #164e63; --gd-color-primary-900: #083344; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Teal - complementary ocean color */ --gd-color-secondary: #14b8a6; --gd-color-secondary-50: #f0fdfa; --gd-color-secondary-100: #ccfbf1; --gd-color-secondary-200: #99f6e4; --gd-color-secondary-300: #5eead4; --gd-color-secondary-400: #2dd4bf; --gd-color-secondary-500: #14b8a6; --gd-color-secondary-600: #0d9488; --gd-color-secondary-700: #0f766e; --gd-color-secondary-800: #115e59; --gd-color-secondary-900: #134e4a; /* ===== ACCENT COLOR SYSTEM ===== */ /* Aqua - vibrant ocean accent */ --gd-color-accent: #06b6d4; --gd-color-accent-50: #ecfeff; --gd-color-accent-100: #cffafe; --gd-color-accent-200: #a5f3fc; --gd-color-accent-300: #67e8f9; --gd-color-accent-400: #22d3ee; --gd-color-accent-500: #06b6d4; --gd-color-accent-600: #0891b2; --gd-color-accent-700: #0e7490; --gd-color-accent-800: #155e75; --gd-color-accent-900: #164e63; /* ===== SEMANTIC COLORS ===== */ --gd-color-success: #10b981; --gd-color-success-light: #d1fae5; --gd-color-success-dark: #047857; --gd-color-warning: #f59e0b; --gd-color-warning-light: #fef3c7; --gd-color-warning-dark: #d97706; --gd-color-danger: #ef4444; --gd-color-danger-light: #fecaca; --gd-color-danger-dark: #dc2626; --gd-color-info: var(--gd-color-primary-500); --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ --gd-bg-primary: #f8fafc; --gd-bg-secondary: #f1f5f9; --gd-bg-tertiary: #e2e8f0; --gd-bg-quaternary: #cbd5e1; --gd-bg-elevated: #ffffff; --gd-bg-overlay: rgba(15, 23, 42, 0.4); /* Background variants */ --gd-bg-primary-subtle: var(--gd-color-primary-50); --gd-bg-secondary-subtle: var(--gd-color-secondary-50); --gd-bg-accent-subtle: var(--gd-color-accent-50); /* ===== INTELLIGENT TEXT SYSTEM ===== */ --gd-text-primary: #0f172a; --gd-text-secondary: #334155; --gd-text-tertiary: #64748b; --gd-text-quaternary: #94a3b8; --gd-text-disabled: #cbd5e1; --gd-text-inverse: #ffffff; --gd-text-muted: #64748b; /* Text on colored backgrounds */ --gd-text-on-primary: #ffffff; --gd-text-on-secondary: #ffffff; --gd-text-on-accent: #ffffff; /* ===== BORDER SYSTEM ===== */ --gd-border-light: rgba(14, 116, 144, 0.1); --gd-border-medium: rgba(14, 116, 144, 0.2); --gd-border-strong: rgba(14, 116, 144, 0.3); --gd-border-primary: var(--gd-color-primary-300); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 50%, var(--gd-color-secondary-700) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-50) 0%, var(--gd-color-secondary-50) 35%, var(--gd-color-accent-50) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ --gd-shadow-sm: 0 1px 2px 0 rgba(14, 116, 144, 0.05); --gd-shadow-base: 0 1px 3px 0 rgba(14, 116, 144, 0.1), 0 1px 2px 0 rgba(14, 116, 144, 0.06); --gd-shadow-md: 0 4px 6px -1px rgba(14, 116, 144, 0.1), 0 2px 4px -1px rgba(14, 116, 144, 0.06); --gd-shadow-lg: 0 10px 15px -3px rgba(14, 116, 144, 0.1), 0 4px 6px -2px rgba(14, 116, 144, 0.05); --gd-shadow-xl: 0 20px 25px -5px rgba(14, 116, 144, 0.1), 0 10px 10px -5px rgba(14, 116, 144, 0.04); --gd-shadow-2xl: 0 25px 50px -12px rgba(14, 116, 144, 0.25); --gd-shadow-inner: inset 0 2px 4px 0 rgba(14, 116, 144, 0.06); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(8, 145, 178, 0.15); --gd-shadow-secondary: 0 4px 14px 0 rgba(20, 184, 166, 0.15); --gd-shadow-accent: 0 4px 14px 0 rgba(6, 182, 212, 0.15); /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-bg: rgba(255, 255, 255, 0.85); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: var(--gd-border-light); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-elevated); --gd-input-border: var(--gd-border-medium); --gd-input-border-hover: var(--gd-border-strong); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(8, 145, 178, 0.1); /* Overlays & Modals */ --gd-overlay-bg: rgba(15, 23, 42, 0.4); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: var(--gd-shadow-lg); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); /* ===== OCEAN-SPECIFIC ENHANCEMENTS ===== */ /* Ocean wave effects */ --gd-ocean-wave-glow: 0 0 20px rgba(6, 182, 212, 0.3); --gd-ocean-text-shadow: 0 1px 3px rgba(14, 116, 144, 0.2); --gd-ocean-border-glow: 0 0 15px rgba(6, 182, 212, 0.2); --gd-ocean-ripple: 0 4px 15px rgba(8, 145, 178, 0.1); } /* ===== OCEAN DEEP THEME SPECIFIC ENHANCEMENTS ===== */ html[data-theme="ocean-deep"] .app__brand { background: var(--gd-gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: var(--gd-ocean-text-shadow); } html[data-theme="ocean-deep"] .app__button--primary { box-shadow: var(--gd-shadow-md); border: 1px solid var(--gd-color-primary-300); background: var(--gd-gradient-primary); } html[data-theme="ocean-deep"] .app__button--primary:hover { box-shadow: var(--gd-ocean-wave-glow), var(--gd-shadow-lg); transform: translateY(-2px); } html[data-theme="ocean-deep"] .app__button--primary:focus-visible { box-shadow: var(--gd-ocean-border-glow), var(--gd-shadow-md); } html[data-theme="ocean-deep"] .app__project-card { background: linear-gradient(135deg, var(--gd-bg-elevated) 0%, var(--gd-bg-primary-subtle) 100%); border: 1px solid var(--gd-border-light); } html[data-theme="ocean-deep"] .app__project-card:hover { border: 1px solid var(--gd-color-primary-300); box-shadow: var(--gd-ocean-ripple), var(--gd-shadow-lg); transform: translateY(-4px); } html[data-theme="ocean-deep"] .modern-nav__link:hover { color: var(--gd-color-primary-600); text-shadow: var(--gd-ocean-text-shadow); } html[data-theme="ocean-deep"] .modern-nav__link::after { background: var(--gd-gradient-accent); box-shadow: var(--gd-ocean-wave-glow); height: 3px; } /* Ocean wave animation for special elements */ @keyframes ocean-wave { 0%, 100% { box-shadow: var(--gd-shadow-base); transform: translateY(0); } 50% { box-shadow: var(--gd-ocean-wave-glow), var(--gd-shadow-lg); transform: translateY(-2px); } } html[data-theme="ocean-deep"] .gd-ocean-wave { animation: ocean-wave 3s ease-in-out infinite; } /* Subtle ocean depth layers */ html[data-theme="ocean-deep"] .app__section:nth-child(even) { background: linear-gradient(180deg, transparent 0%, var(--gd-bg-primary-subtle) 50%, transparent 100%); } /* src/styles/themes/retro-arcade.css - 🎮 Complete Retro Arcade Theme */ html[data-theme="retro-arcade"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Hot magenta pink - classic 80s arcade primary */ --gd-color-primary: #ff0080; --gd-color-primary-50: #fff0f8; --gd-color-primary-100: #ffe0f0; --gd-color-primary-200: #ffb3d9; --gd-color-primary-300: #ff80c2; --gd-color-primary-400: #ff4dab; --gd-color-primary-500: #ff0080; --gd-color-primary-600: #e6006b; --gd-color-primary-700: #cc0059; --gd-color-primary-800: #b30047; --gd-color-primary-900: #800033; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Electric lime green - classic arcade secondary */ --gd-color-secondary: #00ff80; --gd-color-secondary-50: #f0fff8; --gd-color-secondary-100: #e0fff0; --gd-color-secondary-200: #b3ffd9; --gd-color-secondary-300: #80ffc2; --gd-color-secondary-400: #4dffab; --gd-color-secondary-500: #00ff80; --gd-color-secondary-600: #00e673; --gd-color-secondary-700: #00cc66; --gd-color-secondary-800: #00b359; --gd-color-secondary-900: #008040; /* ===== ACCENT COLOR SYSTEM ===== */ /* Electric yellow - synthwave accent */ --gd-color-accent: #ffff00; --gd-color-accent-50: #fffff0; --gd-color-accent-100: #ffffe0; --gd-color-accent-200: #ffffb3; --gd-color-accent-300: #ffff80; --gd-color-accent-400: #ffff4d; --gd-color-accent-500: #ffff00; --gd-color-accent-600: #e6e600; --gd-color-accent-700: #cccc00; --gd-color-accent-800: #b3b300; --gd-color-accent-900: #808000; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Dark neon-friendly backgrounds */ --gd-bg-primary: #0a0a0a; --gd-bg-secondary: #1a0a1a; --gd-bg-tertiary: #2a0a2a; --gd-bg-quaternary: #3a0a3a; --gd-bg-elevated: #1a0a1a; --gd-bg-overlay: rgba(255, 0, 128, 0.15); /* Background variants based on primary colors */ --gd-bg-primary-subtle: rgba(255, 0, 128, 0.05); --gd-bg-secondary-subtle: rgba(0, 255, 128, 0.05); --gd-bg-accent-subtle: rgba(255, 255, 0, 0.05); /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Bright text for dark backgrounds */ --gd-text-primary: #ffffff; --gd-text-secondary: #ff80c0; --gd-text-tertiary: #80ff80; --gd-text-quaternary: #8080ff; --gd-text-disabled: #404040; --gd-text-inverse: #0a0a0a; --gd-text-muted: #cc66ff; /* Text on colored backgrounds */ --gd-text-on-primary: #ffffff; --gd-text-on-secondary: #000000; --gd-text-on-accent: #000000; /* ===== SEMANTIC COLORS ===== */ /* Status colors with neon flair */ --gd-color-success: #00ff80; --gd-color-success-light: rgba(0, 255, 128, 0.1); --gd-color-success-dark: #00cc66; --gd-color-warning: #ffff00; --gd-color-warning-light: rgba(255, 255, 0, 0.1); --gd-color-warning-dark: #cccc00; --gd-color-danger: #ff0080; --gd-color-danger-light: rgba(255, 0, 128, 0.1); --gd-color-danger-dark: #cc0066; --gd-color-info: #0080ff; --gd-color-info-light: rgba(0, 128, 255, 0.1); --gd-color-info-dark: #0066cc; /* ===== BORDER SYSTEM ===== */ /* Neon-style borders */ --gd-border-light: rgba(255, 0, 128, 0.2); --gd-border-medium: rgba(255, 0, 128, 0.4); --gd-border-strong: rgba(255, 0, 128, 0.6); --gd-border-primary: var(--gd-color-primary-500); --gd-border-focus: var(--gd-color-primary-500); /* ===== SURFACE COLORS ===== */ /* Layered dark surfaces */ --gd-surface-1: #0a0a0a; --gd-surface-2: #1a0a1a; --gd-surface-3: #2a0a2a; --gd-surface-4: #3a0a3a; --gd-surface-raised: #1a0a1a; --gd-surface-overlay: rgba(255, 0, 128, 0.15); /* ===== GRADIENTS ===== */ /* Synthwave-inspired gradients */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-400) 0%, var(--gd-color-secondary-600) 50%, var(--gd-color-secondary-800) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-400) 0%, var(--gd-color-accent-600) 50%, var(--gd-color-accent-800) 100%); --gd-gradient-hero: linear-gradient(135deg, #ff0080 0%, #00ff80 35%, #ffff00 70%, #0080ff 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ /* Neon glow shadows */ --gd-shadow-sm: 0 1px 2px 0 rgba(255, 0, 128, 0.1); --gd-shadow-base: 0 1px 3px 0 rgba(255, 0, 128, 0.2), 0 1px 2px 0 rgba(255, 0, 128, 0.1); --gd-shadow-md: 0 4px 6px -1px rgba(255, 0, 128, 0.2), 0 2px 4px -1px rgba(255, 0, 128, 0.1); --gd-shadow-lg: 0 10px 15px -3px rgba(255, 0, 128, 0.3), 0 4px 6px -2px rgba(255, 0, 128, 0.2); --gd-shadow-xl: 0 20px 25px -5px rgba(255, 0, 128, 0.4), 0 10px 10px -5px rgba(255, 0, 128, 0.3); --gd-shadow-2xl: 0 25px 50px -12px rgba(255, 0, 128, 0.5); --gd-shadow-inner: inset 0 2px 4px 0 rgba(255, 0, 128, 0.2); /* Colored neon shadows for special elements */ --gd-shadow-primary: 0 0 20px rgba(255, 0, 128, 0.6); --gd-shadow-secondary: 0 0 20px rgba(0, 255, 128, 0.6); --gd-shadow-accent: 0 0 20px rgba(255, 255, 0, 0.6); /* ===== TYPOGRAPHY ===== */ --gd-font-family-primary: "Orbitron", "Courier New", monospace; --gd-font-family-mono: "Fira Code", "Courier New", monospace; --gd-font-size-xs: 0.75rem; --gd-font-size-sm: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.125rem; --gd-font-size-xl: 1.25rem; --gd-font-size-2xl: 1.5rem; --gd-font-size-3xl: 1.875rem; --gd-font-size-4xl: 2.25rem; --gd-font-size-5xl: 3rem; --gd-font-size-6xl: 4rem; --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* ===== SPACING SYSTEM ===== */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; --gd-space-1: 0.25rem; --gd-space-1_5: 0.375rem; --gd-space-2: 0.5rem; --gd-space-2_5: 0.625rem; --gd-space-3: 0.75rem; --gd-space-3_5: 0.875rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-7: 1.75rem; --gd-space-8: 2rem; --gd-space-9: 2.25rem; --gd-space-10: 2.5rem; --gd-space-11: 2.75rem; --gd-space-12: 3rem; --gd-space-14: 3.5rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-28: 7rem; --gd-space-32: 8rem; /* ===== BORDER RADIUS ===== */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; --gd-radius-base: 0.25rem; --gd-radius-md: 0.375rem; --gd-radius-lg: 0.5rem; --gd-radius-xl: 0.75rem; --gd-radius-2xl: 1rem; --gd-radius-3xl: 1.5rem; --gd-radius-full: 9999px; /* ===== TRANSITIONS ===== */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* ===== LAYOUT ===== */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* ===== BREAKPOINTS (for reference) ===== */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(10, 10, 10, 0.95); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(255, 0, 128, 0.3); --gd-nav-shadow: 0 4px 20px rgba(255, 0, 128, 0.4); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-color-primary-400); --gd-nav-link-active: var(--gd-color-accent-500); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-bold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-2); --gd-card-border: rgba(255, 0, 128, 0.3); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: 0 4px 20px rgba(255, 0, 128, 0.2); --gd-card-shadow-hover: 0 8px 30px rgba(255, 0, 128, 0.4); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: rgba(26, 10, 26, 0.8); --gd-input-border: rgba(255, 0, 128, 0.3); --gd-input-border-hover: rgba(255, 0, 128, 0.5); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(255, 0, 128, 0.2), 0 0 20px rgba(255, 0, 128, 0.4); /* Overlays & Modals */ --gd-overlay-bg: rgba(10, 10, 10, 0.8); --gd-modal-bg: var(--gd-surface-2); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: 0 25px 50px -12px rgba(255, 0, 128, 0.5); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-surface-4); --gd-tooltip-color: var(--gd-text-primary); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: 0 0 20px rgba(255, 0, 128, 0.6); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-300); --gd-progress-bg: rgba(255, 0, 128, 0.2); --gd-progress-fill: var(--gd-color-primary-500); /* ===== SPECIAL NEON ARCADE EFFECTS ===== */ --gd-neon-glow: 0 0 20px rgba(255, 0, 128, 0.8); --gd-neon-text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; --gd-neon-border-glow: 0 0 15px rgba(255, 0, 128, 0.8), 0 0 30px rgba(255, 0, 128, 0.6); --gd-scanline: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px); --gd-crt-flicker: brightness(1) contrast(1.1) saturate(1.2); } /* ===== RETRO ARCADE THEME SPECIFIC ENHANCEMENTS ===== */ html[data-theme="retro-arcade"] .app__brand { text-shadow: var(--gd-neon-text-shadow); filter: drop-shadow(var(--gd-neon-glow)); animation: neon-flicker 2s ease-in-out infinite alternate; font-family: var(--gd-font-family-primary); text-transform: uppercase; letter-spacing: 0.2em; } html[data-theme="retro-arcade"] .app__button--primary { box-shadow: var(--gd-neon-glow), var(--gd-shadow-md); border: 2px solid var(--gd-color-primary); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--gd-font-family-primary); background: linear-gradient(135deg, var(--gd-color-primary-500), var(--gd-color-primary-700)); } html[data-theme="retro-arcade"] .app__button--primary:hover { box-shadow: var(--gd-neon-border-glow), var(--gd-shadow-lg); text-shadow: var(--gd-neon-text-shadow); transform: translateY(-2px); } html[data-theme="retro-arcade"] .app__button--secondary { border: 2px solid var(--gd-color-secondary); background: linear-gradient(135deg, var(--gd-color-secondary-500), var(--gd-color-secondary-700)); box-shadow: 0 0 15px rgba(0, 255, 128, 0.6); } html[data-theme="retro-arcade"] .app__button--secondary:hover { box-shadow: 0 0 20px rgba(0, 255, 128, 0.8), 0 0 40px rgba(0, 255, 128, 0.6); text-shadow: 0 0 10px rgba(0, 255, 128, 1); } html[data-theme="retro-arcade"] .app__project-card { border: 1px solid var(--gd-border-medium); background: var(--gd-card-bg); backdrop-filter: blur(10px); } html[data-theme="retro-arcade"] .app__project-card:hover { border: 2px solid var(--gd-color-primary); box-shadow: var(--gd-neon-border-glow), var(--gd-shadow-xl); transform: translateY(-4px) scale(1.02); } html[data-theme="retro-arcade"] .modern-nav__link { font-family: var(--gd-font-family-primary); text-transform: uppercase; letter-spacing: 0.1em; } html[data-theme="retro-arcade"] .modern-nav__link:hover { text-shadow: var(--gd-neon-text-shadow); color: var(--gd-color-primary-400); } html[data-theme="retro-arcade"] .modern-nav__link::after { box-shadow: var(--gd-neon-border-glow); background: var(--gd-gradient-primary); } html[data-theme="retro-arcade"] input, html[data-theme="retro-arcade"] textarea { background: var(--gd-input-bg); border: 1px solid var(--gd-input-border); color: var(--gd-text-primary); font-family: var(--gd-font-family-mono); } html[data-theme="retro-arcade"] input:focus, html[data-theme="retro-arcade"] textarea:focus { border-color: var(--gd-input-border-focus); box-shadow: var(--gd-input-shadow-focus); outline: none; } html[data-theme="retro-arcade"] input::placeholder, html[data-theme="retro-arcade"] textarea::placeholder { color: var(--gd-text-tertiary); } /* Add scanline effect to the entire theme */ html[data-theme="retro-arcade"]::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--gd-scanline); pointer-events: none; z-index: 1; opacity: 0.8; } /* CRT monitor effect - Applied to main content only to avoid breaking fixed positioning */ html[data-theme="retro-arcade"] .app__main { filter: var(--gd-crt-flicker); } /* Grid background effect */ html[data-theme="retro-arcade"] body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 0, 128, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 128, 0.1) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: -1; opacity: 0.3; } /* Neon flicker animation */ @keyframes neon-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: var(--gd-neon-text-shadow); filter: drop-shadow(var(--gd-neon-glow)); } 20%, 24%, 55% { text-shadow: none; filter: none; } } /* Glitch effect for special elements */ @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } html[data-theme="retro-arcade"] .app__glitch { animation: glitch 0.3s ease-in-out infinite; } /* Arcade button press effect */ html[data-theme="retro-arcade"] .app__button:active { transform: translateY(2px) scale(0.98); box-shadow: 0 0 10px rgba(255, 0, 128, 0.8); } /* ===== 🌸 SAKURA BLOOM THEME - COMPLETE ===== */ /* Beautiful cherry blossom inspired theme with soft pinks and elegant contrasts */ html[data-theme="sakura-bloom"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Hot pink - main brand color inspired by cherry blossoms */ --gd-color-primary: #FF69B4; /* Main primary - hot pink */ --gd-color-primary-50: #FFF0F8; /* Lightest - for subtle backgrounds */ --gd-color-primary-100: #FFE1F1; /* Very light - for hover states on light backgrounds */ --gd-color-primary-200: #FFC3E3; /* Light - for disabled states, light accents */ --gd-color-primary-300: #FF94D5; /* Medium light - for borders, secondary elements */ --gd-color-primary-400: #FF7EC7; /* Medium - for hover states */ --gd-color-primary-500: #FF69B4; /* Base primary color */ --gd-color-primary-600: #E55A9F; /* Medium dark - for active states */ --gd-color-primary-700: #CC4B8A; /* Dark - for pressed states */ --gd-color-primary-800: #B23C75; /* Darker - for strong contrast */ --gd-color-primary-900: #802B54; /* Darkest - for maximum contrast */ /* Legacy support */ --gd-color-primary-hover: var(--gd-color-primary-600); --gd-color-primary-light: var(--gd-color-primary-50); --gd-color-primary-dark: var(--gd-color-primary-700); /* ===== SECONDARY COLOR SYSTEM ===== */ /* Soft rose - complementary to primary, like rose petals */ --gd-color-secondary: #FFC0CB; /* Main secondary - soft rose */ --gd-color-secondary-50: #FFFAFC; /* Lightest */ --gd-color-secondary-100: #FFF0F5; /* Very light */ --gd-color-secondary-200: #FFE6EB; /* Light */ --gd-color-secondary-300: #FFD0DC; /* Medium light */ --gd-color-secondary-400: #FFB6C1; /* Medium */ --gd-color-secondary-500: #FFC0CB; /* Base secondary */ --gd-color-secondary-600: #E5ADB7; /* Medium dark */ --gd-color-secondary-700: #CC9AA3; /* Dark */ --gd-color-secondary-800: #B2878F; /* Darker */ --gd-color-secondary-900: #80626B; /* Darkest */ /* Legacy support */ --gd-color-secondary-hover: var(--gd-color-secondary-600); --gd-color-secondary-light: var(--gd-color-secondary-50); --gd-color-secondary-dark: var(--gd-color-secondary-700); /* ===== ACCENT COLOR SYSTEM ===== */ /* Coral - like sunset cherry blossoms */ --gd-color-accent: #FF6347; /* Main accent - coral */ --gd-color-accent-50: #FFF3F0; /* Lightest */ --gd-color-accent-100: #FFE7E1; /* Very light */ --gd-color-accent-200: #FFCFC3; /* Light */ --gd-color-accent-300: #FFB7A5; /* Medium light */ --gd-color-accent-400: #FF8D75; /* Medium */ --gd-color-accent-500: #FF6347; /* Base accent */ --gd-color-accent-600: #E5593F; /* Medium dark */ --gd-color-accent-700: #CC4F37; /* Dark */ --gd-color-accent-800: #B2452F; /* Darker */ --gd-color-accent-900: #803222; /* Darkest */ /* Legacy support */ --gd-color-accent-hover: var(--gd-color-accent-600); --gd-color-accent-light: var(--gd-color-accent-50); --gd-color-accent-dark: var(--gd-color-accent-700); /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Soft pink backgrounds with proper contrast ratios */ --gd-bg-primary: #FEF9F9; /* Main background - very light pink-white */ --gd-bg-secondary: #FDF2F2; /* Secondary background */ --gd-bg-tertiary: #FCE8E8; /* Tertiary background */ --gd-bg-quaternary: #FADEDE; /* Fourth level background */ --gd-bg-elevated: #FFFFFF; /* Elevated surfaces (cards, modals) */ --gd-bg-overlay: rgba(128, 43, 84, 0.4); /* Dark overlay for modals */ /* Legacy support */ --gd-bg-dark: var(--gd-bg-tertiary); --gd-bg-darker: var(--gd-bg-quaternary); /* Background variants based on primary colors */ --gd-bg-primary-subtle: var(--gd-color-primary-50); /* Primary tinted background */ --gd-bg-secondary-subtle: var(--gd-color-secondary-50); /* Secondary tinted background */ --gd-bg-accent-subtle: var(--gd-color-accent-50); /* Accent tinted background */ /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Dark text for light backgrounds - ensures readability */ --gd-text-primary: #4A1A1A; /* Main text - deep burgundy */ --gd-text-secondary: #8B3A3A; /* Secondary text - medium burgundy */ --gd-text-tertiary: #A64545; /* Tertiary text - lighter burgundy */ --gd-text-quaternary: #B85555; /* Quaternary text - soft burgundy */ --gd-text-disabled: #D6A0A0; /* Disabled text - very light */ --gd-text-inverse: #FFFFFF; /* Inverse text - white for dark backgrounds */ --gd-text-muted: var(--gd-text-tertiary); /* Muted text - same as tertiary */ /* Text on colored backgrounds */ --gd-text-on-primary: #FFFFFF; /* White text on primary backgrounds */ --gd-text-on-secondary: #4A1A1A; /* Dark text on secondary backgrounds */ --gd-text-on-accent: #FFFFFF; /* White text on accent backgrounds */ /* ===== SEMANTIC COLORS ===== */ /* Status colors with proper contrast adapted for Sakura theme */ --gd-color-success: #FF6B9D; /* Success - pink variant */ --gd-color-success-light: #FFF0F6; /* Light success background */ --gd-color-success-dark: #E55A8A; /* Dark success for contrast */ --gd-color-warning: #FFB347; /* Warning - soft orange */ --gd-color-warning-light: #FFF9F0; /* Light warning background */ --gd-color-warning-dark: #E59F3F; /* Dark warning for contrast */ --gd-color-danger: #FF5C7A; /* Danger - soft red-pink */ --gd-color-danger-light: #FFF0F3; /* Light danger background */ --gd-color-danger-dark: #E5526D; /* Dark danger for contrast */ --gd-color-info: var(--gd-color-primary-500); /* Info uses primary color */ --gd-color-info-light: var(--gd-color-primary-50); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== BORDER SYSTEM ===== */ /* Consistent border colors with proper visibility */ --gd-border-light: rgba(255, 105, 180, 0.15); /* Very subtle borders */ --gd-border-medium: rgba(255, 105, 180, 0.25); /* Standard borders */ --gd-border-strong: rgba(255, 105, 180, 0.4); /* Strong borders */ --gd-border-primary: var(--gd-color-primary-300); /* Primary colored borders */ --gd-border-focus: var(--gd-color-primary-500); /* Focus state borders */ /* ===== SURFACE COLORS ===== */ /* Layered surface system for depth */ --gd-surface-1: var(--gd-bg-primary); /* Base surface */ --gd-surface-2: var(--gd-bg-secondary); /* Elevated surface */ --gd-surface-3: var(--gd-bg-tertiary); /* More elevated surface */ --gd-surface-4: var(--gd-bg-quaternary); /* Highest surface */ --gd-surface-raised: var(--gd-bg-elevated); /* Card/modal surface */ --gd-surface-overlay: var(--gd-bg-overlay); /* Modal backdrop */ /* ===== GRADIENTS ===== */ /* Sakura-inspired gradients */ --gd-gradient-primary: linear-gradient(135deg, var(--gd-color-primary-400) 0%, var(--gd-color-primary-600) 50%, var(--gd-color-primary-800) 100%); --gd-gradient-secondary: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 50%, var(--gd-color-secondary-700) 100%); --gd-gradient-accent: linear-gradient(135deg, var(--gd-color-accent-300) 0%, var(--gd-color-accent-500) 50%, var(--gd-color-accent-700) 100%); --gd-gradient-hero: linear-gradient(135deg, var(--gd-color-primary-300) 0%, var(--gd-color-secondary-400) 35%, var(--gd-color-accent-400) 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ /* Soft pink shadows for Sakura theme */ --gd-shadow-sm: 0 1px 2px 0 rgba(255, 105, 180, 0.15); --gd-shadow-base: 0 1px 3px 0 rgba(255, 105, 180, 0.2), 0 1px 2px 0 rgba(255, 105, 180, 0.15); --gd-shadow-md: 0 4px 6px -1px rgba(255, 105, 180, 0.2), 0 2px 4px -1px rgba(255, 105, 180, 0.15); --gd-shadow-lg: 0 10px 15px -3px rgba(255, 105, 180, 0.25), 0 4px 6px -2px rgba(255, 105, 180, 0.2); --gd-shadow-xl: 0 20px 25px -5px rgba(255, 105, 180, 0.25), 0 10px 10px -5px rgba(255, 105, 180, 0.15); --gd-shadow-2xl: 0 25px 50px -12px rgba(255, 105, 180, 0.3); --gd-shadow-inner: inset 0 2px 4px 0 rgba(255, 105, 180, 0.15); /* Colored shadows for special elements */ --gd-shadow-primary: 0 4px 14px 0 rgba(255, 105, 180, 0.25); --gd-shadow-secondary: 0 4px 14px 0 rgba(255, 192, 203, 0.2); --gd-shadow-accent: 0 4px 14px 0 rgba(255, 99, 71, 0.2); /* ===== COMPONENT SPECIFIC VARIABLES ===== */ /* Navigation */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(254, 249, 249, 0.9); --gd-nav-bg-solid: var(--gd-bg-elevated); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(255, 105, 180, 0.2); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-primary-600); /* Buttons */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* Cards */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* Forms */ --gd-input-bg: var(--gd-bg-elevated); --gd-input-border: var(--gd-border-medium); --gd-input-border-hover: var(--gd-border-strong); --gd-input-border-focus: var(--gd-color-primary-500); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(255, 105, 180, 0.15); /* Overlays & Modals */ --gd-overlay-bg: rgba(128, 43, 84, 0.4); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-backdrop-blur: 20px; /* Tooltips */ --gd-tooltip-bg: var(--gd-text-primary); --gd-tooltip-color: var(--gd-text-inverse); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: var(--gd-shadow-lg); /* Loading & Progress */ --gd-loading-primary: var(--gd-color-primary-500); --gd-loading-secondary: var(--gd-color-primary-200); --gd-progress-bg: var(--gd-color-primary-100); --gd-progress-fill: var(--gd-color-primary-500); /* Typography (inherits from main variables.css) */ --gd-font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-family-mono: "JetBrains Mono", "Fira Code", Monaco, Consolas, monospace; /* Spacing System (inherits from main variables.css) */ --gd-space-0: 0; --gd-space-px: 1px; --gd-space-0_5: 0.125rem; --gd-space-1: 0.25rem; --gd-space-1_5: 0.375rem; --gd-space-2: 0.5rem; --gd-space-2_5: 0.625rem; --gd-space-3: 0.75rem; --gd-space-3_5: 0.875rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-7: 1.75rem; --gd-space-8: 2rem; --gd-space-9: 2.25rem; --gd-space-10: 2.5rem; --gd-space-11: 2.75rem; --gd-space-12: 3rem; --gd-space-14: 3.5rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-28: 7rem; --gd-space-32: 8rem; /* Border Radius (inherits from main variables.css) */ --gd-radius-none: 0; --gd-radius-sm: 0.125rem; --gd-radius-base: 0.25rem; --gd-radius-md: 0.375rem; --gd-radius-lg: 0.5rem; --gd-radius-xl: 0.75rem; --gd-radius-2xl: 1rem; --gd-radius-3xl: 1.5rem; --gd-radius-full: 9999px; /* Transitions (inherits from main variables.css) */ --gd-transition-fast: all 0.15s ease; --gd-transition-base: all 0.2s ease; --gd-transition-slow: all 0.3s ease; --gd-transition-slowest: all 0.5s ease; --gd-ease-in: cubic-bezier(0.4, 0, 1, 1); --gd-ease-out: cubic-bezier(0, 0, 0.2, 1); --gd-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Z-Index Scale (inherits from main variables.css) */ --gd-z-dropdown: 1000; --gd-z-sticky: 1020; --gd-z-fixed: 1030; --gd-z-modal-backdrop: 1040; --gd-z-modal: 1050; --gd-z-popover: 1060; --gd-z-tooltip: 1070; --gd-z-toast: 1080; --gd-z-preloader: 9999; /* Layout (inherits from main variables.css) */ --gd-container-max-width: 1200px; --gd-container-max-width-sm: 640px; --gd-container-max-width-md: 768px; --gd-container-max-width-lg: 1024px; --gd-container-max-width-xl: 1280px; --gd-container-padding: var(--gd-space-8); --gd-section-padding: var(--gd-space-20) 0; --gd-header-height: 4.375rem; /* Font Sizes (inherits from main variables.css) */ --gd-font-size-xs: 0.75rem; --gd-font-size-sm: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.125rem; --gd-font-size-xl: 1.25rem; --gd-font-size-2xl: 1.5rem; --gd-font-size-3xl: 1.875rem; --gd-font-size-4xl: 2.25rem; --gd-font-size-5xl: 3rem; --gd-font-size-6xl: 4rem; /* Font Weights (inherits from main variables.css) */ --gd-font-weight-light: 300; --gd-font-weight-normal: 400; --gd-font-weight-medium: 500; --gd-font-weight-semibold: 600; --gd-font-weight-bold: 700; --gd-font-weight-black: 900; /* Line Heights (inherits from main variables.css) */ --gd-line-height-tight: 1.25; --gd-line-height-normal: 1.5; --gd-line-height-relaxed: 1.625; --gd-line-height-loose: 2; /* Breakpoints (inherits from main variables.css) */ --gd-breakpoint-sm: 640px; --gd-breakpoint-md: 768px; --gd-breakpoint-lg: 1024px; --gd-breakpoint-xl: 1280px; --gd-breakpoint-2xl: 1536px; } /* ===== 🚀 SPACE EXPLORER THEME - COMPLETE VERSION ===== */ /* Deep space cosmic theme with purple nebulas, golden stars, and cosmic depths */ html[data-theme="space-explorer"] { /* ===== PRIMARY COLOR SYSTEM ===== */ /* Deep cosmic purple - main brand inspired by nebulas */ --gd-color-primary: #4b0082; --gd-color-primary-50: #f5f0ff; --gd-color-primary-100: #ede5ff; --gd-color-primary-200: #dcc7ff; --gd-color-primary-300: #c299ff; --gd-color-primary-400: #9966ff; --gd-color-primary-500: #4b0082; --gd-color-primary-600: #3d006b; --gd-color-primary-700: #2e0054; --gd-color-primary-800: #20003d; --gd-color-primary-900: #110026; /* ===== SECONDARY COLOR SYSTEM ===== */ /* Dark slate blue - like distant galaxies */ --gd-color-secondary: #483d8b; --gd-color-secondary-50: #f3f1ff; --gd-color-secondary-100: #e8e4ff; --gd-color-secondary-200: #d1c7ff; --gd-color-secondary-300: #b8a8ff; --gd-color-secondary-400: #8f7bff; --gd-color-secondary-500: #483d8b; --gd-color-secondary-600: #3c2f75; --gd-color-secondary-700: #2e2159; --gd-color-secondary-800: #20143d; --gd-color-secondary-900: #120821; /* ===== ACCENT COLOR SYSTEM ===== */ /* Golden star - like stellar formations */ --gd-color-accent: #ffd700; --gd-color-accent-50: #fffdf0; --gd-color-accent-100: #fffae0; --gd-color-accent-200: #fff3b8; --gd-color-accent-300: #ffed4e; --gd-color-accent-400: #ffd700; --gd-color-accent-500: #e6c200; --gd-color-accent-600: #ccad00; --gd-color-accent-700: #b8860b; --gd-color-accent-800: #996f00; --gd-color-accent-900: #7a5800; /* ===== INTELLIGENT BACKGROUND SYSTEM ===== */ /* Enhanced deep space backgrounds with maximum text readability */ --gd-bg-primary: #0f0f23; /* Deep void - matches JSON theme for consistency, optimal text contrast */ --gd-bg-secondary: #1e1b4b; /* Dark nebula - matches JSON surface, strong text readability */ --gd-bg-tertiary: #2d2a66; /* Medium cosmic depth with clear text separation */ --gd-bg-quaternary: #3d3788; /* Elevated cosmic areas with excellent contrast */ --gd-bg-elevated: #4a44aa; /* Card/elevated surfaces with strong text visibility */ --gd-bg-overlay: rgba(15, 15, 35, 0.92); /* Enhanced overlay for maximum text readability */ /* Background variants for subtle effects */ --gd-bg-primary-subtle: rgba(75, 0, 130, 0.05); --gd-bg-secondary-subtle: rgba(72, 61, 139, 0.05); --gd-bg-accent-subtle: rgba(255, 215, 0, 0.05); /* Additional background variants with enhanced contrast */ --gd-bg-dark: #0a0a1f; /* Deepest void - darker than primary for maximum text contrast */ --gd-bg-darker: #050515; /* Near absolute black with cosmic depth - ultimate text readability */ /* ===== INTELLIGENT TEXT SYSTEM ===== */ /* Enhanced text system with maximum contrast for cosmic readability */ --gd-text-primary: #ffffff; /* Pure white - primary text with maximum contrast */ --gd-text-secondary: #f8faff; /* Ultra-bright white-lavender - secondary with excellent readability */ --gd-text-tertiary: #e8ecff; /* Bright white-lavender - tertiary with strong contrast */ --gd-text-quaternary: #d8dcf0; /* Light lavender - quaternary with good visibility */ --gd-text-disabled: #b8bcd4; /* Improved disabled text with better contrast */ --gd-text-inverse: #0f0f1f; /* Very dark text for light backgrounds */ --gd-text-muted: #c8cce8; /* Enhanced muted text with better visibility */ /* Text on colored backgrounds */ --gd-text-on-primary: #ffffff; /* White on primary */ --gd-text-on-secondary: #ffffff; /* White on secondary */ --gd-text-on-accent: #1a1a2e; /* Darker text on golden accent for better contrast */ /* ===== SEMANTIC COLORS ===== */ /* Cosmic-themed status colors */ --gd-color-success: #00ff88; /* Bright green - like life signals */ --gd-color-success-light: rgba(0, 255, 136, 0.1); --gd-color-success-dark: #00cc6a; --gd-color-warning: #ffaa00; /* Orange warning - like solar flares */ --gd-color-warning-light: rgba(255, 170, 0, 0.1); --gd-color-warning-dark: #cc8800; --gd-color-danger: #ff3366; /* Red danger - like supernovas */ --gd-color-danger-light: rgba(255, 51, 102, 0.1); --gd-color-danger-dark: #cc1a47; --gd-color-info: var(--gd-color-primary-500); --gd-color-info-light: rgba(75, 0, 130, 0.1); --gd-color-info-dark: var(--gd-color-primary-700); /* ===== BORDER SYSTEM ===== */ /* Enhanced cosmic border system with maximum visibility and text separation */ --gd-border-light: rgba(102, 102, 241, 0.4); --gd-border-medium: rgba(102, 102, 241, 0.6); --gd-border-strong: rgba(102, 102, 241, 0.8); --gd-border-primary: var(--gd-color-primary-400); --gd-border-focus: var(--gd-color-accent-400); /* ===== SURFACE COLORS ===== */ /* Layered cosmic surfaces */ --gd-surface-1: var(--gd-bg-primary); --gd-surface-2: var(--gd-bg-secondary); --gd-surface-3: var(--gd-bg-tertiary); --gd-surface-4: var(--gd-bg-quaternary); --gd-surface-raised: var(--gd-bg-elevated); --gd-surface-overlay: var(--gd-bg-overlay); /* ===== GRADIENTS ===== */ /* Space-inspired gradients */ --gd-gradient-primary: linear-gradient(135deg, #4b0082 0%, #6a1b9a 50%, #8e24aa 100%); --gd-gradient-secondary: linear-gradient(135deg, #483d8b 0%, #5e4ba1 50%, #7459b7 100%); --gd-gradient-accent: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #fff176 100%); --gd-gradient-hero: linear-gradient(135deg, #000000 0%, #0a0a1a 30%, #13132e 70%, #4b0082 100%); --gd-gradient-subtle: linear-gradient(135deg, var(--gd-bg-primary) 0%, var(--gd-bg-secondary) 50%, var(--gd-bg-tertiary) 100%); /* ===== SHADOWS ===== */ /* Cosmic shadows with purple undertones */ --gd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --gd-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(75, 0, 130, 0.2); --gd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(75, 0, 130, 0.2); --gd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(75, 0, 130, 0.3); --gd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(75, 0, 130, 0.2); --gd-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7); --gd-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); /* Colored shadows for special cosmic effects */ --gd-shadow-primary: 0 4px 14px 0 rgba(75, 0, 130, 0.4); --gd-shadow-secondary: 0 4px 14px 0 rgba(72, 61, 139, 0.4); --gd-shadow-accent: 0 4px 14px 0 rgba(255, 215, 0, 0.3); /* ===== NAVIGATION ===== */ --gd-nav-height: var(--gd-header-height); --gd-nav-bg: rgba(26, 26, 46, 0.95); --gd-nav-bg-solid: var(--gd-bg-secondary); --gd-nav-backdrop-blur: 20px; --gd-nav-border: rgba(75, 0, 130, 0.6); --gd-nav-shadow: var(--gd-shadow-lg); --gd-nav-link-color: var(--gd-text-secondary); --gd-nav-link-hover: var(--gd-text-primary); --gd-nav-link-active: var(--gd-color-accent-400); /* ===== BUTTONS ===== */ --gd-btn-padding-sm: var(--gd-space-2) var(--gd-space-4); --gd-btn-padding-base: var(--gd-space-3) var(--gd-space-6); --gd-btn-padding-lg: var(--gd-space-4) var(--gd-space-8); --gd-btn-radius: var(--gd-radius-lg); --gd-btn-font-weight: var(--gd-font-weight-semibold); --gd-btn-transition: var(--gd-transition-base); /* ===== CARDS ===== */ --gd-card-bg: var(--gd-surface-raised); --gd-card-border: var(--gd-border-light); --gd-card-radius: var(--gd-radius-xl); --gd-card-shadow: var(--gd-shadow-base); --gd-card-shadow-hover: var(--gd-shadow-lg); --gd-card-padding-sm: var(--gd-space-4); --gd-card-padding-base: var(--gd-space-6); --gd-card-padding-lg: var(--gd-space-8); /* ===== FORMS ===== */ --gd-input-bg: var(--gd-bg-tertiary); --gd-input-border: var(--gd-border-strong); --gd-input-border-hover: rgba(75, 0, 130, 0.8); --gd-input-border-focus: var(--gd-color-accent-400); --gd-input-radius: var(--gd-radius-md); --gd-input-padding-sm: var(--gd-space-2) var(--gd-space-3); --gd-input-padding-base: var(--gd-space-3) var(--gd-space-4); --gd-input-padding-lg: var(--gd-space-4) var(--gd-space-5); --gd-input-shadow-focus: 0 0 0 3px rgba(255, 215, 0, 0.4); /* ===== OVERLAYS & MODALS ===== */ --gd-overlay-bg: rgba(15, 15, 31, 0.8); --gd-modal-bg: var(--gd-surface-raised); --gd-modal-radius: var(--gd-radius-2xl); --gd-modal-shadow: var(--gd-shadow-2xl); --gd-backdrop-blur: 20px; /* ===== TOOLTIPS ===== */ --gd-tooltip-bg: var(--gd-bg-tertiary); --gd-tooltip-color: var(--gd-text-primary); --gd-tooltip-radius: var(--gd-radius-md); --gd-tooltip-shadow: var(--gd-shadow-lg); /* ===== LOADING & PROGRESS ===== */ --gd-loading-primary: var(--gd-color-accent-500); --gd-loading-secondary: var(--gd-color-primary-400); --gd-progress-bg: rgba(75, 0, 130, 0.2); --gd-progress-fill: var(--gd-color-accent-500); /* ===== SPACE EXPLORER SPECIFIC ADDITIONS ===== */ /* Additional cosmic variables for enhanced theming */ --gd-cosmic-glow: 0 0 20px rgba(255, 215, 0, 0.3); --gd-nebula-purple: rgba(75, 0, 130, 0.4); --gd-star-field: radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(75, 0, 130, 0.1) 0%, transparent 50%); /* Cosmic animation variables */ --gd-pulse-golden: 0 0 10px rgba(255, 215, 0, 0.5); --gd-pulse-purple: 0 0 10px rgba(75, 0, 130, 0.5); /* Enhanced gradients for cosmic effects */ --gd-gradient-cosmic: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%); /* ===== TEXT READABILITY ENHANCEMENTS ===== */ /* Force better text visibility on all text elements */ --gd-text-shadow-readable: 0 1px 3px rgba(0, 0, 0, 0.8); --gd-text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.9); --gd-backdrop-text: rgba(15, 15, 35, 0.7); } /* ===== SPACE EXPLORER TEXT READABILITY OVERRIDES ===== */ html[data-theme="space-explorer"] { /* Enhance ALL text elements for maximum readability */ h1, h2, h3, h4, h5, h6, p, span, div, a, button, .text-primary, .text-secondary, .text-tertiary, .card-title, .card-text, .nav-link { text-shadow: var(--gd-text-shadow-readable) !important; color: var(--gd-text-primary) !important; } /* Specific overrides for secondary text */ .text-secondary, .text-muted, .card-subtitle, .nav-secondary { color: var(--gd-text-secondary) !important; text-shadow: var(--gd-text-shadow-readable) !important; } /* Enhanced card backgrounds for text separation */ .card, .modal, .dropdown-menu { background: var(--gd-bg-elevated) !important; backdrop-filter: blur(10px) !important; border: 1px solid var(--gd-border-medium) !important; } /* Navigation text improvements */ .navbar, .nav { background: var(--gd-bg-overlay) !important; backdrop-filter: blur(20px) !important; } /* Button text contrast */ .btn { text-shadow: var(--gd-text-shadow-readable) !important; } /* Form input improvements */ .form-control, .form-select, input, textarea { background: var(--gd-bg-tertiary) !important; color: var(--gd-text-primary) !important; border: 1px solid var(--gd-border-strong) !important; } } /* ===== ADDITIONAL THEMES ===== */ /* Create these files following the same pattern as above themes */ /* @import './sakura-bloom.css'; 🌸 Sakura Bloom - Soft pink cherry blossom */ /* @import './electric-storm.css'; ⚡ Electric Storm - Lightning yellow and purple */ /* @import './forest-tech.css'; 🌲 Forest Tech - Nature-tech fusion */ /* @import './arctic-frost.css'; ❄️ Arctic Frost - Cool whites and icy blues */ /* @import './sunset-gradient.css'; 🌅 Sunset Gradient - Warm oranges to purples */ /* @import './space-explorer.css'; 🚀 Space Explorer - Deep space blues with gold */ /* @import './pure-monochrome.css'; ⚫ Pure Monochrome - Black, white, and grays */ /* ===== THEME SYSTEM NOTES ===== */ /* Theme Implementation Guide: 1. Each theme follows this structure: html[data-theme="theme-name"] { --gd-color-primary: #newcolor; /* ... override other variables ... } 2. Theme switching is handled by: - Setting data-theme attribute on element - Using ThemeSwitcher component - Persisting choice in localStorage 3. To add a new theme: - Create new CSS file following the pattern - Add import statement above - Add theme object to ThemeSwitcher themes array - Update the theme count in documentation 4. Theme variables are defined in variables.css and can be: - Colors (primary, secondary, backgrounds, text) - Typography (fonts, sizes, weights) - Spacing (margins, paddings) - Shadows and effects - Component-specific overrides 5. Special theme enhancements: - Each theme can add unique effects (glow, shadows, animations) - Component-specific styling can be theme-dependent - Use CSS custom properties for maximum flexibility 6. Browser compatibility: - CSS Custom Properties supported in all modern browsers - Fallbacks provided for older browsers via base variables - Progressive enhancement approach 7. Performance considerations: - All themes loaded at once for instant switching - Minimal CSS overhead due to variable-based approach - Optimized selector specificity */ /* ===== GLOBAL THEME UTILITIES ===== */ /* Theme transition class for smooth switching */ .theme-transition { transition: background-color var(--gd-transition-base), color var(--gd-transition-base), border-color var(--gd-transition-base), box-shadow var(--gd-transition-base) !important; } /* Apply to body when switching themes for smooth transitions */ body.theme-switching * { transition: background-color var(--gd-transition-base), color var(--gd-transition-base), border-color var(--gd-transition-base), box-shadow var(--gd-transition-base) !important; } /* Remove transitions after theme switch is complete */ body.theme-switching.theme-switch-complete * { transition: none; } /* Theme-specific animations that can be used across themes */ @keyframes theme-glow-pulse { 0%, 100% { box-shadow: var(--gd-shadow-base); } 50% { box-shadow: var(--gd-shadow-lg); } } @keyframes theme-text-glow { 0%, 100% { text-shadow: 0 0 5px currentColor; } 50% { text-shadow: 0 0 20px currentColor, 0 0 30px currentColor; } } /* Utility classes for theme-specific effects */ .gd-theme-glow { animation: theme-glow-pulse 2s ease-in-out infinite; } .gd-theme-text-glow { animation: theme-text-glow 3s ease-in-out infinite; } /* High contrast theme overrides */ @media (prefers-contrast: high) { :root { --gd-border-light: rgba(0, 0, 0, 0.3); --gd-border-medium: rgba(0, 0, 0, 0.5); --gd-border-dark: rgba(0, 0, 0, 0.8); } } /* Reduced motion theme adjustments */ @media (prefers-reduced-motion: reduce) { .gd-theme-glow, .gd-theme-text-glow { animation: none; } body.theme-switching * { transition: none !important; } } html[data-theme="arctic-frost"] .app__brand { text-shadow: 0 0 10px rgba(65, 105, 225, 0.3); } html[data-theme="arctic-frost"] .app__button--primary { box-shadow: 0 4px 14px 0 rgba(65, 105, 225, 0.2); } html[data-theme="arctic-frost"] .app__button--primary:hover { box-shadow: 0 8px 20px 0 rgba(65, 105, 225, 0.3); } /* Dark Cyber Theme Enhancements */ html[data-theme="dark-cyber"] .app__brand { text-shadow: var(--gd-cyber-text-shadow); filter: drop-shadow(var(--gd-cyber-glow)); } html[data-theme="dark-cyber"] .app__button--primary { box-shadow: var(--gd-cyber-glow), var(--gd-shadow-md); border: 1px solid var(--gd-color-primary); } html[data-theme="dark-cyber"] .app__button--primary:hover { box-shadow: var(--gd-cyber-border-glow), var(--gd-shadow-lg); text-shadow: var(--gd-cyber-text-shadow); } html[data-theme="dark-cyber"] .app__project-card:hover { border: 1px solid var(--gd-color-primary); box-shadow: var(--gd-cyber-border-glow), var(--gd-shadow-xl); } html[data-theme="dark-cyber"] .modern-nav__link:hover { text-shadow: 0 0 8px currentColor; } html[data-theme="dark-cyber"] .modern-nav__link::after { box-shadow: 0 0 10px var(--gd-color-primary); } /* Electric Storm Theme Enhancements */ html[data-theme="electric-storm"] .app__brand { text-shadow: var(--gd-electric-text-shadow); filter: drop-shadow(var(--gd-electric-glow)); } html[data-theme="electric-storm"] .app__button--primary { box-shadow: var(--gd-electric-glow), var(--gd-shadow-md); border: 1px solid var(--gd-color-primary); } html[data-theme="electric-storm"] .app__button--primary:hover { box-shadow: var(--gd-electric-border-glow), var(--gd-shadow-lg); text-shadow: var(--gd-electric-text-shadow); } html[data-theme="electric-storm"] .app__project-card:hover { border: 1px solid var(--gd-color-primary); box-shadow: var(--gd-electric-border-glow), var(--gd-shadow-xl); } /* Forest Tech Theme Enhancements */ html[data-theme="forest-tech"] .app__brand { text-shadow: var(--gd-forest-text-shadow); filter: drop-shadow(var(--gd-forest-glow)); } html[data-theme="forest-tech"] .app__button--primary { box-shadow: var(--gd-forest-glow), var(--gd-shadow-md); border: 1px solid var(--gd-color-primary); } html[data-theme="forest-tech"] .app__button--primary:hover { box-shadow: var(--gd-forest-border-glow), var(--gd-shadow-lg); text-shadow: var(--gd-forest-text-shadow); } html[data-theme="forest-tech"] .app__project-card:hover { border: 1px solid var(--gd-color-primary); box-shadow: var(--gd-forest-border-glow), var(--gd-shadow-xl); }/* ProfileDropdown.css - Using theme variables for consistency */ /* ===== PROFILE DROPDOWN CONTAINER ===== */ .profile-dropdown { position: relative; display: flex; align-items: center; /* Smooth transitions between authentication states */ transition: all var(--gd-transition-base); } /* ===== AUTHENTICATION STATE TRANSITIONS ===== */ .profile-dropdown--transitioning { /* Prevent interaction during transitions */ pointer-events: none; } .profile-dropdown__transition-container { position: relative; display: flex; align-items: center; /* Set minimum width to prevent layout shift */ min-width: 120px; min-height: 40px; } /* ===== TRIGGER BUTTON ===== */ .profile-dropdown__trigger { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-2); background: none; border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-lg); color: var(--gd-text-primary); cursor: pointer; transition: var(--gd-transition-base); font-family: inherit; font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); min-height: 40px; /* Enhanced transitions for authentication state changes */ opacity: 1; transform: scale(1); } /* ===== AUTHENTICATION STATE TRANSITIONS ===== */ .profile-dropdown__state-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .profile-dropdown__state-item { transition: opacity 0.3s var(--gd-ease-in-out), transform 0.3s var(--gd-ease-in-out), width 0.3s var(--gd-ease-in-out), height 0.3s var(--gd-ease-in-out), padding 0.3s var(--gd-ease-in-out); display: flex; align-items: center; width: 100%; } .profile-dropdown__state-item--entering { opacity: 0; transform: scale(0.95) translateY(8px); } .profile-dropdown__state-item--entered { opacity: 1; transform: scale(1) translateY(0); } .profile-dropdown__state-item--exiting { opacity: 0; transform: scale(0.95) translateY(-8px); pointer-events: none; } .profile-dropdown__state-item--exited { opacity: 0; transform: scale(0.9) translateY(-12px); pointer-events: none; position: absolute; top: 0; left: 0; right: 0; } .profile-dropdown__trigger:hover { background: var(--gd-bg-secondary); border-color: var(--gd-border-medium); transform: translateY(-1px); } .profile-dropdown__trigger:focus { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; border-color: var(--gd-border-focus); } .profile-dropdown--open .profile-dropdown__trigger { background: var(--gd-bg-secondary); border-color: var(--gd-border-focus); box-shadow: var(--gd-input-shadow-focus); } /* ===== LOGIN BUTTON VARIANT ===== */ .profile-dropdown__trigger--login { background: var(--gd-color-primary); color: var(--gd-text-on-primary); border-color: var(--gd-color-primary); padding: var(--gd-space-3) var(--gd-space-5); font-weight: var(--gd-font-weight-semibold); } .profile-dropdown__trigger--login:hover { background: var(--gd-color-primary-600); border-color: var(--gd-color-primary-600); color: var(--gd-text-on-primary); box-shadow: var(--gd-shadow-primary); } .profile-dropdown__trigger--login:focus { outline-color: var(--gd-color-primary-300); box-shadow: var(--gd-input-shadow-focus); } .profile-dropdown__login-text { white-space: nowrap; } /* ===== AVATAR ===== */ .profile-dropdown__avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--gd-color-primary); color: var(--gd-text-on-primary); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); flex-shrink: 0; } .profile-dropdown__initials { user-select: none; line-height: 1; } /* ===== CARET ICON ===== */ .profile-dropdown__caret { display: flex; align-items: center; color: var(--gd-text-tertiary); transition: var(--gd-transition-base); flex-shrink: 0; } .profile-dropdown--open .profile-dropdown__caret { transform: rotate(180deg); color: var(--gd-text-primary); } /* ===== DROPDOWN MENU ===== */ .profile-dropdown__menu { position: absolute; top: 100%; right: 0; z-index: var(--gd-z-dropdown); min-width: 280px; margin-top: var(--gd-space-2); background: var(--gd-modal-bg); border: 1px solid var(--gd-border-light); border-radius: var(--gd-modal-radius); box-shadow: var(--gd-shadow-xl); overflow: hidden; animation: profile-dropdown-enter 0.15s ease-out; } @keyframes profile-dropdown-enter { from { opacity: 0; transform: translateY(-8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ===== MENU HEADER (User Info) ===== */ .profile-dropdown__header { display: flex; align-items: center; gap: var(--gd-space-3); padding: var(--gd-space-4); background: var(--gd-bg-primary-subtle); border-bottom: 1px solid var(--gd-border-light); } .profile-dropdown__user-avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--gd-color-primary); color: var(--gd-text-on-primary); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-semibold); flex-shrink: 0; } .profile-dropdown__user-initials { user-select: none; line-height: 1; } .profile-dropdown__user-info { flex: 1; min-width: 0; } .profile-dropdown__user-name { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-1); word-break: break-word; } .profile-dropdown__user-email { font-size: var(--gd-font-size-xs); color: var(--gd-text-tertiary); word-break: break-all; margin-bottom: var(--gd-space-1); } .profile-dropdown__user-role { display: inline-block; padding: var(--gd-space-1) var(--gd-space-2); background: var(--gd-color-accent); color: var(--gd-text-on-accent); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); border-radius: var(--gd-radius-base); text-transform: uppercase; letter-spacing: 0.5px; } .profile-dropdown__user-role--admin { background: var(--gd-color-primary); color: var(--gd-text-on-primary); } .profile-dropdown__user-role--user { background: var(--gd-text-quaternary); color: var(--gd-text-primary); } /* ===== MENU DIVIDER ===== */ .profile-dropdown__divider { height: 1px; background: var(--gd-border-light); margin: var(--gd-space-2) 0; } /* ===== MENU ITEMS ===== */ .profile-dropdown__items { padding: var(--gd-space-2); } .profile-dropdown__item { display: flex; align-items: center; gap: var(--gd-space-3); width: 100%; padding: var(--gd-space-3) var(--gd-space-4); background: none; border: none; border-radius: var(--gd-radius-md); color: var(--gd-text-primary); font-family: inherit; font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); text-align: left; cursor: pointer; transition: var(--gd-transition-base); min-height: 40px; } .profile-dropdown__item:hover { background: var(--gd-bg-secondary); color: var(--gd-text-primary); } .profile-dropdown__item:focus { outline: 2px solid var(--gd-border-focus); outline-offset: -2px; background: var(--gd-bg-secondary); } .profile-dropdown__item--danger { color: var(--gd-color-danger); } .profile-dropdown__item--danger:hover { background: var(--gd-color-danger-light); color: var(--gd-color-danger-dark); } .profile-dropdown__item--danger:focus { outline-color: var(--gd-color-danger); background: var(--gd-color-danger-light); } /* ===== MENU ITEM ELEMENTS ===== */ .profile-dropdown__item-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: currentColor; } .profile-dropdown__item-text { flex: 1; white-space: nowrap; color: currentColor; } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 767px) { /* Mobile: Adjust dropdown positioning and size */ .profile-dropdown__menu { min-width: 260px; max-width: calc(100vw - var(--gd-space-8)); } .profile-dropdown__header { padding: var(--gd-space-3); } .profile-dropdown__user-avatar { width: 36px; height: 36px; font-size: var(--gd-font-size-sm); } .profile-dropdown__avatar { width: 28px; height: 28px; font-size: var(--gd-font-size-xs); } .profile-dropdown__trigger { padding: var(--gd-space-2); min-height: 36px; width: 100%; } .profile-dropdown__trigger--login { padding: var(--gd-space-2_5) var(--gd-space-4); } /* Mobile: Adjusted transition container for smaller screens */ .profile-dropdown__transition-container { min-width: 100px; min-height: 36px; } /* Mobile: Simplified transitions for better performance */ .profile-dropdown__state-item--entering, .profile-dropdown__state-item--exiting { transform: scale(0.98) translateY(4px); } } /* ===== TABLET RESPONSIVE ===== */ @media (max-width: 1024px) and (min-width: 768px) { .profile-dropdown__transition-container { min-width: 110px; min-height: 38px; } } /* ===== ACCESSIBILITY ENHANCEMENTS ===== */ @media (prefers-reduced-motion: reduce) { .profile-dropdown__menu { animation: none; } .profile-dropdown__trigger, .profile-dropdown__item, .profile-dropdown__caret, .profile-dropdown__state-item, .profile-dropdown__loading-spinner { transition: none; } /* Simplify authentication state transitions for reduced motion */ .profile-dropdown__state-item--entering, .profile-dropdown__state-item--entered, .profile-dropdown__state-item--exiting, .profile-dropdown__state-item--exited { transform: none; } .profile-dropdown__state-item--entering, .profile-dropdown__state-item--exiting, .profile-dropdown__state-item--exited { opacity: 0; } .profile-dropdown__state-item--entered { opacity: 1; } /* Simplify loading spinner animations for reduced motion */ .profile-dropdown__loading-spinner--entering, .profile-dropdown__loading-spinner--exiting { animation: none; opacity: 1; transform: none; } } /* High contrast mode adjustments */ @media (prefers-contrast: high) { .profile-dropdown__trigger { border-width: 2px; } .profile-dropdown__menu { border-width: 2px; } .profile-dropdown__item:focus { outline-width: 3px; } } /* ===== THEME-SPECIFIC ENHANCEMENTS ===== */ /* These will be activated by the theme system */ /* Dark themes enhancement */ html[data-theme*="dark"] .profile-dropdown__menu, html[data-theme*="cyber"] .profile-dropdown__menu { backdrop-filter: blur(var(--gd-backdrop-blur)); -webkit-backdrop-filter: blur(var(--gd-backdrop-blur)); } /* Arctic Frost theme enhancement */ html[data-theme="arctic-frost"] .profile-dropdown__avatar, html[data-theme="arctic-frost"] .profile-dropdown__user-avatar { box-shadow: 0 0 10px rgba(74, 144, 226, 0.2); } html[data-theme="arctic-frost"] .profile-dropdown__menu { box-shadow: var(--gd-shadow-2xl), 0 0 20px rgba(74, 144, 226, 0.1); } /* Gaming themes enhancement */ html[data-theme="gaming-inferno"] .profile-dropdown__user-role, html[data-theme="electric-storm"] .profile-dropdown__user-role { text-shadow: 0 0 4px currentColor; } /* ===== STATES & LOADING ===== */ .profile-dropdown--loading .profile-dropdown__trigger { pointer-events: none; opacity: 0.7; } .profile-dropdown--error .profile-dropdown__trigger { border-color: var(--gd-color-danger); color: var(--gd-color-danger); } /* Add these styles to your existing ProfileDropdown.css file */ /* ===== LOADING STATES ===== */ .profile-dropdown--loading { opacity: 0.8; pointer-events: none; } .profile-dropdown__loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff; animation: spin 1s ease-in-out infinite; transition: opacity 0.2s var(--gd-ease-in-out); } .profile-dropdown__loading-spinner--entering { opacity: 0; transform: scale(0.8); animation: spin 1s ease-in-out infinite, loading-enter 0.2s ease-out forwards; } .profile-dropdown__loading-spinner--exiting { opacity: 1; animation: spin 1s ease-in-out infinite, loading-exit 0.2s ease-in forwards; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes loading-enter { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes loading-exit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } } /* ===== GOOGLE AUTH BUTTON ENHANCEMENTS ===== */ .profile-dropdown__trigger--login { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-3) var(--gd-space-5); background: #4285f4; color: white; border: none; border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); font-family: var(--gd-font-family-primary); cursor: pointer; transition: var(--gd-transition-base); min-width: 100px; justify-content: center; } .profile-dropdown__trigger--login:hover:not(:disabled) { background: #3367d6; transform: translateY(-1px); box-shadow: var(--gd-shadow-lg); } .profile-dropdown__trigger--login:active:not(:disabled) { transform: translateY(0); } .profile-dropdown__trigger--login:disabled { background: var(--gd-text-quaternary); cursor: not-allowed; transform: none; opacity: 0.7; } .profile-dropdown__google-icon { font-size: 16px; line-height: 1; } .profile-dropdown__login-text { font-weight: var(--gd-font-weight-semibold); white-space: nowrap; } /* ===== RESPONSIVE ADJUSTMENTS ===== */ @media (max-width: 480px) { .profile-dropdown__trigger--login { min-width: 80px; padding: var(--gd-space-2) var(--gd-space-4); font-size: var(--gd-font-size-xs); } } /* ===== ACCESSIBILITY ===== */ @media (prefers-reduced-motion: reduce) { .profile-dropdown__loading-spinner { animation: none; } .profile-dropdown__trigger--login { transition: none; } } /* ===== HIGH CONTRAST MODE ===== */ @media (prefers-contrast: high) { .profile-dropdown__trigger--login { border: 2px solid var(--gd-border-strong); } .profile-dropdown__trigger--login:disabled { border-color: var(--gd-text-disabled); } }/* RadialMenu.css - GTA V-style weapon wheel inspired design */ /* ===== MAIN CONTAINER ===== */ .radial-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: var(--gd-z-modal); opacity: 0; visibility: hidden; transition: var(--gd-transition-slow); pointer-events: none; } .radial-menu--open { opacity: 1; visibility: visible; pointer-events: all; } /* ===== BACKDROP ===== */ .radial-menu__backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Fallback for browsers without backdrop-filter */ @supports not (backdrop-filter: blur(10px)) { .radial-menu__backdrop { background: rgba(0, 0, 0, 0.9); } } /* ===== MENU CONTAINER ===== */ .radial-menu__container { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; } /* ===== CENTER BUTTON ===== */ .radial-menu__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--gd-color-primary-500) 0%, var(--gd-color-primary-700) 100%); border: 3px solid var(--gd-color-primary-300); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all var(--gd-transition-base) cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 0 20px rgba(74, 144, 226, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2); z-index: 10; } .radial-menu--open .radial-menu__center { transform: translate(-50%, -50%) scale(1); } .radial-menu--open .radial-menu__center:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 30px rgba(74, 144, 226, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3); } .radial-menu--open .radial-menu__center:active { transform: translate(-50%, -50%) scale(0.95); } .radial-menu__center-icon { font-size: var(--gd-font-size-xl); color: var(--gd-text-on-primary); line-height: 1; margin-bottom: var(--gd-space-1); font-weight: var(--gd-font-weight-bold); } .radial-menu__center-label { font-size: var(--gd-font-size-xs); color: var(--gd-text-on-primary); font-weight: var(--gd-font-weight-medium); text-transform: uppercase; letter-spacing: 0.5px; } /* ===== GLOW EFFECT ===== */ .radial-menu__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(74, 144, 226, 0.3) 0%, rgba(74, 144, 226, 0.1) 40%, transparent 70%); opacity: 0; transition: var(--gd-transition-slow); animation: pulse 3s ease-in-out infinite; z-index: 1; } .radial-menu--open .radial-menu__glow { opacity: 1; } @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } } @keyframes itemEntrance { 0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(-180deg); } 60% { transform: translate(-50%, -50%) translate(calc(var(--item-x) * 0.8), calc(var(--item-y) * 0.8)) scale(1.1) rotate(-20deg); } 100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--item-x), var(--item-y)) scale(1) rotate(0deg); } } /* ===== NAVIGATION ITEMS ===== */ .radial-menu__item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translate(var(--item-x, 0), var(--item-y, 0)) scale(0); opacity: 0; z-index: 5; } .radial-menu--open .radial-menu__item { animation: itemEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: var(--item-delay, 0s); } .radial-menu__item-button { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--gd-color-secondary-400) 0%, var(--gd-color-secondary-600) 100%); border: 2px solid var(--gd-color-secondary-300); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(125, 211, 252, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2); } .radial-menu__item-button:hover, .radial-menu__item--hovered .radial-menu__item-button { transform: scale(1.1); background: linear-gradient(135deg, var(--gd-color-secondary-300) 0%, var(--gd-color-secondary-500) 100%); box-shadow: 0 6px 20px rgba(125, 211, 252, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3); } .radial-menu__item--active .radial-menu__item-button { background: linear-gradient(135deg, var(--gd-color-accent-400) 0%, var(--gd-color-accent-600) 100%); border-color: var(--gd-color-accent-300); box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3); } .radial-menu__item-button:active { transform: scale(0.95); } .radial-menu__item-label { font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-on-secondary); text-transform: uppercase; letter-spacing: 0.3px; text-align: center; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .radial-menu__item--active .radial-menu__item-label { color: var(--gd-text-on-accent); } /* ===== CONNECTION LINES ===== */ .radial-menu__connection { position: absolute; top: 50%; left: 50%; width: 2px; height: 60px; background: linear-gradient(to bottom, rgba(74, 144, 226, 0.6) 0%, rgba(74, 144, 226, 0.2) 50%, transparent 100%); transform: translate(-50%, -50%) rotate(var(--item-angle, 0deg)); transform-origin: center bottom; opacity: 0; transition: var(--gd-transition-slow); z-index: 2; pointer-events: none; } .radial-menu--item-hovered .radial-menu__connection { opacity: 1; } .radial-menu__item--hovered .radial-menu__connection { background: linear-gradient(to bottom, rgba(125, 211, 252, 0.8) 0%, rgba(125, 211, 252, 0.3) 50%, transparent 100%); opacity: 1; } .radial-menu__item--active .radial-menu__connection { background: linear-gradient(to bottom, rgba(52, 211, 153, 0.8) 0%, rgba(52, 211, 153, 0.3) 50%, transparent 100%); opacity: 1; } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 480px) { .radial-menu__container { width: 280px; height: 280px; } .radial-menu__center { width: 70px; height: 70px; } .radial-menu__center-icon { font-size: var(--gd-font-size-lg); } .radial-menu__item-button { width: 50px; height: 50px; } .radial-menu__item-label { font-size: 10px; } .radial-menu__connection { height: 50px; } } @media (max-width: 360px) { .radial-menu__container { width: 250px; height: 250px; } .radial-menu__center { width: 60px; height: 60px; } .radial-menu__item-button { width: 45px; height: 45px; } .radial-menu__connection { height: 45px; } } /* ===== ACCESSIBILITY ===== */ @media (prefers-reduced-motion: reduce) { .radial-menu, .radial-menu__item, .radial-menu__center, .radial-menu__item-button, .radial-menu__connection, .radial-menu__glow { transition: none !important; animation: none !important; } .radial-menu__glow { display: none; } .radial-menu--open .radial-menu__item { opacity: 1; transform: translate(-50%, -50%) translate(var(--item-x, 0), var(--item-y, 0)) scale(1); animation: none !important; } .radial-menu--open .radial-menu__center { transform: translate(-50%, -50%) scale(1); } } /* Focus styles for keyboard navigation */ .radial-menu__center:focus, .radial-menu__item-button:focus { outline: 2px solid var(--gd-color-accent-400); outline-offset: 2px; } .radial-menu__center:focus { box-shadow: 0 0 30px rgba(74, 144, 226, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--gd-color-accent-400); } /* High contrast mode support */ @media (prefers-contrast: high) { .radial-menu__backdrop { background: rgba(0, 0, 0, 0.95); } .radial-menu__center, .radial-menu__item-button { border-width: 3px; } .radial-menu__connection { background: rgba(255, 255, 255, 0.8); } }/* ModernNavigation.css - Fixed layout and mobile integration */ /* ===== MAIN NAVIGATION ===== */ .modern-nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: var(--gd-nav-height); background: var(--gd-nav-bg); backdrop-filter: blur(var(--gd-nav-backdrop-blur)); -webkit-backdrop-filter: blur(var(--gd-nav-backdrop-blur)); border-bottom: 1px solid var(--gd-nav-border); box-shadow: var(--gd-nav-shadow); z-index: var(--gd-z-fixed); transition: var(--gd-transition-base); } .modern-nav--scrolled { height: calc(var(--gd-nav-height) - 10px); box-shadow: var(--gd-shadow-xl); } /* ===== CONTAINER ===== */ .modern-nav__container { display: flex; align-items: center; justify-content: space-between; max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); height: 100%; } /* ===== BRAND/LOGO ===== */ .modern-nav__brand { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; transition: var(--gd-transition-base); flex-shrink: 0; padding: var(--gd-space-2); border-radius: var(--gd-radius-base); } .modern-nav__brand:hover { transform: translateY(-1px); box-shadow: var(--gd-shadow-sm); } .modern-nav__brand-logo { height: 32px; width: auto; max-width: 150px; object-fit: contain; transition: var(--gd-transition-base); } .modern-nav__brand:hover .modern-nav__brand-logo { filter: brightness(1.1); } /* ===== DESKTOP NAVIGATION - CENTERED ===== */ .modern-nav__list { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; flex: 1; } .modern-nav__item { position: relative; margin: 0; } .modern-nav__link { display: flex; align-items: center; padding: var(--gd-space-4) var(--gd-space-6); color: var(--gd-nav-link-color); text-decoration: none; font-weight: var(--gd-font-weight-medium); font-size: var(--gd-font-size-sm); background: none; border: none; cursor: pointer; transition: var(--gd-transition-base); position: relative; white-space: nowrap; letter-spacing: 0.3px; } .modern-nav__link:hover { color: var(--gd-nav-link-hover); } /* Active state */ .modern-nav__item--active .modern-nav__link { color: var(--gd-nav-link-active); outline: 2px solid var(--gd-border-focus); font-weight: var(--gd-font-weight-semibold); } /* Hover underline effect */ .modern-nav__link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--gd-nav-link-active); transform: translateX(-50%); transition: var(--gd-transition-base); } .modern-nav__link:hover::after, .modern-nav__item--active .modern-nav__link::after { width: 60%; } /* Hide brackets by default */ .modern-nav__bracket-open, .modern-nav__bracket-close { display: none; } .modern-nav__label { transition: var(--gd-transition-base); } /* ===== RIGHT SIDE CONTAINER ===== */ .modern-nav__right { display: flex; align-items: center; gap: var(--gd-space-4); flex-shrink: 0; } /* ===== PROFILE INTEGRATION ===== */ .modern-nav__profile { /* Profile dropdown styling handled in ProfileDropdown.css */ } .modern-nav__profile--mobile { width: 100%; margin-top: var(--gd-space-4); } /* ===== HAMBURGER MENU ===== */ .modern-nav__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; z-index: calc(var(--gd-z-fixed) + 1); } .modern-nav__hamburger-line { width: 24px; height: 2px; background: var(--gd-text-primary); margin: 3px 0; transition: var(--gd-transition-slow) var(--gd-ease-in-out); transform-origin: center; } /* Hamburger to X animation */ .modern-nav--open .modern-nav__hamburger-line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .modern-nav--open .modern-nav__hamburger-line:nth-child(2) { opacity: 0; transform: scale(0); } .modern-nav--open .modern-nav__hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } /* ===== LEGACY MOBILE OVERLAY (removed - using RadialMenu now) ===== */ /* Mobile overlay styles have been replaced with RadialMenu component */ /* ===== MOBILE PROFILE OVERLAY ===== */ .modern-nav__mobile-profile-overlay { position: fixed; top: var(--gd-space-4); right: var(--gd-space-4); z-index: calc(var(--gd-z-modal) + 1); background: var(--gd-surface-raised); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-3); box-shadow: var(--gd-shadow-2xl); border: 2px solid var(--gd-border-medium); backdrop-filter: blur(var(--gd-backdrop-blur)); -webkit-backdrop-filter: blur(var(--gd-backdrop-blur)); /* Enhanced visibility */ opacity: 1; transform: scale(1); transition: all var(--gd-transition-base); /* Pulsing animation to grab attention */ animation: profilePulse 2s ease-in-out infinite; } @keyframes profilePulse { 0%, 100% { box-shadow: var(--gd-shadow-2xl), 0 0 0 0 rgba(74, 144, 226, 0.7); } 50% { box-shadow: var(--gd-shadow-2xl), 0 0 0 8px rgba(74, 144, 226, 0); } } /* ===== LEGACY MOBILE PROFILE SECTION (hidden) ===== */ .modern-nav__mobile-item--profile { display: none; } /* ===== ACCESSIBILITY ===== */ .modern-nav--keyboard .modern-nav__link:focus { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; border-radius: var(--gd-radius-base); } .modern-nav--keyboard .modern-nav__mobile-link:focus { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; border-radius: var(--gd-radius-lg); } .modern-nav--keyboard .modern-nav__brand:focus { outline: 2px solid var(--gd-border-focus); outline-offset: 2px; border-radius: var(--gd-radius-base); } /* ===== REDUCED MOTION ===== */ .modern-nav--reduced-motion *, .modern-nav--reduced-motion *::before, .modern-nav--reduced-motion *::after { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { .modern-nav__mobile-profile-overlay { animation: none !important; } } /* ===== RESPONSIVE BREAKPOINTS ===== */ @media (max-width: 767px) { .modern-nav__container { padding: 0 var(--gd-space-4); } .modern-nav__hamburger { display: flex; } .modern-nav__list { display: none; } .modern-nav__brand-logo { height: 28px; max-width: 120px; } /* Hide desktop profile dropdown on mobile */ .modern-nav__profile:not(.modern-nav__profile--mobile) { display: none; } } @media (min-width: 768px) { .modern-nav__hamburger, .modern-nav__radial-menu, .modern-nav__mobile-profile-overlay { display: none !important; } /* Hide mobile profile dropdown on desktop */ .modern-nav__profile--mobile { display: none; } } /* Tablet adjustments */ @media (max-width: 1024px) and (min-width: 768px) { .modern-nav__container { padding: 0 var(--gd-space-6); } .modern-nav__link { padding: var(--gd-space-4) var(--gd-space-5); font-size: var(--gd-font-size-sm); } .modern-nav__right { gap: var(--gd-space-3); } } /* Large screens */ @media (min-width: 1400px) { .modern-nav__container { max-width: 1400px; } }/* Hero.css - Optimized for Arctic Frost Theme */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gd-gradient-subtle); /* Light gradient instead of dark */ color: var(--gd-text-primary); /* Ensure proper text color */ } /* Background Effects - Softer for light theme */ .hero__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .hero__gradient-orb { position: absolute; border-radius: var(--gd-radius-full); filter: blur(100px); opacity: 0.15; /* Reduced opacity for subtle effect */ animation: heroOrbitFloat 25s ease-in-out infinite; } .hero__gradient-orb--1 { width: 350px; height: 350px; background: var(--gd-color-primary-400); top: 15%; left: 5%; animation-delay: 0s; } .hero__gradient-orb--2 { width: 250px; height: 250px; background: var(--gd-color-secondary-400); top: 55%; right: 10%; animation-delay: -8s; } .hero__gradient-orb--3 { width: 300px; height: 300px; background: var(--gd-color-accent-400); bottom: 25%; left: 45%; animation-delay: -16s; } /* Container */ .hero__container { position: relative; max-width: var(--gd-container-max-width); width: 100%; padding: 0 var(--gd-container-padding); z-index: 2; } .hero__content-wrapper { display: flex; flex-direction: column; gap: var(--gd-space-16); } /* Main Content Layout */ .hero__main-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gd-space-16); align-items: center; margin-bottom: var(--gd-space-12); } .hero__text-content { color: var(--gd-text-primary); /* Use primary text color for readability */ } /* Badge - Redesigned for light theme */ .hero__badge { display: inline-flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-3) var(--gd-space-6); background: var(--gd-bg-primary-subtle); /* Use subtle primary background */ border: 1px solid var(--gd-border-primary); /* Primary border */ border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); margin-bottom: var(--gd-space-8); margin-top: var(--gd-space-2); color: var(--gd-color-primary-700); /* Dark primary for contrast */ box-shadow: var(--gd-shadow-primary); opacity: 0; transform: translateY(20px); animation: heroSlideUp 0.8s var(--gd-ease-out) 0.2s forwards; } .hero__badge-icon { font-size: var(--gd-font-size-base); color: var(--gd-color-primary-500); } .hero__badge-text { background: linear-gradient(135deg, var(--gd-color-primary-600), var(--gd-color-primary-800)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: var(--gd-font-weight-semibold); } /* Today's Theme */ .hero__theme-of-day { background: var(--gd-bg-secondary-subtle); border: 1px solid var(--gd-border-secondary); border-radius: var(--gd-radius-lg); padding: var(--gd-space-4) var(--gd-space-6); margin-bottom: var(--gd-space-8); box-shadow: var(--gd-shadow-secondary); opacity: 0; transform: translateY(20px); animation: heroSlideUp 0.8s var(--gd-ease-out) 0.3s forwards; } .hero__theme-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gd-space-2); } .hero__theme-label { font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; } .hero__theme-date { font-size: var(--gd-font-size-xs); color: var(--gd-text-tertiary); font-weight: var(--gd-font-weight-medium); } .hero__theme-content { display: flex; align-items: center; } .hero__theme-text { font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-semibold); background: linear-gradient(135deg, var(--gd-color-secondary-600), var(--gd-color-accent-600)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: heroThemeGlow 2s ease-in-out infinite alternate; } /* Typography - Optimized for visibility */ .hero__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--gd-font-weight-black); line-height: var(--gd-line-height-tight); margin-bottom: var(--gd-space-6); color: var(--gd-text-primary); /* Strong dark text */ opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 0.4s forwards; } .hero__title-line--primary { /* Remove gradient text clipping for better readability */ background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; /* Use solid primary color with proper contrast */ color: var(--gd-color-primary-800); display: block; position: relative; /* Enhanced typography for better visibility */ font-weight: var(--gd-font-weight-black); text-shadow: 0 2px 8px rgba(74, 144, 226, 0.1); /* Optional: Add subtle underline accent */ &::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg, var(--gd-color-primary-500), var(--gd-color-accent-500)); border-radius: var(--gd-radius-full); opacity: 0.8; } } .hero__subtitle { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-medium); /* Increased weight for better visibility */ margin-bottom: var(--gd-space-6); color: var(--gd-color-primary-700); /* Darker primary for better contrast */ opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 0.6s forwards; } .hero__description { font-size: var(--gd-font-size-lg); line-height: var(--gd-line-height-relaxed); margin-bottom: var(--gd-space-10); color: var(--gd-text-secondary); /* Secondary text color */ max-width: 500px; opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 0.8s forwards; } /* CTA Buttons - Redesigned for light theme */ .hero__cta-group { display: flex; gap: var(--gd-space-4); margin-bottom: var(--gd-space-12); opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 1s forwards; } .hero__cta { display: inline-flex; align-items: center; gap: var(--gd-space-3); padding: var(--gd-space-4) var(--gd-space-8); font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-semibold); border-radius: var(--gd-radius-full); cursor: pointer; transition: var(--gd-transition-base); text-decoration: none; border: none; position: relative; overflow: hidden; } .hero__cta--primary { background: var(--gd-gradient-primary); color: var(--gd-text-on-primary); /* White text on primary background */ box-shadow: var(--gd-shadow-primary); } .hero__cta--primary:hover { transform: translateY(-3px); box-shadow: var(--gd-shadow-xl); filter: brightness(1.1); } .hero__cta--secondary { background: var(--gd-bg-elevated); color: var(--gd-color-primary-700); border: 2px solid var(--gd-border-primary); box-shadow: var(--gd-shadow-base); } .hero__cta--secondary:hover { background: var(--gd-bg-primary-subtle); border-color: var(--gd-color-primary-500); transform: translateY(-3px); box-shadow: var(--gd-shadow-lg); } .hero__cta-text { position: relative; z-index: 1; } .hero__cta-icon { font-size: var(--gd-font-size-lg); transition: var(--gd-transition-base); } .hero__cta:hover .hero__cta-icon { transform: translateX(3px); } /* Technologies Section */ .hero__technologies { opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 1.2s forwards; } .hero__tech-label { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-tertiary); margin-bottom: var(--gd-space-4); display: block; text-transform: uppercase; letter-spacing: 1px; } .hero__tech-grid { display: flex; flex-wrap: wrap; gap: var(--gd-space-3); } .hero__tech-item { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-bg-elevated); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-secondary); box-shadow: var(--gd-shadow-sm); transition: var(--gd-transition-base); } .hero__tech-item:hover { background: var(--gd-bg-primary-subtle); border-color: var(--gd-border-primary); transform: translateY(-2px); box-shadow: var(--gd-shadow-md); color: var(--gd-color-primary-700); } .hero__tech-icon { font-size: var(--gd-font-size-base); } /* Visual Element */ .hero__visual { display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateY(30px) scale(0.9); animation: heroVisualIn 1.2s var(--gd-ease-out) 0.6s forwards; } .hero__visual-card { width: 100%; max-width: 400px; background: var(--gd-card-bg); border: 1px solid var(--gd-card-border); border-radius: var(--gd-card-radius); overflow: hidden; box-shadow: var(--gd-card-shadow); transition: var(--gd-transition-slow); } .hero__visual-card:hover { transform: translateY(-10px) rotate(2deg); box-shadow: var(--gd-card-shadow-hover); } .hero__visual-header { display: flex; align-items: center; gap: var(--gd-space-4); padding: var(--gd-space-4) var(--gd-space-6); background: var(--gd-bg-secondary); border-bottom: 1px solid var(--gd-border-light); } .hero__visual-dots { display: flex; gap: var(--gd-space-2); } .hero__visual-dots span { width: 12px; height: 12px; border-radius: var(--gd-radius-full); background: var(--gd-color-primary-400); opacity: 0.7; } .hero__visual-dots span:nth-child(2) { background: var(--gd-color-secondary-400); } .hero__visual-dots span:nth-child(3) { background: var(--gd-color-accent-400); } .hero__visual-title { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-primary); } .hero__visual-content { padding: var(--gd-space-8); height: 200px; position: relative; background: var(--gd-bg-primary); } .hero__code-lines { position: absolute; top: var(--gd-space-8); left: var(--gd-space-8); right: var(--gd-space-8); bottom: var(--gd-space-8); } .hero__code-line { height: 4px; background: linear-gradient(90deg, var(--gd-color-primary-500), var(--gd-color-primary-200)); border-radius: var(--gd-radius-base); margin-bottom: var(--gd-space-4); opacity: 0; animation: heroCodeType 2s ease-in-out infinite; } .hero__code-line--1 { width: 70%; animation-delay: 0s; } .hero__code-line--2 { width: 45%; animation-delay: 0.5s; background: linear-gradient(90deg, var(--gd-color-secondary-500), var(--gd-color-secondary-200)); } .hero__code-line--3 { width: 80%; animation-delay: 1s; background: linear-gradient(90deg, var(--gd-color-accent-500), var(--gd-color-accent-200)); } .hero__code-line--4 { width: 35%; animation-delay: 1.5s; } .hero__code-line--5 { width: 60%; animation-delay: 2s; background: linear-gradient(90deg, var(--gd-color-secondary-500), var(--gd-color-secondary-200)); } /* Achievements */ .hero__achievements { padding: var(--gd-space-8); background: var(--gd-card-bg); border: 1px solid var(--gd-card-border); border-radius: var(--gd-card-radius); box-shadow: var(--gd-card-shadow); opacity: 0; transform: translateY(30px); animation: heroSlideUp 1s var(--gd-ease-out) 1.4s forwards; } .hero__achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gd-space-6); } .hero__achievement { display: flex; align-items: center; gap: var(--gd-space-4); text-align: left; padding: var(--gd-space-3); border-radius: var(--gd-radius-lg); transition: var(--gd-transition-base); } .hero__achievement:hover { background: var(--gd-bg-primary-subtle); transform: translateY(-2px); } .hero__achievement-icon { font-size: var(--gd-font-size-2xl); filter: drop-shadow(0 2px 4px rgba(74, 144, 226, 0.3)); } .hero__achievement-content { display: flex; flex-direction: column; } .hero__achievement-number { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); } .hero__achievement-label { font-size: var(--gd-font-size-sm); color: var(--gd-text-tertiary); } /* Enhanced Particles */ .hero__particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .hero__particle { position: absolute; width: var(--size, 3px); height: var(--size, 3px); background: var(--gd-color-primary-400); border-radius: var(--gd-radius-full); top: var(--y); left: var(--x); opacity: 0.4; animation: heroParticleFloat var(--duration) ease-in-out infinite; animation-delay: var(--delay); } .hero__particle:nth-child(3n) { background: var(--gd-color-secondary-400); opacity: 0.3; } .hero__particle:nth-child(3n+1) { background: var(--gd-color-accent-400); opacity: 0.35; } /* Scroll Indicator */ .hero__scroll-indicator { position: absolute; bottom: var(--gd-space-10); left: 50%; transform: translateX(-50%); text-align: center; color: var(--gd-text-tertiary); opacity: 0.8; animation: heroScrollBounce 2s ease-in-out infinite; } .hero__scroll-text { font-size: var(--gd-font-size-sm); margin-bottom: var(--gd-space-2); text-transform: uppercase; letter-spacing: 1px; } .hero__scroll-arrow { font-size: var(--gd-font-size-xl); color: var(--gd-color-primary-600); animation: heroArrowBounce 1.5s ease-in-out infinite; } /* Animations */ @keyframes heroSlideUp { to { opacity: 1; transform: translateY(0); } } @keyframes heroVisualIn { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes heroOrbitFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } @keyframes heroCodeType { 0%, 50% { opacity: 0.2; width: 0%; } 100% { opacity: 1; } } @keyframes heroParticleFloat { 0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.4; } 25% { transform: translateY(-20px) translateX(10px); opacity: 0.6; } 50% { transform: translateY(-40px) translateX(-5px); opacity: 0.5; } 75% { transform: translateY(-20px) translateX(-10px); opacity: 0.6; } } @keyframes heroScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } @keyframes heroArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* Animation class for intersection observer */ .hero--animate-in { animation: heroSectionFadeIn 1.5s var(--gd-ease-out) forwards; } @keyframes heroSectionFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes heroThemeGlow { from { filter: brightness(1) saturate(1); text-shadow: 0 0 8px rgba(74, 144, 226, 0.2); } to { filter: brightness(1.1) saturate(1.2); text-shadow: 0 0 12px rgba(74, 144, 226, 0.4); } } .hero__content--stagger>* { animation-play-state: running; } /* Interactive mouse effects - Subtle for light theme */ .hero:hover .hero__gradient-orb--1 { transform: translate(calc(var(--mouse-x) * 0.05), calc(var(--mouse-y) * 0.05)); } .hero:hover .hero__gradient-orb--2 { transform: translate(calc(var(--mouse-x) * -0.03), calc(var(--mouse-y) * 0.04)); } .hero:hover .hero__gradient-orb--3 { transform: translate(calc(var(--mouse-x) * 0.04), calc(var(--mouse-y) * -0.03)); } /* Responsive Design */ @media (max-width: 1024px) { .hero__main-content { gap: var(--gd-space-12); } .hero__achievements-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hero { min-height: 90vh; } .hero__container { padding: 0 var(--gd-space-4); } .hero__main-content { grid-template-columns: 1fr; text-align: center; gap: var(--gd-space-10); } .hero__theme-of-day { padding: var(--gd-space-3) var(--gd-space-4); margin-bottom: var(--gd-space-6); } .hero__theme-header { flex-direction: column; gap: var(--gd-space-1); align-items: center; margin-bottom: var(--gd-space-3); } .hero__theme-text { font-size: var(--gd-font-size-sm); text-align: center; } .hero__title { font-size: clamp(2rem, 8vw, 3rem); } .hero__subtitle { font-size: var(--gd-font-size-xl); } .hero__description { max-width: none; font-size: var(--gd-font-size-base); } .hero__cta-group { flex-direction: column; align-items: center; gap: var(--gd-space-3); } .hero__cta { width: 100%; max-width: 300px; justify-content: center; } .hero__tech-grid { justify-content: center; } .hero__achievements-grid { grid-template-columns: 1fr 1fr; gap: var(--gd-space-4); } .hero__achievement { flex-direction: column; text-align: center; gap: var(--gd-space-2); } .hero__visual-card { max-width: 320px; } } @media (max-width: 480px) { .hero { min-height: 85vh; } .hero__content-wrapper { gap: var(--gd-space-10); } .hero__title { font-size: clamp(1.75rem, 7vw, 2.5rem); margin-bottom: var(--gd-space-4); } .hero__subtitle { font-size: var(--gd-font-size-lg); margin-bottom: var(--gd-space-4); } .hero__achievements { padding: var(--gd-space-6); } .hero__achievements-grid { grid-template-columns: 1fr; gap: var(--gd-space-4); } .hero__tech-grid { grid-template-columns: repeat(2, 1fr); } .hero__visual-card { max-width: 280px; } .hero__visual-content { height: 150px; padding: var(--gd-space-6); } } /* Accessibility and reduced motion */ @media (prefers-reduced-motion: reduce) { .hero__gradient-orb, .hero__particle, .hero__code-line, .hero__scroll-indicator, .hero__scroll-arrow, .hero--animate-in, .hero__content--stagger>*, .hero__visual, .hero__badge, .hero__title, .hero__subtitle, .hero__description, .hero__cta-group, .hero__technologies, .hero__achievements, .hero__theme-of-day, .hero__theme-text { animation: none; transition: none; } .hero__cta:hover, .hero__tech-item:hover, .hero__visual-card:hover { transform: none; } .hero:hover .hero__gradient-orb--1, .hero:hover .hero__gradient-orb--2, .hero:hover .hero__gradient-orb--3 { transform: none; } }/* About.css - Optimized theme-consistent component styles */ .about { position: relative; padding: var(--gd-section-padding); background: var(--gd-bg-primary); overflow: hidden; min-height: 100vh; } /* Hero background with theme-aware gradient */ .about::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-hero); opacity: 0.08; z-index: 1; } .about__container { position: relative; max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); z-index: 2; } .about__content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gd-space-16); align-items: center; margin-bottom: var(--gd-space-20); } .about__text { color: var(--gd-text-primary); } .about__heading { font-size: var(--gd-font-size-5xl); font-weight: var(--gd-font-weight-bold); margin-bottom: var(--gd-space-6); line-height: var(--gd-line-height-tight); color: var(--gd-text-primary); background: var(--gd-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about__subheading { font-size: var(--gd-font-size-xl); margin-bottom: var(--gd-space-8); font-weight: var(--gd-font-weight-medium); color: var(--gd-color-primary-600); } .about__description { font-size: var(--gd-font-size-lg); line-height: var(--gd-line-height-relaxed); margin-bottom: var(--gd-space-8); color: var(--gd-text-secondary); } /* Mission Section */ .about__mission-section { margin-bottom: var(--gd-space-8); padding: var(--gd-space-6); background: var(--gd-surface-2); border-radius: var(--gd-radius-xl); border: 1px solid var(--gd-border-light); box-shadow: var(--gd-shadow-sm); } .about__mission-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-4); color: var(--gd-color-secondary-600); } .about__mission-text { font-size: var(--gd-font-size-base); line-height: var(--gd-line-height-relaxed); color: var(--gd-text-secondary); } /* Stats */ .about__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gd-space-4); margin-top: var(--gd-space-8); } .about__stat { text-align: center; padding: var(--gd-space-6); background: var(--gd-surface-raised); border-radius: var(--gd-radius-xl); border: 1px solid var(--gd-border-light); box-shadow: var(--gd-shadow-base); transition: var(--gd-transition-base); position: relative; overflow: hidden; } .about__stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gd-gradient-primary); transform: translateX(-100%); transition: var(--gd-transition-slow); } .about__stat:hover { background: var(--gd-surface-3); transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-color-primary-300); } .about__stat:hover::before { transform: translateX(0); } .about__stat-number { font-size: var(--gd-font-size-4xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-color-primary-600); display: block; margin-bottom: var(--gd-space-2); } .about__stat-label { font-size: var(--gd-font-size-sm); color: var(--gd-text-tertiary); text-transform: uppercase; letter-spacing: 1px; font-weight: var(--gd-font-weight-medium); } /* Values Section */ .about__values-section { margin-bottom: var(--gd-space-8); padding: var(--gd-space-6); background: var(--gd-surface-1); border-radius: var(--gd-radius-xl); border: 1px solid var(--gd-border-light); } .about__values-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-6); color: var(--gd-color-secondary-600); text-align: center; } .about__values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gd-space-4); } .about__value { padding: var(--gd-space-4); background: var(--gd-surface-raised); border-radius: var(--gd-radius-lg); text-align: center; border: 1px solid var(--gd-border-light); transition: var(--gd-transition-base); } .about__value:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-color-primary-300); } .about__value-icon { font-size: var(--gd-font-size-2xl); margin-bottom: var(--gd-space-2); display: block; } .about__value h4 { font-size: var(--gd-font-size-lg); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-2); color: var(--gd-text-primary); } .about__value p { font-size: var(--gd-font-size-sm); color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); } /* Approach Section */ .about__approach-section { margin-bottom: var(--gd-space-8); padding: var(--gd-space-6); background: var(--gd-surface-2); border-radius: var(--gd-radius-xl); border: 1px solid var(--gd-border-light); } .about__approach-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-4); color: var(--gd-color-secondary-600); } .about__approach-text { font-size: var(--gd-font-size-base); line-height: var(--gd-line-height-relaxed); color: var(--gd-text-secondary); } /* Anime.js-Inspired Visual Section */ .about__visual { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; background: var(--gd-surface-1); border-radius: var(--gd-radius-3xl); border: 1px solid var(--gd-border-light); overflow: hidden; } .about__animated-grid { position: absolute; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2px; opacity: 0.3; } .about__grid-item { background: var(--gd-color-primary-400); border-radius: 2px; transform: scale(0); animation: gridPulse 3s ease-in-out infinite; } @keyframes gridPulse { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 1; } } .about__floating-shapes { position: absolute; width: 100%; height: 100%; pointer-events: none; } .about__shape { position: absolute; border-radius: var(--gd-radius-lg); } .about__shape--circle { width: 60px; height: 60px; background: var(--gd-color-primary-500); border-radius: 50%; top: 20%; left: 15%; animation: floatRotate 8s ease-in-out infinite; } .about__shape--triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid var(--gd-color-secondary-500); top: 60%; right: 20%; animation: floatScale 6s ease-in-out infinite; } .about__shape--square { width: 40px; height: 40px; background: var(--gd-color-accent-500); top: 70%; left: 25%; animation: floatMorph 10s ease-in-out infinite; } .about__shape--diamond { width: 35px; height: 35px; background: var(--gd-color-primary-600); transform: rotate(45deg); top: 30%; right: 30%; animation: floatBounce 7s ease-in-out infinite; } .about__particles { position: absolute; width: 100%; height: 100%; } .about__particle { position: absolute; width: 4px; height: 4px; background: var(--gd-color-accent-400); border-radius: 50%; animation: particleFloat 12s linear infinite; } .about__particle:nth-child(odd) { background: var(--gd-color-primary-400); animation-duration: 15s; } .about__particle:nth-child(1) { top: 10%; left: 10%; } .about__particle:nth-child(2) { top: 20%; left: 80%; } .about__particle:nth-child(3) { top: 70%; left: 15%; } .about__particle:nth-child(4) { top: 40%; left: 60%; } .about__particle:nth-child(5) { top: 80%; left: 75%; } .about__particle:nth-child(6) { top: 15%; left: 45%; } .about__particle:nth-child(7) { top: 55%; left: 85%; } .about__particle:nth-child(8) { top: 85%; left: 20%; } .about__particle:nth-child(9) { top: 25%; left: 70%; } .about__particle:nth-child(10) { top: 65%; left: 40%; } .about__particle:nth-child(11) { top: 35%; left: 90%; } .about__particle:nth-child(12) { top: 75%; left: 55%; } /* Anime.js-inspired animations */ @keyframes floatRotate { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(20px, -15px) rotate(90deg) scale(1.1); } 50% { transform: translate(-10px, -25px) rotate(180deg) scale(0.9); } 75% { transform: translate(-25px, 10px) rotate(270deg) scale(1.05); } } @keyframes floatScale { 0%, 100% { transform: scale(1) rotate(0deg); } 33% { transform: scale(1.3) rotate(120deg); } 66% { transform: scale(0.8) rotate(240deg); } } @keyframes floatMorph { 0%, 100% { transform: scale(1) rotate(0deg); border-radius: 0; } 25% { transform: scale(1.2) rotate(90deg); border-radius: 50%; } 50% { transform: scale(0.8) rotate(180deg); border-radius: 0; } 75% { transform: scale(1.1) rotate(270deg); border-radius: 25%; } } @keyframes floatBounce { 0%, 100% { transform: rotate(45deg) translateY(0) scale(1); } 50% { transform: rotate(225deg) translateY(-20px) scale(1.15); } } @keyframes particleFloat { 0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; } 10% { transform: translateY(-10px) translateX(5px) scale(1); opacity: 1; } 90% { transform: translateY(-200px) translateX(-10px) scale(1); opacity: 1; } 100% { transform: translateY(-220px) translateX(-15px) scale(0); opacity: 0; } } /* Skills Section */ .about__skills { margin-bottom: var(--gd-space-20); padding: var(--gd-space-12) 0; background: var(--gd-surface-1); border-radius: var(--gd-radius-3xl); border: 1px solid var(--gd-border-light); } .about__skills-title { font-size: var(--gd-font-size-3xl); margin-bottom: var(--gd-space-8); color: var(--gd-text-primary); font-weight: var(--gd-font-weight-semibold); text-align: center; background: var(--gd-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about__skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gd-space-4); padding: 0 var(--gd-space-8); } .about__skill { padding: var(--gd-space-5); background: var(--gd-surface-raised); border-radius: var(--gd-radius-xl); text-align: center; border: 1px solid var(--gd-border-light); transition: var(--gd-transition-base); position: relative; overflow: hidden; } .about__skill::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-accent); opacity: 0; transition: var(--gd-transition-base); z-index: 1; } .about__skill:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-color-accent-400); } .about__skill:hover::before { opacity: 0.05; } .about__skill-icon { font-size: var(--gd-font-size-3xl); margin-bottom: var(--gd-space-3); display: block; color: var(--gd-color-accent-500); position: relative; z-index: 2; transition: var(--gd-transition-base); } .about__skill:hover .about__skill-icon { transform: scale(1.1); color: var(--gd-color-accent-600); } .about__skill-name { font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-primary); position: relative; z-index: 2; } /* Animation classes */ .about--animate-in { animation: aboutSlideUp 0.8s var(--gd-ease-out) forwards; } @keyframes aboutSlideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .about__content--stagger>* { opacity: 0; transform: translateY(30px); animation: aboutStagger 0.6s var(--gd-ease-out) forwards; } .about__content--stagger>*:nth-child(1) { animation-delay: 0.1s; } .about__content--stagger>*:nth-child(2) { animation-delay: 0.2s; } @keyframes aboutStagger { to { opacity: 1; transform: translateY(0); } } /* Skills and Team visibility animations */ .about__skills--visible .about__skill { animation: skillFadeIn 0.6s var(--gd-ease-out) forwards; opacity: 0; transform: translateY(20px) scale(0.95); } @keyframes skillFadeIn { to { opacity: 1; transform: translateY(0) scale(1); } } /* Enhanced theme-specific animations */ html[data-theme="gaming-inferno"] .about__stat:hover, html[data-theme="gaming-inferno"] .about__skill:hover { box-shadow: 0 8px 25px var(--gd-color-primary-300); } html[data-theme="retro-arcade"] .about__skill-icon { filter: drop-shadow(0 0 8px var(--gd-color-secondary-400)); } html[data-theme="arctic-frost"] .about__stat::before { background: var(--gd-gradient-accent); } /* Responsive Design */ @media (max-width: 992px) { .about { padding: var(--gd-space-20) 0; } .about__content { grid-template-columns: 1fr; gap: var(--gd-space-12); text-align: center; } .about__heading { font-size: var(--gd-font-size-4xl); } .about__stats { grid-template-columns: repeat(2, 1fr); } .about__skills-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .about__values-grid { grid-template-columns: 1fr; gap: var(--gd-space-3); } .about__visual { height: 300px; } .about__animated-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); } } @media (max-width: 768px) { .about { padding: var(--gd-space-16) 0; } .about__container { padding: 0 var(--gd-space-6); } .about__heading { font-size: var(--gd-font-size-3xl); } .about__subheading { font-size: var(--gd-font-size-lg); } .about__skills-title, .about__skills, .about__skills-grid, .about__stats { grid-template-columns: 1fr 1fr; gap: var(--gd-space-3); } .about__stat { padding: var(--gd-space-4); } .about__stat-number { font-size: var(--gd-font-size-3xl); } .about__skills-grid { grid-template-columns: repeat(2, 1fr); } .about__values-grid { grid-template-columns: 1fr; } .about__visual { height: 250px; } .about__animated-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); } } @media (max-width: 480px) { .about__content { gap: var(--gd-space-8); } .about__heading { font-size: var(--gd-font-size-2xl); } .about__mission-section { padding: var(--gd-space-4); } .about__skills-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gd-space-3); } .about__stats { grid-template-columns: 1fr; } } /* Accessibility and reduced motion */ @media (prefers-reduced-motion: reduce) { .about--animate-in, .about__content--stagger>*, .about__stat, .about__skill, .about__image img { animation: none; transition: none; } .about__stat:hover, .about__skill:hover, .about__image:hover img { transform: none; } .about__stat::before, .about__skill::before, .about__image::before { display: none; } } /* Focus states for accessibility */ .about__stat:focus-visible, .about__skill:focus-visible, /* High contrast mode support */ @media (prefers-contrast: high) { .about__stat, .about__skill, .about__mission-section { border-width: 2px; border-color: var(--gd-text-primary); } .about__heading, .about__skills-title, }/* components/ui/Pagination.css - Pagination component styles */ .pagination { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem 0; font-family: var(--font-body, 'Inter', sans-serif); } .pagination--loading { opacity: 0.7; pointer-events: none; } /* Info Section */ .pagination__info { display: flex; justify-content: center; align-items: center; } .pagination__text { font-size: 0.9rem; color: var(--color-text-secondary, #6B7280); font-weight: 500; } /* Controls Container */ .pagination__controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } /* Page Numbers Container */ .pagination__pages { display: flex; align-items: center; gap: 0.25rem; margin: 0 0.5rem; } /* Buttons Base Styles */ .pagination__button, .pagination__number { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border, #E5E7EB); border-radius: 0.5rem; background: var(--color-background, #ffffff); color: var(--color-text, #1F2937); font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.2s ease-in-out; min-width: 2.5rem; height: 2.5rem; outline: none; position: relative; } .pagination__button:hover:not(.pagination__button--disabled), .pagination__number:hover:not(.pagination__number--current) { background: var(--color-primary-50, #EFF6FF); border-color: var(--color-primary-200, #BFDBFE); color: var(--color-primary-600, #2563EB); transform: translateY(-1px); } .pagination__button:focus-visible, .pagination__number:focus-visible { outline: 2px solid var(--color-primary-500, #3B82F6); outline-offset: 2px; } /* Previous/Next Buttons */ .pagination__button--prev, .pagination__button--next { gap: 0.5rem; padding: 0.5rem 1rem; font-weight: 600; } .pagination__button--disabled { opacity: 0.5; cursor: not-allowed; background: var(--color-gray-50, #F9FAFB); color: var(--color-gray-400, #9CA3AF); } .pagination__button--disabled:hover { background: var(--color-gray-50, #F9FAFB); transform: none; } /* Arrows */ .pagination__arrow { font-size: 1.1rem; font-weight: bold; } .pagination__label { font-size: 0.875rem; } /* Page Numbers */ .pagination__number { min-width: 2.5rem; padding: 0.5rem; } .pagination__number--current { background: var(--color-primary-500, #3B82F6); border-color: var(--color-primary-500, #3B82F6); color: white; font-weight: 600; cursor: default; } .pagination__number--current:hover { background: var(--color-primary-500, #3B82F6); transform: none; } /* Ellipsis */ .pagination__ellipsis { padding: 0.5rem; color: var(--color-text-secondary, #6B7280); font-weight: 500; user-select: none; } /* Loading State */ .pagination__loading { display: flex; align-items: center; gap: 0.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-background, #ffffff); padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid var(--color-border, #E5E7EB); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .pagination__spinner { width: 1rem; height: 1rem; border: 2px solid var(--color-gray-200, #E5E7EB); border-top: 2px solid var(--color-primary-500, #3B82F6); border-radius: 50%; animation: pagination-spin 1s linear infinite; } .pagination__loading-text { font-size: 0.875rem; color: var(--color-text-secondary, #6B7280); font-weight: 500; } /* Animations */ @keyframes pagination-spin { to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .pagination { padding: 1.5rem 0; gap: 1rem; } .pagination__controls { gap: 0.25rem; } .pagination__button { padding: 0.4rem 0.6rem; min-width: 2.25rem; height: 2.25rem; font-size: 0.8rem; } .pagination__button--prev, .pagination__button--next { padding: 0.4rem 0.8rem; } .pagination__label { display: none; } .pagination__number { min-width: 2.25rem; height: 2.25rem; padding: 0.4rem; font-size: 0.8rem; } .pagination__text { font-size: 0.8rem; } } @media (max-width: 480px) { .pagination__pages { margin: 0 0.25rem; } .pagination__button, .pagination__number { min-width: 2rem; height: 2rem; font-size: 0.75rem; } .pagination__button--prev, .pagination__button--next { padding: 0.4rem 0.6rem; } } /* Dark Theme Support */ @media (prefers-color-scheme: dark) { .pagination__button, .pagination__number { background: var(--color-dark-surface, #1F2937); border-color: var(--color-dark-border, #374151); color: var(--color-dark-text, #F9FAFB); } .pagination__button:hover:not(.pagination__button--disabled), .pagination__number:hover:not(.pagination__number--current) { background: var(--color-dark-hover, #374151); border-color: var(--color-primary-400, #60A5FA); color: var(--color-primary-300, #93C5FD); } .pagination__text { color: var(--color-dark-text-secondary, #D1D5DB); } .pagination__button--disabled { background: var(--color-dark-disabled, #111827); color: var(--color-dark-text-muted, #6B7280); } .pagination__loading { background: var(--color-dark-surface, #1F2937); border-color: var(--color-dark-border, #374151); } }/* Project Details Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .modal-content { position: relative; width: 100%; max-width: 900px; max-height: 90vh; background: #ffffff; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; display: flex; flex-direction: column; } .modal-close { position: absolute; top: 20px; right: 20px; z-index: 10; width: 44px; height: 44px; border: none; background: rgba(0, 0, 0, 0.5); color: white; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-close:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.1); } .modal-close:active { transform: scale(0.95); } .modal-header { position: relative; min-height: 300px; } .modal-image-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .modal-image { width: 100%; height: 100%; object-fit: cover; object-position: center; } .modal-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); padding: 40px 30px 20px; } .modal-status-badges { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .status-badge--completed { background: rgba(52, 211, 153, 0.9); color: white; box-shadow: 0 0 20px rgba(52, 211, 153, 0.3); } .status-badge--ongoing { background: rgba(245, 158, 11, 0.9); color: white; box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } .status-badge--planning { background: rgba(239, 68, 68, 0.9); color: white; box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } .featured-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 215, 0, 0.9); color: #1a1a1a; border-radius: 20px; font-size: 0.875rem; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); } .modal-title-section { position: absolute; bottom: 20px; left: 30px; right: 30px; } .modal-title { font-size: 2.5rem; font-weight: 800; color: white; margin: 0 0 8px 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); line-height: 1.2; } .modal-meta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .modal-category, .modal-year, .modal-views { color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 1rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .modal-category { text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .modal-body { padding: 40px 30px; overflow-y: auto; flex: 1; } .modal-description { margin-bottom: 32px; } .modal-description h2 { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; } .modal-description p { font-size: 1.125rem; line-height: 1.7; color: #4a5568; margin: 0; } .modal-achievements { margin-bottom: 32px; } .modal-achievements h3 { font-size: 1.25rem; font-weight: 600; color: #1a1a1a; margin: 0 0 16px 0; } .modal-achievements ul { list-style: none; padding: 0; margin: 0; } .modal-achievements li { padding: 8px 0; position: relative; padding-left: 24px; color: #4a5568; line-height: 1.6; } .modal-achievements li::before { content: '✓'; position: absolute; left: 0; color: #34d399; font-weight: 600; } .modal-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 32px; padding: 24px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0; } .modal-detail h4 { font-size: 0.875rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px 0; } .modal-detail p { font-size: 1rem; font-weight: 500; color: #1a1a1a; margin: 0; } .modal-technologies { margin-bottom: 40px; } .modal-technologies h3 { font-size: 1.25rem; font-weight: 600; color: #1a1a1a; margin: 0 0 16px 0; } .tech-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tech-tag { padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 20px; font-size: 0.875rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .tech-tag:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .modal-actions { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid #e2e8f0; } .modal-action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 12px; font-weight: 600; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border: none; cursor: pointer; font-size: 1rem; } .modal-action--primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } .modal-action--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); } .modal-action--secondary { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .modal-action--secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .modal-action--outline { background: transparent; color: #667eea; border: 2px solid #667eea; } .modal-action--outline:hover { background: #667eea; color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } /* Dark mode support */ @media (prefers-color-scheme: dark) { .modal-content { background: #1a1a1a; border: 1px solid #333; } .modal-description h2, .modal-achievements h3, .modal-technologies h3 { color: #ffffff; } .modal-description p, .modal-achievements li { color: #d1d5db; } .modal-details-grid { background: #2d2d2d; border-color: #404040; } .modal-detail h4 { color: #9ca3af; } .modal-detail p { color: #ffffff; } .modal-actions { border-top-color: #404040; } } /* Responsive design */ @media (max-width: 768px) { .modal-overlay { padding: 10px; } .modal-content { max-height: 95vh; border-radius: 16px; } .modal-title { font-size: 2rem; } .modal-body { padding: 30px 20px; } .modal-details-grid { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .modal-actions { flex-direction: column; } .modal-action { width: 100%; justify-content: center; } .modal-title-section { left: 20px; right: 20px; bottom: 15px; } .modal-image-overlay { padding: 30px 20px 15px; } } @media (max-width: 480px) { .modal-title { font-size: 1.75rem; } .modal-meta { gap: 12px; } .modal-category, .modal-year, .modal-views { font-size: 0.875rem; } .tech-tags { gap: 6px; } .tech-tag { padding: 6px 12px; font-size: 0.8rem; } } /* Animation keyframes */ @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.7) translateY(50px); filter: blur(10px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* Focus states for accessibility */ .modal-close:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; } .modal-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }/* SkeletonLoader.css - Modern skeletal loading animations with latest techniques */ /* CSS Custom Properties for dynamic theming */ :root { --skeleton-bg: #f8fafc; --skeleton-highlight: #e2e8f0; --skeleton-shimmer: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.6), transparent ); --skeleton-duration: 1.8s; --skeleton-timing: cubic-bezier(0.4, 0, 0.6, 1); --skeleton-border-radius: 8px; } /* Dark theme support */ @media (prefers-color-scheme: dark) { :root { --skeleton-bg: #1e293b; --skeleton-highlight: #334155; --skeleton-shimmer: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); } } /* Base skeleton component with latest animation techniques */ .skeleton { display: inline-block; position: relative; overflow: hidden; background: var(--skeleton-bg); opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--skeleton-timing), transform 0.4s var(--skeleton-timing); will-change: opacity, transform; /* Improved performance with contain */ contain: layout style paint; } .skeleton--visible { opacity: 1; transform: translateY(0); } /* Modern wave animation using CSS transforms and GPU acceleration */ .skeleton--wave::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--skeleton-shimmer); animation: skeleton-wave var(--skeleton-duration) var(--skeleton-timing) infinite; will-change: transform; } @keyframes skeleton-wave { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* Pulse animation as fallback */ .skeleton--pulse { animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-timing) infinite; } @keyframes skeleton-pulse { 0%, 100% { background-color: var(--skeleton-bg); } 50% { background-color: var(--skeleton-highlight); } } /* No animation option */ .skeleton--none { background-color: var(--skeleton-bg); } /* Enhanced skeleton card with sophisticated animations */ .project-skeleton-card { background: var(--gd-surface-raised, white); border-radius: var(--gd-radius-2xl, 16px); overflow: hidden; box-shadow: var(--gd-shadow-base, 0 1px 3px rgba(0, 0, 0, 0.1)); border: 1px solid var(--gd-border-light, #e5e7eb); /* Initial state */ opacity: 0; transform: translateY(20px) scale(0.95); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; /* Improved performance */ contain: layout style paint; } .project-skeleton-card--visible { opacity: 1; transform: translateY(0) scale(1); } /* Staggered animation support */ .project-skeleton-card:nth-child(1) { transition-delay: 0ms; } .project-skeleton-card:nth-child(2) { transition-delay: 150ms; } .project-skeleton-card:nth-child(3) { transition-delay: 300ms; } .project-skeleton-card:nth-child(4) { transition-delay: 450ms; } .project-skeleton-card:nth-child(n+5) { transition-delay: calc(600ms + ((var(--index, 0) - 4) * 100ms)); } /* Image skeleton with enhanced shimmer */ .project-skeleton-card__image { position: relative; height: 240px; overflow: hidden; } .project-skeleton-card__image-skeleton { width: 100%; height: 100%; border-radius: 0; } /* Metadata overlays with floating animation */ .project-skeleton-card__metadata { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; } .project-skeleton-card__metadata .skeleton { backdrop-filter: blur(8px); background: rgba(15, 37, 78, 0.1); animation: skeleton-float 3s ease-in-out infinite; } .project-skeleton-card__metadata .skeleton:nth-child(2) { animation-delay: 0.5s; } @keyframes skeleton-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-2px); } } /* Content area with structured layout */ .project-skeleton-card__content { padding: 24px; display: flex; flex-direction: column; gap: 16px; } /* Header with title and status */ .project-skeleton-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } /* Description with realistic line variations */ .project-skeleton-card__description { display: flex; flex-direction: column; gap: 8px; } /* Details grid with icons */ .project-skeleton-card__details { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--gd-bg-secondary, #f8fafc); border-radius: 8px; border-left: 3px solid var(--gd-primary-light, #dbeafe); } .project-skeleton-card__detail-row { display: flex; align-items: center; gap: 8px; } /* Tech tags with varied widths */ .project-skeleton-card__tech { display: flex; flex-wrap: wrap; gap: 8px; } .project-skeleton-card__tech .skeleton:nth-child(1) { width: 50px; } .project-skeleton-card__tech .skeleton:nth-child(2) { width: 65px; } .project-skeleton-card__tech .skeleton:nth-child(3) { width: 45px; } .project-skeleton-card__tech .skeleton:nth-child(4) { width: 70px; } /* Meta footer */ .project-skeleton-card__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--gd-border-light, #e5e7eb); } .project-skeleton-card__meta-left, .project-skeleton-card__meta-right { display: flex; align-items: center; gap: 8px; } /* Grid layout with responsive design */ .project-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 32px; padding: 16px 0; } /* Smart skeleton loader with smooth transitions */ .smart-skeleton-loader { position: relative; min-height: 200px; } .smart-skeleton-loader__skeleton { position: absolute; top: 0; left: 0; width: 100%; opacity: 1; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; } .smart-skeleton-loader__skeleton--fade-out { opacity: 0; pointer-events: none; } .smart-skeleton-loader__content { opacity: 0; transform: translateY(8px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .smart-skeleton-loader__content--fade-in { opacity: 1; transform: translateY(0); } /* Advanced micro-animations */ @keyframes skeleton-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .project-skeleton-card:hover { animation: skeleton-breathe 4s ease-in-out infinite; } /* Responsive design improvements */ @media (max-width: 1200px) { .project-skeleton-grid { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; } } @media (max-width: 992px) { .project-skeleton-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .project-skeleton-card__content { padding: 20px; } .project-skeleton-card__image { height: 200px; } } @media (max-width: 768px) { .project-skeleton-grid { grid-template-columns: 1fr; gap: 20px; } .project-skeleton-card__content { padding: 16px; gap: 12px; } .project-skeleton-card__image { height: 180px; } .project-skeleton-card__header { flex-direction: column; align-items: flex-start; gap: 8px; } .project-skeleton-card__meta { flex-direction: column; align-items: flex-start; gap: 12px; } .project-skeleton-card__details { padding: 8px; gap: 8px; } } @media (max-width: 480px) { .project-skeleton-card__content { padding: 12px; } .project-skeleton-card__metadata { position: static; justify-content: space-between; background: var(--gd-bg-secondary, #f8fafc); padding: 8px; margin-bottom: 8px; border-radius: 6px; } .project-skeleton-card__tech { gap: 6px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .skeleton--wave::before { animation: none; } .skeleton--pulse { animation: none; background-color: var(--skeleton-highlight); } .project-skeleton-card { transition: opacity 0.3s ease; transform: none; } .project-skeleton-card--visible { transform: none; } .smart-skeleton-loader__content { transition: opacity 0.3s ease; transform: none; } .smart-skeleton-loader__content--fade-in { transform: none; } @keyframes skeleton-float, @keyframes skeleton-breathe { from, to { transform: none; } } } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --skeleton-bg: #e0e0e0; --skeleton-highlight: #b0b0b0; } .project-skeleton-card { border-width: 2px; } } /* Performance optimizations */ .skeleton, .project-skeleton-card { /* Enable hardware acceleration */ transform: translateZ(0); /* Optimize repaints */ backface-visibility: hidden; /* Optimize animations */ animation-fill-mode: both; } /* Loading state indicators */ .skeleton[aria-label]::after { content: attr(aria-label); position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Enhanced focus states for accessibility */ .smart-skeleton-loader:focus-within .project-skeleton-card { outline: 2px solid var(--gd-color-primary-500, #3b82f6); outline-offset: 2px; } /* Container queries for dynamic layouts (progressive enhancement) */ @supports (container-type: inline-size) { .project-skeleton-grid { container-type: inline-size; } @container (max-width: 600px) { .project-skeleton-card__header { flex-direction: column; align-items: flex-start; } } }/* Projects.css - Optimized & Revamped with Arctic Frost theme integration */ /* Responsive Image Component Styles */ .responsive-image-container { position: relative; width: 100%; height: 250px; border-radius: var(--gd-border-radius-lg); overflow: hidden; background: var(--gd-gray-100); } .responsive-image-placeholder { width: 100%; height: 100%; background: linear-gradient(45deg, var(--gd-gray-100) 25%, var(--gd-gray-50) 25%, var(--gd-gray-50) 50%, var(--gd-gray-100) 50%, var(--gd-gray-100) 75%, var(--gd-gray-50) 75%); background-size: 20px 20px; display: flex; align-items: center; justify-content: center; position: relative; } .image-loading-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gd-gray-50); display: flex; align-items: center; justify-content: center; border-radius: var(--gd-border-radius-lg); } .responsive-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.3s ease, transform 0.3s ease; } .responsive-image.loaded { opacity: 1; } .responsive-image.fallback { object-fit: contain; background: var(--gd-gray-100); } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--gd-gray-200); border-top: 3px solid var(--gd-primary-500); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .projects { position: relative; padding: var(--gd-section-padding); background: var(--gd-gradient-subtle); overflow: hidden; } /* Subtle background pattern */ .projects::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(74, 144, 226, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(125, 211, 252, 0.03) 0%, transparent 50%); pointer-events: none; } .projects__container { position: relative; max-width: 100%; width: 100%; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); } .projects__header { text-align: center; margin-bottom: var(--gd-space-16); animation: projectsHeaderSlide 0.8s var(--gd-ease-out) forwards; } @keyframes projectsHeaderSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .projects__title { font-size: var(--gd-font-size-5xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-6); line-height: var(--gd-line-height-tight); position: relative; } .projects__title::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--gd-gradient-primary); border-radius: var(--gd-radius-full); } .projects__subtitle { font-size: var(--gd-font-size-xl); color: var(--gd-text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--gd-line-height-relaxed); } .projects__filters { display: flex; justify-content: center; gap: var(--gd-space-3); margin-bottom: var(--gd-space-12); flex-wrap: wrap; animation: projectsFiltersSlide 0.8s var(--gd-ease-out) 0.2s both; } @keyframes projectsFiltersSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .projects__filter { padding: var(--gd-space-3) var(--gd-space-6); border: 2px solid var(--gd-border-medium); background: var(--gd-surface-raised); color: var(--gd-text-secondary); border-radius: var(--gd-radius-full); font-weight: var(--gd-font-weight-medium); font-size: var(--gd-font-size-sm); cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; } .projects__filter::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gd-gradient-primary); transition: var(--gd-transition-base); z-index: -1; } .projects__filter:hover::before, .projects__filter--active::before { left: 0; } .projects__filter:hover, .projects__filter--active { color: var(--gd-text-on-primary); border-color: var(--gd-color-primary-500); transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } .projects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); animation: projectsGridSlide 0.8s var(--gd-ease-out) 0.4s both; width: 100%; } @keyframes projectsGridSlide { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .projects__card { background: var(--gd-surface-raised); border-radius: clamp(0.75rem, 2vw, 1.5rem); overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; border: 1px solid var(--gd-border-light); opacity: 1; transform: translateY(0); animation: projectsCardAppear 0.6s var(--gd-ease-out) forwards; backdrop-filter: blur(10px); } .projects__card:nth-child(1) { animation-delay: 0.1s; } .projects__card:nth-child(2) { animation-delay: 0.2s; } .projects__card:nth-child(3) { animation-delay: 0.3s; } .projects__card:nth-child(4) { animation-delay: 0.4s; } .projects__card:nth-child(5) { animation-delay: 0.5s; } .projects__card:nth-child(6) { animation-delay: 0.6s; } @keyframes projectsCardAppear { to { opacity: 1; transform: translateY(0); } } .projects__card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 10px 20px -6px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--gd-color-primary-200); border-color: var(--gd-color-primary-300); } .projects__card--clickable { cursor: pointer; transition: all 0.3s var(--gd-ease-out); } .projects__card--clickable:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--gd-color-primary-200); } .projects__card--clickable:focus-visible { outline: 2px solid var(--gd-color-primary-500); outline-offset: 2px; } .projects__card--clickable:active { transform: translateY(-5px); transition: all 0.1s ease-out; } .projects__card-image { position: relative; height: 240px; overflow: hidden; background: var(--gd-bg-secondary); } .projects__card-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-primary); opacity: 0; transition: var(--gd-transition-base); z-index: 1; } .projects__card:hover .projects__card-image::before { opacity: 0.1; } .projects__image { width: 100%; height: 100%; object-fit: cover; transition: var(--gd-transition-slow); } .projects__card:hover .projects__image { transform: scale(1.05); } .projects__card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 37, 78, 0.85); backdrop-filter: blur(10px); opacity: 0; transition: var(--gd-transition-base); display: flex; align-items: center; justify-content: center; z-index: 2; } .projects__card:hover .projects__card-overlay { opacity: 1; } .projects__card-actions { display: flex; gap: var(--gd-space-4); flex-direction: column; align-items: center; } .projects__action { padding: var(--gd-space-3) var(--gd-space-6); background: var(--gd-surface-raised); color: var(--gd-color-primary-600); text-decoration: none; border-radius: var(--gd-radius-full); font-weight: var(--gd-font-weight-semibold); font-size: var(--gd-font-size-sm); transition: var(--gd-transition-base); border: 2px solid transparent; backdrop-filter: blur(10px); } .projects__action:hover { background: var(--gd-color-primary-500); color: var(--gd-text-on-primary); transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } .projects__action--secondary { background: transparent; color: var(--gd-text-inverse); border-color: var(--gd-text-inverse); } .projects__action--secondary:hover { background: var(--gd-text-inverse); color: var(--gd-text-primary); } .projects__card-content { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1rem); } /* New Compact Design Styles */ .projects__info-row { display: flex; gap: var(--gd-space-4); margin-bottom: var(--gd-space-4); flex-wrap: wrap; } .projects__info-item { display: flex; align-items: center; gap: var(--gd-space-1_5); font-size: var(--gd-font-size-sm); color: var(--gd-text-secondary); padding: var(--gd-space-1) var(--gd-space-2); background: var(--gd-bg-secondary); border-radius: var(--gd-radius-md); border: 1px solid var(--gd-border-light); transition: var(--gd-transition-fast); } .projects__info-item:hover { background: var(--gd-color-primary-50); border-color: var(--gd-color-primary-200); color: var(--gd-color-primary-600); } .projects__info-icon { width: 14px; height: 14px; color: var(--gd-color-primary-500); flex-shrink: 0; } .projects__info-text { font-weight: var(--gd-font-weight-medium); white-space: nowrap; } .projects__tech-tag--more { background: var(--gd-color-primary-100); color: var(--gd-color-primary-700); border: 1px solid var(--gd-color-primary-300); font-weight: var(--gd-font-weight-bold); } .projects__tech-tag--more:hover { background: var(--gd-color-primary-200); border-color: var(--gd-color-primary-400); } .projects__category-icon { width: 14px; height: 14px; margin-right: var(--gd-space-1); flex-shrink: 0; } .projects__meta { display: flex; justify-content: space-between; align-items: center; padding-top: clamp(0.75rem, 1.5vw, 1rem); border-top: 1px solid var(--gd-border-light); } .projects__meta-left { display: flex; align-items: center; gap: var(--gd-space-4); } .projects__meta-right { display: flex; align-items: center; gap: var(--gd-space-2); } .projects__link-icon { width: 16px; height: 16px; color: var(--gd-color-primary-500); opacity: 0.7; transition: var(--gd-transition-fast); } .projects__link-icon:hover { opacity: 1; transform: scale(1.1); } .projects__card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(0.75rem, 1.5vw, 1rem); } .projects__card-title { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); line-height: var(--gd-line-height-tight); flex: 1; } .projects__status { padding: var(--gd-space-1_5) var(--gd-space-3); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .projects__status--completed { background: var(--gd-color-success-light); color: var(--gd-color-success-dark); } .projects__status--ongoing { background: var(--gd-color-warning-light); color: var(--gd-color-warning-dark); } .projects__status--upcoming { background: var(--gd-color-info-light); color: var(--gd-color-info-dark); } .projects__card-description { color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); font-size: var(--gd-font-size-sm); } .projects__technologies { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1vw, 0.75rem); } .projects__tech-tag { padding: var(--gd-space-1) var(--gd-space-3); background: var(--gd-bg-secondary); color: var(--gd-text-secondary); border-radius: var(--gd-radius-md); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); border: 1px solid var(--gd-border-light); transition: var(--gd-transition-fast); } .projects__tech-tag:hover { background: var(--gd-color-primary-50); color: var(--gd-color-primary-600); border-color: var(--gd-color-primary-200); } .projects__category { padding: var(--gd-space-1) var(--gd-space-3); background: var(--gd-color-primary-50); color: var(--gd-color-primary-600); border-radius: var(--gd-radius-md); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; } .projects__year { color: var(--gd-text-tertiary); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); } /* Filter animation states */ .projects__grid--filtering .projects__card { transition: all 0.4s var(--gd-ease-out); } .projects__card--hidden { opacity: 0; transform: scale(0.9) translateY(20px); pointer-events: none; } .projects__card--filtering-in { animation: projectsCardFilterIn 0.5s var(--gd-ease-out) forwards; } @keyframes projectsCardFilterIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Loading state */ .projects__loading { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 400px; gap: var(--gd-space-4); } /* Skeleton Loading Animation */ .projects__skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gd-space-8); animation: projectsGridSlide 0.8s var(--gd-ease-out) 0.4s both; } .projects__skeleton-card { background: var(--gd-surface-raised); border-radius: var(--gd-radius-2xl); overflow: hidden; box-shadow: var(--gd-shadow-base); border: 1px solid var(--gd-border-light); animation: skeletonPulse 1.5s ease-in-out infinite; } .projects__skeleton-image { height: 240px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; animation: skeletonShimmer 1.5s linear infinite; } .projects__skeleton-content { padding: var(--gd-space-6); } .projects__skeleton-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--gd-space-4); gap: var(--gd-space-4); } .projects__skeleton-title { height: 24px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; border-radius: var(--gd-radius-md); width: 70%; animation: skeletonShimmer 1.5s linear infinite; } .projects__skeleton-status { height: 20px; width: 80px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; border-radius: var(--gd-radius-full); animation: skeletonShimmer 1.5s linear infinite; } .projects__skeleton-description { margin-bottom: var(--gd-space-4); } .projects__skeleton-line { height: 16px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; border-radius: var(--gd-radius-md); margin-bottom: var(--gd-space-2); animation: skeletonShimmer 1.5s linear infinite; } .projects__skeleton-line--short { width: 85%; } .projects__skeleton-line--medium { width: 60%; } .projects__skeleton-technologies { display: flex; flex-wrap: wrap; gap: var(--gd-space-2); margin-bottom: var(--gd-space-6); } .projects__skeleton-tech-tag { height: 24px; width: 60px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; border-radius: var(--gd-radius-md); animation: skeletonShimmer 1.5s linear infinite; } .projects__skeleton-tech-tag:nth-child(1) { width: 50px; } .projects__skeleton-tech-tag:nth-child(2) { width: 70px; } .projects__skeleton-tech-tag:nth-child(3) { width: 45px; } .projects__skeleton-tech-tag:nth-child(4) { width: 65px; } .projects__skeleton-meta { display: flex; justify-content: space-between; align-items: center; padding-top: var(--gd-space-4); border-top: 1px solid var(--gd-border-light); } .projects__skeleton-category, .projects__skeleton-year { height: 16px; width: 50px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 20%, var(--gd-gray-200) 40%, var(--gd-gray-200) 100% ); background-size: 200% auto; border-radius: var(--gd-radius-md); animation: skeletonShimmer 1.5s linear infinite; } @keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .projects__spinner { width: 48px; height: 48px; border: 4px solid var(--gd-color-primary-100); border-top: 4px solid var(--gd-color-primary-500); border-radius: var(--gd-radius-full); animation: projectsSpin 1s linear infinite; } @keyframes projectsSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .projects__loading-text { color: var(--gd-text-secondary); font-size: var(--gd-font-size-lg); font-weight: var(--gd-font-weight-medium); } /* Responsive Design */ @media (max-width: 1400px) { .projects__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } } @media (max-width: 1024px) { .projects { padding: clamp(3rem, 6vw, 5rem) 0; } .projects__container { padding: 0 clamp(1rem, 4vw, 2rem); } .projects__title { font-size: clamp(2rem, 4vw, 3rem); } .projects__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } } @media (max-width: 768px) { .projects { padding: clamp(2rem, 4vw, 3rem) 0; } .projects__container { padding: 0 clamp(0.75rem, 3vw, 1.5rem); } .projects__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); } .projects__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); } .projects__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); } .projects__filters { gap: clamp(0.375rem, 1vw, 0.5rem); justify-content: center; flex-wrap: wrap; } .projects__filter { padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); } .projects__card-image { height: clamp(180px, 25vw, 220px); } .projects__card-actions { flex-direction: row; gap: clamp(0.5rem, 1.5vw, 0.75rem); } .projects__action { padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 2vw, 1rem); font-size: clamp(0.75rem, 1.5vw, 0.875rem); } } @media (max-width: 480px) { .projects__header { margin-bottom: clamp(2rem, 5vw, 3rem); } .projects__title { font-size: clamp(1.5rem, 3vw, 2rem); } .projects__card-content { padding: clamp(1rem, 2vw, 1.25rem); } .projects__card-title { font-size: clamp(1rem, 2.5vw, 1.25rem); } .projects__card-header { flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 1vw, 0.75rem); } .projects__grid { grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); } .projects__meta { flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 1vw, 0.75rem); } .projects__info-row { gap: clamp(0.375rem, 1vw, 0.5rem); } .projects__info-item { font-size: clamp(0.75rem, 1.5vw, 0.875rem); padding: clamp(0.25rem, 0.5vw, 0.375rem) clamp(0.375rem, 1vw, 0.5rem); } } /* Enhanced Empty State Styles */ .projects__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: var(--gd-space-16); background: var(--gd-surface-raised); border-radius: var(--gd-radius-2xl); border: 2px dashed var(--gd-border-medium); opacity: 0; transform: translateY(20px); } .projects__empty-icon { font-size: 4rem; margin-bottom: var(--gd-space-6); opacity: 0.7; } .projects__empty-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-4); line-height: var(--gd-line-height-tight); } .projects__empty-message { font-size: var(--gd-font-size-lg); color: var(--gd-text-secondary); max-width: 500px; margin-bottom: var(--gd-space-8); line-height: var(--gd-line-height-relaxed); } .projects__empty-actions { display: flex; gap: var(--gd-space-4); flex-wrap: wrap; justify-content: center; } .projects__show-all-button, .projects__refresh-button { padding: var(--gd-space-3) var(--gd-space-6); border: 2px solid var(--gd-color-primary-500); background: var(--gd-color-primary-500); color: var(--gd-text-on-primary); border-radius: var(--gd-radius-full); font-weight: var(--gd-font-weight-semibold); font-size: var(--gd-font-size-sm); cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; } .projects__refresh-button { background: transparent; color: var(--gd-color-primary-600); } .projects__show-all-button:hover, .projects__refresh-button:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } .projects__refresh-button:hover { background: var(--gd-color-primary-50); } .projects__show-all-button:disabled, .projects__refresh-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Enhanced Error State */ .projects--error { background: var(--gd-surface-raised); } .projects__error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; text-align: center; padding: var(--gd-space-16); background: var(--gd-surface-base); border-radius: var(--gd-radius-2xl); border: 2px solid var(--gd-color-error-300); } .projects__error-icon { font-size: 3rem; margin-bottom: var(--gd-space-6); } .projects__error h2 { font-size: var(--gd-font-size-3xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-color-error-600); margin-bottom: var(--gd-space-4); } .projects__error p { font-size: var(--gd-font-size-lg); color: var(--gd-text-secondary); margin-bottom: var(--gd-space-4); max-width: 600px; } .projects__error-details { font-family: var(--gd-font-mono); font-size: var(--gd-font-size-sm); color: var(--gd-color-error-500); background: var(--gd-color-error-50); padding: var(--gd-space-3); border-radius: var(--gd-radius-md); margin-bottom: var(--gd-space-6); } .projects__error-actions { display: flex; gap: var(--gd-space-4); margin-bottom: var(--gd-space-6); flex-wrap: wrap; justify-content: center; } .projects__retry-button, .projects__reload-button { padding: var(--gd-space-3) var(--gd-space-6); border: 2px solid var(--gd-color-primary-500); background: var(--gd-color-primary-500); color: var(--gd-text-on-primary); border-radius: var(--gd-radius-full); font-weight: var(--gd-font-weight-semibold); cursor: pointer; transition: var(--gd-transition-base); } .projects__reload-button { background: transparent; color: var(--gd-color-primary-600); } .projects__retry-button:hover, .projects__reload-button:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } .projects__retry-button:disabled { opacity: 0.6; cursor: not-allowed; } .projects__contact-support { color: var(--gd-text-tertiary); font-size: var(--gd-font-size-sm); font-style: italic; } /* Real-time Status Indicator */ .projects__realtime-status { display: flex; align-items: center; justify-content: center; gap: var(--gd-space-2); margin-top: var(--gd-space-4); padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-surface-raised); border-radius: var(--gd-radius-full); border: 1px solid var(--gd-border-light); } .projects__realtime-indicator { position: relative; width: 8px; height: 8px; background: var(--gd-color-success-500); border-radius: var(--gd-radius-full); } .projects__pulse { position: absolute; top: -2px; left: -2px; width: 12px; height: 12px; background: var(--gd-color-success-500); border-radius: var(--gd-radius-full); opacity: 0.3; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.5); opacity: 0; } } .projects__realtime-text { font-size: var(--gd-font-size-xs); color: var(--gd-text-secondary); font-weight: var(--gd-font-weight-medium); } /* Enhanced Card Metadata */ .projects__card-metadata { position: absolute; top: var(--gd-space-3); right: var(--gd-space-3); display: flex; gap: var(--gd-space-2); z-index: 3; } .projects__view-count, .projects__featured-badge { padding: var(--gd-space-1) var(--gd-space-2); background: rgba(15, 37, 78, 0.9); color: var(--gd-text-inverse); border-radius: var(--gd-radius-md); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .projects__featured-badge { background: rgba(249, 115, 22, 0.9); } .projects__achievements { margin-bottom: var(--gd-space-4); } .projects__achievements h4 { color: var(--gd-text-primary); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-2); } .projects__achievements ul { list-style: none; padding: 0; } .projects__achievements li { color: var(--gd-text-secondary); font-size: var(--gd-font-size-sm); margin-bottom: var(--gd-space-1); position: relative; padding-left: var(--gd-space-4); } .projects__achievements li::before { content: '✓'; position: absolute; left: 0; color: var(--gd-color-success-500); font-weight: var(--gd-font-weight-bold); } /* GitHub Action Button */ .projects__action--github { background: #24292e; color: white; border-color: #24292e; } .projects__action--github:hover { background: #1a1e22; border-color: #1a1e22; } /* Refresh Overlay */ .projects__refresh-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: var(--gd-radius-2xl); } .projects__refresh-indicator { display: flex; align-items: center; gap: var(--gd-space-3); background: var(--gd-surface-raised); padding: var(--gd-space-4) var(--gd-space-6); border-radius: var(--gd-radius-full); box-shadow: var(--gd-shadow-lg); border: 1px solid var(--gd-border-light); } .projects__spinner--small { width: 20px; height: 20px; border-width: 2px; } .projects__refresh-indicator span { color: var(--gd-text-primary); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); } /* Image Loading States */ .projects__image-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--gd-bg-secondary); gap: var(--gd-space-3); } .projects__retry-text { color: var(--gd-text-secondary); font-size: var(--gd-font-size-xs); text-align: center; } .projects__image--loaded { opacity: 1 !important; } .projects__image--fallback { opacity: 1 !important; } .projects__image-error-indicator { position: absolute; top: var(--gd-space-2); left: var(--gd-space-2); background: rgba(239, 68, 68, 0.9); color: white; padding: var(--gd-space-1); border-radius: var(--gd-radius-md); font-size: var(--gd-font-size-xs); backdrop-filter: blur(4px); } /* Status Styling Updates */ .projects__status--planning { background: var(--gd-color-info-light); color: var(--gd-color-info-dark); } /* Enhanced Mobile Responsiveness */ @media (max-width: 480px) { .projects__empty { padding: var(--gd-space-8); min-height: 300px; } .projects__empty-icon { font-size: 3rem; margin-bottom: var(--gd-space-4); } .projects__empty-title { font-size: var(--gd-font-size-xl); } .projects__empty-message { font-size: var(--gd-font-size-base); } .projects__empty-actions { flex-direction: column; width: 100%; } .projects__show-all-button, .projects__refresh-button { width: 100%; } .projects__realtime-status { flex-direction: column; gap: var(--gd-space-1); padding: var(--gd-space-3); } .projects__card-metadata { position: static; display: flex; justify-content: space-between; margin-bottom: var(--gd-space-3); background: var(--gd-bg-secondary); padding: var(--gd-space-2); border-radius: var(--gd-radius-md); } .projects__view-count, .projects__featured-badge { background: transparent; color: var(--gd-text-secondary); border: 1px solid var(--gd-border-medium); } .projects__featured-badge { color: var(--gd-color-warning-600); border-color: var(--gd-color-warning-300); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .projects__card, .projects__filter, .projects__action, .projects__tech-tag { transition: none; } .projects__card:hover { transform: none; } .projects__header, .projects__filters, .projects__grid, .projects__card { animation: none; } .projects__spinner, .projects__pulse { animation: none; } .projects__realtime-indicator .projects__pulse { display: none; } } /* ===== PAGINATION INTEGRATION STYLES ===== */ .projects__grid-container { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); width: 100%; max-width: none; } .projects__pagination-info { margin-top: 1rem; text-align: center; opacity: 0.8; } .projects__total-count { font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 500; background: var(--color-surface); padding: 0.5rem 1rem; border-radius: 2rem; border: 1px solid var(--color-border); display: inline-block; } .projects__pagination { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } /* Ensure proper spacing between grid and pagination */ .projects__grid + .projects__pagination { margin-top: 3rem; } /* Enhanced loading states for pagination */ .projects__refresh-overlay { position: relative; pointer-events: none; } .projects__refresh-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); border-radius: var(--border-radius); z-index: 10; } .projects__refresh-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; display: flex; align-items: center; gap: 0.75rem; background: var(--color-background); padding: 1rem 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); } /* Responsive pagination adjustments */ @media (max-width: 768px) { .projects__grid-container { gap: 2rem; } .projects__pagination { margin-top: 1.5rem; padding-top: 1.5rem; } .projects__total-count { font-size: 0.8rem; padding: 0.4rem 0.8rem; } } /* Dark theme adjustments for pagination integration */ @media (prefers-color-scheme: dark) { .projects__total-count { background: var(--color-dark-surface); border-color: var(--color-dark-border); color: var(--color-dark-text-secondary); } .projects__pagination { border-top-color: var(--color-dark-border); } .projects__refresh-overlay::before { background: rgba(17, 24, 39, 0.8); } .projects__refresh-indicator { background: var(--color-dark-surface); border-color: var(--color-dark-border); } } /* Animation for pagination state changes */ .projects__grid-container.projects__grid-container--loading { opacity: 0.7; transition: opacity 0.3s ease; } /* Skeleton Loading Animation */ @keyframes skeleton-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .projects__skeleton-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem 0; } .projects__skeleton-card { background: var(--gd-white); border-radius: var(--gd-border-radius-lg); box-shadow: var(--gd-shadow-sm); overflow: hidden; border: 1px solid var(--gd-border-light); } .projects__skeleton-image { width: 100%; height: 200px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .projects__skeleton-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .projects__skeleton-title { height: 24px; width: 70%; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .projects__skeleton-description { height: 16px; width: 100%; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .projects__skeleton-description--short { width: 75%; } .projects__skeleton-tech { display: flex; gap: 0.5rem; flex-wrap: wrap; } .projects__skeleton-tag { height: 20px; width: 60px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 12px; } .projects__skeleton-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; } .projects__skeleton-badge { height: 18px; width: 80px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .projects__skeleton-year { height: 16px; width: 40px; background: linear-gradient( 90deg, var(--gd-gray-200) 0%, var(--gd-gray-100) 50%, var(--gd-gray-200) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; } /* Clickable card styles */ .projects__card--clickable { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .projects__card--clickable:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); } .projects__card--clickable:focus { outline: 2px solid var(--gd-primary); outline-offset: 2px; } /* Compact project details with icons */ .projects__details-grid { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1vw, 0.75rem); padding: clamp(0.75rem, 1.5vw, 1rem); background: rgba(var(--gd-color-primary-500-rgb), 0.05); border-radius: clamp(0.5rem, 1vw, 0.75rem); border: 1px solid rgba(var(--gd-color-primary-500-rgb), 0.1); backdrop-filter: blur(4px); } .projects__detail-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--gd-text-secondary); white-space: nowrap; } .projects__detail-icon { font-size: 1rem; min-width: 1.2rem; text-align: center; } .projects__detail-text { font-weight: 500; color: var(--gd-text-primary); } /* Enhanced meta section with icons */ .projects__meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gd-border-light); font-size: 0.875rem; } .projects__meta-item { display: flex; align-items: center; gap: 0.25rem; color: var(--gd-text-secondary); } .projects__meta-item--updated { opacity: 0.8; font-size: 0.75rem; } .projects__meta-icon { font-size: 1rem; min-width: 1.1rem; text-align: center; } .projects__category { font-weight: 500; color: var(--gd-text-primary); text-transform: capitalize; } .projects__year { font-weight: 500; color: var(--gd-text-primary); } .projects__updated-short { font-weight: 400; } /* Responsive adjustments for compact design */ @media (max-width: 768px) { .projects__details-grid { flex-direction: column; gap: 0.5rem; } .projects__meta { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .projects__meta-item--updated { align-self: flex-end; } } /* Enhanced Smart Skeleton Loader Integration */ .projects__smart-loader { position: relative; min-height: 600px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Modern refresh overlay styles */ .projects__refresh-overlay--modern { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px) saturate(180%); border-radius: var(--gd-radius-2xl); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); animation: fadeInOverlay 0.3s ease-out; } @keyframes fadeInOverlay { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(12px) saturate(180%); } } .projects__refresh-overlay--modern .projects__refresh-indicator { background: var(--gd-surface-raised); border: 1px solid var(--gd-border-light); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05); animation: slideInFromTop 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideInFromTop { from { opacity: 0; transform: translate(-50%, -60%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Enhanced loading transitions for projects */ .projects__grid-container { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Improved empty state with skeleton integration */ .projects__empty { animation: projects-empty-slide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes projects-empty-slide { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Performance optimizations for skeleton loading */ .projects__smart-loader * { will-change: opacity, transform; backface-visibility: hidden; transform: translateZ(0); } /* Enhanced filter change animations */ .projects__card--filtering-in { animation: projectsCardFilterIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: opacity, transform; } @keyframes projectsCardFilterIn { from { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(2px); } 60% { opacity: 0.8; transform: translateY(-5px) scale(1.02); filter: blur(0px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } } /* Loading state for pagination transitions */ .projects__grid-container--loading { opacity: 0.6; pointer-events: none; transition: opacity 0.3s ease; } .projects__grid-container--loading .projects__card { transform: scale(0.98); transition: transform 0.3s ease; } /* Dark theme skeleton adjustments */ @media (prefers-color-scheme: dark) { .projects__skeleton-card { background: var(--color-dark-surface); border-color: var(--color-dark-border); } .projects__skeleton-image, .projects__skeleton-title, .projects__skeleton-description, .projects__skeleton-tag, .projects__skeleton-badge, .projects__skeleton-year { background: linear-gradient( 90deg, var(--color-dark-hover) 0%, var(--color-dark-border) 50%, var(--color-dark-hover) 100% ); background-size: 200px 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; } .projects__details-grid { background: var(--color-dark-surface); border-left-color: var(--gd-primary); } .projects__detail-text, .projects__category, .projects__year { color: var(--color-dark-text-primary); } .projects__detail-item, .projects__meta-item { color: var(--color-dark-text-secondary); } .projects__meta { border-top-color: var(--color-dark-border); } .projects__refresh-overlay--modern { background: rgba(17, 24, 39, 0.95); } .projects__refresh-overlay--modern .projects__refresh-indicator { background: var(--color-dark-surface); border-color: var(--color-dark-border); color: var(--color-dark-text-primary); } } /* Micro-interactions for enhanced UX */ .projects__smart-loader:focus-within { outline: 2px solid var(--gd-color-primary-500); outline-offset: 4px; border-radius: var(--gd-radius-2xl); } /* Container queries for advanced responsive skeleton loading */ @supports (container-type: inline-size) { .projects__smart-loader { container-type: inline-size; } @container (max-width: 768px) { .projects__smart-loader { min-height: 400px; } } @container (max-width: 480px) { .projects__smart-loader { min-height: 300px; } } }/* Services.css - Compact, space-efficient design with proper stacking */ .services { position: relative; padding: var(--gd-space-20) 0; background: var(--gd-gradient-subtle); color: var(--gd-text-primary); overflow: hidden; } /* Subtle background pattern - reduced opacity for cleaner look */ .services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20px 20px, var(--gd-color-primary-100) 1px, transparent 0%); background-size: 40px 40px; opacity: 0.3; z-index: 0; } .services__container { position: relative; max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); z-index: 1; } /* Compact Header Section */ .services__header { text-align: center; margin-bottom: var(--gd-space-12); opacity: 0; transform: translateY(20px); transition: var(--gd-transition-slow); } .services--visible .services__header { opacity: 1; transform: translateY(0); } .services__title { font-size: var(--gd-font-size-4xl); font-weight: var(--gd-font-weight-bold); margin-bottom: var(--gd-space-4); line-height: var(--gd-line-height-tight); background: var(--gd-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--gd-color-primary-600); } .services__subtitle { font-size: var(--gd-font-size-lg); color: var(--gd-text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--gd-line-height-relaxed); } /* Compact Filter Navigation */ .services__filters { display: flex; justify-content: center; gap: var(--gd-space-2); margin-bottom: var(--gd-space-10); flex-wrap: wrap; } .services__filter { padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-bg-secondary); color: var(--gd-text-secondary); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); cursor: pointer; transition: var(--gd-transition-base); outline: none; white-space: nowrap; } .services__filter:hover { background: var(--gd-bg-tertiary); border-color: var(--gd-border-medium); transform: translateY(-1px); } .services__filter:focus-visible { box-shadow: var(--gd-input-shadow-focus); } .services__filter--active { background: var(--gd-color-primary-500); color: var(--gd-text-on-primary); border-color: var(--gd-color-primary-500); } .services__filter--active:hover { background: var(--gd-color-primary-600); border-color: var(--gd-color-primary-600); } /* Improved Grid Layout - Better stacking and space efficiency */ .services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gd-space-16); margin-bottom: var(--gd-space-16); /* Ensure proper alignment */ align-items: start; justify-content: center; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; will-change: opacity, transform; } .services__grid--ready { opacity: 1; transform: translateY(0); } /* Compact Service Card Design */ .services__card { background: var(--gd-card-bg); border: 1px solid var(--gd-card-border); border-radius: var(--gd-card-radius); padding: var(--gd-space-6); transition: var(--gd-transition-base); position: relative; display: flex; flex-direction: column; height: 100%; box-shadow: var(--gd-card-shadow); /* Prevent card distortion */ min-height: 0; width: 100%; } .services__card:hover { transform: translateY(-4px); box-shadow: var(--gd-card-shadow-hover); border-color: var(--gd-color-primary-300); } /* Compact Featured card styling */ .services__card--featured { background: var(--gd-bg-primary-subtle); border: 2px solid var(--gd-color-primary-300); position: relative; } .services__card--featured::after { content: 'Popular'; position: absolute; top: -8px; right: var(--gd-space-4); background: var(--gd-color-accent-500); color: var(--gd-text-on-accent); padding: var(--gd-space-1) var(--gd-space-3); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; box-shadow: var(--gd-shadow-sm); } /* Compact Card Header */ .services__card-header { display: flex; align-items: flex-start; gap: var(--gd-space-4); margin-bottom: var(--gd-space-4); } .services__card-icon { width: 48px; height: 48px; background: var(--gd-gradient-secondary); border-radius: var(--gd-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--gd-font-size-xl); color: var(--gd-text-on-secondary); transition: var(--gd-transition-base); box-shadow: var(--gd-shadow-secondary); flex-shrink: 0; } .services__card:hover .services__card-icon { transform: scale(1.05); } .services__card-title-group { flex: 1; min-width: 0; /* Prevent flex overflow */ } .services__card-title { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-bold); margin-bottom: var(--gd-space-1); color: var(--gd-text-primary); line-height: var(--gd-line-height-tight); } .services__card-category { display: inline-block; padding: var(--gd-space-0_5) var(--gd-space-2); background: var(--gd-bg-secondary); color: var(--gd-text-tertiary); border-radius: var(--gd-radius-base); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); text-transform: uppercase; letter-spacing: 0.5px; } /* Compact Card Content */ .services__card-description { color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); margin-bottom: var(--gd-space-4); font-size: var(--gd-font-size-sm); flex-grow: 1; } .services__card-features { margin-bottom: var(--gd-space-6); } .services__card-features-title { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-3); } .services__card-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gd-space-2); } .services__card-feature { display: flex; align-items: flex-start; gap: var(--gd-space-2); color: var(--gd-text-secondary); font-size: var(--gd-font-size-sm); line-height: var(--gd-line-height-relaxed); } .services__card-feature::before { content: ''; width: 16px; height: 16px; background: var(--gd-color-success); border-radius: var(--gd-radius-sm); flex-shrink: 0; margin-top: 2px; mask: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3e%3c/svg%3e") center/60% no-repeat; } /* Compact Card Footer */ .services__card-footer { margin-top: auto; padding-top: var(--gd-space-4); border-top: 1px solid var(--gd-border-light); display: flex; align-items: center; justify-content: space-between; gap: var(--gd-space-4); } .services__card-pricing { flex-shrink: 0; } .services__card-price { font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-semibold); color: var(--gd-color-primary-600); } .services__card-cta { display: flex; align-items: center; justify-content: center; gap: var(--gd-space-2); padding: var(--gd-space-2_5) var(--gd-space-5); background: var(--gd-color-primary-500); color: var(--gd-text-on-primary); border: none; border-radius: var(--gd-btn-radius); font-weight: var(--gd-btn-font-weight); font-size: var(--gd-font-size-sm); cursor: pointer; transition: var(--gd-btn-transition); text-decoration: none; outline: none; flex-shrink: 0; } .services__card-cta:hover { background: var(--gd-color-primary-600); transform: translateY(-1px); box-shadow: var(--gd-shadow-primary); } .services__card-cta:focus-visible { box-shadow: var(--gd-input-shadow-focus); } .services__card-cta:active { transform: translateY(0); } .services__card-cta-icon { transition: var(--gd-transition-fast); width: 14px; height: 14px; } .services__card-cta:hover .services__card-cta-icon { transform: translateX(2px); } /* Loading States */ .services__loading { transition: opacity 0.3s ease-out, transform 0.3s ease-out; will-change: opacity, transform; } .services__loading--active { opacity: 1; transform: translateY(0); } .services__loading--hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; } .services__error { text-align: center; padding: var(--gd-space-12); color: var(--gd-color-danger); background: var(--gd-color-danger-light); border: 1px solid var(--gd-color-danger); border-radius: var(--gd-radius-lg); margin: var(--gd-space-8) 0; } .services__error-title { font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-2); } .services__error-retry { display: inline-flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-color-danger); color: white; border: none; border-radius: var(--gd-radius-base); font-size: var(--gd-font-size-sm); cursor: pointer; transition: var(--gd-transition-base); margin-top: var(--gd-space-4); } .services__error-retry:hover { background: var(--gd-color-danger-dark); } /* Skeleton Loading */ .services__skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gd-space-16); margin-bottom: var(--gd-space-16); justify-content: center; } .services__skeleton-card { background: var(--gd-card-bg); border: 1px solid var(--gd-card-border); border-radius: var(--gd-card-radius); padding: var(--gd-space-6); display: flex; flex-direction: column; gap: var(--gd-space-4); animation: skeleton-shimmer 2s ease-in-out infinite; } .services__skeleton-header { display: flex; align-items: flex-start; gap: var(--gd-space-4); } .services__skeleton-icon { width: 48px; height: 48px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-lg); animation: skeleton-pulse 1.8s ease-in-out infinite alternate; flex-shrink: 0; } .services__skeleton-title-group { flex: 1; display: flex; flex-direction: column; gap: var(--gd-space-2); } .services__skeleton-title { height: 24px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); width: 80%; animation: skeleton-pulse 1.6s ease-in-out infinite alternate; } .services__skeleton-category { height: 18px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); width: 40%; animation: skeleton-pulse 1.4s ease-in-out infinite alternate; } .services__skeleton-description { height: 60px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); animation: skeleton-pulse 1.7s ease-in-out infinite alternate; } .services__skeleton-features { display: flex; flex-direction: column; gap: var(--gd-space-2); flex-grow: 1; } .services__skeleton-feature-title { height: 16px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); width: 60%; margin-bottom: var(--gd-space-1); animation: skeleton-pulse 1.3s ease-in-out infinite alternate; } .services__skeleton-feature { height: 14px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); animation: skeleton-pulse 1.5s ease-in-out infinite alternate; } .services__skeleton-feature:nth-child(2) { width: 85%; animation-delay: 0.1s; } .services__skeleton-feature:nth-child(3) { width: 75%; animation-delay: 0.2s; } .services__skeleton-feature:nth-child(4) { width: 90%; animation-delay: 0.3s; } .services__skeleton-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-space-4); margin-top: auto; padding-top: var(--gd-space-4); border-top: 1px solid var(--gd-border-light); } .services__skeleton-price { height: 20px; background: var(--gd-bg-secondary); border-radius: var(--gd-radius-base); width: 80px; animation: skeleton-pulse 1.2s ease-in-out infinite alternate; } .services__skeleton-button { height: 36px; background: var(--gd-bg-secondary); border-radius: var(--gd-btn-radius); width: 100px; animation: skeleton-pulse 1.9s ease-in-out infinite alternate; } @keyframes skeleton-pulse { 0% { opacity: 0.4; } 100% { opacity: 0.8; } } @keyframes skeleton-shimmer { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(0); } } /* Compact Process Section */ .services__process { margin-top: var(--gd-space-16); opacity: 0; transform: translateY(20px); transition: var(--gd-transition-slow); } .services__process--visible { opacity: 1; transform: translateY(0); } .services__process-title { font-size: var(--gd-font-size-3xl); font-weight: var(--gd-font-weight-bold); text-align: center; margin-bottom: var(--gd-space-10); color: var(--gd-text-primary); } .services__process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gd-space-6); } .services__process-step { text-align: center; padding: var(--gd-space-6); background: var(--gd-bg-secondary); border-radius: var(--gd-radius-xl); border: 1px solid var(--gd-border-light); transition: var(--gd-transition-base); opacity: 0; transform: translateY(20px); } .services__process-step:hover { transform: translateY(-3px); box-shadow: var(--gd-shadow-base); border-color: var(--gd-border-medium); } .services__process-step-number { width: 48px; height: 48px; background: var(--gd-gradient-accent); color: var(--gd-text-on-accent); border-radius: var(--gd-radius-full); display: flex; align-items: center; justify-content: center; font-weight: var(--gd-font-weight-bold); font-size: var(--gd-font-size-lg); margin: 0 auto var(--gd-space-3) auto; box-shadow: var(--gd-shadow-accent); } .services__process-step-title { font-size: var(--gd-font-size-lg); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-2); color: var(--gd-text-primary); } .services__process-step-description { color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); font-size: var(--gd-font-size-sm); margin-bottom: var(--gd-space-2); } .services__process-step-duration { font-size: var(--gd-font-size-xs); color: var(--gd-text-tertiary); font-weight: var(--gd-font-weight-medium); text-transform: uppercase; letter-spacing: 0.5px; } /* Animation classes */ .services__card--animate { opacity: 0; transform: translateY(20px); animation: servicesCardSlide 0.5s var(--gd-ease-out) forwards; } .services__process-step--animate { animation: servicesCardSlide 0.5s var(--gd-ease-out) forwards; } @keyframes servicesCardSlide { to { opacity: 1; transform: translateY(0); } } /* Responsive Design - Improved stacking */ @media (max-width: 1200px) { .services__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gd-space-5); } } @media (max-width: 992px) { .services { padding: var(--gd-space-16) 0; } .services__title { font-size: var(--gd-font-size-3xl); } .services__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gd-space-4); } .services__card { padding: var(--gd-space-5); } .services__process-title { font-size: var(--gd-font-size-2xl); } .services__process-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gd-space-5); } } @media (max-width: 768px) { .services { padding: var(--gd-space-12) 0; } .services__container { padding: 0 var(--gd-space-4); } .services__title { font-size: var(--gd-font-size-2xl); } .services__subtitle { font-size: var(--gd-font-size-base); } .services__filters { gap: var(--gd-space-1_5); } .services__filter { padding: var(--gd-space-1_5) var(--gd-space-3); font-size: var(--gd-font-size-xs); } .services__grid { grid-template-columns: 1fr; gap: var(--gd-space-4); } .services__card-header { gap: var(--gd-space-3); } .services__card-icon { width: 40px; height: 40px; font-size: var(--gd-font-size-lg); } .services__card-title { font-size: var(--gd-font-size-lg); } .services__card-footer { flex-direction: column; align-items: stretch; gap: var(--gd-space-3); } .services__card-cta { width: 100%; justify-content: center; } .services__process-steps { grid-template-columns: 1fr; gap: var(--gd-space-4); } .services__process-step { padding: var(--gd-space-5); } } @media (max-width: 480px) { .services__title { font-size: var(--gd-font-size-xl); } .services__card { padding: var(--gd-space-4); } .services__card-title { font-size: var(--gd-font-size-base); } .services__process-title { font-size: var(--gd-font-size-xl); } .services__process-step-number { width: 40px; height: 40px; font-size: var(--gd-font-size-base); } .services__filters { justify-content: flex-start; overflow-x: auto; padding-bottom: var(--gd-space-2); } .services__filters::-webkit-scrollbar { height: 2px; } .services__filters::-webkit-scrollbar-track { background: var(--gd-bg-secondary); } .services__filters::-webkit-scrollbar-thumb { background: var(--gd-color-primary-300); border-radius: var(--gd-radius-full); } } /* High contrast mode support */ @media (prefers-contrast: high) { .services__card { border-width: 2px; } .services__card--featured { border-width: 3px; } .services__filter--active { outline: 2px solid var(--gd-color-primary-700); outline-offset: 1px; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .services__card--animate, .services__process-step--animate { animation: none; opacity: 1; transform: none; } .services__card:hover, .services__process-step:hover, .services__filter:hover, .services__card-cta:hover { transform: none; } .services__card:hover .services__card-icon { transform: none; } .services__card-cta:hover .services__card-cta-icon { transform: none; } .services__skeleton-card, .services__skeleton-icon, .services__skeleton-title, .services__skeleton-category, .services__skeleton-description, .services__skeleton-feature-title, .services__skeleton-feature, .services__skeleton-price, .services__skeleton-button { animation: none; } } /* Print styles */ @media print { .services { background: white; color: black; } .services::before { display: none; } .services__card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } .services__card-cta { display: none; } .services__filters { display: none; } }/* Articles.css - Modern Arctic Frost themed Articles section */ .articles { position: relative; padding: var(--gd-space-32) 0; background: var(--gd-gradient-subtle); overflow: hidden; } .articles__container { max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); } /* ===== ENHANCED HEADER ===== */ .articles__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--gd-space-16); opacity: 0; transform: translateY(30px); transition: var(--gd-transition-slow); } .articles--visible .articles__header { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .articles__header-content { flex: 1; } .articles__title { font-size: var(--gd-font-size-5xl); font-weight: var(--gd-font-weight-black); color: var(--gd-text-primary); margin-bottom: var(--gd-space-4); line-height: var(--gd-line-height-tight); } .articles__title-accent { background: var(--gd-gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--gd-color-primary); } .articles__subtitle { font-size: var(--gd-font-size-xl); color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); max-width: 500px; } /* ===== VIEW TOGGLE CONTROLS ===== */ .articles__controls { display: flex; align-items: center; gap: var(--gd-space-4); } .articles__view-toggle { display: flex; background: var(--gd-surface-raised); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-xl); padding: var(--gd-space-1); box-shadow: var(--gd-shadow-sm); } .articles__view-btn { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-3) var(--gd-space-4); background: transparent; color: var(--gd-text-secondary); border: none; border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); cursor: pointer; transition: var(--gd-transition-base); position: relative; } .articles__view-btn:hover { color: var(--gd-text-primary); background: var(--gd-surface-3); } .articles__view-btn--active { background: var(--gd-color-primary); color: var(--gd-text-inverse); box-shadow: var(--gd-shadow-primary); } .articles__view-btn svg { width: 14px; height: 14px; transition: var(--gd-transition-base); } /* ===== ENHANCED FILTERS ===== */ .articles__filters { display: flex; justify-content: center; gap: var(--gd-space-3); margin-bottom: var(--gd-space-20); flex-wrap: wrap; opacity: 0; transform: translateY(20px); transition: var(--gd-transition-slow); } .articles--visible .articles__filters { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .articles__filter { padding: var(--gd-space-3) var(--gd-space-6); background: var(--gd-surface-raised); color: var(--gd-text-secondary); border: 2px solid var(--gd-border-light); border-radius: var(--gd-radius-full); font-weight: var(--gd-font-weight-semibold); font-size: var(--gd-font-size-sm); cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; } .articles__filter::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gd-gradient-primary); transition: left 0.3s var(--gd-ease-out); z-index: -1; } .articles__filter:hover::before, .articles__filter--active::before { left: 0; } .articles__filter:hover, .articles__filter--active { color: var(--gd-text-inverse); border-color: var(--gd-color-primary); transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } /* ===== CONTENT CONTAINER ===== */ .articles__content { margin-bottom: var(--gd-space-20); } /* ===== TIMELINE VIEW ===== */ .articles__timeline { position: relative; max-width: 900px; margin: 0 auto; } .articles__timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--gd-gradient-primary); transform: translateX(-50%); opacity: 0.3; border-radius: var(--gd-radius-full); } .articles__timeline-item { display: flex; align-items: center; margin-bottom: var(--gd-space-16); opacity: 0; transform: translateX(-50px); transition: all 0.6s var(--gd-ease-out); } .articles__timeline-item--right { transform: translateX(50px); } .articles__item--visible.articles__timeline-item { opacity: 1; transform: translateX(0); } .articles__timeline-item--left { flex-direction: row; } .articles__timeline-item--right { flex-direction: row-reverse; } .articles__timeline-marker { position: relative; z-index: 2; flex-shrink: 0; margin: 0 var(--gd-space-8); } .articles__timeline-dot { width: 16px; height: 16px; background: var(--gd-color-primary); border-radius: 50%; box-shadow: 0 0 0 6px var(--gd-surface-1), 0 0 0 8px var(--gd-color-primary-200); transition: var(--gd-transition-base); } .articles__timeline-item--featured .articles__timeline-dot { background: var(--gd-color-accent); box-shadow: 0 0 0 6px var(--gd-surface-1), 0 0 0 8px var(--gd-color-accent-200); transform: scale(1.3); } .articles__timeline-content { flex: 1; max-width: 400px; } .articles__timeline-card { background: var(--gd-surface-raised); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-8); box-shadow: var(--gd-shadow-base); position: relative; transition: var(--gd-transition-base); } .articles__timeline-card::before { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 12px solid transparent; transform: translateY(-50%); } .articles__timeline-item--left .articles__timeline-card::before { right: -24px; border-left-color: var(--gd-surface-raised); } .articles__timeline-item--right .articles__timeline-card::before { left: -24px; border-right-color: var(--gd-surface-raised); } .articles__timeline-card:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-color-primary-300); } .articles__timeline-item--featured .articles__timeline-card { background: var(--gd-gradient-primary); color: var(--gd-text-inverse); border-color: var(--gd-color-primary); } .articles__timeline-item--featured .articles__timeline-card::before { border-left-color: var(--gd-color-primary); border-right-color: var(--gd-color-primary); } /* ===== GRID VIEW ===== */ .articles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gd-space-8); max-width: 1000px; margin: 0 auto; } .articles__grid-item { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.5s var(--gd-ease-out); } .articles__item--visible.articles__grid-item { opacity: 1; transform: translateY(0) scale(1); transition-delay: var(--delay, 0s); } .articles__grid-card { background: var(--gd-surface-raised); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-8); height: 100%; display: flex; flex-direction: column; transition: var(--gd-transition-base); position: relative; overflow: hidden; } .articles__grid-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gd-gradient-primary); transform: scaleX(0); transition: transform 0.3s var(--gd-ease-out); transform-origin: left; } .articles__grid-card:hover::before { transform: scaleX(1); } .articles__grid-card:hover { transform: translateY(-6px); box-shadow: var(--gd-shadow-xl); border-color: var(--gd-color-primary-300); } .articles__grid-item--featured .articles__grid-card { background: var(--gd-gradient-primary); color: var(--gd-text-inverse); border-color: var(--gd-color-primary); } .articles__grid-item--featured .articles__grid-card::before { background: rgba(255, 255, 255, 0.3); } /* ===== SHARED COMPONENTS ===== */ /* Meta Badges */ .articles__meta-badges { display: flex; align-items: center; gap: var(--gd-space-2); margin-bottom: var(--gd-space-4); } .articles__category-badge { padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-color-primary-100); color: var(--gd-color-primary-700); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; } .articles__featured-badge { padding: var(--gd-space-1_5) var(--gd-space-3); background: var(--gd-color-accent); color: var(--gd-text-inverse); border-radius: var(--gd-radius-full); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-bold); text-transform: uppercase; letter-spacing: 0.5px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .articles__timeline-item--featured .articles__category-badge, .articles__grid-item--featured .articles__category-badge { background: rgba(255, 255, 255, 0.2); color: var(--gd-text-inverse); } /* Timeline Header */ .articles__timeline-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--gd-space-6); } .articles__meta-info { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gd-space-1); } /* Grid Header */ .articles__grid-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--gd-space-6); } /* Content Body */ .articles__timeline-body, .articles__grid-body { margin-bottom: var(--gd-space-6); } .articles__item-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-4); line-height: var(--gd-line-height-tight); transition: var(--gd-transition-base); } .articles__timeline-item--featured .articles__item-title, .articles__grid-item--featured .articles__item-title { color: var(--gd-text-inverse); } .articles__item-excerpt { color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); font-size: var(--gd-font-size-base); margin-bottom: var(--gd-space-4); } .articles__timeline-item--featured .articles__item-excerpt, .articles__grid-item--featured .articles__item-excerpt { color: rgba(255, 255, 255, 0.9); } /* Compact Tags */ .articles__tags-compact { display: flex; flex-wrap: wrap; gap: var(--gd-space-2); margin-bottom: var(--gd-space-6); } .articles__tag-compact { padding: var(--gd-space-1_5) var(--gd-space-3); background: var(--gd-surface-3); color: var(--gd-text-secondary); border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); transition: var(--gd-transition-base); } .articles__tag-more { padding: var(--gd-space-1_5) var(--gd-space-3); background: var(--gd-color-primary-100); color: var(--gd-color-primary-600); border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-semibold); } .articles__timeline-item--featured .articles__tag-compact, .articles__grid-item--featured .articles__tag-compact { background: rgba(255, 255, 255, 0.2); color: var(--gd-text-inverse); } .articles__timeline-item--featured .articles__tag-more, .articles__grid-item--featured .articles__tag-more { background: rgba(255, 255, 255, 0.3); color: var(--gd-text-inverse); } /* Footer Sections */ .articles__timeline-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .articles__grid-footer { margin-top: auto; } .articles__meta-bottom { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gd-space-4); padding-top: var(--gd-space-4); border-top: 1px solid var(--gd-border-light); } .articles__grid-item--featured .articles__meta-bottom { border-top-color: rgba(255, 255, 255, 0.2); } /* Author and Date */ .articles__author-info { display: flex; flex-direction: column; } .articles__author { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); } .articles__date { font-size: var(--gd-font-size-xs); color: var(--gd-text-muted); } .articles__read-time { font-size: var(--gd-font-size-xs); color: var(--gd-text-muted); font-weight: var(--gd-font-weight-medium); padding: var(--gd-space-1) var(--gd-space-3); background: var(--gd-surface-3); border-radius: var(--gd-radius-full); } .articles__timeline-item--featured .articles__author, .articles__timeline-item--featured .articles__date, .articles__timeline-item--featured .articles__read-time, .articles__grid-item--featured .articles__author, .articles__grid-item--featured .articles__date, .articles__grid-item--featured .articles__read-time { color: var(--gd-text-inverse); } .articles__timeline-item--featured .articles__read-time, .articles__grid-item--featured .articles__read-time { background: rgba(255, 255, 255, 0.2); } /* Read Buttons */ .articles__read-btn { display: inline-flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-3) var(--gd-space-6); background: var(--gd-color-primary); color: var(--gd-text-inverse); border: none; border-radius: var(--gd-radius-lg); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; } .articles__read-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .articles__read-btn:hover::before { left: 100%; } .articles__read-btn:hover { background: var(--gd-color-primary-600); transform: translateY(-2px); box-shadow: var(--gd-shadow-primary); } .articles__read-btn--grid { width: 100%; justify-content: center; margin-top: var(--gd-space-4); } .articles__timeline-item--featured .articles__read-btn, .articles__grid-item--featured .articles__read-btn { background: rgba(255, 255, 255, 0.2); color: var(--gd-text-inverse); backdrop-filter: blur(10px); } .articles__timeline-item--featured .articles__read-btn:hover, .articles__grid-item--featured .articles__read-btn:hover { background: rgba(255, 255, 255, 0.3); } .articles__read-btn svg { transition: transform 0.2s ease; } .articles__read-btn:hover svg { transform: translateX(2px); } /* ===== CTA SECTION ===== */ .articles__cta { text-align: center; opacity: 0; transform: translateY(30px); transition: var(--gd-transition-slow); } .articles--visible .articles__cta { opacity: 1; transform: translateY(0); transition-delay: 0.8s; } .articles__view-all { display: inline-flex; align-items: center; gap: var(--gd-space-3); padding: var(--gd-space-5) var(--gd-space-10); background: var(--gd-gradient-secondary); color: var(--gd-text-inverse); border: none; border-radius: var(--gd-radius-2xl); font-size: var(--gd-font-size-lg); font-weight: var(--gd-font-weight-bold); cursor: pointer; transition: var(--gd-transition-base); position: relative; overflow: hidden; box-shadow: var(--gd-shadow-lg); } .articles__view-all::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-primary); opacity: 0; transition: opacity 0.3s ease; } .articles__view-all:hover::before { opacity: 1; } .articles__view-all:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-2xl); } .articles__view-all span, .articles__view-all svg { position: relative; z-index: 1; } .articles__view-all svg { transition: transform 0.3s ease; } .articles__view-all:hover svg { transform: translateX(4px); } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 1024px) { .articles { padding: var(--gd-space-24) 0; } .articles__header { flex-direction: column; align-items: flex-start; gap: var(--gd-space-6); } .articles__title { font-size: var(--gd-font-size-4xl); } .articles__timeline { max-width: 100%; } .articles__timeline-line { left: 30px; } .articles__timeline-item--left, .articles__timeline-item--right { flex-direction: row; } .articles__timeline-marker { position: absolute; left: 22px; margin: 0; } .articles__timeline-content { margin-left: 80px; max-width: none; } .articles__timeline-card::before { display: none; } } @media (max-width: 768px) { .articles { padding: var(--gd-space-20) 0; } .articles__container { padding: 0 var(--gd-space-6); } .articles__title { font-size: var(--gd-font-size-3xl); } .articles__subtitle { font-size: var(--gd-font-size-lg); } .articles__view-toggle { display: none; } .articles__filters { justify-content: flex-start; gap: var(--gd-space-2); } .articles__filter { padding: var(--gd-space-2_5) var(--gd-space-5); font-size: var(--gd-font-size-xs); } .articles__grid { grid-template-columns: 1fr; gap: var(--gd-space-6); } .articles__timeline-content { margin-left: 60px; } .articles__timeline-card { padding: var(--gd-space-6); } .articles__grid-card { padding: var(--gd-space-6); } .articles__item-title { font-size: var(--gd-font-size-xl); } .articles__meta-bottom { flex-direction: column; align-items: flex-start; gap: var(--gd-space-2); } } @media (max-width: 480px) { .articles { padding: var(--gd-space-16) 0; } .articles__container { padding: 0 var(--gd-space-4); } .articles__title { font-size: var(--gd-font-size-2xl); } .articles__timeline-line { left: 20px; } .articles__timeline-marker { left: 12px; } .articles__timeline-content { margin-left: 50px; } .articles__timeline-card, .articles__grid-card { padding: var(--gd-space-5); } .articles__timeline-header, .articles__grid-header { flex-direction: column; align-items: flex-start; gap: var(--gd-space-2); } .articles__meta-info { flex-direction: row; align-items: center; gap: var(--gd-space-3); } .articles__view-all { padding: var(--gd-space-4) var(--gd-space-8); font-size: var(--gd-font-size-base); } } /* ===== LOADING STATE ===== */ .articles__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--gd-space-16) var(--gd-space-8); text-align: center; color: var(--gd-text-secondary); } .articles__loading-spinner { width: 40px; height: 40px; border: 3px solid var(--gd-border-subtle); border-top: 3px solid var(--gd-color-primary); border-radius: 50%; margin-bottom: var(--gd-space-4); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ===== ERROR STATE ===== */ .articles__error { padding: var(--gd-space-8); text-align: center; color: var(--gd-text-warning); background: rgba(var(--gd-color-warning-rgb), 0.1); border: 1px solid rgba(var(--gd-color-warning-rgb), 0.2); border-radius: var(--gd-border-radius-lg); margin-bottom: var(--gd-space-8); } .articles__error p { margin: 0; margin-bottom: var(--gd-space-2); } .articles__error p:last-child { margin-bottom: 0; font-size: var(--gd-font-size-sm); opacity: 0.8; } /* ===== EMPTY STATE ===== */ .articles__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--gd-space-16) var(--gd-space-8); text-align: center; color: var(--gd-text-secondary); } .articles__empty-icon { margin-bottom: var(--gd-space-6); opacity: 0.6; color: var(--gd-color-primary); } .articles__empty h3 { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-4); } .articles__empty p { font-size: var(--gd-font-size-base); line-height: var(--gd-line-height-relaxed); max-width: 500px; margin: 0; } /* Responsive adjustments for states */ @media (max-width: 768px) { .articles__loading, .articles__empty { padding: var(--gd-space-12) var(--gd-space-4); } .articles__empty h3 { font-size: var(--gd-font-size-lg); } .articles__empty p { font-size: var(--gd-font-size-sm); } } /* ===== ACCESSIBILITY IMPROVEMENTS ===== */ @media (prefers-reduced-motion: reduce) { .articles__timeline-item, .articles__grid-item, .articles__header, .articles__filters, .articles__cta { transition: opacity 0.3s ease; transform: none !important; } .articles__timeline-card:hover, .articles__grid-card:hover, .articles__read-btn:hover, .articles__view-all:hover { transform: none; } .articles__featured-badge { animation: none; } } @media (prefers-contrast: high) { .articles__timeline-card, .articles__grid-card { border-width: 2px; } .articles__category-badge, .articles__featured-badge, .articles__tag-compact, .articles__read-time { border: 1px solid currentColor; } }/* Contact Section - Arctic Frost Theme Optimized */ .contact { position: relative; padding: var(--gd-space-20) 0; background: var(--gd-gradient-subtle); overflow: hidden; } /* Container */ .contact__container { max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); } /* ===== HEADER SECTION ===== */ .contact__header { text-align: center; margin-bottom: var(--gd-space-16); animation: contactFadeInUp 0.8s ease-out; } .contact__header-badge { display: inline-flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-space-2) var(--gd-space-4); background: var(--gd-bg-primary-subtle); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-full); margin-bottom: var(--gd-space-6); transition: var(--gd-transition-base); } .contact__header-badge:hover { background: var(--gd-bg-secondary-subtle); border-color: var(--gd-color-primary-300); transform: translateY(-2px); } .contact__header-badge-icon { font-size: var(--gd-font-size-sm); animation: contactBounce 2s ease-in-out infinite; } .contact__header-badge-text { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); color: var(--gd-color-primary-700); } .contact__title { font-size: var(--gd-font-size-5xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-4); line-height: var(--gd-line-height-tight); background: var(--gd-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .contact__subtitle { font-size: var(--gd-font-size-xl); color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); max-width: 600px; margin: 0 auto; } /* ===== CONTENT LAYOUT ===== */ .contact__content { display: grid; grid-template-columns: 1fr; gap: var(--gd-space-16); margin-bottom: var(--gd-space-16); } /* ===== CONTACT METHODS SECTION ===== */ .contact__methods { position: relative; } .contact__methods-header { text-align: center; margin-bottom: var(--gd-space-8); } .contact__methods-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-2); } .contact__methods-subtitle { font-size: var(--gd-font-size-base); color: var(--gd-text-secondary); } .contact__methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gd-space-6); } /* Contact Method Cards */ .contact__method { position: relative; display: flex; align-items: flex-start; gap: var(--gd-space-4); padding: var(--gd-space-8); background: var(--gd-card-bg); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-xl); cursor: pointer; transition: var(--gd-transition-base); opacity: 0; transform: translateY(30px); overflow: hidden; min-height: 140px; } .contact__method--visible { opacity: 1; transform: translateY(0); animation: contactSlideIn 0.6s ease-out forwards; animation-delay: var(--delay, 0s); } .contact__method::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-primary); opacity: 0; transition: var(--gd-transition-base); border-radius: inherit; } .contact__method:hover { transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-color-primary-300); } .contact__method:hover::before { opacity: 0.05; } .contact__method:focus { outline: none; border-color: var(--gd-color-primary-500); box-shadow: var(--gd-input-shadow-focus); } /* Method Icon */ .contact__method-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; flex-shrink: 0; margin-top: var(--gd-space-1); } .contact__method-icon-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-primary); border-radius: var(--gd-radius-xl); opacity: 0.1; transition: var(--gd-transition-base); } .contact__method:hover .contact__method-icon-bg { opacity: 0.2; transform: scale(1.1); } .contact__method-icon-text { position: relative; font-size: var(--gd-font-size-2xl); z-index: 1; } /* Method Content */ .contact__method-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gd-space-2); padding-right: var(--gd-space-2); } .contact__method-title { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin: 0; line-height: var(--gd-line-height-tight); } .contact__method-value { font-size: var(--gd-font-size-base); font-weight: var(--gd-font-weight-medium); color: var(--gd-color-primary-600); margin: 0; line-height: var(--gd-line-height-snug); word-break: break-word; hyphens: auto; } .contact__method-description { font-size: var(--gd-font-size-sm); color: var(--gd-text-secondary); margin: 0; line-height: var(--gd-line-height-relaxed); opacity: 0.8; } /* Method Arrow */ .contact__method-arrow { color: var(--gd-color-primary-500); transition: var(--gd-transition-base); opacity: 0.6; align-self: flex-start; margin-top: var(--gd-space-2); flex-shrink: 0; } .contact__method:hover .contact__method-arrow { opacity: 1; transform: translateX(4px); } /* ===== FORM SECTION ===== */ .contact__form-section { position: relative; background: var(--gd-card-bg); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-8); box-shadow: var(--gd-shadow-base); } .contact__form-header { text-align: center; margin-bottom: var(--gd-space-8); } .contact__form-title { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-2); } .contact__form-subtitle { font-size: var(--gd-font-size-base); color: var(--gd-text-secondary); } /* Form Grid */ .contact__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gd-space-6) var(--gd-space-8); margin-bottom: var(--gd-space-8); align-items: start; } .contact__form-group--full { grid-column: 1 / -1; } /* Form Elements */ .contact__form-group { position: relative; display: flex; flex-direction: column; gap: var(--gd-space-2); width: 100%; min-width: 0; } .contact__form-label { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-1); display: block; position: relative; z-index: 1; } .contact__form-label::after { content: ' *'; color: var(--gd-color-danger); font-weight: bold; } .contact__form-label[data-optional]::after { display: none; } /* Required indicator for optional fields */ .contact__form-group[data-optional] .contact__form-label::after { display: none; } /* Form validation feedback */ .contact__form-error { color: var(--gd-color-danger); font-size: var(--gd-font-size-sm); margin-top: var(--gd-space-1); display: flex; align-items: center; gap: var(--gd-space-1); } .contact__form-success { color: var(--gd-color-success); font-size: var(--gd-font-size-sm); margin-top: var(--gd-space-1); display: flex; align-items: center; gap: var(--gd-space-1); } .contact__form-field-icon { width: 16px; height: 16px; flex-shrink: 0; } .contact__form-input, .contact__form-select, .contact__form-textarea { width: 100%; padding: var(--gd-space-4); background: var(--gd-input-bg); border: 2px solid var(--gd-input-border); border-radius: var(--gd-input-radius); font-size: var(--gd-font-size-base); color: var(--gd-text-primary); transition: all 0.2s ease; font-family: inherit; line-height: 1.5; box-sizing: border-box; min-height: 56px; } .contact__form-input::placeholder, .contact__form-textarea::placeholder { color: var(--gd-text-secondary); opacity: 0.7; font-size: var(--gd-font-size-sm); } .contact__form-input:focus, .contact__form-select:focus, .contact__form-textarea:focus { outline: none; border-color: var(--gd-color-primary-500); box-shadow: 0 0 0 3px var(--gd-color-primary-100); background: var(--gd-color-primary-25); } /* Error states */ .contact__form-input:invalid:not(:focus):not(:placeholder-shown), .contact__form-select:invalid:not(:focus), .contact__form-textarea:invalid:not(:focus):not(:placeholder-shown) { border-color: var(--gd-color-danger); box-shadow: 0 0 0 3px var(--gd-color-danger-light); } /* Success states */ .contact__form-input:valid:not(:placeholder-shown), .contact__form-select:valid:not([value=""]), .contact__form-textarea:valid:not(:placeholder-shown) { border-color: var(--gd-color-success); } /* Disabled states */ .contact__form-input:disabled, .contact__form-select:disabled, .contact__form-textarea:disabled { background-color: var(--gd-color-gray-100); border-color: var(--gd-color-gray-200); color: var(--gd-color-gray-500); cursor: not-allowed; opacity: 0.7; } .contact__form-input:focus + .contact__form-label, .contact__form-select:focus + .contact__form-label, .contact__form-textarea:focus + .contact__form-label { color: var(--gd-color-primary-600); } .contact__form-input:hover, .contact__form-select:hover, .contact__form-textarea:hover { border-color: var(--gd-input-border-hover); } .contact__form-input:focus, .contact__form-select:focus, .contact__form-textarea:focus { outline: none; border-color: var(--gd-input-border-focus); box-shadow: var(--gd-input-shadow-focus); } .contact__form-textarea { resize: vertical; min-height: 140px; padding: var(--gd-space-4); line-height: 1.6; font-family: inherit; } .contact__form-select { cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; appearance: none; } /* Form Submit */ .contact__form-submit { display: flex; flex-direction: column; align-items: center; gap: var(--gd-space-4); } .contact__form-button { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-btn-padding-lg); background: var(--gd-gradient-primary); color: var(--gd-text-on-primary); border: none; border-radius: var(--gd-btn-radius); font-size: var(--gd-font-size-base); font-weight: var(--gd-btn-font-weight); cursor: pointer; transition: var(--gd-transition-base); min-width: 200px; justify-content: center; } .contact__form-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); } .contact__form-button:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .contact__form-button-icon { transition: var(--gd-transition-base); } .contact__form-button:hover .contact__form-button-icon { transform: translateX(2px); } /* Form Status */ .contact__form-status { display: flex; align-items: flex-start; gap: var(--gd-space-3); padding: var(--gd-space-4); border-radius: var(--gd-radius-lg); max-width: 400px; text-align: left; animation: contactSlideIn 0.5s ease-out; } .contact__form-status--success { background: var(--gd-color-success-light); border: 1px solid var(--gd-color-success); color: var(--gd-color-success-dark); } .contact__form-status--error { background: var(--gd-color-danger-light); border: 1px solid var(--gd-color-danger); color: var(--gd-color-danger-dark); } .contact__form-status-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; } .contact__form-status-title { font-weight: var(--gd-font-weight-semibold); margin: 0 0 var(--gd-space-1) 0; } .contact__form-status-text { font-size: var(--gd-font-size-sm); margin: 0; opacity: 0.9; } /* ===== CTA SECTION ===== */ .contact__cta { position: relative; padding: var(--gd-space-12); background: var(--gd-card-bg); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-2xl); overflow: hidden; box-shadow: var(--gd-shadow-base); } .contact__cta-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-gradient-hero); opacity: 0.05; border-radius: inherit; } .contact__cta-content { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--gd-space-8); z-index: 1; } .contact__cta-text { flex: 1; } .contact__cta-title { font-size: var(--gd-font-size-3xl); font-weight: var(--gd-font-weight-bold); color: var(--gd-text-primary); margin-bottom: var(--gd-space-2); line-height: var(--gd-line-height-tight); } .contact__cta-subtitle { font-size: var(--gd-font-size-lg); color: var(--gd-text-secondary); line-height: var(--gd-line-height-relaxed); margin: 0; } .contact__cta-actions { display: flex; gap: var(--gd-space-4); flex-shrink: 0; } .contact__cta-button { display: flex; align-items: center; gap: var(--gd-space-2); padding: var(--gd-btn-padding-base); border: none; border-radius: var(--gd-btn-radius); font-size: var(--gd-font-size-base); font-weight: var(--gd-btn-font-weight); cursor: pointer; transition: var(--gd-transition-base); text-decoration: none; white-space: nowrap; } .contact__cta-button--primary { background: var(--gd-gradient-primary); color: var(--gd-text-on-primary); box-shadow: var(--gd-shadow-primary); } .contact__cta-button--primary:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); } .contact__cta-button--secondary { background: transparent; color: var(--gd-color-primary-600); border: 1px solid var(--gd-color-primary-300); } .contact__cta-button--secondary:hover { background: var(--gd-color-primary-50); border-color: var(--gd-color-primary-500); transform: translateY(-1px); } /* ===== ANIMATIONS ===== */ @keyframes contactFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes contactSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes contactBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(-2px); } } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 1024px) { .contact__content { gap: var(--gd-space-12); } .contact__cta-content { flex-direction: column; text-align: center; gap: var(--gd-space-6); } .contact__cta-actions { justify-content: center; } } @media (max-width: 992px) { .contact__methods-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gd-space-5); } .contact__method { padding: var(--gd-space-6); min-height: 130px; } .contact__method-content { gap: var(--gd-space-2); } .contact__form-grid { grid-template-columns: 1fr; gap: var(--gd-space-6); margin-bottom: var(--gd-space-6); } .contact__form-group { gap: var(--gd-space-3); } } @media (max-width: 768px) { .contact { padding: var(--gd-space-16) 0; } .contact__title { font-size: var(--gd-font-size-4xl); } .contact__subtitle { font-size: var(--gd-font-size-lg); } .contact__methods-grid { grid-template-columns: 1fr; gap: var(--gd-space-4); } .contact__method { padding: var(--gd-space-6); min-height: 120px; } .contact__method-icon { width: 60px; height: 60px; } .contact__method-icon-text { font-size: var(--gd-font-size-xl); } .contact__method-title { font-size: var(--gd-font-size-lg); } .contact__form-section { padding: var(--gd-space-6); } .contact__form-grid { grid-template-columns: 1fr; gap: var(--gd-space-5); margin-bottom: var(--gd-space-6); } .contact__form-group { gap: var(--gd-space-3); } .contact__form-input, .contact__form-select, .contact__form-textarea { padding: var(--gd-space-3); min-height: 52px; font-size: var(--gd-font-size-base); } .contact__form-textarea { min-height: 130px; } .contact__form-title { font-size: var(--gd-font-size-xl); } .contact__cta { padding: var(--gd-space-8); } .contact__cta-title { font-size: var(--gd-font-size-2xl); } .contact__cta-subtitle { font-size: var(--gd-font-size-base); } .contact__cta-actions { flex-direction: column; width: 100%; } .contact__cta-button { justify-content: center; width: 100%; } } @media (max-width: 540px) { .contact__container { padding: 0 var(--gd-space-4); } .contact__header-badge { padding: var(--gd-space-1_5) var(--gd-space-3); } .contact__header-badge-text { font-size: var(--gd-font-size-xs); } .contact__title { font-size: var(--gd-font-size-3xl); } .contact__subtitle { font-size: var(--gd-font-size-base); } .contact__methods-grid { grid-template-columns: 1fr; gap: var(--gd-space-3); } .contact__method { flex-direction: row; text-align: left; gap: var(--gd-space-3); padding: var(--gd-space-5); min-height: 100px; align-items: center; } .contact__method-icon { width: 50px; height: 50px; margin-top: 0; } .contact__method-content { gap: var(--gd-space-1_5); padding-right: var(--gd-space-1); } .contact__method-title { font-size: var(--gd-font-size-base); } .contact__method-value { font-size: var(--gd-font-size-sm); } .contact__method-description { font-size: var(--gd-font-size-xs); } .contact__method-arrow { margin-top: 0; align-self: center; } .contact__form-section { padding: var(--gd-space-4); } .contact__form-button { min-width: auto; width: 100%; } .contact__cta { padding: var(--gd-space-6); } } /* ===== ACCESSIBILITY ===== */ @media (prefers-reduced-motion: reduce) { .contact__method--visible { animation: none; opacity: 1; transform: none; } .contact__header { animation: none; } .contact__header-badge-icon { animation: none; } .contact__form-status { animation: none; } } /* Focus styles for better accessibility */ .contact__method:focus-visible { outline: 2px solid var(--gd-color-primary-500); outline-offset: 2px; } .contact__form-button:focus-visible { outline: 2px solid var(--gd-color-primary-300); outline-offset: 2px; } .contact__cta-button:focus-visible { outline: 2px solid var(--gd-color-primary-500); outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { .contact__method { border-width: 2px; } .contact__form-input, .contact__form-select, .contact__form-textarea { border-width: 2px; } .contact__form-button, .contact__cta-button { border: 2px solid currentColor; } }/* Dashboard Sidebar Component */ .dashboard-sidebar { position: fixed; left: 0; top: 0; width: 280px; height: 100vh; background: linear-gradient(135deg, var(--gd-color-primary-900) 0%, var(--gd-color-primary-800) 100%); border-right: 1px solid var(--gd-border-strong); display: flex; flex-direction: column; z-index: var(--gd-z-fixed); box-shadow: var(--gd-shadow-lg); font-family: var(--gd-font-family-primary); } /* Header */ .dashboard-sidebar__header { padding: var(--gd-space-6); border-bottom: 1px solid var(--gd-border-strong); display: flex; align-items: center; justify-content: space-between; } .dashboard-sidebar__logo { display: flex; align-items: center; gap: var(--gd-space-3); } .dashboard-sidebar__logo-icon { font-size: var(--gd-font-size-2xl); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--gd-gradient-secondary); border-radius: var(--gd-radius-lg); box-shadow: var(--gd-shadow-secondary); } .dashboard-sidebar__logo-text { color: var(--gd-text-inverse); font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-semibold); margin: 0; letter-spacing: -0.02em; } .dashboard-sidebar__back-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--gd-text-inverse); width: 36px; height: 36px; border-radius: var(--gd-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--gd-font-size-lg); cursor: pointer; transition: var(--gd-transition-fast); backdrop-filter: blur(10px); } .dashboard-sidebar__back-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: translateX(-2px) scale(1.05); box-shadow: var(--gd-shadow-md); } /* Navigation */ .dashboard-sidebar__nav { flex: 1; padding: var(--gd-space-4) 0; } .dashboard-sidebar__nav-list { list-style: none; margin: 0; padding: 0; } .dashboard-sidebar__nav-item { margin: 0 var(--gd-space-3) var(--gd-space-2); } .dashboard-sidebar__nav-button { width: 100%; background: transparent; border: none; color: rgba(255, 255, 255, 0.7); padding: var(--gd-space-3_5) var(--gd-space-4); border-radius: var(--gd-radius-xl); display: flex; align-items: center; gap: var(--gd-space-3); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); cursor: pointer; transition: var(--gd-transition-fast); text-align: left; font-family: var(--gd-font-family-primary); position: relative; overflow: hidden; } .dashboard-sidebar__nav-button:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); transform: translateX(3px); backdrop-filter: blur(10px); } .dashboard-sidebar__nav-button--active { background: var(--gd-gradient-secondary); color: var(--gd-text-inverse); box-shadow: var(--gd-shadow-secondary); border: 1px solid rgba(255, 255, 255, 0.1); } .dashboard-sidebar__nav-button--active:hover { background: linear-gradient(135deg, var(--gd-color-secondary-400) 0%, var(--gd-color-secondary-600) 100%); transform: translateX(3px); box-shadow: var(--gd-shadow-lg); } .dashboard-sidebar__nav-icon { font-size: var(--gd-font-size-lg); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dashboard-sidebar__nav-label { flex: 1; } /* Footer */ .dashboard-sidebar__footer { padding: var(--gd-space-6); border-top: 1px solid var(--gd-border-strong); } .dashboard-sidebar__status { display: flex; align-items: center; gap: var(--gd-space-3); } .dashboard-sidebar__status-indicator { width: 10px; height: 10px; border-radius: var(--gd-radius-full); background: var(--gd-color-success); box-shadow: 0 0 10px var(--gd-color-success-light); animation: pulse-green 2s infinite; } .dashboard-sidebar__status-indicator--online { background: var(--gd-color-success); } .dashboard-sidebar__status-text { color: rgba(255, 255, 255, 0.8); font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); font-family: var(--gd-font-family-primary); } /* Animations */ @keyframes pulse-green { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } /* Responsive Design */ @media (max-width: 768px) { .dashboard-sidebar { width: 260px; transform: translateX(-100%); transition: transform var(--gd-transition-slow); } .dashboard-sidebar--open { transform: translateX(0); } .dashboard-sidebar__header { padding: var(--gd-space-4); } .dashboard-sidebar__logo-text { font-size: var(--gd-font-size-lg); } .dashboard-sidebar__nav-item { margin-bottom: var(--gd-space-1); } .dashboard-sidebar__nav-button { padding: var(--gd-space-3); font-size: var(--gd-font-size-sm); } .dashboard-sidebar__footer { padding: var(--gd-space-4); } } @media (max-width: 480px) { .dashboard-sidebar { width: 100%; } }/* Dashboard Overview Component */ .dashboard-overview { padding: 2rem; height: 100%; background: #f8fafc; overflow-y: auto; box-sizing: border-box; } /* Header */ .dashboard-overview__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; } .dashboard-overview__title h1 { color: #1f2937; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.25rem; } .dashboard-overview__title p { color: #6b7280; font-size: 0.9rem; margin: 0; line-height: 1.5; } .dashboard-overview__refresh-btn { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .dashboard-overview__refresh-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); } /* Stats Grid Layout */ .dashboard-overview__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; } .dashboard-overview__stat-section { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-overview__stat-section:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .dashboard-overview__section-title { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; color: #1f2937; font-size: 1.1rem; font-weight: 600; } .dashboard-overview__section-icon { font-size: 1.25rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 8px; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); } /* Compact Stat Grids */ .dashboard-overview__stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .dashboard-overview__stat-grid--wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .dashboard-overview__stat-grid--single { grid-template-columns: 1fr; max-width: 250px; } /* Compact Stat Cards */ .dashboard-overview__stat-card { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem; text-align: center; transition: all 0.2s ease; position: relative; overflow: hidden; min-height: 80px; display: flex; flex-direction: column; justify-content: center; } .dashboard-overview__stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4); opacity: 0; transition: opacity 0.2s ease; } .dashboard-overview__stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border-color: #cbd5e1; } .dashboard-overview__stat-card:hover::before { opacity: 1; } .dashboard-overview__stat-value { font-size: 1.75rem; font-weight: 700; color: #1f2937; margin: 0 0 0.25rem; line-height: 1; } .dashboard-overview__stat-value--success { color: #059669; } .dashboard-overview__stat-value--warning { color: #d97706; } .dashboard-overview__stat-value--error { color: #dc2626; } .dashboard-overview__stat-label { font-size: 0.75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; } /* Loading States */ .dashboard-overview--loading, .dashboard-overview--error, .dashboard-overview--unauthorized, .dashboard-overview--no-data { display: flex; align-items: center; justify-content: center; height: 100%; background: #f8fafc; } .dashboard-overview__loading, .dashboard-overview__error { text-align: center; background: white; border-radius: 16px; padding: 3rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; max-width: 400px; } .dashboard-overview__spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top: 3px solid #3b82f6; border-radius: 50%; margin: 0 auto 1rem; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .dashboard-overview__loading p, .dashboard-overview__error p { color: #6b7280; margin: 0; font-size: 1rem; } .dashboard-overview__error h2 { color: #dc2626; margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; } .dashboard-overview__retry-btn { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: all 0.2s ease; } .dashboard-overview__retry-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Footer */ .dashboard-overview__footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; text-align: center; } .dashboard-overview__footer p { color: #6b7280; font-size: 0.875rem; margin: 0; } /* Responsive Design */ @media (max-width: 1024px) { .dashboard-overview__stats { grid-template-columns: 1fr; gap: 1rem; } } @media (max-width: 768px) { .dashboard-overview { padding: 1rem; } .dashboard-overview__header { flex-direction: column; gap: 1rem; align-items: stretch; padding: 1.25rem; } .dashboard-overview__title h1 { font-size: 1.5rem; } .dashboard-overview__stat-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; } .dashboard-overview__stat-grid--wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .dashboard-overview__stat-card { padding: 0.875rem; min-height: 70px; } .dashboard-overview__stat-value { font-size: 1.5rem; } .dashboard-overview__section-title { font-size: 1rem; margin-bottom: 0.75rem; } .dashboard-overview__stats { gap: 1rem; } .dashboard-overview__stat-section { padding: 1rem; } } @media (max-width: 480px) { .dashboard-overview { padding: 0.75rem; } .dashboard-overview__header { padding: 1rem; } .dashboard-overview__stat-section { padding: 0.875rem; } .dashboard-overview__stat-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.5rem; } .dashboard-overview__stat-card { padding: 0.75rem; min-height: 65px; } .dashboard-overview__stat-value { font-size: 1.25rem; } .dashboard-overview__stat-label { font-size: 0.7rem; } .dashboard-overview__loading, .dashboard-overview__error { padding: 2rem; margin: 1rem; } }/* Dashboard Projects Component */ .dashboard-projects { padding: 1.5rem; min-height: 100vh; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%); overflow-y: auto; position: relative; } .dashboard-projects::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* Header */ .dashboard-projects__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 1.5rem 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .dashboard-projects__title h1 { background: linear-gradient(135deg, #1f2937 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.25rem; letter-spacing: -0.025em; } .dashboard-projects__title p { color: #64748b; font-size: 0.9rem; margin: 0; line-height: 1.5; opacity: 0.9; } .dashboard-projects__create-btn { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.625rem 1.25rem; border-radius: 14px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .dashboard-projects__create-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, #059669 0%, #047857 100%); } .dashboard-projects__create-btn--primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); padding: 1rem 2rem; font-size: 1rem; } .dashboard-projects__create-btn--primary:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); } /* Error Banner */ .dashboard-projects__error-banner { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #fecaca; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; color: #dc2626; font-weight: 500; } .dashboard-projects__error-banner button { background: none; border: none; color: var(--gd-color-danger); font-size: var(--gd-font-size-2xl); cursor: pointer; padding: 0; line-height: 1; transition: var(--gd-transition-fast); border-radius: var(--gd-radius-base); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .dashboard-projects__error-banner button:hover { background: var(--gd-color-danger); color: var(--gd-text-on-primary); transform: scale(1.1); } /* Bulk Actions */ .dashboard-projects__bulk-actions { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px; padding: 0.875rem 1.25rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .dashboard-projects__bulk-info { color: #6b7280; font-weight: 500; } .dashboard-projects__bulk-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .dashboard-projects__bulk-buttons button { background: rgba(248, 250, 252, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(203, 213, 225, 0.5); color: #374151; padding: 0.4rem 0.875rem; border-radius: 10px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } .dashboard-projects__bulk-buttons button:hover { background: rgba(229, 231, 235, 0.9); transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Content */ .dashboard-projects__content { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.7); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* Empty State */ .dashboard-projects__empty { text-align: center; padding: 3rem 1.5rem; } .dashboard-projects__empty-icon { font-size: 4rem; margin-bottom: 1rem; } .dashboard-projects__empty h3 { color: #1f2937; font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; } .dashboard-projects__empty p { color: #6b7280; margin: 0 0 2rem; } /* Table */ .dashboard-projects__table-container { overflow-x: auto; } .dashboard-projects__table { width: 100%; border-collapse: collapse; } .dashboard-projects__table th { background: rgba(248, 250, 252, 0.8); backdrop-filter: blur(10px); color: #475569; font-weight: 600; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(226, 232, 240, 0.6); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } .dashboard-projects__table td { padding: 0.875rem 1rem; border-bottom: 1px solid rgba(241, 245, 249, 0.8); vertical-align: top; } .dashboard-projects__table tr:hover { background: rgba(249, 250, 251, 0.6); backdrop-filter: blur(10px); } .dashboard-projects__row--selected { background: rgba(239, 246, 255, 0.8) !important; border-color: rgba(219, 234, 254, 0.8); } /* Project Info */ .dashboard-projects__project-info { display: flex; gap: 1rem; align-items: flex-start; } .dashboard-projects__project-image { width: 50px; height: 50px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .dashboard-projects__project-details h4 { color: #1f2937; font-size: 0.925rem; font-weight: 600; margin: 0 0 0.2rem; line-height: 1.3; } .dashboard-projects__project-details p { color: #64748b; font-size: 0.8rem; margin: 0; line-height: 1.4; opacity: 0.9; } /* Status */ .dashboard-projects__status { display: flex; flex-direction: column; gap: 0.5rem; } .dashboard-projects__badge { display: inline-block; padding: 0.2rem 0.625rem; border-radius: 12px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; backdrop-filter: blur(10px); } .dashboard-projects__badge--success { background: rgba(220, 252, 231, 0.9); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.2); } .dashboard-projects__badge--warning { background: rgba(254, 243, 199, 0.9); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.2); } .dashboard-projects__badge--featured { background: rgba(254, 243, 199, 0.9); color: #d97706; border: 1px solid rgba(217, 119, 6, 0.3); } /* Tags */ .dashboard-projects__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dashboard-projects__tag { background: rgba(243, 244, 246, 0.8); color: #6b7280; padding: 0.2rem 0.45rem; border-radius: 8px; font-size: 0.7rem; font-weight: 500; backdrop-filter: blur(10px); border: 1px solid rgba(209, 213, 219, 0.3); } .dashboard-projects__tag--more { background: var(--gd-surface-4); color: var(--gd-text-quaternary); font-weight: var(--gd-font-weight-semibold); } .dashboard-projects__tag--empty { opacity: 0.6; font-style: italic; } /* Actions */ .dashboard-projects__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .dashboard-projects__action-btn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(226, 232, 240, 0.6); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; font-size: 0.8rem; } .dashboard-projects__action-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .dashboard-projects__action-btn--edit:hover { background: #eff6ff; border-color: #3b82f6; } .dashboard-projects__action-btn--view:hover { background: #ecfdf5; border-color: #10b981; } .dashboard-projects__action-btn--code:hover { background: #f3f4f6; border-color: #6b7280; } .dashboard-projects__action-btn--delete:hover { background: #fef2f2; border-color: #ef4444; } /* Modal */ .dashboard-projects__modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-overlay-bg); backdrop-filter: blur(var(--gd-backdrop-blur)); -webkit-backdrop-filter: blur(var(--gd-backdrop-blur)); display: flex; align-items: center; justify-content: center; z-index: var(--gd-z-modal); padding: var(--gd-space-4); animation: modalOverlayFadeIn 0.3s ease-out; } .dashboard-projects__modal { background: var(--gd-modal-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid var(--gd-border-light); border-radius: var(--gd-modal-radius); width: 100%; max-width: 650px; max-height: 90vh; overflow: hidden; box-shadow: var(--gd-modal-shadow); animation: modalSlideIn 0.4s var(--gd-ease-bounce); position: relative; margin: var(--gd-space-6); } .dashboard-projects__modal-header { padding: var(--gd-space-8) var(--gd-space-10) var(--gd-space-6); border-bottom: 1px solid var(--gd-border-light); background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); backdrop-filter: blur(15px); display: flex; justify-content: space-between; align-items: center; position: relative; min-height: 70px; } .dashboard-projects__modal-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.5) 50%, transparent 100%); } .dashboard-projects__modal-header h2 { color: var(--gd-text-primary); font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-bold); margin: 0; background: linear-gradient(135deg, var(--gd-text-primary) 0%, var(--gd-color-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; letter-spacing: -0.025em; font-family: var(--gd-font-family-primary); } .dashboard-projects__modal-close { background: var(--gd-surface-2); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-xl); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--gd-font-size-lg); color: var(--gd-text-secondary); cursor: pointer; transition: var(--gd-transition-base); backdrop-filter: blur(15px); position: relative; overflow: hidden; } .dashboard-projects__modal-close::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; } .dashboard-projects__modal-close:hover { color: var(--gd-text-primary); background: var(--gd-color-danger-light); border-color: var(--gd-color-danger); transform: scale(1.05); } .dashboard-projects__modal-close:hover::before { left: 100%; } .dashboard-projects__modal-close:active { transform: scale(0.95); } /* Form */ .dashboard-projects__form { padding: var(--gd-space-10) var(--gd-space-9); background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%); max-height: calc(90vh - 140px); overflow-y: auto; position: relative; } .dashboard-projects__form::before { content: ''; position: absolute; top: 0; left: 3rem; right: 3rem; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.2) 50%, transparent 100%); } /* Custom scrollbar for form */ .dashboard-projects__form::-webkit-scrollbar { width: 6px; } .dashboard-projects__form::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; } .dashboard-projects__form::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.3); border-radius: 3px; } .dashboard-projects__form::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.5); } .dashboard-projects__form-group { margin-bottom: var(--gd-space-8); position: relative; animation: formGroupFadeIn 0.6s ease-out; animation-fill-mode: both; } .dashboard-projects__form-group:last-of-type { margin-bottom: 2.5rem; } .dashboard-projects__form-group:nth-child(1) { animation-delay: 0.1s; } .dashboard-projects__form-group:nth-child(2) { animation-delay: 0.2s; } .dashboard-projects__form-group:nth-child(3) { animation-delay: 0.3s; } .dashboard-projects__form-group:nth-child(4) { animation-delay: 0.4s; } .dashboard-projects__form-group:nth-child(5) { animation-delay: 0.5s; } .dashboard-projects__form-group:nth-child(6) { animation-delay: 0.6s; } .dashboard-projects__form-group:nth-child(7) { animation-delay: 0.7s; } .dashboard-projects__form-group label { display: block; color: var(--gd-text-secondary); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-3); font-size: var(--gd-font-size-sm); position: relative; padding-left: var(--gd-space-2_5); letter-spacing: 0.025em; font-family: var(--gd-font-family-primary); } .dashboard-projects__form-group label::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 18px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 2px; transform: translateY(-50%); opacity: 0.8; } .dashboard-projects__form-group input, .dashboard-projects__form-group textarea { width: 100%; padding: var(--gd-input-padding-base); border: 1.5px solid var(--gd-input-border); border-radius: var(--gd-input-radius); font-size: var(--gd-font-size-base); background: var(--gd-input-bg); backdrop-filter: blur(12px); transition: var(--gd-transition-base); position: relative; box-shadow: var(--gd-shadow-sm); font-family: var(--gd-font-family-primary); line-height: var(--gd-line-height-normal); color: var(--gd-text-primary); } .dashboard-projects__form-group input:focus, .dashboard-projects__form-group textarea:focus { outline: none; border-color: var(--gd-input-border-focus); background: var(--gd-input-bg); box-shadow: var(--gd-input-shadow-focus); transform: translateY(-2px) scale(1.01); } .dashboard-projects__form-group input:hover, .dashboard-projects__form-group textarea:hover { border-color: var(--gd-input-border-hover); box-shadow: var(--gd-shadow-md); transform: translateY(-1px); } .dashboard-projects__form-group textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.6; padding-top: 1rem; padding-bottom: 1rem; } .dashboard-projects__form-checkboxes { display: flex; gap: 2.5rem; margin-bottom: 2.5rem; padding: 1.5rem 2rem; background: rgba(248, 250, 252, 0.7); border: 1.5px solid rgba(226, 232, 240, 0.4); border-radius: 18px; backdrop-filter: blur(12px); position: relative; overflow: hidden; min-height: 70px; align-items: center; } .dashboard-projects__form-checkboxes::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.4) 50%, transparent 100%); } .dashboard-projects__form-checkboxes::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.2) 50%, transparent 100%); } .dashboard-projects__checkbox { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-weight: 500; color: #475569; padding: 0.75rem 1rem; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; font-size: 0.925rem; min-width: 120px; justify-content: flex-start; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(226, 232, 240, 0.6); } .dashboard-projects__checkbox:hover { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); } .dashboard-projects__checkbox input { width: 20px; height: 20px; margin: 0; accent-color: #3b82f6; transform: scale(1.2); cursor: pointer; border-radius: 4px; } .dashboard-projects__form-actions { display: flex; gap: 1.25rem; justify-content: flex-end; padding-top: 2rem; border-top: 1.5px solid rgba(226, 232, 240, 0.4); margin-top: 1.5rem; position: relative; min-height: 55px; align-items: center; } .dashboard-projects__form-actions::before { content: ''; position: absolute; top: 0; left: -3rem; right: -3rem; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.3) 50%, transparent 100%); } .dashboard-projects__btn { padding: var(--gd-btn-padding-base); border-radius: var(--gd-btn-radius); font-size: var(--gd-font-size-sm); font-weight: var(--gd-btn-font-weight); cursor: pointer; transition: var(--gd-btn-transition); border: 1.5px solid transparent; position: relative; overflow: hidden; backdrop-filter: blur(12px); min-width: 120px; min-height: 45px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.025em; font-family: var(--gd-font-family-primary); } .dashboard-projects__btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; } .dashboard-projects__btn--secondary { background: var(--gd-surface-2); color: var(--gd-text-primary); border-color: var(--gd-border-medium); backdrop-filter: blur(10px); box-shadow: var(--gd-shadow-base); } .dashboard-projects__btn--secondary:hover { background: var(--gd-surface-3); border-color: var(--gd-border-strong); transform: translateY(-3px) scale(1.02); box-shadow: var(--gd-shadow-lg); } .dashboard-projects__btn--secondary:hover::before { left: 100%; } .dashboard-projects__btn--primary { background: var(--gd-gradient-primary); color: var(--gd-text-on-primary); box-shadow: var(--gd-shadow-primary); border: 2px solid rgba(255, 255, 255, 0.15); } .dashboard-projects__btn--primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--gd-shadow-xl); background: linear-gradient(135deg, var(--gd-color-primary-600) 0%, var(--gd-color-primary-800) 100%); border-color: rgba(255, 255, 255, 0.2); } .dashboard-projects__btn--primary:hover::before { left: 100%; } .dashboard-projects__btn--primary:active { transform: translateY(-2px) scale(1.01); box-shadow: var(--gd-shadow-primary); } .dashboard-projects__btn--secondary:active { transform: translateY(-1px) scale(1.01); box-shadow: var(--gd-shadow-md); } /* Loading States */ .dashboard-projects--loading, .dashboard-projects--unauthorized { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--gd-bg-primary); font-family: var(--gd-font-family-primary); } .dashboard-projects__loading, .dashboard-projects__error { text-align: center; background: var(--gd-bg-elevated); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-12); box-shadow: var(--gd-shadow-xl); border: 1px solid var(--gd-border-light); max-width: 400px; backdrop-filter: blur(var(--gd-backdrop-blur)); } .dashboard-projects__spinner { width: 40px; height: 40px; border: 3px solid var(--gd-border-light); border-top: 3px solid var(--gd-color-primary); border-radius: var(--gd-radius-full); margin: 0 auto var(--gd-space-4); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes modalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes formGroupFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dashboard-projects__loading p, .dashboard-projects__error p { color: var(--gd-text-secondary); margin: 0; font-size: var(--gd-font-size-base); } .dashboard-projects__error h2 { color: var(--gd-color-danger); margin: 0 0 var(--gd-space-4); font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); } /* Responsive Design */ @media (max-width: 768px) { .dashboard-projects { padding: var(--gd-space-4); } .dashboard-projects__header { flex-direction: column; gap: 1rem; align-items: stretch; } .dashboard-projects__title h1 { font-size: var(--gd-font-size-2xl); } .dashboard-projects__bulk-actions { flex-direction: column; gap: var(--gd-space-4); align-items: stretch; } .dashboard-projects__bulk-buttons { justify-content: center; } .dashboard-projects__table-container { overflow-x: scroll; } .dashboard-projects__table { min-width: 700px; font-size: var(--gd-font-size-xs); } .dashboard-projects__project-info { flex-direction: column; align-items: flex-start; } .dashboard-projects__actions { flex-direction: row; justify-content: flex-start; } .dashboard-projects__modal { margin: 0; border-radius: var(--gd-radius-3xl) var(--gd-radius-3xl) 0 0; max-height: 95vh; max-width: none; box-shadow: var(--gd-shadow-2xl); } .dashboard-projects__form { padding: var(--gd-space-10) var(--gd-space-8); } .dashboard-projects__modal-header { padding: var(--gd-space-8) var(--gd-space-10) var(--gd-space-6); } .dashboard-projects__form-checkboxes { flex-direction: column; gap: var(--gd-space-6); padding: var(--gd-space-6) var(--gd-space-8); } .dashboard-projects__checkbox { min-width: auto; width: 100%; justify-content: flex-start; } .dashboard-projects__form-actions { flex-direction: column; gap: var(--gd-space-4); } .dashboard-projects__btn { width: 100%; min-width: auto; } } @media (max-width: 480px) { .dashboard-projects { padding: var(--gd-space-3); } .dashboard-projects__modal-header { padding: var(--gd-space-6) var(--gd-space-6) var(--gd-space-4); } .dashboard-projects__form { padding: var(--gd-space-8) var(--gd-space-6); } .dashboard-projects__form-checkboxes { padding: var(--gd-space-5) var(--gd-space-6); gap: var(--gd-space-4); } .dashboard-projects__checkbox { padding: var(--gd-space-3) var(--gd-space-4); font-size: var(--gd-font-size-sm); } .dashboard-projects__btn { padding: var(--gd-space-4) var(--gd-space-6); font-size: var(--gd-font-size-sm); } .dashboard-projects__bulk-buttons { flex-direction: column; } .dashboard-projects__project-details h4 { font-size: var(--gd-font-size-sm); } .dashboard-projects__project-details p { font-size: var(--gd-font-size-xs); } }/* Dashboard Articles Styles */ .dashboard-articles { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; background: var(--bg-color); color: var(--text-color); min-height: 100vh; } /* Header */ .dashboard-articles__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; gap: 2rem; } .dashboard-articles__title h1 { font-size: 2.5rem; font-weight: 700; margin: 0 0 0.5rem 0; background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .dashboard-articles__title p { color: var(--text-muted); font-size: 1.1rem; margin: 0; line-height: 1.5; } /* Create Button */ .dashboard-articles__create-btn { background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); color: var(--bg-color); border: none; padding: 1rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; font-size: 1rem; box-shadow: 0 4px 15px rgba(0, 191, 255, 0.3); } .dashboard-articles__create-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 191, 255, 0.4); } .dashboard-articles__create-btn--primary { font-size: 1.1rem; padding: 1.2rem 2rem; } /* Error Banner */ .dashboard-articles__error-banner { background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .dashboard-articles__error-banner button { background: none; border: none; color: #dc3545; font-size: 1.5rem; cursor: pointer; padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; } /* Bulk Actions */ .dashboard-articles__bulk-actions { background: rgba(0, 191, 255, 0.1); border: 1px solid rgba(0, 191, 255, 0.3); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .dashboard-articles__bulk-info { font-weight: 600; color: var(--accent-color); } .dashboard-articles__bulk-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .dashboard-articles__bulk-buttons button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-color); padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .dashboard-articles__bulk-buttons button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } /* Content Area */ .dashboard-articles__content { background: rgba(255, 255, 255, 0.05); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } /* Empty State */ .dashboard-articles__empty { text-align: center; padding: 4rem 2rem; color: var(--text-muted); } .dashboard-articles__empty-icon { font-size: 4rem; margin-bottom: 1rem; } .dashboard-articles__empty h3 { font-size: 1.5rem; margin: 0 0 0.5rem 0; color: var(--text-color); } .dashboard-articles__empty p { font-size: 1.1rem; margin: 0 0 2rem 0; } /* Table */ .dashboard-articles__table-container { overflow-x: auto; } .dashboard-articles__table { width: 100%; border-collapse: collapse; background: transparent; } .dashboard-articles__table th, .dashboard-articles__table td { padding: 1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dashboard-articles__table th { background: rgba(255, 255, 255, 0.05); font-weight: 600; color: var(--accent-color); position: sticky; top: 0; z-index: 10; } .dashboard-articles__table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } .dashboard-articles__row--selected { background: rgba(0, 191, 255, 0.1) !important; } /* Article Info */ .dashboard-articles__article-info { display: flex; gap: 1rem; align-items: flex-start; } .dashboard-articles__article-image { width: 60px; height: 40px; object-fit: cover; border-radius: 0.25rem; flex-shrink: 0; } .dashboard-articles__article-details h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem 0; color: var(--text-color); } .dashboard-articles__article-details p { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.5rem 0; line-height: 1.4; } /* Tags */ .dashboard-articles__tags { display: flex; gap: 0.25rem; flex-wrap: wrap; } .dashboard-articles__tag { background: rgba(0, 191, 255, 0.2); color: var(--accent-color); padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .dashboard-articles__tag--more { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); } .dashboard-articles__tag--empty { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); } /* Status and Badges */ .dashboard-articles__status { display: flex; flex-direction: column; gap: 0.25rem; } .dashboard-articles__badge { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; text-align: center; white-space: nowrap; display: inline-block; } .dashboard-articles__badge--success { background: rgba(40, 167, 69, 0.2); color: #28a745; } .dashboard-articles__badge--warning { background: rgba(255, 193, 7, 0.2); color: #ffc107; } .dashboard-articles__badge--featured { background: rgba(255, 165, 0, 0.2); color: #ffa500; } /* Category and Views */ .dashboard-articles__category { background: rgba(108, 117, 125, 0.2); color: #6c757d; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; } .dashboard-articles__views { color: var(--text-muted); font-size: 0.9rem; } /* Actions */ .dashboard-articles__actions { display: flex; gap: 0.5rem; } .dashboard-articles__action-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-color); padding: 0.5rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; } .dashboard-articles__action-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } .dashboard-articles__action-btn--edit:hover { background: rgba(0, 191, 255, 0.2); border-color: var(--accent-color); } .dashboard-articles__action-btn--view:hover { background: rgba(40, 167, 69, 0.2); border-color: #28a745; } .dashboard-articles__action-btn--delete:hover { background: rgba(220, 53, 69, 0.2); border-color: #dc3545; } /* Modal Overlay */ .dashboard-articles__modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; overflow-y: auto; animation: modalOverlayFadeIn 0.3s ease-out; } /* Modal */ .dashboard-articles__modal { background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); margin: auto; animation: modalSlideIn 0.3s ease-out; position: relative; } .dashboard-articles__modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); border-radius: 1rem 1rem 0 0; backdrop-filter: blur(10px); } .dashboard-articles__modal-header h2 { margin: 0; color: #ffffff; font-size: 1.5rem; font-weight: 600; background: linear-gradient(135deg, #00bfff, #1e90ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dashboard-articles__modal-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #cccccc; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; transition: all 0.3s ease; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; } .dashboard-articles__modal-close:hover { background: rgba(220, 53, 69, 0.2); border-color: #dc3545; color: #ffffff; transform: scale(1.1); } /* Form */ .dashboard-articles__form { padding: 2rem; background: #1a1a1a; border-radius: 0 0 1rem 1rem; } .dashboard-articles__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .dashboard-articles__form-group { margin-bottom: 1.5rem; } .dashboard-articles__form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #ffffff; font-size: 0.9rem; letter-spacing: 0.5px; } .dashboard-articles__form-group input, .dashboard-articles__form-group textarea, .dashboard-articles__form-group select { width: 100%; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; background: rgba(0, 0, 0, 0.3); color: #ffffff; font-family: inherit; transition: all 0.3s ease; backdrop-filter: blur(10px); } .dashboard-articles__form-group input:focus, .dashboard-articles__form-group textarea:focus, .dashboard-articles__form-group select:focus { outline: none; border-color: #00bfff; box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3), inset 0 0 10px rgba(0, 191, 255, 0.1); background: rgba(0, 0, 0, 0.4); } .dashboard-articles__form-group textarea { resize: vertical; min-height: 100px; } /* Checkboxes */ .dashboard-articles__form-checkboxes { display: flex; gap: 2rem; margin-bottom: 2rem; } .dashboard-articles__checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; color: #ffffff; padding: 0.5rem; border-radius: 0.5rem; transition: all 0.3s ease; } .dashboard-articles__checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #00bfff; cursor: pointer; } /* Form Actions */ .dashboard-articles__form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.2); margin-left: -2rem; margin-right: -2rem; margin-bottom: -2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; border-radius: 0 0 1rem 1rem; } .dashboard-articles__btn { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; } .dashboard-articles__btn--secondary { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .dashboard-articles__btn--secondary:hover { background: rgba(255, 255, 255, 0.2); } .dashboard-articles__btn--primary { background: linear-gradient(135deg, #00bfff, #1e90ff); color: #ffffff; box-shadow: 0 4px 15px rgba(0, 191, 255, 0.4); border: 1px solid rgba(0, 191, 255, 0.3); } .dashboard-articles__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 191, 255, 0.4); } /* Loading State */ .dashboard-articles--loading, .dashboard-articles--unauthorized { display: flex; align-items: center; justify-content: center; min-height: 50vh; } .dashboard-articles__loading { text-align: center; color: var(--text-muted); } .dashboard-articles__spinner { width: 3rem; height: 3rem; border: 3px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Modal Animations */ @keyframes modalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.8) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Error State */ .dashboard-articles__error { text-align: center; padding: 3rem; color: var(--text-muted); } .dashboard-articles__error h2 { color: #dc3545; margin-bottom: 1rem; } /* Responsive Design */ @media (max-width: 1200px) { .dashboard-articles { padding: 1.5rem; } .dashboard-articles__modal { max-width: 800px; } } @media (max-width: 768px) { .dashboard-articles { padding: 1rem; } .dashboard-articles__header { flex-direction: column; gap: 1rem; } .dashboard-articles__title h1 { font-size: 2rem; } .dashboard-articles__bulk-actions { flex-direction: column; gap: 1rem; } .dashboard-articles__form-row { grid-template-columns: 1fr; } .dashboard-articles__form-checkboxes { flex-direction: column; gap: 1rem; } .dashboard-articles__form-actions { flex-direction: column; } .dashboard-articles__table-container { font-size: 0.9rem; } .dashboard-articles__table th, .dashboard-articles__table td { padding: 0.75rem 0.5rem; } .dashboard-articles__article-info { flex-direction: column; gap: 0.5rem; } .dashboard-articles__article-image { width: 100%; height: 120px; object-fit: cover; } .dashboard-articles__actions { justify-content: center; } .dashboard-articles__modal-overlay { padding: 1rem; align-items: center; } .dashboard-articles__modal { margin-top: 1rem; } } @media (max-width: 480px) { .dashboard-articles__modal-header, .dashboard-articles__form { padding: 1rem; } .dashboard-articles__bulk-buttons { justify-content: center; } .dashboard-articles__bulk-buttons button { font-size: 0.8rem; padding: 0.4rem 0.8rem; } }/* Admin Dashboard Styles */ .admin-dashboard { height: 100vh; background: var(--gd-bg-primary); display: flex; position: relative; overflow: hidden; font-family: var(--gd-font-family-primary); color: var(--gd-text-primary); } /* Main Content Area */ .admin-dashboard__main { flex: 1; margin-left: 280px; height: 100vh; position: relative; overflow-x: hidden; overflow-y: auto; background: var(--gd-bg-secondary); } /* Unauthorized State */ .admin-dashboard--unauthorized { display: flex; align-items: center; justify-content: center; background: var(--gd-bg-primary); } .admin-dashboard__unauthorized { text-align: center; background: var(--gd-bg-elevated); border-radius: var(--gd-radius-2xl); padding: var(--gd-space-12); box-shadow: var(--gd-shadow-xl); border: 1px solid var(--gd-border-light); max-width: 400px; backdrop-filter: blur(var(--gd-backdrop-blur)); } .admin-dashboard__unauthorized-icon { font-size: var(--gd-font-size-6xl); margin-bottom: var(--gd-space-4); } .admin-dashboard__unauthorized h2 { color: var(--gd-color-danger); margin: 0 0 var(--gd-space-4); font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); } .admin-dashboard__unauthorized p { color: var(--gd-text-secondary); margin: 0 0 var(--gd-space-8); font-size: var(--gd-font-size-base); } .admin-dashboard__back-btn { background: var(--gd-gradient-primary); color: var(--gd-text-on-primary); border: none; padding: var(--gd-btn-padding-base); border-radius: var(--gd-btn-radius); font-size: var(--gd-font-size-sm); font-weight: var(--gd-btn-font-weight); cursor: pointer; transition: var(--gd-btn-transition); box-shadow: var(--gd-shadow-primary); font-family: var(--gd-font-family-primary); } .admin-dashboard__back-btn:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); background: linear-gradient(135deg, var(--gd-color-primary-600) 0%, var(--gd-color-primary-800) 100%); } /* Sections */ .admin-dashboard__section { background: var(--gd-bg-secondary); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-lg); padding: var(--gd-space-6); box-shadow: var(--gd-shadow-base); } .admin-dashboard__section h2 { font-size: var(--gd-font-size-xl); font-weight: var(--gd-font-weight-semibold); margin: 0 0 var(--gd-space-6) 0; color: var(--gd-text-primary); border-bottom: 2px solid var(--gd-color-primary); padding-bottom: var(--gd-space-2); } /* Info Grid */ .admin-dashboard__info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gd-space-4); } .admin-dashboard__info-item { display: flex; flex-direction: column; gap: var(--gd-space-2); } .admin-dashboard__info-item label { font-size: var(--gd-font-size-sm); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-secondary); text-transform: uppercase; letter-spacing: 0.025em; } .admin-dashboard__info-value { font-size: var(--gd-font-size-sm); color: var(--gd-text-primary); padding: var(--gd-space-2); background: var(--gd-bg-primary); border: 1px solid var(--gd-border-light); border-radius: var(--gd-radius-base); word-break: break-all; font-family: var(--gd-font-family-mono); } /* Status Badges */ .admin-dashboard__status-badge { display: inline-flex; align-items: center; padding: var(--gd-space-1) var(--gd-space-3); border-radius: var(--gd-radius-xl); font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); text-transform: uppercase; letter-spacing: 0.025em; backdrop-filter: blur(10px); } .admin-dashboard__status-badge.success { background: var(--gd-color-success-light); color: var(--gd-color-success); border: 1px solid var(--gd-color-success); } .admin-dashboard__status-badge.error { background: var(--gd-color-danger-light); color: var(--gd-color-danger); border: 1px solid var(--gd-color-danger); } .admin-dashboard__status-badge.warning { background: var(--gd-color-warning-light); color: var(--gd-color-warning); border: 1px solid var(--gd-color-warning); } .admin-dashboard__status-badge.admin { background: var(--gd-color-primary-100); color: var(--gd-color-primary-700); border: 1px solid var(--gd-color-primary-300); } .admin-dashboard__status-badge.user { background: var(--gd-color-secondary-100); color: var(--gd-color-secondary-700); border: 1px solid var(--gd-color-secondary-300); } /* User Details */ .admin-dashboard__user-details { display: flex; gap: var(--gd-space-6); align-items: flex-start; } .admin-dashboard__user-avatar { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--gd-radius-full); background: var(--gd-color-primary); display: flex; align-items: center; justify-content: center; border: 3px solid var(--gd-border-medium); box-shadow: var(--gd-shadow-md); } .admin-dashboard__user-initials { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-semibold); color: var(--gd-text-on-primary); } .admin-dashboard__user-info { flex: 1; } /* Empty States */ .admin-dashboard__no-user, .admin-dashboard__no-session { text-align: center; padding: var(--gd-space-8); color: var(--gd-text-secondary); font-style: italic; background: var(--gd-bg-tertiary); border-radius: var(--gd-radius-lg); border: 1px solid var(--gd-border-light); } /* Responsive Design */ @media (max-width: 768px) { .admin-dashboard__main { margin-left: 0; width: 100%; } .admin-dashboard__unauthorized { padding: var(--gd-space-8); margin: var(--gd-space-4); } .admin-dashboard__unauthorized-icon { font-size: var(--gd-font-size-5xl); } .admin-dashboard__unauthorized h2 { font-size: var(--gd-font-size-xl); } .admin-dashboard__back-btn { padding: var(--gd-btn-padding-sm); font-size: var(--gd-font-size-xs); } } @media (max-width: 480px) { .admin-dashboard__unauthorized { padding: var(--gd-space-6); margin: var(--gd-space-3); } .admin-dashboard__unauthorized-icon { font-size: var(--gd-font-size-4xl); } .admin-dashboard__back-btn { padding: var(--gd-space-2_5) var(--gd-space-4); font-size: var(--gd-font-size-xs); } }/* App.css - App-level layout and footer styles only */ /* Isolated to not affect Terrace page */ /* Simple Loading Spinner */ .app-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--gd-bg-primary); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.1); border-left-color: var(--gd-primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-spinner p { color: var(--gd-text-secondary); font-size: var(--gd-font-size-sm); margin: 0; } body:not(.terrace-page) .app { min-height: 100vh; width: 100vw; background: var(--gd-bg-primary); font-family: var(--gd-font-family-primary); line-height: var(--gd-line-height-normal); color: var(--gd-text-primary); } body:not(.terrace-page) .app__main { padding-top: var(--gd-nav-height); } /* Container utility for app-level elements */ body:not(.terrace-page) .app__container { max-width: var(--gd-container-max-width); margin: 0 auto; padding: 0 var(--gd-container-padding); } /* Theme indicator in footer */ body:not(.terrace-page) .app__theme-indicator { display: flex; align-items: center; gap: var(--gd-space-2); margin-top: var(--gd-space-3); padding: var(--gd-space-2) var(--gd-space-4); background: rgba(255, 255, 255, 0.1); border-radius: var(--gd-radius-lg); backdrop-filter: blur(10px); } body:not(.terrace-page) .app__theme-emoji { font-size: var(--gd-font-size-sm); } body:not(.terrace-page) .app__theme-name { font-size: var(--gd-font-size-xs); font-weight: var(--gd-font-weight-medium); color: var(--gd-text-secondary); } /* Footer */ body:not(.terrace-page) .app__footer { background: var(--gd-bg-darker); padding: var(--gd-space-16) 0 var(--gd-space-8); margin-top: var(--gd-space-20); } body:not(.terrace-page) .app__footer-content { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gd-space-12); margin-bottom: var(--gd-space-12); } body:not(.terrace-page) .app__footer-brand h3 { font-size: var(--gd-font-size-2xl); font-weight: var(--gd-font-weight-bold); margin-bottom: var(--gd-space-3); color: var(--gd-color-primary); } body:not(.terrace-page) .app__footer-brand p { color: var(--gd-text-secondary); margin: 0; } body:not(.terrace-page) .app__footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gd-space-8); } body:not(.terrace-page) .app__footer-section h4 { font-size: var(--gd-font-size-lg); font-weight: var(--gd-font-weight-semibold); margin-bottom: var(--gd-space-4); color: var(--gd-text-primary); } body:not(.terrace-page) .app__footer-section ul { list-style: none; padding: 0; margin: 0; } body:not(.terrace-page) .app__footer-section li { margin-bottom: var(--gd-space-2); } body:not(.terrace-page) .app__footer-section a { color: var(--gd-text-secondary); text-decoration: none; transition: var(--gd-transition-base); cursor: pointer; } body:not(.terrace-page) .app__footer-section a:hover { color: var(--gd-color-primary); } body:not(.terrace-page) .app__footer-bottom { text-align: center; padding-top: var(--gd-space-8); border-top: 1px solid var(--gd-border-light); color: var(--gd-text-muted); } /* Debug Panel */ body:not(.terrace-page) .app__debug { position: fixed; bottom: var(--gd-space-4); right: var(--gd-space-4); background: var(--gd-surface-raised); padding: var(--gd-space-4); border-radius: var(--gd-radius-lg); box-shadow: var(--gd-shadow-xl); z-index: var(--gd-z-tooltip); max-width: 300px; font-size: var(--gd-font-size-xs); } body:not(.terrace-page) .app__debug details { margin-bottom: var(--gd-space-2); } body:not(.terrace-page) .app__debug summary { cursor: pointer; font-weight: var(--gd-font-weight-medium); color: var(--gd-color-primary); } body:not(.terrace-page) .app__debug pre { background: var(--gd-surface-1); padding: var(--gd-space-2); border-radius: var(--gd-radius-base); overflow: auto; max-height: 200px; margin: var(--gd-space-2) 0 0; } /* Theme transition class */ body:not(.terrace-page) .theme-transition { transition: background-color 0.3s ease, color 0.3s ease; } body:not(.terrace-page) .app-loaded { /* Add any post-load styling here */ } /* Responsive Design */ @media (max-width: 1024px) { body:not(.terrace-page) .app__container { padding: 0 var(--gd-space-6); } body:not(.terrace-page) .app__footer-content { grid-template-columns: 1fr; gap: var(--gd-space-8); } } @media (max-width: 768px) { body:not(.terrace-page) .app__container { padding: 0 var(--gd-space-4); } body:not(.terrace-page) .app__footer-links { grid-template-columns: repeat(2, 1fr); } body:not(.terrace-page) .app__theme-indicator { flex-direction: column; gap: var(--gd-space-1); text-align: center; } } @media (max-width: 480px) { body:not(.terrace-page) .app__footer-links { grid-template-columns: 1fr; } body:not(.terrace-page) .app__debug { bottom: var(--gd-space-2); right: var(--gd-space-2); left: var(--gd-space-2); max-width: none; } } /* High contrast mode */ @media (prefers-contrast: high) { body:not(.terrace-page) .app__footer-section a { border-bottom: 1px solid transparent; } body:not(.terrace-page) .app__footer-section a:hover { border-bottom-color: var(--gd-color-primary); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { body:not(.terrace-page) .theme-transition { transition: none; } body:not(.terrace-page) .app__footer-section a { transition: none; } }/* components/auth/ProtectedRoute.css - BEM methodology styling */ .protected-route { display: flex; align-items: center; justify-content: center; min-height: 50vh; padding: 2rem; } .protected-route--loading { flex-direction: column; } .protected-route--unauthenticated { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; text-align: center; } .protected-route--unauthorized { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); border-radius: 12px; color: white; text-align: center; } .protected-route--profile-incomplete { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); border-radius: 12px; color: white; text-align: center; } .protected-route__container { max-width: 500px; margin: 0 auto; padding: 3rem 2rem; } .protected-route__title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: inherit; } .protected-route__message { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; opacity: 0.9; } .protected-route__user-info { font-size: 0.9rem; opacity: 0.8; margin-top: 1rem; } .protected-route__profile-info { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem; text-align: left; } .protected-route__profile-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: inherit; } .protected-route__progress-bar { background: rgba(255, 255, 255, 0.2); border-radius: 10px; height: 8px; margin-bottom: 1rem; overflow: hidden; } .protected-route__progress-fill { height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 10px; transition: width 0.3s ease; } .protected-route__completion-text { font-size: 0.9rem; opacity: 0.9; margin-bottom: 1rem; } .protected-route__missing-fields { list-style: none; padding: 0; margin: 0; } .protected-route__missing-field { background: rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.85rem; } .protected-route__action-button { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 0.75rem 1.5rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-block; margin-top: 1rem; } .protected-route__action-button:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-1px); } .protected-route__loading-spinner { margin-bottom: 1rem; } /* Responsive adjustments */ @media (max-width: 768px) { .protected-route { padding: 1rem; min-height: 40vh; } .protected-route__container { padding: 2rem 1.5rem; } .protected-route__title { font-size: 1.5rem; } .protected-route__message { font-size: 1rem; } } @media (max-width: 480px) { .protected-route__container { padding: 1.5rem 1rem; } .protected-route__title { font-size: 1.25rem; } .protected-route__profile-info { padding: 1rem; } }.terrace * { margin: 0; padding: 0; box-sizing: border-box; } .terrace { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #e0e0e0; width: 100%; background: #1a1a1a; } .terrace-bg-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #2c2c2c 0%, #1f1f1f 50%, #141414 100%); z-index: -2; } .terrace-bg-pattern::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(97, 218, 251, 0.08) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(97, 218, 251, 0.05) 1px, transparent 1px); background-size: 60px 60px, 40px 40px; animation: terrace-drift 20s ease-in-out infinite alternate; } @keyframes terrace-drift { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(10px) translateY(10px); } } .terrace-hero { min-height: 85vh; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; position: relative; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), url('https://cdndailyexcelsior.b-cdn.net/wp-content/uploads/2023/06/e.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } .terrace-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .terrace-hero-content { position: relative; z-index: 2; max-width: 1400px; color: white; padding-top: 80px; } .terrace-hero-logo { width: 80px; height: 80px; margin: 0; border-radius: 20px; background: rgba(255, 255, 255, 0.95); padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); flex-shrink: 0; } .terrace-hero-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; } .terrace-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.8rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .terrace-hero-subtitle { font-size: 1.1rem; margin-bottom: 0.8rem; font-weight: 300; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .terrace-hero-description { font-size: 0.85rem; margin-bottom: 0; opacity: 0.9; max-width: 500px; margin-left: 0; margin-right: 0; } .terrace-hero-main { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; margin-bottom: 3rem; } .terrace-hero-text { text-align: left; display: flex; align-items: center; gap: 1.5rem; } .terrace-hero-text-content { flex: 1; } .terrace-hero-actions { display: flex; flex-direction: column; gap: 1rem; min-width: 280px; } .terrace-cta-btn { padding: 1rem 2.2rem; font-size: 0.85rem; border: none; border-radius: 50px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; min-width: 200px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; } .terrace-cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; } .terrace-cta-btn:hover::before { left: 100%; } .terrace-cta-primary { background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); color: #1a1a1a; box-shadow: 0 6px 20px rgba(97, 218, 251, 0.4); border: 2px solid transparent; font-weight: 700; } .terrace-cta-primary::after { content: '→'; font-size: 1.2rem; font-weight: 900; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; } .terrace-cta-primary:hover::after { opacity: 1; transform: translateX(0); } .terrace-cta-secondary { background: rgba(255, 255, 255, 0.1); color: white; border: 2px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .terrace-cta-secondary::after { content: '✉'; font-size: 1.1rem; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; } .terrace-cta-secondary:hover::after { opacity: 1; transform: translateX(0); } .terrace-cta-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3); } .terrace-cta-primary:hover { background: linear-gradient(135deg, #87e8ff 0%, #3bb5d8 100%); box-shadow: 0 12px 35px rgba(97, 218, 251, 0.6); } .terrace-cta-secondary:hover { background: rgba(255, 255, 255, 0.2); border-color: white; color: white; } .terrace-cta-btn:active { transform: translateY(-2px) scale(0.98); transition: all 0.1s ease; } /* Hero Restaurant Preview Cards */ .terrace-hero-restaurants { margin-top: 2rem; } .terrace-restaurants-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .terrace-restaurant-preview-card { background: rgba(45, 45, 45, 0.95); border-radius: 12px; padding: 1.5rem; text-align: center; color: #e0e0e0; backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(97, 218, 251, 0.2); } .terrace-restaurant-preview-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); border-color: rgba(97, 218, 251, 0.4); } .terrace-preview-image { width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .terrace-preview-image img { width: 100%; height: 100%; object-fit: cover; } .terrace-restaurant-preview-card h3 { font-size: 0.9rem; font-weight: 700; color: #ffffff; margin-bottom: 0.5rem; } .terrace-restaurant-preview-card p { font-size: 0.75rem; color: #61dafb; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* About Section */ .terrace-about-section { padding: 6rem 2rem; max-width: 1400px; margin: 0 auto; background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 50%, #2a2a2a 100%); position: relative; } .terrace-about-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 15% 25%, rgba(97, 218, 251, 0.05) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.02) 0%, transparent 50%); pointer-events: none; z-index: 1; } .terrace-about-content { position: relative; z-index: 2; } .terrace-about-header { text-align: center; margin-bottom: 4rem; } .terrace-about-title { font-size: 3rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; position: relative; } .terrace-about-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 2px; } .terrace-about-subtitle { font-size: 1.3rem; color: #b0b0b0; max-width: 600px; margin: 0 auto; line-height: 1.6; } .terrace-about-main { display: flex; flex-direction: column; gap: 4rem; } .terrace-about-story { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; } .terrace-about-text h3 { font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 1.5rem; position: relative; } .terrace-about-text h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 2px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 1px; } .terrace-about-text p { font-size: 1rem; line-height: 1.8; color: #c0c0c0; margin-bottom: 1.5rem; } .terrace-about-text p:last-child { margin-bottom: 0; } .terrace-about-image { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); position: relative; } .terrace-about-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(211, 47, 47, 0.1) 0%, rgba(44, 62, 80, 0.1) 100%); z-index: 1; } .terrace-about-image img { width: 100%; height: 300px; object-fit: cover; transition: transform 0.3s ease; } .terrace-about-image:hover img { transform: scale(1.05); } .terrace-about-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 2rem 0; } .terrace-about-highlight-card { background: rgba(45, 45, 45, 0.8); border-radius: 16px; padding: 2rem; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); border: 1px solid rgba(97, 218, 251, 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; } .terrace-about-highlight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); transform: translateX(-100%); transition: transform 0.3s ease; } .terrace-about-highlight-card:hover::before { transform: translateX(0); } .terrace-about-highlight-card:hover { transform: translateY(-8px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); border-color: rgba(97, 218, 251, 0.4); } .terrace-highlight-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; } .terrace-about-highlight-card h4 { font-size: 1.2rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; } .terrace-about-highlight-card p { font-size: 0.9rem; color: #b0b0b0; line-height: 1.6; } .terrace-about-vision { background: linear-gradient(135deg, #333333 0%, #2a2a2a 100%); border-radius: 20px; padding: 3rem; position: relative; overflow: hidden; border: 1px solid rgba(97, 218, 251, 0.2); } .terrace-about-vision::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(97, 218, 251, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%); pointer-events: none; } .terrace-about-vision h3 { font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 1.5rem; text-align: center; position: relative; z-index: 2; } .terrace-about-vision h3::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 1px; } .terrace-about-vision > p { font-size: 1rem; line-height: 1.8; color: #c0c0c0; margin-bottom: 2rem; text-align: center; position: relative; z-index: 2; } .terrace-about-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; position: relative; z-index: 2; } .terrace-value-item { background: rgba(45, 45, 45, 0.8); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(97, 218, 251, 0.2); font-size: 0.9rem; line-height: 1.6; color: #c0c0c0; transition: all 0.3s ease; } .terrace-value-item:hover { background: rgba(55, 55, 55, 0.95); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); border-color: rgba(97, 218, 251, 0.4); } .terrace-value-item strong { color: #61dafb; font-weight: 600; } .terrace-restaurants-section { padding: 6rem 2rem; max-width: 1400px; margin: 0 auto; } .terrace-section-header { text-align: center; margin-bottom: 4rem; } .terrace-section-header h2 { font-size: 2.4rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; } .terrace-section-header p { font-size: 1rem; color: #b0b0b0; max-width: 600px; margin: 0 auto; } .terrace-restaurants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 3rem; margin-top: 3rem; } .terrace-restaurant-card { background: rgba(45, 45, 45, 0.95); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; border: 1px solid rgba(97, 218, 251, 0.2); } .terrace-restaurant-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); border-color: rgba(97, 218, 251, 0.4); } .terrace-card-image { height: 220px; position: relative; overflow: hidden; } .terrace-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .terrace-restaurant-card:hover .terrace-card-image img { transform: scale(1.05); } .terrace-card-logo { position: absolute; top: 15px; left: 15px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; padding: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .terrace-card-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .terrace-card-content { padding: 2rem; } .terrace-card-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin-bottom: 0.5rem; } .terrace-card-type { color: #61dafb; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 1rem; } .terrace-card-description { color: #b0b0b0; line-height: 1.7; margin-bottom: 1.5rem; } .terrace-card-features { list-style: none; } .terrace-card-features li { padding: 0.4rem 0; color: #c0c0c0; font-size: 0.85rem; border-bottom: 1px solid rgba(97, 218, 251, 0.2); } .terrace-card-features li:last-child { border-bottom: none; } .terrace-card-features li::before { content: ""; color: #61dafb; font-weight: bold; margin-right: 0.5rem; } .terrace-specialties-section { background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #333333 100%); color: white; padding: 8rem 2rem; text-align: center; position: relative; overflow: hidden; } .terrace-specialties-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(211, 47, 47, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(52, 73, 94, 0.2) 0%, transparent 50%), url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVKaRliWGCKolepaXMQSC5hhf4TKqLiUzCcg&s'); background-size: 600px 600px, 800px 800px, cover; background-position: left top, right bottom, center; opacity: 0.15; z-index: 1; animation: terrace-float 15s ease-in-out infinite; } @keyframes terrace-float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1deg); } } .terrace-specialties-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.02) 50%, transparent 51%), linear-gradient(-45deg, transparent 49%, rgba(255, 255, 255, 0.02) 50%, transparent 51%); background-size: 80px 80px; z-index: 1; opacity: 0.6; } .terrace-specialties-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; } .terrace-specialties-header { margin-bottom: 4rem; position: relative; } .terrace-specialties-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ecf0f1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); letter-spacing: -1px; position: relative; } .terrace-specialties-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 2px; box-shadow: 0 2px 4px rgba(97, 218, 251, 0.4); } .terrace-specialties-subtitle { font-size: 1.3rem; opacity: 0.9; font-weight: 300; line-height: 1.6; max-width: 600px; margin: 0 auto; color: #ecf0f1; } .terrace-specialties-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 4rem; } .terrace-specialty-item { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); padding: 2.5rem 2rem; border-radius: 20px; backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; text-align: left; } .terrace-specialty-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(97, 218, 251, 0.1) 0%, rgba(33, 160, 196, 0.05) 100%); opacity: 0; transition: opacity 0.4s ease; border-radius: 20px; } .terrace-specialty-item:hover::before { opacity: 1; } .terrace-specialty-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } .terrace-specialty-icon { flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; border: 2px solid rgba(255, 255, 255, 0.3); transition: all 0.4s ease; position: relative; overflow: hidden; } .terrace-specialty-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); opacity: 0; transition: opacity 0.4s ease; border-radius: 50%; } .terrace-specialty-item:hover .terrace-specialty-icon::before { opacity: 0.8; } .terrace-specialty-icon span { position: relative; z-index: 2; transition: all 0.4s ease; } .terrace-specialty-item:hover .terrace-specialty-icon { transform: rotate(10deg) scale(1.1); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 8px 25px rgba(97, 218, 251, 0.4); } .terrace-specialty-content { position: relative; z-index: 2; width: 100%; } .terrace-specialty-title { font-size: 1.4rem; font-weight: 700; color: #ffffff; margin-bottom: 0.8rem; transition: color 0.3s ease; line-height: 1.3; } .terrace-specialty-item:hover .terrace-specialty-title { color: #f8f9fa; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .terrace-specialty-description { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); transition: color 0.3s ease; } .terrace-specialty-item:hover .terrace-specialty-description { color: rgba(255, 255, 255, 0.95); } .terrace-contact-section { padding: 4rem 2rem 3rem; background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 50%, #2c2c2c 100%); position: relative; overflow: hidden; } .terrace-contact-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; opacity: 0.1; pointer-events: none; } .terrace-contact-content { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .terrace-contact-header { margin-bottom: 2.5rem; } .terrace-contact-title { font-size: 3rem; font-weight: 700; color: #ffffff; margin-bottom: 0.75rem; position: relative; } .terrace-contact-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 2px; } .terrace-contact-subtitle { font-size: 1.3rem; color: #b0b0b0; max-width: 600px; margin: 0 auto; line-height: 1.6; } .terrace-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .terrace-contact-card { background: rgba(45, 45, 45, 0.95); border-radius: 16px; padding: 1.8rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); border: 1px solid rgba(97, 218, 251, 0.2); position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; } .terrace-contact-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); transition: height 0.3s ease; } .terrace-contact-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border-color: rgba(97, 218, 251, 0.4); } .terrace-contact-card:hover::before { height: 6px; } .terrace-main-location::before { background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); } .terrace-lush-location::before { background: linear-gradient(135deg, #87e8ff 0%, #3bb5d8 100%); } .terrace-contact-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 2px solid #f1f3f4; } .terrace-contact-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #1a1a1a; font-weight: 600; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); border: 2px solid rgba(97, 218, 251, 0.3); } .terrace-main-location .terrace-contact-icon { border-color: rgba(97, 218, 251, 0.3); } .terrace-contact-card h3 { color: #ffffff; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.5px; margin: 0; } .terrace-contact-info { display: flex; flex-direction: column; gap: 0.8rem; } .terrace-contact-detail { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: 10px; background: rgba(35, 35, 35, 0.5); transition: all 0.3s ease; border-left: 3px solid transparent; } .terrace-contact-detail:hover { background: rgba(45, 45, 45, 0.8); border-left-color: #61dafb; transform: translateX(5px); } .terrace-main-location .terrace-contact-detail:hover { border-left-color: #61dafb; } .terrace-detail-icon { font-size: 1.2rem; width: 24px; text-align: center; margin-top: 2px; flex-shrink: 0; } .terrace-contact-detail div { flex: 1; } .terrace-contact-detail strong { display: block; color: #ffffff; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; } .terrace-contact-detail p { color: #b0b0b0; margin: 0; line-height: 1.5; font-size: 0.95rem; } .terrace-contact-actions { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; } .terrace-contact-btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.6rem; border-radius: 50px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; position: relative; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); min-width: 200px; justify-content: center; } .terrace-contact-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); transition: left 0.5s ease; } .terrace-contact-btn:hover::before { left: 0; } .terrace-contact-primary { background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); color: #1a1a1a; font-weight: 700; } .terrace-contact-primary:hover { background: linear-gradient(135deg, #87e8ff 0%, #3bb5d8 100%); box-shadow: 0 15px 40px rgba(97, 218, 251, 0.4); transform: translateY(-3px); } .terrace-contact-secondary { background: linear-gradient(135deg, #87e8ff 0%, #3bb5d8 100%); color: #1a1a1a; font-weight: 700; } .terrace-contact-secondary:hover { background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); box-shadow: 0 15px 40px rgba(97, 218, 251, 0.4); transform: translateY(-3px); } .terrace-btn-icon { font-size: 1.1rem; transition: transform 0.3s ease; } .terrace-contact-btn:hover .terrace-btn-icon { transform: scale(1.2); } .terrace-btn-text { font-weight: 600; } .terrace-navbar { position: fixed; top: 0; width: 100%; background: rgba(26, 26, 26, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0; z-index: 100; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(97, 218, 251, 0.2); transform: translateY(0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; } .terrace-navbar.visible { transform: translateY(0); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); opacity: 1; } .terrace-navbar-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 3rem; position: relative; } .terrace-navbar-logo { font-weight: 800; color: #61dafb; font-size: 1.3rem; letter-spacing: -0.5px; position: relative; text-transform: uppercase; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .terrace-navbar-logo::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .terrace-navbar-logo:hover::after { width: 100%; } .terrace-navbar-links { display: flex; gap: 0; background: rgba(45, 45, 45, 0.8); border-radius: 50px; padding: 0.5rem; backdrop-filter: blur(10px); border: 1px solid rgba(97, 218, 251, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .terrace-navbar-links a { color: #c0c0c0; text-decoration: none; font-weight: 600; font-size: 0.8rem; padding: 0.7rem 1.3rem; border-radius: 25px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; overflow: hidden; } .terrace-navbar-links a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #61dafb 0%, #21a0c4 100%); border-radius: 25px; transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: -1; } .terrace-navbar-links a:hover::before { left: 0; } .terrace-navbar-links a:hover { color: #1a1a1a; font-weight: 700; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(97, 218, 251, 0.3); } .terrace-navbar-links a:active { transform: translateY(-1px); transition: all 0.1s ease; } /* Elegant separator between nav items */ .terrace-navbar-links a:not(:last-child)::after { content: ''; position: absolute; right: -0.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); opacity: 0.3; transition: opacity 0.3s ease; } .terrace-navbar-links a:hover::after, .terrace-navbar-links a:hover+a::after { opacity: 0; } .terrace { scroll-behavior: smooth; } @media (max-width: 768px) { .terrace-hero { padding: 1rem; } .terrace-hero-content { padding-top: 100px; } .terrace-hero h1 { font-size: 1.7rem; } .terrace-hero-subtitle { font-size: 1rem; } .terrace-hero-description { font-size: 0.8rem; } .terrace-hero-main { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .terrace-hero-text { text-align: center; flex-direction: column; gap: 1.5rem; } .terrace-hero-logo { margin: 0 auto; } .terrace-hero-actions { min-width: auto; align-items: center; } .terrace-restaurants-preview { grid-template-columns: 1fr; gap: 1rem; } .terrace-restaurant-preview-card { padding: 1rem; } .terrace-restaurants-grid { grid-template-columns: 1fr; } .terrace-contact-section { padding: 3rem 1rem 2rem; } .terrace-contact-header { margin-bottom: 1.5rem; } .terrace-contact-title { font-size: 2.2rem; margin-bottom: 0.5rem; } .terrace-contact-subtitle { font-size: 1rem; padding: 0 1rem; } .terrace-contact-grid { grid-template-columns: 1fr; gap: 1.2rem; margin: 1.5rem 0; } .terrace-contact-card { padding: 1.5rem; } .terrace-contact-card-header { flex-direction: column; text-align: center; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; } .terrace-contact-icon { width: 50px; height: 50px; font-size: 1.5rem; } .terrace-contact-card h3 { font-size: 1.2rem; } .terrace-contact-detail { padding: 0.75rem; } .terrace-contact-detail strong { font-size: 0.8rem; } .terrace-contact-detail p { font-size: 0.85rem; } .terrace-contact-actions { flex-direction: column; align-items: center; margin-top: 1.5rem; gap: 0.8rem; } .terrace-contact-btn { width: 100%; max-width: 280px; padding: 0.9rem 1.5rem; font-size: 0.9rem; } .terrace-specialties-section { padding: 4rem 1rem; } .terrace-specialties-title { font-size: 2.5rem; line-height: 1.2; } .terrace-specialties-subtitle { font-size: 1.1rem; padding: 0 1rem; } .terrace-specialties-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; } .terrace-specialty-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; text-align: center; padding: 2rem 1.5rem; gap: 1.2rem; justify-items: center; } .terrace-specialty-icon { width: 70px; height: 70px; font-size: 1.8rem; } .terrace-specialty-title { font-size: 1.2rem; } .terrace-specialty-description { font-size: 0.9rem; } .terrace-navbar-content { padding: 0.6rem 1.5rem; } .terrace-navbar-logo { font-size: 1.1rem; } .terrace-navbar-links { background: rgba(255, 255, 255, 0.95); padding: 0.3rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .terrace-navbar-links a { padding: 0.6rem 1rem; font-size: 0.75rem; letter-spacing: 0.3px; } .terrace-navbar-links a:not(:last-child)::after { display: none; } /* About Section Mobile */ .terrace-about-section { padding: 4rem 1rem; } .terrace-about-header { margin-bottom: 3rem; } .terrace-about-title { font-size: 2.2rem; margin-bottom: 0.8rem; } .terrace-about-subtitle { font-size: 1.1rem; padding: 0 1rem; } .terrace-about-main { gap: 3rem; } .terrace-about-story { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .terrace-about-text h3 { font-size: 1.5rem; margin-bottom: 1rem; } .terrace-about-text p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.2rem; } .terrace-about-image img { height: 250px; } .terrace-about-highlights { grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0 1rem; } .terrace-about-highlight-card { padding: 1.5rem; } .terrace-highlight-icon { font-size: 2rem; margin-bottom: 0.8rem; } .terrace-about-highlight-card h4 { font-size: 1.1rem; margin-bottom: 0.8rem; } .terrace-about-highlight-card p { font-size: 0.85rem; } .terrace-about-vision { padding: 2rem 1.5rem; } .terrace-about-vision h3 { font-size: 1.5rem; margin-bottom: 1rem; } .terrace-about-vision > p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; } .terrace-about-values { grid-template-columns: 1fr; gap: 1rem; } .terrace-value-item { padding: 1.2rem; font-size: 0.85rem; } }/* SoulFit Gym Website Styles */ /* CSS Isolation - All styles scoped to soulfit-page body class */ body.soulfit-page { margin: 0; padding: 0; font-family: 'Arial', 'Helvetica', sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: #fff; overflow-x: hidden; } /* Container */ .soulfit-container { width: 100%; min-height: 100vh; } /* Navigation */ .soulfit-navbar { position: fixed; top: -80px; left: 0; right: 0; background: rgba(30, 60, 114, 0.95); backdrop-filter: blur(20px); z-index: 1000; transition: top 0.3s ease-in-out; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .soulfit-navbar-visible { top: 0; } .soulfit-navbar-content { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } .soulfit-logo { font-size: 1.8rem; font-weight: bold; color: #ff6b35; } .soulfit-nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 2rem; } .soulfit-nav-links li { margin: 0; } .soulfit-nav-links button { background: none; border: none; color: #e0e8f0; cursor: pointer; font-size: 1rem; padding: 0.5rem 1rem; border-radius: 5px; transition: all 0.3s ease; } .soulfit-nav-links button:hover, .soulfit-nav-links button.soulfit-active { color: #ff6b35; background: rgba(255, 107, 53, 0.1); } /* Section Styles */ .soulfit-home-section, .soulfit-about-section, .soulfit-equipment-section, .soulfit-packages-section, .soulfit-contact-section { min-height: 100vh; padding: 6rem 2rem 4rem; max-width: 1200px; margin: 0 auto; } .soulfit-section-content { max-width: 1200px; margin: 0 auto; } .soulfit-section-header, .soulfit-about-header { text-align: center; margin-bottom: 4rem; } .soulfit-section-title { font-size: 3rem; margin-bottom: 1rem; color: #fff; font-weight: bold; } .soulfit-section-subtitle { font-size: 1.2rem; color: #e0e8f0; max-width: 600px; margin: 0 auto; } /* Home Section */ .soulfit-hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 6rem; } .soulfit-hero-text h1.soulfit-hero-title { font-size: 3.5rem; margin-bottom: 1rem; color: #fff; line-height: 1.2; } .soulfit-hero-subtitle { font-size: 1.5rem; color: #ff6b35; margin-bottom: 1.5rem; font-weight: 600; } .soulfit-hero-description { font-size: 1.1rem; color: #e0e8f0; line-height: 1.6; margin-bottom: 2rem; } .soulfit-hero-buttons { display: flex; gap: 1rem; } .soulfit-cta-primary, .soulfit-cta-secondary { padding: 1rem 2rem; border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .soulfit-cta-primary { background: linear-gradient(45deg, #ff6b35, #f7931e); color: #fff; } .soulfit-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3); } .soulfit-cta-secondary { background: transparent; color: #e0e8f0; border: 2px solid #e0e8f0; } .soulfit-cta-secondary:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .soulfit-hero-image img { width: 100%; height: 400px; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* Features Preview */ .soulfit-features-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .soulfit-feature-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); padding: 2rem; border-radius: 15px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .soulfit-feature-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .soulfit-feature-icon { font-size: 3rem; margin-bottom: 1rem; } .soulfit-feature-card h3 { color: #ff6b35; margin-bottom: 1rem; font-size: 1.3rem; } .soulfit-feature-card p { color: #e0e8f0; line-height: 1.6; } /* About Section */ .soulfit-about-section { background: linear-gradient(135deg, rgba(30, 60, 114, 0.8) 0%, rgba(42, 82, 152, 0.8) 100%); } .soulfit-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 4rem; } .soulfit-about-story h3, .soulfit-about-mission h3 { color: #ff6b35; font-size: 1.8rem; margin-bottom: 1.5rem; } .soulfit-about-story p, .soulfit-mission-list { color: #e0e8f0; line-height: 1.7; margin-bottom: 1rem; } .soulfit-mission-list { padding-left: 0; list-style: none; } .soulfit-mission-list li { padding: 0.5rem 0; padding-left: 1.5rem; position: relative; } .soulfit-mission-list li:before { content: ""; color: #ff6b35; font-weight: bold; position: absolute; left: 0; } /* Stats */ .soulfit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; } .soulfit-stat-item { text-align: center; padding: 2rem 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 15px; backdrop-filter: blur(20px); } .soulfit-stat-number { font-size: 3rem; font-weight: bold; color: #ff6b35; margin-bottom: 0.5rem; } .soulfit-stat-label { color: #e0e8f0; font-size: 1rem; } /* Equipment Section */ .soulfit-equipment-section { background: linear-gradient(135deg, rgba(42, 82, 152, 0.8) 0%, rgba(30, 60, 114, 0.8) 100%); } .soulfit-equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; } .soulfit-equipment-card { background: rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .soulfit-equipment-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); } .soulfit-equipment-card img { width: 100%; height: 250px; object-fit: cover; } .soulfit-equipment-content { padding: 2rem; } .soulfit-equipment-content h3 { color: #ff6b35; font-size: 1.5rem; margin-bottom: 1rem; } .soulfit-equipment-content ul { list-style: none; padding: 0; color: #e0e8f0; } .soulfit-equipment-content li { padding: 0.5rem 0; padding-left: 1.5rem; position: relative; } .soulfit-equipment-content li:before { content: ""; color: #ff6b35; position: absolute; left: 0; } /* Packages Section */ .soulfit-packages-section { background: linear-gradient(135deg, rgba(30, 60, 114, 0.9) 0%, rgba(42, 82, 152, 0.9) 100%); } .soulfit-packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3rem; } .soulfit-package-card { background: rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2.5rem 2rem; text-align: center; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; } .soulfit-package-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); } .soulfit-package-featured { border: 2px solid #ff6b35; transform: scale(1.05); } .soulfit-package-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(45deg, #ff6b35, #f7931e); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; } .soulfit-package-header h3 { color: #ff6b35; font-size: 1.8rem; margin-bottom: 1rem; } .soulfit-package-price { margin-bottom: 2rem; } .soulfit-price { font-size: 2.5rem; font-weight: bold; color: #fff; } .soulfit-period { color: #e0e8f0; font-size: 1rem; } .soulfit-package-features ul { list-style: none; padding: 0; margin-bottom: 2rem; text-align: left; } .soulfit-package-features li { padding: 0.8rem 0; color: #e0e8f0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .soulfit-package-features li:last-child { border-bottom: none; } .soulfit-package-btn { width: 100%; padding: 1rem; background: transparent; border: 2px solid #ff6b35; color: #ff6b35; border-radius: 50px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; } .soulfit-package-btn:hover { background: #ff6b35; color: #fff; } .soulfit-package-btn-featured { background: linear-gradient(45deg, #ff6b35, #f7931e); color: #fff; border: none; } .soulfit-package-note { text-align: center; color: #e0e8f0; font-style: italic; margin-top: 2rem; } /* Contact Section */ .soulfit-contact-section { background: linear-gradient(135deg, rgba(42, 82, 152, 0.9) 0%, rgba(30, 60, 114, 0.9) 100%); } .soulfit-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .soulfit-contact-info { display: flex; flex-direction: column; gap: 2rem; } .soulfit-contact-card { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } .soulfit-contact-icon { font-size: 2rem; margin-bottom: 1rem; } .soulfit-contact-card h3 { color: #ff6b35; margin-bottom: 1rem; font-size: 1.3rem; } .soulfit-contact-card p { color: #e0e8f0; line-height: 1.6; } /* Contact Form */ .soulfit-contact-form { background: rgba(255, 255, 255, 0.1); padding: 3rem; border-radius: 20px; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } .soulfit-form-group { margin-bottom: 1.5rem; } .soulfit-form-input { width: 100%; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); border-radius: 10px; color: #fff; font-size: 1rem; transition: all 0.3s ease; box-sizing: border-box; } .soulfit-form-input:focus { outline: none; border-color: #ff6b35; background: rgba(255, 255, 255, 0.15); } .soulfit-form-input::placeholder { color: #b0c4de; } .soulfit-form-textarea { min-height: 120px; resize: vertical; } .soulfit-form-submit { width: 100%; padding: 1rem 2rem; background: linear-gradient(45deg, #ff6b35, #f7931e); color: #fff; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; } .soulfit-form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3); } /* Social Links */ .soulfit-social-links { text-align: center; margin-top: 4rem; } .soulfit-social-links h3 { color: #ff6b35; margin-bottom: 1.5rem; font-size: 1.5rem; } .soulfit-social-icons { display: flex; justify-content: center; gap: 2rem; } .soulfit-social-link { display: inline-block; padding: 1rem 2rem; background: rgba(255, 255, 255, 0.1); color: #e0e8f0; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } .soulfit-social-link:hover { background: #ff6b35; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3); } /* Animations */ .soulfit-animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .soulfit-animate-in { opacity: 1; transform: translateY(0); } /* Add staggered animation delays */ .soulfit-animate-on-scroll:nth-child(1) { transition-delay: 0.1s; } .soulfit-animate-on-scroll:nth-child(2) { transition-delay: 0.2s; } .soulfit-animate-on-scroll:nth-child(3) { transition-delay: 0.3s; } .soulfit-animate-on-scroll:nth-child(4) { transition-delay: 0.4s; } .soulfit-animate-on-scroll:nth-child(5) { transition-delay: 0.5s; } .soulfit-animate-on-scroll:nth-child(6) { transition-delay: 0.6s; } /* Responsive Design */ @media (max-width: 768px) { .soulfit-navbar-content { padding: 1rem; flex-direction: column; gap: 1rem; } .soulfit-nav-links { gap: 1rem; justify-content: center; } .soulfit-hero-content { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .soulfit-hero-text h1.soulfit-hero-title { font-size: 2.5rem; } .soulfit-section-title { font-size: 2rem; } .soulfit-features-preview, .soulfit-equipment-grid, .soulfit-packages-grid { grid-template-columns: 1fr; } .soulfit-about-grid, .soulfit-contact-grid { grid-template-columns: 1fr; gap: 2rem; } .soulfit-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .soulfit-hero-buttons { flex-direction: column; align-items: center; } .soulfit-social-icons { flex-direction: column; align-items: center; } .soulfit-home-section, .soulfit-about-section, .soulfit-equipment-section, .soulfit-packages-section, .soulfit-contact-section { padding: 4rem 1rem 3rem; } .soulfit-package-featured { transform: none; } .soulfit-contact-form { padding: 2rem; } }