/* * [alle_producten_menu] — megamenu trigger + full-width panel. * Namespaced onder .rodun-mega. Kleuren via :root --rodun-* tokens. */ .rodun-mega { --rm-primary: var(--rodun-primary); --rm-accent: var(--rodun-accent); --rm-fg: var(--rodun-fg); --rm-muted: var(--rodun-muted); --rm-border: var(--rodun-border); --rm-bg: var(--rodun-bg); --rm-bg-soft: var(--rodun-bg-soft); --rodun-site-max-width: 1200px; --rodun-site-padding-x: 30px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: var(--rm-fg); line-height: 1.5; width: 100%; box-sizing: border-box; } .rodun-mega *, .rodun-mega *::before, .rodun-mega *::after { box-sizing: border-box; } .rodun-mega--sticky { position: sticky; top: 0; z-index: 40; background: var(--rm-bg); } /* * Embedded in [rodun_topheader]: het panel wordt via JS naar verhuisd * om uit Avada's stacking-context-trap (transform/filter op ancestors) te * ontsnappen. Hier alleen nog wat lichte styling op de wrapper voor focus * states — de echte positionering van het portaled panel staat hieronder. */ .rodun-mega.rodun-mega--in-topheader { position: relative; z-index: 50; } /* * Portaled panel — bevindt zich als direct child van , niet meer * in de .rodun-mega DOM. Positie (top/left/right/width) wordt door JS * inline gezet op basis van de trigger's getBoundingClientRect(). * * Z-index 9000 zit net onder de topheader-bar (9999), boven alle Avada- * content. Achtergrond expliciet #fff zodat content er niet doorheen * lekt als CSS-vars onverwacht falen. * * Specificity-trick: chained class .rodun-mega__panel.rodun-mega__panel--portaled * = (0,2,0), wint van de basis .rodun-mega__panel (0,1,0). Source-order * regelt de rest — deze regel staat ná de basisregels. */ .rodun-mega__panel.rodun-mega__panel--portaled { /* Lokale --rm-* aliassen — staan normaal op .rodun-mega, maar het * portaled panel is daar geen descendant meer van, dus opnieuw zetten * (zelfde mapping naar globale --rodun-* tokens uit style.css). Zonder * deze lijn faalt o.a. .rodun-mega__cat.is-active (witte tekst op * transparante bg) en de hover-state op categorieën. */ --rm-primary: var(--rodun-primary); --rm-accent: var(--rodun-accent); --rm-fg: var(--rodun-fg); --rm-muted: var(--rodun-muted); --rm-border: var(--rodun-border); --rm-bg: var(--rodun-bg); --rm-bg-soft: var(--rodun-bg-soft); /* Fallback layout-vars voor het geval JS de wrapper-vars niet kopieert * (oudere browsers of inline-style-parse fout). De JS zet deze normaal * gesproken expliciet via setProperty(). */ --rodun-site-max-width: 1200px; --rodun-site-padding-x: 30px; position: fixed; left: 0; right: 0; width: 100%; transform: translateY(-8px); z-index: 9000; background: #ffffff; color: var(--rm-fg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; line-height: 1.5; box-sizing: border-box; } .rodun-mega__panel.rodun-mega__panel--portaled.is-open { transform: translateY(0); } /* Box-sizing voor inner + grid-cells erft niet wanneer panel buiten .rodun-mega * staat (de basisregel zit op `.rodun-mega *`). Opnieuw afdwingen. */ .rodun-mega__panel--portaled, .rodun-mega__panel--portaled *, .rodun-mega__panel--portaled *::before, .rodun-mega__panel--portaled *::after { box-sizing: border-box; } /* ============================================================ * Trigger row * ============================================================ */ .rodun-mega__row { position: relative; height: 64px; display: flex; align-items: center; } .rodun-mega__site { width: 100%; max-width: var(--rodun-site-max-width); margin-left: auto; margin-right: auto; padding-left: var(--rodun-site-padding-x); padding-right: var(--rodun-site-padding-x); box-sizing: border-box; display: flex; align-items: center; height: 100%; } .rodun-mega__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--rm-primary); color: #ffffff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.05em; border: 0; border-radius: 2px; cursor: pointer; transition: background 0.2s ease; } .rodun-mega__trigger:hover, .rodun-mega__trigger:focus-visible { background: color-mix(in srgb, var(--rm-primary) 90%, transparent); outline: none; } .rodun-mega__trigger:focus-visible { box-shadow: 0 0 0 2px var(--rm-accent); } .rodun-mega__trigger-icon, .rodun-mega__chevron { display: inline-flex; flex: 0 0 auto; } .rodun-mega__trigger-icon svg { width: 20px; height: 20px; } .rodun-mega__chevron svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .rodun-mega__trigger[aria-expanded="true"] .rodun-mega__chevron { transform: rotate(180deg); } /* ============================================================ * Panel * ============================================================ */ .rodun-mega__panel { position: absolute; left: 50%; top: 100%; width: 100vw; transform: translateX(-50%) translateY(-8px); background: var(--rm-bg); border-bottom: 1px solid var(--rm-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); z-index: 50; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .rodun-mega__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .rodun-mega__panel[hidden]:not(.is-open) { display: block; } .rodun-mega__inner { max-width: var(--rodun-site-max-width); margin: 0 auto; padding: 32px var(--rodun-site-padding-x); display: grid; /* Categorieën breder — lange namen zoals Warmteoverdrachtvloeistoffen */ grid-template-columns: minmax(280px, 3.5fr) minmax(160px, 2fr) minmax(0, 6.5fr); gap: 24px; min-width: 0; } .rodun-mega__col--cats { min-width: 0; } .rodun-mega__col { min-width: 0; } .rodun-mega__col--subs, .rodun-mega__col--products { border-left: 1px solid var(--rm-border); padding-left: 24px; } .rodun-mega__col--products { overflow: hidden; } .rodun-mega__products { min-width: 0; width: 100%; overflow: hidden; } .rodun-mega__heading { margin: 0 0 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rm-fg); line-height: 1.2; } .rodun-mega__heading--row { margin-bottom: 16px; } .rodun-mega__list { list-style: none; margin: 0; padding: 0; } .rodun-mega__empty { font-style: italic; color: var(--rm-muted); font-size: 14px; padding: 8px 12px; margin: 0; } /* --- Kolom 1: categorieën --- */ .rodun-mega__cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.35; color: inherit; text-decoration: none; border-radius: 2px; transition: background 0.15s ease, color 0.15s ease; } .rodun-mega__cat > span:first-child { flex: 1 1 auto; min-width: 0; } .rodun-mega__cat-chev { display: inline-flex; flex-shrink: 0; color: var(--rm-muted); } .rodun-mega__cat:hover, .rodun-mega__cat:focus-visible { background: var(--rm-bg-soft); text-decoration: none; color: inherit; outline: none; } .rodun-mega__cat.is-active { background: var(--rm-primary); color: #ffffff; } .rodun-mega__cat.is-active .rodun-mega__cat-chev { color: #ffffff; } .rodun-mega__cat-chev svg { width: 16px; height: 16px; } /* --- Kolom 2: subcategorieën --- */ .rodun-mega__sub { display: block; padding: 8px 12px; font-size: 14px; color: var(--rm-muted); text-decoration: none; border-radius: 2px; transition: background 0.15s ease, color 0.15s ease; } .rodun-mega__sub:hover, .rodun-mega__sub:focus-visible { background: var(--rm-bg-soft); color: var(--rm-fg); text-decoration: none; outline: none; } .rodun-mega__sub.is-active { background: color-mix(in srgb, var(--rm-primary) 8%, transparent); color: var(--rm-primary); } /* --- Loading state --- */ .rodun-mega__col.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; } /* ============================================================ * Embla carousel (kolom 3) * * Slide-breedte = % van .rodun-embla (viewport-breedte), niet van * de brede scroll-container. Spacing via padding + negatieve margin. * ============================================================ */ .rodun-embla { --slide-size: 25%; --slide-spacing: 12px; width: 100%; min-width: 0; } .rodun-embla__viewport { overflow: hidden; width: 100%; } .rodun-embla__container { display: flex; margin-left: calc(var(--slide-spacing) * -1); backface-visibility: hidden; touch-action: pan-y pinch-zoom; } .rodun-embla__slide { flex: 0 0 var(--slide-size); min-width: 0; padding-left: var(--slide-spacing); box-sizing: border-box; } .rodun-embla__controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; } .rodun-embla__controls[hidden] { display: none !important; } .rodun-embla__buttons { display: flex; gap: 8px; flex: 0 0 auto; } .rodun-embla__prev, .rodun-embla__next { width: 36px; height: 36px; padding: 0; border: 1px solid var(--rm-border); border-radius: 9999px; background: var(--rm-bg); color: var(--rm-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .rodun-embla__prev:hover:not(:disabled), .rodun-embla__next:hover:not(:disabled), .rodun-embla__prev:focus-visible, .rodun-embla__next:focus-visible { background: var(--rm-bg-soft); outline: none; } .rodun-embla__prev:disabled, .rodun-embla__next:disabled { opacity: 0.3; cursor: not-allowed; } .rodun-embla__progress { flex: 1 1 auto; height: 4px; background: var(--rm-bg-soft); border-radius: 9999px; overflow: hidden; } .rodun-embla__bar { height: 100%; width: 25%; margin-left: 0; background: var(--rm-primary); border-radius: 9999px; transition: width 0.2s ease, margin-left 0.2s ease; } .rodun-embla__count { flex: 0 0 auto; font-size: 12px; color: var(--rm-muted); white-space: nowrap; } /* --- Productkaart --- */ .rodun-prodcard { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; min-width: 0; max-width: 100%; padding: 12px; border: 1px solid var(--rm-border); border-radius: 2px; text-decoration: none; color: inherit; height: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .rodun-prodcard:hover, .rodun-prodcard:focus-visible { border-color: color-mix(in srgb, var(--rm-primary) 50%, transparent); text-decoration: none; color: inherit; outline: none; } .rodun-prodcard__image { position: relative; background: var(--rm-bg-soft); border-radius: 2px; padding: 12px; margin-bottom: 0; width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; min-height: 96px; box-sizing: border-box; } .rodun-prodcard__image img { height: 80px; width: auto; max-width: 100%; object-fit: contain; transition: transform 0.3s ease; } .rodun-prodcard:hover .rodun-prodcard__image img, .rodun-prodcard:focus-visible .rodun-prodcard__image img { transform: scale(1.05); } .rodun-prodcard__badge { position: absolute; top: -4px; left: -4px; width: 16px; height: 16px; background: var(--rm-primary); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--rm-accent); } .rodun-prodcard__badge svg { display: block; } .rodun-mega h4.rodun-prodcard__title, .rodun-mega .rodun-prodcard__title, .rodun-mega__panel--portaled h4.rodun-prodcard__title, .rodun-mega__panel--portaled .rodun-prodcard__title { font-family: inherit; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--rm-fg) !important; text-transform: none; letter-spacing: normal; margin: 10px 0 0 !important; padding: 0 !important; width: 100%; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; transition: color 0.2s ease; } .rodun-prodcard:hover .rodun-prodcard__title, .rodun-prodcard:focus-visible .rodun-prodcard__title { color: var(--rm-primary) !important; } .rodun-prodcard__cta { font-size: 12px; color: var(--rm-muted); margin: 4px 0 0; } /* --- Bekijk alle link --- */ .rodun-mega__view-all { display: flex; justify-content: flex-end; margin-top: 12px; } .rodun-mega__view-all a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--rm-primary); text-decoration: none; transition: color 0.15s ease; } .rodun-mega__view-all a:hover, .rodun-mega__view-all a:focus-visible { color: color-mix(in srgb, var(--rm-primary) 80%, var(--rm-accent)); text-decoration: none; outline: none; } .rodun-mega__view-all svg { width: 16px; height: 16px; } /* ============================================================ * Responsive — mobiel accordion * ============================================================ */ @media (max-width: 1023px) { .rodun-mega__inner { grid-template-columns: 1fr; gap: 0; padding: 24px 16px; } .rodun-mega__col--subs, .rodun-mega__col--products { border-left: 0; padding-left: 0; border-top: 1px solid var(--rm-border); padding-top: 24px; margin-top: 24px; } .rodun-embla { --slide-size: 50%; --slide-spacing: 12px; } .rodun-embla__controls { display: none !important; } } @media (max-width: 639px) { .rodun-embla { --slide-size: 85%; } .rodun-mega__panel { max-height: calc(100vh - 64px); overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { .rodun-mega__panel, .rodun-mega__chevron svg, .rodun-prodcard__image img, .rodun-embla__bar { transition: none !important; } }