/* ============================================================ MyDoctor Greece — Custom Overrides Loaded after style.min.css. The Doccure template handles dark mode entirely via :root.dark-mode variable redefinitions in style.min.css (--white → #151515, --dark → #EFEFEF, --gray-* flipped, etc.). No section-level dark mode overrides are needed here — the template's variable system handles it automatically. This file contains ONLY: 1. Logo sizing 2. Logo light/dark switching 3. btn-outline-white (ghost CTA not in the template) 4. Decorative bg-image fade for dark mode ============================================================ */ /* ── Global — prevent horizontal scroll ─────────────────── */ html, body { overflow-x: hidden; } /* ── Logo — sizing ───────────────────────────────────────── */ /* viewBox aspect ratio ≈ 4.19 : 1 (1195 × 285 SVG units) */ .mdg-logo { display: block; height: 52px !important; width: auto !important; max-width: 240px; min-width: 0; object-fit: contain; flex-shrink: 0; } /* Prevent navbar-brand from clipping or adding unwanted padding */ .navbar-brand.logo { padding: 0; display: flex; align-items: center; line-height: 1; } /* Mobile breakpoint */ @media (max-width: 991.98px) { .mdg-logo { height: 36px !important; max-width: 170px; } } /* Slide-out menu logo */ .menu-logo .mdg-logo { height: 36px !important; } /* ── Logo — light / dark switching ──────────────────────── */ /* theme-script.js sets html.dark-mode (or html.light-mode) inline in before paint — zero flicker. Light mode → show normal coloured logo (logo.svg) Dark mode → show near-white logo (logo-dark.svg) */ html:not(.dark-mode) .mdg-logo--dark { display: none !important; } html.dark-mode .mdg-logo--light { display: none !important; } /* ── btn-outline-white ───────────────────────────────────── */ /* Ghost/outline variant used for the secondary banner CTA (e.g. WhatsApp). The template only defines btn-white (solid), so we add this transparent-background sibling here. On dark mode the template flips --white → #151515, so these rgba values stay readable regardless of mode. */ .btn.btn-outline-white { color: #fff; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.65); } .btn.btn-outline-white:hover, .btn.btn-outline-white:focus, .btn.btn-outline-white:active { background-color: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.8); color: #fff; } /* ── Decorative background images — dark mode ───────────── */ /* Bright decorative PNGs on light-background sections are garish over dark mode colours — fade them to a barely-visible tint. banner-bg-01…07 are intentionally excluded: they sit on the banner-section-two dark gradient where the template's own CSS variables already set the correct contrast. Fading them to 0.07 makes the CSS animations (topBottom, rotate) invisible. */ html.dark-mode .about-bg-01, html.dark-mode .doctor-bg-01, html.dark-mode .doctor-bg-02, html.dark-mode .work-bg-01, html.dark-mode .work-bg-02, html.dark-mode .work-bg-03, html.dark-mode .work-bg-04, html.dark-mode .health-bg-01, html.dark-mode .health-bg-02 { opacity: 0.07; } /* ── Dark mode toggle — reposition above chat launcher ──────── */ /* Template default: position: fixed; right: 10px; top: 50% That places it mid-page and near the chat launcher at bottom-right. Move it to a fixed top-right position so it never overlaps the chat. z-index stays below chat window (9999/10000) but above page content. */ .header-theme-two { right: 22px !important; top: 150px !important; bottom: auto !important; z-index: 500 !important; } @media (max-width: 991.98px) { .header-theme-two { right: 16px !important; top: 95px !important; } } /* Hide dark mode toggle when mobile fullscreen chat is open */ @media (max-width: 768px) { body.mdg-chat-open .header-theme-two { display: none !important; } } /* ── Landing page — final CTA section ───────────────────────── */ .mdg-cta-section { background: linear-gradient(135deg, #0d9488 0%, #0369a1 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .mdg-cta-section h2 { color: #fff; font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; } .mdg-cta-section p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; margin-bottom: 2rem; max-width: 520px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .mdg-cta-section { padding: 56px 0; } .mdg-cta-section h2 { font-size: 1.6rem; } } /* ── Landing page — doctor credentials list ─────────────────── */ .mdg-cred-list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .mdg-cred-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-200, #e2e8f0); font-size: 15px; color: var(--gray-700, #374151); } .mdg-cred-list li:last-child { border-bottom: none; } .mdg-cred-list li i { color: #0d9488; margin-top: 2px; flex-shrink: 0; } /* ── Landing page — reason cards ────────────────────────────── */ .mdg-reason-card { display: flex; align-items: center; gap: 14px; background: var(--white, #fff); border: 1px solid var(--gray-200, #e8edf2); border-radius: 12px; padding: 16px 18px; height: 100%; transition: box-shadow 0.18s ease, transform 0.18s ease; } .mdg-reason-card:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .mdg-reason-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--primary-light, rgba(13, 148, 136, 0.1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: #0d9488; } .mdg-reason-label { font-size: 14px; font-weight: 600; color: var(--gray-900, #111827); line-height: 1.35; } /* ── Landing page — marquee separator ───────────────────────── */ .mdg-slide-sep { opacity: 0.5; margin: 0 8px; } /* ── Landing page — doctor hero badge (trust signal) ────────── */ .mdg-hero-trust { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 40px; padding: 8px 16px; display: inline-flex; margin-bottom: 1.5rem; font-size: 13px; color: #fff; font-weight: 600; } .mdg-hero-trust span { display: inline-block; width: 8px; height: 8px; background: #4ade80; border-radius: 50%; animation: mdgPulse 2s infinite; } /* ── Header transition — remove 0.9s all-property animation ─ */ /* style.min.css sets header { transition: all 0.9s } unconditionally. This makes the outer left/right areas of the header lag 0.9s behind the inner .header-nav when switching dark/light mode, because only the full-width

element has the transition, not the inner nav. Override to animate only the top position (needed for sticky slide-in). */ header, header.fixed { -webkit-transition: top 0.3s ease !important; -ms-transition: top 0.3s ease !important; transition: top 0.3s ease !important; } /* ── Breadcrumb — dark mode contrast fix ────────────────────── */ /* Dark mode is set on by theme-script.js. The template's dark rule only covers .page-breadcrumb ol li — not Bootstrap's plain .breadcrumb-item used in the placeholder pages. These rules bring all breadcrumb text to readable contrast in dark mode. */ html.dark-mode .breadcrumb-bar .breadcrumb-item a { color: #ffffff !important; background: none !important; /* template applies gradient via background-clip, reset it */ -webkit-background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; background-clip: unset !important; } html.dark-mode .breadcrumb-bar .breadcrumb-item, html.dark-mode .breadcrumb-bar .breadcrumb-item.active { color: rgba(255, 255, 255, 0.65) !important; } html.dark-mode .breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.4) !important; /* Bootstrap 5 uses --bs-breadcrumb-divider-color, also override that */ --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.4); } /* ── Online doctor hero — doctor image ──────────────────────────── */ /* Increases the doctor photo from 520 → 700 px tall, bottom-anchors it inside the right column so the doctor "stands" at the section baseline, and re-positions the floating badge relative to the taller image. Hook classes applied in page-online-doctor.php: .mdg-online-photo-col on the right col-xl-6 .mdg-doctor-hero-img on the Template already hides .banner-img at ≤ 1199.98px. We override that at the tablet range (768–1199px) to show the image below the text. */ /* Desktop ≥ 1200px ------------------------------------------------ */ @media (min-width: 1200px) { /* Stretch right column to full section height for bottom-anchoring */ .mdg-online-photo-col { align-self: stretch; } /* Image container: fills column height, image pinned to bottom */ .mdg-online-photo-col .banner-img { height: 100%; display: flex; align-items: flex-end; justify-content: center; } /* Doctor photo: 700 px tall (up from 520 px) */ .mdg-online-photo-col .mdg-doctor-hero-img { max-height: 700px; width: auto; max-width: 100%; border-radius: 20px; display: block; } /* Badge: bottom-relative so it stays within the image frame */ .mdg-online-photo-col .banner-img .banner-user-call { top: auto; bottom: 24%; right: 0; } } /* Tablet 768–1199 px: show image below text at reduced size ------- */ @media (min-width: 768px) and (max-width: 1199.98px) { .mdg-online-photo-col .banner-img { display: flex !important; /* override template's display:none */ justify-content: center; margin-top: 20px; } .mdg-online-photo-col .mdg-doctor-hero-img { max-height: 280px; width: auto; max-width: 80%; border-radius: 16px; } .mdg-online-photo-col .banner-img .banner-user-call { top: 15%; right: 10%; bottom: auto; } } /* Mobile < 768 px: image stays hidden — template default behaviour */ /* Prevent delayed dark/light mode transitions inside the header only */ body header, body header *, body header::before, body header::after, body header *::before, body header *::after, body .header-topbar, body .header-topbar *, body .header-topbar::before, body .header-topbar::after, body .header-topbar *::before, body .header-topbar *::after, body .header-theme, body .header-theme *, body .header-theme::before, body .header-theme::after, body .header-theme *::before, body .header-theme *::after { -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } .banner-section-two .banner-content h1 { text-shadow: none !important; } @media (max-width: 1199.98px) { .banner-section-two .mdg-mobile-doctor-hero { width: clamp(280px, 58vw, 430px); max-width: 430px; margin: 0 auto 28px; position: relative; z-index: 2; } .banner-section-two .mdg-mobile-doctor-hero img { display: block; width: 100%; height: auto; object-fit: contain; } } @media (max-width: 575.98px) { .banner-section-two .mdg-mobile-doctor-hero { width: clamp(250px, 72vw, 310px); max-width: 310px; margin-bottom: 24px; } } /* Always show center testimonial like hover state */ .testimonial-slider-two .slick-center .testimonial-item-two, .testimonial-slider-two .slick-current .testimonial-item-two { background: #2f6bff; border-color: #2f6bff; color: #fff; } /* Text white inside active center card */ .testimonial-slider-two .slick-center .testimonial-item-two .description, .testimonial-slider-two .slick-center .testimonial-item-two h3, .testimonial-slider-two .slick-center .testimonial-item-two p, .testimonial-slider-two .slick-center .testimonial-item-two .author-location, .testimonial-slider-two .slick-current .testimonial-item-two .description, .testimonial-slider-two .slick-current .testimonial-item-two h3, .testimonial-slider-two .slick-current .testimonial-item-two p, .testimonial-slider-two .slick-current .testimonial-item-two .author-location { color: #fff; } /* Show doctor image on active center card */ .testimonial-slider-two .slick-center .testimonial-author-img, .testimonial-slider-two .slick-current .testimonial-author-img { opacity: 1; visibility: visible; transform: scale(1); } /* Make sure the image itself is visible */ .testimonial-slider-two .slick-center .testimonial-author-img img, .testimonial-slider-two .slick-current .testimonial-author-img img { opacity: 1; visibility: visible; display: block; } /* Make quote icon white and visible */ .testimonial-slider-two .slick-center .quote-icon, .testimonial-slider-two .slick-current .quote-icon { opacity: 1; visibility: visible; } .testimonial-slider-two .slick-center .quote-icon img, .testimonial-slider-two .slick-current .quote-icon img { opacity: 1; filter: brightness(0) invert(1); } /* Keep stars yellow */ .testimonial-slider-two .slick-center .rating i, .testimonial-slider-two .slick-current .rating i { color: #ffc107; } /* Center testimonial avatar should match hover position */ .testimonial-slider-two .slick-center .testimonial-item-two .testimonial-author-img, .testimonial-slider-two .slick-current .testimonial-item-two .testimonial-author-img { display: block !important; opacity: 1 !important; visibility: visible !important; top: -20px !important; right: -20px !important; transform: none !important; transition: none !important; z-index: 3 !important; } /* ── Footer brand column — center all content ───────────── */ .footer-brand-column { text-align: center; } /* Social icon list uses flexbox — align icons to center */ .footer-brand-column .social-icon ul { justify-content: center; } /* ── Cookie notice ───────────────────────────────────────── */ /* Fixed bottom bar shown once per visitor. Dark semi-transparent background works in both light and dark mode without extra overrides. JS manages visibility via the `hidden` attribute. */ .cookie-notice { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 680px; display: flex; align-items: center; gap: 1rem; background: rgba(15, 15, 25, 0.92); color: rgba(255, 255, 255, 0.9); border-radius: 0.75rem; padding: 0.875rem 1.125rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9100; font-size: 0.85rem; line-height: 1.45; } .cookie-notice[hidden] { display: none !important; } .cookie-notice-text { flex: 1 1 auto; } .cookie-notice-text a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; margin-left: 0.3rem; white-space: nowrap; } .cookie-notice-text a:hover, .cookie-notice-text a:focus { color: #ffffff; } .cookie-notice-btn { flex-shrink: 0; background: rgba(255, 255, 255, 0.15); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.5rem; padding: 0.35rem 1.1rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; line-height: 1.5; } .cookie-notice-btn:hover, .cookie-notice-btn:focus { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.6); outline: none; } @media (max-width: 575.98px) { .cookie-notice { flex-direction: column; align-items: flex-start; gap: 0.75rem; bottom: 0.75rem; border-radius: 0.625rem; padding: 0.875rem 1rem; width: calc(100% - 1.5rem); } .cookie-notice-btn { align-self: flex-end; } }