/* ============================================================ KEYCARE CENTRAL – Premium Website CSS Brand: #134F81 (Blue) | #EC1A25 (Red) | #FFFFFF (White) ============================================================ */ /* --- Google Fonts --- */ /* Moved to tags in HTML for faster non-render-blocking loading */ /* --- Custom Font --- */ @font-face { font-family: 'Swiss721BT-BoldExtended'; src: url('../font/Swiss721BT-BoldExtended.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* --- CSS Variables --- */ :root { --primary: #134F81; --primary-dk: #0d3a61; --primary-lt: #1a6ab0; --accent: #EC1A25; --accent-dk: #c0151f; --white: #FFFFFF; --dark: #0a1628; --text: #2d3748; --text-muted: #718096; --bg-light: #f7faff; --border: #e2e8f0; --shadow-sm: 0 2px 8px rgba(19, 79, 129, 0.08); --shadow-md: 0 8px 30px rgba(19, 79, 129, 0.12); --shadow-lg: 0 20px 60px rgba(19, 79, 129, 0.16); --radius: 16px; --radius-lg: 24px; --radius-xl: 40px; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); --transition-fast: all 0.2s ease-in-out; --glass: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.3); } /* --- Premium Animations --- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes pulse-soft { 0% { box-shadow: 0 0 0 0 rgba(236, 26, 37, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(236, 26, 37, 0); } 100% { box-shadow: 0 0 0 0 rgba(236, 26, 37, 0); } } @keyframes slide-up-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-soft { animation: pulse-soft 2s infinite; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; line-height: 1.7; } h1, h2, h3, h4, h5, h6 { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; height: auto; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f5ff; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } /* ============================================================ NAVIGATION ============================================================ */ #mainNav { padding: 20px 0; transition: var(--transition); z-index: 1000; } #mainNav.scrolled { background: rgba(10, 22, 40, 0.96) !important; backdrop-filter: blur(20px); padding: 12px 0; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } #mainNav .navbar-brand { display: flex; align-items: center; gap: 10px; } #mainNav .brand-text { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.03em; color: white; } #mainNav .brand-text span { color: var(--accent); } #mainNav .nav-link { color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; font-size: 0.9rem; padding: 8px 14px !important; border-radius: 8px; transition: var(--transition); } #mainNav .nav-link:hover { color: white !important; background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .nav-cta { background: linear-gradient(135deg, var(--accent), var(--accent-dk)) !important; color: white !important; padding: 11px 26px !important; border-radius: 50px !important; font-weight: 800 !important; font-size: 0.95rem !important; box-shadow: 0 4px 15px rgba(236, 26, 37, 0.3); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; animation: pulse-glow 3s infinite; } .nav-cta:hover { transform: scale(1.05) translateY(-2px) !important; box-shadow: 0 12px 25px rgba(236, 26, 37, 0.5) !important; filter: brightness(1.1); } /* ============================================================ HERO SECTION ============================================================ */ .hero { min-height: 100vh; background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dk) 50%, #1a40db 100%); position: relative; overflow: hidden; display: flex; flex-direction: row; justify-content: center; padding-top: 110px; padding-bottom: 0; } /* Animated mesh background */ .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(19, 79, 129, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(236, 26, 37, 0.15) 0%, transparent 40%), radial-gradient(circle at 50% 100%, rgba(26, 64, 219, 0.3) 0%, transparent 50%); animation: meshPulse 8s ease-in-out infinite alternate; } .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E"); } @keyframes meshPulse { from { opacity: 0.7; } to { opacity: 1; } } .hero-content { position: relative; z-index: 2; width: 100%; align-self: center; padding-bottom: 80px; /* space for wave */ } .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(10px); margin-bottom: 24px; } .hero-tag .dot { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; animation: blink 1.5s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .hero h1 { font-size: clamp(1.6rem, 3vw, 2.6rem); color: white; margin-bottom: 24px; line-height: 1.15; } .hero h1 .highlight { background: linear-gradient(90deg, #60a5fa, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p.lead { font-size: 1.15rem; color: rgba(255, 255, 255, 0.8); max-width: 500px; margin-bottom: 40px; font-weight: 400; } .hero-btns { display: flex; gap: 12px; flex-wrap: nowrap; margin-bottom: 48px; padding: 12px 4px; overflow-x: auto; overflow-y: visible; /* Ensure hover lift isn't cut */ -ms-overflow-style: none; scrollbar-width: none; } .hero-btns::-webkit-scrollbar { display: none; } .btn-hero-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dk) 100%); color: white; padding: 12px 24px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; border: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: 0 8px 25px rgba(236, 26, 37, 0.25); } .btn-hero-primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 40px rgba(236, 26, 37, 0.45); color: white; } .btn-hero-outline { background: rgba(255, 255, 255, 0.08); color: white; padding: 12px 24px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; border: 1.5px solid rgba(255, 255, 255, 0.2); transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); white-space: nowrap; } .btn-hero-outline:hover { background: rgba(255, 255, 255, 0.2); border-color: white; color: white; transform: translateY(-4px); } .hero-stats { display: flex; gap: 40px; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 10px; } .hero-stats::-webkit-scrollbar { display: none; } @media (max-width: 575px) { .hero-stats { gap: 20px; justify-content: space-between; } .hero-stat .number { font-size: 1.4rem; } .hero-stat .label { font-size: 0.65rem; } } .hero-stat { text-align: center; position: relative; flex-shrink: 0; } .hero-stat .number { display: block; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; color: white; margin-bottom: 8px; } .hero-stat .label { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .hero-img-wrap { position: relative; z-index: 2; animation: heroFloat 6s ease-in-out infinite; display: flex; align-items: flex-end; justify-content: center; min-height: 380px; } .hero-img-wrap img { max-height: 60vh; width: auto; object-fit: contain; display: block; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* Hero wave bottom */ .hero-wave { position: absolute; bottom: -2px; left: 0; width: 100%; line-height: 0; z-index: 2; } /* ============================================================ SECTION UTILITIES ============================================================ */ .section-pad { padding: 80px 0; } .section-pad-sm { padding: 60px 0; } .section-label { display: inline-block; color: var(--accent); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; } .section-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--dark); margin-bottom: 16px; } .section-desc { font-size: 1.05rem; color: var(--text-muted); max-width: 580px; margin: 0 auto 48px; } .bg-light-blue { background: var(--bg-light); } .bg-dark-hero { background: linear-gradient(135deg, var(--dark), var(--primary-dk)); } /* ============================================================ BUTTONS ============================================================ */ .btn-primary-kcc { background: var(--primary); color: white; border: 2px solid var(--primary); padding: 14px 32px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; } .btn-primary-kcc:hover { background: var(--primary-dk); border-color: var(--primary-dk); color: white; transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn-accent-kcc { background: var(--accent); color: white; border: 2px solid var(--accent); padding: 14px 32px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; } .btn-accent-kcc:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: white; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(236, 26, 37, 0.35); } .btn-outline-kcc { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 13px 30px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; } .btn-outline-kcc:hover { background: var(--primary); color: white; transform: translateY(-3px); box-shadow: var(--shadow-md); } /* ============================================================ ABOUT SECTION ============================================================ */ .about-img-wrap { position: relative; } .about-img-wrap img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .about-badge { position: absolute; bottom: 30px; right: -20px; background: white; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; } .about-badge .icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } .about-badge .text { font-weight: 800; font-size: 1.4rem; color: var(--dark); line-height: 1; } .about-badge .sub { font-size: 0.75rem; color: var(--text-muted); } .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-weight: 500; } .check-list li:last-child { border: none; } .check-list li .ci { width: 22px; height: 22px; background: var(--primary); border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.7rem; margin-top: 2px; } /* ============================================================ FEATURES SECTION ============================================================ */ .feature-card { background: white; border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); height: 100%; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-lt)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(19, 79, 129, 0.12); border-color: var(--primary-lt); } .feature-card:hover::before { transform: scaleX(1); } .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(19, 79, 129, 0.1), rgba(19, 79, 129, 0.05)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--primary); font-size: 1.5rem; transition: var(--transition); } .feature-card:hover .feature-icon { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); color: white; transform: scale(1.1) rotate(5deg); } .feature-card h4 { font-size: 1.15rem; color: var(--dark); margin-bottom: 12px; } .feature-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; margin: 0; } .feature-badge { display: inline-block; background: rgba(236, 26, 37, 0.08); color: var(--accent); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; margin-top: 14px; border: 1px solid rgba(236, 26, 37, 0.2); } /* ============================================================ STATS BANNER ============================================================ */ .stats-banner { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); padding: 60px 0; position: relative; overflow: hidden; } .stats-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .stat-item { text-align: center; position: relative; z-index: 1; } .stat-item .num { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 3rem; font-weight: 900; color: white; display: block; line-height: 1; } .stat-item .lbl { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; display: block; } /* Brands Strip Glassmorphism */ .brands-strip { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 32px rgba(19, 79, 129, 0.05); transition: all 0.4s ease; } .brands-strip:hover { background: rgba(255, 255, 255, 0.8) !important; box-shadow: 0 20px 50px rgba(19, 79, 129, 0.12); transform: translateY(-4px); } .brands-strip img { filter: grayscale(1) opacity(0.6); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .brands-strip img:hover { filter: grayscale(0) opacity(1); transform: scale(1.1); } /* ============================================================ APP FEATURES WAVE SECTION ============================================================ */ .features-wave-section { background: linear-gradient(135deg, var(--dark) 0%, #0d2040 100%); position: relative; overflow: hidden; padding: 0; /* waves handle spacing */ } /* Wave decorators – now purely cosmetic, not removing padding */ .wave-top-decorator, .wave-bottom-decorator { display: block; width: 100%; line-height: 0; margin: -1px 0; } /* Alias for wave-top / wave-bottom classes in HTML */ .features-wave-section .wave-top, .features-wave-section .wave-bottom { display: block; line-height: 0; margin: -2px 0; pointer-events: none; } /* Keep the content area padded */ .features-wave-section>.container { padding-top: 80px; padding-bottom: 80px; } .feature-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; transition: var(--transition); cursor: default; width: 100%; } .feature-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); transform: translateX(6px); } .feature-pill .fp-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; font-size: 1rem; } .feature-pill .fp-text h6 { color: white; font-size: 0.92rem; margin-bottom: 2px; } .feature-pill .fp-text p { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; margin: 0; } /* ============================================================ BRANDS SECTION ============================================================ */ .brand-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); height: 100%; } .brand-card:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(19, 79, 129, 0.15); border-color: var(--primary); } .brand-card .brand-header { padding: 30px; background: var(--bg-light); text-align: center; border-bottom: 1px solid var(--border); } .brand-card .brand-header img { height: 50px; object-fit: contain; } .brand-card .brand-body { padding: 24px; } .brand-card .brand-body h4 { font-size: 1.1rem; color: var(--dark); margin-bottom: 8px; } .brand-card .brand-body p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px; } /* Brand logo placeholder */ .brand-logo-placeholder { height: 60px; display: flex; align-items: center; justify-content: center; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 900; font-size: 1.6rem; } /* ============================================================ PRODUCT GRID (Home preview - PREMIUM REDESIGN) ============================================================ */ .catalogue-preview-sec { background: radial-gradient(circle at 10% 20%, rgba(19, 79, 129, 0.03) 0%, rgba(255, 255, 255, 1) 90%); position: relative; overflow: hidden; } .catalogue-preview-sec::after { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(236, 26, 37, 0.05) 0%, transparent 70%); z-index: 0; } .product-card { background: white; border-radius: 24px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); height: 100%; position: relative; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); } .product-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, var(--primary), transparent, var(--accent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.4s; } .product-card:hover { transform: translateY(-15px); box-shadow: 0 35px 70px rgba(10, 22, 40, 0.2); border-color: transparent; } .product-card:hover::before { opacity: 0.6; } .product-card .prod-img { background: #ffffff; padding: 30px; text-align: center; height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.03); } .product-card .prod-img img { max-height: 180px; width: auto; object-fit: contain; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.08)); } .product-card:hover .prod-img img { transform: scale(1.1) rotate(2deg); filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15)); } .product-card .prod-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; } .product-card .prod-brand { font-size: 0.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; background: rgba(19, 79, 129, 0.08); display: inline-block; padding: 2px 10px; border-radius: 4px; width: fit-content; } .product-card .prod-name { font-size: 1.15rem; font-weight: 800; color: var(--dark); margin-bottom: 10px; font-family: 'Swiss721BT-BoldExtended', sans-serif; } .product-card .prod-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; } .product-card .prod-btn { background: #f1f5f9; color: var(--dark); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: all 0.3s; border: 1px solid transparent; } .product-card:hover .prod-btn { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(19, 79, 129, 0.3); } /* Animations Hub */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .floating-anim { animation: float 6s ease-in-out infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(236, 26, 37, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(236, 26, 37, 0); } 100% { box-shadow: 0 0 0 0 rgba(236, 26, 37, 0); } } .glow-btn { animation: pulse-glow 2s infinite; } .product-card .prod-name { font-size: 0.95rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; } .product-card .prod-desc { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; } .product-card .prod-btn { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: var(--transition); width: 100%; } .product-card .prod-btn:hover { background: var(--primary); color: white; } /* ============================================================ APP PREVIEW (Download) ============================================================ */ .download-section { background: linear-gradient(135deg, var(--primary-dk), var(--dark)); padding: 80px 0; position: relative; overflow: hidden; } .download-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(236, 26, 37, 0.15) 0%, transparent 60%); } .app-store-btn { display: inline-flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.25); color: white; padding: 14px 24px; border-radius: 14px; transition: var(--transition); backdrop-filter: blur(10px); } .app-store-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); color: white; transform: translateY(-4px); } .app-store-btn .store-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; } .app-store-btn .store-icon svg { width: 28px; height: 28px; flex-shrink: 0; } .app-store-btn .store-text { display: flex; flex-direction: column; line-height: 1.2; } .app-store-btn .store-text .top { font-size: 0.68rem; opacity: 0.7; letter-spacing: 0.3px; } .app-store-btn .store-text .bottom { font-size: 1.05rem; font-weight: 700; display: block; letter-spacing: -0.3px; } /* QR Wrapper */ .qr-wrap { background: white; border-radius: 20px; padding: 20px; display: inline-block; box-shadow: var(--shadow-lg); } .qr-wrap img { width: 120px; height: 120px; } /* ============================================================ WHY US SECTION ============================================================ */ .why-card { text-align: center; padding: 32px 24px; background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--transition); height: 100%; } .why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); } .why-icon { width: 72px; height: 72px; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.6rem; margin: 0 auto 20px; transition: var(--transition); } .why-card:hover .why-icon { transform: scale(1.1) rotate(-5deg); background: linear-gradient(135deg, var(--accent), var(--accent-dk)); } .why-card h5 { font-size: 1.05rem; color: var(--dark); margin-bottom: 10px; } .why-card p { font-size: 0.88rem; color: var(--text-muted); margin: 0; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonial-card { background: white; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); position: relative; transition: var(--transition); } .testimonial-card::before { content: '\201C'; position: absolute; top: 20px; right: 30px; font-size: 6rem; color: var(--primary); opacity: 0.08; font-family: Georgia, serif; line-height: 1; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .testimonial-card .stars { color: #fbbf24; font-size: 0.9rem; margin-bottom: 14px; } .testimonial-card p { font-size: 0.95rem; color: var(--text); line-height: 1.8; margin-bottom: 20px; } .testimonial-card .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .testimonial-card .name { font-weight: 700; font-size: 0.95rem; color: var(--dark); } .testimonial-card .role { font-size: 0.8rem; color: var(--text-muted); } /* ============================================================ DEALER FORM ============================================================ */ .dealer-form-wrap { background: white; border-radius: var(--radius-xl); padding: 50px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .dealer-form-wrap .form-control, .dealer-form-wrap .form-select { border-radius: 12px; border: 1.5px solid var(--border); padding: 14px 18px; font-size: 0.95rem; transition: var(--transition); } .dealer-form-wrap .form-control:focus, .dealer-form-wrap .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(19, 79, 129, 0.1); } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--dark); color: rgba(255, 255, 255, 0.75); position: relative; } /* Gradient top divider */ .footer-top-divider { height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)); background-size: 200% 100%; animation: footer-divider-shimmer 4s ease-in-out infinite; } @keyframes footer-divider-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Footer logo */ .footer-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: white; padding: 4px; box-shadow: 0 4px 12px rgba(236, 26, 37, 0.2); } footer .footer-brand { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 900; font-size: 1.4rem; color: white; margin: 0; } footer .footer-brand span { color: var(--accent); } .footer-desc { font-size: 0.9rem; max-width: 280px; margin-bottom: 20px; line-height: 1.7; } footer h6 { color: white; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; } footer a { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; transition: var(--transition); display: block; margin-bottom: 10px; } footer a:hover { color: white; padding-left: 4px; } footer .social-links { display: flex; gap: 12px; } footer .social-links a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); font-size: 1rem; margin: 0; padding: 0; } footer .social-links a:hover { background: var(--primary); border-color: var(--primary); color: white; transform: translateY(-3px); padding: 0; } /* Footer store buttons */ .footer-store-btn { padding: 9px 14px; font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); border-radius: 10px; } .footer-store-btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); } /* Separator before store buttons */ .footer-store-separator { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.08); margin: 8px 0 4px; } /* Footer contact list */ .footer-contact-list { display: flex; flex-direction: column; gap: 14px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 12px; } .footer-contact-icon-wrap { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .footer-contact-icon-wrap svg, .footer-contact-icon-wrap i { width: 14px; height: 14px; } .footer-contact-icon { color: var(--accent); flex-shrink: 0; width: 14px; height: 14px; } .footer-contact-text { display: flex; flex-direction: column; justify-content: center; min-height: 32px; } .footer-contact-text a { display: inline !important; margin: 0 !important; line-height: 1.5; } .footer-address { font-size: 0.84rem; line-height: 1.6; } .footer-company-name { font-size: 0.84rem; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.02em; } footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 0; font-size: 0.85rem; } footer .footer-bottom .d-flex a { display: inline; font-size: 0.82rem; margin: 0; padding: 0 6px; border-right: 1px solid rgba(255, 255, 255, 0.15); } footer .footer-bottom .d-flex a:last-child { border-right: none; padding-right: 0; } footer .footer-bottom .d-flex a:hover { padding-left: 6px; } /* Back to Top button */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(19, 79, 129, 0.35); z-index: 999; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; margin: 0; padding: 0; } .back-to-top:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(19, 79, 129, 0.5); color: white; padding: 0; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ============================================================ CATALOGUE PAGE ============================================================ */ .filter-bar { background: white; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 32px; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-card { background: white; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); height: 100%; text-align: center; transition: var(--transition); } .contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .contact-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; margin: 0 auto 16px; } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { background: linear-gradient(135deg, var(--dark), var(--primary-dk)); padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: white; position: relative; z-index: 1; margin-bottom: 12px; } .page-hero p { color: rgba(255, 255, 255, 0.7); position: relative; z-index: 1; } .page-hero .breadcrumb { justify-content: center; position: relative; z-index: 1; } .page-hero .breadcrumb-item, .page-hero .breadcrumb-item a { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .page-hero .breadcrumb-item.active { color: white; } .page-hero .breadcrumb-item+.breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); } /* ============================================================ ACCORDION (FAQ) ============================================================ */ .faq-accordion .accordion-item { border: 1px solid var(--border); border-radius: var(--radius) !important; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); } .faq-accordion .accordion-button { font-weight: 600; font-size: 0.95rem; color: var(--dark); padding: 20px 24px; background: white; border-radius: var(--radius) !important; } .faq-accordion .accordion-button:not(.collapsed) { background: var(--primary); color: white; box-shadow: none; } .faq-accordion .accordion-button::after { filter: none; } .faq-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); } .faq-accordion .accordion-body { padding: 20px 24px; color: var(--text-muted); font-size: 0.95rem; } /* ============================================================ APP PREVIEW SECTION ============================================================ */ .app-screen-card { background: var(--bg-light); border-radius: var(--radius-lg); padding: 30px; text-align: center; border: 1px solid var(--border); transition: var(--transition); } .app-screen-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .app-screen-card img { height: 280px; object-fit: contain; margin-bottom: 16px; } .app-screen-card h6 { font-size: 0.9rem; color: var(--dark); margin: 0; } /* ============================================================ EVENTS PAGE ============================================================ */ /* --- Hero Particles --- */ @keyframes particleDrift { 0% { transform: translateY(0) scale(1); opacity: 0.15; } 50% { transform: translateY(-40px) scale(1.2); opacity: 0.25; } 100% { transform: translateY(0) scale(1); opacity: 0.15; } } .events-hero { padding-bottom: 100px; } .events-hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .events-hero-particles span { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.06); animation: particleDrift ease-in-out infinite; } .events-hero-particles span:nth-child(1) { width: 200px; height: 200px; top: 10%; left: 5%; animation-duration: 8s; } .events-hero-particles span:nth-child(2) { width: 120px; height: 120px; top: 60%; left: 15%; animation-duration: 11s; animation-delay: 1s; } .events-hero-particles span:nth-child(3) { width: 80px; height: 80px; top: 20%; right: 10%; animation-duration: 7s; animation-delay: 2s; } .events-hero-particles span:nth-child(4) { width: 160px; height: 160px; bottom: 10%; right: 20%; animation-duration: 9s; animation-delay: 0.5s; } .events-hero-particles span:nth-child(5) { width: 60px; height: 60px; top: 45%; right: 35%; animation-duration: 12s; animation-delay: 3s; } .events-hero-particles span:nth-child(6) { width: 100px; height: 100px; bottom: 20%; left: 40%; animation-duration: 10s; animation-delay: 1.5s; } /* --- Hero Stats --- */ .events-hero-stats { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 48px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); backdrop-filter: blur(12px); padding: 28px 40px; max-width: 720px; margin-left: auto; margin-right: auto; } .hero-stat { display: flex; flex-direction: column; align-items: center; /* padding: 0 32px; */ font-family: 'Swiss721BT-BoldExtended', sans-serif; color: white; } .hero-stat-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: white; } .hero-stat-label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; white-space: nowrap; } .hero-stat-divider { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } @media (max-width: 600px) { .events-hero-stats { padding: 20px 16px; gap: 12px 0; } .hero-stat { padding: 8px 16px; min-width: 50%; } .hero-stat-divider { display: none; } } /* --- Gallery Filter Tabs --- */ .gallery-filter-wrap { display: flex; justify-content: center; margin-bottom: 40px; } .gallery-filter { display: flex; gap: 8px; background: white; border-radius: var(--radius-xl); padding: 6px; box-shadow: var(--shadow-md); border: 1px solid var(--border); flex-wrap: wrap; justify-content: center; } .filter-btn { border: none; background: transparent; color: var(--text-muted); font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; padding: 10px 22px; border-radius: 100px; cursor: pointer; transition: var(--transition); white-space: nowrap; } .filter-btn:hover { color: var(--primary); background: rgba(19, 79, 129, 0.06); } .filter-btn.active { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); color: white; box-shadow: 0 4px 16px rgba(19, 79, 129, 0.3); } /* --- Gallery Grid (Masonry-style) --- */ @keyframes galleryItemIn { from { opacity: 0; transform: scale(0.94) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 16px; } @media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; } } .gallery-item { border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; animation: galleryItemIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both; } .gallery-item--tall { grid-row: span 2; } .gallery-item--wide { grid-column: span 2; } @media (max-width: 575px) { .gallery-item--wide, .gallery-item--tall { grid-column: span 1; grid-row: span 1; } } .gallery-item.hidden { display: none; } /* --- Gallery Image Wrap --- */ .gallery-img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-lg); } .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; } .gallery-item:hover .gallery-img-wrap img { transform: scale(1.07); } /* --- Gallery Overlay --- */ .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.2) 50%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: flex-end; padding: 20px; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay-content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .gallery-zoom-icon { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.7); align-self: flex-end; flex-shrink: 0; position: absolute; top: 16px; right: 16px; } /* --- Glassmorphism Info Badge --- */ .gallery-info-badge { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 10px 14px; width: 100%; } .gallery-info-badge h6 { font-size: 0.88rem; font-weight: 700; color: white; margin: 4px 0 2px; line-height: 1.3; } .gallery-info-badge p { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); margin: 0; } .gallery-badge-tag { display: inline-block; background: rgba(19, 79, 129, 0.85); color: white; font-size: 0.68rem; font-weight: 700; font-family: 'Swiss721BT-BoldExtended', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 100px; } /* --- Video Thumb --- */ .gallery-video-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(10, 22, 40, 0.25); } .gallery-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; z-index: 2; transition: var(--transition); } .gallery-play-btn svg { width: 22px; height: 22px; margin-left: 3px; /* optical center for play triangle */ } .gallery-item:hover .gallery-play-btn { background: var(--primary); border-color: var(--primary); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 12px rgba(19, 79, 129, 0.2); } /* --- Load More Button --- */ .btn-load-more { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--primary); border: 2px solid var(--primary); border-radius: 100px; padding: 14px 36px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: var(--transition); } .btn-load-more:hover { background: var(--primary); color: white; box-shadow: 0 8px 24px rgba(19, 79, 129, 0.25); transform: translateY(-2px); } .btn-load-more svg { width: 18px; height: 18px; } /* --- Upcoming Events Cards --- */ .upcoming-event-card { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; transition: var(--transition); position: relative; height: 100%; display: flex; flex-direction: column; } .upcoming-event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary-lt); } .upcoming-event-card.featured-event { border-color: var(--accent); box-shadow: 0 8px 30px rgba(236, 26, 37, 0.12); } .upcoming-event-card.featured-event:hover { box-shadow: 0 20px 60px rgba(236, 26, 37, 0.2); border-color: var(--accent); } .event-card-featured-badge { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--accent); color: white; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border-radius: 100px; } .event-date-badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: white; border-radius: 12px; padding: 8px 12px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); min-width: 52px; } .event-month { display: block; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.62rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; } .event-day { display: block; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 1.6rem; font-weight: 900; color: var(--dark); line-height: 1; margin: 2px 0; } .event-year { display: block; font-size: 0.62rem; color: var(--text-muted); font-weight: 600; line-height: 1; } .event-card-img { height: 200px; background-size: cover; background-position: center; position: relative; flex-shrink: 0; } .event-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(10, 22, 40, 0.4) 100%); } .event-type-tag { position: absolute; bottom: 12px; right: 12px; z-index: 1; background: rgba(19, 79, 129, 0.9); color: white; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 100px; backdrop-filter: blur(8px); } .event-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .event-card-body h5 { font-size: 1.05rem; color: var(--dark); margin-bottom: 10px; line-height: 1.4; } .event-card-body>p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; flex: 1; } .event-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .event-meta span { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); font-weight: 500; } .event-meta svg { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; } .btn-event-register { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: white; border-radius: 100px; padding: 10px 22px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: var(--transition); align-self: flex-start; } .btn-event-register:hover { transform: translateX(3px); box-shadow: 0 6px 20px rgba(19, 79, 129, 0.3); color: white; } .btn-event-register svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .btn-event-register:hover svg { transform: translateX(3px); } /* --- Events CTA Band --- */ .events-cta-band { background: linear-gradient(135deg, var(--dark), var(--primary-dk)); padding: 64px 0; position: relative; overflow: hidden; } .events-cta-band::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .events-cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .events-cta-inner h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: white; margin-bottom: 8px; } .events-cta-inner p { color: rgba(255, 255, 255, 0.65); font-size: 0.95rem; margin: 0; } .events-cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; } .btn-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--primary); border-radius: 100px; padding: 14px 32px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.9rem; transition: var(--transition); text-decoration: none; } .btn-cta-primary:hover { background: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(236, 26, 37, 0.3); } .btn-cta-primary svg { width: 16px; height: 16px; } .btn-cta-outline { display: inline-flex; align-items: center; background: transparent; color: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 100px; padding: 14px 32px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.9rem; transition: var(--transition); text-decoration: none; } .btn-cta-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); color: white; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991px) { .hero { min-height: auto; padding: 100px 0 0; } .section-pad { padding: 60px 0; } .about-badge { right: 0; } .dealer-form-wrap { padding: 30px; } } @media (max-width: 767px) { .hero h1 { font-size: 2.2rem; } .hero-btns { margin-bottom: 32px; } .hero-stats { gap: 24px; } .section-title { font-size: 1.8rem; } .stat-item .num { font-size: 2.2rem; } .features-wave-section { padding: 80px 0; } .dealer-form-wrap { padding: 24px; border-radius: var(--radius-lg); } footer .footer-brand { font-size: 1.2rem; } } /* ============================================================ AOS CUSTOM OVERRIDES ============================================================ */ [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } /* ============================================================ NAVBAR TOGGLER ============================================================ */ .navbar-toggler { border: 1.5px solid rgba(255, 255, 255, 0.4) !important; padding: 8px 12px; border-radius: 8px; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ============================================================ LOADER / MISC ============================================================ */ .text-primary-kcc { color: var(--primary) !important; } .text-accent-kcc { color: var(--accent) !important; } .bg-primary-kcc { background: var(--primary) !important; } .border-primary-kcc { border-color: var(--primary) !important; } /* ============================================================ EVENTS & GALLERY SECTION ============================================================ */ .gallery-filter { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; } .filter-btn { background: white; border: 1px solid var(--border); padding: 10px 24px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); transition: var(--transition); } .filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); animation: fadeInScale 0.6s ease forwards; } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 79, 129, 0.9), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: var(--transition); } .gallery-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .gallery-item:hover img { transform: scale(1.1); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-info h5 { color: white; margin-bottom: 4px; font-size: 1.1rem; } .gallery-info p { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; margin: 0; } .event-date-badge { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; color: var(--primary); box-shadow: var(--shadow-sm); z-index: 2; } /* Lightbox Premium Customization */ .glightbox-container .gslide-description { background: rgba(10, 22, 40, 0.95) !important; } .glightbox-container .gslide-title { font-family: 'Swiss721BT-BoldExtended', sans-serif !important; color: white !important; } .glightbox-container .gslide-desc { color: rgba(255, 255, 255, 0.7) !important; } /* Page Hero for Events */ .page-hero-events { padding: 160px 0 100px; background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dk) 100%); position: relative; overflow: hidden; text-align: center; } .page-hero-events::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E"); opacity: 0.5; } .page-hero-events h1 { color: white; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; } .page-hero-events p { color: rgba(255, 255, 255, 0.7); font-size: 1.2rem; max-width: 700px; margin: 0 auto; } /* ============================================================ EVENTS PAGE — LISTING CARDS ============================================================ */ @keyframes cardReveal { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .events-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 991px) { .events-listing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 575px) { .events-listing-grid { grid-template-columns: 1fr; gap: 16px; } } .event-listing-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; animation: cardReveal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both; } .event-listing-card:hover { transform: translateY(-10px); box-shadow: 0 24px 64px rgba(19, 79, 129, 0.14); border-color: rgba(19, 79, 129, 0.18); } .event-listing-img-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .event-listing-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; } .event-listing-card:hover .event-listing-img-wrap img { transform: scale(1.07); } .event-listing-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 22, 40, 0.55) 0%, rgba(10, 22, 40, 0.1) 45%, transparent 100%); transition: opacity 0.4s ease; } .event-listing-card:hover .event-listing-img-wrap::after { opacity: 0.85; } .event-cat-pill { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 13px; border-radius: 100px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: white; backdrop-filter: blur(8px); } .event-photo-count-badge { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, 0.52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: white; font-size: 0.75rem; font-weight: 600; padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.15); } .event-card-hover-cta { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .event-listing-card:hover .event-card-hover-cta { opacity: 1; } .event-listing-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .event-listing-top { flex: 1; margin-bottom: 16px; } .event-listing-body h4 { font-size: 1.08rem; color: var(--dark); margin-bottom: 8px; line-height: 1.35; transition: color 0.2s; } .event-listing-card:hover .event-listing-body h4 { color: var(--primary); } .event-listing-desc { font-size: 0.855rem; color: var(--text-muted); line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .event-listing-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; } .event-listing-meta { display: flex; flex-direction: column; gap: 5px; } .event-listing-meta span { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; } .event-listing-meta svg { flex-shrink: 0; color: var(--primary); } .event-explore-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1.5px solid currentColor; border-radius: 100px; padding: 8px 18px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.78rem; cursor: pointer; transition: var(--transition); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .event-explore-btn:hover { box-shadow: 0 4px 16px rgba(19, 79, 129, 0.2); filter: brightness(1.12); } .event-explore-btn svg { transition: transform 0.3s ease; } .event-listing-card:hover .event-explore-btn svg { transform: translateX(3px); } .events-empty-state { text-align: center; padding: 64px 0; color: var(--text-muted); } .events-empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; } /* ============================================================ EVENTS PAGE — DETAIL VIEW ============================================================ */ .event-detail-back-bar { position: sticky; top: 70px; z-index: 99; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 12px 0; box-shadow: 0 2px 16px rgba(19, 79, 129, 0.06); } .event-back-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--primary); font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.88rem; cursor: pointer; padding: 4px 0; transition: var(--transition-fast); } .event-back-btn:hover { color: var(--primary-dk); } .event-back-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .event-back-btn:hover svg { transform: translateX(-4px); } /* Detail hero */ .event-detail-hero { height: 520px; position: relative; background-size: cover; background-position: center; overflow: hidden; } @media (max-width: 767px) { .event-detail-hero { height: 360px; } } .event-detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 22, 40, 0.4) 0%, transparent 60%); } .event-detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.45) 42%, transparent 72%); } .event-detail-hero-inner { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding-bottom: 44px; } .event-detail-cat-pill { display: inline-block; padding: 5px 16px; border-radius: 100px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: white; margin-bottom: 14px; } .event-detail-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: white; margin-bottom: 16px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } .event-detail-hero-meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .event-detail-hero-meta span { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 500; } .event-detail-hero-meta svg { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; } /* Stats bar */ .event-detail-stats { background: white; border-bottom: 1px solid var(--border); padding: 18px 0; box-shadow: 0 2px 16px rgba(19, 79, 129, 0.05); } .event-detail-stats-inner { display: flex; align-items: center; flex-wrap: wrap; } .event-stat-item { display: flex; align-items: center; gap: 12px; padding: 6px 28px 6px 0; margin-right: 28px; border-right: 1px solid var(--border); } .event-stat-item:last-child { border-right: none; margin-right: 0; } .event-stat-icon { width: 38px; height: 38px; background: var(--bg-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); flex-shrink: 0; } .event-stat-icon svg { width: 16px; height: 16px; } .event-stat-label { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; line-height: 1; } .event-stat-value { font-size: 0.88rem; font-weight: 700; color: var(--dark); font-family: 'Swiss721BT-BoldExtended', sans-serif; line-height: 1; white-space: nowrap; } @media (max-width: 767px) { .event-stat-item { padding: 6px 16px 6px 0; margin-right: 16px; } .event-stat-label { display: none; } } /* Gallery section */ .event-gallery-section { padding: 56px 0 72px; } .event-detail-desc { font-size: 1.02rem; color: var(--text-muted); line-height: 1.82; max-width: 740px; margin-bottom: 52px; } .event-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .event-gallery-header h3 { font-size: 1.5rem; color: var(--dark); margin-bottom: 4px; } .event-slideshow-btn { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1.5px solid var(--primary); color: var(--primary); border-radius: 100px; padding: 10px 24px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: var(--transition); } .event-slideshow-btn:hover { background: var(--primary); color: white; box-shadow: 0 6px 20px rgba(19, 79, 129, 0.25); } .event-slideshow-btn svg { width: 16px; height: 16px; } /* Photo thumbnail grid */ .event-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 991px) { .event-photo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .event-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; } } .photo-thumb { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; display: block; text-decoration: none; } .photo-thumb:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--radius); } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.165, 0.84, 0.44, 1); display: block; } .photo-thumb:hover img { transform: scale(1.08); } .photo-thumb-overlay { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .photo-thumb:hover .photo-thumb-overlay { opacity: 1; } .photo-thumb-expand { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transform: scale(0.75); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .photo-thumb:hover .photo-thumb-expand { transform: scale(1); } .photo-thumb-num { position: absolute; top: 8px; left: 10px; background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.85); font-size: 0.68rem; font-weight: 700; font-family: 'Swiss721BT-BoldExtended', sans-serif; padding: 2px 7px; border-radius: 100px; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .photo-thumb:hover .photo-thumb-num { opacity: 1; } /* Related events */ .related-events-section { background: var(--bg-light); padding: 56px 0 72px; border-top: 1px solid var(--border); } .related-events-header { margin-bottom: 32px; } .related-events-header h3 { font-size: 1.5rem; color: var(--dark); margin-bottom: 4px; } .related-events-header p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } /* ============================================================ EVENTS PAGE v3 — LIST + GALLERY ============================================================ */ /* ── Event card grid ── */ .ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 991px) { .ev-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 575px) { .ev-grid { grid-template-columns: 1fr; gap: 16px; } } .ev-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(19, 79, 129, 0.06); border: 1px solid rgba(19, 79, 129, 0.06); cursor: pointer; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .ev-card:hover { transform: translateY(-10px); box-shadow: 0 24px 60px rgba(19, 79, 129, 0.14); border-color: rgba(19, 79, 129, 0.12); } /* Featured image */ .ev-card-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; } .ev-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1); } .ev-card:hover .ev-card-img img { transform: scale(1.08); } .ev-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 22, 40, 0.45) 0%, transparent 50%); transition: opacity 0.4s ease; } .ev-card:hover .ev-card-img::after { background: linear-gradient(to top, rgba(10, 22, 40, 0.6) 0%, rgba(10, 22, 40, 0.15) 100%); } /* Category pill */ .ev-cat-pill { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 14px; border-radius: 100px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: white; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); } /* Photo count badge */ .ev-photo-badge { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: white; font-size: 0.7rem; font-weight: 600; padding: 5px 12px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.2); } /* Hover overlay CTA */ .ev-card-cta { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: white; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; background: rgba(19, 79, 129, 0.15); backdrop-filter: blur(2px); } .ev-card:hover .ev-card-cta { opacity: 1; } /* Card text body */ .ev-card-body { padding: 20px 22px 22px; } .ev-card-body h5 { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.95rem; color: var(--dark); margin-bottom: 12px; transition: color 0.3s; line-height: 1.35; } .ev-card:hover .ev-card-body h5 { color: var(--primary); } .ev-card-meta { display: flex; flex-direction: row; gap: 16px; } .ev-card-meta span { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; } .ev-card-meta svg { flex-shrink: 0; color: var(--primary); } /* ── Gallery view ── */ /* Sticky back bar */ .ev-back-bar { position: sticky; top: 0; z-index: 99; background: rgba(255, 255, 255, 0.93); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); padding: 12px 0; box-shadow: 0 2px 12px rgba(19, 79, 129, 0.06); } .ev-back-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--primary); font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 700; font-size: 0.86rem; cursor: pointer; padding: 4px 0; flex-shrink: 0; transition: var(--transition-fast); } .ev-back-btn:hover { color: var(--primary-dk); } .ev-back-btn:hover svg { transform: translateX(-3px); } .ev-back-btn svg { transition: transform 0.2s ease; } .ev-back-meta { display: flex; align-items: center; gap: 10px; min-width: 0; } .ev-back-cat { display: inline-block; padding: 3px 10px; border-radius: 100px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: white; flex-shrink: 0; } .ev-back-title { font-size: 0.86rem; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gallery header band */ .ev-gallery-header { background: var(--bg-light); border-bottom: 1px solid var(--border); padding: 28px 0; } .ev-gallery-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ev-gallery-header h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--dark); margin-bottom: 4px; } .ev-gallery-header p { font-size: 0.88rem; color: var(--text-muted); margin: 0; } .ev-photo-total { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--border); border-radius: 100px; padding: 8px 20px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--primary); flex-shrink: 0; } /* Photo grid section */ .ev-gallery-section { padding: 40px 0 72px; } /* Thumbnail grid */ .ev-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 991px) { .ev-photo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .ev-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; } } /* First thumb spans 2×2 */ .ev-thumb:first-child { grid-column: span 2; grid-row: span 2; } .ev-thumb { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; text-decoration: none; } .ev-thumb:first-child { border-radius: var(--radius); } .ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .ev-thumb:hover img { transform: scale(1.08); } .ev-thumb-overlay { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.42); opacity: 0; transition: opacity 0.28s ease; display: flex; align-items: center; justify-content: center; } .ev-thumb:hover .ev-thumb-overlay { opacity: 1; } .ev-thumb-icon { width: 46px; height: 46px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transform: scale(0.72); transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .ev-thumb:hover .ev-thumb-icon { transform: scale(1); } /* ============================================================ COMMON FOOTER & RESPONSIVE FIXES ============================================================ */ footer { background: #0a1628; color: rgba(255, 255, 255, 0.7); padding-top: 80px; padding-bottom: 30px; } footer .footer-brand { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-weight: 800; font-size: 1.4rem; color: white; margin-bottom: 20px; } footer .footer-brand span { color: var(--accent); } footer h6 { color: white; font-size: 0.95rem; font-weight: 700; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1.5px; } footer a { color: rgba(255, 255, 255, 0.55); display: block; margin-bottom: 12px; font-size: 0.9rem; transition: var(--transition-fast); } footer a:hover { color: white; transform: translateX(5px); } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 0 !important; } .social-links a:hover { background: var(--accent); transform: translateY(-4px) !important; } .app-store-btn { background: #000; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; display: flex; align-items: center; gap: 12px; padding: 10px 18px; transition: var(--transition-fast); } .app-store-btn:hover { background: #111; border-color: var(--accent); transform: translateY(-2px); } .store-text { display: flex; flex-direction: column; line-height: 1.2; } .footer-bottom { margin-top: 60px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Navbar responsiveness fix */ .navbar-toggler { border: none !important; padding: 0 !important; } .navbar-toggler:focus { box-shadow: none !important; } .navbar-toggler-icon { filter: brightness(0) invert(1); /* Forces absolute white */ width: 24px; height: 24px; } #mainNav .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.2) !important; padding: 6px 10px !important; border-radius: 8px; } /* Ensure active link visibility */ #mainNav .nav-link.active { color: white !important; background: rgba(255, 255, 255, 0.12); font-weight: 700; } /* Mobile Nav Mobile Improvements */ @media (max-width: 991px) { #mainNav .navbar-collapse { background: #0a1628; border-radius: 16px; margin-top: 15px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } } /* ========================================================================== KCC APP DOWNLOAD MODAL ========================================================================== */ #kccAppModal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } #kccAppModal.active { opacity: 1; visibility: visible; } #kccAppModal .modal-backdrop-kcc { position: absolute; inset: 0; background: rgba(4, 10, 20, 0.85); backdrop-filter: blur(8px); } #kccAppModal .modal-card-kcc { position: relative; z-index: 2; background: linear-gradient(160deg, #0a1628 0%, #0d3a61 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px; max-width: 820px; width: 92%; max-height: 90vh; overflow-y: auto; padding: 48px 44px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); transform: scale(0.92) translateY(20px); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); } #kccAppModal.active .modal-card-kcc { transform: scale(1) translateY(0); } #kccAppModal .modal-close-kcc { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; font-size: 1.2rem; line-height: 1; } #kccAppModal .modal-close-kcc:hover { background: rgba(236, 26, 37, 0.2); border-color: rgba(236, 26, 37, 0.4); color: #fff; transform: rotate(90deg); } #kccAppModal .modal-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: block; } #kccAppModal .modal-title-kcc { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: #fff; margin-bottom: 10px; line-height: 1.2; } #kccAppModal .modal-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); line-height: 1.7; margin-bottom: 28px; max-width: 420px; } #kccAppModal .modal-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } #kccAppModal .modal-store-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } #kccAppModal .modal-store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; } #kccAppModal .modal-store-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } #kccAppModal .modal-store-btn .store-label-top { font-size: 0.6rem; color: rgba(255, 255, 255, 0.5); display: block; line-height: 1; } #kccAppModal .modal-store-btn .store-label-bottom { font-size: 0.9rem; font-weight: 700; display: block; line-height: 1.2; } #kccAppModal .modal-qr-row { display: flex; gap: 16px; } #kccAppModal .modal-qr-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 16px; text-align: center; transition: transform 0.3s ease; } #kccAppModal .modal-qr-item:hover { transform: translateY(-3px); } #kccAppModal .modal-qr-item .qr-img-wrap { background: #fff; border-radius: 12px; padding: 8px; display: inline-block; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } #kccAppModal .modal-qr-item img { width: 90px; height: 90px; object-fit: contain; display: block; } #kccAppModal .modal-qr-item .qr-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); font-weight: 600; } #kccAppModal .modal-qr-item .qr-label strong { color: #fff; display: block; font-size: 0.8rem; } #kccAppModal .modal-app-visual { text-align: center; } #kccAppModal .modal-app-visual img { max-height: 380px; width: auto; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5)); } @media (max-width: 767px) { #kccAppModal .modal-card-kcc { padding: 32px 24px; border-radius: 20px; } #kccAppModal .modal-content-grid { grid-template-columns: 1fr; gap: 24px; } #kccAppModal .modal-app-visual { order: -1; } #kccAppModal .modal-app-visual img { max-height: 220px; } #kccAppModal .modal-qr-item img { width: 70px; height: 70px; } } /* ============================================================ INNER PAGE HERO (Premium Mesh Variant) Standardized across all subpages ============================================================ */ @keyframes meshPulseInner { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes badgePulseInner { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(236, 26, 37, 0.4); } 70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(236, 26, 37, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(236, 26, 37, 0); } } .inner-hero { min-height: 500px; display: flex; align-items: center; background: linear-gradient(-45deg, #0a1628, #134F81, #0d3a61, #1a6ab0, #0a1628); background-size: 400% 400%; animation: meshPulseInner 15s ease infinite; position: relative; overflow: hidden; padding-top: 140px; padding-bottom: 80px; text-align: center; color: white; } .inner-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(26, 106, 176, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(236, 26, 37, 0.1) 0%, transparent 50%); pointer-events: none; } .inner-hero .hero-branding-badge { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px; margin-bottom: 24px; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } .inner-hero h1 { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0,0,0,0.3); } .inner-hero .main-sub { font-size: clamp(0.95rem, 2vw, 1.2rem); font-style: italic; color: rgba(255, 255, 255, 0.85); max-width: 800px; margin: 0 auto 24px; font-weight: 300; } .inner-hero .hero-ecosystem-tag { display: inline-block; background: #ffffff; color: #0a1628; padding: 8px 20px; border-radius: 6px; font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 0.85rem; letter-spacing: 1px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); animation: badgePulseInner 2.5s infinite; margin-top: 10px; } .inner-hero .breadcrumb { background: transparent; padding: 0; margin-top: 40px; } .inner-hero .breadcrumb-item { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .inner-hero .breadcrumb-item a { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .inner-hero .breadcrumb-item a:hover { color: white; } .inner-hero .breadcrumb-item.active { color: white; font-weight: 600; } .inner-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); } /* ============================================================ CTA – JOIN THE MOVEMENT SECTION ============================================================ */ .cta-movement-section { padding: 100px 0; background: linear-gradient(135deg, #0a1628 0%, #0d3a61 100%); position: relative; overflow: hidden; } .cta-movement-glow { position: absolute; width: 35%; filter: blur(80px); pointer-events: none; } .cta-movement-glow--top { top: -20%; left: -10%; height: 55%; background: radial-gradient(circle, rgba(19, 79, 129, 0.12) 0%, transparent 60%); } .cta-movement-glow--bottom { bottom: -20%; right: -10%; height: 50%; background: radial-gradient(circle, rgba(236, 26, 37, 0.06) 0%, transparent 60%); } .cta-movement-container { position: relative; z-index: 1; } .cta-movement-label { color: var(--accent); } .cta-movement-title { font-family: 'Swiss721BT-BoldExtended', sans-serif; color: white; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; margin-bottom: 20px; } .cta-movement-desc { color: rgba(255, 255, 255, 0.6); font-size: 1rem; line-height: 1.8; max-width: 520px; margin-bottom: 32px; } .cta-movement-btn-primary { background: var(--accent); border-color: var(--accent); font-size: 0.95rem; padding: 12px 24px; border: 0; border-radius: 12px; } .cta-movement-btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); } .cta-movement-btn-outline { color: white; border-color: rgba(255, 255, 255, 0.25); font-size: 0.95rem; padding: 12px 24px; border-radius: 12px; } .cta-movement-btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); color: white; } .cta-stat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 28px 20px; text-align: center; transition: all 0.4s; backdrop-filter: blur(10px); } .cta-stat-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); } .cta-stat-num { font-family: 'Swiss721BT-BoldExtended', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 4px; } .cta-stat-num--blue { color: #60a5fa; } .cta-stat-num--green { color: #34d399; } .cta-stat-num--accent { color: var(--accent); } .cta-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.45); } /* ============================================================ DOWNLOAD SECTION – REFACTORED CLASSES ============================================================ */ .download-label { color: rgba(255, 255, 255, 0.6); } .download-title { font-size: clamp(2rem, 4vw, 2.8rem); color: white; margin-bottom: 20px; } .download-desc { color: rgba(255, 255, 255, 0.75); margin-bottom: 36px; font-size: 1.05rem; } .download-app-img { max-height: 520px; filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5)); } /* QR Code Cards */ .qr-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 18px 22px; text-align: center; backdrop-filter: blur(12px); transition: transform 0.3s; } .qr-card:hover { transform: translateY(-4px); } .qr-card-inner { background: white; border-radius: 12px; padding: 10px; display: inline-block; margin-bottom: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .qr-card-img { width: 110px; height: 110px; object-fit: contain; display: block; } .qr-card-label { display: flex; align-items: center; justify-content: center; gap: 7px; } .qr-card-text { text-align: left; } .qr-card-sub { color: rgba(255, 255, 255, 0.6); font-size: 0.65rem; margin: 0; line-height: 1; } .qr-card-store { color: white; font-weight: 700; font-size: 0.85rem; margin: 0; } /* ============================================================ DARK SECTION UTILITY CLASSES (Features Wave) ============================================================ */ .dark-section-label { color: rgba(255, 255, 255, 0.6); } .dark-section-title { color: white; } .text-highlight-blue { color: #60a5fa; } .dark-section-desc { color: rgba(255, 255, 255, 0.7); margin-bottom: 32px; } /* Dealer App Preview (Features Wave Section) */ .dealer-app-preview { position: relative; display: inline-block; } .dealer-app-frame { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; padding: 24px; backdrop-filter: blur(20px); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); } .dealer-app-img { max-height: 420px; border-radius: 12px; display: block; } /* ============================================================ COMPREHENSIVE MOBILE RESPONSIVENESS ============================================================ */ /* --- Tablets (max-width: 991px) --- */ @media (max-width: 991px) { .cta-movement-section { padding: 70px 0; } .cta-stat-num { font-size: 1.5rem; } .download-app-img { max-height: 400px; } .dealer-app-img { max-height: 340px; } .dealer-app-frame { padding: 16px; } .brands-strip { gap: 24px !important; padding: 20px 16px !important; } .qr-card { padding: 14px 16px; } .qr-card-img { width: 90px; height: 90px; } } /* --- Small tablets / large phones (max-width: 767px) --- */ @media (max-width: 767px) { .cta-movement-section { padding: 60px 0; } .cta-movement-title { font-size: 1.6rem; } .cta-movement-desc { font-size: 0.92rem; } .cta-stat-card { padding: 20px 14px; } .cta-stat-num { font-size: 1.4rem; } .cta-stat-label { font-size: 0.65rem; letter-spacing: 1px; } .download-title { font-size: 1.8rem; } .download-desc { font-size: 0.95rem; margin-bottom: 24px; } .download-app-img { max-height: 320px; margin-top: 32px; } .app-store-btn { padding: 12px 18px; gap: 10px; } .app-store-btn .store-text .bottom { font-size: 0.9rem; } .qr-card { padding: 12px 14px; } .qr-card-img { width: 80px; height: 80px; } .qr-card-store { font-size: 0.78rem; } .brands-strip { gap: 20px !important; padding: 16px 12px !important; } .brands-strip img { height: 28px !important; } .dealer-app-frame { padding: 12px; border-radius: 20px; } .dealer-app-img { max-height: 280px; border-radius: 10px; } .testimonial-card { padding: 24px; } .testimonial-card::before { font-size: 4rem; top: 10px; right: 16px; } .feature-card { padding: 28px 24px; } .brand-card .brand-header { padding: 20px; } .brand-card .brand-body { padding: 18px; } .why-card { padding: 24px 18px; } .why-icon { width: 56px; height: 56px; border-radius: 16px; } .hero-img-wrap { min-height: 280px; } .hero-img-wrap img { max-height: 45vh; } } /* --- Phones (max-width: 575px) --- */ @media (max-width: 575px) { .hero { padding-top: 90px; } .hero h1 { font-size: 1.7rem; } .hero p.lead { font-size: 1rem; } .hero-btns { flex-direction: column; gap: 10px; margin-bottom: 24px; } .btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; padding: 14px 20px; } .hero-img-wrap { min-height: 220px; } .hero-img-wrap img { max-height: 38vh; } .section-pad { padding: 48px 0; } .section-title { font-size: 1.5rem; } .section-desc { font-size: 0.95rem; } .about-badge { right: 10px; bottom: 20px; padding: 12px 14px; } .about-badge .text { font-size: 1.1rem; } .about-badge .sub { font-size: 0.65rem; } .check-list li { font-size: 0.9rem; padding: 8px 0; } .stats-banner { padding: 40px 0; } .stat-item .num { font-size: 1.8rem; } .stat-item .lbl { font-size: 0.72rem; } .feature-card { padding: 24px 20px; } .feature-icon { width: 52px; height: 52px; border-radius: 14px; } .feature-card h4 { font-size: 1.05rem; } .features-wave-section > .container { padding-top: 48px; padding-bottom: 48px; } .feature-pill { padding: 14px 16px; } .feature-pill .fp-icon { width: 36px; height: 36px; } .feature-pill .fp-text h6 { font-size: 0.85rem; } .feature-pill .fp-text p { font-size: 0.75rem; } .dealer-app-frame { padding: 10px; border-radius: 16px; } .dealer-app-img { max-height: 240px; border-radius: 8px; } .brand-card .brand-header img { height: 40px; } .brands-strip { gap: 16px !important; padding: 14px 10px !important; } .brands-strip img { height: 24px !important; } .download-section { padding: 60px 0; } .download-title { font-size: 1.6rem; } .download-desc { font-size: 0.9rem; margin-bottom: 20px; } .app-store-btn { padding: 10px 16px; gap: 10px; border-radius: 12px; width: 100%; } .app-store-btn .store-icon { width: 28px; height: 28px; } .app-store-btn .store-text .top { font-size: 0.6rem; } .app-store-btn .store-text .bottom { font-size: 0.88rem; } .qr-card { flex: 1; min-width: 0; padding: 10px 12px; } .qr-card-img { width: 70px; height: 70px; } .qr-card-store { font-size: 0.72rem; } .qr-card-sub { font-size: 0.58rem; } .download-app-img { max-height: 260px; margin-top: 24px; } .why-card { padding: 20px 16px; } .why-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; } .why-card h5 { font-size: 0.95rem; } .why-card p { font-size: 0.82rem; } .testimonial-card { padding: 20px 18px; } .testimonial-card p { font-size: 0.88rem; } .testimonial-card .avatar { width: 38px; height: 38px; } .testimonial-card .name { font-size: 0.88rem; } .testimonial-card .role { font-size: 0.72rem; } .cta-movement-section { padding: 48px 0; } .cta-movement-title { font-size: 1.4rem; } .cta-movement-desc { font-size: 0.88rem; margin-bottom: 24px; } .cta-movement-btn-primary, .cta-movement-btn-outline { width: 100%; justify-content: center; padding: 14px 20px; } .cta-stat-card { padding: 16px 10px; border-radius: 14px; } .cta-stat-num { font-size: 1.3rem; } .cta-stat-label { font-size: 0.6rem; letter-spacing: 0.8px; } .dealer-form-wrap { padding: 20px 16px; border-radius: var(--radius); } .dealer-form-wrap h3 { font-size: 1.3rem; } .dealer-form-wrap .form-control, .dealer-form-wrap .form-select { padding: 12px 14px; font-size: 0.9rem; } /* Footer mobile */ footer .footer-brand { font-size: 1.1rem; } footer h6 { font-size: 0.8rem; margin-bottom: 12px; } footer a { font-size: 0.85rem; } footer .social-links a { width: 36px; height: 36px; } } /* --- Very small phones (max-width: 375px) --- */ @media (max-width: 375px) { .hero h1 { font-size: 1.45rem; } .hero p.lead { font-size: 0.9rem; } .section-title { font-size: 1.3rem; } .stat-item .num { font-size: 1.5rem; } .cta-stat-num { font-size: 1.1rem; } .cta-stat-label { font-size: 0.55rem; } .app-store-btn .store-text .bottom { font-size: 0.8rem; } .qr-card-img { width: 60px; height: 60px; } .brands-strip img { height: 20px !important; } }