/* ======================================================================== QuantaCade Clean user.css Header Menu Theme + Hover-Only Submenus ------------------------------------------------------------------------ Install: /media/templates/site/YOUR_TEMPLATE/css/user.css Notes: - This is a clean replacement user.css for the QuantaCade menu styling. - Desktop submenu parent headers are hover-only and not clickable. - Submenus open on hover/focus and close on hover-out. - Mobile/tablet submenu click/expand behavior is preserved. ======================================================================== */ :root { --qc-nav-bg: #070923; --qc-nav-panel: rgba(32,35,76,.92); --qc-nav-panel-2: rgba(45,39,86,.86); --qc-nav-line: rgba(130,185,255,.24); --qc-nav-text: #f8fbff; --qc-nav-muted: rgba(233,241,255,.72); --qc-nav-cyan: #78dcff; --qc-nav-gold: #ffd36f; --qc-nav-purple: #9a8cff; --qc-nav-green: #20f5ad; } /* ======================================================================== QuantaCade Anti-White-Flash Safety Layer ------------------------------------------------------------------------ Keeps the document/root/template surfaces dark during the browser's first paint so mobile/desktop navigation does not briefly flash a white page before the QuantaCade article/helper CSS finishes rendering. ======================================================================== */ html, body { min-height: 100%; background-color: #070923 !important; color-scheme: dark; } body { background: radial-gradient(circle at 16% 8%, rgba(120,220,255,.12), transparent 28%), radial-gradient(circle at 88% 16%, rgba(154,140,255,.12), transparent 30%), linear-gradient(135deg, #080b2a 0%, #14173c 48%, #070923 100%) !important; } /* Base site background only */ body.site, .site { background-color: #070923 !important; } body .container-header { background-color: #070923 !important; } /* Header and wrapper safety: submenus must be able to extend over the page content below. */ body .container-header, body .container-header .container, body .container-header .container-fluid, body .container-header .container-nav, body .container-header .grid-child, body .container-header .navbar, body .container-header .navbar-collapse, body .container-header nav, body .container-header .moduletable, body .container-header .mod-custom, body .container-header .mod-menu, body .container-header .metismenu, body .container-header .metismenu.mod-menu, body .container-header .metismenu.menu-horizontal, body .container-header .metismenu.mod-menu .metismenu-item, body .container-header .mod-menu > li { overflow: visible !important; } body .container-header { position: relative !important; z-index: 999900 !important; } body .container-header .container-nav, body .container-header .grid-child, body .container-header .navbar, body .container-header .navbar-collapse, body .container-header nav { position: relative !important; z-index: 999910 !important; } /* Main menu layout. */ body .container-header .mod-menu, body .container-header .metismenu.mod-menu, body .container-header .metismenu.menu-horizontal { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important; position: relative !important; z-index: 999920 !important; } body .container-header .mod-menu, body .container-header .mod-menu ul, body .container-header .metismenu.mod-menu, body .container-header .metismenu.mod-menu ul { list-style: none !important; } body .container-header .metismenu.mod-menu .metismenu-item, body .container-header .mod-menu > li { padding: 0 !important; margin: 0 !important; position: relative !important; overflow: visible !important; } body .container-header .metismenu.mod-menu > li + li, body .container-header .mod-menu > li + li { margin-left: 8px !important; } /* Top-level menu buttons. */ body .container-header .mod-menu > li > a, body .container-header .mod-menu > li > span, body .container-header .mod-menu > li > button, body .container-header .metismenu.mod-menu > li > a, body .container-header .metismenu.mod-menu > li > span, body .container-header .metismenu.mod-menu > li > button, body .container-header .metismenu.mod-menu .level-1 > a, body .container-header .metismenu.mod-menu .level-1 > span, body .container-header .metismenu.mod-menu .level-1 > button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 8px 14px !important; border: 1px solid rgba(120,220,255,.24) !important; border-radius: 999px !important; background: rgba(255,255,255,.045) !important; color: var(--qc-nav-text) !important; -webkit-text-fill-color: var(--qc-nav-text) !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: .065em !important; font-size: .78rem !important; font-weight: 900 !important; line-height: 1.1 !important; white-space: nowrap !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px rgba(120,220,255,.06) !important; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, text-shadow .18s ease, color .18s ease !important; overflow: hidden !important; } /* Remove default Cassiopeia/metismenu underline bars. */ body .container-header .mod-menu > li:after, body .container-header .metismenu > li:after, body .container-header .mod-menu > li > a:after, body .container-header .mod-menu > li > span:after, body .container-header .metismenu.mod-menu > li > a:after, body .container-header .metismenu.mod-menu > li > span:after, body .container-header .metismenu.mod-menu > li > button:before, body .container-header .metismenu.mod-menu > li > button:after { display: none !important; content: none !important; background: none !important; } /* Button sweep. */ body .container-header .mod-menu > li > a::before, body .container-header .mod-menu > li > span::before, body .container-header .mod-menu > li > button::before, body .container-header .metismenu.mod-menu > li > a::before, body .container-header .metismenu.mod-menu > li > span::before, body .container-header .metismenu.mod-menu > li > button::before, body .container-header .metismenu.mod-menu .level-1 > a::before, body .container-header .metismenu.mod-menu .level-1 > span::before, body .container-header .metismenu.mod-menu .level-1 > button::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-120%); background: linear-gradient(105deg, transparent 22%, rgba(255,211,111,.18) 48%, transparent 72%); } /* Canonical QuantaCade gold/yellow glow on hover/focus/current. */ body .container-header .mod-menu > li > a:hover, body .container-header .mod-menu > li > a:focus, body .container-header .mod-menu > li > a:focus-visible, body .container-header .mod-menu > li > button:hover, body .container-header .mod-menu > li > button:focus, body .container-header .mod-menu > li > button:focus-visible, body .container-header .metismenu.mod-menu > li > a:hover, body .container-header .metismenu.mod-menu > li > a:focus, body .container-header .metismenu.mod-menu > li > a:focus-visible, body .container-header .metismenu.mod-menu > li > button:hover, body .container-header .metismenu.mod-menu > li > button:focus, body .container-header .metismenu.mod-menu > li > button:focus-visible, body .container-header .metismenu.mod-menu .level-1 > a:hover, body .container-header .metismenu.mod-menu .level-1 > a:focus, body .container-header .metismenu.mod-menu .level-1 > button:hover, body .container-header .metismenu.mod-menu .level-1 > button:focus, body .container-header .metismenu.mod-menu .level-1.active > a, body .container-header .metismenu.mod-menu .level-1.active > button, body .container-header .mod-menu > li.active > a, body .container-header .mod-menu > li.current > a, body .container-header .metismenu.mod-menu li.parent:hover > a, body .container-header .metismenu.mod-menu li.parent:hover > button, body .container-header .metismenu.mod-menu li.deeper:hover > a, body .container-header .metismenu.mod-menu li.deeper:hover > button, body .container-header .metismenu.mod-menu li.dropdown:hover > a, body .container-header .metismenu.mod-menu li.dropdown:hover > button, body .container-header .metismenu.mod-menu li:has(> ul):hover > a, body .container-header .metismenu.mod-menu li:has(> ul):hover > button, body .container-header .metismenu.mod-menu li:has(> ul):focus-within > a, body .container-header .metismenu.mod-menu li:has(> ul):focus-within > button, body .container-header .mod-menu li.parent:hover > a, body .container-header .mod-menu li.parent:hover > button, body .container-header .mod-menu li.deeper:hover > a, body .container-header .mod-menu li.deeper:hover > button, body .container-header .mod-menu li.dropdown:hover > a, body .container-header .mod-menu li.dropdown:hover > button, body .container-header .mod-menu li:has(> ul):hover > a, body .container-header .mod-menu li:has(> ul):hover > button, body .container-header .mod-menu li:has(> ul):focus-within > a, body .container-header .mod-menu li:has(> ul):focus-within > button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(255,211,111,.82) !important; background: rgba(255,211,111,.10) !important; box-shadow: 0 0 0 2px rgba(255,211,111,.34), 0 0 24px rgba(255,211,111,.40), 0 0 48px rgba(255,211,111,.22), inset 0 0 22px rgba(255,211,111,.11), inset 0 1px 0 rgba(255,255,255,.08) !important; text-shadow: 0 0 12px rgba(255,211,111,.42) !important; transform: translateY(-1px); outline: none !important; text-decoration: none !important; } /* Trigger sweep on hover/focus. */ body .container-header .mod-menu > li > a:hover::before, body .container-header .mod-menu > li > a:focus::before, body .container-header .mod-menu > li > button:hover::before, body .container-header .mod-menu > li > button:focus::before, body .container-header .metismenu.mod-menu > li > a:hover::before, body .container-header .metismenu.mod-menu > li > a:focus::before, body .container-header .metismenu.mod-menu > li > button:hover::before, body .container-header .metismenu.mod-menu > li > button:focus::before, body .container-header .metismenu.mod-menu .level-1 > a:hover::before, body .container-header .metismenu.mod-menu .level-1 > a:focus::before, body .container-header .metismenu.mod-menu .level-1 > button:hover::before, body .container-header .metismenu.mod-menu .level-1 > button:focus::before { opacity: 1; animation: qcNavButtonCharge .72s ease forwards; } @keyframes qcNavButtonCharge { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } /* Desktop-only submenu behavior. */ @media (min-width: 992px) { /* Parent menu headers that have submenus are intentionally hover-only on desktop. */ body .container-header .metismenu.mod-menu li.parent > a, body .container-header .metismenu.mod-menu li.parent > button, body .container-header .metismenu.mod-menu li.deeper > a, body .container-header .metismenu.mod-menu li.deeper > button, body .container-header .metismenu.mod-menu li.dropdown > a, body .container-header .metismenu.mod-menu li.dropdown > button, body .container-header .metismenu.mod-menu li:has(> ul) > a, body .container-header .metismenu.mod-menu li:has(> ul) > button, body .container-header .mod-menu li.parent > a, body .container-header .mod-menu li.parent > button, body .container-header .mod-menu li.deeper > a, body .container-header .mod-menu li.deeper > button, body .container-header .mod-menu li.dropdown > a, body .container-header .mod-menu li.dropdown > button, body .container-header .mod-menu li:has(> ul) > a, body .container-header .mod-menu li:has(> ul) > button { pointer-events: none !important; cursor: default !important; } /* Desktop submenu panels. */ body .container-header .metismenu.mod-menu .metismenu-item > ul, body .container-header .metismenu.mod-menu .level-1 > ul, body .container-header .metismenu.mod-menu .parent > ul, body .container-header .metismenu.mod-menu .mm-collapse, body .container-header .metismenu.mod-menu .mm-collapsing, body .container-header .mod-menu .parent > ul, body .container-header .mod-menu .mod-menu__sub { position: absolute !important; top: calc(100% + 2px) !important; left: 0 !important; min-width: 230px !important; width: max-content !important; max-width: min(440px, calc(100vw - 24px)) !important; height: auto !important; overflow: visible !important; z-index: 2147483000 !important; padding: 10px !important; margin: 0 !important; border: 1px solid rgba(130,185,255,.24) !important; border-radius: 16px !important; background: radial-gradient(circle at 16% 8%, rgba(120,220,255,.14), transparent 32%), radial-gradient(circle at 88% 16%, rgba(154,140,255,.16), transparent 34%), linear-gradient(135deg, rgba(8,11,42,.98), rgba(20,23,60,.96) 52%, rgba(7,9,35,.98)) !important; box-shadow: 0 20px 60px rgba(0,0,0,.44), 0 0 28px rgba(120,220,255,.10), inset 0 1px 0 rgba(255,255,255,.07) !important; backdrop-filter: blur(10px); color: var(--qc-nav-text) !important; } /* Click-open Metis state should not keep a desktop submenu visible by itself. */ body .container-header .metismenu.mod-menu .mm-collapse.mm-show, body .container-header .metismenu.mod-menu .mm-collapse.show, body .container-header .metismenu.mod-menu .metismenu-item > ul, body .container-header .metismenu.mod-menu .level-1 > ul, body .container-header .metismenu.mod-menu .parent > ul, body .container-header .mod-menu .parent > ul, body .container-header .mod-menu .mod-menu__sub { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Hover/focus opens submenu. */ body .container-header .metismenu.mod-menu .metismenu-item:hover > ul, body .container-header .metismenu.mod-menu .metismenu-item:focus-within > ul, body .container-header .metismenu.mod-menu .level-1:hover > ul, body .container-header .metismenu.mod-menu .level-1:focus-within > ul, body .container-header .metismenu.mod-menu .parent:hover > ul, body .container-header .metismenu.mod-menu .parent:focus-within > ul, body .container-header .metismenu.mod-menu .metismenu-item:hover > .mm-collapse, body .container-header .metismenu.mod-menu .metismenu-item:focus-within > .mm-collapse, body .container-header .metismenu.mod-menu .level-1:hover > .mm-collapse, body .container-header .metismenu.mod-menu .level-1:focus-within > .mm-collapse, body .container-header .metismenu.mod-menu .parent:hover > .mm-collapse, body .container-header .metismenu.mod-menu .parent:focus-within > .mm-collapse, body .container-header .mod-menu .parent:hover > ul, body .container-header .mod-menu .parent:focus-within > ul, body .container-header .mod-menu li:has(> ul):hover > ul, body .container-header .mod-menu li:has(> ul):focus-within > ul { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } /* Hover bridge from top-level button to dropdown. */ body .container-header .metismenu.mod-menu > li::before, body .container-header .mod-menu > li::before, body .container-header .metismenu.mod-menu .level-1::before { content: "" !important; position: absolute !important; left: -12px !important; right: -12px !important; top: 100% !important; height: 24px !important; background: transparent !important; pointer-events: auto !important; z-index: 2147482998 !important; } /* Nested submenu behavior. */ body .container-header .metismenu.mod-menu .metismenu-item > ul li, body .container-header .metismenu.mod-menu .mm-collapse > li, body .container-header .mod-menu .mod-menu__sub li { position: relative !important; overflow: visible !important; } body .container-header .metismenu.mod-menu .metismenu-item > ul li > ul, body .container-header .metismenu.mod-menu .mm-collapse > li > ul, body .container-header .mod-menu .mod-menu__sub li > ul { top: -10px !important; left: calc(100% + 2px) !important; right: auto !important; } body .container-header .metismenu.mod-menu .mm-collapse > li::before, body .container-header .metismenu.mod-menu ul > li::before, body .container-header .mod-menu .mod-menu__sub > li::before { content: "" !important; position: absolute !important; top: -8px !important; bottom: -8px !important; left: 100% !important; width: 18px !important; background: transparent !important; pointer-events: auto !important; z-index: 2147482998 !important; } /* Keep far-right dropdowns inside viewport better. */ body .container-header .metismenu.mod-menu > li:last-child > ul, body .container-header .metismenu.mod-menu > li:nth-last-child(2) > ul, body .container-header .mod-menu > li:last-child > ul, body .container-header .mod-menu > li:nth-last-child(2) > ul { left: auto !important; right: 0 !important; } } /* Dropdown item styling. */ body .container-header .metismenu.mod-menu ul a, body .container-header .metismenu.mod-menu ul span, body .container-header .metismenu.mod-menu ul button, body .container-header .mod-menu ul a, body .container-header .mod-menu ul span, body .container-header .mod-menu ul button { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 36px !important; padding: 9px 12px !important; margin: 2px 0 !important; border: 1px solid rgba(120,220,255,.14) !important; border-radius: 12px !important; background: rgba(255,255,255,.035) !important; color: rgba(248,251,255,.92) !important; -webkit-text-fill-color: rgba(248,251,255,.92) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: .02em !important; font-size: .88rem !important; font-weight: 800 !important; white-space: nowrap !important; box-shadow: none !important; overflow: visible !important; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, text-shadow .16s ease !important; } /* Dropdown item hover/focus. */ body .container-header .metismenu.mod-menu ul a:hover, body .container-header .metismenu.mod-menu ul a:focus, body .container-header .metismenu.mod-menu ul button:hover, body .container-header .metismenu.mod-menu ul button:focus, body .container-header .mod-menu ul a:hover, body .container-header .mod-menu ul a:focus, body .container-header .mod-menu ul button:hover, body .container-header .mod-menu ul button:focus { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(255,211,111,.68) !important; background: rgba(255,211,111,.10) !important; box-shadow: 0 0 0 1px rgba(255,211,111,.24), 0 0 20px rgba(255,211,111,.25), inset 0 0 18px rgba(255,211,111,.08) !important; text-shadow: 0 0 10px rgba(255,211,111,.32) !important; transform: translateX(2px); outline: none !important; text-decoration: none !important; } /* Mobile/tablet: normal stacked/clickable menu behavior. */ @media (max-width: 991.98px) { body .container-header .mod-menu, body .container-header .metismenu.mod-menu, body .container-header .metismenu.menu-horizontal { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; } body .container-header .metismenu.mod-menu > li, body .container-header .mod-menu > li { width: 100% !important; margin-left: 0 !important; } body .container-header .mod-menu > li > a, body .container-header .mod-menu > li > span, body .container-header .mod-menu > li > button, body .container-header .metismenu.mod-menu > li > a, body .container-header .metismenu.mod-menu > li > span, body .container-header .metismenu.mod-menu > li > button, body .container-header .metismenu.mod-menu .level-1 > a, body .container-header .metismenu.mod-menu .level-1 > span, body .container-header .metismenu.mod-menu .level-1 > button { width: 100% !important; justify-content: flex-start !important; } body .container-header .metismenu.mod-menu ul, body .container-header .metismenu.mod-menu .mm-collapse, body .container-header .metismenu.mod-menu .mm-collapsing, body .container-header .mod-menu ul, body .container-header .mod-menu .mod-menu__sub { position: static !important; width: 100% !important; max-width: none !important; margin: 8px 0 8px 10px !important; padding: 8px !important; border: 1px solid rgba(130,185,255,.18) !important; border-radius: 14px !important; background: rgba(5,8,28,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; overflow: visible !important; } body .container-header .metismenu.mod-menu ul a, body .container-header .metismenu.mod-menu ul span, body .container-header .metismenu.mod-menu ul button, body .container-header .mod-menu ul a, body .container-header .mod-menu ul span, body .container-header .mod-menu ul button { white-space: normal !important; } } /* ======================================================================== QuantaCade Mobile Hamburger Menu Support ------------------------------------------------------------------------ Add-on to the clean QuantaCade user.css. - Desktop remains hover-only for submenu parents. - Mobile uses hamburger/collapse behavior. - Mobile parent submenu headers remain clickable for expanding their submenu. ======================================================================== */ @media (min-width: 992px) { body .container-header .navbar-toggler, body .container-header .navbar-toggler-right, body .container-header .navbar-toggler-left { display: none !important; } body .container-header .navbar-collapse { display: flex !important; height: auto !important; visibility: visible !important; opacity: 1 !important; } } @media (max-width: 991.98px) { body .container-header { z-index: 999900 !important; } body .container-header .navbar, body .container-header .container-nav, body .container-header .grid-child { width: 100% !important; } body .container-header .navbar-toggler, body .container-header .navbar-toggler-right, body .container-header .navbar-toggler-left { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 40px !important; padding: 8px 12px !important; margin-left: auto !important; border: 1px solid rgba(120,220,255,.30) !important; border-radius: 999px !important; background: rgba(255,255,255,.045) !important; color: #f8fbff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px rgba(120,220,255,.10) !important; outline: none !important; } body .container-header .navbar-toggler:hover, body .container-header .navbar-toggler:focus, body .container-header .navbar-toggler[aria-expanded="true"] { color: #ffffff !important; border-color: rgba(255,211,111,.82) !important; background: rgba(255,211,111,.10) !important; box-shadow: 0 0 0 2px rgba(255,211,111,.34), 0 0 24px rgba(255,211,111,.40), 0 0 48px rgba(255,211,111,.22), inset 0 0 22px rgba(255,211,111,.11), inset 0 1px 0 rgba(255,255,255,.08) !important; } body .container-header .navbar-toggler-icon { width: 1.45rem !important; height: 1.45rem !important; background-image: linear-gradient(#f8fbff, #f8fbff), linear-gradient(#f8fbff, #f8fbff), linear-gradient(#f8fbff, #f8fbff) !important; background-position: center 28%, center 50%, center 72% !important; background-repeat: no-repeat !important; background-size: 1.35rem 2px, 1.35rem 2px, 1.35rem 2px !important; filter: drop-shadow(0 0 6px rgba(120,220,255,.22)) drop-shadow(0 0 10px rgba(255,211,111,.16)); } body .container-header .navbar-collapse, body .container-header .collapse.navbar-collapse, body .container-header .container-nav .navbar-collapse { width: 100% !important; margin-top: 10px !important; padding: 12px !important; border: 1px solid rgba(130,185,255,.22) !important; border-radius: 18px !important; background: radial-gradient(circle at 16% 8%, rgba(120,220,255,.14), transparent 32%), radial-gradient(circle at 88% 16%, rgba(154,140,255,.16), transparent 34%), linear-gradient(135deg, rgba(8,11,42,.98), rgba(20,23,60,.96) 52%, rgba(7,9,35,.98)) !important; box-shadow: 0 20px 60px rgba(0,0,0,.38), 0 0 28px rgba(120,220,255,.10), inset 0 1px 0 rgba(255,255,255,.07) !important; overflow: visible !important; } body .container-header .navbar-collapse:not(.show):not(.collapsing) { display: none !important; } body .container-header .navbar-collapse.show, body .container-header .navbar-collapse.collapsing { display: block !important; overflow: visible !important; } /* On mobile, submenu parent headers MUST be clickable again. */ body .container-header .metismenu.mod-menu li.parent > a, body .container-header .metismenu.mod-menu li.parent > button, body .container-header .metismenu.mod-menu li.deeper > a, body .container-header .metismenu.mod-menu li.deeper > button, body .container-header .metismenu.mod-menu li.dropdown > a, body .container-header .metismenu.mod-menu li.dropdown > button, body .container-header .metismenu.mod-menu li:has(> ul) > a, body .container-header .metismenu.mod-menu li:has(> ul) > button, body .container-header .mod-menu li.parent > a, body .container-header .mod-menu li.parent > button, body .container-header .mod-menu li.deeper > a, body .container-header .mod-menu li.deeper > button, body .container-header .mod-menu li.dropdown > a, body .container-header .mod-menu li.dropdown > button, body .container-header .mod-menu li:has(> ul) > a, body .container-header .mod-menu li:has(> ul) > button { pointer-events: auto !important; cursor: pointer !important; } body .container-header .metismenu.mod-menu, body .container-header .mod-menu { width: 100% !important; } body .container-header .metismenu.mod-menu > li + li, body .container-header .mod-menu > li + li { margin-left: 0 !important; margin-top: 8px !important; } body .container-header .metismenu.mod-menu ul, body .container-header .metismenu.mod-menu .mm-collapse, body .container-header .metismenu.mod-menu .mm-collapsing, body .container-header .mod-menu ul, body .container-header .mod-menu .mod-menu__sub { position: static !important; width: 100% !important; max-width: none !important; margin: 8px 0 8px 10px !important; padding: 8px !important; border: 1px solid rgba(130,185,255,.18) !important; border-radius: 14px !important; background: rgba(5,8,28,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; overflow: visible !important; } /* Closed mobile submenus should stay closed until clicked. */ body .container-header .metismenu.mod-menu .mm-collapse:not(.mm-show):not(.show), body .container-header .metismenu.mod-menu ul:not(.mm-show):not(.show):not(.mod-menu), body .container-header .mod-menu .mod-menu__sub:not(.show) { display: none; } body .container-header .metismenu.mod-menu .mm-collapse.mm-show, body .container-header .metismenu.mod-menu .mm-collapse.show, body .container-header .metismenu.mod-menu ul.mm-show, body .container-header .metismenu.mod-menu ul.show, body .container-header .mod-menu .mod-menu__sub.show { display: block !important; } } /* ======================================================================== QuantaCade Mobile Hamburger Force Override v2 ------------------------------------------------------------------------ This section fixes templates that do not render/show a native hamburger. The companion user.js injects a QuantaCade hamburger button if needed and marks the actual menu with .qc-mobile-primary-menu. Mobile behavior: - menu hidden by default - hamburger opens/closes menu - tapping outside header closes menu - tapping inside header keeps menu open - submenu parent tap expands/collapses submenu ======================================================================== */ @media (max-width: 991.98px) { body .container-header.qc-mobile-menu-ready { position: relative !important; z-index: 999900 !important; overflow: visible !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; min-height: 42px !important; min-width: 48px !important; margin: 8px 0 8px auto !important; padding: 9px 14px !important; border: 1px solid rgba(120,220,255,.34) !important; border-radius: 999px !important; background: rgba(255,255,255,.045) !important; color: #f8fbff !important; -webkit-text-fill-color: #f8fbff !important; font-size: .78rem !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 12px rgba(120,220,255,.10) !important; cursor: pointer !important; position: relative !important; z-index: 1000000 !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-menu-toggle:hover, body .container-header.qc-mobile-menu-ready .qc-mobile-menu-toggle:focus, body .container-header.qc-mobile-menu-ready .qc-mobile-menu-toggle[aria-expanded="true"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(255,211,111,.82) !important; background: rgba(255,211,111,.10) !important; box-shadow: 0 0 0 2px rgba(255,211,111,.34), 0 0 24px rgba(255,211,111,.40), 0 0 48px rgba(255,211,111,.22), inset 0 0 22px rgba(255,211,111,.11), inset 0 1px 0 rgba(255,255,255,.08) !important; outline: none !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-menu-icon { display: inline-block !important; width: 22px !important; height: 16px !important; position: relative !important; flex: 0 0 auto !important; background: linear-gradient(#f8fbff, #f8fbff) left top / 22px 2px no-repeat, linear-gradient(#f8fbff, #f8fbff) left center / 22px 2px no-repeat, linear-gradient(#f8fbff, #f8fbff) left bottom / 22px 2px no-repeat !important; filter: drop-shadow(0 0 6px rgba(120,220,255,.28)) drop-shadow(0 0 10px rgba(255,211,111,.18)); } /* Native template toggler can remain hidden; JS injects qc-mobile-menu-toggle. */ body .container-header.qc-mobile-menu-ready .navbar-toggler:not(.qc-mobile-menu-toggle), body .container-header.qc-mobile-menu-ready .navbar-toggler-right:not(.qc-mobile-menu-toggle), body .container-header.qc-mobile-menu-ready .navbar-toggler-left:not(.qc-mobile-menu-toggle) { display: none !important; } /* The actual mobile menu is hidden until the header has qc-mobile-menu-open. */ body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu { display: none !important; width: 100% !important; margin: 10px 0 0 0 !important; padding: 12px !important; border: 1px solid rgba(130,185,255,.22) !important; border-radius: 18px !important; background: radial-gradient(circle at 16% 8%, rgba(120,220,255,.14), transparent 32%), radial-gradient(circle at 88% 16%, rgba(154,140,255,.16), transparent 34%), linear-gradient(135deg, rgba(8,11,42,.98), rgba(20,23,60,.96) 52%, rgba(7,9,35,.98)) !important; box-shadow: 0 20px 60px rgba(0,0,0,.38), 0 0 28px rgba(120,220,255,.10), inset 0 1px 0 rgba(255,255,255,.07) !important; overflow: visible !important; position: relative !important; z-index: 999999 !important; } body .container-header.qc-mobile-menu-ready.qc-mobile-menu-open .qc-mobile-primary-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu > li, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .metismenu-item { width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; overflow: visible !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu > li + li, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .metismenu-item + .metismenu-item { margin-top: 8px !important; margin-left: 0 !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu > li > a, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu > li > span, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu > li > button, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .metismenu-item > a, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .metismenu-item > span, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .metismenu-item > button { width: 100% !important; justify-content: flex-start !important; pointer-events: auto !important; cursor: pointer !important; } /* Mobile submenus are closed unless JS marks the parent open. */ body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu ul, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .mm-collapse, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .mod-menu__sub { display: none !important; position: static !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 8px 0 8px 10px !important; padding: 8px !important; border: 1px solid rgba(130,185,255,.18) !important; border-radius: 14px !important; background: rgba(5,8,28,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .qc-mobile-submenu-open > ul, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .qc-mobile-submenu-open > .mm-collapse, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu .qc-mobile-submenu-open > .mod-menu__sub { display: block !important; height: auto !important; overflow: visible !important; } body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu ul a, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu ul span, body .container-header.qc-mobile-menu-ready .qc-mobile-primary-menu ul button { white-space: normal !important; } } @media (min-width: 992px) { body .container-header .qc-mobile-menu-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* Fix dark wedges behind rounded QuantaCade content shells. Keep the outer main container intact. */ body .container-component > main .item-page:has(.qc-prod-shell), body .container-component > main .com-content-article:has(.qc-prod-shell) { background: transparent !important; } /* Clip extension-card images to the card's rounded top corners without clipping the animated outer glow. */ .qc-prod-card-media { border-radius: 17px 17px 0 0; overflow: hidden; } /* Lobby only: remove Joomla's inner article padding */ body .blog-item .item-content:has(.qc-lobby-fun) { padding: 0 !important; } /* ======================================================================== QuantaCade Multi-Column Desktop Dropdowns Link Class: menu-cols-2 menu-cols-3 ======================================================================== */ @media (min-width: 992px) { /* ========================= TWO COLUMNS ========================= */ body .container-header .mod-menu > li:hover > button:has(> .menu-cols-2) + ul.mod-menu__sub, body .container-header .mod-menu > li:focus-within > button:has(> .menu-cols-2) + ul.mod-menu__sub { display: grid !important; grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; width: 540px !important; min-width: 540px !important; max-width: none !important; column-gap: 8px !important; row-gap: 2px !important; /* Align the dropdown's right edge with the parent menu item's right edge. */ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } /* ========================= THREE COLUMNS ========================= */ body .container-header .mod-menu > li:hover > button:has(> .menu-cols-3) + ul.mod-menu__sub, body .container-header .mod-menu > li:focus-within > button:has(> .menu-cols-3) + ul.mod-menu__sub { display: grid !important; grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; width: 720px !important; min-width: 720px !important; max-width: none !important; column-gap: 8px !important; row-gap: 2px !important; /* Align the dropdown's right edge with the parent menu item's right edge. */ left: 0 !important; right: auto !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; } /* Fill each grid cell */ body .container-header .mod-menu > li > button:has(> .menu-cols-2) + ul.mod-menu__sub > li, body .container-header .mod-menu > li > button:has(> .menu-cols-3) + ul.mod-menu__sub > li { width: 100% !important; min-width: 0 !important; margin: 0 !important; } } /* ======================================================================== Perspectives Menu Item ID: 1041 ======================================================================== */ /* Main Perspectives content container */ body.itemid-1041 .container-component > main { background: #ffffff !important; color: #1f2937 !important; padding: 24px !important; border-radius: 12px !important; } /* ======================================================================== Perspectives — Search Field ======================================================================== */ body.itemid-1041 #filter-search { background: #ffffff !important; color: #1f2937 !important; border: 1px solid #ced4da !important; } body.itemid-1041 #filter-search::placeholder { color: #6c757d !important; opacity: 1; } /* Perspectives filter: keep the field and icon actions inside the content shell */ body.itemid-1041 .qc-perspectives-filter { display: flex !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px 0 !important; } body.itemid-1041 .qc-perspectives-filter #filter-search, body.itemid-1041 .qc-perspectives-filter .form-select { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } body.itemid-1041 .qc-perspectives-filter-actions { display: flex !important; flex: 0 0 auto !important; align-items: stretch !important; gap: 8px !important; min-width: 0 !important; } body.itemid-1041 .qc-perspectives-filter-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; height: 46px !important; padding: 0 !important; border-radius: 6px !important; line-height: 1 !important; } body.itemid-1041 .qc-perspectives-filter-icon { display: block !important; width: 19px !important; height: 19px !important; fill: currentColor !important; pointer-events: none !important; } body.itemid-1041 .com-content-category__pagination { margin-bottom: 20px !important; } @media (max-width: 700px) { body.itemid-1041 .container-component > main { overflow: hidden !important; } body.itemid-1041 .qc-perspectives-filter { gap: 6px !important; } body.itemid-1041 .qc-perspectives-filter-actions { gap: 6px !important; } body.itemid-1041 .qc-perspectives-filter-button { flex-basis: 44px !important; width: 44px !important; min-width: 44px !important; height: 44px !important; } body.itemid-1041 .com-content-category__pagination { float: none !important; display: flex !important; justify-content: flex-end !important; width: 100% !important; clear: both !important; } } /* ======================================================================== Perspectives — Clean Editorial Article List ======================================================================== */ /* Remove normal Joomla table appearance */ body.itemid-1041 table.category { display: block !important; width: 100% !important; margin: 0 !important; border: 1px solid #e1e5eb !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; overflow: hidden !important; } /* Hide Joomla table headings */ body.itemid-1041 table.category thead { display: none !important; } body.itemid-1041 table.category tbody { display: block !important; width: 100% !important; } /* ======================================================================== Perspectives — Article Row ======================================================================== */ body.itemid-1041 table.category tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: 32px !important; row-gap: 2px !important; width: 100% !important; padding: 22px 24px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #e7eaf0 !important; background: #ffffff !important; box-shadow: none !important; transition: background-color .15s ease !important; } body.itemid-1041 table.category tbody tr:last-child { border-bottom: 0 !important; } body.itemid-1041 table.category tbody tr:hover { background: #f8faff !important; } /* ======================================================================== Perspectives — Remove Joomla / Bootstrap Cell Styling ======================================================================== */ body.itemid-1041 table.category tbody tr > th, body.itemid-1041 table.category tbody tr > td, body.itemid-1041 table.category.table-striped > tbody > tr:nth-of-type(odd) > *, body.itemid-1041 table.category.table-striped > tbody > tr:nth-of-type(even) > * { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; --table-accent-bg: transparent !important; --bs-table-accent-bg: transparent !important; --bs-table-striped-bg: transparent !important; --bs-table-bg-type: transparent !important; --bs-table-bg-state: transparent !important; } /* ======================================================================== Perspectives — Article Title + Meta Description ======================================================================== */ body.itemid-1041 table.category tbody th.list-title { grid-column: 1 !important; font-weight: 400 !important; grid-row: 1 / 3 !important; display: block !important; align-self: center !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } body.itemid-1041 table.category tbody th.list-title > a { display: block !important; color: #164da5 !important; font-size: 1.08rem !important; font-weight: 400 !important; line-height: 1.45 !important; text-decoration: none !important; } body.itemid-1041 table.category tbody th.list-title > a:hover, body.itemid-1041 table.category tbody th.list-title > a:focus { color: #0b2f68 !important; text-decoration: underline !important; } /* One-line article Meta Description */ body.itemid-1041 table.category .qc-perspective-description { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 4px 0 0 0 !important; padding: 0 !important; color: #7a8494 !important; font-family: inherit !important; font-size: .82rem !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border: 0 !important; background: transparent !important; } /* ======================================================================== Perspectives — Published Date ======================================================================== */ body.itemid-1041 table.category tbody td.list-date { grid-column: 2 !important; grid-row: 1 !important; display: block !important; width: auto !important; min-width: 0 !important; text-align: right !important; white-space: nowrap !important; color: #6b7280 !important; font-size: .88rem !important; line-height: 1.4 !important; } body.itemid-1041 table.category tbody td.list-date::before { content: "Published " !important; color: #374151 !important; font-weight: 600 !important; } /* ======================================================================== Perspectives — Author ======================================================================== */ body.itemid-1041 table.category tbody td.list-author { grid-column: 2 !important; grid-row: 2 !important; display: block !important; width: auto !important; min-width: 0 !important; text-align: right !important; white-space: nowrap !important; color: #6b7280 !important; font-size: .88rem !important; line-height: 1.4 !important; } body.itemid-1041 table.category tbody td.list-author::before { content: "By " !important; color: #374151 !important; font-weight: 600 !important; } /* ======================================================================== Perspectives — Mobile / Small Screens ======================================================================== */ @media (max-width: 700px) { body.itemid-1041 table.category tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; column-gap: 0 !important; row-gap: 4px !important; width: 100% !important; padding: 18px 20px !important; } /* Title and description use only the first grid row */ body.itemid-1041 table.category tbody th.list-title { grid-column: 1 !important; grid-row: 1 !important; display: block !important; align-self: auto !important; width: 100% !important; min-width: 0 !important; margin: 0 0 8px 0 !important; padding: 0 !important; text-align: left !important; } body.itemid-1041 table.category tbody th.list-title > a { display: block !important; width: 100% !important; font-size: 1rem !important; line-height: 1.45 !important; } /* Keep Meta Description to exactly one truncated line */ body.itemid-1041 table.category .qc-perspective-description { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 4px 0 0 0 !important; color: #7a8494 !important; font-size: .80rem !important; font-weight: 400 !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Published date sits below the title/description */ body.itemid-1041 table.category tbody td.list-date { grid-column: 1 !important; grid-row: 2 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; font-size: .84rem !important; line-height: 1.4 !important; } /* Author sits on its own row below the date */ body.itemid-1041 table.category tbody td.list-author { grid-column: 1 !important; grid-row: 3 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; font-size: .84rem !important; line-height: 1.4 !important; } } /* ======================================================================== QuantaCade Global Animation Stability Patch - 2026-09-26 ------------------------------------------------------------------------ The footer is rendered on every public page. Its original ambient sweep rotates a pseudo-element with inset:-40%, which creates a very large composited surface. Some browsers/GPU drivers can flash the whole viewport when that layer is periodically recomposited. Keep the QuantaCade motion, but confine it to the footer and use a narrow translating sweep instead of a giant rotating layer. Also keep the ambient glow as an opacity-only animation so it does not scale a full-width layer. ======================================================================== */ body .container-footer .qc-footer-shell, body .footer .qc-footer-shell { contain: paint; isolation: isolate; } body .container-footer .qc-footer-shell::before, body .footer .qc-footer-shell::before { inset: 0 auto 0 -35% !important; width: 35% !important; height: auto !important; background: linear-gradient( 105deg, transparent 0%, rgba(120,220,255,.03) 38%, rgba(120,220,255,.10) 50%, rgba(120,220,255,.03) 62%, transparent 100% ) !important; animation: qcFooterSweepStable 9s ease-in-out infinite !important; transform: skewX(-18deg) translateX(-120%); transform-origin: center; will-change: transform; backface-visibility: hidden; } @keyframes qcFooterSweepStable { 0%, 10% { transform: skewX(-18deg) translateX(-120%); } 90%, 100% { transform: skewX(-18deg) translateX(500%); } } body .container-footer .qc-footer-shell::after, body .footer .qc-footer-shell::after { animation: qcFooterAmbientFadeStable 14s ease-in-out infinite alternate !important; transform: none !important; will-change: opacity; backface-visibility: hidden; } @keyframes qcFooterAmbientFadeStable { 0% { opacity: .30; } 100% { opacity: .62; } }