File: /var/www/html/wp-content/themes/thegem-elementor/css/ethnic-megamenu.css
body .thegem-te-menu__default.desktop-view ul.nav-menu {
position: relative;
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega-enhanced {
position: static;
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega--what-we-do {
--ethnic-mega-accent: #2563eb;
--ethnic-mega-soft: rgba(37, 99, 235, 0.1);
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega--what-we-think {
--ethnic-mega-accent: #f97316;
--ethnic-mega-soft: rgba(249, 115, 22, 0.12);
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega--who-we-are {
--ethnic-mega-accent: #0f766e;
--ethnic-mega-soft: rgba(15, 118, 110, 0.12);
}
@media (min-width: 1213px) {
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega-enhanced > ul.sub-menu {
display: none !important;
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega-enhanced > a {
position: relative;
z-index: 3;
}
.ethnic-mega-panel {
position: absolute;
top: calc(100% + 14px);
right: 0;
left: auto;
z-index: 1002;
width: min(1320px, calc(100vw - 48px));
max-width: calc(100vw - 48px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px);
transition: opacity 0.2s ease, transform 0.24s ease, visibility 0.2s ease;
}
.ethnic-mega-panel::before {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
}
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega-enhanced.is-open > .ethnic-mega-panel,
body .thegem-te-menu__default.desktop-view ul.nav-menu > li.ethnic-mega-enhanced:hover > .ethnic-mega-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.ethnic-mega-panel__shell {
display: flex;
flex-direction: column;
height: auto;
isolation: isolate;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 24px;
background-color: #ffffff;
background:
linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
box-shadow: 0 28px 72px rgba(15, 23, 42, 0.16);
}
.ethnic-mega-panel__header {
flex: 0 0 auto;
padding: 16px 28px 14px;
border-bottom: 1px solid rgba(226, 232, 240, 0.9);
background-color: #ffffff;
background:
linear-gradient(90deg, color-mix(in srgb, var(--ethnic-mega-soft, rgba(37, 99, 235, 0.08)) 40%, #ffffff) 0%, #ffffff 52%, #ffffff 100%);
}
.ethnic-mega-panel__header-copy {
max-width: 840px;
}
.ethnic-mega-panel__eyebrow {
display: inline-flex;
margin-bottom: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__header h3 {
margin: 0;
font-size: clamp(18px, 1.25vw, 22px);
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.ethnic-mega-panel__header p {
margin: 6px 0 0;
max-width: 72ch;
font-size: 13px;
line-height: 1.6;
color: #64748b;
}
.ethnic-mega-panel__layout {
display: grid;
flex: 1 1 auto;
min-height: 0;
grid-template-columns: minmax(0, 1fr) 300px;
align-items: stretch;
gap: 0;
padding: 0;
}
.ethnic-mega-panel__workspace {
display: grid;
min-height: 100%;
grid-template-columns: 272px minmax(0, 1fr);
align-items: stretch;
gap: 0;
min-width: 0;
}
.ethnic-mega-panel__primary-nav,
.ethnic-mega-panel__subnav {
display: flex;
flex-direction: column;
gap: 0;
padding: 16px 22px 18px;
min-width: 0;
border: 0;
border-radius: 0;
background-color: #ffffff;
background: #ffffff;
box-shadow: none;
}
.ethnic-mega-panel__primary-nav {
border-right: 1px solid rgba(226, 232, 240, 0.88);
}
.ethnic-mega-panel__primary-content,
.ethnic-mega-panel__subcontent {
min-width: 0;
border: 0;
border-radius: 0;
background-color: #ffffff;
background: transparent;
box-shadow: none;
}
.ethnic-mega-panel__primary-content {
padding: 0;
}
.ethnic-mega-panel__side-tab {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 14px;
padding: 13px 0;
border: 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.92);
border-radius: 0;
background: transparent;
text-align: left;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ethnic-mega-panel__side-tab:hover,
.ethnic-mega-panel__side-tab:focus-visible,
.ethnic-mega-panel__side-tab.is-active {
border-color: rgba(148, 163, 184, 0.92);
background: transparent;
box-shadow: none;
outline: none;
}
.ethnic-mega-panel__side-tab.is-active {
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__side-tab-copy {
display: block;
flex: 1 1 auto;
min-width: 0;
}
.ethnic-mega-panel__side-tab-title {
min-width: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.01em;
color: #0f172a;
}
.ethnic-mega-panel__primary-nav .ethnic-mega-panel__side-tab-title {
font-size: 17px;
}
.ethnic-mega-panel__side-tab:hover .ethnic-mega-panel__side-tab-title,
.ethnic-mega-panel__side-tab:focus-visible .ethnic-mega-panel__side-tab-title,
.ethnic-mega-panel__side-tab.is-active .ethnic-mega-panel__side-tab-title {
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__side-tab-indicator {
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-right: 2px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
opacity: 0;
transform: rotate(45deg) translate(-3px, 3px);
transition: opacity 0.18s ease, transform 0.18s ease;
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__side-tab:hover .ethnic-mega-panel__side-tab-indicator,
.ethnic-mega-panel__side-tab:focus-visible .ethnic-mega-panel__side-tab-indicator,
.ethnic-mega-panel__side-tab.is-active .ethnic-mega-panel__side-tab-indicator {
opacity: 1;
transform: rotate(45deg) translate(0, 0);
}
.ethnic-mega-panel__pane {
display: none;
}
.ethnic-mega-panel__pane.is-active {
display: block;
}
.ethnic-mega-panel__pane--root,
.ethnic-mega-panel__subcontent .ethnic-mega-panel__pane {
height: 100%;
}
.ethnic-mega-panel__pane--root > .ethnic-mega-panel__section-copy {
padding: 24px 30px 0;
}
.ethnic-mega-panel__pane--root > .ethnic-mega-panel__link-grid {
padding: 0 30px 28px;
}
.ethnic-mega-panel__section-copy {
max-width: 680px;
}
.ethnic-mega-panel__section-copy--feature {
margin-bottom: 22px;
}
.ethnic-mega-panel__section-kicker {
display: inline-flex;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__section-summary {
margin: 12px 0 0;
max-width: 56ch;
font-size: 15px;
line-height: 1.65;
color: #64748b;
}
.ethnic-mega-panel__group-title {
margin-bottom: 0;
}
.ethnic-mega-panel__group-title span,
.ethnic-mega-panel__group-title-link {
display: inline-flex;
align-items: center;
font-size: clamp(30px, 2.2vw, 42px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
color: #0f172a !important;
text-decoration: none;
}
.ethnic-mega-panel__group-title-link:hover,
.ethnic-mega-panel__group-title-link:focus-visible {
color: var(--ethnic-mega-accent, #2563eb) !important;
outline: none;
}
.ethnic-mega-panel__nested-layout {
display: grid;
align-items: stretch;
min-height: 100%;
grid-template-columns: 236px minmax(0, 1fr);
gap: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.ethnic-mega-panel__subnav {
gap: 0;
border-right: 1px solid rgba(226, 232, 240, 0.88);
}
.ethnic-mega-panel__subcontent {
padding: 24px 30px 28px;
}
.ethnic-mega-panel__subnav .ethnic-mega-panel__side-tab {
padding: 12px 0;
}
.ethnic-mega-panel__subnav .ethnic-mega-panel__side-tab:hover,
.ethnic-mega-panel__subnav .ethnic-mega-panel__side-tab:focus-visible,
.ethnic-mega-panel__subnav .ethnic-mega-panel__side-tab.is-active {
box-shadow: none;
}
.ethnic-mega-panel__link-grid {
display: grid;
gap: 0 24px;
}
.ethnic-mega-panel__link-grid--single {
grid-template-columns: 1fr;
}
.ethnic-mega-panel__link-grid--list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-mega-panel__link-card {
position: relative;
display: block;
padding: 14px 20px 14px 0;
border: 0;
border-bottom: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 0;
background: transparent;
text-decoration: none;
color: #0f172a !important;
transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ethnic-mega-panel__link-card:not(.is-static)::after {
content: "";
position: absolute;
top: 20px;
right: 4px;
width: 8px;
height: 8px;
border-top: 2px solid rgba(148, 163, 184, 0.85);
border-right: 2px solid rgba(148, 163, 184, 0.85);
transform: rotate(45deg);
transition: transform 0.18s ease, border-color 0.18s ease;
}
.ethnic-mega-panel__link-card:hover,
.ethnic-mega-panel__link-card:focus-visible {
border-color: rgba(191, 219, 254, 0.98);
transform: translateX(4px);
outline: none;
}
.ethnic-mega-panel__link-card:hover::after,
.ethnic-mega-panel__link-card:focus-visible::after {
border-color: var(--ethnic-mega-accent, #2563eb);
transform: translateX(3px) rotate(45deg);
}
.ethnic-mega-panel__link-card.is-static {
cursor: default;
}
.ethnic-mega-panel__link-card.is-static::after {
display: none;
}
.ethnic-mega-panel__link-title {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
color: #111827;
}
.ethnic-mega-panel__link-description {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.55;
color: #64748b;
}
.ethnic-mega-panel__link-meta {
display: inline-flex;
margin-top: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__promo {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
min-width: 0;
padding: 24px;
border: 0;
border-left: 1px solid rgba(226, 232, 240, 0.88);
border-radius: 0;
background-color: #ffffff;
background:
linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--ethnic-mega-soft, rgba(37, 99, 235, 0.1)) 70%, #ffffff) 100%);
box-shadow: none;
overflow: hidden;
}
.ethnic-mega-panel__promo::before,
.ethnic-mega-panel__promo::after {
content: "";
position: absolute;
right: -34px;
background: color-mix(in srgb, var(--ethnic-mega-soft, rgba(37, 99, 235, 0.1)) 90%, #ffffff);
opacity: 0.9;
transform: rotate(20deg);
}
.ethnic-mega-panel__promo::before {
top: 14px;
width: 170px;
height: 150px;
border-radius: 28px;
}
.ethnic-mega-panel__promo::after {
bottom: 30px;
width: 210px;
height: 180px;
border-radius: 34px;
}
.ethnic-mega-panel__promo-copy {
min-width: 0;
position: relative;
z-index: 1;
}
.ethnic-mega-panel__promo-kicker {
display: inline-flex;
margin-bottom: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ethnic-mega-accent, #2563eb);
}
.ethnic-mega-panel__promo h4 {
margin: 0;
max-width: 11ch;
font-size: clamp(30px, 2.2vw, 42px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #0f172a;
}
.ethnic-mega-panel__promo p {
margin: 14px 0 0;
max-width: 28ch;
font-size: 14px;
line-height: 1.68;
color: #475569;
}
.ethnic-mega-panel__promo-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.ethnic-mega-panel__promo-tags span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 10px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
color: #334155;
}
.ethnic-mega-panel__promo-link {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-height: 52px;
padding: 0 20px;
border-radius: 14px;
background: linear-gradient(135deg, var(--ethnic-mega-accent, #2563eb) 0%, color-mix(in srgb, var(--ethnic-mega-accent, #2563eb) 78%, #ffffff) 100%);
box-shadow: 0 16px 30px rgba(37, 99, 235, 0.18);
font-size: 14px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
color: #ffffff !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
position: relative;
z-index: 1;
}
.ethnic-mega-panel__promo-link:hover,
.ethnic-mega-panel__promo-link:focus-visible {
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
filter: saturate(1.04);
outline: none;
}
}
@media (max-width: 1500px) and (min-width: 1213px) {
.ethnic-mega-panel {
width: min(1240px, calc(100vw - 48px));
}
.ethnic-mega-panel__layout {
grid-template-columns: minmax(0, 1fr) 280px;
}
.ethnic-mega-panel__workspace {
grid-template-columns: 248px minmax(0, 1fr);
}
.ethnic-mega-panel__nested-layout {
grid-template-columns: 212px minmax(0, 1fr);
}
}
@media (max-width: 1380px) and (min-width: 1213px) {
.ethnic-mega-panel {
width: min(1180px, calc(100vw - 40px));
}
.ethnic-mega-panel__layout {
grid-template-columns: minmax(0, 1fr) 252px;
}
.ethnic-mega-panel__workspace {
grid-template-columns: 226px minmax(0, 1fr);
}
.ethnic-mega-panel__nested-layout {
grid-template-columns: 196px minmax(0, 1fr);
}
.ethnic-mega-panel__group-title span,
.ethnic-mega-panel__group-title-link {
font-size: clamp(26px, 2vw, 34px);
}
.ethnic-mega-panel__promo h4 {
font-size: clamp(24px, 2vw, 34px);
}
}
@media (max-width: 1280px) and (min-width: 1213px) {
.ethnic-mega-panel__header {
padding: 16px 20px 12px;
}
.ethnic-mega-panel__layout {
grid-template-columns: minmax(0, 1fr) 228px;
}
.ethnic-mega-panel__workspace {
grid-template-columns: 212px minmax(0, 1fr);
}
.ethnic-mega-panel__nested-layout {
grid-template-columns: 180px minmax(0, 1fr);
}
.ethnic-mega-panel__primary-nav,
.ethnic-mega-panel__subnav,
.ethnic-mega-panel__promo {
padding: 14px;
}
.ethnic-mega-panel__subcontent {
padding: 20px 22px 24px;
}
.ethnic-mega-panel__pane--root > .ethnic-mega-panel__section-copy {
padding: 20px 22px 0;
}
.ethnic-mega-panel__pane--root > .ethnic-mega-panel__link-grid {
padding: 0 22px 24px;
}
.ethnic-mega-panel__side-tab {
padding: 11px 0;
}
.ethnic-mega-panel__primary-nav .ethnic-mega-panel__side-tab-title {
font-size: 15px;
}
.ethnic-mega-panel__side-tab-title,
.ethnic-mega-panel__link-title,
.ethnic-mega-panel__section-summary {
font-size: 14px;
}
}
@media (max-width: 1212px) {
.ethnic-mega-panel {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ethnic-mega-panel,
.ethnic-mega-panel__side-tab,
.ethnic-mega-panel__link-card,
.ethnic-mega-panel__promo-link {
transition: none;
}
}