/** * YK CMT Header — Services / cmt DNA mega menu (desktop panel + mobile accordion) * * Ported from yk_overrides/css/yk-wet-header.css. Same three principles: * 1. Layered ON TOP of the base component (assets/css/yk-ecommerce-mega-menu.css), * enqueued with that file as a dependency so these rules cascade after it. * 2. Every rule is scoped — either under .yk-cmt-header, or under a * cmt-specific class of its own (see the PORTAL note below) — so the generic * .yk-ecommerce-mega-menu component used elsewhere is never affected. * 3. Colours/fonts/spacing/radii come ONLY from cmt.json presets * (--wp--preset--* / --wp--custom--*). The --yk-cmt-* / --yk-em-* custom * props below are local plumbing that *resolve to* those preset tokens. * (These presets only exist when the "cmt" Global Styles variation is active.) * * --------------------------------------------------------------------------- * PORTAL — WHY SOME RULES ARE *NOT* SCOPED UNDER .yk-cmt-header * The header template applies a scroll animation to the header element itself, * which makes the header a stacking context AND the containing block for * position:fixed descendants. The mobile slideout is therefore trapped behind * the main content. yk-cmt-header.js moves the slideout + its overlay to * at load ("portal", the same trick modal libraries use) and tags both * with .yk-cmt-portaled. * * Consequence: those two nodes are no longer descendants of .yk-cmt-header, so * (a) custom properties defined on .yk-cmt-header no longer INHERIT into them * -> the token block below also matches .yk-cmt-portaled; * (b) any rule written as ".yk-cmt-header " would stop matching * -> panel rules are scoped by the panel's own .yk-cmt-mobile class. * If the header animation is ever moved onto an inner wrapper (the structurally * correct fix), the portal can be deleted and both of these can go back to * plain .yk-cmt-header scoping. * --------------------------------------------------------------------------- * * Multi-pair ready: the desktop panel is matched to its trigger by key * (.yk-cmt-header__mega-trigger--KEY -> #yk-cmt-panel-KEY). Adding a third * dropdown later is markup + CSS only; no JS changes. */ /* ============================================================ TOKEN PLUMBING The only block you need to edit for most design changes. Matches .yk-cmt-portaled as well, so the moved slideout keeps its tokens. ============================================================ */ .yk-cmt-header, .yk-cmt-portaled { /* Remap the inherited mobile-theme custom props (defined on .yk-ecommerce-mega-menu) to cmt tokens, so the reused mobile slideout structure themes itself to cmt with no rule duplication. NOTE: --yk-em-dark-bg is shared with the collapsed mobile top bar, so the bar takes the same primary colour — which is what cmt's design wants. */ --yk-em-dark-bg: var(--wp--preset--color--primary); --yk-em-dark-fg: var(--wp--preset--color--white); --yk-em-dark-muted: var(--wp--preset--color--primary-dark); --yk-em-dark-border: color-mix( in srgb, var(--wp--preset--color--white) 10%, transparent ); /* cmt desktop panel local props (resolve to cmt.json tokens). */ --yk-cmt-panel-bg: var(--wp--preset--color--primary-dark); --yk-cmt-heading: var(--wp--preset--color--white); --yk-cmt-item: var(--wp--preset--color--white); --yk-cmt-accent: var(--wp--preset--color--accent); /* Inner grid width. The panel itself is full-bleed; this centres the content on the same measure as the rest of the site. */ --yk-cmt-panel-max: var(--wp--style--global--wide-size, 1280px); /* Hairline used by the mobile dividers (cmt uses white at ~10%). */ --yk-cmt-hairline: color-mix( in srgb, var(--wp--preset--color--white) 10%, transparent ); } /* ============================================================ MEGA MENU TRIGGER ============================================================ */ .yk-cmt-header__mega-trigger > .wp-block-navigation-item__content { cursor: pointer; } .yk-cmt-header__mega-trigger > .wp-block-navigation-item__content::after { content: "+"; margin-left: 0.4em; color: var(--yk-cmt-accent); font-weight: 400; display: inline-block; transition: transform 0.2s ease; transform-origin: center; } /* The JS sets aria-expanded on this same link, so the state comes for free. */ .yk-cmt-header__mega-trigger > .wp-block-navigation-item__content[aria-expanded="true"]::after { transform: rotate(45deg); } .yk-cmt-header__mega-trigger > .wp-block-navigation-item__content:focus-visible, .yk-cmt-header .yk-cmt-panel a:focus-visible { outline: 2px solid var(--yk-cmt-accent); outline-offset: 3px; } /* ============================================================ DESKTOP — MEGA PANEL Reuses the base .__mega-panel hidden/transition/.is-open behaviour. The base is already full-bleed (left:0; right:0) — unlike WET we KEEP that, so there is no position math and no caret. NOTE: these panels are position:absolute and stay INSIDE the header, so they are not portaled. If the desktop panel is also hidden behind the main content, the header's stacking context is the cause — raise the header (see the commented rule at the bottom of this file) rather than moving them, because an absolute panel moved to loses its positioning entirely. ============================================================ */ .yk-cmt-header .yk-ecommerce-mega-menu__mega-panel.yk-cmt-panel { background: var(--yk-cmt-panel-bg); border: 0; border-radius: 0; box-shadow: var(--wp--preset--shadow--natural, none); /* beat the base's own !important padding / margin-top */ padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important; margin-top: 0 !important; /* flush under the bar — no caret to clear */ } /* Centre the content without constraining the coloured band. */ .yk-cmt-header .yk-cmt-panel__inner { max-width: var(--yk-cmt-panel-max); margin-inline: auto; } /* Column grid (override the WP columns flex layout). Default = 3 columns (Services). */ .yk-cmt-header .yk-cmt-panel__cols.wp-block-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); margin: 0; } .yk-cmt-header .yk-cmt-panel__col.wp-block-column { min-width: 0; } /* cmt DNA panel — 2 columns, because it is one long link list rather than three topic groups. Scoped by id so the Services grid is unaffected. */ #yk-cmt-panel-dna .yk-cmt-panel__cols.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Column headings — uppercase, tracked out */ .yk-cmt-header .yk-cmt-panel__heading { color: var(--yk-cmt-heading); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; line-height: var(--wp--custom--line-height--heading, 1.1); margin: 0 0 var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); border-bottom: 1px solid var(--yk-cmt-hairline); } /* Sub-items */ .yk-cmt-header .yk-cmt-panel__list.wp-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .yk-cmt-header .yk-cmt-panel__list a { font-family: var(--wp--preset--font-family--body); color: var(--yk-cmt-item); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; transition: color 0.2s ease-in-out; } .yk-cmt-header .yk-cmt-panel__list a:hover { color: var(--yk-cmt-accent); text-decoration: none; } /* Editor preview — render the panel in normal flow so it can be edited. (The base component already makes .__mega-panel visible in the editor.) The portal does not run in the editor, so nothing else changes here. */ .editor-styles-wrapper .yk-cmt-panel { position: static !important; width: 100%; max-width: none; } /* ============================================================ MOBILE TOP BAR (stays inside the header) ============================================================ */ .yk-cmt-header .yk-ecommerce-mega-menu__mobile-logo-link img { display: block; height: 40px; width: auto; } /* ============================================================ MOBILE — CMT ACCORDION (inside the reused yk-slideout panel) Opening/closing of the slideout itself stays with yk-slideout.js. Scoped by .yk-cmt-mobile (the panel's own class), NOT by an ancestor — the panel is portaled to , so an ancestor selector would stop matching. See the PORTAL note at the top of this file. ============================================================ */ .yk-cmt-mobile.yk-ecommerce-mega-menu__mobile-panel { width: 100vw !important; } .yk-cmt-mobile .yk-ecommerce-mega-menu__logo img { display: block; height: 40px; width: auto; } .yk-cmt-mobile__nav { display: flex; flex-direction: column; padding: 3.5rem 0 1.5rem; /* top clears the absolute close button */ } /* --- Rows ------------------------------------------------------------ */ .yk-cmt-mobile__item { border-bottom: 1px solid var(--yk-cmt-hairline); } .yk-cmt-mobile__row-wrap { display: flex; align-items: stretch; justify-content: space-between; } .yk-cmt-mobile__row { flex: 1 1 auto; padding: 0.875rem var(--wp--preset--spacing--20); border: 0; background: none; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: var(--wp--custom--line-height--heading, 1.1); letter-spacing: 0.02em; text-transform: uppercase; text-align: left; text-decoration: none; color: var(--wp--preset--color--white); cursor: pointer; } .yk-cmt-mobile__row:hover, .yk-cmt-mobile__row:focus-visible { color: var(--yk-cmt-accent); } /* Current page, e.g. WordPress's current-menu-item */ .yk-cmt-mobile__row--active { color: var(--yk-cmt-accent); } /* Submenu toggle — a separate button so the parent label stays a real link. The base accordion JS binds to [data-yk-accordion-toggle] and reads aria-controls, so a sibling button works with no JS change. */ .yk-cmt-mobile__toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3.25rem; /* keeps the tap target ≥ 44px */ border: 0; background: none; color: var(--wp--preset--color--white); cursor: pointer; } .yk-cmt-mobile__toggle:hover, .yk-cmt-mobile__toggle:focus-visible { color: var(--yk-cmt-accent); } /* "+" / "–" drawn in CSS, driven by the aria-expanded the JS already sets. */ .yk-cmt-mobile__toggle::after { content: "+"; font-family: var(--wp--preset--font-family--body); font-size: 1.25rem; font-weight: 400; line-height: 1; } .yk-cmt-mobile__toggle[aria-expanded="true"]::after { content: "–"; } .yk-cmt-mobile__row:focus-visible, .yk-cmt-mobile__toggle:focus-visible, .yk-cmt-mobile__sub-link:focus-visible { outline: 2px solid var(--yk-cmt-accent); outline-offset: 2px; } /* --- Submenu --------------------------------------------------------- */ .yk-cmt-mobile__sub { display: flex; flex-direction: column; padding: 0.25rem 0 0.75rem; background: var(--wp--preset--color--primary-dark); } .yk-cmt-mobile__sub[hidden] { display: none; } .yk-cmt-mobile__sub-label { margin: 0.75rem 0 0.25rem; padding-inline: calc(var(--wp--preset--spacing--20) * 2) var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent); } .yk-cmt-mobile__sub-link { padding: 0.65rem var(--wp--preset--spacing--20) 0.65rem calc(var(--wp--preset--spacing--20) * 2); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--white); } .yk-cmt-mobile__sub-link:hover, .yk-cmt-mobile__sub-link:focus-visible { color: var(--yk-cmt-accent); } /* --- CTA (Kontakt) ---------------------------------------------------- */ .yk-cmt-mobile__cta { margin: 1.5rem var(--wp--preset--spacing--20) 0; display: block; padding: 0.75rem 1.5rem; background: var(--yk-cmt-accent); color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--body); font-weight: 700; text-transform: uppercase; text-align: center; text-decoration: none; border-radius: var(--wp--custom--radius--md, 0px); } .yk-cmt-mobile__cta:hover, .yk-cmt-mobile__cta:focus-visible { filter: brightness(0.92); } /* ============================================================ OPTIONAL — DESKTOP PANEL STACKING Only needed if the DESKTOP mega panel is also hidden behind the main content. Uncomment and raise the value until it clears. This does nothing if the header itself is transformed by the scroll animation; in that case the animation has to move onto an inner wrapper. ============================================================ */ /* .yk-cmt-header { position: relative; z-index: 100; } */ /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .yk-cmt-header__mega-trigger > .wp-block-navigation-item__content::after, .yk-cmt-header .yk-cmt-panel__list a { transition-duration: 1ms; } } @media (max-width: 1049px) { .yk-cmt-header .yk-ecommerce-mega-menu__mobile-header { height: 90px; background-color: #5d5179; padding-left: 16px; padding-right: 16px; } .yk-ecommerce-mega-menu__mobile-logo-link img { width: 48px; height: auto; } .yk-ecommerce-mega-menu__mobile-icons { gap: 0; } .yk-ecommerce-mega-menu__hamburger { width: 32px; height: 32px; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 24px 2px; background-repeat: no-repeat; background-position: center 7px, center 15px, center 23px; } .yk-ecommerce-mega-menu__hamburger svg { display: none; } } @media (max-width: 1049px) { /* ---- Header bar ---- */ .yk-cmt-header .yk-ecommerce-mega-menu__mobile-header { height: 90px; background-color: #5d5179; padding-left: 16px; padding-right: 16px; } .yk-ecommerce-mega-menu__mobile-logo-link img { width: 48px; height: auto; } .yk-ecommerce-mega-menu__mobile-icons { gap: 0; } /* ---- Hamburger → X morph ---- */ .yk-ecommerce-mega-menu__hamburger { position: relative; width: 32px; height: 32px; background-image: linear-gradient(#fff, #fff); background-size: 24px 2px; background-repeat: no-repeat; background-position: center 15px; } .yk-ecommerce-mega-menu__hamburger svg { display: none; } .yk-ecommerce-mega-menu__hamburger::before, .yk-ecommerce-mega-menu__hamburger::after { content: ""; position: absolute; left: 4px; width: 24px; height: 2px; background: #fff; transition: top 0.3s ease, transform 0.3s ease; } .yk-ecommerce-mega-menu__hamburger::before { top: 7px; } .yk-ecommerce-mega-menu__hamburger::after { top: 23px; } body.yk-slideout-lock .yk-ecommerce-mega-menu__hamburger { background-image: none; } body.yk-slideout-lock .yk-ecommerce-mega-menu__hamburger::before { top: 15px; transform: rotate(45deg); } body.yk-slideout-lock .yk-ecommerce-mega-menu__hamburger::after { top: 15px; transform: rotate(-45deg); } /* ---- Drawer ---- */ .yk-cmt-mobile.yk-ecommerce-mega-menu__mobile-panel { top: 90px !important; height: calc(100dvh - 90px) !important; max-height: calc(100dvh - 90px); overflow-y: auto; } .yk-slideout-overlay { top: 90px !important; height: calc(100dvh - 90px) !important; } .yk-cmt-mobile .yk-slideout__close { display: none !important; } .yk-cmt-mobile__nav { padding: 20.7px 0 0 !important; } .yk-cmt-mobile__item { border-bottom: 0 !important; } .yk-cmt-mobile__toggle { display: none !important; } .yk-cmt-mobile__row { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 1.6px !important; padding: 12px 16px 0 33.12px !important; color: #fff !important; } .yk-cmt-mobile__sub { display: flex !important; flex-direction: column; padding: 16px 16px 16px 32px !important; gap: 0 !important; } .yk-cmt-mobile__sub-link { font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 1.6px !important; padding: 12px 16px !important; color: #fff !important; } .yk-cmt-mobile__cta { align-self: flex-start; display: inline-block !important; background: #b3b470 !important; color: #fff !important; font-size: 16px !important; line-height: 24px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 1.6px !important; padding: 12px 16px !important; margin: 64px 0 24px 32px !important; border-radius: 5px !important; width: auto !important; } } /* Mega-Menu Dropdown: Abstände & Grössen wie cmt.ch */ @media (min-width: 900px) { .yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { top: calc(100% + 32px) !important; /* Panel bündig unter dem Header */ gap: 0.5rem !important; /* 8px statt 40px */ padding: 3.5rem 2rem !important; /* 56px / 32px */ } .yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item { display: flex !important; align-items: center !important; justify-content: center !important; height: 5rem !important; /* 80px Zeilenhöhe */ margin: 0 !important; } .yk-ecommerce-mega-menu .yk-ecommerce-mega-menu__nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding-top: 0.35rem !important; /* Text exakt vertikal zentriert */ } }