/** * Everest2Elbrus Premium Enhancements * Version: 2.5.0 - Simplified (wont-do styling moved to base CSS) * * This file adds premium visual enhancements to the base stylesheet. * Include after everest-custom.css */ /* ============================================ PREMIUM SHADOW SYSTEM ============================================ */ :root { /* Enhanced layered shadows */ --e2e-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.03); --e2e-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.06); --e2e-shadow-featured: 0 2px 4px rgba(220, 20, 60, 0.06), 0 8px 16px rgba(220, 20, 60, 0.08), 0 16px 32px rgba(0, 0, 0, 0.04); --e2e-shadow-featured-hover: 0 4px 8px rgba(220, 20, 60, 0.1), 0 16px 32px rgba(220, 20, 60, 0.12), 0 32px 64px rgba(0, 0, 0, 0.08); /* Premium button glow */ --e2e-glow-crimson: 0 4px 20px rgba(220, 20, 60, 0.35); --e2e-glow-blue: 0 4px 20px rgba(0, 56, 147, 0.25); } /* ============================================ GRAIN TEXTURE OVERLAY - DISABLED feTurbulence SVG filter + mix-blend-mode crashes Chrome compositor on macOS. Removed for stability. ============================================ */ /* ============================================ ENHANCED BUTTON INTERACTIONS ============================================ */ /* Primary button glow on hover */ .e2e-btn--primary:hover, .e2e-btn--primary:focus { box-shadow: var(--e2e-glow-crimson); } /* Outline button enhancement */ .e2e-btn--outline:hover, .e2e-btn--outline:focus { box-shadow: var(--e2e-glow-blue); } /* Button press effect */ .e2e-btn:active { transform: translateY(0) scale(0.98); } /* ============================================ SECTION TRANSITION ENHANCEMENTS ============================================ */ /* Gradient fade between sections */ .e2e-section--light + .e2e-section--white, .e2e-section--white + .e2e-section--light { position: relative; } .e2e-section--light + .e2e-section--white::before, .e2e-section--white + .e2e-section--light::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( to right, transparent 10%, rgba(0, 0, 0, 0.06) 50%, transparent 90% ); } /* ============================================ EXPEDITION CARD ENHANCEMENTS ============================================ */ /* Inner glow on hover */ .e2e-exp-card:hover { box-shadow: var(--e2e-shadow-card-hover), 0 0 0 1px rgba(0, 56, 147, 0.08) inset; } /* Featured card inner glow */ .e2e-exp-card--featured:hover { box-shadow: var(--e2e-shadow-featured-hover), 0 0 0 1px rgba(220, 20, 60, 0.1) inset; } /* Price highlight */ .e2e-exp-card__price { position: relative; } .e2e-exp-card--featured .e2e-exp-card__price::before { content: ''; position: absolute; left: -8px; right: -8px; top: -4px; bottom: -4px; background: rgba(220, 20, 60, 0.06); border-radius: 6px; z-index: -1; } /* ============================================ HERO ENHANCEMENTS ============================================ */ /* Subtle text shadow for better legibility */ .e2e-hero__title, .e2e-page-hero__title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2); } /* Enhanced CTA area */ .e2e-hero__ctas .e2e-btn--primary { position: relative; overflow: hidden; } .e2e-hero__ctas .e2e-btn--primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100% ); transition: left 0.5s ease; } .e2e-hero__ctas .e2e-btn--primary:hover::before { left: 100%; } /* ============================================ PILLAR CARDS ENHANCEMENT ============================================ */ .e2e-pillar { position: relative; overflow: hidden; } /* Subtle gradient overlay */ .e2e-pillar::before { content: ''; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: radial-gradient( circle at top right, rgba(0, 56, 147, 0.04) 0%, transparent 70% ); pointer-events: none; } .e2e-pillar:hover { box-shadow: var(--e2e-shadow-lg), 0 0 0 1px rgba(0, 56, 147, 0.06) inset; } /* ============================================ GUIDE SECTION ENHANCEMENT ============================================ */ .e2e-guide__image-wrap { position: relative; } /* Decorative frame */ .e2e-guide__image-wrap::before { content: ''; position: absolute; inset: -8px; border: 1px solid rgba(0, 56, 147, 0.15); border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease, inset 0.4s ease; } .e2e-guide:hover .e2e-guide__image-wrap::before { opacity: 1; inset: -12px; } /* ============================================ FOOTER ENHANCEMENT ============================================ */ /* Subtle top border glow */ .e2e-footer { position: relative; } .e2e-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.08) 80%, transparent 100% ); } /* ============================================ NAVIGATION ENHANCEMENT ============================================ */ /* Smoother underline animation */ .e2e-header__nav-link::after { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Active state glow */ .e2e-header__nav-link--active { text-shadow: 0 0 20px rgba(255, 255, 255, 0.15); } /* ============================================ EXPEDITION NAV PILLS ENHANCEMENT ============================================ */ .e2e-exp-nav__link { position: relative; overflow: hidden; } .e2e-exp-nav__link::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 56, 147, 0.06) 0%, transparent 50% ); opacity: 0; transition: opacity 0.3s ease; } .e2e-exp-nav__link:hover::before { opacity: 1; } /* ============================================ LEAD MAGNET SECTION ENHANCEMENT ============================================ */ .e2e-lead-magnet__form { position: relative; } /* Subtle glow behind form */ .e2e-lead-magnet__form::before { content: ''; position: absolute; inset: -20px; background: radial-gradient( ellipse at center, rgba(220, 20, 60, 0.08) 0%, transparent 70% ); pointer-events: none; z-index: -1; } /* Input focus enhancement */ .e2e-form-input:focus { box-shadow: 0 0 0 3px var(--e2e-crimson-light), 0 4px 12px rgba(220, 20, 60, 0.1); } /* ============================================ CATEGORY HEADER ENHANCEMENT ============================================ */ /* Animated accent line */ .e2e-exp-category__header::before { background: linear-gradient( to bottom, var(--e2e-crimson) 0%, rgba(220, 20, 60, 0.4) 50%, rgba(220, 20, 60, 0.1) 100% ); width: 4px; transition: height 0.4s ease; } .e2e-exp-category__header:hover::before { background: linear-gradient( to bottom, var(--e2e-crimson) 0%, var(--e2e-crimson) 30%, rgba(220, 20, 60, 0.4) 70%, rgba(220, 20, 60, 0.1) 100% ); } /* ============================================ PRINT STYLES ============================================ */ @media print { .e2e-header, .e2e-cookie-banner, .e2e-footer__social, .e2e-page-hero__bg-grain { display: none !important; } .e2e-page-hero { min-height: auto; padding: 2rem; } .e2e-exp-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; } }