/* ============================================================ MOBILE SIDEBAR — mobile-sidebar.css Add in your , AFTER bootstrap and style.css ============================================================ */ /* ── Overlay ── */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1040; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s ease; } .mobile-overlay.is-open { display: block; opacity: 1; } /* ── Sidebar shell ── */ .mobile-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: #fff; z-index: 1050; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15); overflow: hidden; } .mobile-sidebar.is-open { transform: translateX(0); } /* ── Header ── */ .mobile-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; background: #fff; flex-shrink: 0; } .mobile-sidebar__logo img { height: 44px; width: auto; object-fit: contain; } .mobile-sidebar__close { width: 36px; height: 36px; border: none; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; cursor: pointer; transition: background 0.2s, color 0.2s; flex-shrink: 0; } .mobile-sidebar__close:hover { background: #C62828; color: #fff; } /* ── Scrollable nav area ── */ .mobile-sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; } .mobile-sidebar__nav::-webkit-scrollbar { width: 4px; } .mobile-sidebar__nav::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; } /* ── Icons ── */ .mobile-sidebar__icon { width: 20px; text-align: center; color: #C62828; font-size: 13px; opacity: 0.85; } /* ── Simple link ── */ .mobile-sidebar__link { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: 14.5px; font-weight: 500; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #f5f5f5; transition: background 0.15s, color 0.15s; gap: 10px; } .mobile-sidebar__link:hover { background: #fff5f5; color: #C62828; } .mobile-sidebar__link span { display: flex; align-items: center; gap: 10px; } /* ── Level-1 accordion ── */ .mobile-sidebar__accordion { border-bottom: 1px solid #f5f5f5; } .mobile-sidebar__accordion-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: 14.5px; font-weight: 500; color: #1a1a1a; background: transparent; border: none; cursor: pointer; text-align: left; gap: 10px; transition: background 0.15s, color 0.15s; } .mobile-sidebar__accordion-btn span { display: flex; align-items: center; gap: 10px; } .mobile-sidebar__accordion-btn:hover, .mobile-sidebar__accordion-btn.is-open { background: #fff5f5; color: #C62828; } .mobile-sidebar__chevron { font-size: 11px; color: #999; transition: transform 0.25s ease; flex-shrink: 0; } .mobile-sidebar__accordion-btn.is-open .mobile-sidebar__chevron { transform: rotate(180deg); color: #C62828; } /* Level-1 body */ .mobile-sidebar__accordion-body { display: none; background: #fafafa; border-top: 1px solid #f0f0f0; } .mobile-sidebar__accordion-body.is-open { display: block; } /* Level-1 sub-links */ .mobile-sidebar__sub-link { display: block; padding: 10px 20px 10px 50px; font-size: 13.5px; color: #444; text-decoration: none; border-bottom: 1px solid #f0f0f0; transition: background 0.15s, color 0.15s; } .mobile-sidebar__sub-link:last-child { border-bottom: none; } .mobile-sidebar__sub-link:hover { background: #fff0f0; color: #C62828; } /* ── Level-2 nested (Services inside Treatments) ── */ .mobile-sidebar__nested { border-bottom: 1px solid #ebebeb; } .mobile-sidebar__nested:last-child { border-bottom: none; } .mobile-sidebar__nested-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 10px 50px; font-size: 13.5px; font-weight: 500; color: #333; background: transparent; border: none; cursor: pointer; text-align: left; gap: 8px; transition: background 0.15s, color 0.15s; } .mobile-sidebar__nested-btn:hover, .mobile-sidebar__nested-btn.is-open { background: #fff0f0; color: #C62828; } .mobile-sidebar__nested-chevron { font-size: 10px; color: #bbb; transition: transform 0.22s ease; flex-shrink: 0; } .mobile-sidebar__nested-btn.is-open .mobile-sidebar__nested-chevron { transform: rotate(90deg); color: #C62828; } /* Level-2 body */ .mobile-sidebar__nested-body { display: none; background: #fff; border-top: 1px solid #f0f0f0; } .mobile-sidebar__nested-btn.is-open+.mobile-sidebar__nested-body { display: block; } /* Treatment deep links */ .mobile-sidebar__treatment-link { display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 62px; font-size: 13px; color: #555; text-decoration: none; border-bottom: 1px solid #f7f7f7; transition: background 0.12s, color 0.12s; } .mobile-sidebar__treatment-link:last-child { border-bottom: none; } .mobile-sidebar__treatment-link:hover { background: #fff5f5; color: #C62828; } .mobile-sidebar__treatment-link .fa-circle-dot { font-size: 7px; color: #C62828; opacity: 0.6; flex-shrink: 0; } /* ── Footer CTA ── */ .mobile-sidebar__footer { padding: 16px 18px; border-top: 1px solid #f0f0f0; background: #fff; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .mobile-sidebar__call-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 500; border-radius: 10px; text-decoration: none; background: #fff5f5; color: #C62828; border: 1px solid rgba(198, 40, 40, 0.2); transition: background 0.2s; } .mobile-sidebar__call-btn:hover { background: #ffe0e0; color: #C62828; } .mobile-sidebar__call-btn--outline { background: #f5f5f5; color: #444; border-color: #e0e0e0; } .mobile-sidebar__call-btn--outline:hover { background: #ebebeb; color: #333; } .mobile-sidebar__appt-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; font-size: 14px; font-weight: 600; border-radius: 10px; text-decoration: none; background: #C62828; color: #fff; transition: background 0.2s, transform 0.15s; margin-top: 2px; } .mobile-sidebar__appt-btn:hover { background: #a52020; color: #fff; transform: translateY(-1px); } .top-bar { font-size: 13px; } .top-bar-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; } .top-bar-item { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; padding: 8px 16px; border-right: 1px solid rgba(255,255,255,0.2); white-space: nowrap; font-size: 13px; transition: background 0.2s; } .top-bar-item:last-child { border-right: none; } a.top-bar-item:hover { background: rgba(255,255,255,0.1); color: #fff; } .top-bar-item i { font-size: 11px; opacity: 0.85; } /* On mobile: center just the two phone numbers */ @media (max-width: 767px) { .top-bar-inner { justify-content: center; } .top-bar-item { padding: 7px 14px; font-size: 12px; } .top-bar *{ font-size:11px; border:none; } .top-bar *:last-child{ border-right:0; } } /* ── Hide on desktop ── */ @media (min-width: 992px) { .mobile-sidebar, .mobile-overlay { display: none !important; } }