/* Shared browser compatibility layer for Haven of Healing pages. */ :root { --compat-vh: 1vh; } /* ── Instant dark mode flash prevention ──────────────────────────────────── browser-compat.js applies dark-mode to from the before body parses. These rules keep the page visually dark during that window so there is no white flash on load. */ html.dark-mode { background: #0f1923; color-scheme: dark; } html.dark-mode body { background: #0f1923; color: #d0d8e8; } @supports (-webkit-text-size-adjust: 100%) { html.browser-safari :root, html.browser-ios-chrome :root { -webkit-text-size-adjust: 100%; } } @supports (text-size-adjust: 100%) { :root { text-size-adjust: 100%; } } html { scroll-behavior: smooth; } body { min-height: 100vh; min-height: calc(var(--compat-vh, 1vh) * 100); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Public-site mobile navigation. Keeps the text links in a horizontal scroll row instead of wrapping into stacked letters on narrow phone screens. */ @media (max-width: 900px) { body > header > nav { height: auto !important; min-height: 60px !important; max-width: 100% !important; padding: 14px !important; display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 14px !important; } body > header > nav .nav-right { order: 1 !important; width: 100% !important; margin-left: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 12px !important; } body > header > nav .nav-links { order: 2 !important; width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 18px !important; margin: 0 !important; padding: 8px 0 10px !important; overflow-x: auto !important; overflow-y: hidden !important; list-style: none !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin; } body > header > nav .nav-links li { flex: 0 0 auto !important; min-width: max-content !important; } body > header > nav .nav-links a, body > header > nav .client-portal, body > header > nav .btn-book { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } body > header > nav .nav-links a { display: inline-block !important; font-size: 1.15rem !important; line-height: 1.2 !important; } body > header > nav .btn-book { width: min(100%, 26rem) !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } body > header > nav .portal-dropdown { left: auto !important; right: 0 !important; transform: none !important; min-width: 210px !important; } body > header > nav .portal-wrap:hover .portal-dropdown { transform: none !important; } } @media (max-width: 560px) { body > header > nav { padding-left: 12px !important; padding-right: 12px !important; } body > header > nav .nav-links { gap: 14px !important; } } html.browser-safari, html.browser-ios-chrome { min-height: -webkit-fill-available; } html.browser-safari body, html.browser-ios-chrome body { min-height: -webkit-fill-available; min-height: calc(var(--compat-vh, 1vh) * 100); } *, *::before, *::after { -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; max-width: 100%; } button, [role="button"], label[for], select { cursor: pointer; } textarea { overflow: auto; } :where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) { -webkit-appearance: none; appearance: none; } :where(select) { -webkit-appearance: menulist; appearance: auto; } ::-webkit-date-and-time-value { min-height: 1.5em; } img, picture, video, iframe { max-width: 100%; } img, video { height: auto; } :where(p, li, dd, dt, figcaption, blockquote, h1, h2, h3, h4, h5, h6, label, button, a, td, th, .panel, .card, .msg-body-text, .client-bubble, .gc-bubble) { overflow-wrap: anywhere; word-break: break-word; } :where(table) { max-width: 100%; } [hidden] { display: none !important; } @supports (-webkit-overflow-scrolling: touch) { :where(.main, .sidebar-nav, .modal-box, .gcm-box, .client-rail-list, .client-thread, .gc-messages, .data-table-wrap, .table-wrap, .content-section) { -webkit-overflow-scrolling: touch; } } @supports (scrollbar-width: thin) { :where(.sidebar-nav, .modal-box, .gcm-box, .client-rail-list, .client-thread, .gc-messages) { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 120, 0.32) transparent; } } :where(.topbar, .panel-header, .compose-foot, .modal-foot, .gcm-foot, .sidebar-nav a, .client-card, .gc-item) { min-width: 0; } :where(.stat-mini, .panel, .compose-panel, .card, .client-layout, .gc-layout, .modal-box, .gcm-box) { -webkit-backface-visibility: hidden; backface-visibility: hidden; } html.browser-google-chrome :where(.stat-mini, .panel, .compose-panel, .client-card, .gc-item, .msg-bubble, .client-msg, .gc-message), html.browser-safari :where(.stat-mini, .panel, .compose-panel, .client-card, .gc-item, .msg-bubble, .client-msg, .gc-message), html.browser-ios-chrome :where(.stat-mini, .panel, .compose-panel, .client-card, .gc-item, .msg-bubble, .client-msg, .gc-message) { -webkit-transform: translateZ(0); transform: translateZ(0); } @supports (min-height: 100dvh) { body { min-height: 100dvh; } } @supports (overflow: clip) { body { overflow-x: clip; } } @supports not (inset: 0) { :where(.modal-overlay, .gcm-overlay, .zoom-modal-overlay) { top: 0; right: 0; bottom: 0; left: 0; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :where(.modal-overlay, .gcm-overlay, .zoom-modal-overlay) { background: rgba(10, 10, 10, 0.82) !important; } } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { :where(.owner-badge span, .emp-badge span, .sidebar-brand-crown, .color-picker-rainbow) { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--gold, currentColor) !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media (max-width: 900px) { :where(.main) { min-width: 0; } :where(.topbar, .panel-header, .compose-foot, .modal-foot, .gcm-foot, .gc-compose, .client-compose) { flex-wrap: wrap; } :where(.compose-row, .form-row, .grid-2, .dashboard-grid, .bottom-grid, .owner-analytics-grid, .owner-history-grid) { grid-template-columns: 1fr !important; } :where(.stats-row, .stat-row, .stats-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } :where(.panel, .data-table-wrap, .table-wrap) { overflow-x: auto; } :where(.data-table, .sched-table, .client-table, .ins-table, .roster-table) { min-width: 620px; } :where(.client-layout, .gc-layout) { height: auto !important; min-height: 560px; flex-direction: column; } :where(.client-rail, .gc-rail) { width: 100% !important; max-height: 240px; border-right: 0 !important; border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.12)) !important; } :where(.client-thread, .gc-messages) { min-height: 300px; } :where(.client-bubble, .gc-bubble) { max-width: min(88%, 560px); } } @media (max-width: 560px) { :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; } :where(.stats-row, .stat-row, .stats-grid, .quick-grid) { grid-template-columns: 1fr !important; } :where(.topbar-left h2) { line-height: 1.12; } :where(.btn-primary, .btn-ghost, .btn-send, .owner-action-btn, .client-compose-send, .gc-send-btn) { max-width: 100%; } :where(.modal-overlay, .gcm-overlay, .zoom-modal-overlay) { align-items: flex-start !important; overflow-y: auto; padding: 12px !important; } :where(.modal-box, .gcm-box, .zoom-modal) { max-width: 100% !important; } } /* ── Dark mode contrast & readability fixes ────────────────────────────── */ /* Fallback tab contrast rules. These use :where() (zero specificity) so the JS-injected theme styles (portal-shared.js) always take precedence. They cover pages that load browser-compat.css but have no theme engine running. */ @media (prefers-color-scheme: dark) { :where(body:not(.light-forced)) :where(.page-tab.active, .panel-tab.active) { color: #5a9ae8; border-bottom-color: #2a5fa8; } } /* Explicit dark mode class (toggled by portal JS) always applies. */ body.dark-mode :where(.page-tab, .panel-tab) { color: rgba(255, 255, 255, 0.55); } body.dark-mode :where(.page-tab.active, .panel-tab.active) { /* Overridden per-portal by portal-shared.js with !important + theme color. This fallback keeps tabs readable if the theme engine hasn't run yet. */ color: #7fc4f4; border-bottom-color: #2a5fa8; } body.dark-mode :where(.page-tab:hover:not(.active), .panel-tab:hover:not(.active)) { color: rgba(255, 255, 255, 0.8); } /* Table column headers — readable on any dark portal background */ body.dark-mode :where( .data-table th, .sched-table th, .roster-table th, .client-table th, .ins-table th ) { color: #b8c8d8; } /* Muted / subtext — ensure it doesn't disappear on dark backgrounds */ body.dark-mode :where(.stat-mini-sub, .panel-header-sub, .gc-pane-sub, .gc-last, .gc-time, .ann-item-date) { color: rgba(255, 255, 255, 0.48); } /* Group chat rail & pane in dark mode */ body.dark-mode :where(.gc-rail-title, .gc-name) { color: rgba(255, 255, 255, 0.82); } body.dark-mode :where(.gc-action-btn) { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.14); } body.dark-mode :where(.gc-action-btn:hover) { color: rgba(255, 255, 255, 0.9); } /* Announcement items */ body.dark-mode :where(.ann-item-title) { color: rgba(255, 255, 255, 0.88); } body.dark-mode :where(.ann-preview) { color: rgba(255, 255, 255, 0.5); } /* Members strip (group chat) */ body.dark-mode :where(.gc-members-strip-label) { color: rgba(255, 255, 255, 0.42); } body.dark-mode :where(.gc-member-name) { color: rgba(255, 255, 255, 0.82); } body.dark-mode :where(.gc-member-role, .gc-member-email) { color: rgba(255, 255, 255, 0.45); } /* Message body text area */ body.dark-mode :where(.msg-body-text) { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.1); } /* Unread / empty states */ body.dark-mode :where(.msg-empty-title) { color: rgba(255, 255, 255, 0.7); } body.dark-mode :where(.msg-empty-sub, .no-results, .empty-state) { color: rgba(255, 255, 255, 0.42); }