/* =================================== General Styling =================================== */ body { font-family: 'Roboto', sans-serif; background-color: #fdfdff; /* A soft, warm off-white */ } footer p { margin: 0; } #map_canvas { width: 100%; height: 450px; border-radius: 0 0 .25rem .25rem; } /* =================================== Navbar Styling =================================== */ .navbar-brand img { max-height: 50px; } /* Custom background for the logo */ .navbar-brand { background-color: #343a40; padding: 8px 12px; border-radius: 8px; transition: background-color 0.3s ease; } /* Custom style for the text-based brand */ .navbar-brand { font-size: 1.5rem; /* Make the text a bit larger */ font-weight: 700; /* Make the font bold */ padding: 8px 0; /* Adjust padding for text */ } /* Ensure the dark theme logo background is removed */ [data-bs-theme="dark"] .navbar-brand { background-color: transparent; } .navbar-brand:hover { background-color: #495057; } /* =================================== Light Theme Customization =================================== */ /* Style cards as "Info Callouts" with a colored top border */ [data-bs-theme="light"] .card { background-color: var(--bs-info-bg-subtle); /* Light cyan background */ border: 1px solid var(--bs-info-border-subtle); /* Subtle cyan border */ border-top: 5px solid var(--bs-info); /* Prominent dark cyan top border */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Style the card headers to blend with the new callout style */ [data-bs-theme="light"] .card-header { background-color: transparent; /* Make header background see-through */ color: var(--bs-info-text-emphasis); /* Make header text slightly darker */ border-bottom: 1px solid var(--bs-info-border-subtle); } /* Ensures icons in the header match the new text color */ [data-bs-theme="light"] .card-header .bi { color: var(--bs-info-text-emphasis); } /* =================================== Dark Theme Customization =================================== */ [data-bs-theme="dark"] body { background-color: #282c34; /* A modern, dark slate-grey */ } [data-bs-theme="dark"] .card { background-color: #2c394b; /* A deep, dark slate blue */ border-color: #44546c; /* A slightly lighter blue for the border */ } /* Note: Dark theme card header styles are handled automatically by Bootstrap */