/* ============================================ Max Pro Gears B2B Manufacturing - Premium CSS Version: 2.0 | Complete Redesign ============================================ */ /* ---------- CSS CUSTOM PROPERTIES ---------- */ :root { /* Light Theme Colors */ --primary: #ffffff; --accent: #2563eb; --accent-dark: #1d4ed8; --accent-light: #60a5fa; --secondary: #f1f5f9; --surface: #f8fafc; --surface-light: #ffffff; --bg-light: #e2e8f0; --text: #475569; --text-light: #64748b; --text-dark: #0f172a; --white: #0f172a; --dark: #ffffff; --border: rgba(15, 23, 42, 0.1); --border-light: rgba(15, 23, 42, 0.15); --error: #ef4444; --success: #10b981; /* Fonts */ --font-body: 'Inter', sans-serif; --font-heading: 'Oswald', sans-serif; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 100px; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --duration: 0.4s; --duration-fast: 0.2s; --duration-slow: 0.6s; /* Sizing */ --container: 1400px; --header-height: 80px; --topbar-height: 40px; /* Glass */ --glass-bg: rgba(17, 17, 17, 0.8); --glass-border: rgba(15, 23, 42, 0.08); --glass-blur: blur(20px); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(212, 168, 83, 0.15); --shadow-glow-strong: 0 0 50px rgba(212, 168, 83, 0.25); } /* ---------- DARK THEME ---------- Admin Settings > Appearance > Dark Mode adds data-theme="dark" to . This theme is variable-driven (the light palette above was itself produced by swapping these values), so re-declaring the custom properties flips the entire site without touching any rule. --white/--dark are restored to their natural meaning here (white = light, dark = dark). */ html[data-theme="dark"] { --primary: #0b1120; --secondary: #111a2e; --surface: #131c30; --surface-light: #1b2740; --bg-light: #1e293b; --text: #cbd5e1; --text-light: #94a3b8; --text-dark: #f1f5f9; --white: #f8fafc; --dark: #0b1120; --border: rgba(255, 255, 255, 0.10); --border-light: rgba(255, 255, 255, 0.16); --glass-bg: rgba(11, 17, 32, 0.80); --glass-border: rgba(255, 255, 255, 0.08); color-scheme: dark; } html[data-theme="dark"] body { background: var(--primary); color: var(--text); } /* Navigation: these rules hard-code white/light literals instead of using the theme variables, so the variable-flip above can't reach them. Override them explicitly. The scrolled-header rule uses !important, so its dark counterpart needs !important + higher specificity (html + [data-theme] prefix) to win. */ html[data-theme="dark"] .site-header.scrolled { background: rgba(11, 17, 32, 0.95) !important; } html[data-theme="dark"] .site-header.scrolled .header-nav { background: rgba(11, 17, 32, 0.95); box-shadow: 0 1px 30px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .header-top { border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .dropdown-menu { background: rgba(17, 26, 46, 0.98); border-color: var(--border); } /* FAQ / contact form / customizer: these blocks hard-code dark rgba(15,23,42,x) literals for text, labels, borders and panels. On the dark background they become invisible. Re-map them to light equivalents. */ html[data-theme="dark"] .faq-answer-inner { color: #aab4c5; } html[data-theme="dark"] .faq-question { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .faq-question:hover { background: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .floating-field input, html[data-theme="dark"] .floating-field textarea { border-bottom-color: rgba(255, 255, 255, 0.22); } html[data-theme="dark"] .floating-field label { color: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] .social-btn { border-color: rgba(255, 255, 255, 0.22); } html[data-theme="dark"] .panel-title { color: rgba(255, 255, 255, 0.6); } html[data-theme="dark"] .product-type-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); } html[data-theme="dark"] .preview-frame { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .upload-placeholder { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.5); } html[data-theme="dark"] .summary-item { border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .summary-label { color: rgba(255, 255, 255, 0.5); } html[data-theme="dark"] .summary-color-dot { border-color: rgba(255, 255, 255, 0.25); } /* ---------- RESET & BASE ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) var(--primary); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--primary); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-light); } /* Selection */ ::selection { background: var(--accent); color: var(--primary); } ::-moz-selection { background: var(--accent); color: var(--primary); } body { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--text); background: var(--primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; transition: color var(--duration) var(--ease); } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } img[loading="lazy"] { opacity: 0; transition: opacity var(--duration-slow) var(--ease); } img[loading="lazy"].loaded, img.loaded { opacity: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; } h1 { font-size: 56px; } h2 { font-size: 42px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { line-height: 1.8; } input, textarea, select, button { font-family: var(--font-body); font-size: 15px; outline: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section-padding { padding: var(--space-3xl) 0; } /* ---------- NOISE / GRAIN TEXTURE OVERLAY ---------- */ .noise-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 36px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border: none; cursor: pointer; transition: all var(--duration) var(--ease); font-family: var(--font-body); position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; transition: left var(--duration) var(--ease); z-index: -1; } .btn:hover::before { left: 0; } .btn-primary { background: var(--primary); color: var(--white); border: 1px solid var(--primary); } .btn-primary::before { background: var(--accent); } .btn-primary:hover { color: var(--primary); border-color: var(--accent); } .btn-accent { background: var(--accent); color: var(--primary); border: 1px solid var(--accent); } .btn-accent::before { background: var(--primary); } .btn-accent:hover { color: var(--accent); } .btn-outline { background: transparent; color: var(--white); border: 1px solid var(--white); } .btn-outline::before { background: var(--white); } .btn-outline:hover { color: var(--primary); } .btn-outline-dark { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-outline-dark::before { background: var(--primary); } .btn-outline-dark:hover { color: var(--white); } .btn-white { background: var(--white); color: var(--primary); border: 1px solid var(--white); } .btn-white::before { background: var(--accent); } .btn-white:hover { color: var(--primary); border-color: var(--accent); } /* Magnetic button effect */ .btn-magnetic { transition: transform 0.2s var(--ease); } /* ---------- PRELOADER ---------- */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease); } .preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-logo { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--white); letter-spacing: 8px; text-transform: uppercase; animation: preloaderPulse 1.5s var(--ease) infinite; } .preloader-logo img { display: block; max-width: 260px; max-height: 110px; width: auto; height: auto; object-fit: contain; } .preloader-bar { width: 120px; height: 2px; background: rgba(15, 23, 42, 0.1); margin-top: 30px; border-radius: 2px; overflow: hidden; } .preloader-bar::after { content: ''; display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 2px; animation: preloaderSlide 1.2s var(--ease) infinite; } @keyframes preloaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes preloaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* ---------- HEADER ---------- */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all var(--duration) var(--ease); } /* Top Bar */ .header-top { background: var(--primary); padding: 0; height: var(--topbar-height); display: flex; align-items: center; border-bottom: 1px solid rgba(15, 23, 42, 0.05); transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); } .header-top.hidden { transform: translateY(-100%); opacity: 0; } .header-top .container { display: flex; align-items: center; justify-content: space-between; } .header-top-left, .header-top-right { display: flex; align-items: center; gap: 24px; } .header-top-left a, .header-top-right a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); letter-spacing: 0.5px; transition: color var(--duration) var(--ease); } .header-top-left a:hover, .header-top-right a:hover { color: var(--accent); } .header-top-left i, .header-top-right i { font-size: 11px; color: var(--accent); } /* Main Navigation */ .header-nav { background: transparent; height: var(--header-height); display: flex; align-items: center; transition: all var(--duration) var(--ease); } .site-header.scrolled .header-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 1px 30px rgba(0, 0, 0, 0.3); } .site-header.scrolled .header-top { transform: translateY(-100%); height: 0; opacity: 0; overflow: hidden; } .header-nav .container { display: flex; align-items: center; justify-content: space-between; } /* Logo */ .header-logo { flex-shrink: 0; } .header-logo a { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--white); letter-spacing: 6px; text-transform: uppercase; transition: color var(--duration) var(--ease); } .header-logo a:hover { color: var(--accent); } /* Nav Links */ .main-menu { display: flex; align-items: center; gap: 0; } .main-menu > li { position: relative; } .main-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 20px; color: var(--text-dark); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; transition: color var(--duration) var(--ease); position: relative; font-family: var(--font-body); } .main-menu > li > a::after { content: ''; position: absolute; bottom: 0; left: 20px; width: 0; height: 2px; background: var(--accent); transition: width var(--duration) var(--ease); } .main-menu > li > a:hover::after, .main-menu > li.active > a::after { width: calc(100% - 40px); } .main-menu > li > a:hover, .main-menu > li.active > a { color: var(--accent); } .main-menu > li > a .fa-chevron-down { font-size: 8px; transition: transform var(--duration) var(--ease); } .main-menu > li:hover > a .fa-chevron-down { transform: rotate(180deg); } /* Dropdown Menu - Glassmorphism */ .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--glass-border); opacity: 0; visibility: hidden; transform: translateY(15px); transition: all var(--duration) var(--ease); z-index: 100; padding: 8px 0; } .main-menu > li:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu li a { display: block; padding: 10px 24px; color: var(--text-dark); font-size: 13px; letter-spacing: 0.5px; transition: all var(--duration) var(--ease); position: relative; } .dropdown-menu li a::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: rgba(212, 168, 83, 0.05); transition: width var(--duration) var(--ease); } .dropdown-menu li a:hover::before { width: 100%; } .dropdown-menu li a:hover { color: var(--accent); padding-left: 30px; } /* Hamburger Menu Button */ .hamburger { display: none; width: 30px; height: 24px; position: relative; cursor: pointer; background: none; border: none; padding: 0; z-index: 1001; } .hamburger span { display: block; position: absolute; width: 100%; height: 2px; background: var(--white); left: 0; transition: all var(--duration) var(--ease); } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger span:nth-child(3) { bottom: 0; } .hamburger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(20px); } .hamburger.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* Mobile Overlay Menu */ .mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--duration-slow) var(--ease); } .mobile-overlay.active { opacity: 1; visibility: visible; } .mobile-menu { text-align: center; } .mobile-menu li { overflow: hidden; } .mobile-menu li a { display: block; font-family: var(--font-heading); font-size: 36px; font-weight: 500; color: var(--white); text-transform: uppercase; letter-spacing: 4px; padding: 12px 0; transform: translateY(100%); transition: transform 0.5s var(--ease), color var(--duration) var(--ease); } .mobile-overlay.active .mobile-menu li a { transform: translateY(0); } .mobile-overlay.active .mobile-menu li:nth-child(1) a { transition-delay: 0.1s; } .mobile-overlay.active .mobile-menu li:nth-child(2) a { transition-delay: 0.15s; } .mobile-overlay.active .mobile-menu li:nth-child(3) a { transition-delay: 0.2s; } .mobile-overlay.active .mobile-menu li:nth-child(4) a { transition-delay: 0.25s; } .mobile-overlay.active .mobile-menu li:nth-child(5) a { transition-delay: 0.3s; } .mobile-overlay.active .mobile-menu li:nth-child(6) a { transition-delay: 0.35s; } .mobile-overlay.active .mobile-menu li:nth-child(7) a { transition-delay: 0.4s; } .mobile-overlay.active .mobile-menu li:nth-child(8) a { transition-delay: 0.45s; } .mobile-menu li a:hover { color: var(--accent); } .mobile-menu .mobile-dropdown { display: none; padding: 5px 0 15px; } .mobile-menu .mobile-dropdown a { font-size: 16px; font-family: var(--font-body); letter-spacing: 2px; padding: 6px 0; color: var(--text); } .mobile-menu li.dropdown-open .mobile-dropdown { display: block; } /* Header search */ .header-search { display: flex; align-items: center; } .header-search-btn { background: none; border: none; color: rgba(15, 23, 42, 0.6); font-size: 16px; cursor: pointer; padding: 10px; transition: color var(--duration) var(--ease); } .header-search-btn:hover { color: var(--accent); } /* ---------- HERO SECTION ---------- */ .hero-section { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); } .hero-slider { position: relative; width: 100%; height: 100%; } .hero-slider .swiper-wrapper { height: 100%; } .hero-slide { position: relative; width: 100%; height: 100%; overflow: hidden; } .hero-slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-slide-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 6s var(--ease); } .hero-slide.swiper-slide-active .hero-slide-bg img { transform: scale(1); } .hero-slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0.85) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(15, 23, 42, 0.3) 100% ); } .hero-slide-content { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding: 0 8%; } .hero-text { max-width: 650px; } .hero-label { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 24px; font-family: var(--font-body); } .hero-label::before { content: ''; width: 40px; height: 1px; background: var(--accent); } .hero-text h1 { font-size: 72px; font-weight: 700; color: var(--white); line-height: 1.05; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; clip-path: inset(0 0 0 0); } .hero-text h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--accent); } .hero-text p { font-size: 17px; color: rgba(15, 23, 42, 0.65); line-height: 1.8; margin-bottom: 40px; max-width: 480px; } .hero-buttons { display: flex; gap: 16px; align-items: center; } /* Hero Progress Bar */ .hero-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(15, 23, 42, 0.1); z-index: 10; } .hero-progress-bar { height: 100%; background: var(--accent); width: 0; transition: width 0.1s linear; } /* Hero Slide Counter */ .hero-counter { position: absolute; bottom: 40px; left: 8%; z-index: 10; font-family: var(--font-heading); font-size: 18px; color: var(--white); letter-spacing: 2px; } .hero-counter .current { font-size: 28px; font-weight: 700; color: var(--accent); } .hero-counter .separator { margin: 0 8px; color: rgba(15, 23, 42, 0.3); } .hero-counter .total { color: rgba(15, 23, 42, 0.4); } /* Hero Navigation Dots - Vertical Right */ .hero-dots { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 16px; } .hero-dot { width: 3px; height: 20px; background: rgba(15, 23, 42, 0.3); border: none; cursor: pointer; transition: all var(--duration) var(--ease); padding: 0; } .hero-dot.active { height: 40px; background: var(--accent); } /* Hero Navigation Arrows */ .hero-nav { position: absolute; bottom: 40px; right: 8%; z-index: 10; display: flex; gap: 4px; } .hero-nav-btn { width: 50px; height: 50px; border: 1px solid rgba(15, 23, 42, 0.2); background: transparent; color: var(--white); font-size: 16px; cursor: pointer; transition: all var(--duration) var(--ease); display: flex; align-items: center; justify-content: center; } .hero-nav-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--primary); } /* ---------- SECTION HEADERS ---------- */ .section-header { text-align: center; margin-bottom: 60px; } .section-label { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 16px; font-family: var(--font-body); } .section-label::before, .section-label::after { content: ''; width: 30px; height: 1px; background: var(--accent); } .section-header h2 { margin-bottom: 16px; } .section-header p { max-width: 560px; margin: 0 auto; font-size: 15px; } /* Dark section headers */ .dark-section .section-header h2, .dark-section h2 { color: var(--white); } .dark-section .section-header p, .dark-section p { color: var(--text); } /* ---------- INTRODUCTION SECTION ---------- */ .intro-section { padding: var(--space-3xl) 0; overflow: hidden; background: var(--surface); } .intro-section .container { display: flex; align-items: center; gap: 80px; } .intro-image { flex: 1; position: relative; } .intro-image img { width: 100%; object-fit: cover; position: relative; z-index: 2; } .intro-image::after { content: ''; position: absolute; top: 30px; left: 30px; width: 100%; height: 100%; border: 2px solid var(--accent); z-index: 1; transition: all var(--duration) var(--ease); } .intro-image:hover::after { top: 20px; left: 20px; } .intro-content { flex: 1; } .intro-label { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 16px; } .intro-label::before { content: ''; width: 40px; height: 1px; background: var(--accent); } .intro-content h2 { margin-bottom: 20px; } .intro-content p { margin-bottom: 20px; line-height: 1.9; font-size: 15px; } .intro-features { margin: 30px 0; } .intro-feature-item { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 15px; color: #555; } .intro-feature-item i { color: var(--accent); font-size: 14px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 50%; flex-shrink: 0; } /* Intro Stats */ .intro-stats { display: flex; gap: 40px; margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; } .intro-stat { text-align: center; } .intro-stat .stat-number { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--primary); line-height: 1; } .intro-stat .stat-number span { color: var(--accent); } .intro-stat .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--text); margin-top: 6px; } /* ---------- CATEGORY CARDS ---------- */ .categories-section { padding: var(--space-3xl) 0; background: var(--bg-light); } .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .category-card { position: relative; height: 400px; overflow: hidden; display: block; cursor: pointer; } .category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease); } /* Ken Burns effect on hover */ .category-card:hover img { transform: scale(1.15); } .category-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to top, rgba(255, 255, 255, 0.8) 0%, rgba(15, 23, 42, 0.2) 60%, transparent 100% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; transition: background var(--duration) var(--ease); } .category-card:hover .category-card-overlay { background: linear-gradient( to top, rgba(255, 255, 255, 0.7) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100% ); } .category-card-overlay h3 { color: var(--white); font-size: 26px; margin-bottom: 6px; transform: translateY(0); transition: transform var(--duration) var(--ease); } .category-card-overlay .category-count { display: inline-block; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .category-card-explore { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 2px; opacity: 0; transform: translateY(10px); transition: all var(--duration) var(--ease); } .category-card:hover .category-card-explore { opacity: 1; transform: translateY(0); } .category-card-explore i { transition: transform var(--duration) var(--ease); } .category-card:hover .category-card-explore i { transform: translateX(6px); } /* ---------- TRUST BADGES / FEATURES BAR ---------- */ .trust-badges { padding: 60px 0; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); position: relative; overflow: hidden; } .badges-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .badge-item { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: rgba(15, 23, 42, 0.06); border: 1px solid rgba(15, 23, 42, 0.12); backdrop-filter: blur(10px); transition: all var(--duration) var(--ease); flex: 1; animation: floatBadge 6s var(--ease) infinite; } .badge-item:nth-child(2) { animation-delay: 1.5s; } .badge-item:nth-child(3) { animation-delay: 3s; } .badge-item:nth-child(4) { animation-delay: 4.5s; } .badge-item:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(212, 168, 83, 0.2); transform: translateY(-2px); } .badge-item i { font-size: 28px; color: var(--accent); transition: transform var(--duration) var(--ease); flex-shrink: 0; } .badge-item:hover i { transform: scale(1.15); animation: pulse 0.6s var(--ease); } .badge-text h4 { color: var(--white); font-size: 14px; font-weight: 600; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .badge-text p { font-size: 12px; color: var(--text); line-height: 1.5; } @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ---------- PRODUCT CARDS ---------- */ .products-section { padding: var(--space-3xl) 0; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card { background: var(--white); border: 1px solid #eee; position: relative; transition: all var(--duration) var(--ease); overflow: hidden; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); border-color: transparent; } .product-card.featured { border-color: transparent; animation: borderGlow 3s var(--ease) infinite; } @keyframes borderGlow { 0%, 100% { box-shadow: 0 0 5px rgba(212, 168, 83, 0.1); } 50% { box-shadow: 0 0 20px rgba(212, 168, 83, 0.15); } } .product-card-image { position: relative; overflow: hidden; height: 300px; } .product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .product-card:hover .product-card-image img { transform: scale(1.05); } /* Second image crossfade */ .product-card-image .product-img-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--duration) var(--ease); } .product-card:hover .product-card-image .product-img-hover { opacity: 1; } /* Category tag with glassmorphism */ .product-tag { position: absolute; top: 12px; left: 12px; padding: 6px 14px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); color: var(--white); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; z-index: 3; } /* Quick action overlay */ .product-actions { position: absolute; bottom: 0; left: 0; width: 100%; padding: 16px; background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); display: flex; justify-content: center; gap: 10px; transform: translateY(100%); transition: transform var(--duration) var(--ease); } .product-card:hover .product-actions { transform: translateY(0); } .product-actions .action-btn { padding: 8px 18px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border: 1px solid rgba(15, 23, 42, 0.3); background: transparent; color: var(--white); cursor: pointer; transition: all var(--duration) var(--ease); } .product-actions .action-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--primary); } .product-actions .action-btn i { margin-right: 4px; } /* Wishlist button */ .product-wishlist { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: var(--white); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #999; z-index: 3; transition: all var(--duration) var(--ease); opacity: 0; transform: translateY(-10px); } .product-card:hover .product-wishlist { opacity: 1; transform: translateY(0); } .product-wishlist:hover { color: var(--accent); transform: scale(1.1); } .product-card-info { padding: 20px; text-align: center; } .product-card-info h3 { font-family: var(--font-body); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 8px; } .product-card-info h3 a { color: var(--primary); transition: color var(--duration) var(--ease); } .product-card-info h3 a:hover { color: var(--accent); } .product-card-info .product-category { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); } .product-card-info .btn { padding: 8px 22px; font-size: 11px; margin-top: 12px; } /* Products toolbar */ .products-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .products-toolbar .results-count { font-size: 14px; color: var(--text); } .products-toolbar select { padding: 8px 16px; border: 1px solid #ddd; background: var(--white); font-size: 13px; color: #555; cursor: pointer; transition: border-color var(--duration) var(--ease); } .products-toolbar select:focus { border-color: var(--accent); } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 50px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #ddd; color: #555; font-size: 14px; font-weight: 500; transition: all var(--duration) var(--ease); } .pagination a:hover, .pagination .current { background: var(--primary); color: var(--white); border-color: var(--primary); } .pagination .current { background: var(--accent); border-color: var(--accent); color: var(--primary); } /* ---------- CTA BANNER (PARALLAX) ---------- */ .cta-banner { position: relative; padding: 120px 0; background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; } .cta-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.85) 0%, rgba(15, 23, 42, 0.6) 100% ); transition: background var(--duration-slow) var(--ease); } .cta-banner:hover .cta-banner-overlay { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.75) 0%, rgba(15, 23, 42, 0.5) 100% ); } .cta-banner .container { position: relative; z-index: 2; text-align: center; } .cta-banner h2 { font-size: 48px; color: var(--white); margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .cta-banner p { font-size: 18px; color: rgba(255, 255, 255, 0.7); margin-bottom: 36px; max-width: 600px; margin-left: auto; margin-right: auto; } /* ---------- PRODUCT CUSTOMIZER SECTION ---------- */ .customizer-section { padding: var(--space-3xl) 0; background: var(--primary); position: relative; overflow: hidden; } .customizer-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .customizer-content { display: flex; align-items: center; gap: 80px; position: relative; z-index: 2; } .customizer-text { flex: 1; } .customizer-text h2 { color: var(--white); margin-bottom: 16px; } .customizer-text p { color: var(--text); margin-bottom: 30px; } .customizer-steps { margin-bottom: 40px; } .customizer-step { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .customizer-step-number { width: 40px; height: 40px; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 16px; color: var(--accent); font-weight: 600; flex-shrink: 0; } .customizer-step-text h4 { color: var(--white); font-family: var(--font-body); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 2px; } .customizer-step-text p { font-size: 13px; color: var(--text); margin-bottom: 0; } .customizer-visual { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; } .customizer-visual img { max-width: 400px; width: 100%; } /* Color swatches */ .color-swatches { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .color-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all var(--duration) var(--ease); position: relative; } .color-swatch.active, .color-swatch:hover { border-color: var(--accent); transform: scale(1.15); } .color-swatch::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; transition: opacity var(--duration) var(--ease); } .color-swatch.active::after { opacity: 1; } /* ---------- IMMERSIVE PRODUCT CAROUSEL ---------- */ .product-carousel-section { padding: var(--space-3xl) 0; background: var(--bg-light); overflow: hidden; } .product-carousel .swiper-slide { width: 350px; transition: all var(--duration) var(--ease); } .product-carousel .swiper-slide-active { width: 400px; } .carousel-card { position: relative; overflow: hidden; background: var(--white); transition: all var(--duration) var(--ease); transform: perspective(1000px) rotateY(0); } .carousel-card:hover { transform: perspective(1000px) rotateY(-3deg); box-shadow: var(--shadow-lg); } .carousel-card img { width: 100%; height: 400px; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .carousel-card:hover img { transform: scale(1.05); } /* Navigation arrows - glassmorphism */ .carousel-nav-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.05); color: var(--primary); font-size: 16px; cursor: pointer; transition: all var(--duration) var(--ease); display: flex; align-items: center; justify-content: center; } .carousel-nav-btn:hover { background: var(--accent); color: var(--primary); border-color: var(--accent); } /* Size pills on hover */ .carousel-sizes { position: absolute; bottom: 16px; left: 16px; display: flex; gap: 6px; opacity: 0; transform: translateY(10px); transition: all var(--duration) var(--ease); } .carousel-card:hover .carousel-sizes { opacity: 1; transform: translateY(0); } .size-pill { padding: 4px 10px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: 1px; } /* ---------- FAQ ACCORDION ---------- */ .faq-section { padding: var(--space-3xl) 0; } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid #eee; transition: all var(--duration) var(--ease); } .faq-item.active { border-left: 3px solid var(--accent); padding-left: 20px; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; background: transparent; color: var(--primary); border: none; font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; font-family: var(--font-body); transition: color var(--duration) var(--ease); } .faq-question:hover { color: var(--accent); } .faq-question .faq-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .faq-question .faq-icon::before, .faq-question .faq-icon::after { content: ''; position: absolute; background: var(--primary); transition: transform var(--duration) var(--ease); } .faq-question .faq-icon::before { width: 14px; height: 2px; } .faq-question .faq-icon::after { width: 2px; height: 14px; } .faq-item.active .faq-question .faq-icon::after { transform: rotate(90deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease); } .faq-item.active .faq-answer { max-height: 400px; } .faq-answer-inner { padding: 0 0 22px; line-height: 1.9; font-size: 14px; color: #666; } /* ---------- CONTACT SECTION ---------- */ .contact-section { padding: var(--space-3xl) 0; background: var(--primary); position: relative; overflow: hidden; } /* Shape divider at top */ .contact-section .shape-divider { position: absolute; top: -1px; left: 0; width: 100%; z-index: 2; } .contact-section .shape-divider svg { display: block; width: 100%; height: auto; } .contact-wrapper { display: flex; gap: 60px; position: relative; z-index: 3; } .contact-info { flex: 1; } .contact-info h2 { color: var(--white); margin-bottom: 16px; } .contact-info > p { color: var(--text); margin-bottom: 40px; } .contact-info-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: rgba(15, 23, 42, 0.03); border: 1px solid var(--glass-border); margin-bottom: 16px; transition: all var(--duration) var(--ease); } .contact-info-card:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(212, 168, 83, 0.2); box-shadow: var(--shadow-glow); } .contact-info-card i { color: var(--accent); font-size: 20px; margin-top: 2px; flex-shrink: 0; } .contact-info-card h4 { color: var(--white); font-family: var(--font-body); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .contact-info-card p, .contact-info-card a { color: var(--text); font-size: 14px; } .contact-info-card a:hover { color: var(--accent); } /* Contact form */ .contact-form-wrapper { flex: 1; } .contact-form-wrapper h2 { color: var(--white); margin-bottom: 30px; } /* ---------- FORMS (PREMIUM STYLE) ---------- */ .form-group { margin-bottom: 24px; position: relative; } .form-group label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--text); margin-bottom: 8px; transition: color var(--duration) var(--ease); } /* Floating label style for contact section */ .contact-section .form-group input, .contact-section .form-group textarea, .contact-section .form-group select { width: 100%; padding: 14px 0; border: none; border-bottom: 1px solid rgba(15, 23, 42, 0.15); background: transparent; font-size: 14px; color: var(--white); transition: border-color var(--duration) var(--ease); } .contact-section .form-group input:focus, .contact-section .form-group textarea:focus, .contact-section .form-group select:focus { border-bottom-color: var(--accent); } .contact-section .form-group input::placeholder, .contact-section .form-group textarea::placeholder { color: rgba(15, 23, 42, 0.3); } .contact-section .form-group textarea { min-height: 100px; resize: vertical; } /* Regular form inputs (light bg) */ .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; border: 1px solid #ddd; background: var(--white); font-size: 14px; color: var(--primary); transition: border-color var(--duration) var(--ease); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent); } .form-group textarea { min-height: 120px; resize: vertical; } .form-row { display: flex; gap: 20px; } .form-row .form-group { flex: 1; } .form-group .error-msg { color: var(--error); font-size: 12px; margin-top: 6px; display: none; } .form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: var(--error); } .form-group.has-error .error-msg { display: block; } .form-success { background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.3); color: var(--success); padding: 16px 20px; margin-bottom: 20px; font-size: 14px; display: none; } .form-error-message { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); color: var(--error); padding: 16px 20px; margin-bottom: 20px; font-size: 14px; display: none; } /* Submit button loading state */ .btn-submit { position: relative; } .btn-submit.loading { color: transparent; pointer-events: none; } .btn-submit.loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(15, 23, 42, 0.3); border-top-color: var(--white); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Checkbox group */ .checkbox-group { display: flex; flex-wrap: wrap; gap: 16px; } .checkbox-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; text-transform: none; letter-spacing: 0; } .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } /* ---------- LEAD FORMS (WHOLESALE / CUSTOM GEAR) ---------- */ .lead-form-section { padding: var(--space-3xl) 0; } .lead-form-container { max-width: 700px; margin: 0 auto; background: var(--white); padding: 60px 50px; box-shadow: var(--shadow-md); border: 1px solid #eee; } .lead-form-container h2 { margin-bottom: 10px; } .lead-form-container p { margin-bottom: 30px; } /* ---------- NEWSLETTER SECTION ---------- */ .newsletter-section { padding: 80px 0; background: linear-gradient(135deg, var(--primary), var(--secondary), #0f0f0f); background-size: 200% 200%; animation: gradientShift 8s ease infinite; position: relative; overflow: hidden; } /* Floating shapes */ .newsletter-section .float-shape { position: absolute; border-radius: 50%; opacity: 0.03; pointer-events: none; } .newsletter-section .float-shape-1 { width: 300px; height: 300px; background: var(--accent); top: -100px; right: -50px; animation: float 10s var(--ease) infinite; } .newsletter-section .float-shape-2 { width: 200px; height: 200px; background: var(--white); bottom: -80px; left: 10%; animation: float 14s var(--ease) infinite reverse; } .newsletter-section .float-shape-3 { width: 150px; height: 150px; background: var(--accent); top: 20%; left: -50px; animation: float 12s var(--ease) infinite; } .newsletter-inner { text-align: center; position: relative; z-index: 2; } .newsletter-content h2 { color: var(--white); font-size: 36px; margin-bottom: 10px; } .newsletter-content p { color: var(--text); font-size: 15px; margin-bottom: 36px; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.1); } .newsletter-form input { flex: 1; padding: 16px 24px; border: none; background: rgba(15, 23, 42, 0.05); color: var(--white); font-size: 14px; } .newsletter-form input::placeholder { color: rgba(15, 23, 42, 0.3); } .newsletter-form button { padding: 16px 32px; background: var(--accent); color: var(--primary); border: none; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; cursor: pointer; transition: all var(--duration) var(--ease); } .newsletter-form button:hover { background: var(--accent-light); } .newsletter-message { margin-top: 16px; font-size: 14px; color: var(--accent); } /* Newsletter success animation */ .newsletter-success { animation: scaleIn 0.4s var(--ease-spring); } /* ---------- PRODUCT DETAIL PAGE ---------- */ .product-detail { padding: 60px 0; } .product-detail .container { display: flex; gap: 60px; } .product-gallery { flex: 1; max-width: 550px; position: sticky; top: 120px; align-self: flex-start; } .product-gallery-main { width: 100%; height: 550px; overflow: hidden; margin-bottom: 12px; border: 1px solid #eee; cursor: zoom-in; position: relative; } .product-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease); } .product-thumbnails { display: flex; gap: 8px; } .product-thumbnails .thumb { width: 80px; height: 80px; border: 2px solid transparent; cursor: pointer; overflow: hidden; transition: border-color var(--duration) var(--ease); opacity: 0.6; } .product-thumbnails .thumb.active, .product-thumbnails .thumb:hover { border-color: var(--accent); opacity: 1; } .product-thumbnails .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-info { flex: 1; } .product-info h1 { font-size: 32px; margin-bottom: 20px; } .product-info .product-short-desc { margin-bottom: 30px; line-height: 1.9; font-size: 15px; } .product-meta { margin-bottom: 30px; padding: 24px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .product-meta p { margin-bottom: 10px; font-size: 14px; } .product-meta p strong { color: var(--primary); min-width: 140px; display: inline-block; font-weight: 600; } .product-info .btn { margin-top: 10px; margin-right: 10px; } /* Product Tabs */ .product-tabs { margin-top: 80px; } .product-tabs .tab-nav { display: flex; border-bottom: 1px solid #eee; gap: 0; } .product-tabs .tab-nav button { padding: 14px 32px; background: none; border: none; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; position: relative; transition: color var(--duration) var(--ease); text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-body); } .product-tabs .tab-nav button.active { color: var(--primary); } .product-tabs .tab-nav button::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--duration) var(--ease); } .product-tabs .tab-nav button.active::after { width: 100%; } .product-tabs .tab-content { display: none; padding: 30px 0; } .product-tabs .tab-content.active { display: block; animation: fadeInUp 0.4s var(--ease); } .product-tabs .tab-content p { margin-bottom: 15px; line-height: 1.9; } /* Fullscreen Image Modal */ .image-fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: none; align-items: center; justify-content: center; } .image-fullscreen.active { display: flex; } .image-fullscreen img { max-width: 90%; max-height: 90vh; object-fit: contain; } .image-fullscreen .close-fullscreen { position: absolute; top: 24px; right: 30px; color: var(--white); font-size: 28px; cursor: pointer; background: none; border: none; transition: color var(--duration) var(--ease); } .image-fullscreen .close-fullscreen:hover { color: var(--accent); } /* Related Products */ .related-products { padding: 80px 0; background: var(--bg-light); } /* ---------- SERVICES SECTION ---------- */ .services-section { padding: var(--space-3xl) 0; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { background: var(--white); border: 1px solid #eee; overflow: hidden; transition: all var(--duration) var(--ease); position: relative; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); border-color: transparent; } .service-card-image { height: 240px; overflow: hidden; } .service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); } .service-card:hover .service-card-image img { transform: scale(1.08); } .service-card-content { padding: 28px; } .service-card-content h3 { font-size: 20px; margin-bottom: 10px; } .service-card-content p { font-size: 14px; line-height: 1.8; } /* ---------- PROCESS STEPS / TIMELINE ---------- */ .process-section { padding: var(--space-3xl) 0; background: var(--bg-light); } .process-timeline { position: relative; max-width: 900px; margin: 0 auto; } .process-timeline::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: #ddd; } .process-step { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; position: relative; } .process-step:nth-child(even) { flex-direction: row-reverse; } .process-step-content { flex: 1; background: var(--white); padding: 30px; border: 1px solid #eee; transition: all var(--duration) var(--ease); } .process-step-content:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); } .process-step .step-number { position: absolute; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background: var(--accent); color: var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 700; z-index: 2; } .process-step h3 { font-size: 18px; margin-bottom: 8px; } .process-step p { font-size: 14px; line-height: 1.8; } /* Horizontal process steps fallback */ .process-steps { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; } .process-steps .process-step { flex: 0 0 250px; background: var(--white); padding: 30px 25px; text-align: center; border: 1px solid #eee; position: relative; display: block; margin-bottom: 0; } .process-steps .process-step .step-number { position: static; transform: none; display: inline-flex; margin-bottom: 15px; } /* ---------- BREADCRUMBS ---------- */ .breadcrumbs { padding: 14px 0; background: transparent; position: relative; z-index: 5; } .breadcrumbs ul { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.5px; } .breadcrumbs ul li { display: flex; align-items: center; gap: 8px; } .breadcrumbs ul li a { color: rgba(15, 23, 42, 0.5); transition: color var(--duration) var(--ease); } .breadcrumbs ul li a:hover { color: var(--accent); } .breadcrumbs ul li span { color: var(--white); font-weight: 500; } .breadcrumbs ul li .separator { color: rgba(15, 23, 42, 0.3); font-size: 10px; } /* ---------- PAGE HERO BANNER ---------- */ .page-hero { background: var(--primary); padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed; } .page-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { color: var(--white); font-size: 48px; font-weight: 700; letter-spacing: 4px; } .page-hero p { color: rgba(15, 23, 42, 0.5); margin-top: 12px; font-size: 15px; letter-spacing: 1px; } /* ---------- ABOUT PAGE ---------- */ .about-section { padding: var(--space-3xl) 0; } .about-row { display: flex; align-items: center; gap: 80px; margin-bottom: 80px; } .about-row:last-child { margin-bottom: 0; } .about-row.reverse { flex-direction: row-reverse; } .about-image { flex: 1; position: relative; } .about-image img { width: 100%; object-fit: cover; } .about-image::after { content: ''; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; border: 2px solid var(--accent); z-index: -1; transition: all var(--duration) var(--ease); } .about-row.reverse .about-image::after { left: auto; right: -20px; } .about-content { flex: 1; } .about-content .intro-label { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 12px; } .about-content h2 { margin-bottom: 20px; } .about-content p { margin-bottom: 16px; line-height: 1.9; font-size: 15px; } /* ---------- FOOTER ---------- */ .site-footer { background: var(--primary); color: var(--text); position: relative; } /* Footer top gradient line */ .site-footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient( 90deg, transparent, var(--accent), transparent ); } .footer-main { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 50px; padding: 80px 0 50px; } .footer-col h3 { color: var(--white); font-size: 14px; font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 3px; font-family: var(--font-body); position: relative; padding-bottom: 14px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--accent); } .footer-about .footer-logo { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--white); letter-spacing: 4px; text-transform: uppercase; display: block; margin-bottom: 16px; } .footer-about p { font-size: 13px; line-height: 1.9; margin-bottom: 24px; color: var(--text); } /* Footer social icons */ .footer-social { display: flex; gap: 10px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(15, 23, 42, 0.1); color: var(--text); font-size: 15px; transition: all var(--duration) var(--ease); position: relative; overflow: hidden; } .footer-social a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: var(--accent); transition: height var(--duration) var(--ease); z-index: -1; } .footer-social a:hover::before { height: 100%; } .footer-social a:hover { color: var(--primary); border-color: var(--accent); } /* Footer links */ .footer-links ul li { margin-bottom: 10px; } .footer-links ul li a { color: var(--text); font-size: 13px; transition: all var(--duration) var(--ease); display: inline-flex; align-items: center; gap: 0; } .footer-links ul li a::before { content: ''; width: 0; height: 1px; background: var(--accent); transition: width var(--duration) var(--ease); margin-right: 0; } .footer-links ul li a:hover { color: var(--accent); padding-left: 10px; } .footer-links ul li a:hover::before { width: 12px; margin-right: 8px; } /* Footer contact info */ .footer-contact-info .contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; font-size: 13px; } .footer-contact-info .contact-item i { color: var(--accent); font-size: 14px; margin-top: 4px; flex-shrink: 0; } .footer-contact-info .contact-item a { color: var(--text); transition: color var(--duration) var(--ease); } .footer-contact-info .contact-item a:hover { color: var(--accent); } /* Footer Bottom */ .footer-bottom { padding: 24px 0; border-top: 1px solid rgba(15, 23, 42, 0.05); } .footer-bottom .container { display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 12px; color: rgba(15, 23, 42, 0.3); letter-spacing: 0.5px; } /* Back to top button */ .back-to-top { position: fixed; bottom: 100px; right: 30px; width: 46px; height: 46px; background: var(--accent); color: var(--primary); border: none; border-radius: 50%; font-size: 16px; cursor: pointer; z-index: 998; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--duration) var(--ease); box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(212, 168, 83, 0.4); } /* ---------- WHATSAPP FLOATING BUTTON ---------- */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 28px; z-index: 998; transition: all var(--duration) var(--ease); animation: whatsappBounce 2s var(--ease) 3s both; } .whatsapp-float::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #25D366; animation: whatsappPulse 2s var(--ease) infinite; z-index: -1; } .whatsapp-float:hover { transform: scale(1.1); color: var(--white); } /* WhatsApp tooltip */ .whatsapp-float .tooltip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: var(--primary); color: var(--white); padding: 8px 16px; font-size: 12px; white-space: nowrap; letter-spacing: 0.5px; opacity: 0; visibility: hidden; transition: all var(--duration) var(--ease); } .whatsapp-float .tooltip::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 3px solid transparent; border-left-color: var(--primary); } .whatsapp-float:hover .tooltip { opacity: 1; visibility: visible; } @keyframes whatsappPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes whatsappBounce { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.15); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } /* ---------- ANIMATIONS & KEYFRAMES ---------- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px rgba(212, 168, 83, 0.2); } 50% { box-shadow: 0 0 20px rgba(212, 168, 83, 0.4); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes revealFromLeft { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes revealFromBottom { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* Scroll-triggered animation classes */ .animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } .animate-on-scroll.from-left { transform: translateX(-40px); } .animate-on-scroll.from-left.visible { transform: translateX(0); } .animate-on-scroll.from-right { transform: translateX(40px); } .animate-on-scroll.from-right.visible { transform: translateX(0); } .animate-on-scroll.scale { transform: scale(0.95); } .animate-on-scroll.scale.visible { transform: scale(1); } /* Staggered animations */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } .stagger-5 { transition-delay: 0.5s; } .stagger-6 { transition-delay: 0.6s; } /* ---------- RESPONSIVE: LAPTOP (1200px) ---------- */ @media (max-width: 1200px) { .container { max-width: 1100px; } h1 { font-size: 46px; } h2 { font-size: 36px; } .hero-text h1 { font-size: 56px; } .footer-main { grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr; gap: 30px; } } /* ---------- RESPONSIVE: TABLET (1024px) ---------- */ @media (max-width: 1024px) { h1 { font-size: 40px; } h2 { font-size: 32px; } .hero-text h1 { font-size: 48px; } .product-grid { grid-template-columns: repeat(3, 1fr); } .services-grid { grid-template-columns: repeat(2, 1fr); } .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; } .badges-row { flex-wrap: wrap; } .badge-item { flex: 0 0 calc(50% - 10px); } .customizer-content { gap: 40px; } } /* ---------- RESPONSIVE: TABLET PORTRAIT (768px) ---------- */ @media (max-width: 768px) { h1 { font-size: 34px; } h2 { font-size: 28px; } .section-padding { padding: 60px 0; } /* Header */ .header-top { display: none; } .hamburger { display: block; } .main-menu { display: none; } .header-search { display: none; } /* Hero */ .hero-section { min-height: 600px; } .hero-text h1 { font-size: 38px; } .hero-text p { font-size: 15px; } .hero-dots { display: none; } .hero-nav { right: 20px; bottom: 20px; } .hero-counter { left: 20px; bottom: 20px; } .hero-slide-content { padding: 0 5%; } /* Intro */ .intro-section .container { flex-direction: column; gap: 40px; } .intro-image::after { top: 15px; left: 15px; } .intro-stats { gap: 24px; } /* Categories */ .category-grid { grid-template-columns: repeat(2, 1fr); } /* Products */ .product-grid { grid-template-columns: repeat(2, 1fr); } .product-card-image { height: 240px; } /* Product Detail */ .product-detail .container { flex-direction: column; } .product-gallery { max-width: 100%; position: static; } .product-gallery-main { height: 400px; } /* Services */ .services-grid { grid-template-columns: 1fr; } /* About */ .about-row, .about-row.reverse { flex-direction: column; gap: 30px; } /* Contact */ .contact-wrapper { flex-direction: column; } /* CTA Banner */ .cta-banner { padding: 80px 0; background-attachment: scroll; } .cta-banner h2 { font-size: 32px; } /* Customizer */ .customizer-content { flex-direction: column; } /* Badges */ .badges-row { flex-direction: column; } .badge-item { flex: 1 1 100%; } /* Process timeline */ .process-timeline::before { left: 25px; } .process-step { flex-direction: column !important; padding-left: 60px; } .process-step .step-number { left: 0; transform: none; } /* Newsletter */ .newsletter-form { flex-direction: column; } .newsletter-form button { width: 100%; padding: 16px; } /* Footer */ .footer-main { grid-template-columns: 1fr; gap: 40px; } .footer-bottom .container { flex-direction: column; gap: 10px; text-align: center; } /* Form */ .form-row { flex-direction: column; gap: 0; } /* Page Hero */ .page-hero { padding: 120px 0 60px; background-attachment: scroll; } .page-hero h1 { font-size: 34px; } } /* ---------- RESPONSIVE: MOBILE (480px) ---------- */ @media (max-width: 480px) { h1 { font-size: 28px; } h2 { font-size: 24px; } .hero-section { min-height: 500px; height: auto; } .hero-text h1 { font-size: 30px; } .hero-text p { font-size: 14px; margin-bottom: 24px; } .hero-buttons { flex-direction: column; gap: 10px; } .hero-buttons .btn { width: 100%; } .hero-label { font-size: 10px; letter-spacing: 3px; } .btn { padding: 12px 24px; font-size: 11px; } .category-grid { grid-template-columns: 1fr; } .category-card { height: 280px; } .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .product-card-image { height: 200px; } .product-card-info { padding: 14px; } .product-card-info h3 { font-size: 13px; } .product-gallery-main { height: 300px; } .product-info h1 { font-size: 24px; } .intro-stats { flex-direction: column; gap: 20px; } .lead-form-container { padding: 30px 20px; } .contact-info, .contact-form-wrapper { padding: 30px 20px; } .page-hero { padding: 100px 0 50px; } .page-hero h1 { font-size: 28px; } .whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 20px; right: 20px; } .back-to-top { bottom: 80px; right: 20px; width: 40px; height: 40px; font-size: 14px; } .products-toolbar { flex-direction: column; gap: 10px; align-items: flex-start; } .section-label { font-size: 10px; letter-spacing: 3px; } .section-label::before, .section-label::after { width: 20px; } .header-logo a { font-size: 22px; letter-spacing: 4px; } .footer-main { padding: 50px 0 30px; } .newsletter-section { padding: 50px 0; } .newsletter-content h2 { font-size: 26px; } } /* ================================================================ HOMEPAGE REDESIGN - ADDITIONAL STYLES ================================================================ */ /* ---------- PRELOADER (REDESIGNED) ---------- */ #preloader.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease); } .preloader-inner { text-align: center; } .preloader-ring { width: 50px; height: 50px; border: 2px solid rgba(15, 23, 42, 0.1); border-top-color: var(--accent); border-radius: 50%; animation: preloaderSpin 0.8s linear infinite; margin: 0 auto 20px; } .preloader-text { font-family: var(--font-heading); font-size: 18px; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; } @keyframes preloaderSpin { to { transform: rotate(360deg); } } /* ---------- SMART TOP BAR HIDE ---------- */ .header-top { transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); } .header-top.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .site-header.scrolled { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ---------- HERO REDESIGNED ---------- */ .hero-section { position: relative; height: 100vh; min-height: 560px; max-height: 920px; background: #0a0a0a; overflow: hidden; } .hero-bg-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; pointer-events: none; } .hero-swiper { height: 100%; } .hero-swiper .swiper-wrapper { height: 100%; } .hero-swiper .swiper-slide { height: 100%; } .hero-slide { position: relative; height: 100%; display: flex; align-items: center; overflow: hidden; } /* Full-bleed banner image */ .hero-slide-bg { position: absolute; inset: 0; z-index: 0; } .hero-slide-bg img, .hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.08); transition: transform 7s var(--ease); } .hero-swiper .swiper-slide-active .hero-bg-img, .hero-swiper .swiper-slide-active .hero-slide-bg img { transform: scale(1); } /* Dark scrim so the headline stays readable over any photo */ .hero-slide-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 100deg, rgba(6, 8, 13, 0.88) 0%, rgba(6, 8, 13, 0.66) 42%, rgba(6, 8, 13, 0.32) 72%, rgba(6, 8, 13, 0.18) 100% ); } .hero-slide-content { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 6%; } .hero-left { flex: 1; max-width: 680px; } .hero-tag { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 20px; font-family: var(--font-body); } .hero-tag::before { content: ''; width: 40px; height: 1px; background: var(--accent); } .hero-heading { font-size: clamp(36px, 5vw, 72px); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; font-family: var(--font-heading); } .gradient-text { background: linear-gradient(135deg, #ffffff 0%, var(--accent) 50%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtext { font-size: 16px; color: rgba(255, 255, 255, 0.82); line-height: 1.8; margin-bottom: 36px; max-width: 500px; } .hero-cta-group { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn-hero-primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; background: var(--accent); color: var(--text-dark); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border-radius: 0; transition: all 0.4s var(--ease); border: 2px solid var(--accent); } .btn-hero-primary:hover { background: transparent; color: var(--accent); } .btn-hero-outline { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; background: transparent; color: #ffffff; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.45); transition: all 0.4s var(--ease); } .btn-hero-outline:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.06); } .hero-right { flex: 1; display: flex; justify-content: center; align-items: center; } .hero-image-frame { position: relative; max-width: 500px; width: 100%; } .hero-product-img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5)); transition: transform 0.8s var(--ease); } .hero-image-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(circle, rgba(212,168,83,0.08) 0%, transparent 70%); pointer-events: none; } .hero-slide-counter { position: absolute; bottom: 40px; left: 6%; z-index: 10; font-family: var(--font-heading); font-size: 18px; color: rgba(255, 255, 255, 0.85); letter-spacing: 2px; display: flex; align-items: center; gap: 8px; } .counter-current { font-size: 28px; font-weight: 700; color: var(--accent-light); } .counter-sep { color: rgba(255, 255, 255, 0.3); } .counter-total { color: rgba(255, 255, 255, 0.45); } .hero-dots-nav { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 12px; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(15, 23, 42, 0.2); border: none; cursor: pointer; transition: all 0.3s var(--ease); padding: 0; } .hero-dot-active { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 12px rgba(212,168,83,0.4); } .hero-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(15, 23, 42, 0.08); z-index: 10; } .hero-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); width: 0%; } /* ---------- MARQUEE / TICKER ---------- */ .marquee-section { background: var(--surface); padding: 18px 0; overflow: hidden; border-top: 1px solid rgba(212,168,83,0.1); border-bottom: 1px solid rgba(212,168,83,0.1); } .marquee-track { display: flex; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-content { display: flex; align-items: center; gap: 0; white-space: nowrap; flex-shrink: 0; } .marquee-content span { font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: var(--accent); padding: 0 12px; } .marquee-dot { color: rgba(212,168,83,0.3) !important; font-size: 10px !important; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- CTA BANNERS REDESIGNED ---------- */ .cta-banners-section { padding: 80px 0; background: var(--primary); } .cta-banners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .cta-banner-card { position: relative; display: block; height: 380px; overflow: hidden; text-decoration: none; border-radius: 4px; } .cta-banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cta-banner-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .cta-banner-card:hover .cta-banner-image img { transform: scale(1.08); } .cta-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; transition: background 0.5s var(--ease); } .cta-banner-card:hover .cta-banner-overlay { background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%); } .cta-glass-badge { position: absolute; top: 24px; left: 24px; padding: 6px 16px; background: rgba(15, 23, 42, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(15, 23, 42, 0.15); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border-radius: 2px; } .cta-banner-title { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } .cta-banner-text { font-size: 14px; color: rgba(15, 23, 42, 0.6); margin-bottom: 16px; } .cta-banner-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: gap 0.3s var(--ease); } .cta-banner-card:hover .cta-banner-link { gap: 16px; } /* ---------- PRODUCT CUSTOMIZER REDESIGNED ---------- */ .customizer-section { padding: 100px 0; background: var(--surface); position: relative; overflow: hidden; } .customizer-dot-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(212,168,83,0.04) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; } .section-header { text-align: center; margin-bottom: 60px; } .section-tag { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 12px; font-family: var(--font-body); } .section-tag::before, .section-tag::after { content: ''; width: 30px; height: 1px; background: var(--accent); } .section-title { font-family: var(--font-heading); font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 2px; } .gold-text { color: var(--accent); } .section-subtitle { font-size: 15px; color: rgba(15, 23, 42, 0.5); margin-top: 12px; } /* Customizer steps */ .customizer-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 50px; } .step-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 24px; } .step-number { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(15, 23, 42, 0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: rgba(15, 23, 42, 0.4); transition: all 0.3s var(--ease); } .step-item.active .step-number { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 20px rgba(212,168,83,0.2); } .step-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(15, 23, 42, 0.4); } .step-item.active .step-label { color: var(--accent); } .step-connector { width: 60px; height: 1px; background: rgba(15, 23, 42, 0.1); margin-bottom: 24px; } /* Customizer workspace */ .customizer-workspace { display: grid; grid-template-columns: 200px 1fr 260px; gap: 40px; align-items: start; } .customizer-panel { position: relative; } .panel-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: rgba(15, 23, 42, 0.5); margin-bottom: 16px; } .product-type-buttons { display: flex; flex-direction: column; gap: 10px; } .product-type-btn { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.08); color: rgba(15, 23, 42, 0.5); cursor: pointer; transition: all 0.3s var(--ease); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; } .product-type-btn:hover, .product-type-btn.active { background: rgba(212,168,83,0.1); border-color: var(--accent); color: var(--accent); } .product-type-btn svg { flex-shrink: 0; } /* Preview area */ .customizer-preview { display: flex; flex-direction: column; align-items: center; } .preview-frame { position: relative; width: 100%; max-width: 320px; background: rgba(15, 23, 42, 0.02); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 8px; padding: 20px; margin-bottom: 24px; } .preview-bg-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px); background-size: 20px 20px; border-radius: 8px; pointer-events: none; } .customizer-garment { width: 100%; height: auto; display: block; } .garment-fill { transition: fill 0.4s var(--ease); } .garment-shape { transition: opacity 0.3s var(--ease); } /* Color swatches */ .color-swatches { margin-bottom: 20px; text-align: center; } .color-swatches .panel-title { text-align: center; } .swatch-grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .color-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: all 0.3s var(--ease); position: relative; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15); } .color-swatch:hover { transform: scale(1.15); } .color-swatch.active { border-color: var(--accent); transform: scale(1.15); box-shadow: 0 0 15px rgba(212,168,83,0.3), inset 0 0 0 1px rgba(15, 23, 42, 0.15); } /* Logo upload */ .logo-upload-zone { width: 100%; max-width: 320px; } .upload-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px dashed rgba(15, 23, 42, 0.15); border-radius: 4px; color: rgba(15, 23, 42, 0.35); font-size: 13px; cursor: pointer; transition: all 0.3s var(--ease); position: relative; overflow: hidden; } .upload-placeholder:hover { border-color: var(--accent); color: var(--accent); } /* Summary panel */ .customizer-summary { margin-bottom: 24px; } .summary-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .summary-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(15, 23, 42, 0.4); } .summary-value { font-size: 13px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; } .summary-color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(15, 23, 42, 0.2); } .btn-customizer-cta { display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; padding: 16px 24px; background: var(--accent); color: var(--text-dark); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; border: none; cursor: pointer; transition: all 0.4s var(--ease); margin-bottom: 12px; } .btn-customizer-cta:hover { background: var(--accent-light); box-shadow: 0 0 30px rgba(212,168,83,0.3); } .customizer-note { font-size: 11px; color: rgba(15, 23, 42, 0.3); text-align: center; line-height: 1.6; } /* ---------- PRODUCTS SHOWCASE CAROUSEL ---------- */ .products-showcase-section { padding: 100px 0; background: var(--primary); overflow: hidden; } .products-carousel-wrapper { position: relative; padding: 0 20px; } .products-swiper { overflow: visible; padding: 20px 0 40px; } .products-swiper .swiper-slide { width: 350px; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); } .product-showcase-card { background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 4px; overflow: hidden; transition: all 0.4s var(--ease); } .product-showcase-card:hover { border-color: rgba(212,168,83,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.3); transform: translateY(-4px); } .product-card-image { position: relative; height: 350px; overflow: hidden; } .product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.3s var(--ease); } .product-showcase-card:hover .product-card-image img { transform: scale(1.05); } .product-category-tag { position: absolute; top: 16px; left: 16px; padding: 4px 14px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: 2px; } .product-quick-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); transform: translateY(100%); transition: transform 0.4s var(--ease); } .product-showcase-card:hover .product-quick-info { transform: translateY(0); } .quick-info-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; } .product-card-info { padding: 20px; } .product-card-name { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .product-card-desc { font-size: 13px; color: rgba(15, 23, 42, 0.4); } /* Products nav */ .products-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 30px; } .products-nav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.15); background: transparent; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); } .products-nav-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(212,168,83,0.1); } .products-pagination { display: flex; gap: 8px; } .products-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(15, 23, 42, 0.2); opacity: 1; transition: all 0.3s var(--ease); } .products-pagination .swiper-pagination-bullet-active { background: var(--accent); width: 24px; border-radius: 4px; } /* ---------- INTRODUCTION REDESIGNED ---------- */ .introduction-section { padding: 120px 0; background: var(--surface-light); } .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .intro-content .section-tag { justify-content: flex-start; } .intro-content .section-tag::after { display: none; } .intro-heading { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: var(--white); line-height: 1.2; margin-top: 12px; margin-bottom: 20px; } .intro-description { font-size: 15px; color: rgba(15, 23, 42, 0.5); line-height: 1.8; margin-bottom: 30px; } .intro-checklist { list-style: none; padding: 0; margin: 0 0 36px; } .intro-checklist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; } .check-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(212,168,83,0.1); color: var(--accent); flex-shrink: 0; } .check-icon svg { stroke: var(--accent); } /* Counters */ .intro-counters { display: flex; gap: 32px; margin-bottom: 36px; } .counter-box { text-align: center; } .counter-number { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--accent); line-height: 1; } .counter-suffix { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--accent); } .counter-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(15, 23, 42, 0.4); margin-top: 6px; } .btn-about { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: transparent; border: 2px solid rgba(15, 23, 42, 0.2); color: var(--white); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: all 0.4s var(--ease); } .btn-about:hover { border-color: var(--accent); color: var(--accent); background: rgba(212,168,83,0.05); } /* Intro image */ .intro-image-wrapper { position: relative; } .intro-image-frame { position: relative; } .intro-image-frame img { width: 100%; height: auto; border-radius: 4px; display: block; } .intro-frame-border { position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; border: 2px solid var(--accent); border-radius: 4px; z-index: -1; opacity: 0.3; transition: all 0.5s var(--ease); } .intro-image-wrapper:hover .intro-frame-border { top: 14px; left: 14px; opacity: 0.5; } /* ---------- CATEGORY SHOWCASE REDESIGNED ---------- */ .category-showcase-section { padding: 100px 0; background: var(--primary); } .category-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .category-showcase-card { position: relative; border-radius: 4px; overflow: hidden; } .category-showcase-card a { display: block; text-decoration: none; } .category-card-image { height: 450px; overflow: hidden; } .category-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; } .category-showcase-card:hover .category-card-image img { transform: scale(1.15); } .category-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(transparent 30%, rgba(0,0,0,0.8) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; transition: background 0.5s var(--ease); } .category-product-count { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; } .category-card-name { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; } .category-explore-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: gap 0.3s var(--ease); } .category-showcase-card:hover .category-explore-link { gap: 16px; } .category-explore-link svg { transition: transform 0.3s var(--ease); } .category-showcase-card:hover .category-explore-link svg { transform: translateX(4px); } /* ---------- TRUST BADGES REDESIGNED ---------- */ .trust-section { padding: 80px 0; background: var(--surface-light); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust-card { text-align: center; padding: 40px 24px; background: rgba(15, 23, 42, 0.02); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.4s var(--ease); } .trust-card:hover { border-color: rgba(212,168,83,0.2); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .trust-icon { margin-bottom: 20px; } .floating-icon { animation: floatingBadge 3s ease-in-out infinite; } @keyframes floatingBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .trust-title { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .trust-desc { font-size: 13px; color: rgba(15, 23, 42, 0.4); line-height: 1.7; } /* ---------- FAQ REDESIGNED ---------- */ .faq-section { padding: 100px 0; background: var(--primary); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { border-left: 3px solid transparent; margin-bottom: 8px; transition: border-color 0.3s var(--ease); } .faq-item.active { border-left-color: var(--accent); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: rgba(15, 23, 42, 0.03); border: none; border-bottom: 1px solid rgba(15, 23, 42, 0.05); color: var(--white); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: all 0.3s var(--ease); font-family: var(--font-body); } .faq-question:hover { background: rgba(15, 23, 42, 0.05); } .faq-question-text { flex: 1; padding-right: 20px; } .faq-toggle { position: relative; width: 20px; height: 20px; flex-shrink: 0; } .faq-toggle-line { position: absolute; background: var(--accent); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .faq-toggle-h { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .faq-toggle-v { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); } .faq-item.active .faq-toggle-v { transform: translateX(-50%) rotate(90deg); opacity: 0; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq-answer-inner { padding: 0 24px 24px; font-size: 14px; color: rgba(15, 23, 42, 0.5); line-height: 1.8; } /* ---------- CONTACT SECTION REDESIGNED ---------- */ .contact-section { padding: 120px 0; background: var(--surface); position: relative; overflow: hidden; } .contact-bg-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(212,168,83,0.02) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; z-index: 1; } .contact-heading { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--white); margin-top: 12px; margin-bottom: 12px; } .contact-subtext { font-size: 15px; color: rgba(15, 23, 42, 0.5); line-height: 1.7; margin-bottom: 30px; } .contact-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .contact-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 4px; text-decoration: none; transition: all 0.3s var(--ease); } .contact-card:hover { border-color: rgba(212,168,83,0.2); background: rgba(15, 23, 42, 0.05); } .contact-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(212,168,83,0.1); color: var(--accent); flex-shrink: 0; } .contact-card-icon.whatsapp-icon { background: rgba(37,211,102,0.1); color: #25D366; } .contact-card-body { display: flex; flex-direction: column; } .contact-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(15, 23, 42, 0.4); margin-bottom: 2px; } .contact-card-value { font-size: 14px; color: var(--white); font-weight: 500; } /* Social buttons */ .contact-socials { display: flex; gap: 12px; } .social-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.15); color: var(--white); text-decoration: none; transition: all 0.3s var(--ease); } .social-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(212,168,83,0.1); } /* Contact Form */ .contact-form-wrapper { position: relative; } .contact-form-heading { font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--white); margin-bottom: 30px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .floating-field { position: relative; margin-bottom: 0; } .floating-field input, .floating-field textarea { width: 100%; padding: 16px 0 8px; background: transparent; border: none; border-bottom: 1px solid rgba(15, 23, 42, 0.15); color: var(--white); font-size: 14px; font-family: var(--font-body); outline: none; transition: border-color 0.3s var(--ease); } .floating-field input:focus, .floating-field textarea:focus { border-bottom-color: var(--accent); } .floating-field label { position: absolute; top: 16px; left: 0; font-size: 14px; color: rgba(15, 23, 42, 0.35); pointer-events: none; transition: all 0.3s var(--ease); } .floating-field input:focus ~ label, .floating-field input.has-value ~ label, .floating-field input.focused ~ label, .floating-field textarea:focus ~ label, .floating-field textarea.has-value ~ label, .floating-field textarea.focused ~ label { top: -2px; font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; } .floating-field textarea { resize: vertical; min-height: 80px; } .btn-contact-submit { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--accent); color: var(--text-dark); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; border: 2px solid var(--accent); cursor: pointer; transition: all 0.4s var(--ease); font-family: var(--font-body); margin-top: 20px; } .btn-contact-submit:hover { background: transparent; color: var(--accent); } .btn-contact-submit:disabled { opacity: 0.6; cursor: not-allowed; } .btn-loader { display: inline-flex; align-items: center; gap: 8px; } .spin-icon { animation: preloaderSpin 0.8s linear infinite; } /* Form alerts */ .form-alert { padding: 14px 20px; border-radius: 4px; font-size: 14px; margin-bottom: 20px; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .form-alert-success { background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.2); color: #25D366; } .form-alert-error { background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.2); color: #e74c3c; } /* ---------- BACK TO TOP REDESIGNED ---------- */ .back-to-top { position: fixed; bottom: 100px; right: 30px; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--text-dark); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s var(--ease); box-shadow: 0 4px 20px rgba(212,168,83,0.3); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); display: flex; } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(212,168,83,0.4); } /* ---------- SCROLL ANIMATIONS ---------- */ .animate-hidden { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .animate-on-scroll.visible, .animate-hidden.visible { opacity: 1; transform: translateY(0); } /* ---------- MOBILE MENU OVERLAY ---------- */ body.menu-open { overflow: hidden; } /* ---------- HOMEPAGE RESPONSIVE ---------- */ @media (max-width: 1024px) { .hero-slide-content { flex-direction: column; justify-content: center; text-align: center; padding: 0 5%; } .hero-left { max-width: 100%; } .hero-cta-group { justify-content: center; } .hero-tag { justify-content: center; } .hero-section { height: 100svh; min-height: 520px; } /* Center-weighted scrim keeps centered text readable on tablet/phone */ .hero-slide-overlay { background: linear-gradient( 180deg, rgba(6, 8, 13, 0.55) 0%, rgba(6, 8, 13, 0.68) 55%, rgba(6, 8, 13, 0.82) 100% ); } .customizer-workspace { grid-template-columns: 1fr; gap: 30px; } .customizer-panel-left { order: 1; } .customizer-preview { order: 2; } .customizer-panel-right { order: 3; } .product-type-buttons { flex-direction: row; flex-wrap: wrap; } .intro-grid { grid-template-columns: 1fr; gap: 50px; } .contact-grid { grid-template-columns: 1fr; gap: 50px; } } @media (max-width: 768px) { .hero-slide-content { padding: 0 24px; } .hero-subtext { margin-bottom: 26px; } .cta-banners-grid { grid-template-columns: 1fr; } .cta-banner-card { height: 280px; } .category-cards-grid { grid-template-columns: 1fr; } .category-card-image { height: 300px; } .trust-grid { grid-template-columns: 1fr 1fr; } .intro-counters { justify-content: center; } .form-row { grid-template-columns: 1fr; gap: 0; } .floating-field { margin-bottom: 16px; } .hero-dots-nav { right: 15px; } .customizer-steps { flex-wrap: wrap; gap: 10px; } .step-connector { display: none; } .products-swiper .swiper-slide { width: 280px; } } @media (max-width: 480px) { .trust-grid { grid-template-columns: 1fr; } .hero-section { /* override the legacy `height:auto` rule above which collapses a full-bleed slider (children use height:100%) */ height: 100svh; min-height: 480px; } .hero-heading { font-size: 30px; } .hero-subtext { font-size: 14px; } .hero-slide-counter { bottom: 18px; font-size: 15px; } .hero-slide-counter .counter-current { font-size: 22px; } .marquee-content span { font-size: 14px; letter-spacing: 2px; } .intro-counters { flex-direction: column; align-items: center; gap: 24px; } } /* ---------- UTILITY CLASSES ---------- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-white { color: var(--white); } .text-accent { color: var(--accent); } .text-uppercase { text-transform: uppercase; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-1 { margin-top: var(--space-md); } .mt-2 { margin-top: var(--space-lg); } .mt-3 { margin-top: var(--space-xl); } .mb-1 { margin-bottom: var(--space-md); } .mb-2 { margin-bottom: var(--space-lg); } .mb-3 { margin-bottom: var(--space-xl); } .pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; } .d-flex { display: flex; } .align-center { align-items: center; } .justify-center { justify-content: center; } .gap-1 { gap: var(--space-md); } .gap-2 { gap: var(--space-lg); } .w-100 { width: 100%; } .hidden { display: none; } .visible { display: block; } /* ============================================ INNER PAGES - Shared Styles ============================================ */ /* ---------- PAGE HERO BANNER ---------- */ .page-hero-banner { position: relative; padding: 100px 0 60px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); text-align: center; overflow: hidden; } .page-hero-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 0%, rgba(212, 168, 83, 0.08) 0%, transparent 70%); pointer-events: none; } .page-hero-banner::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .page-hero-banner h1 { font-family: var(--font-heading); font-size: clamp(36px, 5vw, 56px); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; position: relative; } .page-hero-banner p { color: var(--text-light); font-size: 18px; max-width: 600px; margin: 0 auto; } /* ---------- BREADCRUMB ---------- */ .dark-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; font-size: 14px; } .dark-breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--text); } .dark-breadcrumb li a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease); } .dark-breadcrumb li a:hover { color: var(--accent-light); } .dark-breadcrumb li + li::before { content: '/'; color: rgba(15, 23, 42, 0.3); } /* ---------- GLASS CARD ---------- */ .glass-card { background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; transition: all var(--duration) var(--ease); } .glass-card:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(212, 168, 83, 0.3); transform: translateY(-4px); box-shadow: var(--shadow-glow); } /* ---------- DARK SECTION ---------- */ .dark-section { background: var(--primary); padding: 80px 0; position: relative; } .dark-section-alt { background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); padding: 80px 0; position: relative; } /* ---------- GOLD BUTTON ---------- */ .btn-gold { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: var(--primary); border: none; border-radius: 8px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; text-decoration: none; transition: all var(--duration) var(--ease); } .btn-gold:hover { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%); transform: translateY(-2px); box-shadow: var(--shadow-glow-strong); } .btn-outline-gold { display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: 8px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; text-decoration: none; transition: all var(--duration) var(--ease); } .btn-outline-gold:hover { background: var(--accent); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); } /* ---------- DARK FORM INPUTS ---------- */ .dark-input { width: 100%; padding: 14px 18px; background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 8px; color: var(--white); font-family: var(--font-body); font-size: 15px; outline: none; transition: all var(--duration) var(--ease); box-sizing: border-box; } .dark-input::placeholder { color: rgba(15, 23, 42, 0.35); } .dark-input:focus { border-color: var(--accent); background: rgba(212, 168, 83, 0.05); box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1); } .dark-input option { background: #f1f5f9; color: var(--white); } textarea.dark-input { resize: vertical; min-height: 120px; } .dark-label { display: block; color: var(--text-light); font-size: 14px; font-weight: 500; margin-bottom: 6px; letter-spacing: 0.5px; } /* ---------- PRODUCT CARDS (Category/Related) ---------- */ .product-card-dark { background: rgba(15, 23, 42, 0.03); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 12px; overflow: hidden; transition: all var(--duration) var(--ease); } .product-card-dark:hover { border-color: rgba(212, 168, 83, 0.4); transform: translateY(-6px); box-shadow: var(--shadow-glow); } .product-card-dark .card-image { position: relative; height: 260px; overflow: hidden; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); } .product-card-dark .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .product-card-dark:hover .card-image img { transform: scale(1.08); } .product-card-dark .card-image .no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(15, 23, 42, 0.2); font-size: 48px; } .product-card-dark .card-body { padding: 20px; text-align: center; } .product-card-dark .card-body h3, .product-card-dark .card-body h5, .product-card-dark .card-body h6 { font-family: var(--font-heading); color: var(--white); font-weight: 600; margin-bottom: 4px; } .product-card-dark .card-body small, .product-card-dark .card-body p { color: var(--text); font-size: 13px; } .product-card-dark a { text-decoration: none; color: inherit; } /* ---------- DARK ALERT MESSAGES ---------- */ .alert-dark-success { background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.3); color: #4ade80; padding: 14px 20px; border-radius: 8px; font-size: 15px; margin-bottom: 20px; } .alert-dark-error { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); color: #f87171; padding: 14px 20px; border-radius: 8px; font-size: 15px; margin-bottom: 20px; } /* ---------- INNER PAGE GRID LAYOUTS ---------- */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .split-layout { display: flex; flex-wrap: wrap; gap: 50px; align-items: center; } .split-layout > * { flex: 1; min-width: 300px; } /* ---------- DARK PAGINATION ---------- */ .dark-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 50px; list-style: none; padding: 0; } .dark-pagination a, .dark-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 8px; color: var(--text); font-size: 14px; text-decoration: none; transition: all var(--duration-fast) var(--ease); } .dark-pagination a:hover { background: rgba(212, 168, 83, 0.1); border-color: var(--accent); color: var(--accent); } .dark-pagination .active span, .dark-pagination .active a { background: var(--accent); border-color: var(--accent); color: var(--primary); font-weight: 600; } .dark-pagination .disabled a, .dark-pagination .disabled span { opacity: 0.3; pointer-events: none; } /* ---------- INNER PAGE RESPONSIVE ---------- */ @media (max-width: 992px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .split-layout { gap: 30px; } } @media (max-width: 768px) { .page-hero-banner { padding: 80px 0 50px; } .dark-section, .dark-section-alt { padding: 60px 0; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .split-layout { flex-direction: column; } .split-layout > * { min-width: 100%; } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } .btn-gold, .btn-outline-gold { width: 100%; justify-content: center; } } /* ===== ADVANCED INTRO ANIMATION ===== */ .intro-animated-graphic { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--surface); border-radius: 20px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.05); } .intro-graphic-circle { position: absolute; border-radius: 50%; border: 1px solid var(--border); opacity: 0.2; } .intro-circle-1 { width: 150%; height: 150%; border-style: dashed; animation: rotateSlow 40s linear infinite; } .intro-circle-2 { width: 110%; height: 110%; border-color: var(--accent); opacity: 0.1; animation: rotateSlow 30s linear infinite reverse; } .intro-circle-3 { width: 70%; height: 70%; background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%); opacity: 0.03; filter: blur(40px); } .intro-svg-container { width: 80%; height: 80%; z-index: 2; filter: drop-shadow(0 0 20px rgba(0,0,0,0.05)); } .scan-line { animation: scanMove 4s ease-in-out infinite; } .glowing-nodes circle { animation: pulseGlow 2s ease-in-out infinite; } .glowing-nodes circle:nth-child(2) { animation-delay: 0.4s; } .glowing-nodes circle:nth-child(3) { animation-delay: 0.8s; } .glowing-nodes circle:nth-child(4) { animation-delay: 1.2s; } .glowing-nodes circle:nth-child(5) { animation-delay: 1.6s; } .blueprint-garment path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawPath 3s var(--ease) forwards; } .tech-labels text { opacity: 0; animation: fadeIn 0.5s ease forwards; } .tech-labels text:nth-child(1) { animation-delay: 3s; } .tech-labels text:nth-child(2) { animation-delay: 3.2s; } .tech-labels text:nth-child(3) { animation-delay: 3.4s; } .tech-labels text:nth-child(4) { animation-delay: 3.6s; } .intro-floating-badge { position: absolute; background: var(--surface-light); border: 1px solid var(--border); padding: 12px 18px; border-radius: 12px; display: flex; align-items: center; gap: 12px; z-index: 3; box-shadow: 0 10px 25px rgba(0,0,0,0.05); animation: floatBadge 6s ease-in-out infinite; } .intro-floating-badge i { font-size: 20px; color: var(--accent); } .intro-floating-badge span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 1.3; color: var(--text-dark); } .badge-1 { top: 15%; right: 5%; } .badge-2 { bottom: 15%; left: 5%; animation-delay: -3s; } @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scanMove { 0%, 100% { transform: translateY(0); opacity: 0; } 10%, 90% { opacity: 1; } 50% { transform: translateY(200px); } } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); filter: blur(2px); } } @keyframes drawPath { to { stroke-dashoffset: 0; } } @keyframes fadeIn { to { opacity: 0.8; } } @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* ================================================================ HOMEPAGE — MOBILE RESPONSIVE OVERRIDES Appended last so the cascade beats earlier media blocks. ================================================================ */ /* ---------- Large tablet (<=992px) ---------- */ @media (max-width: 992px) { .category-cards-grid { grid-template-columns: repeat(2, 1fr); } .intro-counters { gap: 24px; } } /* ---------- Tablet portrait & phone (<=768px) ---------- */ @media (max-width: 768px) { /* Section padding compression for the entire home */ .cta-banners-section, .customizer-section, .products-showcase-section, .introduction-section, .category-showcase-section, .trust-section, .faq-section, .contact-section { padding: 60px 0; } .section-header { margin-bottom: 36px; } /* HERO */ .hero-section { min-height: 540px; } .hero-slide-content { padding: 0 20px; } .hero-tag { font-size: 10px; letter-spacing: 3px; margin-bottom: 14px; } .hero-tag::before { width: 28px; } .hero-heading { margin-bottom: 14px; } .hero-subtext { font-size: 14px; line-height: 1.6; margin-bottom: 22px; max-width: 100%; } .hero-cta-group { gap: 12px; } .btn-hero-primary, .btn-hero-outline { padding: 13px 24px; font-size: 12px; letter-spacing: 1.5px; } .hero-slide-counter { bottom: 22px; left: 20px; font-size: 14px; } .hero-slide-counter .counter-current { font-size: 20px; } /* Hide vertical dots — swipe replaces them on touch */ .hero-dots-nav { display: none; } /* MARQUEE */ .marquee-content span { font-size: 14px; letter-spacing: 3px; padding: 0 8px; } /* CTA BANNERS */ .cta-banners-grid { gap: 18px; } .cta-banner-card { height: 240px; } .cta-banner-overlay { padding: 22px; } .cta-banner-title { font-size: 22px; letter-spacing: 1px; } .cta-banner-text { font-size: 13px; margin-bottom: 10px; } .cta-glass-badge { top: 16px; left: 16px; padding: 4px 12px; font-size: 9px; letter-spacing: 2px; } /* CUSTOMIZER */ .customizer-workspace { gap: 24px; } .customizer-steps { margin-bottom: 28px; gap: 6px; } .step-item { padding: 0 6px; } .step-number { width: 40px; height: 40px; font-size: 13px; } .step-label { font-size: 10px; letter-spacing: 0.5px; } .product-type-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; } .product-type-btn { flex: 1 1 calc(33.333% - 8px); justify-content: center; padding: 10px 12px; font-size: 11px; letter-spacing: 0.5px; } .product-type-btn svg { width: 18px; height: 18px; } .preview-frame { padding: 14px; } .color-swatch { width: 32px; height: 32px; } .panel-title { font-size: 12px; } /* PRODUCTS CAROUSEL */ .products-carousel-wrapper { padding: 0 10px; } .products-swiper .swiper-slide { width: 260px; } .product-card-image { height: 280px; } .product-card-info { padding: 14px; } .product-card-name { font-size: 14px; } .products-nav { gap: 16px; margin-top: 18px; } .products-nav-btn { width: 40px; height: 40px; } .products-nav-btn svg { width: 18px; height: 18px; } /* INTRODUCTION */ .intro-grid { gap: 36px; } .intro-heading { margin-bottom: 14px; } .intro-description { font-size: 14px; line-height: 1.7; margin-bottom: 22px; } .intro-checklist { margin-bottom: 22px; } .intro-checklist li { font-size: 13px; padding: 8px 0; gap: 10px; } .intro-counters { gap: 16px; margin-bottom: 26px; flex-wrap: wrap; justify-content: flex-start; } .counter-box { flex: 1 1 30%; min-width: 90px; } .counter-number { font-size: 32px; } .counter-suffix { font-size: 24px; } .counter-label { font-size: 10px; } .btn-about { padding: 12px 24px; font-size: 11px; } .intro-image-wrapper { overflow: visible; } .intro-frame-border { top: 12px; left: 12px; } /* CATEGORIES */ .category-cards-grid { gap: 16px; } .category-card-image { height: 300px; } .category-card-overlay { padding: 22px; } .category-card-name { font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; } .category-product-count { font-size: 10px; letter-spacing: 1.5px; } /* TRUST */ .trust-grid { gap: 14px; } .trust-card { padding: 26px 16px; } .trust-icon svg { width: 34px; height: 34px; } .trust-title { font-size: 14px; letter-spacing: 1.5px; } .trust-desc { font-size: 12px; line-height: 1.6; } /* FAQ */ .faq-container { padding: 0 4px; } .faq-question { padding: 16px 18px; font-size: 14px; } .faq-question-text { padding-right: 14px; } .faq-answer-inner { padding: 0 18px 18px; font-size: 13px; line-height: 1.7; } /* CONTACT */ .contact-grid { gap: 36px; } .contact-heading { font-size: 28px; } .contact-subtext { font-size: 14px; margin-bottom: 22px; } .contact-card { padding: 14px 16px; gap: 12px; } .contact-card-icon { width: 40px; height: 40px; } .contact-card-icon svg { width: 20px; height: 20px; } .contact-card-label { font-size: 10px; } .contact-card-value { font-size: 13px; } .contact-socials { gap: 10px; } .social-btn { width: 40px; height: 40px; } .contact-form-heading { font-size: 20px; margin-bottom: 22px; } .form-row { gap: 0; margin-bottom: 0; } .floating-field { margin-bottom: 18px; } .btn-contact-submit { width: 100%; justify-content: center; padding: 14px 28px; font-size: 12px; } } /* ---------- Small phone (<=480px) ---------- */ @media (max-width: 480px) { .container { padding: 0 16px; } .section-header { margin-bottom: 28px; } .section-tag { font-size: 10px; letter-spacing: 3px; } .section-tag::before, .section-tag::after { width: 20px; } /* HERO — stack CTAs full width */ .hero-cta-group { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; } .btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; padding: 14px 20px; } .hero-heading { font-size: 28px; letter-spacing: 0.5px; line-height: 1.1; } .hero-subtext { font-size: 13px; } .hero-slide-content { padding: 0 18px; } .hero-slide-counter { bottom: 18px; left: 18px; } /* MARQUEE */ .marquee-section { padding: 14px 0; } .marquee-content span { font-size: 12px; letter-spacing: 2px; padding: 0 6px; } /* CTA BANNERS */ .cta-banner-card { height: 220px; } .cta-banner-overlay { padding: 18px; } .cta-banner-title { font-size: 20px; } .cta-banner-text { font-size: 12px; } /* CUSTOMIZER */ .product-type-btn { flex: 1 1 100%; } .color-swatch { width: 28px; height: 28px; } .swatch-grid { gap: 8px; } .preview-frame { max-width: 100%; padding: 12px; } .step-item { padding: 0 4px; } .step-number { width: 36px; height: 36px; font-size: 12px; } .step-label { font-size: 9px; } /* PRODUCTS CAROUSEL */ .products-swiper .swiper-slide { width: 240px; } .product-card-image { height: 240px; } /* INTRODUCTION */ .intro-counters { flex-direction: column; align-items: stretch; gap: 14px; } .counter-box { flex: 1 1 100%; text-align: left; padding: 12px 14px; background: rgba(15, 23, 42, 0.04); border-radius: 6px; } .counter-box .counter-number, .counter-box .counter-suffix { font-size: 26px; } .counter-label { margin-top: 2px; } .intro-image-frame img { width: 100%; } /* CATEGORIES — fully single column */ .category-cards-grid { grid-template-columns: 1fr; } .category-card-image { height: 260px; } .category-card-overlay { padding: 18px; } .category-card-name { font-size: 20px; } /* TRUST */ .trust-card { padding: 22px 16px; } /* FAQ */ .faq-question { padding: 14px 16px; font-size: 13px; } .faq-answer-inner { padding: 0 16px 16px; font-size: 12px; } /* CONTACT */ .contact-heading { font-size: 24px; } .contact-form-heading { font-size: 18px; } .contact-card-icon { width: 36px; height: 36px; } .contact-card-icon svg { width: 18px; height: 18px; } /* BACK TO TOP */ .back-to-top { bottom: 88px; right: 16px; width: 42px; height: 42px; } } /* ---------- Tiny phone (<=375px) ---------- */ @media (max-width: 375px) { .hero-heading { font-size: 24px; } .section-title { font-size: 22px; } .customizer-steps { gap: 4px; } .step-number { width: 32px; height: 32px; font-size: 11px; } .products-swiper .swiper-slide { width: 220px; } .product-card-image { height: 220px; } .cta-banner-title { font-size: 18px; } .category-card-name { font-size: 18px; } }