/* ================================================================== Menú hamburguesa — shortcode [blanch_menu] ================================================================== */ .sb-menu{ /* Els números de l'aspecte. Tocar-los aquí. */ --sb-menu-fons: #F2F1F4; --sb-menu-text: #1A1A1A; --sb-menu-mida: clamp(2rem, 7vw, 5rem); /* Geometria de la icona, calcada de hamburguer.svg: 33 × 14, dues ratlles d'1 px separades 13. Es dibuixa amb CSS i no amb el fitxer perquè cada ratlla s'ha de poder girar per sola i formar la creu. */ --sb-icona-ample: 33px; --sb-icona-alt: 14px; --sb-menu-z: 9400; display: inline-flex; /* El conjunt crea el seu propi context d'apilament. Dins seu, el botó va per damunt de la capa, i així la creu de tancar es veu i es pot clicar sense dependre de quin z-index tingui la capçalera que l'aculli. */ position: relative; z-index: var(--sb-menu-z); /* Empeny la hamburguesa a la dreta si el pare directe és flexible. */ margin-inline-start: auto; } /* Dins d'Elementor no ho és: entre el contenidor flexible i el menú hi ha l'embolcall del widget, que és un bloc. L'element flexible de debò és aquell embolcall, i per tant el marge automàtic li toca a ell. */ .elementor-element:has( > .elementor-shortcode > .sb-menu ){ margin-inline-start: auto; } /* ---- El botó, que fa d'interruptor ---- La classe del pare va al selector a propòsit: els estils de botó del kit d'Elementor li posaven fons negre i lletra blanca, i amb una sola classe guanyaven ells. El resultat era un rectangle negre en comptes de la icona. */ .sb-menu .sb-menu__boto, .sb-menu .sb-menu__boto:hover, .sb-menu .sb-menu__boto:focus, .sb-menu .sb-menu__boto:active{ position: relative; z-index: 2; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; cursor: pointer; color: inherit; line-height: 0; } .sb-menu__icona{ position: relative; display: block; width: var(--sb-icona-ample); height: var(--sb-icona-alt); } .sb-menu__ratlla{ position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .sb-menu__ratlla--dalt{ top: 0; } .sb-menu__ratlla--baix{ bottom: 0; } /* Obert: les dues ratlles es troben al mig i giren fins a creuar-se. */ .sb-menu.is-obert .sb-menu__ratlla--dalt{ transform: translateY(calc(var(--sb-icona-alt) / 2 - .5px)) rotate(45deg); } .sb-menu.is-obert .sb-menu__ratlla--baix{ transform: translateY(calc(var(--sb-icona-alt) / -2 + .5px)) rotate(-45deg); } /* Sobre la capa fosca, la creu ha de ser clara. */ .sb-menu.is-obert .sb-menu__boto{ color: var(--sb-menu-text); } /* ---- La capa ---- Fixa i a tot el viewport. El desbordament horitzontal es talla aquí perquè un element llarg del menú no faci aparèixer una barra lateral. */ .sb-menu__capa{ position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; padding: clamp(1.5rem, 6vw, 5rem); background: var(--sb-menu-fons); color: var(--sb-menu-text); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .35s ease; } .sb-menu__capa[hidden]{ display: none; } .sb-menu.is-obert .sb-menu__capa{ opacity: 1; } /* ---- Els elements ---- */ .sb-menu__nav{ width: 100%; } .sb-menu__llista{ margin: 0; padding: 0; list-style: none; } .sb-menu__llista li + li{ margin-top: .2em; } .sb-menu__llista a{ display: inline-block; font-size: var(--sb-menu-mida); line-height: 1.05; text-decoration: none; color: inherit; /* Els noms llargs parteixen en comptes d'eixamplar la capa. */ overflow-wrap: anywhere; } .sb-menu__llista a:hover, .sb-menu__llista a:focus-visible{ opacity: .55; } /* ---- Bloqueig del document ---- El passa a fixed des del JS; aquí només es talla el desbordament lateral, que és el que provoca la barra horitzontal mentre el menú és obert. */ .sb-menu-obert{ overflow: hidden; } .sb-menu-obert body{ overflow-x: hidden; width: 100%; } @media (prefers-reduced-motion: reduce){ .sb-menu__capa, .sb-menu__ratlla{ transition: none; } }