/* ============================================= Ascend — Dark Theme Override Activated via Only changes colors/visual treatments. Does NOT change any structural/sizing values. ============================================= */ /* ======================================== 1. CSS VARIABLE OVERRIDES ======================================== */ body.dark-theme { --white: #060B14; --gray-50: rgba(255,255,255,0.03); --gray-100: rgba(255,255,255,0.08); --gray-200: rgba(255,255,255,0.12); --gray-300: rgba(255,255,255,0.2); --gray-400: rgba(255,255,255,0.35); --gray-500: rgba(255,255,255,0.5); --gray-600: rgba(255,255,255,0.65); --gray-700: rgba(255,255,255,0.8); --gray-800: rgba(255,255,255,0.9); --gray-900: #FFFFFF; --light-bg: rgba(255,255,255,0.02); --near-black: #060B14; --gold-pale: rgba(var(--accent-rgb),0.1); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 8px rgba(0,0,0,0.4); --shadow-lg: 0 12px 24px rgba(0,0,0,0.5); --shadow-xl: 0 24px 48px rgba(0,0,0,0.6); --ds-shadow-card: 0 1px 3px rgba(0,0,0,0.2); --ds-shadow-hover: 0 8px 32px rgba(0,0,0,0.4); background: #060B14; color: rgba(255,255,255,0.9); } /* ======================================== 2. NOISE TEXTURE OVERLAY ======================================== */ body.dark-theme::after { content: ''; position: fixed; inset: 0; opacity: 0.03; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 300px 300px; } /* ======================================== 3. NAVBAR — Frosted Glass ======================================== */ body.dark-theme .navbar { background: rgba(6,11,20,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(255,255,255,0.08); } body.dark-theme .logo-icon { color: #fff; } body.dark-theme .logo-text { color: #fff; } body.dark-theme .nav-link { color: rgba(255,255,255,0.55); border: none; outline: none; box-shadow: none; background: none; -webkit-appearance: none; appearance: none; text-shadow: none; } body.dark-theme .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); } body.dark-theme .nav-link.active { color: #fff; background: rgba(255,255,255,0.06); box-shadow: none; } body.dark-theme .nav-link:focus, body.dark-theme .nav-link:focus-visible { outline: none; box-shadow: none; } body.dark-theme .nav-dd-trigger { border: none; outline: none; box-shadow: none; background: none; } body.dark-theme .nav-dd-menu { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 24px rgba(0,0,0,0.4); } body.dark-theme .dd-item { color: rgba(255,255,255,0.6); } body.dark-theme .dd-item:hover { background: rgba(255,255,255,0.06); color: #fff; } body.dark-theme .dd-sub-menu { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.08); } body.dark-theme .dd-disabled { color: rgba(255,255,255,0.2); } body.dark-theme .soon-badge { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3); } body.dark-theme .nav-avatar-btn { background: transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); } body.dark-theme .nav-avatar-btn:hover { background: rgba(255,255,255,0.05); } body.dark-theme .nav-avatar-dd { background: rgba(6,11,20,0.95); border-color: rgba(255,255,255,0.08); box-shadow: 0 12px 40px rgba(0,0,0,0.6); } body.dark-theme .nav-avatar-dd a, body.dark-theme .nav-avatar-dd button { color: rgba(255,255,255,0.6); } body.dark-theme .nav-avatar-dd a:hover, body.dark-theme .nav-avatar-dd button:hover { background: rgba(255,255,255,0.05); color: #fff; } body.dark-theme .avatar-dd-divider { background: rgba(255,255,255,0.08); } body.dark-theme .avatar-dd-icon { color: rgba(255,255,255,0.4); } /* Fix Application Builder glow */ body.dark-theme .nav-link.active { box-shadow: none; outline: none; text-shadow: none; } body.dark-theme .nav-dd-menu { box-shadow: 0 12px 40px rgba(0,0,0,0.5); } /* Fix logo squeeze */ body.dark-theme .nav-logo { flex-shrink: 0; min-width: fit-content; } body.dark-theme .logo-text { white-space: nowrap; } body.dark-theme .nav-mobile-toggle span { background: rgba(255,255,255,0.7); } /* ======================================== 5. MOBILE MENU ======================================== */ body.dark-theme .mobile-menu { background: rgba(6,11,20,0.95); border-bottom-color: rgba(255,255,255,0.08); box-shadow: 0 12px 24px rgba(0,0,0,0.5); } body.dark-theme .mobile-link { color: rgba(255,255,255,0.6); } body.dark-theme .mobile-link:hover, body.dark-theme .mobile-link.active { color: #fff; background: rgba(255,255,255,0.05); } body.dark-theme .mobile-divider { background: rgba(255,255,255,0.08); } body.dark-theme .mobile-heading { color: rgba(255,255,255,0.3); } /* Mobile menu theme toggle inherits from .mobile-link dark styles */ /* ======================================== 6. TAB BARS (all pages) ======================================== */ body.dark-theme [class$="-tab-bar"] { background: rgba(6,11,20,0.9); border-bottom-color: rgba(255,255,255,0.08); } body.dark-theme [class$="-tab-btn"] { color: rgba(255,255,255,0.4); } body.dark-theme [class$="-tab-btn"]:hover { color: rgba(255,255,255,0.7); } body.dark-theme [class$="-tab-btn"].active { color: #fff; border-bottom-color: var(--gold); } /* ======================================== 7. CONTENT CARDS — Glass Treatment ======================================== */ body.dark-theme [class$="-card"], body.dark-theme [class$="-card"]:not([class*="comment"]), body.dark-theme .ce-card, body.dark-theme .mc-card, body.dark-theme .rs-tip, body.dark-theme .vol-tip, body.dark-theme .get-step, body.dark-theme .guide-section, body.dark-theme .er-entry, body.dark-theme .eap-card, body.dark-theme .mc-myth, body.dark-theme .mc-resource-card, body.dark-theme .rs-type-card, body.dark-theme .rs-where-card, body.dark-theme .rs-portal-card, body.dark-theme .vol-compare-card, body.dark-theme .vol-adcom-card, body.dark-theme .vol-find-card, body.dark-theme .vol-myth-item, body.dark-theme .online-card, body.dark-theme .lor-who-card, body.dark-theme .lor-content-card, body.dark-theme .lor-tracker-card, body.dark-theme .ce-role-card, body.dark-theme .ce-resource-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } body.dark-theme [class$="-card"]:hover, body.dark-theme .eap-card:hover, body.dark-theme .rs-tip:hover, body.dark-theme .vol-tip:hover, body.dark-theme .online-card:hover, body.dark-theme .vol-find-card:hover, body.dark-theme .lor-who-card:hover, body.dark-theme .lor-tracker-card:hover, body.dark-theme .ce-role-card:hover, body.dark-theme .mc-resource-card:hover, body.dark-theme .rs-portal-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); } /* Card accent borders — keep existing colors but adjust for dark */ body.dark-theme .eap-card { border-left-color: rgba(27,54,93,0.6); } body.dark-theme .eap-card:hover { border-left-color: var(--gold); } /* ======================================== 8. CARD HEADERS & SECTIONS ======================================== */ body.dark-theme .get-step-header, body.dark-theme .guide-header, body.dark-theme .er-entry-header { background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.06); } body.dark-theme .guide-header:hover, body.dark-theme .er-entry-header:hover { background: rgba(255,255,255,0.06); } /* ======================================== 9. FORM ELEMENTS ======================================== */ body.dark-theme input[type="text"], body.dark-theme input[type="number"], body.dark-theme input[type="date"], body.dark-theme input[type="email"], body.dark-theme select, body.dark-theme textarea, body.dark-theme [class*="-form-input"], body.dark-theme [class*="-form-select"], body.dark-theme [class*="-form-textarea"], body.dark-theme [class*="-field-input"], body.dark-theme [class*="-field-select"], body.dark-theme [class*="-field-textarea"] { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); } body.dark-theme input:focus, body.dark-theme select:focus, body.dark-theme textarea:focus, body.dark-theme [class*="-form-input"]:focus, body.dark-theme [class*="-form-textarea"]:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); } body.dark-theme input::placeholder, body.dark-theme textarea::placeholder { color: rgba(255,255,255,0.25); } body.dark-theme input[type="checkbox"] { accent-color: var(--gold); } /* ======================================== 10. TABLES ======================================== */ body.dark-theme table th { background: rgba(27,54,93,0.4); color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.1); } body.dark-theme table td { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.06); } body.dark-theme table tr:hover td { background: rgba(255,255,255,0.03); } /* ======================================== 11. BUTTONS ======================================== */ body.dark-theme [class*="-form-btn"], body.dark-theme [class*="-link-btn"], body.dark-theme .eap-apply-btn { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } body.dark-theme [class*="-form-btn"].secondary, body.dark-theme .filter-reset { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.12); } body.dark-theme [class*="-form-btn"].secondary:hover, body.dark-theme .filter-reset:hover { border-color: var(--gold); background: rgba(255,255,255,0.06); color: #fff; } /* ======================================== 12. GOLD CALLOUTS & EXPLAINER CARDS ======================================== */ body.dark-theme [class*="callout"].gold, body.dark-theme [class$="-explainer-card"], body.dark-theme .explainer-card, body.dark-theme .get-tip, body.dark-theme .vol-compare-note, body.dark-theme .vol-find-note, body.dark-theme .find-tip-card, body.dark-theme .online-callout, body.dark-theme .rs-authorship, body.dark-theme .rs-email-tip, body.dark-theme .mc-callout.gold, body.dark-theme .vol-callout, body.dark-theme .lor-callout.gold, body.dark-theme .ce-callout.gold { background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.15); color: rgba(255,255,255,0.7); } body.dark-theme [class*="callout"].gold strong, body.dark-theme [class$="-explainer-card"] strong, body.dark-theme .explainer-card strong { color: var(--gold); } /* Navy callouts stay navy — just boost contrast */ body.dark-theme .mc-callout.navy, body.dark-theme .lor-callout.navy, body.dark-theme .ce-callout.navy { background: var(--navy); border-color: var(--navy); } /* Info cards */ body.dark-theme [class$="-info-card"], body.dark-theme .vol-info-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); } body.dark-theme [class$="-info-card"] strong { color: var(--gold); } /* ======================================== 13. FILTER BAR (EAP, etc.) ======================================== */ body.dark-theme .eap-filter-bar, body.dark-theme .vol-search-inputs, body.dark-theme .rs-locator, body.dark-theme .track-add-wrap, body.dark-theme .vol-track-add, body.dark-theme .rs-track-add, body.dark-theme [class$="-add-wrap"], body.dark-theme [class$="-track-add"] { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } body.dark-theme .filter-sep { background: rgba(255,255,255,0.12); } body.dark-theme .filter-count { color: var(--gold); } /* ======================================== 14. BADGES & PILLS ======================================== */ body.dark-theme .eap-badge.state { background: rgba(27,54,93,0.3); } body.dark-theme .eap-badge.no-mcat { background: rgba(var(--accent-rgb),0.15); color: var(--gold); } body.dark-theme .eap-badge.mcat-req { background: rgba(27,54,93,0.3); } body.dark-theme .eap-badge.mcat-check { background: rgba(255,255,255,0.06); } body.dark-theme .eap-badge.open-all { background: rgba(45,138,110,0.15); } body.dark-theme .eap-badge.partner { background: rgba(255,255,255,0.06); } body.dark-theme .eap-badge.do-badge { background: rgba(139,92,246,0.15); } /* Myth labels */ body.dark-theme .vol-myth-side.myth { background: rgba(255,255,255,0.03); } body.dark-theme .vol-myth-side.reality { background: rgba(255,255,255,0.01); } /* ======================================== 15. LINKS ======================================== */ body.dark-theme [class*="-stat-link"], body.dark-theme [class*="-card-link"], body.dark-theme [class*="inline-link"] { color: var(--gold); } body.dark-theme [class*="-stat-link"]:hover, body.dark-theme [class*="-card-link"]:hover { color: #fff; } /* Links in card text */ body.dark-theme [class*="-card-text"] a { color: var(--gold); } body.dark-theme [class*="-card-text"] a:hover { color: #fff; } body.dark-theme [class*="-list"] li a { color: var(--gold); } body.dark-theme [class*="-list"] li a:hover { color: #fff; } /* ======================================== 16. PROGRESS BARS & STATS ======================================== */ body.dark-theme .track-total-card, body.dark-theme .vol-track-stat-card.clinical, body.dark-theme .rs-track-stat-card.total { /* Navy bg cards stay as-is */ } body.dark-theme .track-progress-card, body.dark-theme .vol-track-progress-card, body.dark-theme .vol-track-stat-card.nonclinical, body.dark-theme .rs-track-stat-card.lab, body.dark-theme .rs-track-stat-card.clinical { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } /* ======================================== 17. SEARCH INPUT (EAP) ======================================== */ body.dark-theme .eap-search input { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); } body.dark-theme .eap-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.1); } body.dark-theme .eap-search input::placeholder { color: rgba(255,255,255,0.25); } body.dark-theme .eap-search-icon { color: rgba(255,255,255,0.3); } /* ======================================== 18. NO-RESULTS STATES ======================================== */ body.dark-theme .eap-no-results, body.dark-theme [class$="-no-results"], body.dark-theme [class$="-empty"] { color: rgba(255,255,255,0.35); } /* ======================================== 19. ECOMM CALLOUT CARDS (bottom) ======================================== */ body.dark-theme .eap-callout { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); box-shadow: inset 0 40px 30px -15px rgba(var(--accent-rgb),0.55), inset 0 20px 15px -4px rgba(var(--accent-rgb),0.30), inset 0 10px 10px -3px rgba(255,255,255,0.20), inset 0 -3px 3px -1px rgba(var(--accent-rgb),0.10); } body.dark-theme .eap-callout h3 { color: var(--gold); } body.dark-theme .eap-callout a { color: var(--gold); } /* ======================================== 20. SCRIPT BOXES ======================================== */ body.dark-theme .get-script, body.dark-theme .lor-script { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); } body.dark-theme .get-script-fill, body.dark-theme .lor-script-fill { color: var(--gold); } /* ======================================== 21. GUIDE NOTE BOXES ======================================== */ body.dark-theme .guide-note, body.dark-theme [class$="-note"] { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.5); } /* ======================================== 22. EMAIL OUTPUT ======================================== */ body.dark-theme .rs-email-body, body.dark-theme .lor-email-body { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); } body.dark-theme .rs-email-output, body.dark-theme .lor-email-output { color: rgba(255,255,255,0.8); } /* ======================================== 23. TOPIC HEADERS (MCAT content review) ======================================== */ body.dark-theme .mc-topic-header { background: rgba(27,54,93,0.2); color: var(--gold); } /* ======================================== 24. EXPERIENCE REFLECTIONS SPECIFICS ======================================== */ body.dark-theme .er-summary-bar { /* Already navy bg — keep */ } body.dark-theme .er-entry.has-content { border-color: rgba(255,255,255,0.15); border-left-color: var(--gold); } body.dark-theme .er-entry.is-mm { border-color: var(--gold); border-left-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1); } body.dark-theme .er-entry.is-mm .er-entry-header { background: rgba(var(--accent-rgb),0.06); } /* ======================================== 25. MODALS ======================================== */ body.dark-theme [class$="-modal-overlay"] { background: rgba(0,0,0,0.6); } body.dark-theme [class$="-modal-box"] { background: #0D1E35; border: 1px solid rgba(255,255,255,0.08); } body.dark-theme [class$="-modal-head"] { border-bottom-color: rgba(255,255,255,0.08); } body.dark-theme [class$="-modal-head"] h3 { color: #fff; } /* ======================================== 26. TOAST NOTIFICATIONS ======================================== */ body.dark-theme [class$="-toast"] { background: var(--gold); color: var(--navy); } /* ======================================== 27. FOOTER ======================================== */ body.dark-theme .footer { background: rgba(6,11,20,0.8); border-top-color: rgba(255,255,255,0.06); } body.dark-theme .footer .logo-text { color: #fff; } body.dark-theme .footer .logo-icon { color: #fff; } body.dark-theme .footer-tagline { color: rgba(255,255,255,0.35); } body.dark-theme .footer-bottom { color: rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.06); } /* ======================================== 28. SCROLLBARS ======================================== */ body.dark-theme ::-webkit-scrollbar { width: 8px; } body.dark-theme ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); } body.dark-theme ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } body.dark-theme ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* ======================================== 29. SELECTION ======================================== */ body.dark-theme ::selection { background: rgba(var(--accent-rgb),0.3); color: #fff; } /* ======================================== 30. LIQUID GLASS (opt-in utility) ======================================== */ body.dark-theme .liquid-glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: none; position: relative; overflow: hidden; } body.dark-theme .liquid-glass::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%, rgba(var(--accent-rgb),0.1) 80%, rgba(var(--accent-rgb),0.2) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }