/* ══════════════════════════════════════════════════════════════════════════ Sidhuvudets rullgardiner får c-dropdowns utseende Sidhuvudet har två menyer som Bricks renderar med helt olika markup: toppraden nav-menu → li.menu-item-has-children > ul.sub-menu huvudraden nav-nested → li.brxe-dropdown > ul.brx-dropdown-content (panelen innehåller en Brokk-meny, så länkarna ligger ett par nivåer längre ned) De såg därför olika ut, och ingen av dem såg ut som c-dropdown — komponenten som startsidans två rullgardiner kör sedan `818de0e`. Den här filen ger båda samma panel- och länkutseende som komponenten. Bricks öppnar och stänger dem fortfarande själv; det som ändras är formen. ── Varför inte återanvända .c-dropdown rakt av ───────────────────────────── Komponentens kontrakt är .c-dropdown > __toggle + __panel > __list, och den markupen kan man inte få ur Bricks nav-element. Klasserna går alltså inte att sätta. Värdena nedan är därför kopierade ur komponenten och adaptern. HÅLL DEM I SYNK. Ändras brokk-dropdown.css eller brokk-dropdown-bricks.css ska motsvarande värde här följa med, annars glider sidhuvudet isär från sidornas rullgardiner igen. Alla mått är skrivna i sajtens rem-idiom (ACSS 62,5 %, 1rem = 10px), samma som adaptern räknat om komponenten till. ── Bricks-inställningarna måste vara borta ──────────────────────────────── Panelernas gamla utseende satt som elementinställningar i sidhuvudsmallen (post 5764) och emitterades som id-regler — `#brxe-hqwvzf { … }`. En id-selektor slår varje klass här. Inställningarna är därför borttagna ur elementdatan av `_project-docs/scripts/strip-header-submenu-styles.php`. Sätter någon tillbaka radie, padding, ram eller skugga på panelerna i byggaren slutar den här filen synas. Det är samma fälla som avsnitt 4.3 i handoffen beskriver. ══════════════════════════════════════════════════════════════════════════ */ /* Tokens ligger på :root, inte på nav-elementen. De började som lokala variabler för sidhuvudets två menyer. Sedan ville megamenyn ha dem (den ligger inuti .brxe-nav-nested och ärvde dem gratis), och därefter marknadsväljaren — som är en Bricks-popup på body-nivå och INTE ligger inuti någon nav. Där slutade arvet fungera, och alternativet hade varit en fjärde kopia av #f4f2ee. På :root delar alla menyytor på sajten exakt en uppsättning värden. Byter du hovertonen här byter den på alla fem menyerna och i väljaren samtidigt. Namnprefixet står kvar för att det redan är refererat från mega-menu.css och region-switcher.css. */ :root { --hdd-panel-bg: #ffffff; --hdd-panel-fg: #14161a; --hdd-link-fg: #14161a; /* Samma värde som komponentens --dd-link-bg-hover. Sajten har en andra, snarlik hoverton — ACSS --base-ultra-light, #f2f2f2 — som menyklassen `nndmko` (brokk-slide_menu) sätter på just de här länkarna. Den överträffas här, så att sidhuvudet och sidornas rullgardiner delar exakt en ton. Ska tonen bytas ska den bytas på båda ställena samtidigt. */ --hdd-link-bg-hover: #f4f2ee; --hdd-accent: #ffcd00; --hdd-focus-ring: #0b57d0; /* 4,5:1 mot vitt och mot #ffcd00 */ /* ── Skalan ──────────────────────────────────────────────────────────── Formen är komponentens, måtten är det inte. En rullgardin i sidhuvudet hänger under en 40px hög menyrad och rymmer fyra till sju korta länkar; sidornas rullgardiner sitter i brödtexten under en egen knapp och rymmer upp till nitton. Komponentens mått gjorde headerpanelerna för tunga. Allt nedan är komponentvärdet gånger ungefär två tredjedelar, utom radavståndet som redan är minimalt. Typsnittsgraden hämtas ett steg ned i ACSS-skalan, --text-s i stället för --text-m (14 mot 15,4px), så att den följer med om skalan ändras. Skuggan är inte bara nedskalad utan också nedtonad — en 48px djup skugga under en 24px hög panelkant blir en grå platta, inte en skugga. */ --hdd-panel-padding: 1.6rem; --hdd-link-padding: 0.8rem 1.2rem; --hdd-row-gap: 0.2rem; --hdd-link-font-size: var(--text-s); --hdd-panel-min: 20rem; --hdd-panel-radius: 0.8rem; --hdd-link-radius: 0.4rem; --hdd-shadow: 0 1.6rem 3.2rem -0.8rem rgba(20, 22, 26, 0.18), 0 0.2rem 0.8rem rgba(20, 22, 26, 0.06); --hdd-duration: 180ms; --hdd-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Panelen ─────────────────────────────────────────────────────────────── Megamenyn (Products) undantas: den har en egen layout ur mega-menu.css och ska inte få vare sig panelpadding eller den här bredden. */ .brxe-nav-menu .bricks-nav-menu .sub-menu, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content { box-sizing: border-box; width: max-content; min-width: max(100%, var(--hdd-panel-min)); max-width: min(40rem, calc(100vw - 3.2rem)); padding: var(--hdd-panel-padding); border: 0; border-radius: var(--hdd-panel-radius); background: var(--hdd-panel-bg); color: var(--hdd-panel-fg); box-shadow: var(--hdd-shadow); } /* nav-nested renderar panelen som flex-kolumn med ACSS `gap: var(--content-gap)` på .brxe-div. Radavståndet ska vara komponentens, inte innehållsgapets. */ .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content { gap: var(--hdd-row-gap); } /* ── Länkarna ───────────────────────────────────────────────────────────── Två markupvarianter, samma utseende. Den nestade menyns länkar ligger i en Brokk-meny (elements/brokk-menu.php) med den globala klassen brokk-slide_menu, vars regler (`.brokk-slide_menu .menu-item > .brokk-menu__row`, 0-4-0) måste överträffas — därav den längre selektorn. Klassen lägger hoverbakgrund, rundning och understrykning (aktuell sida) på raden runt länken. Raden nollställs här, annars syns radens #f2f2f2 i länkens rundade hörn och understrykningen går inte att ta bort från länken. */ .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .menu-item > .brokk-menu__row, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .menu-item > .brokk-menu__row:hover { background: none; border-radius: 0; text-decoration: none; } .brxe-nav-menu .bricks-nav-menu .sub-menu a, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .menu-item .brokk-menu__link { display: block; padding: var(--hdd-link-padding); border-radius: var(--hdd-link-radius); color: var(--hdd-link-fg); font-weight: 400; font-size: var(--hdd-link-font-size); line-height: 1.35; text-decoration: none; text-wrap: pretty; transition: background-color 120ms var(--hdd-ease); } .brxe-nav-menu .bricks-nav-menu .sub-menu a:hover, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .menu-item .brokk-menu__link:hover { background: var(--hdd-link-bg-hover); color: var(--hdd-link-fg); text-decoration: none; } .brxe-nav-menu .bricks-nav-menu .sub-menu a:focus-visible, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .menu-item .brokk-menu__link:focus-visible { outline: 3px solid var(--hdd-focus-ring); outline-offset: -1px; background: var(--hdd-link-bg-hover); } /* Aktuell sida markeras som i komponenten: gul platta, fet text — inte understrykning, som nav-menu-elementet gjorde. */ .brxe-nav-menu .bricks-nav-menu .sub-menu .current-menu-item > a, .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brokk-menu .current-menu-item > .brokk-menu__row > .brokk-menu__link { background: var(--hdd-accent); font-weight: 600; } /* ── Chevronen ──────────────────────────────────────────────────────────── Komponentens enda visuella återkoppling på öppet läge är att pilen vänder. Toppmenyn saknade det helt. Rotationen skrivs som en 180-graders vridning kring X, samma som huvudmenyns tidigare xslidemenu-inställning, så att en pil som redan står rätt inte vänds två gånger. */ .brxe-nav-menu .brx-submenu-toggle > button > svg, .brxe-nav-nested .brx-submenu-toggle > button > svg { transition: transform var(--hdd-duration) var(--hdd-ease); } .brxe-nav-menu .brx-submenu-toggle > button[aria-expanded="true"] > svg, .brxe-nav-nested .brx-submenu-toggle > button[aria-expanded="true"] > svg { transform: rotate(180deg); } /* Toppradens chevron är ikonsetets Chevron (Bricks menuIcon). Filen bär width/height 24; toppradens text är liten, så 16 px och 16-pixelslinjen. */ .brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle .menu-item-icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.75; } @media (prefers-reduced-motion: reduce) { .brxe-nav-menu .brx-submenu-toggle > button > svg, .brxe-nav-nested .brx-submenu-toggle > button > svg { transition-duration: 1ms; } } /* ── Panelernas rörelse ─────────────────────────────────────────────────── Sidhuvudets fem menypaneler öppnades med fyra olika rörelser: About med Bricks `transition: all 0.1s` (--bricks-transition), nav-nested-panelerna med 200ms ease, och marknadsväljaren med --hdd-tokens. Nu delar alla samma tid och kurva som chevronerna redan hade, och bara de egenskaper som faktiskt ändras — `all` animerade även Bricks positionering. Megamenyn ingår i tiden men har egen glidning (mega-menu.css). */ .brxe-nav-menu .bricks-nav-menu .sub-menu, .brxe-nav-nested .brxe-dropdown > .brx-dropdown-content { transition-property: opacity, visibility, transform; transition-duration: var(--hdd-duration); transition-timing-function: var(--hdd-ease); } /* Glidningen: Bricks öppnar panelerna med translateY(10px) (id-regler i sidhuvudsmallen) och stängt läge hade ingen transform — 10 px glidning. Stängt läge ligger nu 0.4rem ovanför öppet, som marknadsväljaren. Slutpositionen är orörd. Ändras 10px i byggaren ska värdet här följa med. #brx-header: 10px-förskjutningen är sidhuvudets egen. En rullgardin i en annan meny har ingen, och hade då glidit 6 px uppåt när den öppnades. */ @media (prefers-reduced-motion: no-preference) { #brx-header .brxe-nav-menu .bricks-nav-menu > li:not(.open) > .sub-menu, #brx-header .brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu):not(.open) > .brx-dropdown-content { transform: translateY(calc(10px - 0.4rem)); } } @media (prefers-reduced-motion: reduce) { .brxe-nav-menu .bricks-nav-menu .sub-menu, .brxe-nav-nested .brxe-dropdown > .brx-dropdown-content { transition-property: opacity, visibility; } } /* ── Tonad sida bakom öppen megameny (Anders 2026-10-02/05) ────────────── När megamenyn (Products, .brx-has-megamenu) är öppen tonas sidinnehållet och foten ner. Övriga, mindre dropdowns tonar inte. Två tidigare försök, båda fel: - body::after över hela sidan förutsatte att headern låg ovanför i stapelordningen; hos Anders hamnade headern under och dimmades. - filter: brightness() på #brx-content/#brx-footer gör dem till referens- ram för position: fixed. Den gamla offcanvasen i foten (fixed, utanför högerkanten) hamnade i flödet och gav stor horisontell overflow. Nu: en slöja (::after) inuti innehållet resp. foten. position: relative ger bara referensram åt absolut positionerade barn, inte åt fixed. Slöjan har inget z-index-sammanhang runt sig, så headern (z 1000) ligger alltid över. pointer-events: none — klick utanför stänger menyn som förut. Bara desktop. */ @media (min-width: 992px) { #brx-content, #brx-footer { position: relative; } #brx-content::after, #brx-footer::after { content: ""; position: absolute; inset: 0; z-index: 900; background: var(--black-trans-40); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } body:has(#brx-header .brxe-nav-nested .brxe-dropdown.brx-has-megamenu.open) :is(#brx-content, #brx-footer)::after { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; } } @media (prefers-reduced-motion: reduce) { #brx-content::after, #brx-footer::after { transition: none; } }