/* Lightbox styles */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); } .lightbox.open { display: flex; } .lightbox-topbar { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 1001; } .lightbox-counter { font-size: 14px; opacity: 0.9; } .lightbox-close, .lightbox-nav { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; cursor: pointer; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(0,0,0,0.75); } .lightbox-content-wrapper { display: flex; align-items: center; gap: 10px; width: min(92vw, 1100px); } .lightbox-content { flex: 1; max-height: 90vh; overflow: hidden; cursor: grab; background: rgba(0,0,0,0.2); border-radius: 10px; } .lightbox-content.grabbing { cursor: grabbing; } .lightbox-img { max-width: 100%; max-height: 90vh; width: 100%; height: auto; object-fit: contain; transform: translate(0,0) scale(1); will-change: transform; user-select: none; } /* Thumbnails */ .thumbnail-strip { display: flex; gap: .5rem; margin-top: .5rem; } .thumbnail { width: 80px; height: 80px; object-fit: cover; border: 2px solid transparent; cursor: pointer; } .thumbnail.active { border-color: #ff6a00; } /* Cart item thumbnail sizing */ .cart-item { display: flex; gap: 12px; align-items: center; } .cart-item-image { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; } .cart-item-image img, .cart-item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } /* Currency selector inherits language styles */ .language-selector.currency-selector { margin-left: 12px; } .language-selector.currency-selector .language-toggle { display: flex; align-items: center; gap: 6px; } .language-selector.currency-selector .lang-flag { font-size: 16px; } .language-selector.currency-selector .lang-name { font-size: 14px; opacity: 0.9; } /* Ensure product image fills container */ .product-image img, .product-img { width: 100%; height: 100%; object-fit: cover; display: block; } :root { /* Primitive Color Tokens */ --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-cream-50: rgba(252, 252, 249, 1); --color-cream-100: rgba(255, 255, 253, 1); --color-gray-200: rgba(245, 245, 245, 1); --color-gray-300: rgba(167, 169, 169, 1); --color-gray-400: rgba(119, 124, 124, 1); --color-slate-500: rgba(98, 108, 113, 1); --color-brown-600: rgba(94, 82, 64, 1); --color-charcoal-700: rgba(31, 33, 33, 1); --color-charcoal-800: rgba(38, 40, 40, 1); --color-slate-900: rgba(19, 52, 59, 1); --color-teal-300: rgba(50, 184, 198, 1); --color-teal-400: rgba(45, 166, 178, 1); --color-teal-500: rgba(33, 128, 141, 1); --color-teal-600: rgba(29, 116, 128, 1); --color-teal-700: rgba(26, 104, 115, 1); --color-teal-800: rgba(41, 150, 161, 1); --color-red-400: rgba(255, 84, 89, 1); --color-red-500: rgba(192, 21, 47, 1); --color-orange-400: rgba(230, 129, 97, 1); --color-orange-500: rgba(168, 75, 47, 1); /* RGB versions for opacity control */ --color-brown-600-rgb: 94, 82, 64; --color-teal-500-rgb: 33, 128, 141; --color-slate-900-rgb: 19, 52, 59; --color-slate-500-rgb: 98, 108, 113; --color-red-500-rgb: 192, 21, 47; --color-red-400-rgb: 255, 84, 89; --color-orange-500-rgb: 168, 75, 47; --color-orange-400-rgb: 230, 129, 97; /* Background color tokens (Light Mode) */ --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */ --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */ --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */ --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */ --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */ --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */ --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */ --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */ /* Semantic Color Tokens (Light Mode) */ --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100); --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500); --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700); --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); --color-border: rgba(var(--color-brown-600-rgb), 0.2); --color-btn-primary-text: var(--color-cream-50); --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500); --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); /* Common style patterns */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for opacity control */ --color-success-rgb: 33, 128, 141; --color-error-rgb: 192, 21, 47; --color-warning-rgb: 168, 75, 47; --color-info-rgb: 98, 108, 113; /* Typography */ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-4xl: 30px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 550; --font-weight-bold: 600; --line-height-tight: 1.2; --line-height-normal: 1.5; --letter-spacing-tight: -0.01em; /* Spacing */ --space-0: 0; --space-1: 1px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; /* Border Radius */ --radius-sm: 6px; --radius-base: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03); /* Animation */ --duration-fast: 150ms; --duration-normal: 250ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; } /* Dark mode colors */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media (prefers-color-scheme: dark) { :root { /* RGB versions for opacity control (Dark Mode) */ --color-gray-400-rgb: 119, 124, 124; --color-teal-300-rgb: 50, 184, 198; --color-gray-300-rgb: 167, 169, 169; --color-gray-200-rgb: 245, 245, 245; /* Background color tokens (Dark Mode) */ --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */ --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */ --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */ --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */ --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */ --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */ --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */ --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */ /* Semantic Color Tokens (Dark Mode) */ --color-background: var(--color-charcoal-700); --color-surface: var(--color-charcoal-800); --color-text: var(--color-gray-200); --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); --color-primary: var(--color-teal-300); --color-primary-hover: var(--color-teal-400); --color-primary-active: var(--color-teal-800); --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); --color-border: rgba(var(--color-gray-400-rgb), 0.3); --color-error: var(--color-red-400); --color-success: var(--color-teal-300); --color-warning: var(--color-orange-400); --color-info: var(--color-gray-300); --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); --color-btn-primary-text: var(--color-slate-900); --color-card-border: rgba(var(--color-gray-400-rgb), 0.2); --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); } } /* Lightbox styles */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); } .lightbox.open { display: flex; } .lightbox-topbar { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 1001; } .lightbox-counter { font-size: 14px; opacity: 0.9; } .lightbox-close, .lightbox-nav { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; cursor: pointer; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(0,0,0,0.75); } .lightbox-content-wrapper { display: flex; align-items: center; gap: 10px; width: min(92vw, 1100px); } .lightbox-content { flex: 1; max-height: 90vh; overflow: hidden; cursor: grab; background: rgba(0,0,0,0.2); border-radius: 10px; } .lightbox-content.grabbing { cursor: grabbing; } .lightbox-img { max-width: 100%; max-height: 90vh; width: 100%; height: auto; object-fit: contain; transform: translate(0,0) scale(1); will-change: transform; user-select: none; } /* Thumbnails */ .thumbnail-strip { display: flex; gap: .5rem; margin-top: .5rem; } .thumbnail { width: 80px; height: 80px; object-fit: cover; border: 2px solid transparent; cursor: pointer; } .thumbnail.active { border-color: #ff6a00; } /* Cart item thumbnail sizing */ .cart-item { display: flex; gap: 12px; align-items: center; } .cart-item-image { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; } .cart-item-image img, .cart-item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } /* Currency selector inherits language styles */ .language-selector.currency-selector { margin-left: 12px; } .language-selector.currency-selector .language-toggle { display: flex; align-items: center; gap: 6px; } .language-selector.currency-selector .lang-flag { font-size: 16px; } .language-selector.currency-selector .lang-name { font-size: 14px; opacity: 0.9; } /* Ensure product image fills container */ .product-image img, .product-img { width: 100%; height: 100%; object-fit: cover; display: block; } :root { /* Primitive Color Tokens */ --color-white: rgba(255, 255, 255, 1); --color-black: rgba(0, 0, 0, 1); --color-cream-50: rgba(252, 252, 249, 1); --color-cream-100: rgba(255, 255, 253, 1); --color-gray-200: rgba(245, 245, 245, 1); --color-gray-300: rgba(167, 169, 169, 1); --color-gray-400: rgba(119, 124, 124, 1); --color-slate-500: rgba(98, 108, 113, 1); --color-brown-600: rgba(94, 82, 64, 1); --color-charcoal-700: rgba(31, 33, 33, 1); --color-charcoal-800: rgba(38, 40, 40, 1); --color-slate-900: rgba(19, 52, 59, 1); --color-teal-300: rgba(50, 184, 198, 1); --color-teal-400: rgba(45, 166, 178, 1); --color-teal-500: rgba(33, 128, 141, 1); --color-teal-600: rgba(29, 116, 128, 1); --color-teal-700: rgba(26, 104, 115, 1); --color-teal-800: rgba(41, 150, 161, 1); --color-red-400: rgba(255, 84, 89, 1); --color-red-500: rgba(192, 21, 47, 1); --color-orange-400: rgba(230, 129, 97, 1); --color-orange-500: rgba(168, 75, 47, 1); /* RGB versions for opacity control */ --color-brown-600-rgb: 94, 82, 64; --color-teal-500-rgb: 33, 128, 141; --color-slate-900-rgb: 19, 52, 59; --color-slate-500-rgb: 98, 108, 113; --color-red-500-rgb: 192, 21, 47; --color-red-400-rgb: 255, 84, 89; --color-orange-500-rgb: 168, 75, 47; --color-orange-400-rgb: 230, 129, 97; /* Background color tokens (Light Mode) */ --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */ --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */ --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */ --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */ --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */ --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */ --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */ --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */ /* Semantic Color Tokens (Light Mode) */ --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100); --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500); --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700); --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); --color-border: rgba(var(--color-brown-600-rgb), 0.2); --color-btn-primary-text: var(--color-cream-50); --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500); --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8); /* Common style patterns */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for opacity control */ --color-success-rgb: 33, 128, 141; --color-error-rgb: 192, 21, 47; --color-warning-rgb: 168, 75, 47; --color-info-rgb: 98, 108, 113; /* Typography */ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-4xl: 30px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 550; --font-weight-bold: 600; --line-height-tight: 1.2; --line-height-normal: 1.5; --letter-spacing-tight: -0.01em; /* Spacing */ --space-0: 0; --space-1: 1px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; /* Border Radius */ --radius-sm: 6px; --radius-base: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-full: 9999px; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03); /* Animation */ --duration-fast: 150ms; --duration-normal: 250ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; } /* Dark mode colors */ @media (prefers-color-scheme: dark) { :root { /* RGB versions for opacity control (Dark Mode) */ --color-gray-400-rgb: 119, 124, 124; --color-teal-300-rgb: 50, 184, 198; --color-gray-300-rgb: 167, 169, 169; --color-gray-200-rgb: 245, 245, 245; /* Background color tokens (Dark Mode) */ --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */ --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */ --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */ --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */ --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */ --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */ --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */ --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */ /* Semantic Color Tokens (Dark Mode) */ --color-background: var(--color-charcoal-700); --color-surface: var(--color-charcoal-800); --color-text: var(--color-gray-200); --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); --color-primary: var(--color-teal-300); --color-primary-hover: var(--color-teal-400); --color-primary-active: var(--color-teal-800); --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); --color-border: rgba(var(--color-gray-400-rgb), 0.3); --color-error: var(--color-red-400); --color-success: var(--color-teal-300); --color-warning: var(--color-orange-400); --color-info: var(--color-gray-300); --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); --color-btn-primary-text: var(--color-slate-900); --color-card-border: rgba(var(--color-gray-400-rgb), 0.2); --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); /* Common style patterns - updated for dark mode */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for dark mode */ --color-success-rgb: var(--color-teal-300-rgb); --color-error-rgb: var(--color-red-400-rgb); --color-warning-rgb: var(--color-orange-400-rgb); --color-info-rgb: var(--color-gray-300-rgb); } } /* Data attribute for manual theme switching */ [data-color-scheme="dark"] { /* RGB versions for opacity control (dark mode) */ --color-gray-400-rgb: 119, 124, 124; --color-teal-300-rgb: 50, 184, 198; --color-gray-300-rgb: 167, 169, 169; --color-gray-200-rgb: 245, 245, 245; /* Colorful background palette - Dark Mode */ --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */ --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */ --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */ --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */ --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */ --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */ --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */ --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */ /* Semantic Color Tokens (Dark Mode) */ --color-background: var(--color-charcoal-700); --color-surface: var(--color-charcoal-800); --color-text: var(--color-gray-200); --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7); --color-primary: var(--color-teal-300); --color-primary-hover: var(--color-teal-400); --color-primary-active: var(--color-teal-800); --color-secondary: rgba(var(--color-gray-400-rgb), 0.15); --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25); --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3); --color-border: rgba(var(--color-gray-400-rgb), 0.3); --color-error: var(--color-red-400); --color-success: var(--color-teal-300); --color-warning: var(--color-orange-400); --color-info: var(--color-gray-300); --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4); --color-btn-primary-text: var(--color-slate-900); --color-card-border: rgba(var(--color-gray-400-rgb), 0.15); --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15); --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.15); --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2); --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8); /* Common style patterns - updated for dark mode */ --focus-ring: 0 0 0 3px var(--color-focus-ring); --focus-outline: 2px solid var(--color-primary); --status-bg-opacity: 0.15; --status-border-opacity: 0.25; --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* RGB versions for dark mode */ --color-success-rgb: var(--color-teal-300-rgb); --color-error-rgb: var(--color-red-400-rgb); --color-warning-rgb: var(--color-orange-400-rgb); --color-info-rgb: var(--color-gray-300-rgb); } [data-color-scheme="light"] { /* RGB versions for opacity control (light mode) */ --color-brown-600-rgb: 94, 82, 64; --color-teal-500-rgb: 33, 128, 141; --color-slate-900-rgb: 19, 52, 59; /* Semantic Color Tokens (Light Mode) */ --color-background: var(--color-cream-50); --color-surface: var(--color-cream-100); --color-text: var(--color-slate-900); --color-text-secondary: var(--color-slate-500); --color-primary: var(--color-teal-500); --color-primary-hover: var(--color-teal-600); --color-primary-active: var(--color-teal-700); --color-secondary: rgba(var(--color-brown-600-rgb), 0.12); --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2); --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25); --color-border: rgba(var(--color-brown-600-rgb), 0.2); --color-btn-primary-text: var(--color-cream-50); --color-card-border: rgba(var(--color-brown-600-rgb), 0.12); --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12); --color-error: var(--color-red-500); --color-success: var(--color-teal-500); --color-warning: var(--color-orange-500); --color-info: var(--color-slate-500); --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4); /* RGB versions for light mode */ --color-success-rgb: var(--color-teal-500-rgb); --color-error-rgb: var(--color-red-500-rgb); --color-warning-rgb: var(--color-orange-500-rgb); --color-info-rgb: var(--color-slate-500-rgb); } /* Base styles */ html { font-size: var(--font-size-base); font-family: var(--font-family-base); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; box-sizing: border-box; } body { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-md); } p { margin: 0 0 var(--space-16) 0; } a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } a:hover { color: var(--color-primary-hover); } code, pre { font-family: var(--font-family-mono); font-size: calc(var(--font-size-base) * 0.95); background-color: var(--color-secondary); border-radius: var(--radius-sm); } code { padding: var(--space-1) var(--space-4); } pre { padding: var(--space-16); margin: var(--space-16) 0; overflow: auto; border: 1px solid var(--color-border); } pre code { background: none; padding: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-16); border-radius: var(--radius-base); font-size: var(--font-size-base); font-weight: 500; line-height: 1.5; cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); border: none; text-decoration: none; position: relative; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--primary { background: var(--color-primary); color: var(--color-btn-primary-text); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--primary:active { background: var(--color-primary-active); } .btn--secondary { background: var(--color-secondary); color: var(--color-text); } .btn--secondary:hover { background: var(--color-secondary-hover); } .btn--secondary:active { background: var(--color-secondary-active); } .btn--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .btn--outline:hover { background: var(--color-secondary); } .btn--sm { padding: var(--space-4) var(--space-12); font-size: var(--font-size-sm); border-radius: var(--radius-sm); } .btn--lg { padding: var(--space-10) var(--space-20); font-size: var(--font-size-lg); border-radius: var(--radius-md); } .btn--full-width { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Form elements */ .form-control { display: block; width: 100%; padding: var(--space-8) var(--space-12); font-size: var(--font-size-md); line-height: 1.5; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-base); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } textarea.form-control { font-family: var(--font-family-base); font-size: var(--font-size-base); } select.form-control { padding: var(--space-8) var(--space-12); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--select-caret-light); background-repeat: no-repeat; background-position: right var(--space-12) center; background-size: 16px; padding-right: var(--space-32); } /* Add a dark mode specific caret */ @media (prefers-color-scheme: dark) { select.form-control { background-image: var(--select-caret-dark); } } /* Also handle data-color-scheme */ [data-color-scheme="dark"] select.form-control { background-image: var(--select-caret-dark); } [data-color-scheme="light"] select.form-control { background-image: var(--select-caret-light); } .form-control:focus { border-color: var(--color-primary); outline: var(--focus-outline); } .form-label { display: block; margin-bottom: var(--space-8); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); } .form-group { margin-bottom: var(--space-16); } /* Card component */ .card { background-color: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-card-border); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--duration-normal) var(--ease-standard); } .card:hover { box-shadow: var(--shadow-md); } .card__body { padding: var(--space-16); } .card__header, .card__footer { padding: var(--space-16); border-bottom: 1px solid var(--color-card-border-inner); } /* Status indicators - simplified with CSS variables */ .status { display: inline-flex; align-items: center; padding: var(--space-6) var(--space-12); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); } .status--success { background-color: rgba( var(--color-success-rgb, 33, 128, 141), var(--status-bg-opacity) ); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity)); } .status--error { background-color: rgba( var(--color-error-rgb, 192, 21, 47), var(--status-bg-opacity) ); color: var(--color-error); border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity)); } .status--warning { background-color: rgba( var(--color-warning-rgb, 168, 75, 47), var(--status-bg-opacity) ); color: var(--color-warning); border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity)); } .status--info { background-color: rgba( var(--color-info-rgb, 98, 108, 113), var(--status-bg-opacity) ); color: var(--color-info); border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity)); } /* Container layout */ .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--space-16); padding-left: var(--space-16); } @media (min-width: 640px) { .container { max-width: var(--container-sm); } } @media (min-width: 768px) { .container { max-width: var(--container-md); } } @media (min-width: 1024px) { .container { max-width: var(--container-lg); } } @media (min-width: 1280px) { .container { max-width: var(--container-xl); } } /* Utility classes */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: var(--space-4); } .gap-8 { gap: var(--space-8); } .gap-16 { gap: var(--space-16); } .m-0 { margin: 0; } .mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); } .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); } .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); } .p-0 { padding: 0; } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); } .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); } .block { display: block; } .hidden { display: none; } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } :focus-visible { outline: var(--focus-outline); outline-offset: 2px; } /* Dark mode specifics */ [data-color-scheme="dark"] .btn--outline { border: 1px solid var(--color-border-secondary); } @font-face { font-family: 'FKGroteskNeue'; src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2'); } /* END PERPLEXITY DESIGN SYSTEM */ /* Design System Variables */ :root { /* Brand Colors */ --color-carbon-black: #0a0a0a; --color-smoke-gray: #1f1f1f; --color-off-white: #f5f5f5; --color-burnt-orange: #ff6a00; --color-deep-violet: #5a00ff; --color-brand-yellow: #FEC600; --color-brand-navy: #151130; /* Semantic Colors */ --color-background: var(--color-carbon-black); --color-surface: var(--color-smoke-gray); --color-text: var(--color-off-white); --color-text-secondary: rgba(245, 245, 245, 0.7); --color-primary: var(--color-burnt-orange); --color-secondary: var(--color-deep-violet); --color-accent: var(--color-brand-yellow); /* Typography */ --font-family-primary: 'Inter', 'Agrandir Narrow', sans-serif; --font-family-secondary: 'Montserrat', sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Layout */ --container-max-width: 1200px; --header-height: 80px; --banner-height: 40px; /* Animations */ --duration-fast: 0.15s; --duration-normal: 0.3s; --duration-slow: 0.6s; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family-primary); font-weight: var(--font-weight-normal); line-height: 1.6; color: var(--color-text); background-color: var(--color-background); overflow-x: hidden; } /* Custom cursor styles removed - using default browser cursor */ /* COMPLEX HALLOWEEN LOADING SCREEN - MULTI-LAYER ANIMATIONS */ .halloween-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 50%, #0a0a0a 100%); display: flex; align-items: center; justify-content: center; z-index: 10000; overflow: hidden; animation: halloweenLoaderFadeOut 0.5s ease-in-out 3s forwards; } @keyframes halloweenLoaderFadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* LAYER 1 - DARK FOG (0-3s) */ .fog { position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(50, 50, 50, 0.8) 0%, rgba(30, 30, 30, 0.4) 30%, transparent 70%); border-radius: 50%; animation: fogSwirl 6s ease-in-out infinite; opacity: 0; } .fog-1 { top: -100%; left: -100%; animation: fogMove1 8s ease-in-out infinite, fogFadeIn 1s ease-out 0s forwards; } .fog-2 { top: -50%; right: -100%; animation: fogMove2 10s ease-in-out infinite, fogFadeIn 1s ease-out 0.3s forwards; } .fog-3 { bottom: -100%; left: -50%; animation: fogMove3 7s ease-in-out infinite, fogFadeIn 1s ease-out 0.6s forwards; } @keyframes fogFadeIn { 0% { opacity: 0; } 100% { opacity: 0.7; } } @keyframes fogMove1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(50px, 30px) rotate(120deg); } 66% { transform: translate(-30px, 40px) rotate(240deg); } } @keyframes fogMove2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-40px, 50px) rotate(180deg); } } @keyframes fogMove3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(60px, -20px) rotate(90deg); } 75% { transform: translate(-50px, -30px) rotate(270deg); } } /* LAYER 2 - FLYING BATS (0.5-2.5s) */ .bat { position: absolute; font-size: 2rem; color: rgba(255, 106, 0, 0.8); animation: batFly 2s linear forwards; opacity: 0; text-shadow: 0 0 20px rgba(255, 106, 0, 0.6); } @keyframes batFly { 0% { opacity: 0; transform: translateX(-100px) translateY(-50px) rotate(-20deg) scale(0.8); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw + 100px)) translateY(100px) rotate(20deg) scale(1.2); } } .bat-1 { top: 15%; animation-delay: 0.5s; } .bat-2 { top: 25%; animation-delay: 0.8s; } .bat-3 { top: 35%; animation-delay: 1.1s; } .bat-4 { top: 45%; animation-delay: 0.7s; } .bat-5 { top: 55%; animation-delay: 1.3s; } .bat-6 { top: 65%; animation-delay: 0.9s; } .bat-7 { top: 75%; animation-delay: 1.5s; } .bat-8 { top: 10%; animation-delay: 1.7s; } /* LAYER 3 - GHOST APPEARANCES (1-2.5s) */ .ghost { position: absolute; font-size: 3rem; color: rgba(245, 245, 245, 0.8); animation: ghostAppear 1.5s ease-in-out forwards; opacity: 0; text-shadow: 0 0 30px rgba(245, 245, 245, 0.6); } @keyframes ghostAppear { 0% { opacity: 0; transform: translateY(20px) scale(0.8); } 30% { opacity: 0.8; transform: translateY(-10px) scale(1.1); } 70% { opacity: 0.8; transform: translateY(-15px) scale(1.0); } 100% { opacity: 0; transform: translateY(-30px) scale(0.9); } } .ghost-1 { top: 20%; right: 20%; animation-delay: 1s; } .ghost-2 { bottom: 30%; left: 15%; animation-delay: 1.3s; } .ghost-3 { top: 60%; right: 40%; animation-delay: 1.8s; } /* LAYER 4 - PUMPKIN GLOW (1-2s) */ .pumpkin { position: absolute; font-size: 4rem; color: #ff6a00; animation: pumpkinGlow 2s ease-in-out forwards; opacity: 0; } @keyframes pumpkinGlow { 0% { opacity: 0; filter: drop-shadow(0 0 10px #ff6a00); transform: scale(0.8); } 20% { opacity: 1; filter: drop-shadow(0 0 30px #ff6a00) drop-shadow(0 0 60px #ff6a00); transform: scale(1.1); } 80% { opacity: 1; filter: drop-shadow(0 0 40px #ff6a00) drop-shadow(0 0 80px #ff6a00); transform: scale(1.0); } 100% { opacity: 0; filter: drop-shadow(0 0 20px #ff6a00); transform: scale(0.9); } } .pumpkin-1 { top: 10%; left: 10%; animation-delay: 1.2s; } .pumpkin-2 { top: 10%; right: 10%; animation-delay: 1.4s; } .pumpkin-3 { bottom: 10%; left: 10%; animation-delay: 1.6s; } .pumpkin-4 { bottom: 10%; right: 10%; animation-delay: 1.8s; } /* LAYER 5 - SPIDER WEBS (0-3s) */ .web { position: absolute; font-size: 2.5rem; color: rgba(245, 245, 245, 0.3); animation: webSway 4s ease-in-out infinite, webFadeIn 1s ease-out forwards; opacity: 0; } @keyframes webFadeIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 0.4; transform: scale(1); } } @keyframes webSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } } .web-top-left { top: 5%; left: 5%; } .web-top-right { top: 5%; right: 5%; } .web-bottom-left { bottom: 5%; left: 5%; animation-delay: 1s; } .web-bottom-right { bottom: 5%; right: 5%; animation-delay: 1.5s; } /* LAYER 6 - LIGHTNING FLASH (1.5s) */ .lightning { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(200, 200, 255, 0.6)); opacity: 0; animation: lightningFlash 0.3s ease-out 1.5s forwards; pointer-events: none; } @keyframes lightningFlash { 0% { opacity: 0; } 20% { opacity: 0.9; } 40% { opacity: 0.2; } 60% { opacity: 0.8; } 100% { opacity: 0; } } /* LAYER 7 - GLOWING EYES (1.8-2.5s) */ .eyes { position: absolute; width: 40px; height: 20px; animation: eyesBlink 1s ease-in-out 1.8s forwards; opacity: 0; } .eyes::before, .eyes::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ff6a00 30%, #ff4400 70%); box-shadow: 0 0 20px #ff6a00, 0 0 40px #ff6a00; top: 50%; transform: translateY(-50%); } .eyes::before { left: 0; } .eyes::after { right: 0; } @keyframes eyesBlink { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: 0.2; } 40% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0.3; } 100% { opacity: 0; } } .eyes-1 { top: 20%; left: 15%; } .eyes-2 { top: 40%; right: 20%; animation-delay: 0.2s; } .eyes-3 { bottom: 35%; left: 25%; animation-delay: 0.4s; } .eyes-4 { top: 60%; right: 35%; animation-delay: 0.6s; } .eyes-5 { bottom: 20%; right: 15%; animation-delay: 0.8s; } /* LAYER 8 - LOGO REVEAL (2-2.5s) */ /* LAYER 8 - LOGO REVEAL (2-2.5s) */ .logo-reveal { position: relative; z-index: 100; text-align: center; opacity: 0; animation: logoReveal 1s ease-out 2s forwards; } .ghost-logo { display: inline-block; transform: scale(0.5) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); opacity: 0; animation: ghostAppear 1.3s cubic-bezier(0.25, 1, 0.5, 1) 2s forwards, ghostPulse 2.5s ease-in-out 3.5s 2 alternate, ghostFadeOut 1.8s ease-in 6s forwards; } /* LOGO REVEAL ANIMATION */ @keyframes logoReveal { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* GHOST LOGO APPEAR */ @keyframes ghostAppear { 0% { opacity: 0; transform: scale(0.4) rotate(-8deg); filter: blur(6px); } 60% { opacity: 1; transform: scale(0.7) rotate(3deg); filter: blur(0) drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)); } 100% { transform: scale(0.65) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); } } /* PULSE EFECTO LIGERO */ @keyframes ghostPulse { 0% { transform: scale(0.65); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); } 100% { transform: scale(0.7); filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)); } } /* FADE OUT SUAVE — efecto “stay unseen” */ @keyframes ghostFadeOut { 0% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); transform: scale(0.7); } 100% { opacity: 0; filter: blur(12px) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: scale(0.75); } } .logo-text { font-size: clamp(4rem, 10vw, 8rem); font-weight: 700; letter-spacing: 0.2em; color: var(--color-text); text-transform: uppercase; text-shadow: 0 0 30px rgba(255, 106, 0, 1), 0 0 60px rgba(255, 106, 0, 0.8), 0 0 90px rgba(90, 0, 255, 0.6), 0 0 120px rgba(90, 0, 255, 0.4); margin: 0; transform: translateY(20px); animation: logoTextReveal 0.8s ease-out 2.2s forwards; } .tagline { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-shadow: 0 0 20px rgba(90, 0, 255, 0.8), 0 0 40px rgba(90, 0, 255, 0.4); margin: var(--space-sm) 0 0; opacity: 0; transform: translateY(15px); animation: taglineReveal 0.8s ease-out 2.6s forwards; } @keyframes logoReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes logoTextReveal { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes taglineReveal { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } /* PARTICLES AND ADDITIONAL EFFECTS */ .particle { position: absolute; font-size: 1.5rem; opacity: 0; animation: particleFloat 3s ease-in-out infinite; } @keyframes particleFloat { 0%, 100% { opacity: 0; transform: translateY(0) rotate(0deg); } 20% { opacity: 0.8; } 50% { opacity: 1; transform: translateY(-20px) rotate(180deg); } 80% { opacity: 0.6; } } .particle-1 { top: 30%; left: 20%; animation-delay: 0.5s; color: #ff6a00; } .particle-2 { top: 70%; right: 25%; animation-delay: 1.2s; color: #5a00ff; } .particle-3 { bottom: 40%; left: 30%; animation-delay: 1.8s; color: #ff6a00; } .particle-4 { top: 50%; right: 35%; animation-delay: 2.3s; color: #5a00ff; } .particle-5 { bottom: 60%; right: 20%; animation-delay: 2.8s; color: #ff6a00; } /* Main Content - Enhanced Fade In After Halloween Animation */ .main-content { opacity: 1; padding-top: var(--header-height); } /* banner is in normal flow; no extra padding needed */ @keyframes mainContentFadeIn { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* LAYER 9 - SUBTLE BACKGROUND EFFECTS FOR MAIN PAGE */ .main-content::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 20%, rgba(255, 106, 0, 0.02) 0%, transparent 30%), radial-gradient(circle at 80% 80%, rgba(90, 0, 255, 0.02) 0%, transparent 30%); pointer-events: none; z-index: -1; opacity: 0; animation: subtleBackgroundFadeIn 2s ease-out 4s forwards; } @keyframes subtleBackgroundFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Page transitions */ body.page-enter .page { opacity: 0; transform: translateX(24px); } body.page-enter.page-enter-active .page { opacity: 1; transform: translateX(0); transition: transform 420ms var(--ease-standard), opacity 320ms var(--ease-standard); } body.page-leave-left .page { opacity: 0; transform: translateX(-24px); transition: transform 380ms var(--ease-standard), opacity 300ms var(--ease-standard); } /* Occasional Bat Crosses Screen Every 30s */ @keyframes occasionalBat { 0% { opacity: 0; transform: translateX(-50px) translateY(-20px) rotate(-10deg); } 5% { opacity: 0.4; } 95% { opacity: 0.4; } 100% { opacity: 0; transform: translateX(calc(100vw + 50px)) translateY(20px) rotate(10deg); } } /* Dynamic particles added by JavaScript */ .dynamic-particle { position: absolute; animation: particleFloat 3s ease-in-out infinite; pointer-events: none; z-index: 50; } /* Enhanced interactive element glow effects */ .btn:hover, .product-card:hover { transition: all 0.3s ease; } /* Subtle fog overlay for main page */ .main-content::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 10%, rgba(50, 50, 50, 0.03) 0%, transparent 40%), radial-gradient(circle at 90% 90%, rgba(30, 30, 30, 0.02) 0%, transparent 40%); pointer-events: none; z-index: -1; opacity: 0; animation: subtleFogFadeIn 3s ease-out 5s forwards; } @keyframes subtleFogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Cobweb sway animation for main page corners */ .cobweb-corner { position: fixed; font-size: 1.2rem; opacity: 0.1; z-index: 1; pointer-events: none; animation: webSway 6s ease-in-out infinite; color: rgba(245, 245, 245, 0.3); } /* Enhanced entrance animations for main content */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .hidden { display: none; } /* Halloween Banner */ .halloween-banner { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); padding: var(--space-sm) 0; text-align: center; position: relative; top: auto; left: auto; width: 100%; z-index: 1; box-shadow: var(--shadow-md); } .banner-content { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; } .banner-text { font-weight: var(--font-weight-medium); color: var(--color-background); } .countdown-timer { font-weight: var(--font-weight-bold); color: var(--color-background); } /* Header */ .header { background: rgba(10, 10, 10, 0.95); padding: var(--space-sm) 0; position: fixed; top: var(--header-offset, 0px); left: 0; right: 0; width: 100%; z-index: 1100; border-bottom: 1px solid rgba(245, 245, 245, 0.1); transition: top 0.3s ease; } .header.banner-hidden { top: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .header-content { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-sm); } .logo { display: flex; align-items: center; gap: 10px; } .header-ghost-icon { width: auto; height: 40px; filter: brightness(0) invert(1); transition: all 0.3s ease; /* transición más suave para todo */ transform: scale(1); } /* Hover con efectos impresionantes */ .header-ghost-icon:hover { filter: brightness(0) invert(1) drop-shadow(0 0 12px #ff6a00) drop-shadow(0 0 20px #ff6a00) drop-shadow(0 0 30px #ff6a00); animation: hoverPulse 0.8s ease-in-out infinite alternate; transform: scale(1.1) rotate(2deg); } /* Pulso suave y rotación ligera */ @keyframes hoverPulse { 0% { transform: scale(1.05) rotate(0deg); filter: brightness(0) invert(1) drop-shadow(0 0 10px #ff6a00); } 50% { transform: scale(1.12) rotate(1deg); filter: brightness(0) invert(1) drop-shadow(0 0 25px #ff6a00); } 100% { transform: scale(1.1) rotate(-1deg); filter: brightness(0) invert(1) drop-shadow(0 0 15px #ff6a00); } } .header-logo { height: 45px; width: auto; filter: brightness(0) invert(1); transition: filter var(--duration-normal) var(--ease-standard); } .header-logo:hover { filter: brightness(0) saturate(100%) invert(58%) sepia(89%) saturate(6000%) hue-rotate(15deg); } .logo-text { font-size: 1.8rem; font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); } .nav { display: flex; gap: var(--space-lg); } .nav-link { color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-weight-medium); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; transition: color var(--duration-normal) var(--ease-standard); position: relative; } .nav-link:hover, .nav-link.active { color: var(--color-primary); } .nav-link.active::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; background: var(--color-primary); } .header-actions { display: flex; align-items: center; gap: var(--space-md); } .cart-icon { position: relative; cursor: pointer; font-size: 1.5rem; color: var(--color-text); transition: color var(--duration-normal) var(--ease-standard); } .cart-icon:hover { color: var(--color-primary); } .cart-count { position: absolute; top: -8px; right: -8px; background: var(--color-primary); color: var(--color-background); font-size: 0.8rem; font-weight: var(--font-weight-bold); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform var(--duration-normal) var(--ease-standard); } .cart-count.visible { transform: scale(1); } /* Language Selector */ .language-selector { position: relative; z-index: 1002; } .language-toggle { display: flex; align-items: center; gap: var(--space-xs); background: rgba(31, 31, 31, 0.95); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 10px 12px; color: var(--color-text); cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); font-size: 0.9rem; min-width: 80px; box-shadow: 0 0 10px rgba(255, 106, 0, 0.2); } .language-toggle:hover { border-color: var(--color-primary); background: rgba(31, 31, 31, 1); box-shadow: 0 0 15px rgba(255, 106, 0, 0.4); transform: translateY(-1px); } .language-flag { font-size: 1.1rem; } .language-code { font-weight: var(--font-weight-medium); font-size: 0.8rem; letter-spacing: 0.05em; } .dropdown-arrow { font-size: 0.7rem; opacity: 0.7; transition: transform var(--duration-normal) var(--ease-standard); } .language-selector.open .dropdown-arrow { transform: rotate(180deg); } .language-dropdown { position: absolute; top: 100%; right: 0; background: var(--color-background); border: 1px solid rgba(245, 245, 245, 0.2); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--duration-normal) var(--ease-standard); z-index: 1002; margin-top: var(--space-xs); } .language-selector.open .language-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .language-option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); border-bottom: 1px solid rgba(245, 245, 245, 0.1); } .language-option:last-child { border-bottom: none; } .language-option:hover { background: rgba(255, 106, 0, 0.1); color: var(--color-primary); } .language-option.active { background: rgba(255, 106, 0, 0.15); color: var(--color-primary); } .lang-flag { font-size: 1.1rem; } .lang-name { font-weight: var(--font-weight-medium); font-size: 0.9rem; } /* Language Transition Effects */ .translating { opacity: 0; transition: opacity 0.3s ease-in-out; } .translating-in { opacity: 1; transition: opacity 0.3s ease-in-out 0.3s; } /* Text elements that can be translated */ [data-translate] { transition: opacity 0.3s ease-in-out; } /* Container */ .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-sm); } /* Pages */ .page { min-height: 100vh; } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .enhanced-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, rgba(255, 106, 0, 0.02) 0%, transparent 25%, rgba(90, 0, 255, 0.02) 75%, transparent 100%), linear-gradient(180deg, rgba(255, 106, 0, 0.05), transparent); position: relative; overflow: hidden; } /* Enhanced Hero Background Effects */ .enhanced-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(255, 106, 0, 0.1) 0%, transparent 25%), radial-gradient(circle at 80% 20%, rgba(90, 0, 255, 0.1) 0%, transparent 25%), radial-gradient(circle at 40% 80%, rgba(255, 106, 0, 0.05) 0%, transparent 25%); animation: backgroundPulse 8s ease-in-out infinite; z-index: 1; opacity: 0; animation: backgroundPulse 8s ease-in-out infinite, heroBackgroundFadeIn 1s ease-out 4s forwards; } @keyframes heroBackgroundFadeIn { to { opacity: 1; } } .enhanced-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 98px, rgba(255, 106, 0, 0.02) 100px ); animation: scanLines 10s linear infinite; z-index: 1; } @keyframes backgroundPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes scanLines { 0% { transform: translateX(-100px); } 100% { transform: translateX(100px); } } .hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } /* Breathing light - Removed for performance */ .hero-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; position: relative; max-width: 800px; width: 100%; min-height: 100vh; gap: var(--space-sm); } .hero-decorative-logo { position: absolute; top: -40px; right: -20px; opacity: 0.08; z-index: 2; animation: ghostFloat 6s ease-in-out infinite; } @keyframes ghostFloat { 0%, 100% { transform: translateY(0px); opacity: 0.08; } 50% { transform: translateY(-10px); opacity: 0.12; } } .ghost-logo-decorative { width: 80px; height: 80px; filter: brightness(0) saturate(100%) invert(58%) sepia(89%) saturate(6000%) hue-rotate(15deg); animation: halloweenFloat 6s ease-in-out infinite; } .hero-brand { position: relative; display: inline-block; margin-bottom: var(--space-xs); } .hero-title { font-size: clamp(4rem, 8vw, 5rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; position: relative; z-index: 3; color: var(--color-text); text-shadow: 0 0 20px rgba(255, 106, 0, 0.8), 0 0 40px rgba(255, 106, 0, 0.4); } /* Glow effects - Removed for performance */ .hero-tagline { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-sm); letter-spacing: 0.1em; text-shadow: 0 0 20px rgba(255, 106, 0, 0.5); position: relative; z-index: 3; } .hero-countdown { margin-bottom: var(--space-md); } .countdown-display { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; } .countdown-display.small { gap: var(--space-sm); } .countdown-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .countdown-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-bold); color: var(--color-primary); text-shadow: 0 0 20px rgba(255, 106, 0, 0.5); } .countdown-display.small .countdown-value { font-size: clamp(1.5rem, 3vw, 2rem); } .countdown-label { font-size: 0.8rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.1em; } .countdown-separator { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--font-weight-bold); color: var(--color-secondary); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* Enhanced Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md) var(--space-xl); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); position: relative; overflow: hidden; backdrop-filter: blur(10px); } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); transition: left 0.5s ease; } .btn:hover::before { left: 100%; } .btn:hover { opacity: 0.95; transform: translateY(-2px) scale(1.05); } .btn-primary { background: linear-gradient(135deg, var(--color-primary), #ff8533); color: var(--color-background); box-shadow: 0 4px 15px rgba(255, 106, 0, 0.4), 0 0 20px rgba(255, 106, 0, 0.3); border: 1px solid rgba(255, 133, 51, 0.5); } .btn-primary:hover { background: linear-gradient(135deg, #ff7a1a, #ff9933); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(255, 106, 0, 0.5), 0 0 30px rgba(255, 106, 0, 0.4); } .btn-secondary { background: rgba(31, 31, 31, 0.8); color: var(--color-text); border: 2px solid var(--color-text-secondary); box-shadow: 0 0 15px rgba(245, 245, 245, 0.1); } .btn-secondary:hover { border-color: var(--color-secondary); color: var(--color-secondary); background: rgba(90, 0, 255, 0.1); box-shadow: 0 0 25px rgba(90, 0, 255, 0.3); transform: translateY(-3px) scale(1.05); } .btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-background); } .btn-full-width { width: 100%; } /* Halloween Event Text in Hero */ .halloween-event-text { margin: var(--space-xs) 0; text-align: center; } .glitch-text { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--color-text); position: relative; margin-bottom: var(--space-lg); text-shadow: 2px 2px 10px rgba(255, 106, 0, 0.7); animation: glitch 3s infinite; } @keyframes glitch { 0%, 100% { opacity: 1; text-shadow: 2px 2px 10px #ff6a00; } 25% { opacity: 0.8; text-shadow: -2px -2px 10px #5a00ff; } 50% { opacity: 1; text-shadow: 2px -2px 10px #ff6a00; } 75% { opacity: 0.7; text-shadow: -2px 2px 10px #5a00ff; } } /* Performance: render-optimizations */ .page { content-visibility: auto; contain-intrinsic-size: 1200px; } .products-grid, .recommendations-grid { content-visibility: auto; contain-intrinsic-size: 600px; } /* Collection Preview */ .collection-preview { padding: var(--space-3xl) 0; } .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-bold); text-transform: uppercase; text-align: center; margin-bottom: var(--space-2xl); letter-spacing: 0.05em; color: var(--color-text); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-2xl); } .product-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), border-color 200ms var(--ease-standard); border: 1px solid rgba(245, 245, 245, 0.1); opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; cursor: pointer; position: relative; backface-visibility: hidden; will-change: transform; box-shadow: var(--shadow-sm); } /* Shine sweep */ .product-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.12) 50%, transparent 55%); transform: translateX(-120%); } .product-card:hover::after { transform: translateX(160%); transition: transform 600ms var(--ease-standard); } /* Click ripple */ .product-card .ripple { position: absolute; width: 12px; height: 12px; border-radius: 9999px; background: radial-gradient(circle, rgba(255,106,0,0.35) 0%, rgba(255,106,0,0.2) 40%, transparent 70%); left: 0; top: 0; transform: translate(-50%,-50%); animation: ripple 500ms ease-out forwards; pointer-events: none; } @keyframes ripple { from { opacity: 0.75; transform: translate(-50%,-50%) scale(0.2);} to { opacity: 0; transform: translate(-50%,-50%) scale(10);} } .product-card:nth-child(1) { animation-delay: 0.1s; } .product-card:nth-child(2) { animation-delay: 0.2s; } .product-card:nth-child(3) { animation-delay: 0.3s; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .product-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.18); border: 1px solid rgba(255, 106, 0, 0.45); } .product-card:hover::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient( 45deg, rgba(255, 106, 0, 0.4), rgba(90, 0, 255, 0.3), rgba(255, 106, 0, 0.4) ); border-radius: var(--radius-lg); pointer-events: none; z-index: -1; animation: neonPulse 2s ease-in-out infinite; } @keyframes neonPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .product-card:hover .product-info { position: relative; z-index: 2; } .product-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-background); display: flex; align-items: center; justify-content: center; } .product-image-placeholder { width: 80%; height: 80%; background: var(--color-smoke-gray); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); font-size: 2rem; transition: all var(--duration-slow) var(--ease-standard); position: relative; overflow: hidden; } .product-image-placeholder::after { content: ''; position: absolute; top: -50%; left: -50%; right: -50%; bottom: -50%; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70% ); transform: translateX(-100%) translateY(-100%) rotate(30deg); transition: transform 0.6s ease-in-out; } .product-card:hover .product-image-placeholder::after { transform: translateX(100%) translateY(100%) rotate(30deg); } .product-card:hover .product-image-placeholder { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-background); transform: scale(1.1); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); } .product-info { padding: var(--space-md); } .product-name { font-size: 1.2rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xs); color: var(--color-text); } .product-price { font-size: 1.4rem; font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--space-sm); } .product-sizes { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); } .size-tag { padding: 0.25rem 0.5rem; background: rgba(245, 245, 245, 0.1); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--color-text-secondary); } /* Removed view-product-btn styles - entire card is now clickable */ /* Enhanced About Preview */ .about-preview { padding: var(--space-3xl) 0; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(31, 31, 31, 0.8) 100%), radial-gradient(circle at 30% 70%, rgba(255, 106, 0, 0.05) 0%, transparent 50%); text-align: center; position: relative; overflow: hidden; } .about-preview::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml;utf8,') repeat; background-size: 50px 50px; animation: noiseMove 20s linear infinite; pointer-events: none; } @keyframes noiseMove { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(50px) translateY(50px); } } .about-text { font-size: 1.2rem; color: var(--color-text-secondary); max-width: 600px; margin: 0 auto; line-height: 1.8; position: relative; z-index: 2; font-style: italic; padding: var(--space-lg); border-left: 3px solid var(--color-primary); background: rgba(255, 106, 0, 0.05); border-radius: var(--radius-md); } .about-text::before { content: '“'; position: absolute; top: -10px; left: 10px; font-size: 3rem; color: var(--color-primary); opacity: 0.5; } .about-text::after { content: '”'; position: absolute; bottom: -30px; right: 10px; font-size: 3rem; color: var(--color-primary); opacity: 0.5; } /* Enhanced Newsletter - Prominent and Simplified */ .newsletter { padding: var(--space-3xl) 0 var(--space-2xl); text-align: center; background: radial-gradient(circle at 50% 50%, rgba(255, 106, 0, 0.15) 0%, transparent 50%), linear-gradient(135deg, rgba(31, 31, 31, 0.9) 0%, rgba(90, 0, 255, 0.1) 50%, rgba(31, 31, 31, 0.9) 100%); position: relative; overflow: hidden; border: 2px solid rgba(255, 106, 0, 0.3); border-radius: var(--radius-lg); margin: var(--space-2xl) 0; } .prominent-newsletter { margin: var(--space-3xl) 0; padding: var(--space-3xl) 0; box-shadow: 0 0 40px rgba(255, 106, 0, 0.3), 0 0 80px rgba(90, 0, 255, 0.2), inset 0 0 60px rgba(255, 106, 0, 0.1); } .newsletter::before { content: '✨ 🎃 👻 💫 ✨'; display: block; text-align: center; font-size: 1.2rem; opacity: 0.6; margin-bottom: var(--space-xl); animation: sparkleFloat 8s ease-in-out infinite; } @keyframes sparkleFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; } 25% { transform: translateY(-5px) rotate(2deg); opacity: 0.8; } 75% { transform: translateY(3px) rotate(-2deg); opacity: 0.8; } } .newsletter-content { max-width: 600px; margin: 0 auto; padding: 0 var(--space-lg); } .newsletter-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2xl); letter-spacing: 0.1em; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; z-index: 2; } .glowing-title { text-shadow: 0 0 30px rgba(255, 106, 0, 0.8), 0 0 60px rgba(255, 106, 0, 0.4), 0 0 90px rgba(90, 0, 255, 0.3); animation: titleGlow 4s ease-in-out infinite; } @keyframes titleGlow { 0%, 100% { text-shadow: 0 0 30px rgba(255, 106, 0, 0.8), 0 0 60px rgba(255, 106, 0, 0.4), 0 0 90px rgba(90, 0, 255, 0.3); } 50% { text-shadow: 0 0 40px rgba(255, 106, 0, 1), 0 0 80px rgba(255, 106, 0, 0.6), 0 0 120px rgba(90, 0, 255, 0.5); } } .newsletter-form { display: flex; gap: var(--space-md); justify-content: center; align-items: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto; } .newsletter-input { flex: 1; padding: var(--space-lg) var(--space-xl); background: rgba(31, 31, 31, 0.9); border: 2px solid rgba(255, 106, 0, 0.4); border-radius: var(--radius-lg); color: var(--color-text); font-size: 1.1rem; min-width: 280px; backdrop-filter: blur(15px); transition: all var(--duration-normal) var(--ease-standard); box-shadow: 0 0 20px rgba(255, 106, 0, 0.2), inset 0 0 20px rgba(255, 106, 0, 0.1); } .newsletter-input::placeholder { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); } .newsletter-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.3), 0 0 40px rgba(255, 106, 0, 0.5), inset 0 0 30px rgba(255, 106, 0, 0.15); background: rgba(31, 31, 31, 1); transform: translateY(-3px) scale(1.02); } .newsletter-form .btn { padding: var(--space-lg) var(--space-2xl); font-size: 1.1rem; font-weight: var(--font-weight-bold); box-shadow: 0 8px 25px rgba(255, 106, 0, 0.4), 0 0 30px rgba(255, 106, 0, 0.3); } /* Collection Page */ .collection-hero { padding: var(--space-3xl) 0; text-align: center; position: relative; min-height: 60vh; display: flex; align-items: center; } .collection-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: var(--font-weight-bold); text-transform: uppercase; margin-bottom: var(--space-lg); background: linear-gradient(45deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .collection-description { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 800px; margin: 0 auto var(--space-2xl); line-height: 1.8; } .collection-filters { display: flex; gap: var(--space-xl); justify-content: center; flex-wrap: wrap; margin: var(--space-2xl) 0; padding: var(--space-lg) 0; } /* Simplified Collection Filters */ .collection-filters { display: flex; gap: var(--space-xl); justify-content: center; flex-wrap: wrap; margin: var(--space-2xl) 0; padding: var(--space-lg) 0; } .filter-group .form-control { min-width: 180px; background: rgba(31, 31, 31, 0.95); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 10px 16px; color: var(--color-text); font-size: 0.95rem; box-shadow: 0 0 10px rgba(255, 106, 0, 0.2); backdrop-filter: blur(10px); transition: all var(--duration-normal) var(--ease-standard); } .filter-group .form-control:hover { border-color: var(--color-primary); background: rgba(31, 31, 31, 1); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transform: translateY(-2px) scale(1.02); } .filter-group .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.3); } .filter-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); position: relative; } .collection-products { padding: var(--space-2xl) 0; } /* Product Page */ .breadcrumb { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); padding-top: var(--space-lg); } .breadcrumb-item { color: var(--color-text-secondary); font-size: 0.9rem; } .breadcrumb-item.current { color: var(--color-text); font-weight: var(--font-weight-medium); } .breadcrumb-separator { color: var(--color-text-secondary); } .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); margin-bottom: var(--space-3xl); } .product-gallery { display: flex; flex-direction: column; gap: var(--space-md); } .main-image { aspect-ratio: 1; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .main-image img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform var(--duration-slow) var(--ease-standard); } .main-image img:hover { transform: scale(1.1); } .thumbnail-strip { display: flex; gap: var(--space-sm); } .thumbnail { width: 80px; height: 80px; background: var(--color-surface); border-radius: var(--radius-md); cursor: pointer; border: 2px solid transparent; transition: border-color var(--duration-normal) var(--ease-standard); object-fit: cover; } .thumbnail.active, .thumbnail:hover { border-color: var(--color-primary); } .product-info { display: flex; flex-direction: column; gap: var(--space-lg); } .product-title { font-size: 2.5rem; font-weight: var(--font-weight-bold); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; } .product-price { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--color-primary); } .product-description { font-size: 1.1rem; color: var(--color-text-secondary); line-height: 1.8; } .product-options { display: flex; flex-direction: column; gap: var(--space-md); } .size-selector label { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-xs); color: var(--color-text); } .size-buttons { display: flex; gap: var(--space-xs); } .size-btn { padding: var(--space-sm); background: var(--color-surface); border: 1px solid rgba(245, 245, 245, 0.2); border-radius: var(--radius-md); color: var(--color-text); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--duration-normal) var(--ease-standard); min-width: 50px; } .size-btn:hover, .size-btn.selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-background); } .product-actions { display: flex; flex-direction: column; gap: var(--space-md); } .add-to-cart-btn { position: relative; background: var(--color-primary); border: none; color: var(--color-background); font-weight: var(--font-weight-bold); } .add-to-cart-btn:hover { background: #ff7a1a; transform: translateY(-1px); } .add-to-cart-btn::before { content: '💀'; margin-right: var(--space-xs); } .add-to-cart-btn.animate { animation: buttonVibrate 0.3s ease-in-out; } @keyframes buttonVibrate { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } .stock-info { font-size: 0.9rem; color: var(--color-text-secondary); } .product-details { border-top: 1px solid rgba(245, 245, 245, 0.1); padding-top: var(--space-lg); } .product-details h4 { font-size: 1.2rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); color: var(--color-text); } .product-details ul { list-style: none; padding: 0; } .product-details li { margin-bottom: var(--space-xs); color: var(--color-text-secondary); } .product-story { font-style: italic; font-size: 1.1rem; color: var(--color-primary); text-align: center; border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-lg); } .recommendations { border-top: 1px solid rgba(245, 245, 245, 0.1); padding-top: var(--space-2xl); } .recommendations h3 { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-lg); color: var(--color-text); } .recommendations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); } /* About Page */ .about-hero, .contact-hero { padding: var(--space-3xl) 0; text-align: center; background: var(--color-surface); } .page-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--font-weight-bold); text-transform: uppercase; color: var(--color-text); } .about-content { padding: var(--space-3xl) 0; } .about-story, .about-mission { margin-bottom: var(--space-2xl); max-width: 800px; margin-left: auto; margin-right: auto; } .about-story h2, .about-mission h2 { font-size: 2rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-lg); color: var(--color-text); } .about-story p, .about-mission p { font-size: 1.1rem; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: var(--space-md); } /* Contact Page */ .contact-content { padding: var(--space-3xl) 0; max-width: 600px; margin: 0 auto; } /* FAQ */ .faq-container { max-width: 900px; margin: 0 auto; padding: var(--space-3xl) 0; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid rgba(245,245,245,0.12); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; } .faq-question h3 { font-size: 1.05rem; margin: 0; } .faq-icon { font-weight: 700; color: var(--color-primary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 250ms var(--ease-standard), padding 250ms var(--ease-standard); padding: 0 20px; } .faq-answer.open { max-height: 400px; padding: 0 20px 16px; } .faq-answer p { color: var(--color-text-secondary); line-height: 1.7; } .contact-info { margin-bottom: var(--space-2xl); text-align: center; } .contact-info p { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: var(--space-sm); } .contact-form { display: flex; flex-direction: column; gap: var(--space-lg); } .form-group { display: flex; flex-direction: column; gap: var(--space-xs); } .form-group label { font-weight: var(--font-weight-medium); color: var(--color-text); } .form-control { padding: var(--space-md); background: var(--color-surface); border: 1px solid rgba(245, 245, 245, 0.2); border-radius: var(--radius-md); color: var(--color-text); font-family: inherit; font-size: 1rem; transition: border-color var(--duration-normal) var(--ease-standard); } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.2); } .form-control::placeholder { color: var(--color-text-secondary); } /* 404 Page */ .not-found { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .not-found-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--font-weight-bold); margin-bottom: var(--space-xl); color: var(--color-text-secondary); } /* Enhanced Footer */ .footer { background: linear-gradient(135deg, var(--color-surface), rgba(31, 31, 31, 0.8)); padding: var(--space-3xl) 0 var(--space-lg); border-top: 1px solid rgba(245, 245, 245, 0.1); position: relative; backdrop-filter: blur(10px); } .footer::after { content: '🎃 👻 🦇 💀'; position: absolute; top: var(--space-lg); right: var(--space-lg); font-size: 1.2rem; opacity: 0.2; animation: footerGhosts 6s ease-in-out infinite; } @keyframes footerGhosts { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, transparent, var(--color-primary), var(--color-secondary), var(--color-primary), transparent ); opacity: 0.7; animation: footerBorder 8s ease-in-out infinite; } @keyframes footerBorder { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2xl); margin-bottom: var(--space-2xl); } .footer-section h4 { font-size: 1.1rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; } .footer-section ul { list-style: none; padding: 0; } .footer-section li { margin-bottom: var(--space-xs); } .footer-section a { color: var(--color-text-secondary); text-decoration: none; transition: all var(--duration-normal) var(--ease-standard); } .footer-section a:hover { color: var(--color-primary); } .footer-bottom { text-align: center; padding-top: var(--space-lg); border-top: 1px solid rgba(245, 245, 245, 0.1); } .footer-bottom p { color: var(--color-text-secondary); font-size: 0.9rem; } /* Cart Overlay */ .cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 10000; opacity: 0; visibility: hidden; transition: all var(--duration-normal) var(--ease-standard); } .cart-overlay.visible { opacity: 1; visibility: visible; } .cart-panel { position: absolute; top: 0; right: 0; width: 100%; max-width: 500px; height: 100%; background: var(--color-background); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-standard); } .cart-overlay.visible .cart-panel { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid rgba(245, 245, 245, 0.1); } .cart-header h3 { font-size: 1.5rem; font-weight: var(--font-weight-semibold); color: var(--color-text); } .cart-close { background: none; border: none; color: var(--color-text); font-size: 1.5rem; cursor: pointer; transition: color var(--duration-normal) var(--ease-standard); } .cart-close:hover { color: var(--color-primary); } .cart-items { flex: 1; overflow-y: auto; padding: var(--space-lg); } .cart-item { display: flex; gap: var(--space-md); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid rgba(245, 245, 245, 0.1); } .cart-item:last-child { border-bottom: none; margin-bottom: 0; } .cart-item-image { width: 80px; height: 80px; background: var(--color-surface); border-radius: var(--radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); } .cart-item-details { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); } .cart-item-name { font-weight: var(--font-weight-medium); color: var(--color-text); } .cart-item-size { font-size: 0.9rem; color: var(--color-text-secondary); } .cart-item-price { font-weight: var(--font-weight-semibold); color: var(--color-primary); } .cart-item-actions { display: flex; align-items: center; gap: var(--space-sm); } .quantity-controls { display: flex; align-items: center; gap: var(--space-xs); } .quantity-btn { width: 30px; height: 30px; background: var(--color-surface); border: 1px solid rgba(245, 245, 245, 0.2); border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-normal) var(--ease-standard); } .quantity-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-background); } .quantity-value { min-width: 30px; text-align: center; color: var(--color-text); } .remove-item { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.2rem; transition: color var(--duration-normal) var(--ease-standard); } .remove-item:hover { color: var(--color-primary); } .cart-footer { padding: var(--space-lg); border-top: 1px solid rgba(245, 245, 245, 0.1); } .cart-total { margin-bottom: var(--space-lg); } .total-row { display: flex; justify-content: space-between; margin-bottom: var(--space-sm); } .total-row span:first-child { color: var(--color-text); font-weight: var(--font-weight-medium); } .total-row span:last-child { color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: 1.2rem; } .shipping-info { text-align: center; color: var(--color-text-secondary); } .empty-cart { text-align: center; padding: var(--space-3xl) var(--space-lg); color: var(--color-text-secondary); } /* Notification - Slide in from off-screen */ .notification { position: fixed; top: 100px; right: -400px; width: 350px; background: #1f1f1f; border: 1px solid #ff6a00; padding: var(--space-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); z-index: 10001; box-shadow: 0 4px 20px rgba(255, 106, 0, 0.4); transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .notification.visible { right: 20px; } .notification-content { display: flex; align-items: center; gap: var(--space-md); color: var(--color-text); } .notification-icon { font-size: 1.5rem; color: #ff6a00; } .notification-content h4 { margin: 0 0 var(--space-xs) 0; font-size: 1rem; color: var(--color-text); } .notification-content p { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); } /* Responsive Design */ @media (max-width: 768px) { .header-content { flex-wrap: wrap; gap: var(--space-sm); } .collection-filters { flex-direction: column; gap: var(--space-lg); } .filter-toggle { min-width: 160px; justify-content: space-between; } .language-dropdown { right: -20px; min-width: 140px; } .language-toggle { min-width: 60px; padding: var(--space-xs); } .language-code { display: none; } .nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid rgba(245, 245, 245, 0.1); padding-top: var(--space-sm); margin-top: var(--space-sm); } .hero-actions { flex-direction: column; align-items: center; } .btn { min-width: 200px; } .products-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); } .product-layout { grid-template-columns: 1fr; gap: var(--space-lg); } .newsletter-form { flex-direction: column; } .newsletter-input { min-width: auto; } .collection-filters { flex-direction: column; align-items: center; gap: var(--space-md); } .filter-group { flex-direction: column; text-align: center; } .cart-panel { max-width: 100%; } .banner-content { flex-direction: column; gap: var(--space-sm); } .countdown-display { justify-content: center; } .countdown-value { font-size: 1.5rem; } .countdown-display.small .countdown-value { font-size: 1.2rem; } } @media (max-width: 480px) { .hero-title { font-size: 2.5rem; } .hero-tagline { font-size: 1rem; } .section-title { font-size: 1.8rem; } .products-grid { grid-template-columns: 1fr; } .countdown-item { min-width: 60px; } .countdown-value { font-size: 1.2rem; } .countdown-label { font-size: 0.7rem; } } /* Smooth Scrolling and Parallax */ html { scroll-behavior: smooth; } /* Focus States for Accessibility */ *:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Print Styles */ /* Halloween Decorations - FLOATING ONLY (NO ROTATION) - KEEP ONLY THESE */ .halloween-decorations { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .halloween-emoji { position: fixed; font-size: 1.5rem; opacity: 0.4; animation: float 5s ease-in-out infinite; pointer-events: none; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Floating emoji positions */ .emoji-pumpkin-1 { top: 50px; left: 50px; animation-delay: 0s; } .emoji-ghost-1 { top: 100px; right: 80px; animation-delay: 0.5s; } .emoji-bat-1 { top: 40%; left: 30px; animation-delay: 1s; } .emoji-skull-1 { top: 50%; right: 50px; animation-delay: 1.5s; } .emoji-spider-1 { bottom: 100px; left: 60px; animation-delay: 2s; } .emoji-pumpkin-2 { bottom: 80px; right: 100px; animation-delay: 2.5s; } .floating-pumpkin, .floating-ghost, .floating-bat { display: none; } .pumpkin-1 { top: 10%; left: 5%; animation-delay: 0s; } .pumpkin-2 { top: 70%; right: 8%; animation-delay: -3s; } .ghost-1 { top: 20%; right: 15%; animation-delay: -1s; animation-duration: 8s; } .ghost-2 { bottom: 20%; left: 10%; animation-delay: -4s; animation-duration: 7s; } .bat-1 { top: 15%; left: 20%; animation-delay: -2s; animation-duration: 5s; } .bat-2 { bottom: 30%; right: 25%; animation-delay: -5s; animation-duration: 4s; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .spider-web { position: absolute; font-size: 1.5rem; opacity: 0.3; } .web-1 { top: 5%; right: 5%; } .web-2 { bottom: 5%; left: 5%; } /* Banner Halloween Decorations */ .banner-decorations { display: flex; gap: var(--space-sm); align-items: center; } .banner-pumpkin, .banner-ghost, .banner-bat, .banner-skull { font-size: 1.2rem; } /* Glow animation removed for performance */ /* Halloween Product Badges */ .halloween-badge { position: absolute; top: var(--space-sm); right: var(--space-sm); background: linear-gradient(135deg, var(--color-primary), #ff8533); color: var(--color-background); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: 0.7rem; font-weight: var(--font-weight-bold); text-transform: uppercase; z-index: 3; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 15px rgba(255, 106, 0, 0.5); animation: badgePulse 3s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(255, 106, 0, 0.5); } 50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 106, 0, 0.8); } } /* Enhanced Product Cards */ .product-card { position: relative; } /* Heavy product card hover effects removed */ .view-product-btn { background: var(--color-primary); border: none; color: var(--color-background); font-weight: var(--font-weight-bold); } .view-product-btn:hover { background: #ff7a1a; transform: translateY(-1px); } /* Stripe Loading Overlay */ .stripe-loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; visibility: hidden; transition: all var(--duration-normal) var(--ease-standard); } .stripe-loading-overlay.visible { opacity: 1; visibility: visible; } .stripe-loading-content { text-align: center; color: var(--color-text); max-width: 400px; padding: var(--space-2xl); } .loading-spinner { font-size: 4rem; margin-bottom: var(--space-lg); animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .stripe-loading-content h3 { font-size: 1.5rem; margin-bottom: var(--space-md); color: var(--color-primary); text-shadow: 0 0 10px rgba(255, 106, 0, 0.5); } .stripe-loading-content p { color: var(--color-text-secondary); } /* Policy Pages Styles */ .page-hero { padding: var(--space-3xl) 0; text-align: center; background: var(--color-surface); border-bottom: 1px solid rgba(245, 245, 245, 0.1); } .page-content { padding: var(--space-3xl) 0; } .policy-content { max-width: 800px; margin: 0 auto; } .policy-section { margin-bottom: var(--space-2xl); } .policy-section h2 { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-lg); color: var(--color-primary); } .policy-section h3 { font-size: 1.2rem; font-weight: var(--font-weight-medium); margin-bottom: var(--space-md); color: var(--color-text); } .policy-list { list-style: none; padding: 0; } .policy-list li { padding: var(--space-sm) 0; padding-left: var(--space-lg); position: relative; color: var(--color-text-secondary); line-height: 1.6; } .policy-list li::before { content: '💀'; position: absolute; left: 0; top: var(--space-sm); } .return-steps { list-style: none; padding: 0; counter-reset: step-counter; } .return-steps li { padding: var(--space-md) 0; padding-left: var(--space-2xl); position: relative; color: var(--color-text-secondary); line-height: 1.6; counter-increment: step-counter; } .return-steps li::before { content: counter(step-counter); position: absolute; left: 0; top: var(--space-md); background: var(--color-primary); color: var(--color-background); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: 0.9rem; } /* FAQ Styles */ .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { margin-bottom: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid rgba(245, 245, 245, 0.1); overflow: hidden; } .faq-question { width: 100%; padding: var(--space-lg); background: transparent; border: none; color: var(--color-text); font-weight: var(--font-weight-medium); font-size: 1.1rem; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all var(--duration-normal) var(--ease-standard); } .faq-question:hover { color: var(--color-primary); } .faq-question::after { content: '+'; font-size: 1.5rem; color: var(--color-primary); transition: transform var(--duration-normal) var(--ease-standard); } .faq-question.active::after { transform: rotate(45deg); } .faq-answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-text-secondary); line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height var(--duration-normal) var(--ease-standard); } .faq-answer.active { max-height: 200px; } /* Size Guide Styles */ .size-guide-content { max-width: 1000px; margin: 0 auto; } .size-assistant { margin-bottom: var(--space-3xl); } .size-assistant-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .size-assistant-form .btn { grid-column: 1 / -1; justify-self: center; max-width: 300px; } .size-recommendation { padding: var(--space-lg); background: rgba(255, 106, 0, 0.1); border: 1px solid var(--color-primary); border-radius: var(--radius-md); text-align: center; margin-top: var(--space-lg); } .size-recommendation h4 { color: var(--color-primary); margin-bottom: var(--space-sm); } .size-charts { margin-bottom: var(--space-3xl); } .size-charts h3 { font-size: 1.8rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-xl); color: var(--color-text); text-align: center; } .size-chart-section { margin-bottom: var(--space-2xl); } .size-chart-section h4 { font-size: 1.3rem; font-weight: var(--font-weight-medium); margin-bottom: var(--space-lg); color: var(--color-primary); } .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .size-table { width: 100%; border-collapse: collapse; background: var(--color-surface); } .size-table th, .size-table td { padding: var(--space-md); text-align: center; border-bottom: 1px solid rgba(245, 245, 245, 0.1); } .size-table th { background: var(--color-primary); color: var(--color-background); font-weight: var(--font-weight-semibold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } .size-table td { color: var(--color-text); font-weight: var(--font-weight-medium); } .size-table tbody tr:hover { background: rgba(255, 106, 0, 0.05); } .how-to-measure { background: var(--color-surface); padding: var(--space-xl); border-radius: var(--radius-lg); border: 1px solid rgba(245, 245, 245, 0.1); } .how-to-measure h3 { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-lg); color: var(--color-text); text-align: center; } .measure-instructions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); } .measure-item { display: flex; flex-direction: column; gap: var(--space-xs); } .measure-item strong { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .measure-item span { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; } /* Filter Loading States */ .filter-loading { opacity: 0.6; pointer-events: none; } .filter-loading .filter-toggle::after { content: '⧖'; position: absolute; right: 8px; animation: spin 1s linear infinite; } /* Collection Hero Enhancements */ .collection-hero { background: radial-gradient(circle at 70% 30%, rgba(90, 0, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255, 106, 0, 0.1) 0%, transparent 50%); position: relative; overflow: hidden; } /* Stay Unseen Title Styling */ .collection-header { text-align: center; margin-bottom: var(--space-2xl); } .stay-unseen-title { position: relative; display: inline-block; margin-bottom: var(--space-md); } .collection-main-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); text-shadow: 0 0 30px rgba(255, 106, 0, 0.8), 0 0 60px rgba(255, 106, 0, 0.4); position: relative; z-index: 2; } .collection-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, rgba(255, 106, 0, 0.2) 0%, transparent 70%); border-radius: 50%; z-index: 1; animation: subtleGlow 4s ease-in-out infinite; } @keyframes subtleGlow { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } } .collection-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); margin-bottom: var(--space-lg); opacity: 0.9; } .collection-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 50px, rgba(255, 106, 0, 0.02) 52px ); animation: diagonalMove 15s linear infinite; } @keyframes diagonalMove { 0% { transform: translateX(-50px) translateY(-50px); } 100% { transform: translateX(50px) translateY(50px); } } /* Halloween loading screen responsive adjustments */ @media (max-width: 768px) { .logo-text { font-size: clamp(2.5rem, 8vw, 4rem); } .tagline { font-size: clamp(1rem, 3vw, 1.5rem); } .bat { font-size: 1.5rem; } .ghost { font-size: 2rem; } .pumpkin { font-size: 2.5rem; } .fog { width: 150%; height: 150%; } } /* Responsive adjustments for new pages */ @media (max-width: 768px) { .size-assistant-form { grid-template-columns: 1fr; } .table-wrapper { border-radius: var(--radius-sm); } .size-table th, .size-table td { padding: var(--space-xs) var(--space-sm); font-size: 0.9rem; } .measure-instructions { grid-template-columns: 1fr; } .policy-content { padding: 0 var(--space-sm); } } @media (max-width: 480px) { .page-hero { padding: var(--space-2xl) 0; } .page-content { padding: var(--space-2xl) 0; } .faq-question { font-size: 1rem; padding: var(--space-md); } .faq-answer { padding: 0 var(--space-md) var(--space-md); } .size-table { font-size: 0.8rem; } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-background); } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); border-radius: 4px; transition: all var(--duration-normal) var(--ease-standard); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #ff7a1a, #7a33ff); box-shadow: 0 0 10px rgba(255, 106, 0, 0.5); } /* Firefox scrollbar */ html { scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-background); } /* Enhanced Link Animations */ a:not(.btn):not(.nav-link) { position: relative; transition: color var(--duration-normal) var(--ease-standard); } a:not(.btn):not(.nav-link):hover { color: var(--color-primary); } a:not(.btn):not(.nav-link)::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-primary); transition: width var(--duration-normal) var(--ease-standard); } a:not(.btn):not(.nav-link):hover::after { width: 100%; } /* Micro-interactions */ .cart-icon, .audio-toggle, .footer-section a { transition: all var(--duration-normal) var(--ease-standard); } .cart-icon:hover { transform: scale(1.1); } .footer-section a:hover { transform: translateX(5px); color: var(--color-primary); } @media print { .halloween-banner, .header, .footer, .cart-overlay, .notification, .halloween-decorations, .stripe-loading-overlay { display: none; } body { background: white; color: black; } .hero-background, .fog-container, .breathing-light { display: none; } }