/* ============================================================ DENTACARE — DARK MODE STYLESHEET ============================================================ Applied when ============================================================ */ .dark-mode { /* Color overrides */ --bg-body: #0e1a27; --bg-section: #121f2e; --bg-card: #162333; --bg-header: rgba(14, 26, 39, 0.97); --text-primary: #e2eaf4; --text-secondary: #9cb3c9; --text-muted: #6a8ca4; --navy: #e2eaf4; --gray-50: #1a2b3c; --gray-100: #1e3148; --gray-200: #243a52; --gray-300: #2e4a66; --gray-400: #3e5f7e; --gray-500: #5580a0; --white: #162333; /* Shadows become darker and more diffuse */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18); --shadow-md: 0 4px 16px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.22); --shadow-lg: 0 10px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.28); --shadow-xl: 0 20px 60px rgba(0,0,0,0.50); --shadow-card: 0 2px 20px rgba(0,0,0,0.25); /* Background body */ color-scheme: dark; } /* ─── BODY ──────────────────────────────────────── */ .dark-mode body { background-color: var(--bg-body); color: var(--text-primary); } /* ─── HEADER ────────────────────────────────────── */ .dark-mode .header { background: var(--bg-header); border-bottom-color: rgba(255,255,255,0.06); } .dark-mode .header.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.35); } .dark-mode .logo-name { color: #e2eaf4; } .dark-mode .logo-tagline { color: #6a8ca4; } /* ─── NAV ────────────────────────────────────────── */ .dark-mode .nav-link { color: #c2d4e4; } .dark-mode .nav-link:hover { background: rgba(26,111,187,0.18); color: #60aee8; } .dark-mode .nav-link.active { color: #60aee8; } /* ─── UTIL BUTTONS ──────────────────────────────── */ .dark-mode .util-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9cb3c9; } .dark-mode .util-btn:hover { background: rgba(26,111,187,0.2); border-color: rgba(26,111,187,0.4); color: #60aee8; } /* ─── HAMBURGER ─────────────────────────────────── */ .dark-mode .hamburger { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .dark-mode .hamburger span { background: #c2d4e4; } .dark-mode .hamburger:hover { background: rgba(26,111,187,0.2); border-color: rgba(26,111,187,0.4); } /* ─── MOBILE MENU ────────────────────────────────── */ .dark-mode .mobile-menu { background: #0e1a27; border-top: 1px solid rgba(255,255,255,0.06); } .dark-mode .mobile-nav-link { color: #c2d4e4; } .dark-mode .mobile-nav-link:hover, .dark-mode .mobile-nav-link.active { background: rgba(26,111,187,0.15); color: #60aee8; border-color: rgba(26,111,187,0.2); } /* ─── HERO ───────────────────────────────────────── */ .dark-mode .hero { background: linear-gradient(135deg, #0c1822 0%, #0f2135 40%, #0c2228 100%); } .dark-mode .hero-title { color: #e2eaf4; } .dark-mode .hero-badge { background: rgba(26,111,187,0.18); border-color: rgba(26,111,187,0.35); color: #60aee8; } .dark-mode .hero-float-card { background: #162333; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .dark-mode .float-value { color: #e2eaf4; } .dark-mode .float-label { color: #6a8ca4; } .dark-mode .float-icon.primary { background: rgba(26,111,187,0.2); } .dark-mode .trust-stat strong { color: #e2eaf4; } /* ─── HIGHLIGHTS STRIP ───────────────────────────── */ .dark-mode .highlights { background: #091628; } .dark-mode .highlight-item { border-right-color: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.05); } .dark-mode .highlight-number { color: #e2eaf4; } .dark-mode .highlight-label { color: rgba(255,255,255,0.45); } .dark-mode .highlight-icon { background: rgba(26,111,187,0.2); } /* ─── CARDS ──────────────────────────────────────── */ .dark-mode .card { background: #162333; border-color: rgba(255,255,255,0.07); } /* ─── SERVICE CARDS ──────────────────────────────── */ .dark-mode .service-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .service-card:hover { border-color: rgba(26,111,187,0.4); box-shadow: 0 10px 40px rgba(0,0,0,0.4); } .dark-mode .service-card h3 { color: #e2eaf4; } .dark-mode .service-card p { color: #9cb3c9; } .dark-mode .service-icon { background: rgba(26,111,187,0.18); color: #60aee8; } .dark-mode .service-card:hover .service-icon { background: var(--primary); color: var(--white); } /* ─── SERVICE CARD EXTENDED ─────────────────────── */ .dark-mode .service-card-extended { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .service-card-top { background: linear-gradient(135deg, rgba(26,111,187,0.12), rgba(0,196,160,0.06)); } /* ─── WHY ITEMS ──────────────────────────────────── */ .dark-mode .why-item { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .why-item:hover { border-color: rgba(26,111,187,0.4); } .dark-mode .why-icon { background: rgba(26,111,187,0.18); color: #60aee8; } .dark-mode .why-item:hover .why-icon { background: var(--primary); color: var(--white); } .dark-mode .why-text h4 { color: #e2eaf4; } .dark-mode .why-text p { color: #9cb3c9; } /* ─── DOCTOR CARDS ───────────────────────────────── */ .dark-mode .doctor-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .doctor-name { color: #e2eaf4; } .dark-mode .doctor-experience { color: #6a8ca4; } .dark-mode .doctor-image { background: #1e2f42; } .dark-mode .rating-count { color: #6a8ca4; } /* ─── ABOUT SECTION ──────────────────────────────── */ .dark-mode .about-image-main { background: rgba(26,111,187,0.1); } .dark-mode .about-badge { background: #162333; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .dark-mode .about-badge-text { color: #6a8ca4; } .dark-mode .stat-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .dark-mode .stat-item:hover { background: rgba(26,111,187,0.15); border-color: rgba(26,111,187,0.35); } .dark-mode .stat-label { color: #6a8ca4; } /* ─── VALUE CARDS ────────────────────────────────── */ .dark-mode .value-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .value-card h3 { color: #e2eaf4; } .dark-mode .value-card p { color: #9cb3c9; } .dark-mode .value-icon { background: linear-gradient(135deg, rgba(26,111,187,0.2), rgba(0,196,160,0.1)); } .dark-mode .value-card:hover .value-icon { background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--white); } /* ─── COUNTERS ───────────────────────────────────── */ .dark-mode .counter-item { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .counter-label { color: #6a8ca4; } /* ─── PROCESS ────────────────────────────────────── */ .dark-mode .process-number { background: #162333; box-shadow: 0 0 0 8px #121f2e; } .dark-mode .process-item:hover .process-number { box-shadow: 0 0 0 8px #121f2e, 0 0 0 12px rgba(26,111,187,0.2); } .dark-mode .process-item h4 { color: #e2eaf4; } .dark-mode .process-item p { color: #9cb3c9; } /* ─── TESTIMONIALS ───────────────────────────────── */ .dark-mode .testimonial-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .testimonial-text { color: #9cb3c9; } .dark-mode .author-name { color: #e2eaf4; } .dark-mode .author-treatment { color: #6a8ca4; } .dark-mode .author-avatar { background: rgba(26,111,187,0.2); color: #60aee8; } /* ─── SLIDER CONTROLS ────────────────────────────── */ .dark-mode .slider-btn { background: #162333; border-color: rgba(255,255,255,0.1); color: #9cb3c9; } .dark-mode .slider-btn:hover { background: var(--primary); border-color: var(--primary); color: white; } .dark-mode .slider-dot { background: rgba(255,255,255,0.15); } /* ─── CONTACT CARDS ──────────────────────────────── */ .dark-mode .contact-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .contact-card h4 { color: #e2eaf4; } .dark-mode .contact-card p, .dark-mode .contact-card a { color: #9cb3c9; } .dark-mode .contact-card a:hover { color: #60aee8; } .dark-mode .contact-icon { background: rgba(26,111,187,0.2); color: #60aee8; } /* ─── EMERGENCY CTA (dark mode keeps its own dark bg) ── */ /* Already dark — no override needed */ /* ─── PAGE HERO ──────────────────────────────────── */ /* Page hero is already dark navy — looks good in both modes */ /* ─── BREADCRUMB ─────────────────────────────────── */ /* Breadcrumb on page hero already uses white/muted — fine */ /* ─── FORMS ──────────────────────────────────────── */ .dark-mode .form-control { background: #1e3148; border-color: rgba(255,255,255,0.1); color: #e2eaf4; } .dark-mode .form-control:focus { border-color: var(--primary); background: #243a52; box-shadow: 0 0 0 3px rgba(26,111,187,0.15); } .dark-mode .form-control::placeholder { color: #3e5f7e; } .dark-mode .form-label { color: #c2d4e4; } .dark-mode select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8ca4' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; appearance: none; } .dark-mode .form-success { background: linear-gradient(135deg, rgba(0,196,160,0.08), rgba(26,111,187,0.08)); border-color: rgba(0,196,160,0.25); } /* ─── APPOINTMENT BOX ────────────────────────────── */ .dark-mode .appointment-form-box { background: #162333; border-color: rgba(255,255,255,0.07); box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .dark-mode .appointment-detail i { background: rgba(26,111,187,0.18); color: #60aee8; } .dark-mode .appointment-detail-text h5 { color: #e2eaf4; } /* ─── FAQ ────────────────────────────────────────── */ .dark-mode .faq-item { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .faq-item.open { border-color: rgba(26,111,187,0.4); } .dark-mode .faq-question { color: #c2d4e4; } .dark-mode .faq-question:hover, .dark-mode .faq-item.open .faq-question { color: #60aee8; } .dark-mode .faq-icon { background: rgba(255,255,255,0.06); color: #6a8ca4; } .dark-mode .faq-answer-inner { color: #9cb3c9; } /* ─── GALLERY ────────────────────────────────────── */ .dark-mode .gallery-item { background: #162333; } .dark-mode .filter-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #9cb3c9; } .dark-mode .filter-btn:hover, .dark-mode .filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; } /* ─── LIGHTBOX ───────────────────────────────────── */ .dark-mode .lightbox { background: rgba(5, 12, 22, 0.97); } /* ─── BLOG ───────────────────────────────────────── */ .dark-mode .blog-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .blog-card h3 { color: #e2eaf4; } .dark-mode .blog-card p { color: #9cb3c9; } .dark-mode .blog-image { background: #1e2f42; } .dark-mode .blog-meta { color: #6a8ca4; } /* ─── BLOG DETAIL ────────────────────────────────── */ .dark-mode .article-content { color: #9cb3c9; } .dark-mode .article-content h2, .dark-mode .article-content h3 { color: #e2eaf4; } .dark-mode .article-content .tip-box { background: rgba(26,111,187,0.12); border-left-color: var(--primary); } .dark-mode .article-content .tip-box p { color: #c2d4e4; } .dark-mode .share-section { border-top-color: rgba(255,255,255,0.08); } .dark-mode .share-btn { background: #162333; border-color: rgba(255,255,255,0.1); color: #9cb3c9; } .dark-mode .share-btn:hover { background: var(--primary); border-color: var(--primary); color: white; } /* ─── SIDEBAR ────────────────────────────────────── */ .dark-mode .sidebar-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .sidebar-card h4 { color: #e2eaf4; border-bottom-color: rgba(255,255,255,0.08); } .dark-mode .sidebar-service-link { color: #9cb3c9; } .dark-mode .sidebar-service-link:hover, .dark-mode .sidebar-service-link.active { background: rgba(26,111,187,0.15); color: #60aee8; border-color: rgba(26,111,187,0.25); } /* ─── SERVICE DETAIL ─────────────────────────────── */ .dark-mode .service-detail-image { background: #1e2f42; } .dark-mode .benefit-item { background: rgba(255,255,255,0.04); } .dark-mode .benefit-item { color: #9cb3c9; } /* ─── DOCTOR PROFILE ─────────────────────────────── */ .dark-mode .doctor-profile-card { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .doctor-profile-image { background: #1e2f42; } .dark-mode .doctor-profile-meta h2 { color: #e2eaf4; } .dark-mode .doctor-profile-meta .specialty { color: #60aee8; } .dark-mode .profile-stat { background: rgba(255,255,255,0.04); } .dark-mode .profile-stat-num { color: #60aee8; } .dark-mode .profile-stat-label { color: #6a8ca4; } .dark-mode .doctor-social-large a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9cb3c9; } .dark-mode .profile-section h3 { color: #e2eaf4; border-bottom-color: rgba(255,255,255,0.08); } .dark-mode .tag { background: rgba(26,111,187,0.18); color: #60aee8; border-color: rgba(26,111,187,0.25); } .dark-mode .education-item { border-bottom-color: rgba(255,255,255,0.08); } .dark-mode .education-text h5 { color: #e2eaf4; } .dark-mode .education-text p { color: #9cb3c9; } .dark-mode .hours-row { background: rgba(255,255,255,0.04); } .dark-mode .hours-row.today { background: rgba(26,111,187,0.18); color: #60aee8; } /* ─── SECTION BACKGROUNDS ────────────────────────── */ .dark-mode .section-alt { background: var(--bg-section); } .dark-mode .section-title { color: #e2eaf4; } .dark-mode .section-subtitle { color: #9cb3c9; } /* ─── STAT ITEMS ─────────────────────────────────── */ .dark-mode .stat-number { color: #60aee8; } /* ─── SATISFACTION ───────────────────────────────── */ .dark-mode .satisfaction-item { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .satisfaction-number { color: #60aee8; } .dark-mode .satisfaction-label { color: #6a8ca4; } /* ─── MAP ────────────────────────────────────────── */ .dark-mode .map-container { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .map-placeholder { background: linear-gradient(135deg, #162333, rgba(26,111,187,0.08)); color: #6a8ca4; } /* ─── FOOTER ─────────────────────────────────────── */ .dark-mode .footer { background: #070f18; } .dark-mode .footer-grid { border-bottom-color: rgba(255,255,255,0.05); } .dark-mode .footer-logo .logo-name { color: #e2eaf4; } .dark-mode .footer-bottom { border-top-color: rgba(255,255,255,0.05); } .dark-mode .footer-social a { background: rgba(255,255,255,0.06); } .dark-mode .footer-newsletter-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } .dark-mode .footer-newsletter-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.08); } /* ─── BACK TO TOP ────────────────────────────────── */ .dark-mode .back-to-top { box-shadow: 0 4px 18px rgba(0,0,0,0.4); } /* ─── SECTIONS ───────────────────────────────────── */ .dark-mode .appointment-section { background: #121f2e; } /* ─── NEWSLETTER ─────────────────────────────────── */ /* Newsletter already has its own gradient background — looks fine */ /* ─── FEATURED TESTIMONIAL ───────────────────────── */ .dark-mode .featured-testimonial { background: linear-gradient(135deg, #091628, #0f2135); } /* ─── COMING SOON ────────────────────────────────── */ /* Coming soon already dark — fine */ /* ─── SECTION HEADINGS ───────────────────────────── */ .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: #e2eaf4; } .dark-mode p { color: #9cb3c9; } /* ─── BUTTONS ────────────────────────────────────── */ .dark-mode .btn-secondary { border-color: rgba(26,111,187,0.5); } .dark-mode .btn-secondary:hover { border-color: var(--primary); } /* ─── DARK MODE TOGGLE ICON ──────────────────────── */ .dark-mode .util-btn[aria-label="Toggle Dark Mode"] i::before { content: '\f185'; /* sun icon */ } /* ─── DOCTOR CARD DETAIL IN GRID ─────────────────── */ .dark-mode .doctor-rating .rating-count { color: #6a8ca4; } /* ─── HERO DESCRIPTION ───────────────────────────── */ .dark-mode .hero-description { color: #9cb3c9; } /* ─── AUTH PAGES — DARK MODE ─────────────────────────────────── */ /* Auth Card */ .dark-mode .auth-card { background: #162333; border-color: rgba(255,255,255,0.07); box-shadow: 0 10px 40px rgba(0,0,0,0.35); } /* Auth Tabs */ .dark-mode .auth-tabs { background: #0e1a27; border-bottom-color: rgba(255,255,255,0.08); } .dark-mode .auth-tab { color: #6a8ca4; } .dark-mode .auth-tab:hover { color: #60aee8; background: rgba(26,111,187,0.12); } .dark-mode .auth-tab.active { color: #60aee8; background: #162333; border-bottom-color: #60aee8; } /* Auth Inputs */ .dark-mode .auth-input { background: #0e1a27; border-color: rgba(255,255,255,0.12); color: #e2eaf4; } .dark-mode .auth-input:focus { border-color: #60aee8; box-shadow: 0 0 0 3px rgba(96,174,232,0.15); background: #091628; } .dark-mode .auth-input.valid { border-color: #00c4a0; } .dark-mode .auth-input.invalid { border-color: #fc5c5c; box-shadow: 0 0 0 3px rgba(252,92,92,0.12); } .dark-mode .auth-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a8ca4' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .dark-mode .auth-input-icon { color: #5580a0; } .dark-mode .auth-toggle-password { color: #5580a0; } .dark-mode .auth-toggle-password:hover { color: #60aee8; } /* Auth Labels */ .dark-mode .auth-label { color: #c2d4e4; } .dark-mode .auth-forgot-link { color: #60aee8; } .dark-mode .auth-forgot-link:hover { color: #93c5e8; } /* Auth Divider */ .dark-mode .auth-divider::before { background: rgba(255,255,255,0.1); } .dark-mode .auth-divider span { background: #162333; color: #5580a0; } /* Auth Social Buttons */ .dark-mode .auth-social-btn { background: #0e1a27; border-color: rgba(255,255,255,0.1); color: #c2d4e4; } .dark-mode .auth-social-btn:hover { border-color: #60aee8; background: rgba(96,174,232,0.1); color: #60aee8; } /* Auth Checkbox */ .dark-mode .auth-checkbox-custom { background: #0e1a27; border-color: rgba(255,255,255,0.2); } .dark-mode .auth-checkbox:checked + .auth-checkbox-custom { background: var(--primary); border-color: var(--primary); } .dark-mode .auth-checkbox-label { color: #9cb3c9; } /* Auth Card Header */ .dark-mode .auth-card-header h2 { color: #e2eaf4; } .dark-mode .auth-card-header p { color: #5580a0; } .dark-mode .auth-card-icon { background: rgba(26,111,187,0.15); border-color: rgba(26,111,187,0.25); } .dark-mode .auth-card-icon--accent { background: rgba(0,196,160,0.12); border-color: rgba(0,196,160,0.2); } /* Auth Trust bar */ .dark-mode .auth-trust-item { color: #6a8ca4; } /* Auth Form Error */ .dark-mode .auth-form-error { background: rgba(252,92,92,0.1); border-color: rgba(252,92,92,0.25); color: #fc9898; } /* Auth Password Rules */ .dark-mode .auth-password-rules .rule { color: #5580a0; } /* Auth Steps */ .dark-mode .auth-step-circle { background: #1e3148; border-color: #1e3148; color: #5580a0; } .dark-mode .auth-step-line { background: rgba(255,255,255,0.1); } .dark-mode .auth-step-label { color: #5580a0; } /* Auth Benefits */ .dark-mode .auth-benefits { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .auth-benefits h3 { color: #e2eaf4; } .dark-mode .auth-benefit-icon { background: rgba(26,111,187,0.15); } .dark-mode .auth-benefit-item strong { color: #c2d4e4; } .dark-mode .auth-benefit-item p { color: #5580a0; } /* Auth Perks */ .dark-mode .auth-perk-item { background: #162333; border-color: rgba(255,255,255,0.07); } .dark-mode .auth-perk-item strong { color: #c2d4e4; } .dark-mode .auth-perk-item p { color: #5580a0; } /* Auth Strength Bar */ .dark-mode .auth-strength-bar { background: #1e3148; } /* Auth Footer Text */ .dark-mode .auth-footer-text { color: #6a8ca4; } .dark-mode .auth-link { color: #60aee8; } .dark-mode .auth-link:hover { color: #93c5e8; } /* Auth Success */ .dark-mode .auth-success-title { color: #e2eaf4; } .dark-mode .auth-success-msg { color: #9cb3c9; } /* Auth Field Hint */ .dark-mode .auth-field-hint { color: #4a6e88; }