/* ========================================================================== AVN Orthodontics – Orthodontics & Invisalign Design System Aesthetics: Premium, Modern, Apple-style Minimalism, Glassmorphism ========================================================================== */ /* Fonts are loaded via in each page's (faster than @import: avoids the render-blocking sequential fetch). */ :root { /* Colors */ --primary-navy: #0a192f; --primary-navy-rgb: 10, 25, 47; --primary-navy-light: #172a45; --secondary-teal: #00b4d8; --secondary-teal-rgb: 0, 180, 216; --secondary-teal-dark: #0077b6; --secondary-teal-light: #e0f7fa; --accent-gold: #d4af37; --accent-gold-rgb: 212, 175, 55; --accent-gold-light: #faf6e8; --bg-white: #ffffff; --bg-gray-light: #f8f9fa; --bg-gray-medium: #f1f3f5; --text-dark: #0a192f; --text-muted: #64748b; --text-light: #8892b0; --text-white: #f8f9fa; --border-color: #e2e8f0; /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-bg-dark: rgba(10, 25, 47, 0.85); --glass-border: rgba(255, 255, 255, 0.4); --glass-border-dark: rgba(23, 42, 69, 0.5); /* Typography */ --font-primary: "Poppins", sans-serif; --font-secondary: "Inter", sans-serif; /* Transitions */ --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.2s ease; /* Shadows */ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-md: 0 10px 25px -5px rgba(10, 25, 47, 0.08), 0 8px 10px -6px rgba(10, 25, 47, 0.05); --shadow-lg: 0 20px 40px -15px rgba(10, 25, 47, 0.12), 0 15px 20px -10px rgba(10, 25, 47, 0.08); --shadow-glow: 0 0 20px rgba(0, 180, 216, 0.25); --shadow-gold-glow: 0 0 20px rgba(212, 175, 55, 0.2); /* Border Radius */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; /* Layout */ --container-width: 1200px; --header-height: 72px; } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-secondary); background-color: var(--bg-white); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 600; line-height: 1.25; color: var(--primary-navy); } a { text-decoration: none; color: inherit; transition: var(--transition-fast); } img { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; } /* Scrollbar Customization */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-gray-light); } ::-webkit-scrollbar-thumb { background: rgba(10, 25, 47, 0.15); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 180, 216, 0.4); } /* Utility Classes */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .section-padding { padding: 80px 0; } @media (max-width: 768px) { .section-padding { padding: 60px 0; } } .text-center { text-align: center; } .flex { display: flex; } .grid { display: grid; } .section-tag { display: inline-block; padding: 8px 16px; background-color: var(--secondary-teal-light); color: var(--secondary-teal-dark); font-family: var(--font-primary); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; border-radius: var(--radius-full); margin-bottom: 16px; } .section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; color: var(--primary-navy); } .section-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 60px auto; } @media (max-width: 768px) { .section-title { font-size: 2rem; } .section-subtitle { margin-bottom: 40px; } } /* Premium Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--font-primary); font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-smooth); gap: 8px; } .btn-primary { background-color: var(--secondary-teal); color: var(--bg-white) !important; box-shadow: var(--shadow-glow); } .btn-primary:hover { background-color: var(--secondary-teal-dark); color: var(--bg-white) !important; transform: translateY(-2px); box-shadow: 0 12px 24px -5px rgba(0, 180, 216, 0.4); } .btn-secondary { background-color: var(--primary-navy); color: var(--bg-white) !important; border: 1px solid var(--primary-navy); } .btn-secondary:hover { background-color: transparent !important; color: var(--primary-navy) !important; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline { border: 2px solid var(--primary-navy); color: var(--primary-navy) !important; } .btn-outline:hover { background-color: var(--primary-navy); color: var(--bg-white) !important; transform: translateY(-2px); } .btn-gold { background-color: var(--accent-gold); color: var(--bg-white) !important; box-shadow: var(--shadow-gold-glow); } .btn-gold:hover { background-color: #bfa032; color: var(--bg-white) !important; transform: translateY(-2px); box-shadow: 0 12px 24px -5px rgba(212, 175, 55, 0.4); } .btn-sm { padding: 10px 20px; font-size: 0.85rem; } /* Animations Trigger Classes (Scroll Reveal) */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.active { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.active { opacity: 1; transform: translateX(0); } .delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; } .delay-400 { transition-delay: 0.4s; } /* ========================================================================== Header & Navigation ========================================================================== */ header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid #e2e8f0; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); } header.scrolled { height: var(--header-height); background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .header-container { display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-primary); font-size: 1.5rem; font-weight: 700; color: var(--primary-navy); } /* AVN Orthodontics inline-SVG logo */ .logo-svg { height: 46px; width: auto; display: block; color: var(--primary-navy); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .logo:hover .logo-svg { transform: scale(1.05); } .footer-logo-svg { height: 42px; width: auto; display: block; color: #ffffff; margin-bottom: 18px; } @media (max-width: 480px) { .logo-svg { height: 36px; } .footer-logo-svg { height: 36px; } } /* Uploaded/custom logo images (swapped in by index.js) */ .logo-uploaded { height: 46px; width: auto; display: block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .logo:hover .logo-uploaded { transform: scale(1.05); } .footer-logo-uploaded { height: 42px; width: auto; display: block; margin-bottom: 18px; } @media (max-width: 480px) { .logo-uploaded { height: 36px; } .footer-logo-uploaded { height: 36px; } } .logo-symbol { width: 38px; height: 38px; background: linear-gradient( 135deg, var(--secondary-teal), var(--primary-navy) ); border-radius: 50% 50% 50% 0; /* Tooth-like shape */ display: flex; align-items: center; justify-content: center; color: var(--bg-white); font-size: 1.2rem; font-weight: 800; box-shadow: var(--shadow-glow); transform: rotate(-45deg); } .logo-symbol span { transform: rotate(45deg); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-family: var(--font-primary); font-weight: 500; font-size: 0.95rem; color: var(--primary-navy); position: relative; padding: 6px 0; } .nav-links a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--secondary-teal); transition: var(--transition-smooth); } .nav-links a:hover::after { width: 100%; } .nav-links a.active::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 16px; } .burger-menu { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; cursor: pointer; } .burger-menu span { width: 100%; height: 2px; background-color: var(--primary-navy); border-radius: var(--radius-full); transition: var(--transition-smooth); } @media (max-width: 992px) { .nav-links { position: fixed; top: var(--header-height); left: -100%; width: 100%; height: calc(100vh - var(--header-height)); background-color: var(--bg-white); flex-direction: column; justify-content: flex-start; padding-top: 60px; gap: 40px; transition: var(--transition-smooth); z-index: 999; } header.scrolled .nav-links { top: 70px; height: calc(100vh - 70px); } .nav-links.active { left: 0; } .burger-menu { display: flex; } .burger-menu.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger-menu.active span:nth-child(2) { opacity: 0; } .burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .header-actions .btn { display: none; } } /* ========================================================================== Hero Section (Apple-style minimalism & whitespace) ========================================================================== */ .hero { min-height: 100vh; padding-top: calc(var(--header-height) + 40px); background: radial-gradient( circle at 80% 20%, rgba(0, 180, 216, 0.08) 0%, rgba(255, 255, 255, 0) 50% ), radial-gradient( circle at 10% 80%, rgba(212, 175, 55, 0.05) 0%, rgba(255, 255, 255, 0) 50% ); display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } .hero-content { z-index: 10; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background-color: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 0.85rem; font-weight: 500; color: var(--primary-navy); margin-bottom: 24px; } .hero-badge span.accent { color: var(--secondary-teal); font-weight: 700; } .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.15; margin-bottom: 24px; letter-spacing: -1px; } .hero-title span.gradient { background: linear-gradient( 135deg, var(--primary-navy), var(--secondary-teal) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 40px; font-weight: 400; max-width: 540px; } .hero-ctas { display: flex; gap: 16px; margin-bottom: 40px; } .hero-trust-bullets { display: flex; gap: 32px; border-top: 1px solid var(--border-color); padding-top: 30px; } .trust-bullet { display: flex; align-items: center; gap: 10px; font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; color: var(--primary-navy); } .trust-bullet i { color: var(--secondary-teal); font-size: 1.2rem; } .hero-visual { position: relative; } .hero-image-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1; } .hero-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 10s ease; } .hero-image-wrapper:hover img { transform: scale(1.05); } /* Floating Badges for Apple-style visual interest */ .floating-card { position: absolute; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); padding: 16px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; animation: float 6s ease-in-out infinite; z-index: 12; } .floating-card-1 { top: 15%; left: -15%; } .floating-card-2 { bottom: 15%; right: -10%; animation-delay: 2s; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .card-icon { width: 42px; height: 42px; background-color: var(--secondary-teal-light); color: var(--secondary-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .floating-card-2 .card-icon { background-color: var(--accent-gold-light); color: var(--accent-gold); } .card-info h4 { font-size: 0.95rem; font-weight: 700; color: var(--primary-navy); } .card-info p { font-size: 0.75rem; color: var(--text-muted); } @media (max-width: 992px) { .hero { padding-top: calc(var(--header-height) + 40px); padding-bottom: 60px; min-height: auto; } .hero-grid { grid-template-columns: 1fr; gap: 50px; } .hero-title { font-size: 2.8rem; } .hero-subtitle { font-size: 1.15rem; } .hero-image-wrapper { max-width: 500px; margin: 0 auto; } .floating-card-1 { left: 5%; } .floating-card-2 { right: 5%; } } @media (max-width: 480px) { .hero-title { font-size: 2.2rem; } .hero-ctas { flex-direction: column; width: 100%; gap: 12px; } .hero-ctas .btn { width: 100%; } .hero-trust-bullets { flex-direction: column; gap: 16px; } .floating-card { padding: 12px; } .floating-card-1 { top: 10%; left: 0%; } .floating-card-2 { bottom: 10%; right: 0%; } } /* ========================================================================== Trust Stats Section ========================================================================== */ .trust-stats { background-color: var(--primary-navy); color: var(--text-white); padding: 60px 0; position: relative; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-item { text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); } .stat-item:last-child { border-right: none; } .stat-number { font-family: var(--font-primary); font-size: 3rem; font-weight: 700; color: var(--secondary-teal); margin-bottom: 8px; } .stat-number span.gold { color: var(--accent-gold); } .stat-label { font-size: 0.95rem; color: var(--text-light); font-family: var(--font-primary); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 992px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .stat-item:nth-child(2) { border-right: none; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: 30px; } .stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; } .stat-item:last-child { border-bottom: none; padding-bottom: 0; } } /* ========================================================================== About Doctor ========================================================================== */ .about-doctor { background-color: var(--bg-gray-light); } .doctor-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; } .doctor-image-container { position: relative; } .doctor-image-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 8px solid var(--bg-white); background-color: var(--bg-white); } .doctor-image-wrapper img { width: 100%; object-fit: cover; } .doctor-experience-tag { position: absolute; bottom: -20px; right: -20px; background-color: var(--accent-gold); color: var(--bg-white); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-primary); text-align: center; } .doctor-experience-tag h3 { font-size: 1.8rem; font-weight: 700; color: var(--bg-white); } .doctor-experience-tag p { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; } .doctor-info h3 { font-size: 1.8rem; font-weight: 700; color: var(--primary-navy); margin-bottom: 4px; } .doctor-title { font-family: var(--font-primary); font-size: 1rem; color: var(--secondary-teal); font-weight: 600; margin-bottom: 24px; } .doctor-bio { color: var(--text-muted); margin-bottom: 30px; } .doctor-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; } .doc-feature { display: flex; gap: 12px; } .doc-feature-icon { width: 36px; height: 36px; background-color: var(--secondary-teal-light); color: var(--secondary-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .doc-feature-content h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; } .doc-feature-content p { font-size: 0.8rem; color: var(--text-muted); } @media (max-width: 992px) { .doctor-grid { grid-template-columns: 1fr; gap: 50px; } .doctor-image-container { max-width: 450px; margin: 0 auto; } .doctor-experience-tag { bottom: -10px; right: -10px; padding: 15px; } } @media (max-width: 480px) { .doctor-features { grid-template-columns: 1fr; } } /* ========================================================================== Services Grid (Hover Cards) ========================================================================== */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 40px 30px; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Luxury gold line expansion at the top */ .service-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent-gold), var(--secondary-teal)); transform: scaleX(0); transform-origin: left; transition: var(--transition-smooth); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(10, 25, 47, 0.08); border-color: rgba(0, 180, 216, 0.15); } .service-card:hover::after { transform: scaleX(1); } /* Background numbers in Playfair Display / serif style */ .service-card-number { position: absolute; top: 40px; right: 20px; font-family: var(--font-primary); font-size: 5.5rem; font-weight: 900; color: rgba(8, 145, 178, 0.04); line-height: 1; pointer-events: none; transition: var(--transition-smooth); } .service-card:hover .service-card-number { color: rgba(212, 175, 55, 0.08); transform: scale(1.08); } /* Premium Badge for Featured Treatments */ .service-card-badge { position: absolute; top: 14px; right: 16px; background: linear-gradient(135deg, #d4af37, #b8901e); color: #fff; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px 4px 8px; border-radius: 50px; box-shadow: 0 3px 10px rgba(180, 130, 20, 0.35); z-index: 3; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .service-card-badge::before { content: "\2605"; font-size: 0.55rem; color: rgba(255, 255, 255, 0.85); } /* Metadata Capsule Highlights */ .service-meta-specs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .service-meta-specs span { font-size: 0.72rem; font-weight: 600; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 4px 10px; border-radius: 50px; display: inline-flex; align-items: center; gap: 4px; } .service-meta-specs span i { color: var(--secondary-teal); font-size: 0.75rem; } /* Bullet list checkmark styling */ .service-bullet-list { list-style: none; margin: 0 0 28px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } .service-bullet-list li { font-size: 0.85rem; color: #475569; display: flex; align-items: flex-start; gap: 8px; text-align: left; line-height: 1.4; } .service-bullet-list li i.text-teal { color: var(--secondary-teal); font-size: 0.9rem; margin-top: 2px; } .service-icon { width: 60px; height: 60px; background-color: var(--bg-gray-light); color: var(--secondary-teal); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 24px; transition: var(--transition-smooth); } .service-card:hover .service-icon { background-color: var(--secondary-teal); color: var(--bg-white); transform: scale(1.05); } .service-card h3 { font-size: 1.35rem; margin-bottom: 14px; } .service-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; flex-grow: 1; } .service-benefits { list-style: none; margin-bottom: 24px; } .service-benefits li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-dark); font-weight: 500; margin-bottom: 8px; } .service-benefits li i { color: var(--secondary-teal); font-size: 0.9rem; } .service-link { font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600; color: var(--secondary-teal-dark); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .service-link i { transition: transform var(--transition-fast); } .service-card:hover .service-link i { transform: translateX(4px); } @media (max-width: 992px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } } /* ========================================================================== Why Choose Us (Comparison) ========================================================================== */ .why-choose { background-color: var(--bg-gray-light); } .comparison-wrapper { background-color: var(--bg-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } .comparison-table { width: 100%; border-collapse: collapse; text-align: left; } .comparison-table th, .comparison-table td { padding: 24px 30px; border-bottom: 1px solid var(--border-color); } .comparison-table th { font-family: var(--font-primary); font-weight: 700; font-size: 1.1rem; } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table th.col-feature { width: 34%; } .comparison-table th.col-bracewell { width: 33%; background-color: rgba(0, 180, 216, 0.05); color: var(--secondary-teal-dark); } .comparison-table th.col-general { width: 33%; color: var(--text-muted); } .comparison-table td.col-bracewell { background-color: rgba(0, 180, 216, 0.02); font-weight: 500; } .comparison-table td.col-feature { font-weight: 600; font-family: var(--font-primary); color: var(--primary-navy); } .comparison-table td.col-general { color: var(--text-muted); } .check-icon { color: var(--secondary-teal); font-size: 1.2rem; margin-right: 8px; } .cross-icon { color: var(--text-muted); font-size: 1.2rem; margin-right: 8px; opacity: 0.5; } @media (max-width: 768px) { .comparison-wrapper { overflow-x: auto; } .comparison-table th, .comparison-table td { padding: 16px 20px; font-size: 0.85rem; } .comparison-table th.col-feature, .comparison-table td.col-feature { min-width: 150px; } .comparison-table th.col-bracewell, .comparison-table td.col-bracewell { min-width: 180px; } .comparison-table th.col-general, .comparison-table td.col-general { min-width: 180px; } } /* ========================================================================== Before/After Slider & Gallery ========================================================================== */ .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .gallery-slider-side { display: flex; flex-direction: column; align-items: center; } .before-after-wrapper { position: relative; width: 100%; max-width: 500px; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); user-select: none; } .slider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slider-img img { width: 100%; height: 100%; object-fit: cover; } .img-before { z-index: 1; } .img-after { z-index: 2; width: 50%; /* Initial split position */ border-right: 2px solid var(--bg-white); box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1); } .img-after img { width: 500px; /* Keep full width to prevent squishing */ max-width: none; } .slider-handle { position: absolute; top: 0; left: 50%; width: 40px; height: 100%; background: transparent; transform: translateX(-50%); z-index: 3; cursor: ew-resize; display: flex; align-items: center; justify-content: center; } .handle-button { width: 40px; height: 40px; background-color: var(--secondary-teal); border: 3px solid var(--bg-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg-white); box-shadow: var(--shadow-md); font-size: 0.8rem; transition: transform var(--transition-fast); } .slider-handle:hover .handle-button { transform: scale(1.1); } .slider-label { position: absolute; bottom: 16px; padding: 6px 12px; background-color: rgba(10, 25, 47, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--text-white); font-family: var(--font-primary); font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 1px; z-index: 2; } .label-before { right: 16px; } .label-after { left: 16px; } .slider-meta { width: 100%; max-width: 500px; background-color: var(--bg-gray-light); border-radius: var(--radius-md); padding: 20px; margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; border: 1px solid var(--border-color); } .meta-col h5 { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .meta-col p { font-family: var(--font-primary); font-size: 0.95rem; font-weight: 600; color: var(--primary-navy); } .gallery-content-side h3 { font-size: 2rem; margin-bottom: 20px; } .gallery-content-side p { color: var(--text-muted); margin-bottom: 30px; } .case-nav { display: flex; gap: 12px; margin-bottom: 30px; } .case-btn { padding: 10px 20px; background-color: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-family: var(--font-primary); font-weight: 600; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: var(--transition-smooth); } .case-btn.active, .case-btn:hover { background-color: var(--primary-navy); color: var(--bg-white); border-color: var(--primary-navy); } @media (max-width: 992px) { .gallery-grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================== Treatment Journey (Timeline) ========================================================================== */ .journey { background-color: var(--primary-navy); color: var(--text-white); position: relative; overflow: hidden; } .journey::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at 10% 30%, rgba(0, 180, 216, 0.05) 0%, rgba(255, 255, 255, 0) 50% ); pointer-events: none; } .journey .section-title { color: var(--text-white); } .timeline-container { position: relative; max-width: 1000px; margin: 60px auto 0 auto; padding: 20px 0; } /* Vertical Line */ .timeline-container::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255, 255, 255, 0.1); transform: translateX(-50%); } .timeline-item { position: relative; width: 50%; padding: 20px 40px; box-sizing: border-box; } .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; text-align: left; } /* Dot */ .timeline-dot { position: absolute; top: 30px; width: 20px; height: 20px; background-color: var(--primary-navy); border: 4px solid var(--secondary-teal); border-radius: 50%; z-index: 2; transition: var(--transition-smooth); } .timeline-item:nth-child(odd) .timeline-dot { right: -10px; } .timeline-item:nth-child(even) .timeline-dot { left: -10px; } .timeline-item:hover .timeline-dot { background-color: var(--secondary-teal); transform: scale(1.2); box-shadow: var(--shadow-glow); } .timeline-number { font-family: var(--font-primary); font-size: 1.8rem; font-weight: 800; color: rgba(0, 180, 216, 0.3); margin-bottom: 8px; transition: var(--transition-smooth); } .timeline-item:hover .timeline-number { color: var(--secondary-teal); } .timeline-card { background: rgba(23, 42, 69, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border-dark); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-md); transition: var(--transition-smooth); } .timeline-card:hover { transform: translateY(-5px); background: rgba(23, 42, 69, 0.8); border-color: var(--secondary-teal); } .timeline-card h4 { color: var(--text-white); font-size: 1.25rem; margin-bottom: 12px; } .timeline-card p { color: var(--text-light); font-size: 0.9rem; } @media (max-width: 768px) { .timeline-container::before { left: 30px; } .timeline-item { width: 100%; padding-left: 60px; padding-right: 0; text-align: left !important; } .timeline-item:nth-child(even) { left: 0; } .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 20px; } } /* ========================================================================== Technology Section (Animated Cards) ========================================================================== */ .tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .tech-card { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 40px 30px; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); text-align: center; } .tech-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0, 180, 216, 0.2); } .tech-icon-wrapper { width: 80px; height: 80px; background-color: var(--bg-gray-light); color: var(--secondary-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 24px auto; position: relative; transition: var(--transition-smooth); } .tech-card:hover .tech-icon-wrapper { background-color: var(--secondary-teal-light); color: var(--secondary-teal-dark); } /* Apple-style radar ping effect on hover */ .tech-icon-wrapper::after { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px dashed rgba(0, 180, 216, 0.2); border-radius: 50%; opacity: 0; transition: var(--transition-smooth); } .tech-card:hover .tech-icon-wrapper::after { opacity: 1; animation: rotate 8s linear infinite; } @keyframes rotate { 100% { transform: rotate(360deg); } } .tech-card h3 { font-size: 1.25rem; margin-bottom: 12px; } .tech-card p { color: var(--text-muted); font-size: 0.9rem; } @media (max-width: 992px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tech-grid { grid-template-columns: 1fr; } } /* ========================================================================== Testimonials Slider ========================================================================== */ .testimonials { background-color: var(--bg-gray-light); overflow: hidden; } .testimonials-slider { max-width: 850px; margin: 0 auto; position: relative; } .testimonials-track { display: flex; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-slide { min-width: 100%; padding: 20px; box-sizing: border-box; } .testimonial-card { background-color: var(--bg-white); border-radius: var(--radius-xl); padding: 50px 60px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); position: relative; text-align: center; } @media (max-width: 576px) { .testimonial-card { padding: 30px 20px; } } .quote-icon { font-size: 3rem; color: rgba(0, 180, 216, 0.15); margin-bottom: 20px; } .testimonial-text { font-size: 1.15rem; font-style: italic; color: var(--primary-navy); line-height: 1.7; margin-bottom: 30px; } .testimonial-user { display: flex; flex-direction: column; align-items: center; } .user-name { font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem; color: var(--primary-navy); } .user-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .google-stars { color: var(--accent-gold); margin-top: 10px; font-size: 0.9rem; } /* Slider Navigation */ .slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--border-color); cursor: pointer; transition: var(--transition-smooth); } .dot.active { background-color: var(--secondary-teal); transform: scale(1.2); width: 24px; border-radius: var(--radius-full); } /* ========================================================================== Cost Estimator & Quiz Section ========================================================================== */ .assessment-section { background-color: var(--bg-white); } .assessment-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: stretch; } .assessment-card { background-color: var(--primary-navy); color: var(--text-white); border-radius: var(--radius-xl); padding: 50px 40px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .assessment-card::before { content: ""; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: radial-gradient( circle, rgba(0, 180, 216, 0.2) 0%, rgba(255, 255, 255, 0) 70% ); } .estimator-card { background-color: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 50px 40px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; } @media (max-width: 576px) { .assessment-card, .estimator-card { padding: 30px 20px; } } /* Step Wizard General Styling */ .quiz-step { display: none; animation: fadeIn 0.4s ease; } .quiz-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .step-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; } .step-title { font-family: var(--font-primary); font-weight: 600; font-size: 1rem; color: var(--primary-navy); } .step-counter { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .quiz-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; } .quiz-option { background-color: var(--bg-white); border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; text-align: center; cursor: pointer; transition: var(--transition-smooth); } .quiz-option:hover { border-color: var(--secondary-teal); background-color: var(--secondary-teal-light); } .quiz-option.selected { border-color: var(--secondary-teal); background-color: rgba(0, 180, 216, 0.1); box-shadow: 0 4px 12px rgba(0, 180, 216, 0.1); } .quiz-option i { font-size: 1.8rem; color: var(--secondary-teal); margin-bottom: 12px; } .quiz-option p { font-family: var(--font-primary); font-weight: 600; font-size: 0.9rem; } .quiz-nav-btns { display: flex; justify-content: space-between; gap: 16px; } /* AI Smile Tool Canvas & Drag drop */ .smile-upload-zone { border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: var(--radius-lg); padding: 40px 20px; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.05); transition: var(--transition-smooth); margin: 30px 0; position: relative; } .smile-upload-zone:hover { border-color: var(--secondary-teal); background: rgba(255, 255, 255, 0.08); } .smile-upload-zone i { font-size: 2.5rem; color: var(--secondary-teal); margin-bottom: 16px; } .smile-upload-zone h4 { color: var(--text-white); font-size: 1.1rem; margin-bottom: 8px; } .smile-upload-zone p { color: var(--text-light); font-size: 0.8rem; } .smile-input-file { display: none; } .smile-simulation-container { display: none; position: relative; width: 100%; aspect-ratio: 4 / 3; background-color: #000; border-radius: var(--radius-lg); overflow: hidden; margin: 20px 0; } .smile-simulation-canvas { width: 100%; height: 100%; display: block; } .simulation-toggle-overlay { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background-color: rgba(10, 25, 47, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 16px; border-radius: var(--radius-full); display: flex; gap: 10px; z-index: 10; } .sim-toggle-btn { padding: 6px 14px; font-family: var(--font-primary); font-weight: 600; font-size: 0.8rem; color: var(--text-light); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-fast); } .sim-toggle-btn.active { background-color: var(--secondary-teal); color: var(--bg-white); } /* Quiz cost estimate report card */ .estimate-report { text-align: center; animation: fadeIn 0.5s ease; } .estimate-price-range { font-family: var(--font-primary); font-size: 2.5rem; font-weight: 700; color: var(--secondary-teal-dark); margin: 20px 0; } .estimate-cost-note { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 30px; } @media (max-width: 992px) { .assessment-grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================== FAQ Section (Accordion) ========================================================================== */ .faq { background-color: var(--bg-gray-light); } .faq-search-wrapper { max-width: 500px; margin: 0 auto 40px auto; position: relative; } .faq-search-wrapper input { width: 100%; padding: 16px 24px; padding-left: 50px; background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-family: var(--font-secondary); box-shadow: var(--shadow-sm); color: var(--primary-navy); transition: var(--transition-smooth); } .faq-search-wrapper input:focus { border-color: var(--secondary-teal); box-shadow: var(--shadow-glow); } .faq-search-wrapper i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem; } .faq-container-row { max-width: 1150px; margin: 0 auto; display: flex; gap: 24px; } .faq-column { flex: 1; display: flex; flex-direction: column; } @media (max-width: 800px) { .faq-container-row { flex-direction: column; gap: 0; } } .faq-item { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; transition: var(--transition-smooth); } .faq-header { padding: 24px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .faq-header h4 { font-size: 1.05rem; font-weight: 600; color: var(--primary-navy); transition: var(--transition-fast); } .faq-icon { width: 24px; height: 24px; border-radius: 50%; background-color: var(--bg-gray-light); display: flex; align-items: center; justify-content: center; color: var(--primary-navy); transition: var(--transition-smooth); flex-shrink: 0; } .faq-item.faq-open { border-color: var(--secondary-teal); box-shadow: var(--shadow-sm); } .faq-item.faq-open .faq-header h4 { color: var(--secondary-teal-dark); } .faq-item.faq-open .faq-icon { background-color: var(--secondary-teal); color: var(--bg-white); transform: rotate(45deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); background-color: var(--bg-white); } .faq-content { padding: 0 30px 24px 30px; color: var(--text-muted); font-size: 0.95rem; } @media (max-width: 576px) { .faq-header { padding: 16px 20px; } .faq-content { padding: 0 20px 16px 20px; } } /* ========================================================================== Blog Section ========================================================================== */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .blog-card { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; } .blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(0, 180, 216, 0.2); } .blog-image { height: 200px; background-color: var(--bg-gray-medium); position: relative; overflow: hidden; } .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .blog-card:hover .blog-image img { transform: scale(1.05); } .blog-category { position: absolute; top: 16px; left: 16px; background-color: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--secondary-teal-dark); padding: 6px 12px; border-radius: var(--radius-full); font-family: var(--font-primary); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .blog-details { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; } .blog-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; } .blog-details h3 { font-size: 1.15rem; margin-bottom: 12px; line-height: 1.4; color: var(--primary-navy); } .blog-details p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; } .blog-readmore { font-family: var(--font-primary); font-weight: 600; font-size: 0.85rem; color: var(--secondary-teal-dark); display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } } /* ========================================================================== Contact Section & Map ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: stretch; } .contact-info-side { display: flex; flex-direction: column; justify-content: space-between; } .contact-card-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; } .contact-detail-item { display: flex; gap: 16px; padding: 20px; background-color: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .contact-detail-icon { width: 44px; height: 44px; background-color: var(--secondary-teal-light); color: var(--secondary-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .contact-detail-text h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; } .contact-detail-text p { font-size: 0.85rem; color: var(--text-muted); } .contact-map-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); height: 260px; background-color: var(--bg-gray-medium); } .contact-form-wrapper { background-color: var(--bg-white); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); border-radius: var(--radius-xl); padding: 40px; } @media (max-width: 576px) { .contact-form-wrapper { padding: 30px 20px; } } .contact-form-wrapper h3 { font-size: 1.6rem; margin-bottom: 8px; } .contact-form-wrapper p.desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 30px; } .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-family: var(--font-primary); font-weight: 600; font-size: 0.8rem; color: var(--primary-navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 14px 18px; background-color: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: 0.9rem; color: var(--primary-navy); transition: var(--transition-smooth); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary-teal); background-color: var(--bg-white); box-shadow: 0 0 10px rgba(0, 180, 216, 0.1); } .form-group textarea { resize: vertical; } @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; gap: 50px; } } @media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } } /* ========================================================================== Footer ========================================================================== */ footer { background-color: var(--primary-navy); color: var(--text-white); padding: 80px 0 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr; gap: 40px; margin-bottom: 60px; } .footer-col h3.footer-logo { color: var(--text-white); font-family: var(--font-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; } .footer-col p.desc { font-size: 0.85rem; color: var(--text-light); margin-bottom: 24px; line-height: 1.7; } .footer-socials { display: flex; gap: 12px; } .social-icon { width: 38px; height: 38px; background-color: var(--primary-navy-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-white); transition: var(--transition-smooth); } .social-icon:hover { background-color: var(--secondary-teal); color: var(--bg-white); transform: translateY(-2px); } .footer-col h4 { font-family: var(--font-primary); color: var(--text-white); font-size: 1rem; font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { font-size: 0.85rem; color: var(--text-light); transition: var(--transition-fast); } .footer-links a:hover { color: var(--secondary-teal); padding-left: 4px; } .footer-col p.info { font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); } .footer-bottom-links { display: flex; gap: 20px; } @media (max-width: 992px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } } @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } } /* ========================================================================== Sticky Conversion Elements ========================================================================== */ .floating-whatsapp-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: #25d366; border-radius: 50%; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3); display: flex; align-items: center; justify-content: center; color: var(--bg-white); font-size: 2rem; z-index: 998; cursor: pointer; transition: var(--transition-smooth); } .floating-whatsapp-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); } /* Sticky Booking Bar for Mobile */ .sticky-mobile-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border-color); padding: 12px 24px; z-index: 997; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); } .sticky-bar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 768px) { .sticky-mobile-bar { display: block; } /* Push footer up to prevent overlap with sticky mobile bar */ footer { padding-bottom: 100px; } .floating-whatsapp-btn { bottom: 90px; } } /* Modal Booking & Popups */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1001; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease; } .modal-container { background-color: var(--bg-white); border-radius: var(--radius-xl); max-width: 550px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .modal-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; background-color: var(--bg-gray-light); display: flex; align-items: center; justify-content: center; color: var(--primary-navy); font-size: 1.2rem; cursor: pointer; transition: var(--transition-fast); } .modal-close:hover { background-color: var(--secondary-teal); color: var(--bg-white); } .modal-header { padding: 30px 40px 10px 40px; } .modal-body { padding: 20px 40px 40px 40px; } @media (max-width: 576px) { .modal-header, .modal-body { padding-left: 20px; padding-right: 20px; } } /* Exit intent / Lead capture popups */ .lead-popup { max-width: 450px; text-align: center; } .lead-popup-icon { width: 70px; height: 70px; background-color: var(--accent-gold-light); color: var(--accent-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 20px auto; } .lead-popup-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } .lead-popup-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 24px; } /* System Notifications */ .notification-toast { position: fixed; bottom: 20px; left: 20px; background-color: var(--primary-navy); color: var(--text-white); padding: 16px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; z-index: 1002; transform: translateY(150px); transition: var(--transition-smooth); } .notification-toast.show { transform: translateY(0); } /* ========================================================================== Multi-Page Active Navigation Helpers ========================================================================== */ .nav-links a.page-active::after { width: 100%; } /* ========================================================================== About Page: Professional Milestones Timeline ========================================================================== */ .credentials-timeline { max-width: 800px; margin: 50px auto 0 auto; position: relative; padding-left: 30px; } .credentials-timeline::before { content: ""; position: absolute; top: 0; left: 8px; bottom: 0; width: 2px; background-color: var(--border-color); } .milestone-item { position: relative; margin-bottom: 40px; } .milestone-item::before { content: ""; position: absolute; top: 6px; left: -26px; width: 12px; height: 12px; background-color: var(--secondary-teal); border: 3px solid var(--bg-white); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15); z-index: 2; } .milestone-year { font-family: var(--font-primary); font-weight: 700; color: var(--secondary-teal-dark); font-size: 1.1rem; margin-bottom: 4px; } .milestone-title { font-family: var(--font-primary); font-weight: 600; font-size: 1rem; color: var(--primary-navy); margin-bottom: 6px; } .milestone-desc { font-size: 0.9rem; color: var(--text-muted); } /* ========================================================================== Instagram Feed Connector Widget ========================================================================== */ .instagram-feed-section { padding: 80px 0; background-color: var(--bg-gray-light); border-top: 1px solid var(--border-color); } .instagram-header { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto 40px auto; background-color: var(--bg-white); padding: 20px 30px; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } .ig-profile-meta { display: flex; align-items: center; gap: 16px; } .ig-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); padding: 3px; } .ig-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-white); } .ig-name-stats h4 { font-family: var(--font-primary); font-weight: 700; font-size: 1.1rem; color: var(--primary-navy); } .ig-name-stats p { font-size: 0.8rem; color: var(--text-muted); } .ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } .ig-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); background-color: var(--bg-gray-medium); cursor: pointer; } .ig-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .ig-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.85); display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--text-white); opacity: 0; transition: var(--transition-smooth); font-family: var(--font-primary); font-size: 1rem; font-weight: 600; } .ig-item:hover img { transform: scale(1.05); } .ig-item:hover .ig-overlay { opacity: 1; } .ig-overlay span { display: flex; align-items: center; gap: 6px; } @media (max-width: 768px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .instagram-header { flex-direction: column; gap: 16px; text-align: center; padding: 20px; } .ig-profile-meta { flex-direction: column; gap: 8px; } } /* ========================================================================== Case Studies Page Layout ========================================================================== */ .case-study-block { background-color: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 40px; margin-bottom: 50px; box-shadow: var(--shadow-md); } .case-study-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: center; } .case-details-panel { display: flex; flex-direction: column; gap: 20px; } .case-header-row { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; } .case-badge-group { display: flex; gap: 10px; margin-top: 8px; } .case-badge { padding: 4px 10px; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-sm); text-transform: uppercase; } .case-badge-blue { background-color: var(--secondary-teal-light); color: var(--secondary-teal-dark); } .case-badge-gold { background-color: var(--accent-gold-light); color: var(--accent-gold); } .case-section-box { background-color: var(--bg-gray-light); border-radius: var(--radius-md); padding: 20px; border: 1px solid var(--border-color); } .case-section-box h4 { font-family: var(--font-primary); font-weight: 600; font-size: 0.95rem; color: var(--primary-navy); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .case-section-box h4 i { color: var(--secondary-teal); } .case-section-box p { font-size: 0.85rem; color: var(--text-muted); } @media (max-width: 992px) { .case-study-grid { grid-template-columns: 1fr; gap: 40px; } .case-study-block { padding: 24px; } } /* ========================================================================== Detailed Counter Animations Styling ========================================================================== */ .stat-number { font-variant-numeric: tabular-nums; transition: transform 0.5s ease; } .stat-item:hover .stat-number { transform: scale(1.08); } /* ========================================================================== Appliance Selector Tool (treatments.html) ========================================================================== */ .selector-tool-box { background-color: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 40px; box-shadow: var(--shadow-lg); max-width: 800px; margin: 50px auto 0 auto; } .selector-question-step { display: none; animation: fadeIn 0.4s ease; } .selector-question-step.active { display: block; } .selector-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; } @media (max-width: 768px) { .selector-options-grid { grid-template-columns: 1fr; } } .selector-option-card { background-color: var(--bg-gray-light); border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 24px 16px; text-align: center; cursor: pointer; transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; gap: 12px; } .selector-option-card:hover { border-color: var(--secondary-teal); background-color: var(--secondary-teal-light); } .selector-option-card.selected { border-color: var(--secondary-teal); background-color: rgba(0, 180, 216, 0.08); box-shadow: 0 4px 15px rgba(0, 180, 216, 0.12); } .selector-option-card i { font-size: 2rem; color: var(--secondary-teal-dark); } .selector-option-card h4 { font-family: var(--font-primary); font-size: 0.95rem; font-weight: 600; } .selector-option-card p { font-size: 0.75rem; color: var(--text-muted); } .selector-results-card { text-align: center; padding: 20px; border-radius: var(--radius-md); background-color: var(--bg-gray-light); border: 1px solid var(--border-color); margin-top: 30px; animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .selector-results-title { font-family: var(--font-primary); font-size: 1.35rem; font-weight: 700; color: var(--primary-navy); margin-bottom: 8px; } .selector-results-desc { font-size: 0.9rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 24px auto; } /* ========================================================================== Emergency Guidelines & Warning Styling (contact.html) ========================================================================== */ .emergency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; } @media (max-width: 768px) { .emergency-grid { grid-template-columns: 1fr; } } .emergency-alert-card { background-color: #fff8f8; border: 1px solid #ffd8d8; border-left: 5px solid #e63946; border-radius: var(--radius-md); padding: 20px; display: flex; gap: 16px; } .emergency-alert-icon { font-size: 1.5rem; color: #e63946; flex-shrink: 0; } .emergency-alert-info h4 { font-family: var(--font-primary); font-weight: 600; font-size: 1rem; color: #8a1f27; margin-bottom: 4px; } .emergency-alert-info p { font-size: 0.82rem; color: #9c5f64; } .notification-toast i { color: var(--secondary-teal); font-size: 1.2rem; } /* ========================================================================== Homepage Redesign & Clinical Light-Luxury Aesthetic (Professional UI) ========================================================================== */ body.home-page { background-color: #fcfcfd; color: #334155; overflow-x: hidden; } body.home-page h1, body.home-page h2, body.home-page h3, body.home-page h4, body.home-page h5, body.home-page h6 { color: #0f172a; } body.home-page .section-title { color: #0f172a; } body.home-page .section-subtitle { color: #64748b; } /* Header & Navigation inherited globally */ body.home-page .logo { color: #0f172a; } body.home-page .logo-symbol { box-shadow: 0 4px 10px rgba(8, 145, 178, 0.2); } body.home-page .nav-links a { color: #475569; } body.home-page .nav-links a:hover, body.home-page .nav-links a.page-active { color: #0f172a; } body.home-page .nav-links a::after { background-color: #0891b2; } body.home-page .burger-menu span { background-color: #0f172a; } @media (max-width: 992px) { body.home-page .nav-links { background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-left: 1px solid #e2e8f0 !important; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05) !important; } body.home-page .nav-links a:not(.btn) { color: #334155 !important; } } /* Hero Section */ body.home-page .hero { position: relative; padding-top: calc(var(--header-height) + 60px); padding-bottom: 80px; background: radial-gradient( circle at 80% 20%, rgba(8, 145, 178, 0.04) 0%, transparent 60% ), radial-gradient( circle at 20% 80%, rgba(212, 175, 55, 0.02) 0%, transparent 50% ); } body.home-page .hero-badge { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; } body.home-page .hero-title span.gradient { background: linear-gradient(135deg, #0f172a, #0891b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.home-page .hero-subtitle { color: #64748b; } body.home-page .trust-bullet { color: #334155; } body.home-page .hero-trust-bullets { border-top: 1px solid #e2e8f0; } body.home-page .hero-image-wrapper { border: 6px solid #ffffff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 20px rgba(8, 145, 178, 0.04); } body.home-page .hero-svg-guide { position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; pointer-events: none; z-index: 1; animation: rotate-radial 45s linear infinite; opacity: 0.85; } /* Section tags & generic settings */ body.home-page .section-tag { background: #ecfeff; color: #0891b2; border: 1px solid #cffafe; } /* Stats Counter */ body.home-page .trust-stats { background: #ffffff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); } body.home-page .stat-item { border-right: 1px solid #f1f5f9; } body.home-page .stat-number { color: #0891b2; } body.home-page .stat-label { color: #64748b; } /* Doctor Section Teaser */ body.home-page .about-doctor { background-color: #fafafb; border-bottom: 1px solid #e2e8f0; } body.home-page .doctor-image-wrapper { border: 8px solid #ffffff; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); } body.home-page .doctor-bio p { color: #475569; } /* Services section cards */ body.home-page .service-card { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); } body.home-page .service-card:hover { border-color: #0891b2; box-shadow: 0 12px 30px rgba(8, 145, 178, 0.05); background: #ffffff; } body.home-page .service-icon { background-color: #f0fdfa; color: #0891b2; } body.home-page .service-card:hover .service-icon { background-color: #0891b2; color: #ffffff; } body.home-page .service-card p { color: #64748b; } /* Who Can Get Treatment Section */ #who-can-treat { background-color: #fafafb !important; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } .timeline-container { position: relative; margin-top: 50px; padding: 20px 0; } /* Connecting line track behind the nodes */ .timeline-track-line { position: absolute; top: 45px; left: 8%; width: 84%; height: 4px; background-color: var(--border-color); z-index: 1; } .timeline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; z-index: 2; align-items: stretch; } body.home-page .stages-card { background: var(--bg-white) !important; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: stretch; text-align: left; position: relative; } body.home-page .stages-card:hover { transform: translateY(-5px); background: var(--bg-white) !important; border-color: var(--secondary-teal) !important; box-shadow: 0 15px 35px rgba(8, 145, 178, 0.07) !important; } .timeline-node { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; position: relative; } .timeline-dot { width: 20px; height: 20px; border-radius: 50%; border: 4px solid var(--border-color); background-color: #fff; transition: var(--transition-smooth); box-shadow: 0 0 0 4px #fafafb; /* matches who-can-treat bg */ } .stages-card:hover .timeline-dot { border-color: var(--secondary-teal); background-color: var(--secondary-teal); box-shadow: 0 0 12px rgba(0, 180, 216, 0.5), 0 0 0 4px #fafafb; transform: scale(1.1); } .timeline-stage-tag { font-family: var(--font-primary); font-size: 0.72rem; font-weight: 700; color: var(--secondary-teal-dark); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; background: rgba(0, 180, 216, 0.06); border: 1px solid rgba(0, 180, 216, 0.15); padding: 3px 12px; border-radius: 50px; transition: var(--transition-smooth); display: inline-block; } .stages-card:hover .timeline-stage-tag { background: var(--secondary-teal) !important; border-color: var(--secondary-teal) !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(0, 180, 216, 0.25) !important; } .timeline-content { display: flex; flex-direction: column; flex-grow: 1; } .timeline-badge-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .timeline-badge-row .timeline-age-badge { margin-bottom: 0 !important; } .timeline-stage-inline { display: none; } .timeline-age-badge { font-size: 0.8rem; font-weight: 700; color: #b8901e; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(212, 175, 55, 0.06); border: 1px solid rgba(212, 175, 55, 0.15); padding: 3px 10px; border-radius: 50px; display: inline-block; width: fit-content; } .timeline-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .timeline-icon-wrap { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .timeline-icon-wrap.icon-teal { background: #ecfeff; border: 1px solid #cffafe; color: #0891b2; } .timeline-icon-wrap.icon-gold { background: #faf6e8; border: 1px solid #fef3c7; color: #d4af37; } .stages-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary-navy); margin: 0; line-height: 1.2; } .stages-card p { font-size: 0.85rem; color: #475569; line-height: 1.5; margin: 0 0 16px 0; flex-grow: 1; } .timeline-spec-item { font-size: 0.78rem; color: var(--primary-navy); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 6px; } .timeline-spec-item i { color: var(--secondary-teal); font-size: 0.8rem; } .audience-badge { display: inline-block; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; border-radius: 50px; padding: 5px 12px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; margin-top: auto; } .stages-card:hover .audience-badge { background: #ecfeff; border-color: #cffafe; color: #0891b2; transition: var(--transition-fast); } /* ============================================================ Responsive Timeline — Mobile/Tablet (≤ 1099px) Strategy: remove vertical track line, display clean numbered cards ============================================================ */ @media (max-width: 1099px) { /* Hide the vertical track line entirely */ .timeline-track-line { display: none !important; } /* Stack cards in a single column, no left indent */ .timeline-grid { display: flex; flex-direction: column; gap: 16px; padding-left: 0; } /* Hide the old floating node (dot + text on the track) */ .timeline-node { display: none !important; } /* The card itself — clean numbered card layout */ body.home-page .stages-card { padding: 0 !important; border-radius: 20px !important; overflow: hidden; flex-direction: row !important; align-items: stretch !important; gap: 0; } /* Left accent strip — holds the large stage number */ body.home-page .stages-card::before { content: attr(data-stage); display: flex; align-items: center; justify-content: center; width: 64px; min-width: 64px; background: linear-gradient( 160deg, rgba(0, 180, 216, 0.08) 0%, rgba(0, 180, 216, 0.15) 100% ); border-right: 1px solid rgba(0, 180, 216, 0.15); font-family: var(--font-primary); font-size: 1.5rem; font-weight: 800; color: var(--secondary-teal); letter-spacing: -0.01em; flex-shrink: 0; } /* Content area fills remaining width */ .timeline-content { padding: 18px 16px; flex: 1; min-width: 0; } /* Badge row inside card */ .timeline-badge-row { margin-bottom: 8px; gap: 6px; } /* Hide the inline stage text — the ::before strip replaces it */ .timeline-stage-inline { display: none !important; } .timeline-age-badge { font-size: 0.7rem; padding: 2px 8px; } .timeline-header { margin-bottom: 8px; gap: 10px; } .timeline-icon-wrap { width: 34px; height: 34px; font-size: 0.9rem; border-radius: 8px; } .stages-card h3 { font-size: 1rem; } .stages-card p { font-size: 0.82rem; margin-bottom: 10px; line-height: 1.55; } .timeline-spec-item { font-size: 0.75rem; padding: 5px 8px; margin-bottom: 10px; } .audience-badge { font-size: 0.65rem; padding: 4px 10px; margin-top: 0; } /* Hover: teal left strip */ body.home-page .stages-card:hover::before { background: linear-gradient( 160deg, var(--secondary-teal) 0%, var(--secondary-teal-dark) 100% ); color: #ffffff; border-right-color: var(--secondary-teal-dark); } /* Remove hover translate — row layout handles it */ body.home-page .stages-card:hover { transform: none !important; box-shadow: 0 8px 30px rgba(8, 145, 178, 0.12) !important; } } /* Aligners explanation */ body.home-page #why-aligners { background: var(--bg-white) !important; } .science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 10px; /* section subtitle already carries 60px bottom margin */ } .science-benefits-list { display: flex; flex-direction: column; gap: 0; } .science-benefit-item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border-color); } .science-benefit-item:last-child { border-bottom: none; } .science-benefit-icon { width: 50px; height: 50px; border-radius: 13px; background: rgba(0, 180, 216, 0.1); border: 1px solid rgba(0, 180, 216, 0.2); display: flex; align-items: center; justify-content: center; color: var(--secondary-teal); font-size: 1.15rem; flex-shrink: 0; } .science-benefit-title { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; } .science-benefit-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; } .science-stats-card { background: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: 22px; padding: 44px 36px; color: #334155; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); } .science-stats-badge { display: inline-block; background: rgba(0, 180, 216, 0.1); color: var(--secondary-teal); border: 1px solid rgba(0, 180, 216, 0.2); border-radius: 50px; padding: 5px 16px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; } .science-stats-title { color: var(--text-dark); font-size: 1.4rem; font-weight: 800; margin-bottom: 28px; } .science-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-color); } .science-stat-row:last-of-type { border-bottom: none; } .science-stat-label { color: var(--text-muted); font-size: 0.88rem; } .science-stat-value { color: var(--secondary-teal); font-weight: 800; font-size: 1.3rem; } .science-quote-card { background: var(--accent-gold-light); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 12px; padding: 18px; margin-top: 24px; } .science-quote-text { font-size: 0.85rem; color: #713f12; line-height: 1.65; } .science-quote-author { display: block; margin-top: 10px; font-size: 0.76rem; color: #a16207; font-style: italic; } .science-cta-wrapper { text-align: center; margin-top: 24px; } /* Media Queries for responsive styling */ @media (max-width: 991px) { .science-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 0; } } @media (max-width: 576px) { .science-stats-card { padding: 30px 20px; } .science-cta-wrapper .btn { width: 100%; display: block; } } /* Comparison section */ body.home-page .why-choose { background-color: #fafafb; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } body.home-page .comparison-wrapper { background-color: #ffffff; border: 1px solid #e2e8f0; } body.home-page .comparison-table th, body.home-page .comparison-table td { border-bottom: 1px solid #e2e8f0; } body.home-page .comparison-table th.col-bracewell, body.home-page .comparison-table td.col-bracewell { background-color: #f0fdfa; color: #0891b2; } body.home-page .comparison-table th.col-general, body.home-page .comparison-table td.col-general { color: #64748b; } body.home-page .cross-icon { color: #94a3b8; } /* Gallery slider */ body.home-page #gallery { background: #ffffff; } body.home-page .slider-meta { background-color: #f8fafc; border: 1px solid #e2e8f0; } body.home-page .meta-col p { color: #0f172a; } body.home-page .case-btn { background-color: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; } body.home-page .case-btn.active, body.home-page .case-btn:hover { background-color: #0891b2; border-color: #0891b2; color: #ffffff; } /* Estimator section */ body.home-page .assessment-section { background-color: #fafafb !important; border-top: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; background: radial-gradient( circle at 10% 20%, rgba(8, 145, 178, 0.03) 0%, transparent 50% ), radial-gradient( circle at 90% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 50% ) !important; } .estimator-split-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; } .estimator-info-panel { text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .info-panel-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 180, 216, 0.08); border: 1px solid rgba(0, 180, 216, 0.15); color: var(--secondary-teal-dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 14px; border-radius: 50px; margin-bottom: 20px; } .estimator-info-panel h3 { font-family: var(--font-primary); font-size: 2rem; color: var(--primary-navy); margin-bottom: 16px; font-weight: 700; line-height: 1.25; } .estimator-info-panel > p { color: #475569; font-size: 0.95rem; line-height: 1.6; margin-bottom: 30px; } .info-trust-list { list-style: none; padding: 0; margin: 0 0 35px 0; display: flex; flex-direction: column; gap: 24px; width: 100%; } .info-trust-list li { display: flex; gap: 16px; align-items: flex-start; } .info-trust-icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #cbd5e1; box-shadow: var(--shadow-sm); color: var(--secondary-teal); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .info-trust-list h4 { font-size: 0.95rem; font-weight: 700; color: var(--primary-navy); margin: 0 0 4px 0; } .info-trust-list p { font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.45; } .info-panel-testimonial { background: #fff; border-left: 4px solid var(--accent-gold); padding: 16px 20px; border-radius: 0 12px 12px 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); width: 100%; } .testimonial-stars { color: var(--accent-gold); font-size: 0.8rem; margin-bottom: 8px; } .info-panel-testimonial p { font-style: italic; font-size: 0.88rem; color: #475569; margin: 0 0 6px 0; line-height: 1.4; } .testimonial-author { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); } body.home-page .estimator-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 15px 45px rgba(10, 25, 47, 0.05) !important; border-radius: 24px !important; padding: 40px !important; width: 100% !important; max-width: 100% !important; } @media (max-width: 992px) { .estimator-split-layout { grid-template-columns: 1fr; gap: 40px; } .estimator-info-panel { order: 2; } .estimator-info-panel h3 { font-size: 1.7rem; } } body.home-page .step-header { border-bottom: 1px solid #e2e8f0 !important; } body.home-page .step-title { color: #0f172a !important; } body.home-page .quiz-step h3 { color: #0f172a !important; } body.home-page .quiz-option { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } body.home-page .quiz-option:hover, body.home-page .quiz-option.selected { border-color: #0891b2 !important; background: #f0fdfa !important; color: #0891b2 !important; box-shadow: 0 4px 12px rgba(8, 145, 178, 0.06) !important; } body.home-page .quiz-option i { color: #0891b2 !important; } body.home-page .quiz-option.selected p { color: #0891b2 !important; } body.home-page .estimate-report h3 { color: #0f172a !important; } body.home-page .estimate-price-range { color: #0891b2 !important; } body.home-page .form-group label { color: #475569 !important; } body.home-page .form-group input { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; } body.home-page .form-group input:focus { border-color: #0891b2 !important; box-shadow: 0 0 8px rgba(8, 145, 178, 0.15) !important; } /* FAQ section */ body.home-page .faq { background: #ffffff; } body.home-page .faq-search-wrapper { background: #f8fafc; border: 1px solid #e2e8f0; } body.home-page .faq-search-wrapper input { color: #0f172a; } body.home-page .faq-item { background: #ffffff; border: 1px solid #e2e8f0; } body.home-page .faq-item.faq-open { border-color: #0891b2; box-shadow: 0 6px 15px rgba(8, 145, 178, 0.03); } body.home-page .faq-header h4 { color: #334155; } body.home-page .faq-item.faq-open .faq-header h4 { color: #0891b2; } body.home-page .faq-body { color: #475569; } /* Instagram section */ body.home-page .instagram-feed-section { background-color: #fafafb; border-top: 1px solid #e2e8f0; } body.home-page .ig-profile-meta h4 { color: #0f172a; } body.home-page .ig-name-stats p { color: #64748b; } body.home-page .ig-name-stats p span { color: #0f172a !important; } body.home-page .ig-item { border: 1px solid #e2e8f0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02); } /* Footer section */ body.home-page footer { background-color: #0f172a; } body.home-page footer h3.footer-logo { color: #ffffff; } body.home-page footer h4 { color: #ffffff; } body.home-page footer .footer-links a { color: #94a3b8; } body.home-page footer .footer-links a:hover { color: #ffffff; } body.home-page footer .info { color: #cbd5e1; } body.home-page footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); color: #94a3b8; } /* Scroll reveals */ body.home-page .reveal, body.home-page .reveal-left, body.home-page .reveal-right { opacity: 0; transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } body.home-page .reveal { transform: translateY(30px); } body.home-page .reveal-left { transform: translateX(-30px); } body.home-page .reveal-right { transform: translateX(30px); } body.home-page .reveal.active, body.home-page .reveal-left.active, body.home-page .reveal-right.active { opacity: 1; transform: translate(0, 0); } /* ========================================================================== Mobile UI Optimizations ========================================================================== */ /* Spacing and visual overrides for screen widths <= 576px (Mobile viewport) */ @media (max-width: 576px) { /* 1. Services Grid & Card Padding */ body.home-page .services-grid { gap: 20px !important; } body.home-page .service-card { padding: 30px 20px !important; } body.home-page .service-card-number { font-size: 4rem !important; top: 44px !important; right: 14px !important; } body.home-page .service-card-badge { top: 12px !important; right: 14px !important; font-size: 0.57rem !important; padding: 3px 8px 3px 7px !important; } body.home-page .service-meta-specs { gap: 6px !important; margin-bottom: 16px !important; } body.home-page .service-meta-specs span { font-size: 0.68rem !important; padding: 3px 8px !important; } body.home-page .service-bullet-list { margin-bottom: 20px !important; gap: 8px !important; } /* 2. Treatment Cost Calculator Card Padding Override */ body.home-page .estimator-card { padding: 24px 16px !important; border-radius: 16px !important; } body.home-page .quiz-step h3 { font-size: 1rem !important; margin-bottom: 16px !important; } body.home-page .quiz-option { padding: 14px 10px !important; border-radius: 10px !important; } body.home-page .quiz-option i { font-size: 1.4rem !important; margin-bottom: 8px !important; } body.home-page .quiz-option p { font-size: 0.82rem !important; } body.home-page .quiz-nav-btns { margin-top: 10px !important; } body.home-page .form-group { margin-bottom: 14px !important; } body.home-page .form-group label { font-size: 0.8rem !important; margin-bottom: 4px !important; } body.home-page .form-group input { padding: 10px 12px !important; font-size: 0.85rem !important; } body.home-page .estimate-report p { font-size: 0.8rem !important; } /* Stack quiz option cards vertically into a neat row list style */ body.home-page .quiz-options-grid { grid-template-columns: 1fr !important; gap: 10px !important; } body.home-page .quiz-option { display: flex !important; align-items: center !important; gap: 14px !important; text-align: left !important; padding: 12px 16px !important; } body.home-page .quiz-option i { font-size: 1.25rem !important; margin-bottom: 0 !important; width: 24px !important; text-align: center !important; } body.home-page .quiz-option p { margin: 0 !important; } /* Trust panel styles stack vertically */ body.home-page .estimator-info-panel h3 { font-size: 1.5rem !important; } body.home-page .estimator-info-panel > p { font-size: 0.88rem !important; } body.home-page .info-trust-list { gap: 18px !important; } body.home-page .info-trust-icon { width: 36px !important; height: 36px !important; font-size: 0.95rem !important; } body.home-page .info-trust-list h4 { font-size: 0.88rem !important; } body.home-page .info-trust-list p { font-size: 0.8rem !important; } } /* ========================================================================== ✨ Animation Enhancement Pack — Elegant & Subtle (site-wide) ========================================================================== */ /* 1. Smooth page-load fade */ @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } body { animation: pageEnter 0.6s ease-out both; } /* 2. Scroll progress bar (element injected by index.js) */ .scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--secondary-teal), var(--accent-gold)); z-index: 2000; border-radius: 0 var(--radius-full) var(--radius-full) 0; transition: width 0.1s linear; pointer-events: none; } /* 3. Hero title — living gradient shimmer */ .hero-title span.gradient { background: linear-gradient( 120deg, var(--primary-navy) 0%, var(--secondary-teal) 35%, var(--secondary-teal-dark) 55%, var(--primary-navy) 80% ); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 7s ease-in-out infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* 4. Hero image — gentle breathing float + soft ambient glow */ .hero-image-wrapper { animation: heroFloat 8s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); box-shadow: var(--shadow-lg); } 50% { transform: translateY(-10px); box-shadow: 0 30px 50px -18px rgba(10, 25, 47, 0.18); } } /* Hero dashed guide ring — slow rotation */ .hero-svg-guide { animation: rotate 40s linear infinite; transform-origin: center; } /* 5. Hero badge — soft pulse ring */ .hero-badge { position: relative; animation: badgePulse 3.5s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(0, 180, 216, 0); } } /* 6. Buttons — light sheen sweep on hover */ .btn { position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.35), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; } .btn:hover::before { left: 130%; } /* 7. Card icons — gentle lift-tilt micro-interaction */ .service-icon, .tech-icon-wrapper, .info-trust-icon, .contact-detail-icon, .doc-feature-icon, .science-benefit-icon, .timeline-icon-wrap { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } .service-card:hover .service-icon, .tech-card:hover .tech-icon-wrapper, .info-trust-list li:hover .info-trust-icon, .contact-detail-item:hover .contact-detail-icon, .doc-feature:hover .doc-feature-icon, .science-benefit-item:hover .science-benefit-icon, .stages-card:hover .timeline-icon-wrap { transform: translateY(-4px) rotate(-6deg) scale(1.08); box-shadow: 0 8px 18px -6px rgba(0, 180, 216, 0.35); } /* 8. Images inside reveals — soft scale settle */ .reveal img, .reveal-left img, .reveal-right img { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal:not(.active) .doctor-image-wrapper img, .reveal-left:not(.active) .doctor-image-wrapper img, .reveal-left:not(.active) .hero-image-wrapper img, .reveal-right:not(.active) .hero-image-wrapper img { transform: scale(1.06); } /* 9. Stat numbers — pop-settle once counted */ .stat-number.counted { animation: statSettle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes statSettle { 0% { transform: scale(0.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } /* 10. Logo — playful tooth wiggle on hover */ .logo:hover .logo-symbol { animation: logoWiggle 0.6s ease-in-out; } @keyframes logoWiggle { 0%, 100% { transform: rotate(-45deg); } 30% { transform: rotate(-55deg) scale(1.06); } 60% { transform: rotate(-38deg); } } /* 11. Floating WhatsApp — welcoming pulse ring */ .floating-whatsapp-btn { animation: waPulse 2.6s ease-out infinite; } @keyframes waPulse { 0% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.4); } 70% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35), 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35), 0 0 0 0 rgba(37, 211, 102, 0); } } /* 12. Section tags — subtle slide-fade entrance */ .section-tag { animation: tagIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes tagIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* 13. Table rows & FAQ — smooth hover tint */ .comparison-table tbody tr { transition: background-color 0.3s ease; } .comparison-table tbody tr:hover { background-color: rgba(0, 180, 216, 0.03); } .faq-item { transition: var(--transition-smooth), transform 0.35s ease; } .faq-item:hover { transform: translateX(4px); } /* 14. Timeline dots — soft heartbeat */ .timeline-dot { animation: dotBeat 3s ease-in-out infinite; } @keyframes dotBeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.25); } 50% { box-shadow: 0 0 0 6px rgba(0, 180, 216, 0); } } /* 15. Instagram grid items — zoom-tint on hover */ .ig-item { overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .ig-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .ig-item img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .ig-item:hover img { transform: scale(1.07); } /* 16. Footer social icons — rise on hover */ .social-icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease; } .social-icon:hover { transform: translateY(-4px) scale(1.1); } /* ========================================================================== Life Stages — clean "age path" redesign (homepage #who-can-treat) ========================================================================== */ .lifestage-track { position: relative; margin-top: 10px; /* subtitle already provides 60px; icons float 32px above cards */ } /* CTA buttons under the life-stage grid (previously unstyled) */ .who-cta-group { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 50px; } @media (max-width: 480px) { .who-cta-group { flex-direction: column; } .who-cta-group .btn { width: 100%; max-width: 340px; justify-content: center; } } .lifestage-line { position: absolute; top: 36px; left: 7%; right: 7%; height: 4px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--secondary-teal), var(--accent-gold)); opacity: 0.3; } .lifestage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-top: 36px; position: relative; } .lifestage-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 50px 18px 22px; text-align: center; position: relative; box-shadow: var(--shadow-sm); transition: var(--transition-smooth); display: flex; flex-direction: column; align-items: center; } .lifestage-card:hover { transform: translateY(-6px); border-color: rgba(0, 180, 216, 0.25); box-shadow: var(--shadow-lg); } .lifestage-icon { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; background: var(--bg-white); border: 3px solid var(--secondary-teal); color: var(--secondary-teal); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; box-shadow: 0 8px 22px rgba(0, 180, 216, 0.18); z-index: 2; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } .lifestage-card:nth-child(even) .lifestage-icon { border-color: var(--accent-gold); color: #a87b00; box-shadow: 0 8px 22px rgba(212, 175, 55, 0.2); } .lifestage-card:hover .lifestage-icon { transform: translateX(-50%) translateY(-4px) scale(1.08); } .lifestage-age { display: inline-block; background: var(--secondary-teal-light); color: var(--secondary-teal-dark); font-family: var(--font-primary); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 14px; border-radius: var(--radius-full); margin-bottom: 12px; } .lifestage-card:nth-child(even) .lifestage-age { background: var(--accent-gold-light); color: #8a6f1a; } .lifestage-card h3 { font-size: 1.08rem; margin-bottom: 10px; } .lifestage-card p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; flex-grow: 1; } .lifestage-chips { display: flex; flex-direction: column; gap: 6px; width: 100%; } .lifestage-chips span { font-size: 0.72rem; font-weight: 600; color: #475569; background: var(--bg-gray-light); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .lifestage-chips span i { color: var(--secondary-teal); } @media (max-width: 1100px) { .lifestage-grid { grid-template-columns: repeat(3, 1fr); row-gap: 56px; } .lifestage-line { display: none; } } @media (max-width: 700px) { .lifestage-grid { grid-template-columns: 1fr 1fr; row-gap: 52px; gap: 14px; row-gap: 52px; } } @media (max-width: 480px) { .lifestage-grid { grid-template-columns: 1fr; row-gap: 50px; } .lifestage-card { max-width: 340px; margin: 0 auto; width: 100%; } } /* ========================================================================== Mobile navigation menu — proper page tabs + contact footer ========================================================================== */ .nav-ico { display: none; } .mobile-nav-cta { display: none; } @media (max-width: 992px) { .nav-links { justify-content: flex-start; align-items: stretch; padding: 22px 20px 30px; gap: 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links li { width: 100%; list-style: none; } .nav-links a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border-radius: 14px; font-size: 1rem; border: 1px solid transparent; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .nav-links a::after { display: none; } .nav-links a:active, .nav-links a:hover { background: var(--bg-gray-light); } .nav-links a.page-active { background: var(--secondary-teal-light); color: var(--secondary-teal-dark); border-color: rgba(0, 180, 216, 0.25); font-weight: 600; } .nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--bg-gray-light); color: var(--secondary-teal); font-size: 0.92rem; flex-shrink: 0; transition: background-color 0.25s ease, color 0.25s ease; } .nav-links a.page-active .nav-ico { background: var(--secondary-teal); color: #fff; } /* Contact footer inside the menu */ .mobile-nav-cta { display: block; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--border-color); } .mobile-nav-cta .mnc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .mobile-nav-cta .mnc-btns .btn { width: 100%; justify-content: center; } .mobile-nav-cta .mnc-info { font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.9; } .mobile-nav-cta .mnc-info i { color: var(--secondary-teal); margin-right: 4px; } } /* 16b. Mobile UX polish — majority of traffic is mobile */ @media (max-width: 576px) { /* Comfortable tap targets */ .btn { min-height: 46px; } .nav-links a { padding: 12px 0; display: flex; align-items: center; gap: 14px; } .case-btn, .blog-cat-btn, .case-filter-btn { min-height: 42px; } /* Hero refinements */ .hero { padding-top: calc(var(--header-height) + 24px); } .hero-badge { font-size: 0.75rem; padding: 7px 12px; } .hero-title { letter-spacing: -0.5px; } /* Section rhythm slightly tighter on small screens */ .section-title { font-size: 1.7rem; } .section-subtitle { font-size: 0.95rem; } /* Prevent iOS zoom on form focus (needs ≥16px inputs) */ input, select, textarea { font-size: 16px !important; } /* Timeline (journey) cards breathing room */ .timeline-card { padding: 22px 18px; } /* FAQ hover-shift feels odd on touch */ .faq-item:hover { transform: none; } } /* Disable hover-dependent effects on touch devices */ @media (hover: none) { .service-card:hover, .tech-card:hover, .blog-card:hover, .faq-item:hover { transform: none; } } /* 17. Accessibility — respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } } /* Honeypot — visually hidden, kept in the accessibility tree as off-screen */ .hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }