/** * Global readability — Bootstrap bridges, forms, tables, modals. * Loads after Bootstrap + style.css; scoped to app surfaces where needed. */ /* Bootstrap 5.3 semantic colors track our tokens */ [data-bs-theme='light'] { --bs-body-color: var(--si-text); --bs-body-bg: var(--si-bg-base); --bs-secondary-color: var(--si-text-readable-muted); --bs-tertiary-color: var(--si-text-readable-muted); --bs-emphasis-color: var(--si-text); --bs-border-color: var(--si-border); } [data-bs-theme='dark'] { --bs-body-color: var(--si-text); --bs-body-bg: var(--si-bg-base); --bs-secondary-color: var(--si-text-readable-muted); --bs-tertiary-color: var(--si-text-readable-muted); --bs-emphasis-color: var(--si-text); --bs-border-color: var(--si-border); } /* Muted / secondary text must never disappear on dark glass */ .app-body .text-muted, .app-body small.text-muted { color: var(--si-text-readable-muted) !important; } .app-body .text-secondary { color: var(--si-text-secondary) !important; } .app-body .text-dark, .app-body .text-body { color: var(--si-text) !important; } .app-body .bg-light { background-color: var(--si-bg-subtle) !important; color: var(--si-text) !important; border-color: var(--si-border) !important; } .app-body .border-light { border-color: var(--si-border-strong) !important; } .app-body .table-light { --bs-table-bg: var(--si-bg-subtle); --bs-table-color: var(--si-text); color: var(--si-text) !important; } .app-body .table-light th, .app-body .table-light td { color: var(--si-text) !important; } .app-body .table { color: var(--si-text); --bs-table-bg: var(--table-bg); --bs-table-border-color: var(--table-border); } .app-body .table thead th { color: var(--si-text-secondary); } .app-body .table tbody td { color: var(--si-text); } .app-body .form-label, .app-body .col-form-label { color: var(--si-text-secondary); font-weight: 600; } .app-body .form-text { color: var(--si-text-readable-muted); } .app-body .form-control, .app-body .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--input-color); } .app-body .form-control::placeholder { color: var(--si-text-placeholder); opacity: 1; } .app-body .form-select option { background-color: var(--si-bg-elevated); color: var(--si-text); } .app-body .modal-content { background: var(--si-bg-elevated); color: var(--si-text); border: 1px solid var(--si-border-strong); box-shadow: var(--si-shadow-lg); } .app-body .modal-header, .app-body .modal-footer { border-color: var(--si-border); } .app-body .modal-title { color: var(--si-text-heading); } [data-bs-theme='dark'] .app-body .btn-close { filter: invert(1) grayscale(1); opacity: 0.75; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Authenticated ops: Bootstrap .card uses color: var(--bs-body-color) from . With data-bs-theme=light + executive dark --card-bg, that yields dark ink on dark glass. Re-bind Bootstrap “body” colors on the card subtree to Safari Island tokens. */ .app-body.app-body--authenticated .room-detail-card.card { --bs-body-color: var(--si-text); --bs-secondary-color: var(--si-text-readable-muted); --bs-tertiary-color: var(--si-text-readable-muted); color: var(--si-text) !important; } /* Bungalow preview — amenities stay pure white (optional extra punch on dark glass) */ .app-body.app-body--authenticated .room-detail-card .room-amenities-heading, .app-body.app-body--authenticated .room-detail-card .room-amenities-heading strong, .app-body.app-body--authenticated .room-detail-card ul.room-amenities.room-amenities-copy, .app-body.app-body--authenticated .room-detail-card ul.room-amenities.room-amenities-copy li { color: #ffffff !important; }