/**
* Stadion Mega Menu - front end.
*
* Positioning note: the panel is absolutely positioned inside its , and
* every Astra wrapper between that and #masthead is position:static. So
* the panel resolves against #masthead, which spans the full viewport width -
* top:100% therefore lands it flush under the whole header, edge to edge, with
* no 100vw/scrollbar hacks and no transform trickery.
*/
.stadion-mm-panel {
--smm-lime: #bdd63d;
--smm-lime-dark: #a5bc2e;
--smm-black: #000000;
--smm-near-black: #101010;
--smm-white: #ffffff;
--smm-gray-200: #d9d9d9;
--smm-gray-300: #b3b3b3;
--smm-gray-400: #8a8a8a;
--smm-gray-500: #666666;
--smm-max-w: 1200px;
/* Overridden inline per panel from the builder settings. */
--smm-columns: 4;
--smm-column-gap: 32px;
--smm-item-gap: 8px;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 999;
/* The panel lives inside a nav , so it inherits the menu bar's text
metrics - Astra's line-height:60px would otherwise space every list item
a full bar-height apart. Re-establish normal typography for the subtree. */
line-height: 1.5;
text-align: left;
text-transform: none;
letter-spacing: normal;
white-space: normal;
font-weight: 400;
background: var(--smm-white);
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
/* Hidden by default; `hidden` is removed by JS on open. Animate from a
collapsed state so the panel reads as expanding out of the bar. */
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.stadion-mm-panel[hidden] {
/* Keep it in the layout/animation model rather than display:none, so the
transition can run. JS toggles the attribute; this override is what makes
that safe. */
display: block;
}
/* Hover/focus-within open the panel with no JS at all; the script only adds
aria-expanded, Escape-to-close and touch handling on top. */
.has-stadion-mega:hover > .stadion-mm-panel,
.has-stadion-mega:focus-within > .stadion-mm-panel,
.has-stadion-mega.is-stadion-open > .stadion-mm-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.stadion-mm-panel__inner {
box-sizing: border-box;
max-width: var(--smm-max-w);
margin: 0 auto;
padding: 2.5rem 1.5rem 3rem;
display: grid;
grid-template-columns: repeat(var(--smm-columns), minmax(0, 1fr));
column-gap: var(--smm-column-gap);
row-gap: var(--smm-column-gap);
align-items: stretch;
}
/* ===== COLUMN ===== */
.stadion-mm-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.stadion-mm-col__top {
display: flex;
flex-direction: column;
gap: var(--smm-item-gap);
}
/* margin-top:auto is what pins the bottom group to the foot of the tallest
column, so "see all" links line up across the row. The 50px is padding
rather than margin because margin-top is already spoken for by the auto
pin - padding gives the same visual gap as a guaranteed minimum. */
.stadion-mm-col__bottom {
display: flex;
flex-direction: column;
gap: var(--smm-item-gap);
margin-top: auto;
padding-top: 50px;
}
/* ===== ITEMS ===== */
.stadion-mm-panel .stadion-mm-heading {
margin: 0;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--smm-near-black);
}
.stadion-mm-panel .stadion-mm-heading a {
color: inherit;
text-decoration: none;
}
.stadion-mm-panel .stadion-mm-heading a:hover,
.stadion-mm-panel .stadion-mm-heading a:focus-visible {
color: var(--smm-lime-dark);
}
.stadion-mm-panel ul.stadion-mm-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--smm-item-gap);
}
.stadion-mm-panel ul.stadion-mm-links li {
margin: 0;
padding: 0;
list-style: none;
line-height: inherit;
min-height: 0;
border: 0;
}
/* Astra decorates menu / on hover; the panel's own links handle that. */
.stadion-mm-panel ul.stadion-mm-links li::before,
.stadion-mm-panel ul.stadion-mm-links li::after {
content: none;
}
.stadion-mm-panel a.stadion-mm-link {
display: inline-block;
font-size: 0.9rem;
line-height: 1.4;
color: var(--smm-gray-500);
text-decoration: none;
transition: color 0.15s ease;
}
.stadion-mm-panel a.stadion-mm-link:hover,
.stadion-mm-panel a.stadion-mm-link:focus-visible {
color: var(--smm-near-black);
text-decoration: underline;
}
.stadion-mm-panel .stadion-mm-text {
font-size: 0.85rem;
line-height: 1.6;
color: var(--smm-gray-500);
}
.stadion-mm-panel .stadion-mm-text a {
color: var(--smm-near-black);
}
/* "Se alle ›" */
.stadion-mm-panel a.stadion-mm-seeall {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 700;
color: var(--smm-near-black);
text-decoration: none;
transition: gap 0.15s ease, color 0.15s ease;
}
.stadion-mm-panel a.stadion-mm-seeall:hover,
.stadion-mm-panel a.stadion-mm-seeall:focus-visible {
color: var(--smm-lime-dark);
gap: 0.6rem;
}
.stadion-mm-panel a.stadion-mm-seeall svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
flex-shrink: 0;
}
/* ===== TRIGGER ===== */
.has-stadion-mega {
position: static !important;
}
/* Astra renders its own dropdown arrow off menu-item-has-children; the panel
supplies the affordance, so suppress the sub-menu it would expect. */
.has-stadion-mega > .sub-menu,
.has-stadion-mega > .astra-megamenu {
display: none !important;
}
/* ===== MOBILE ===== */
/* Astra's mobile header uses its own off-canvas menu; a viewport-wide absolute
panel makes no sense there, so fall back to inline flow. */
@media (max-width: 921px) {
.stadion-mm-panel {
position: static;
box-shadow: none;
border-top: 0;
transform: none;
transition: none;
}
.stadion-mm-panel[hidden] {
display: none;
}
.stadion-mm-panel__inner {
grid-template-columns: 1fr;
padding: 1rem 0 1.5rem;
row-gap: 1.5rem;
}
.stadion-mm-col__bottom {
margin-top: 0;
padding-top: 0.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.stadion-mm-panel {
transition: none;
}
}