/* ===== Brand color palette (derived from the main color #f26a4b) ===== */ :root { --brand: #f26a4b; --brand-dark: #d9512f; --brand-darker: #b83d22; --brand-light: #ff8a6d; --brand-tint: #fff1ee; /* Link / accent color that stays readable on a light background. */ --brand-link: #d9512f; /* Link / accent color tuned for dark backgrounds (header, footer, dark mode). */ --brand-on-dark: #ff9b80; /* Header / footer solid background color. */ --brand-gradient: none; /* Re-point Bootstrap's primary + link tokens at the brand so utilities like .text-primary, .btn-primary and default links follow the scheme. */ --bs-primary: #f26a4b; --bs-primary-rgb: 242, 106, 75; --bs-link-color: #d9512f; --bs-link-color-rgb: 217, 81, 47; --bs-link-hover-color: #b83d22; --bs-link-hover-color-rgb: 184, 61, 34; } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ===== Google Translate widget — suppress its intrusive popups ===== */ /* The site drives translation through the Google Translate widget via the googtrans cookie, but the widget also injects a top banner, an "Original text" hover tooltip and a "Rate this translation" feedback balloon. Hide all of that chrome so end-users only see the translated content. */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q, .VIpgJd-yAWNEb-L7lbkb, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; visibility: hidden !important; } /* The translate banner normally pushes the page down via an inline top offset on ; force it back so the layout never shifts. */ body { top: 0 !important; position: static !important; } /* The widget highlights translated text with a yellow background/box-shadow. Remove that so translated content looks native. */ .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Hide the iframe the feedback balloon renders into. */ iframe.goog-te-banner-frame, iframe#goog-gt-tt { display: none !important; } a, .btn-link { color: var(--brand-link); } a:hover, .btn-link:hover { color: var(--brand-darker); } .btn-primary { color: #fff; background-color: var(--brand); border-color: var(--brand-dark); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background-color: var(--brand-dark); border-color: var(--brand-darker); } .btn-outline-primary { color: var(--brand-dark); border-color: var(--brand); } .btn-outline-primary:hover, .btn-outline-primary:active { color: #fff; background-color: var(--brand); border-color: var(--brand); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(242, 106, 75, 0.65); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e52350; } .validation-message { color: #e52350; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===== Ad Card Hover Effect ===== */ .ad-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; border: 2px solid transparent; } .ad-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; border-color: var(--brand); } .ad-card:active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } .ad-card-link { color: inherit; } .ad-card-link:hover { color: inherit; } /* ===== Footer ===== */ .site-footer { background-color: #1a1a2e; background-image: none; color: #fdeee9; padding: 2.5rem 0 1rem; font-size: 0.9rem; margin-top: auto; } .site-footer a { color: #ffe3da; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer .footer-heading { color: #fff; font-weight: 600; margin-bottom: 0.75rem; font-size: 1rem; } .site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1rem; margin-top: 1.5rem; text-align: center; color: #aaa; font-size: 0.85rem; } /* ===== Footer Social Media Links ===== */ .site-footer .social-links { display: flex; gap: 0.5rem; flex-wrap: wrap; } .site-footer .social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.1rem; transition: background-color 0.2s ease, transform 0.2s ease; } .site-footer .social-link:hover { background: #fff; color: var(--brand-dark); text-decoration: none; transform: translateY(-2px); } /* ===== Scroll to Top Button ===== */ .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 1050; width: 45px; height: 45px; border-radius: 50%; background-color: var(--brand); color: white; border: none; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .scroll-to-top.visible { opacity: 1; visibility: visible; } .scroll-to-top:hover { background-color: var(--brand-dark); } /* ===== Theme Toggle Button ===== */ .theme-toggle-btn { background: none; border: 1px solid #aaa; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; transition: background-color 0.2s ease; color: #333; } .theme-toggle-btn:hover { background-color: rgba(0, 0, 0, 0.1); } /* ===== Dark Theme ===== */ [data-theme="dark"] { --bs-body-bg: #121212; --bs-body-color: #e0e0e0; } [data-theme="dark"] body, [data-theme="dark"] html { background-color: #121212; color: #e0e0e0; } [data-theme="dark"] .bg-light { background-color: #1e1e1e !important; color: #e0e0e0; } [data-theme="dark"] .card { background-color: #1e1e1e; border-color: #333; color: #e0e0e0; } [data-theme="dark"] .card-img-top.bg-light { background-color: #2a2a2a !important; } [data-theme="dark"] .text-dark { color: #e0e0e0 !important; } [data-theme="dark"] .text-muted { color: #aaa !important; } [data-theme="dark"] .top-row { background-color: #1e1e1e; border-bottom-color: #333; } [data-theme="dark"] .top-row a, [data-theme="dark"] .top-row .btn-link { color: #8ab4f8; } [data-theme="dark"] .sidebar { background-color: #0a0a1a; background-image: none; } [data-theme="dark"] .content { background-color: #121212; } [data-theme="dark"] main { background-color: #121212; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2a2a2a; border-color: #444; color: #e0e0e0; } [data-theme="dark"] .form-control::placeholder { color: #aaa; opacity: 1; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #333; color: #e0e0e0; } /* File input ("Choose Files" / selected file name) readability in dark mode */ [data-theme="dark"] .form-control[type="file"] { color: #e0e0e0; } [data-theme="dark"] .form-control[type="file"]::file-selector-button { background-color: #3a3a3a; color: #e0e0e0; border-color: #444; } [data-theme="dark"] .form-control[type="file"]::file-selector-button:hover { background-color: #4a4a4a; color: #ffffff; } [data-theme="dark"] .modal-content { background-color: #1e1e1e; color: #e0e0e0; } [data-theme="dark"] .table { color: #e0e0e0; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: #1a1a1a; } [data-theme="dark"] .theme-toggle-btn { color: #ffc107; border-color: #555; } [data-theme="dark"] .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .ad-card:hover { border-color: var(--brand-light); } [data-theme="dark"] .site-footer { background-color: #1a1a2e; background-image: none; } [data-theme="dark"] .page { background-color: #121212; } /* Dark theme: ensure all default-black text elements are readable */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e0e0e0; } [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] div, [data-theme="dark"] small, [data-theme="dark"] strong, [data-theme="dark"] em { color: #e0e0e0; } [data-theme="dark"] .form-label { color: #e0e0e0; } [data-theme="dark"] .form-text { color: #aaa !important; } [data-theme="dark"] .form-check-label { color: #e0e0e0; } [data-theme="dark"] .alert-success { background-color: #1a3a1a; border-color: #2d5a2d; color: #a3d9a3; } [data-theme="dark"] .alert-danger { background-color: #3a1a1a; border-color: #5a2d2d; color: #d9a3a3; } [data-theme="dark"] .alert-info { background-color: #1a2a3a; border-color: #2d4a5a; color: #a3c9d9; } [data-theme="dark"] .list-group-item { background-color: #1e1e1e; border-color: #333; color: #e0e0e0; } [data-theme="dark"] .list-group-item-action:hover { background-color: #2a2a2a; color: #fff; } [data-theme="dark"] .badge.bg-secondary { background-color: #444 !important; color: #e0e0e0; } [data-theme="dark"] .btn-outline-secondary { color: #aaa; border-color: #555; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #333; color: #e0e0e0; } [data-theme="dark"] .container, [data-theme="dark"] .container-fluid { color: #e0e0e0; } [data-theme="dark"] .validation-message { color: #ff6b8a; } [data-theme="dark"] a { color: var(--brand-on-dark); } [data-theme="dark"] .text-center { color: #e0e0e0; } [data-theme="dark"] .navbar { /*background-color: #1e1e1e !important;*/ color: #e0e0e0; } [data-theme="dark"] .navbar a, [data-theme="dark"] .navbar .nav-link { color: #e0e0e0 !important; } [data-theme="dark"] .dropdown-menu { background-color: #1e1e1e; border-color: #333; } [data-theme="dark"] .dropdown-item { color: #e0e0e0; } [data-theme="dark"] .dropdown-item:hover { background-color: #2a2a2a; color: #fff; } /* ===== Breadcrumb (dark mode) ===== */ /* Bootstrap's default breadcrumb uses muted gray for the current (active) page and the "/" separators, which is hard to read on the dark background. Bring them in line with the rest of the site's dark palette. */ [data-theme="dark"] .breadcrumb-item a { color: var(--brand-on-dark); } [data-theme="dark"] .breadcrumb-item a:hover { color: #ffffff; } [data-theme="dark"] .breadcrumb-item.active { color: #e0e0e0; } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #aaa; } /* ===== FAQ accordion (dark mode) ===== */ /* Bootstrap's collapse chevron is a dark SVG that is nearly invisible on the dark accordion background. Invert it so the down/up arrow stays visible. */ [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .accordion-button { background-color: #1e1e1e; color: #e0e0e0; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #2a2a2a; color: #fff; } [data-theme="dark"] .accordion-item { background-color: #1e1e1e; border-color: #333; } [data-theme="dark"] .accordion-body { background-color: #1e1e1e; color: #e0e0e0; } /* ===== Jodit editor ===== */ /* The global dark-mode text-color rules (applied to div/p/span/etc.) bleed into Jodit's WYSIWYG area and its source textarea, washing out the text. Scope the editable surfaces back to readable colors. In the default (light) theme the editing area is white, so force dark text regardless of site theme. */ .jodit-wysiwyg, .jodit-wysiwyg * { color: #1e1e1e; } .jodit-source__mini-toolbar, .jodit-source { background-color: #1e1e1e; } .jodit-source textarea, .jodit-source .ace_editor, .jodit-source__mini-toolbar + textarea { background-color: #1e1e1e !important; color: #e0e0e0 !important; } /* When Jodit runs in its own dark theme, let its editable area use light text on the dark surface so content is readable in source and WYSIWYG modes. */ .jodit-container.jodit_theme_dark .jodit-wysiwyg, .jodit-container.jodit_theme_dark .jodit-wysiwyg *, .jodit_theme_dark .jodit-wysiwyg, .jodit_theme_dark .jodit-wysiwyg * { color: #e0e0e0; } /* ===== Location Picker Modal (global — portaled to ) ===== */ /* Body scroll lock when the location modal is open */ body.location-modal-open { overflow: hidden !important; position: fixed !important; width: 100% !important; height: 100% !important; } /* The wrapper is always in the DOM; only shows content when modal is active */ .location-modal-wrapper { display: contents; } /* Semi-transparent backdrop */ .location-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 99998; } /* Full-viewport overlay */ .location-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 1rem; } /* Centered dialog box */ .location-modal-dialog { width: 100%; max-width: 500px; margin: auto; } .location-modal-content { background: #fff; border-radius: 0.5rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); } .location-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #dee2e6; flex-shrink: 0; } .location-modal-title { margin: 0; font-size: 1.25rem; font-weight: 600; } .location-modal-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f26a4b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; opacity: 1; } .location-modal-close:hover { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9512f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; } .location-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1 1 auto; } .location-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid #dee2e6; flex-shrink: 0; } /* Mobile: full-screen modal */ @media (max-width: 575.98px) { .location-modal { padding: 0; align-items: stretch; } .location-modal-dialog { max-width: 100%; height: 100%; margin: 0; } .location-modal-content { border-radius: 0; max-height: 100%; max-height: 100dvh; height: 100%; } } /* Dark theme support */ [data-theme="dark"] .location-modal-content { background: #1e1e1e; border-color: #333; } [data-theme="dark"] .location-modal-header { border-bottom-color: #333; } [data-theme="dark"] .location-modal-footer { border-top-color: #333; } [data-theme="dark"] .location-modal-title { color: #e0e0e0; }