/* ============================================================ SYNERGY DENTAL CLINIC — SHARED STYLESHEET ============================================================ */ /* --- Google Fonts are loaded per-page in --- */ /* ===================== CUSTOM PROPERTIES ===================== */ :root { --primary-dark: #28211D; --accent-gold: #D4AF37; --main-bg: #FFCFAE; --soft-gold: #E6C18E; --white: #ffffff; --transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1); --header-height: 90px; /* Typography scale */ --font-section-title: 32px; --font-card-title: 20px; --font-body: 16px; --font-badge: 8px; --font-btn: 14px; } /* ========================= BASE RESET ========================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; outline: none; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background-color: var(--main-bg); color: var(--primary-dark); overflow-x: hidden; line-height: 1.6; padding-top: var(--header-height); } h1, h2, h3, h4, .serif { font-family: 'Playfair Display', serif; } ul { list-style: none; } a, button { cursor: pointer; border: none; background: none; text-decoration: none; color: inherit; transition: var(--transition); } /* ====================== SCROLLBAR ========================= */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--primary-dark); } ::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 4px; } /* ====================== LAYOUT ========================= */ .container { max-width: 1400px; margin: 0 auto; padding: 0 30px; } .section-padding { padding: 60px 0; } @media (max-width: 768px) { .section-padding { padding: 60px 0; } } .text-center { text-align: center; } .bg-peach { background-color: var(--main-bg) !important; } .standard-grid { display: grid; grid-template-columns: repeat(auto-fit, 350px); /* Match portfolio item sizing */ gap: 50px; /* Aligned with visual portfolio scale */ justify-content: center; /* Group cards together */ width: 100%; } .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 350px)); gap: 50px; justify-content: center; width: 100%; } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .gallery-item, .home-gal-item { height: 240px !important; } .home-gal-item .card-media, .gallery-media-wrap { height: 190px !important; } .gallery-description-bar { height: 50px !important; padding: 5px 15px !important; } .gallery-description-bar div { font-size: 13px !important; } } @media (max-width: 768px) { .gallery-grid { grid-template-columns: 1fr !important; gap: 15px !important; } .gallery-item, .home-gal-item { height: 280px !important; } } /* ====================== TYPOGRAPHY TOKENS =================== */ .section-header { max-width: 760px; margin: 0 auto 50px; text-align: center; } .section-badge { display: inline-block; margin-bottom: 12px; padding: 6px 16px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; line-height: 1; } .section-title { font-size: var(--font-section-title); font-weight: 700; line-height: 1.15; margin-bottom: 16px; } /* Global Professional Play Button */ .pro-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(40, 33, 29, 0.85); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 5; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .pro-play-btn .material-symbols-outlined { color: #FFFFFF; font-size: 28px; margin-left: 2px; /* Visual center for play arrow */ } .pro-play-btn:hover { background: var(--primary-dark); transform: translate(-50%, -50%) scale(1.1); border-color: var(--accent-gold); box-shadow: 0 8px 25px rgba(0,0,0,0.5); } .section-description { font-size: var(--font-body); line-height: 1.6; opacity: 0.85; } /* On-dark variants */ .section-header.on-dark .section-badge { background: var(--main-bg); color: var(--accent-gold); border: none; } .section-header.on-dark .section-title { color: var(--white); } .section-header.on-dark .section-description { color: var(--white); } /* On-light variants */ .section-header.on-light .section-badge { background: var(--primary-dark); color: var(--main-bg); border: none; } .section-header.on-light .section-title { color: var(--primary-dark); } .section-header.on-light .section-description { color: var(--primary-dark); } /* Standard Cards */ .dark-card, .peach-card { border-radius: 24px; padding: 16px; max-width: 350px; width: 100%; margin: 0 auto; text-align: center; transition: var(--transition); cursor: pointer; box-sizing: border-box; display: flex; flex-direction: column; border: 2px solid transparent; } .dark-card:hover { border-color: rgba(212, 175, 55, 0.4); transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,0,0,0.3); } .peach-card:hover { border-color: var(--accent-gold); transform: translateY(-8px); box-shadow: 0 20px 45px rgba(212,175,55,0.15); } .card-media { width: 100%; height: 220px; border-radius: 16px; overflow: hidden; margin-bottom: 20px; position: relative; } .card-media img, .card-media .video-facade { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform 0.6s ease; } .dark-card:hover .card-media img, .peach-card:hover .card-media img, .dark-card:hover .card-media .video-facade, .peach-card:hover .card-media .video-facade { transform: scale(1.06); } .dark-card { background: var(--primary-dark); } .dark-card .card-title { color: var(--main-bg); margin-bottom: 8px; } .dark-card p, .dark-card .card-description { color: var(--white); margin: 0; } .peach-card { background: var(--main-bg); } .peach-card .card-title { color: var(--primary-dark); margin-bottom: 8px; } .peach-card p, .peach-card .card-description { color: var(--primary-dark); margin: 0; } /* Card typography */ .card-title { font-family: 'Playfair Display', serif; font-size: clamp(18px, 3vw, 20px); font-weight: 700; line-height: 1.25; margin-bottom: 12px; } .slide-content h1, .slide-content p { text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .card-description { font-size: var(--font-body); font-weight: 400; line-height: 1.6; opacity: 0.85; } /* ====================== REVEAL ANIMATION =================== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.active { opacity: 1; transform: translateY(0); } /* ====================== GOLD BUTTON ======================= */ .btn-gold { position: relative; display: inline-block; background: var(--accent-gold) !important; color: var(--primary-dark) !important; padding: 10px 24px; border-radius: 50px; font-size: var(--font-btn); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; overflow: hidden; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); transition: var(--transition); } .btn-gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); background-size: 200% 100%; animation: shimmer 3s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5); background: var(--soft-gold) !important; } /* ====================== HEADER ======================= */ header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); display: flex; align-items: center; background: rgba(40, 33, 29, 0.98); backdrop-filter: blur(15px); z-index: 1000; border-bottom: 1px solid rgba(212, 175, 55, 0.2); transition: none; /* Removed transition to prevent glitching */ } header .container { display: flex; align-items: center; width: 100%; gap: 25px; } .logo { display: flex; align-items: center; gap: 12px; color: var(--accent-gold) !important; font-size: 21px; /* Fixed PX size for total stability */ font-weight: 900; text-decoration: none; flex-shrink: 0; transition: none !important; /* Absolutely no transition for logo name */ } .logo span { transition: none !important; } .logo-box { width: 55px; height: 55px; background: var(--accent-gold) !important; color: var(--primary-dark) !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; overflow: hidden; transition: none !important; } .logo-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } @media (max-width: 576px) { .logo-box { width: 45px; height: 45px; } } nav { margin-left: auto; } nav ul { display: flex; gap: 25px; list-style: none; } nav ul li a { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 10px 0; display: block; text-decoration: none; transition: color 0.2s ease; } nav ul li a.active { transition: none !important; /* Snap color instantly on load */ } nav ul li a:hover, nav ul li a.active { color: var(--accent-gold); } header > .container > .btn-gold { white-space: nowrap; flex-shrink: 0; padding: 8px 18px; font-size: 12px; } .mobile-nav-btn { display: none; /* Hidden by default (desktop) */ } /* Mobile toggle */ .mobile-menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; flex-shrink: 0; padding: 4px; border-radius: 6px; transition: background 0.3s ease; } .mobile-menu-toggle span { width: 28px; height: 2px; background: var(--accent-gold); display: block; border-radius: 2px; transform-origin: center; transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease, background 0.3s ease; } /* ── Open state: bars animate into an X ── */ .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ====================== FOOTER ======================= */ footer { background: var(--primary-dark); color: white; padding: 60px 0 30px; border-top: 1px solid rgba(212, 175, 55, 0.2); } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 30px; margin-bottom: 60px; } .footer-brand { display: flex; flex-direction: column; gap: 25px; } .footer-brand .logo { font-size: 1.5rem; } .footer-brand .logo-box { width: 55px; height: 55px; } .footer-brand > p { line-height: 1.8; opacity: 0.7; font-size: 0.95rem; max-width: 320px; } .footer-section h4 { color: var(--main-bg) !important; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 700; font-family: 'Inter', sans-serif; position: relative; padding-bottom: 12px; } .footer-section h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--main-bg); } .footer-section ul { padding: 0; list-style: none; } .footer-section ul li { margin-bottom: 12px; } .footer-section ul li a { color: white; text-decoration: none; opacity: 0.75; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; } .footer-section ul li a:hover { opacity: 1; color: var(--accent-gold); padding-left: 8px; } .footer-section ul li a .material-symbols-outlined { font-size: 1.1rem; color: rgba(212, 175, 55, 0.7); transition: transform 0.3s ease; } .footer-section ul li a:hover .material-symbols-outlined { color: var(--accent-gold); transform: scale(1.2); } .footer-info-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; } .footer-info-item .material-symbols-outlined { color: var(--accent-gold); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; } .footer-info-item p, .footer-info-item a { opacity: 0.75; font-size: 0.95rem; line-height: 1.6; text-decoration: none; color: inherit; display: block; transition: all 0.3s ease; } .footer-info-item a:hover { opacity: 1; color: var(--accent-gold); } .footer-follow h5 { color: var(--main-bg); font-size: 0.85rem; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Inter', sans-serif; font-weight: 700; } .footer-social { display: flex; gap: 15px; margin-top: 5px; } .social-link { width: 42px; height: 42px; background: rgba(255,255,255,0.04); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-gold) !important; text-decoration: none; transition: 0.3s; } .social-link:hover { transform: translateY(-3px); background: rgba(212, 175, 55, 0.1); } .social-link svg { width: 20px; fill: currentColor; } .footer-divider { height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 30px; } .footer-bottom { text-align: center; } .footer-bottom p { font-size: 0.85rem; opacity: 0.4; letter-spacing: 1px; } .page-hero { position: relative; width: 100%; height: 220px; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; color: white; overflow: hidden; padding: 0; } @media (max-width: 1024px) { .page-hero { height: 180px; } } @media (max-width: 768px) { .page-hero { height: 150px; } } .page-hero img.banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: none; } .page-hero .container { position: relative; z-index: 10; padding: 20px; } /* ====================== RESPONSIVE ========================= */ @media (max-width: 1024px) { header { height: 80px; } body { padding-top: 80px; } nav.mobile-menu { top: 80px; } header .container { justify-content: space-between; } .mobile-menu-toggle { display: flex; order: 2; margin-left: auto; } nav { display: none; order: 4; } nav.mobile-menu { display: block; position: absolute; top: 90px; left: 0; width: 100%; background: rgba(40, 33, 29, 0.98); padding: 30px 0; border-bottom: 1px solid rgba(212, 175, 55, 0.2); text-align: center; z-index: 999; } nav.mobile-menu ul { flex-direction: column; gap: 15px; align-items: center; } nav.mobile-menu .mobile-nav-btn { display: flex; justify-content: center; width: 100%; margin-top: 25px; padding-bottom: 30px; } nav.mobile-menu .mobile-nav-btn .btn-gold { width: 60%; max-width: 200px; padding: 10px 0; font-size: 12px; text-align: center; display: block; } header > .container > .btn-gold { order: 3; margin-left: 15px; padding: 8px 16px; font-size: 12px; } .logo { order: 1; } } @media (max-width: 768px) { header { height: 80px; } nav.mobile-menu { top: 80px; } .footer-content { grid-template-columns: 1fr; gap: 15px; } .footer-brand > p { max-width: 100%; } footer { padding-bottom: 70px; } .section-title { font-size: 28px !important; } .card-title { font-size: 18px !important; } .section-header h2 { font-size: 28px !important; } .page-header { padding-top: 60px !important; } /* Specifically requested 60px top padding */ } @media (max-width: 576px) { header { height: 75px; } body { padding-top: 75px; } nav.mobile-menu { top: 75px; } header > .container > .btn-gold { display: none !important; } .logo { font-size: 18px !important; gap: 6px; } .logo span { white-space: nowrap; font-size: 18px !important; } .footer-brand .logo, .footer-brand .logo span { font-size: 18px !important; } .logo-box { width: 45px; height: 45px; } header .container { padding: 0 15px; } .container { padding: 0 15px; } } /* ====================== MASTERPIECES SPECIFIC ===================== */ .page-header { text-align: center; padding: 70px 0 50px; } .page-header .section-badge { display: inline-block; background: var(--main-bg); color: var(--accent-gold); padding: 6px 16px; border-radius: 999px; font-size: var(--font-badge); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; } .page-header .section-title { color: var(--main-bg); font-size: var(--font-section-title); margin-bottom: 16px; } .page-header .section-description { color: rgba(255,255,255,0.85); font-size: var(--font-body); max-width: 700px; margin: 0 auto; } .gold-line { display: none; } .masterpiece-card { max-width: 1100px; width: 95%; margin: 0 auto 60px; background: var(--main-bg); border-radius: 24px; overflow: hidden; display: flex; flex-direction: row; transition: transform 0.45s ease, border-color 0.3s ease; border: 2px solid transparent; scroll-margin-top: 120px; } .masterpiece-card.reversed { flex-direction: row-reverse; } .masterpiece-card:hover { transform: translateY(-8px); border-color: var(--accent-gold); } .split-content { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; color: var(--primary-dark); } .split-content h3 { font-size: var(--font-card-title); color: var(--primary-dark); margin-bottom: 12px; } .content-divider { width: 50px; height: 3px; background: var(--primary-dark); opacity: 0.4; border-radius: 2px; margin-bottom: 20px; } .split-content p { color: rgba(40,33,29,0.85); font-size: var(--font-body); line-height: 1.6; margin-bottom: 30px; } .split-media { flex: 0 0 auto; width: 420px; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0,0,0,0.04); border-left: 1px solid rgba(0,0,0,0.06); } .masterpiece-card.reversed .split-media { border-left: none; border-right: 1px solid rgba(0,0,0,0.06); } .ba-box { width: 350px; max-width: 100%; height: 400px; position: relative; overflow: hidden; border-radius: 16px; border: 4px solid var(--accent-gold); cursor: ew-resize; user-select: none; } .ba-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .ba-before { clip-path: inset(0 50% 0 0); z-index: 2; } .ba-after { z-index: 1; } .ba-slider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--accent-gold); transform: translateX(-50%); z-index: 10; pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background: var(--accent-gold); border: 3px solid var(--primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .ba-badge { position: absolute; bottom: 14px; padding: 4px 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); color: white; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; z-index: 5; pointer-events: none; } .ba-badge.lbl-before { right: 14px; border-right: 3px solid var(--accent-gold); } .ba-badge.lbl-after { left: 14px; border-left: 3px solid var(--accent-gold); } .home-masterpieces-grid { display: grid; grid-template-columns: repeat(auto-fit, 350px); /* Strict columns matching BA box width */ gap: 50px; /* Aligned with visual portfolio scale */ justify-content: center; /* Group cards together */ margin-top: 50px; } .home-masterpiece-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; } .home-masterpiece-title { margin-top: 20px; color: var(--main-bg); font-size: 1.25rem; font-weight: 700; text-align: center; text-decoration: none; font-family: 'Playfair Display', serif; transition: color 0.3s ease; width: 100%; max-width: 350px; line-height: 1.3; } .home-masterpiece-title:hover { color: var(--accent-gold); } .action-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-dark) !important; color: var(--main-bg) !important; padding: 8px 20px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: all 0.3s ease; } .action-btn:hover { background: var(--primary-dark) !important; color: var(--main-bg) !important; transform: scale(1.02); opacity: 0.95; } .action-btn-light { display: inline-flex; align-items: center; gap: 8px; background: var(--main-bg) !important; color: var(--primary-dark) !important; padding: 8px 20px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: all 0.3s ease; } .action-btn-light:hover { background: var(--main-bg) !important; color: var(--primary-dark) !important; transform: scale(1.02); opacity: 0.95; } /* Gallery Modal specific to masterpieces */ .gallery-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .gallery-modal.is-open { display: flex; } .gallery-modal-inner { position: relative; width: 95%; max-width: 1000px; height: 85vh; background: var(--primary-dark); border-radius: 32px; overflow: hidden; border: 1px solid rgba(212,175,55,0.15); display: flex; flex-direction: column; box-shadow: 0 40px 100px rgba(0,0,0,0.7); } /* Premium Close Button */ .gallery-modal-close { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.05); color: var(--main-bg); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 207, 174, 0.15); font-size: 20px; cursor: pointer; z-index: 20; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); backdrop-filter: blur(10px); } .gallery-modal-close:hover { background: var(--accent-gold); color: var(--primary-dark); border-color: var(--accent-gold); transform: rotate(90deg) scale(1.1); } /* Modal Content Area */ .gallery-track-container { flex: 1; width: 100%; overflow: hidden; position: relative; } .gallery-track { display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .gallery-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px 40px; } .gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); } /* Control Bar (Matching Treatment Gallery) */ .gallery-controls-wrap { display: flex; align-items: center; justify-content: center; gap: 30px; background: rgba(0,0,0,0.45); padding: 20px 0; backdrop-filter: blur(15px); border-top: 1px solid rgba(212,175,55,0.1); z-index: 10; } .gallery-nav-btn { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.2); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .gallery-nav-btn:hover { background: var(--accent-gold); color: var(--primary-dark); border-color: var(--accent-gold); transform: scale(1.05); } .gallery-nav-btn span { font-size: 1.1rem; } .gallery-dots { display: flex; gap: 10px; align-items: center; } .gallery-dot { width: 6px; height: 6px; background: rgba(212, 175, 55, 0.25); border-radius: 50%; cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: none; padding: 0; .gallery-dot.active { background: var(--accent-gold); width: 16px; border-radius: 10px; } /* IMAGE COUNTER for gallery modals */ .gallery-img-counter { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 2.5px; color: var(--accent-gold); background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.38); padding: 5px 20px; border-radius: 50px; min-width: 72px; text-align: center; user-select: none; } box-shadow: 0 0 10px rgba(212,175,55,0.3); } @media (max-width: 768px) { .gallery-modal-inner { height: 75vh; } .gallery-controls-wrap { gap: 20px; padding: 15px 0; } .gallery-nav-btn { width: 34px; height: 34px; } .gallery-slide { padding: 15px 25px; } } /* ====================== TESTIMONIALS SPECIFIC ===================== */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, 350px); gap: 50px; margin-top: 50px; justify-content: center; } .testimonial-card { background: var(--primary-dark); color: white; padding: 30px; border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-bottom: 5px solid var(--accent-gold); display: flex; flex-direction: column; text-align: center; transition: var(--transition); max-width: 350px; min-height: 280px; margin: 0 auto; } .testimonial-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.3); } .stars { color: var(--accent-gold); font-size: 1.1rem; margin-bottom: 15px; } .testimonial-card p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; font-style: italic; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .client-bottom { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: auto; } .client-bottom img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--accent-gold); object-fit: cover; } .client-info h4 { font-weight: 700; color: var(--accent-gold); font-size: 0.9rem; } .client-info span { font-size: 0.7rem; opacity: 0.6; display: block; } .video-section { background: rgba(40,33,29,0.04); } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, 350px); gap: 50px; margin-top: 50px; justify-content: center; } .video-card { background: var(--primary-dark); border-radius: 24px; overflow: hidden; transition: var(--transition); max-width: 350px; width: 100%; margin: 0 auto; } .video-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .video-thumb { height: 220px; position: relative; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; } .video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); transition: var(--transition); } .video-thumb:hover::after { background: rgba(0,0,0,0.3); } .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: rgba(212,175,55,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; transition: var(--transition); } .play-btn .material-symbols-outlined { font-size: 28px; color: var(--primary-dark); } .video-thumb:hover .play-btn { transform: translate(-50%,-50%) scale(1.1); background: var(--accent-gold); } .video-label { position: absolute; bottom: 15px; left: 15px; color: white; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.7rem; font-weight: 700; z-index: 5; } .video-info { padding: 20px; display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(212,175,55,0.15); } .video-info img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent-gold); object-fit: cover; flex-shrink: 0; } .video-info h4 { color: var(--accent-gold); font-size: 1rem; margin-bottom: 3px; } .video-info .stars-sm { color: var(--accent-gold); font-size: 0.75rem; margin-bottom: 3px; } .video-info p { font-size: 0.85rem; color: white; opacity: 0.8; } .video-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.85); z-index: 4000; } .video-modal.is-open { display: flex; } .modal-dialog { width: min(720px, 100%); background: var(--primary-dark); border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.5); } .modal-close { position: fixed; top: 24px; right: 24px; width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5000; backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .modal-close:hover { transform: scale(1.1) rotate(90deg); background: rgba(255,255,255,0.22); } .modal-close .material-symbols-outlined { font-size: 28px; } .modal-dialog { width: min(800px, 95%); background: var(--primary-dark); border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 40px 80px rgba(0,0,0,0.6); border: 1px solid rgba(212, 175, 55, 0.2); } .modal-media { width: 100%; aspect-ratio: 16/9; background: #000; } .modal-media iframe { width: 100%; height: 100%; border: none; display: block; } .modal-info { padding: 25px 30px; background: #FFCFAE; color: #28211D; border-top: 1px solid rgba(40, 33, 29, 0.1); } .modal-info h3 { color: #28211D; font-size: 1.4rem; margin-bottom: 8px; font-family: 'Playfair Display', serif; font-weight: 700; } .modal-info p { opacity: 0.9; font-size: 0.95rem; color: #28211D; line-height: 1.6; } /* Responsive specifics */ @media (max-width: 900px) { .masterpiece-card, .masterpiece-card.reversed { flex-direction: column !important; max-width: 520px; } .split-media { width: 100%; padding: 20px; border-left: none !important; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.06); order: -1; } .split-content { padding: 30px 24px; } .split-content h3 { font-size: 1.4rem; } } @media (max-width: 768px) { .testimonial-grid, .video-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .split-content { padding: 20px 16px; } .split-media { padding: 12px; } .modal-close { top: 16px; right: 16px; } .modal-info { padding: 10px 15px; } .modal-info h3 { font-size: 0.95rem; margin-bottom: 4px; } .modal-info p { font-size: 0.75rem; } } /* ====================== PREMIUM TESTIMONIALS ===================== */ .testi-section { background: #FFCFAE; padding: 60px 0; } .testi-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; text-align: center; } .testi-header { margin-bottom: 60px; } .testi-header .section-badge { background: var(--primary-dark); color: var(--main-bg); padding: 4px 10px; border-radius: 50px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; display: inline-block; } .testi-header .section-title { font-size: 32px; color: #28211D; font-family: 'Playfair Display', serif; font-weight: 700; margin-bottom: 15px; } .testi-header .section-description { font-size: 16px; color: rgba(40, 33, 29, 0.85); font-family: 'Inter', sans-serif; max-width: 700px; margin: 0 auto; } .testi-scroll-wrap { display: flex; gap: 15px; overflow-x: auto; padding: 20px 0 40px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .testi-scroll-wrap::-webkit-scrollbar { display: none; } .testi-card-premium { flex: 0 0 400px; height: 320px; background: #28211D; border-radius: 24px; padding: 35px 40px; border-bottom: 5px solid #D4AF37; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; scroll-snap-align: center; transition: transform 0.4s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden; } .testi-card-premium:hover { transform: translateY(-10px); } .testi-stars-gold { color: #D4AF37; font-size: 1.1rem; margin-bottom: 8px; } .testi-quote-text { color: #FFFFFF; font-size: 15px; font-family: 'Inter', sans-serif; font-style: italic; line-height: 1.6; margin-bottom: 20px; } .testi-author-details { display: flex; flex-direction: row; align-items: center; gap: 15px; width: 100%; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 15px; } .testi-avatar-gold { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #D4AF37; object-fit: cover; flex-shrink: 0; } .testi-author-info { display: flex; flex-direction: column; justify-content: center; } .testi-author-name { color: #FFCFAE; font-size: 16px; font-family: 'Playfair Display', serif; font-weight: 700; margin: 0; line-height: 1.2; } .testi-author-tag { color: #D4AF37; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; } @media (max-width: 768px) { .testi-section { padding: 60px 0; } .testi-card-premium { flex: 0 0 320px; height: 350px; padding: 30px; } } @media (max-width: 425px) { .logo, .logo span, .footer-brand .logo, .footer-brand .logo span { font-size: 18px !important; } } @media (max-width: 320px) { header { height: 65px !important; } body { padding-top: 65px !important; } nav.mobile-menu { top: 65px !important; } .logo { font-size: 16px !important; gap: 8px !important; } .logo span { font-size: 16px !important; white-space: nowrap; } .logo-box { width: 35px !important; height: 35px !important; } header .container { padding: 0 10px !important; } .container { padding: 0 12px !important; } /* Typography & Spacing */ .section-title, .page-header .section-title, .testi-header .section-title { font-size: 22px !important; } .section-description, .card-description { font-size: 14px !important; } .card-title { font-size: 16px !important; } .section-padding { padding: 40px 0 !important; } /* Grid & Layout Force */ .standard-grid, .gallery-grid, .doctor-grid, .home-masterpieces-grid, .testimonial-grid, .video-grid, .service-smart-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .dark-card, .peach-card, .gallery-item, .doctor-card, .testimonial-card, .video-card, .masterpiece-card, .service-card { max-width: 100% !important; width: 100% !important; } /* Masterpieces & Sliders */ .masterpiece-card, .masterpiece-card.reversed { flex-direction: column !important; margin-bottom: 30px !important; } .split-media { width: 100% !important; padding: 15px !important; order: -1; } .ba-box { width: 100% !important; height: 280px !important; } .split-content { padding: 25px 15px !important; } /* Testi scroll */ .testi-card-premium { flex: 0 0 calc(100vw - 40px) !important; padding: 20px !important; height: auto !important; min-height: 300px !important; } }