/* ============================================ RUFC MOBILE-FIRST VISUAL ENHANCEMENTS Modern, Professional Design System ============================================ */ /* ============================================ 1. ENHANCED CSS VARIABLES ============================================ */:root{/* Enhanced color palette with more depth */ --primary-blue:#1e78ff;--primary-blue-rgb:30, 120, 255;--primary-blue-hover:#0c5ce6;--primary-blue-light:#4a90ff;--primary-blue-glow:rgba(30, 120, 255, 0.4);--dark-blue:#123b73;--dark-blue-rgb:18, 59, 115;--light-blue:#E6F1FF;--light-blue-rgb:230, 241, 255;/* Modern neutral palette */ --surface-primary:#ffffff;--surface-secondary:#f8fafc;--surface-tertiary:#f1f5f9;--surface-elevated:rgba(255, 255, 255, 0.95);/* Text colors with better contrast */ --text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;/* Modern shadows with color tints */ --shadow-xs:0 1px 2px rgba(15, 23, 42, 0.04);--shadow-sm:0 2px 4px rgba(15, 23, 42, 0.06);--shadow-md:0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);--shadow-lg:0 8px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);--shadow-xl:0 16px 48px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);--shadow-2xl:0 24px 64px rgba(15, 23, 42, 0.2);/* Colored shadows for depth */ --shadow-blue:0 8px 32px rgba(30, 120, 255, 0.2);--shadow-blue-lg:0 16px 48px rgba(30, 120, 255, 0.25);--shadow-blue-glow:0 0 40px rgba(30, 120, 255, 0.15);/* Glassmorphism */ --glass-bg:rgba(255, 255, 255, 0.85);--glass-border:rgba(255, 255, 255, 0.2);--glass-blur:20px;/* Animation timing */ --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);/* Spacing scale */ --space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem}/* ============================================ 2. ENHANCED BODY & BASE STYLES ============================================ */ body{background:linear-gradient(180deg, var(--surface-secondary) 0%, var(--surface-primary) 100%);background-attachment:fixed}/* Subtle animated background pattern */ body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%, rgba(var(--primary-blue-rgb), 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--primary-blue-rgb), 0.02) 0%, transparent 50%);pointer-events:none;z-index:-1}/* ============================================ 3. ENHANCED HEADER & NAVIGATION ============================================ */ .header{background:rgba(255, 255, 255, 0.98);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid rgba(var(--dark-blue-rgb), 0.08);box-shadow:var(--shadow-sm);transition:all 0.4s var(--ease-out-expo)}/* Ensure logo and club name are clearly visible */ .nav-logo .logo{filter:none;opacity:1;width:65px !important;height:65px !important}/* Larger logo on slightly bigger phones */ @media (min-width:400px){.nav-logo .logo{width:70px !important;height:70px !important}}/* Tablet logo */ @media (min-width:481px){.nav-logo .logo{width:80px !important;height:80px !important}}.nav-logo .club-name{color:var(--dark-blue) !important;-webkit-text-fill-color:var(--dark-blue) !important;opacity:1}/* Header scroll state */ .header.scrolled{background:rgba(255, 255, 255, 0.98);box-shadow:var(--shadow-md)}/* Enhanced nav toggle button */ .nav-toggle{position:relative;background:linear-gradient(135deg, var(--surface-secondary) 0%, var(--surface-primary) 100%);border:1px solid rgba(var(--dark-blue-rgb), 0.1);border-radius:12px;padding:12px 20px;font-weight:600;color:var(--dark-blue);transition:all 0.3s var(--ease-out-expo);overflow:hidden}.nav-toggle::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);opacity:0;transition:opacity 0.3s ease}.nav-toggle:hover, .nav-toggle:focus{border-color:var(--primary-blue);box-shadow:var(--shadow-blue);transform:translateY(-1px)}.nav-toggle.active{background:linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);color:white;border-color:transparent}/* Enhanced mobile menu */ @media (max-width:950px){.nav-menu{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);transition:all 0.4s var(--ease-out-expo)}.nav-menu.active{box-shadow:var(--shadow-2xl)}.nav-menu .nav-link{position:relative;border-radius:12px;margin:4px 16px;transition:all 0.3s var(--ease-out-expo);overflow:hidden}.nav-menu .nav-link::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.1) 0%, rgba(var(--primary-blue-rgb), 0.05) 100%);opacity:0;transition:opacity 0.3s ease}.nav-menu .nav-link:hover::before, .nav-menu .nav-link.active::before{opacity:1}.nav-menu .nav-link.active{color:var(--primary-blue);font-weight:600}}/* ============================================ 4. IMMERSIVE HERO SECTION ============================================ */ /* Full-screen immersive hero */ .hero--immersive{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:-70px;/* Pull up behind header */ padding-top:70px;/* Compensate for header */}@media (min-width:769px){.hero--immersive{margin-top:-120px;padding-top:120px}}/* Background image layer */ .hero-background{position:absolute;inset:0;z-index:0}.hero-bg-image{width:100%;height:100%;object-fit:cover;object-position:center 30%;/* Static background - no animation for cleaner look */}/* Dark overlay for text readability */ .hero-overlay{position:absolute;inset:0;background:linear-gradient( 180deg, rgba(18, 59, 115, 0.6) 0%, rgba(18, 59, 115, 0.75) 100% )}/* Centered content */ .hero-content--centered{position:relative;z-index:1;text-align:center;padding:2rem 1.5rem;max-width:800px;margin:0 auto}/* Club badge */ .hero-badge{margin-bottom:1.5rem;animation:fadeInDown 0.8s var(--ease-out-expo) both}.hero-badge-img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));/* No animation - static badge */}@media (min-width:768px){.hero-badge-img{width:140px;height:140px}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}/* Large white title */ .hero-title--large{color:#ffffff !important;font-size:2.5rem;font-weight:800;line-height:1.05;margin-bottom:0.75rem;text-shadow:0 2px 30px rgba(0, 0, 0, 0.5);animation:fadeInUp 0.6s var(--ease-out-expo) both}@media (min-width:768px){.hero-title--large{font-size:4rem}}/* Light subtitle */ .hero-subtitle--light{color:rgba(255, 255, 255, 0.85) !important;font-size:1.1rem;line-height:1.5;margin-bottom:1.75rem;font-weight:400;text-shadow:0 1px 10px rgba(0, 0, 0, 0.3);animation:fadeInUp 0.6s var(--ease-out-expo) 0.1s both}@media (min-width:768px){.hero-subtitle--light{font-size:1.35rem}}/* Centered buttons */ .hero-buttons--centered{display:flex;flex-direction:column;gap:1rem;align-items:center;margin-bottom:2.5rem;animation:fadeInUp 0.8s var(--ease-out-expo) 0.4s both}@media (min-width:480px){.hero-buttons--centered{flex-direction:row;justify-content:center}}/* Large button variant */ .btn--large{padding:1rem 2rem;font-size:1.1rem;min-width:200px}/* Light button variant for dark backgrounds */ .btn--light{background:rgba(255, 255, 255, 0.15);border-color:rgba(255, 255, 255, 0.5);color:#ffffff;backdrop-filter:blur(10px)}.btn--light:hover{background:rgba(255, 255, 255, 0.25);border-color:#ffffff;color:#ffffff;transform:translateY(-2px)}/* Stats row */ .hero-stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;padding:1rem 1.5rem;background:rgba(255, 255, 255, 0.1);backdrop-filter:blur(10px);border-radius:16px;animation:fadeInUp 0.6s var(--ease-out-expo) 0.3s both}.hero-stat{text-align:center;padding:0 0.5rem}.hero-stat-number{display:block;font-size:1.5rem;font-weight:800;color:#ffffff;line-height:1}.hero-stat-label{display:block;font-size:0.65rem;color:rgba(255, 255, 255, 0.8);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.25rem;font-weight:600}@media (min-width:768px){.hero-stats{gap:3rem;padding:1.25rem 2.5rem}.hero-stat-number{font-size:2.25rem}.hero-stat-label{font-size:0.75rem}}/* Hero Action Buttons Container */ .hero-action-buttons{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;margin-top:1rem}/* Hero Install Button */ .hero-install-btn, .hero-notify-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.7rem 1.25rem;border:none;border-radius:50px;color:white;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.3s ease}.hero-install-btn{background:linear-gradient(135deg, rgba(30, 120, 255, 0.9), rgba(18, 59, 115, 0.9));box-shadow:0 4px 15px rgba(30, 120, 255, 0.3)}.hero-notify-btn{background:linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));box-shadow:0 4px 15px rgba(245, 158, 11, 0.3)}.hero-install-btn:hover{background:linear-gradient(135deg, #1e78ff, #123B73);transform:translateY(-2px);box-shadow:0 6px 20px rgba(30, 120, 255, 0.4)}.hero-notify-btn:hover{background:linear-gradient(135deg, #f59e0b, #d97706);transform:translateY(-2px);box-shadow:0 6px 20px rgba(245, 158, 11, 0.4)}.hero-install-btn:active, .hero-notify-btn:active{transform:translateY(0)}.hero-install-btn i, .hero-notify-btn i{font-size:0.95rem}.hero-install-btn span, .hero-notify-btn span{white-space:nowrap}/* Scroll indicator */ .hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:rgba(255, 255, 255, 0.5);animation:fadeInUp 0.6s var(--ease-out-expo) 0.4s both}.hero-scroll-indicator i{font-size:1.5rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%, 100%{transform:translateY(0)}50%{transform:translateY(6px)}}/* Quick Actions Bar */ .quick-actions-bar{background:linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);padding:1rem 0;position:relative;z-index:2}.quick-actions-bar .container{display:flex;justify-content:space-around;gap:0.5rem}.quick-action{display:flex;flex-direction:column;align-items:center;gap:0.375rem;padding:0.75rem 1rem;color:rgba(255, 255, 255, 0.9);text-decoration:none;border-radius:12px;transition:all 0.3s var(--ease-out-expo);min-width:70px}.quick-action i{font-size:1.25rem}.quick-action span{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}.quick-action:hover, .quick-action:focus{background:rgba(255, 255, 255, 0.15);color:#ffffff;transform:translateY(-2px)}@media (min-width:480px){.quick-action{flex-direction:row;gap:0.5rem;padding:0.875rem 1.25rem}.quick-action span{font-size:0.8rem}}/* Legacy hero styles (for other pages) */ .hero:not(.hero--immersive){position:relative;background:linear-gradient(135deg, rgba(var(--light-blue-rgb), 0.8) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(var(--light-blue-rgb), 0.4) 100%);overflow:hidden}/* Animated gradient orbs for non-immersive hero */ .hero:not(.hero--immersive)::after{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle, rgba(var(--primary-blue-rgb), 0.08) 0%, transparent 70%);border-radius:50%;top:-200px;right:-200px;animation:float 20s ease-in-out infinite;pointer-events:none}@keyframes float{0%, 100%{transform:translate(0, 0) scale(1)}33%{transform:translate(-30px, 30px) scale(1.05)}66%{transform:translate(20px, -20px) scale(0.95)}}/* Hero content animations */ .hero-content{position:relative;z-index:1}.hero-title{color:var(--dark-blue);animation:fadeInUp 0.8s var(--ease-out-expo) both}.hero-subtitle{animation:fadeInUp 0.8s var(--ease-out-expo) 0.1s both}.hero-buttons{animation:fadeInUp 0.8s var(--ease-out-expo) 0.2s both}@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}/* Enhanced hero image */ .hero-img{border-radius:20px;box-shadow:var(--shadow-xl);transition:all 0.5s var(--ease-out-expo);animation:fadeInScale 0.8s var(--ease-out-expo) 0.3s both}@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.hero-img:hover{transform:scale(1.02);box-shadow:var(--shadow-2xl)}/* ============================================ 5. ENHANCED BUTTONS ============================================ */ .btn{position:relative;border-radius:14px;font-weight:600;transition:all 0.3s var(--ease-out-expo);overflow:hidden;isolation:isolate}/* Primary button with gradient and glow */ .btn-primary{background:linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);border:none;box-shadow:var(--shadow-blue), inset 0 1px 0 rgba(255, 255, 255, 0.2)}.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--primary-blue-light) 0%, var(--primary-blue) 100%);opacity:0;transition:opacity 0.3s ease;z-index:-1}.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-blue-lg), inset 0 1px 0 rgba(255, 255, 255, 0.2)}.btn-primary:hover::before{opacity:1}.btn-primary:active{transform:translateY(-1px)}/* Secondary button with border glow */ .btn-secondary{background:var(--surface-primary);border:2px solid var(--primary-blue);color:var(--primary-blue);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:rgba(var(--primary-blue-rgb), 0.05);transform:translateY(-2px);box-shadow:var(--shadow-md), 0 0 0 4px rgba(var(--primary-blue-rgb), 0.1)}.btn-secondary:active{transform:translateY(0)}/* Button ripple effect on tap */ .btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.3) 0%, transparent 60%);opacity:0;transform:scale(0);transition:transform 0.5s ease, opacity 0.3s ease}.btn:active::after{opacity:1;transform:scale(2);transition:transform 0s, opacity 0s}/* ============================================ 6. ENHANCED CARDS ============================================ */ .news-card, .link-card, .value-card, .pitch-card, .sponsor-card{background:var(--surface-primary);border:1px solid rgba(var(--dark-blue-rgb), 0.06);border-radius:20px;box-shadow:var(--shadow-md);transition:all 0.4s var(--ease-out-expo);overflow:hidden}.news-card:hover, .link-card:hover, .value-card:hover, .pitch-card:hover, .sponsor-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl), var(--shadow-blue-glow);border-color:rgba(var(--primary-blue-rgb), 0.15)}/* Card image hover zoom */ .news-card .news-image{transition:transform 0.6s var(--ease-out-expo)}.news-card:hover .news-image{transform:scale(1.08)}/* Card content padding */ .news-content{padding:var(--space-lg)}/* Staggered card animations */ .news-card:nth-child(1){animation-delay:0s}.news-card:nth-child(2){animation-delay:0.1s}.news-card:nth-child(3){animation-delay:0.2s}.news-card:nth-child(4){animation-delay:0.3s}/* ============================================ 7. ENHANCED FIXTURE CARDS ============================================ */ .pitch-card{border-radius:20px;overflow:hidden}.pitch-card__header{position:relative;padding:var(--space-lg);overflow:hidden}/* Animated gradient header */ .pitch-card__header::after{content:'';position:absolute;top:-100%;left:-100%;width:300%;height:300%;background:linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}/* Fixture card styling */ .fixture-card{background:var(--surface-primary);border:1px solid rgba(var(--dark-blue-rgb), 0.08);border-radius:16px;padding:var(--space-md);margin:var(--space-sm) var(--space-md);box-shadow:var(--shadow-sm);transition:all 0.3s var(--ease-out-expo)}.fixture-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-blue-rgb), 0.2)}.fixture-card__team{background:linear-gradient(135deg, var(--surface-secondary) 0%, var(--surface-tertiary) 100%);border-radius:12px;padding:var(--space-md);transition:all 0.3s ease}.fixture-card__team--home{background:linear-gradient(135deg, rgba(var(--primary-blue-rgb), 0.08) 0%, rgba(var(--primary-blue-rgb), 0.04) 100%)}/* ============================================ 8. ENHANCED MOBILE BOTTOM NAV ============================================ */ @media (max-width:768px){.mobile-bottom-nav{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid rgba(var(--dark-blue-rgb), 0.08);box-shadow:0 -4px 24px rgba(15, 23, 42, 0.1)}.mobile-nav-item{position:relative;transition:all 0.3s var(--ease-out-expo)}.mobile-nav-item::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%) scale(0);width:48px;height:48px;background:rgba(var(--primary-blue-rgb), 0.1);border-radius:16px;transition:transform 0.3s var(--ease-spring)}.mobile-nav-item.active::before{transform:translateX(-50%) scale(1)}.mobile-nav-item i{position:relative;z-index:1;transition:all 0.3s var(--ease-spring)}.mobile-nav-item.active i{transform:scale(1.15);color:var(--primary-blue)}.mobile-nav-item span{position:relative;z-index:1;transition:all 0.3s ease}.mobile-nav-item.active span{color:var(--primary-blue);font-weight:600}}/* ============================================ 9. ENHANCED SECTION TITLES ============================================ */ .section-title{position:relative;display:inline-block;width:100%}.section-title::after{content:'';display:block;width:80px;height:4px;margin:var(--space-md) auto 0;background:linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%);border-radius:2px;animation:expandWidth 0.6s var(--ease-out-expo) both}@keyframes expandWidth{from{width:0}to{width:80px}}/* ============================================ 10. ENHANCED FOOTER ============================================ */ .footer{background:linear-gradient(180deg, #1a2740 0%, #0f172a 100%);position:relative;overflow:hidden}.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent 0%, rgba(var(--primary-blue-rgb), 0.5) 50%, transparent 100%)}.social-links a{background:linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);border-radius:14px;box-shadow:var(--shadow-md);transition:all 0.3s var(--ease-out-expo)}.social-links a:hover{transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-lg), 0 0 20px rgba(24, 119, 242, 0.4)}/* ============================================ 11. LOADING & SKELETON STATES ============================================ */ .skeleton{background:linear-gradient(90deg, var(--surface-tertiary) 0%, var(--surface-secondary) 50%, var(--surface-tertiary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:8px}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}/* Loading spinner enhancement */ .loading-spinner{width:40px;height:40px;border:3px solid var(--surface-tertiary);border-top-color:var(--primary-blue);border-radius:50%;animation:spin 0.8s linear infinite}/* ============================================ 12. SCROLL ANIMATIONS ============================================ */ .animate-on-scroll{opacity:0;transform:translateY(30px);transition:all 0.6s var(--ease-out-expo)}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}/* Staggered animations for grids */ .news-grid .news-card, .values-grid .value-card, .pitch-grid .pitch-card{opacity:0;transform:translateY(30px);animation:fadeInUp 0.6s var(--ease-out-expo) both}/* ============================================ 13. ENHANCED FORM INPUTS ============================================ */ .form-card input, .form-card textarea, .form-card select{background:var(--surface-secondary);border:2px solid transparent;border-radius:14px;padding:var(--space-md);transition:all 0.3s var(--ease-out-expo);box-shadow:var(--shadow-xs)}.form-card input:focus, .form-card textarea:focus, .form-card select:focus{background:var(--surface-primary);border-color:var(--primary-blue);box-shadow:var(--shadow-sm), 0 0 0 4px rgba(var(--primary-blue-rgb), 0.1);outline:none}/* ============================================ 14. TOUCH FEEDBACK ENHANCEMENTS ============================================ */ @media (hover:none) and (pointer:coarse){/* Enhanced tap feedback */ .btn:active, .nav-link:active, .mobile-nav-item:active, .news-card:active, .fixture-card:active{transform:scale(0.98);opacity:0.9}/* Disable hover effects on touch */ .btn:hover, .news-card:hover, .link-card:hover{transform:none}/* Active states for touch */ .btn:active{transform:scale(0.97)}.news-card:active, .fixture-card:active{transform:scale(0.99);box-shadow:var(--shadow-lg)}}/* ============================================ 15. PULL-TO-REFRESH INDICATOR (Visual) ============================================ */ .pull-indicator{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-100%);background:var(--surface-primary);padding:var(--space-sm) var(--space-lg);border-radius:0 0 16px 16px;box-shadow:var(--shadow-lg);transition:transform 0.3s var(--ease-out-expo);z-index:9999}.pull-indicator.visible{transform:translateX(-50%) translateY(0)}/* ============================================ 16. PAGE HERO ENHANCEMENTS ============================================ */ .page-hero{position:relative;background:linear-gradient(135deg, rgba(var(--light-blue-rgb), 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);overflow:hidden}.page-hero::before{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle, rgba(var(--primary-blue-rgb), 0.1) 0%, transparent 70%);border-radius:50%;top:-100px;right:-100px;pointer-events:none}.page-title{color:var(--dark-blue)}/* ============================================ 17. SMOOTH PAGE TRANSITIONS ============================================ */ main{animation:pageEnter 0.5s var(--ease-out-expo) both}@keyframes pageEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}/* ============================================ 18. REDUCED MOTION SUPPORT ============================================ */ @media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}.hero::after, .pitch-card__header::after{animation:none}}/* ============================================ 19. DARK MODE PREPARATION (Disabled for now) ============================================ */ /* Dark mode disabled - keeping light theme only @media (prefers-color-scheme:dark){:root{--surface-primary:#1e293b;--surface-secondary:#0f172a;--surface-tertiary:#334155;--surface-elevated:rgba(30, 41, 59, 0.95);--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#64748b;--glass-bg:rgba(30, 41, 59, 0.85)}}*/ /* Force light mode colors for news cards */ .news-card{background:#ffffff !important}.news-card h3{color:var(--dark-blue) !important}.news-card p{color:var(--text-gray) !important}.news-content{background:#ffffff}/* ============================================ 20. PRINT STYLES ============================================ */ @media print{.header, .footer, .mobile-bottom-nav, .btn{display:none !important}body{background:white}.news-card, .pitch-card{box-shadow:none;border:1px solid #ddd}}