/* Global glassmorphism theme (opt-in via ) */ .glass-theme { position: relative; color: #fff; min-height: 100vh; background-color: #060c1c; /* fallback when image has not loaded */ /* Glass theme tokens (tweak here) */ --glass-fill: rgba(255, 255, 255, 0.03); /* Card background tint */ --glass-blur: 3px; /* Background blur strength */ --glass-sheen: 0.16; /* Sheen highlight opacity */ } /* Fixed backdrop layer keeps the starfield static on iOS Safari */ .glass-theme::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(135deg, rgba(6, 12, 28, 0.6), rgba(6, 12, 28, 0.6)), url('/static/images/dark_abstract14.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #060c1c; transform: translateZ(0); /* promote layer to its own compositing context */ } /* Layout baseline */ .glass-theme main { color: #fff; } .glass-theme a { color: #e6f0ff; } .glass-theme a:hover { color: #ffffff; } /* Ensure card text colors are consistent across all templates */ .glass-theme .card .card-header, .glass-theme .card .card-title, .glass-theme .card h5, .glass-theme .card h6 { color: #fff !important; } .glass-theme .card .card-subtitle, .glass-theme .card .text-muted, .glass-theme .card small { color: rgba(255,255,255,0.85) !important; } /* Glassy navbar */ .glass-theme .navbar.bg-body-tertiary { background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .glass-theme .navbar .nav-link, .glass-theme .navbar .navbar-brand, .glass-theme .navbar .navbar-text { color: #fff !important; } .glass-theme .navbar .nav-link:hover { color: #e6f0ff !important; } /* Strong visual feedback for burger menu (hover/focus) */ .glass-theme .navbar .navbar-toggler { border-color: rgba(255,255,255,0.65); background: transparent; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease; } .glass-theme .navbar .navbar-toggler:hover, .glass-theme .navbar .navbar-toggler:focus, .glass-theme .navbar .navbar-toggler:focus-visible { background: rgba(255,255,255,0.12); border-color: #ffffff; box-shadow: none; outline: none; /* no focus outline or ring */ } .glass-theme .navbar .navbar-toggler:active { transform: scale(0.98); } .glass-theme .navbar .navbar-toggler:hover .navbar-toggler-icon, .glass-theme .navbar .navbar-toggler:focus .navbar-toggler-icon, .glass-theme .navbar .navbar-toggler:focus-visible .navbar-toggler-icon { filter: drop-shadow(0 0 3px rgba(255,255,255,0.75)); } /* Dropdowns: glass menu, readable items */ .glass-theme .dropdown-menu { background: var(--glass-fill, rgba(255, 255, 255, 0.06)); /*background: rgba(6, 12, 28, 0.85);*/ border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); color: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.30); } .glass-theme .dropdown-item { color: #fff; } .glass-theme .dropdown-item:hover, .glass-theme .dropdown-item:focus { background: rgba(255, 255, 255, 0.12); color: #fff; } .glass-theme .dropdown-item.active, .glass-theme .dropdown-item:active { background: rgba(255, 255, 255, 0.18); color: #fff; } .glass-theme .dropdown-divider { border-top-color: rgba(255,255,255,0.2); } /* Offcanvas menu: dark glass slide-out, readable links */ .glass-theme .offcanvas { background: rgba(6, 12, 28, 0.25); color: #fff; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .glass-theme .offcanvas.offcanvas-end { width: min(340px, 90vw); } .glass-theme .offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); } .glass-theme .offcanvas .nav-link { color: #fff; } .glass-theme .offcanvas .nav-link:hover { background: rgba(255,255,255,0.08); border-color: #fff;} .glass-theme .offcanvas .nav-link:focus { background: rgba(255,255,255,0.08); border-color: #fff;} .glass-theme .offcanvas .dropdown-menu { background: var(--glass-fill, rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); box-shadow: 0 10px 25px rgba(0,0,0,0.30); } .glass-theme .offcanvas .dropdown-item { color: #fff; } /* Hide site footer while the header offcanvas is open (mobile only) */ @media (max-width: 767.98px) { body.glass-theme:has(#offcanvasNavbar.show) footer { display: none !important; } } /* Hide footer while the Projects mobile offcanvas is open (mobile only) */ @media (max-width: 767.98px) { body.glass-theme:has(#mobileProjectOffcanvas.show) footer { display: none !important; } } /* Ensure Projects offcanvas fills the full mobile viewport and scrolls to the bottom */ @media (max-width: 767.98px) { #mobileProjectOffcanvas { height: 100dvh !important; max-height: 100dvh !important; display: flex; flex-direction: column; } #mobileProjectOffcanvas .offcanvas-header { flex: 0 0 auto; } #mobileProjectOffcanvas .offcanvas-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 0 !important; margin-bottom: 0 !important; } } /* Glassy modal (match header/footer sheen/blur/transparency) */ .glass-theme .modal-content { background: rgba(255, 255, 255, 0.02) !important; /* same tint as navbar */ color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.30); } .glass-theme .modal-header, .glass-theme .modal-footer { border-color: rgba(255, 255, 255, 0.18); display: flex; align-items: center; gap: .5rem; } .glass-theme .modal-title { color: #fff; } .glass-theme .modal-body { color: #fff; } .glass-theme .modal-backdrop.show { background-color: rgba(6, 12, 28, 0.35); /* subtle dark backdrop */ backdrop-filter: blur(2px); } .glass-theme .modal .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 1; } .glass-theme .modal .btn-close:hover, .glass-theme .modal .btn-close:focus, .glass-theme .modal .btn-close:focus-visible { filter: invert(1) brightness(2.2) drop-shadow(0 0 3px rgba(255,255,255,0.75)); opacity: 1; background-color: rgba(255,255,255,0.12); border-color: #ffffff; box-shadow: none; outline: none; } /* Mobile: ensure Global Project Picker sits above judgments modal */ @media (max-width: 767.98px) { .glass-theme #projectPickerModal { z-index: 1070 !important; } } /* Project Picker modal: make project list match form-control look */ .glass-theme #projectPickerModal #project-radio-list { background: transparent; /* container transparent; items carry the fill */ border: 0; } .glass-theme #projectPickerModal #project-radio-list .list-group-item { background: rgba(255,255,255,0.03); /* same as .glass-theme .form-control */ color: rgba(255,255,255,0.9); /* same as placeholder color */ border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; /* match input rounding */ padding: .5rem .75rem; } .glass-theme #projectPickerModal #project-radio-list .list-group-item + .list-group-item { margin-top: .5rem; /* visual separation instead of stacked borders */ } .glass-theme #projectPickerModal #project-radio-list .list-group-item:hover, .glass-theme #projectPickerModal #project-radio-list .list-group-item:focus, .glass-theme #projectPickerModal #project-radio-list .list-group-item:focus-within { background: rgba(255,255,255,0.08); /* same hover/focus as .form-control */ border-color: rgba(255,255,255,0.45); } .glass-theme #projectPickerModal .form-check { display: flex; align-items: center; gap: .5rem; } .glass-theme #projectPickerModal .form-check-label { color: rgba(255,255,255,0.9); /* align with placeholder tone */ } .glass-theme #projectPickerModal .form-check-input { /* Color the radio like the placeholder text */ accent-color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); background-color: transparent; } .glass-theme #projectPickerModal .form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(255,255,255,.15); border-color: rgba(255,255,255,0.45); } /* Footer layout for create-project controls */ .glass-theme #projectPickerModal .project-picker-footer { flex-direction: column; /* stack content vertically */ align-items: stretch; /* left-align content */ } .glass-theme #projectPickerModal .project-create-wrap label { text-align: left; } .glass-theme #projectPickerModal .project-create-actions { display: flex; align-items: center; justify-content: center; /* gap: .75rem; */ } /* Remove default blue focus ring on nav links */ .glass-theme .navbar .nav-link:focus, .glass-theme .navbar .nav-link:focus-visible, .glass-theme .offcanvas .nav-link:focus, .glass-theme .offcanvas .nav-link:focus-visible, .glass-theme .dropdown-item:focus, .glass-theme .dropdown-item:focus-visible .glass-theme .offcanvas a:focus, .glass-theme .offcanvas a:focus-visible, .glass-theme .offcanvas a:focus:not(:focus-visible){ outline: none !important; box-shadow: none !important; } /* Ensure full vertical menu list inside offcanvas */ .glass-theme .offcanvas .offcanvas-body { overflow-y: auto; } .glass-theme .offcanvas .navbar-nav { flex-direction: column !important; align-items: stretch; gap: .25rem; } .glass-theme .offcanvas .navbar-nav .nav-item { width: 100%; } .glass-theme .offcanvas .navbar-nav .nav-link { display: block; width: 100%; padding: .5rem .25rem; } /* Cards everywhere */ .glass-theme .card { position: relative; /* Slightly stronger fill improves readability on dark backdrops */ background: var(--glass-fill, rgba(255, 255, 255, 0.06)) !important; /* border: 1px solid rgba(255, 255, 255, 0.18); */ border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); color: #fff; } /* .glass-theme .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,255,255,0.05)); /* Balanced sheen: bright enough without washing out content opacity: var(--glass-sheen, 0.16); pointer-events: none; } .glass-theme .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.08)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } */ .glass-theme .card-header { background: rgba(255,255,255,0.015) !important; border-bottom: 1px solid rgba(255,255,255,0.18); color: #fff; } /* Match card footers to the glassy card headers */ .glass-theme .card-footer { background: rgba(255,255,255,0.015) !important; border-top: 1px solid rgba(255,255,255,0.18); color: #fff; } /* Forms */ .glass-theme .form-control { background: rgba(255,255,255,0.03); /* border: 1px solid rgba(255,255,255,0.25); */ border-radius: 12px; padding: 0.35rem 0.9rem; color: #fff; } .glass-theme .form-control::placeholder { color: rgba(255,255,255,0.9); } .glass-theme .form-control:focus, .glass-theme .form-control:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); color: #fff; box-shadow: 0 0 0 .25rem rgba(255,255,255,.15); } /* Buttons */ .glass-theme .btn.btn-outline-secondary, .glass-theme .btn.btn-primary, .glass-theme .btn.btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 0.35rem 0.9rem; } .glass-theme .btn:hover { background: rgba(255,255,255,0.08); border-color: #fff; } /* Improve focus visibility for buttons (incl. Search) */ .glass-theme .btn:focus, .glass-theme .btn:focus-visible { outline: none; background: rgba(255,255,255,0.12); border-color: #fff; box-shadow: none; } /* Tables, badges and misc */ .glass-theme .table { color: #fff; } .glass-theme .badge.bg-secondary { background-color: rgba(255,255,255,0.20) !important; color: #fff; } /* Alerts readable on dark */ .glass-theme .alert { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; } /* Footer glass */ .glass-theme footer .navbar { background: rgba(255, 255, 255, 0.02) !important; border-top: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .glass-theme footer .navbar p { color: #fff; } /* Discovery-specific chips still look good */ .glass-theme #bestq-wrap code { background: rgba(255,255,255,0.12); color: #fff; } /* Don’t let the main content sit under fixed navbar */ @media (min-width: 576px) { .glass-theme main { padding-top: 0.25rem; } } /* ----------------------------- */ /* Centralized Card Layout Rules */ /* ----------------------------- */ /* Generic spacing for forms placed directly inside cards */ .glass-theme .card > form { padding: 20px; } /* Auth/Register/Reset pages center container and card sizing */ .glass-theme .center-container { display: flex; justify-content: center; align-items: center; min-height: 100dvh; padding-top: 50px; padding-bottom: 50px; width: 100%; } .glass-theme .center-container .card { max-width: 500px; width: 100%; margin: 0 20px; } @media (max-width: 768px) { .glass-theme .center-container .card { max-width: 90%; margin: 0 auto; } } /* ----------------------------- */ /* Page-scoped Card Enhancements */ /* ----------------------------- */ /* FAQ page: make accordion items glass like cards */ .glass-theme #FAQs .accordion-item { background: transparent; /* let button/body supply glass */ border: none; border-radius: 16px; overflow: hidden; /* keep rounded corners when expanded */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); margin-bottom: .5rem; } /* ✨ CHANGED: neutralize card-level hover/focus so the whole item doesn't glow */ .glass-theme #FAQs .accordion-item:hover, .glass-theme #FAQs .accordion-item:focus, .glass-theme #FAQs .accordion-item:focus-visible { opacity: 1; background-color: transparent; border-color: transparent; box-shadow: none; outline: none; } /* Header button */ .glass-theme #FAQs .accordion-button { background: var(--glass-fill, rgba(255,255,255,0.06)); color: #fff; /* border: 1px solid rgba(255,255,255,0.18); */ border-radius: 16px; /* match when item is collapsed */ backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); box-shadow: none; } /* ✨ CHANGED: when open, keep the header glowing */ .glass-theme #FAQs .accordion-button:not(.collapsed) { background: rgba(255,255,255,0.12); color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #ffffff; filter: drop-shadow(0 0 3px rgba(255,255,255,0.75)); } /* ✨ CHANGED: header glows on hover/focus (closed or open) */ .glass-theme #FAQs .accordion-button:hover, .glass-theme #FAQs .accordion-button:focus, .glass-theme #FAQs .accordion-button:focus-visible { background: rgba(255,255,255,0.12); border-color: #ffffff; box-shadow: none; outline: none; filter: drop-shadow(0 0 3px rgba(255,255,255,0.75)); } .glass-theme #FAQs .accordion-button:focus { box-shadow: none; border-color: rgba(255,255,255,0.6); } .glass-theme #FAQs .accordion-button::after { filter: invert(1) brightness(2); /* white chevron on dark */ } /* .glass-theme #FAQs .accordion-collapse { border-left: 1px solid rgba(255,255,255,0.18); border-right: 1px solid rgba(255,255,255,0.18); } */ .glass-theme #FAQs .accordion-body { background: var(--glass-fill, rgba(255,255,255,0.06)); color: #fff; /* border: 1px solid rgba(255,255,255,0.18); */ border-top: none; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(150%); } /* Testimonials page card layout */ .glass-theme #testimonials .row.align-items-stretch > .col-md-4 { display: flex; } .glass-theme #testimonials .row.align-items-stretch > .col-md-4 .card { height: 100%; display: flex; flex-direction: column; } .glass-theme #testimonials .testimonial-card { width: 80%; max-width: 500px; margin: 0 auto; } @media (min-width: 768px) { .glass-theme #testimonials .testimonial-card { width: 100%; margin: 0; } } .glass-theme #testimonials .card-body { padding: 5%; display: flex; flex-direction: column; justify-content: space-between; } .glass-theme #testimonials .card-body p { text-align: justify; color: #fff; } /* Suggested Questions page card layout */ .glass-theme #suggested-questions .row.align-items-stretch > .col-md-4 { display: flex; } .glass-theme #suggested-questions .row.align-items-stretch > .col-md-4 .card { height: 100%; display: flex; flex-direction: column; } .glass-theme #suggested-questions .question-card { width: 80%; max-width: 500px; margin: 0 auto; } @media (min-width: 768px) { .glass-theme #suggested-questions .question-card { width: 100%; margin: 0; } } .glass-theme #suggested-questions .card-body { padding: 5%; display: flex; flex-direction: column; justify-content: center; } .glass-theme #suggested-questions .card-body p { text-align: justify; color: #fff; } /* Alerts: improve close button visibility on dark glass */ /* .glass-theme .alert .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 1; } .glass-theme .alert .btn-close:hover, .glass-theme .alert .btn-close:focus { filter: invert(1) brightness(2.2); opacity: 1; box-shadow: none; } */ /* Strong visual feedback for close button (hover/focus) */ .glass-theme .alert .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 1; border-color: rgba(255,255,255,0.65); background-color: transparent; /* don't overwrite background-image */ transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease; } .glass-theme .alert .btn-close:hover, .glass-theme .alert .btn-close:focus, .glass-theme .alert .btn-close:focus-visible { filter: invert(1) brightness(2.2) drop-shadow(0 0 3px rgba(255,255,255,0.75)); opacity: 1; background-color: rgba(255,255,255,0.12); border-color: #ffffff; box-shadow: none; outline: none; } .glass-theme .alert .btn-close:active { transform: scale(0.98); } /* General button */ .adv-btn { border-radius: 12px; padding: 0.35rem 0.9rem; font-weight: 600; } .adv-btn:focus, .adv-btn:focus-visible, .adv-btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }