/* ========================================================================= Bricks Off-Canvas Menu — side drawer ========================================================================= */ .bricks-offcanvas-menu { --trigger-size: 48px; --trigger-bg: #111; --trigger-color: #fff; --trigger-radius: 4px; --panel-width: 50%; --panel-max-width: none; --panel-offset: 0px; --panel-top: 0px; /* Reserved sticky zone at the top of the panel so the hamburger / close button never overlaps scrolled menu items. Uses clamp so it scales sensibly down to small mobile viewports. */ --panel-top-gap: clamp(5rem, 10vh, 7rem); /* Inner content padding — overridable per-instance via the control. */ --panel-content-padding: 0 clamp(1.5rem, 4vw, 3rem) 3rem; /* Top/bottom padding on each menu row (controls divider spacing). */ --menu-item-padding: 0.5rem 0; /* Sub-menu font size — separate from the top-level link typography. */ --submenu-font-size: clamp(1rem, 1.5vw, 1.3rem); --panel-bg: #111; --panel-color: #fff; --panel-hover: #ffd166; --panel-accent: rgba(255, 255, 255, 0.12); --backdrop-bg: rgba(0, 0, 0, 0.5); --anim-duration: 450ms; --anim-easing: cubic-bezier(0.77, 0, 0.175, 1); position: relative; display: inline-flex; z-index: 9000; } /* ---------- Hamburger button ---------- */ .bricks-offcanvas-toggle { position: relative; width: var(--trigger-size); height: var(--trigger-size); border: 0; margin: 0; padding: 0; cursor: pointer; background: var(--trigger-bg); color: var(--trigger-color); border-radius: var(--trigger-radius); display: inline-flex; align-items: center; justify-content: center; z-index: 10002; transition: background-color 0.2s ease; } .bricks-offcanvas-toggle:focus-visible { outline: 2px solid var(--panel-hover); outline-offset: 3px; } /* ---------- Hamburger icon base ---------- */ .bom-icon { position: relative; display: inline-block; width: 55%; height: 45%; } .bom-icon > span { position: absolute; left: 0; right: 0; height: 3px; background: currentColor; border-radius: 2px; transition: transform var(--anim-duration) var(--anim-easing), top var(--anim-duration) var(--anim-easing), opacity calc(var(--anim-duration) / 2) var(--anim-easing), width var(--anim-duration) var(--anim-easing); } /* --- Simple (3 bars → X) --- */ .bom-icon--simple > span:nth-child(1) { top: 0; } .bom-icon--simple > span:nth-child(2) { top: 50%; transform: translateY(-50%); } .bom-icon--simple > span:nth-child(3) { top: 100%; transform: translateY(-100%); } .bricks-offcanvas-menu.is-open .bom-icon--simple > span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .bricks-offcanvas-menu.is-open .bom-icon--simple > span:nth-child(2) { opacity: 0; } .bricks-offcanvas-menu.is-open .bom-icon--simple > span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* --- Squeeze --- */ .bom-icon--squeeze > span:nth-child(1) { top: 0; transform-origin: center; } .bom-icon--squeeze > span:nth-child(2) { top: 50%; transform: translateY(-50%); transform-origin: center; } .bom-icon--squeeze > span:nth-child(3) { top: 100%; transform: translateY(-100%); transform-origin: center; } .bricks-offcanvas-menu.is-open .bom-icon--squeeze > span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .bricks-offcanvas-menu.is-open .bom-icon--squeeze > span:nth-child(2) { width: 0; left: 50%; } .bricks-offcanvas-menu.is-open .bom-icon--squeeze > span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* --- Spin (rotates 360° while morphing) --- */ .bom-icon--spin { transition: transform var(--anim-duration) var(--anim-easing); } .bom-icon--spin > span:nth-child(1) { top: 0; } .bom-icon--spin > span:nth-child(2) { top: 50%; transform: translateY(-50%); } .bom-icon--spin > span:nth-child(3) { top: 100%; transform: translateY(-100%); } .bricks-offcanvas-menu.is-open .bom-icon--spin { transform: rotate(360deg); } .bricks-offcanvas-menu.is-open .bom-icon--spin > span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .bricks-offcanvas-menu.is-open .bom-icon--spin > span:nth-child(2) { opacity: 0; } .bricks-offcanvas-menu.is-open .bom-icon--spin > span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* --- Arrow (bars slide into an arrow) --- */ .bom-icon--arrow > span:nth-child(1) { top: 0; transform-origin: left center; } .bom-icon--arrow > span:nth-child(2) { top: 50%; transform: translateY(-50%); } .bom-icon--arrow > span:nth-child(3) { top: 100%; transform: translateY(-100%); transform-origin: left center; } .bricks-offcanvas-menu.is-open .bom-icon--arrow > span:nth-child(1) { width: 50%; transform: translate(50%, 3px) rotate(45deg); } .bricks-offcanvas-menu.is-open .bom-icon--arrow > span:nth-child(3) { width: 50%; transform: translate(50%, -3px) rotate(-45deg); } /* --- Plus / cross (two bars only) --- */ .bom-icon--plus > span:nth-child(1) { top: 50%; left: 0; right: 0; transform: translateY(-50%); } .bom-icon--plus > span:nth-child(2) { top: 50%; left: 0; right: 0; transform: translateY(-50%) rotate(90deg); } .bricks-offcanvas-menu.is-open .bom-icon--plus > span:nth-child(1) { transform: translateY(-50%) rotate(45deg); } .bricks-offcanvas-menu.is-open .bom-icon--plus > span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); } /* --- Custom SVG --- */ .bom-icon--custom { width: 60%; height: 60%; } .bom-icon--custom svg { width: 100%; height: 100%; display: block; color: currentColor; } .bom-icon--custom .bom-icon__closed, .bom-icon--custom .bom-icon__open { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity var(--anim-duration) var(--anim-easing), transform var(--anim-duration) var(--anim-easing); } .bom-icon--custom .bom-icon__open { opacity: 0; transform: rotate(-90deg); } .bricks-offcanvas-menu.is-open .bom-icon--custom .bom-icon__closed { opacity: 0; transform: rotate(90deg); } .bricks-offcanvas-menu.is-open .bom-icon--custom .bom-icon__open { opacity: 1; transform: rotate(0); } /* --- Single self-animating SVG --- The user's SVG drives its own state (e.g. via .is-active on the button). Let the SVG dictate its own size and don't apply the fade/rotate swap. */ .bom-icon--custom.bom-icon--single { width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; } .bom-icon--custom.bom-icon--single svg { width: auto; height: auto; max-width: 100%; max-height: 100%; } /* ---------- Backdrop ---------- */ .bricks-offcanvas-backdrop { position: fixed; inset: 0; background: var(--backdrop-bg); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity var(--anim-duration) var(--anim-easing), visibility 0s linear var(--anim-duration); } .bricks-offcanvas-menu.is-open .bricks-offcanvas-backdrop { opacity: 1; visibility: visible; transition: opacity var(--anim-duration) var(--anim-easing), visibility 0s linear 0s; } /* ---------- Panel (side drawer) ---------- */ .bricks-offcanvas-panel { position: fixed; top: var(--panel-top, 0px); bottom: 0; width: var(--panel-width); max-width: min(100vw, var(--panel-max-width, 100vw)); background: var(--panel-bg); color: var(--panel-color); z-index: 9999; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 0 0 40px rgba(0, 0, 0, 0.35); visibility: hidden; transition: transform var(--anim-duration) var(--anim-easing), visibility 0s linear var(--anim-duration); } /* ---------- Animation: slide from side (default drawer) ---------- The translate amount needs to clear both the panel width AND its edge offset so the panel slides fully off-screen when closed. */ .bricks-offcanvas-menu.bom-anim-side.bom-side-right .bricks-offcanvas-panel { right: var(--panel-offset, 0px); transform: translateX(calc(100% + var(--panel-offset, 0px))); } .bricks-offcanvas-menu.bom-anim-side.bom-side-left .bricks-offcanvas-panel { left: var(--panel-offset, 0px); transform: translateX(calc(-100% - var(--panel-offset, 0px))); } .bricks-offcanvas-menu.bom-anim-side.is-open .bricks-offcanvas-panel { visibility: visible; transform: translateX(0); transition: transform var(--anim-duration) var(--anim-easing), visibility 0s linear 0s; } /* ---------- Animation: slide from top ---------- Panel sits along the top edge spanning the configured width, slides down. */ .bricks-offcanvas-menu.bom-anim-slide-top .bricks-offcanvas-panel { top: var(--panel-top, 0px); bottom: auto; left: 50%; right: auto; /* Panel height is capped so it can't exceed viewport minus any top offset. Users can override --panel-height on the root if they want less. */ height: var(--panel-height, calc(100vh - var(--panel-top, 0px))); max-height: calc(100vh - var(--panel-top, 0px)); transform: translate(-50%, -100%); } .bricks-offcanvas-menu.bom-anim-slide-top.is-open .bricks-offcanvas-panel { visibility: visible; transform: translate(-50%, 0); transition: transform var(--anim-duration) var(--anim-easing), visibility 0s linear 0s; } /* ---------- Animation: slide from bottom ---------- Panel sits along the bottom edge, slides up. */ .bricks-offcanvas-menu.bom-anim-slide-bottom .bricks-offcanvas-panel { top: auto; bottom: 0; left: 50%; right: auto; height: var(--panel-height, calc(100vh - var(--panel-top, 0px))); max-height: calc(100vh - var(--panel-top, 0px)); transform: translate(-50%, 100%); } .bricks-offcanvas-menu.bom-anim-slide-bottom.is-open .bricks-offcanvas-panel { visibility: visible; transform: translate(-50%, 0); transition: transform var(--anim-duration) var(--anim-easing), visibility 0s linear 0s; } /* ---------- Animation: scale from trigger ---------- Panel grows from the trigger's position outward. The JS sets --bom-origin-x / --bom-origin-y (in px, relative to the panel's own box) each time the panel opens so the transform-origin tracks the button. */ .bricks-offcanvas-menu.bom-anim-scale .bricks-offcanvas-panel { top: var(--panel-top, 0px); bottom: 0; left: 50%; right: auto; transform: translateX(-50%) scale(0); transform-origin: var(--bom-origin-x, 50%) var(--bom-origin-y, 0%); opacity: 0; transition: transform var(--anim-duration) var(--anim-easing), opacity var(--anim-duration) var(--anim-easing), visibility 0s linear var(--anim-duration); } .bricks-offcanvas-menu.bom-anim-scale.bom-side-left .bricks-offcanvas-panel { left: var(--panel-offset, 0px); transform: translateX(0) scale(0); } .bricks-offcanvas-menu.bom-anim-scale.bom-side-right .bricks-offcanvas-panel { left: auto; right: var(--panel-offset, 0px); transform: translateX(0) scale(0); } .bricks-offcanvas-menu.bom-anim-scale.is-open .bricks-offcanvas-panel { visibility: visible; opacity: 1; transform: translateX(0) scale(1); transition: transform var(--anim-duration) var(--anim-easing), opacity var(--anim-duration) var(--anim-easing), visibility 0s linear 0s; } /* Side-centred scale variant stays horizontally centred during the scale */ .bricks-offcanvas-menu.bom-anim-scale:not(.bom-side-left):not(.bom-side-right).is-open .bricks-offcanvas-panel { transform: translateX(-50%) scale(1); } /* Keep panel in the DOM during the close transition */ .bricks-offcanvas-panel[hidden], .bricks-offcanvas-backdrop[hidden] { display: block !important; } /* Sticky strip at the top of the panel. It scrolls with the first-mount of the panel but then pins to the top of the scroll container, giving menu items an opaque backdrop to slide under. Pointer-events off so the external hamburger button remains clickable through it. */ .bricks-offcanvas-panel__top-spacer { position: sticky; top: 0; height: var(--panel-top-gap); background: var(--panel-bg); z-index: 2; pointer-events: none; flex: 0 0 auto; } .bricks-offcanvas-panel__inner { /* No top padding — the sticky spacer provides the clear zone. */ padding: var(--panel-content-padding); display: flex; flex-direction: column; justify-content: flex-start; } /* Panel close (X) button */ .bricks-offcanvas-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; background: transparent; color: inherit; border: 1px solid var(--panel-accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .bricks-offcanvas-close:hover { color: var(--panel-hover); border-color: var(--panel-hover); transform: rotate(90deg); } .bricks-offcanvas-menu.bom-side-left .bricks-offcanvas-close { right: auto; left: 1rem; } /* ---------- Menu lists ---------- */ .bricks-offcanvas-panel ul, .bricks-offcanvas-panel .bom-menu { list-style: none; margin: 0; padding: 0; } .bricks-offcanvas-panel .bom-menu { display: flex; flex-direction: column; gap: 0.25rem; } .bricks-offcanvas-panel li { position: relative; border-bottom: 1px solid var(--panel-accent); /* font-size lives on li so both and .bom-parent-toggle inherit the same size */ font-size: clamp(1.1rem, 1.8vw, 1.6rem); /* Flex row so link + chevron sit on the same line and the submenu wraps below */ display: flex; flex-wrap: wrap; align-items: center; } .bricks-offcanvas-panel .bom-menu > li:last-child { border-bottom: 0; } /* The link for leaf items AND the button for parent items share the same visual treatment, so they read as one coherent row. */ .bricks-offcanvas-panel li > a, .bricks-offcanvas-panel li > .bom-parent-toggle { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 0.5em; padding: var(--menu-item-padding); color: var(--panel-color); text-decoration: none; font: inherit; font-weight: 500; line-height: 1.2; text-align: inherit; background: transparent; border: 0; cursor: pointer; transition: color 0.2s ease; } /* Parent button pushes the chevron to the far edge, keeps label on the near one. Top-level leaf links with a chevron get the same treatment so every top-level row lines up visually whether or not it has a submenu. */ .bricks-offcanvas-panel li > .bom-parent-toggle, .bricks-offcanvas-panel li > a:has(.bom-leaf-chevron) { justify-content: space-between; width: 100%; } .bricks-offcanvas-panel .bom-parent-toggle__text { flex: 1 1 auto; min-width: 0; } /* Submenu takes a new row underneath */ .bricks-offcanvas-panel li > .sub-menu { flex: 1 0 100%; } /* Hover / current states — applies to both link AND parent-button, and the chevron inherits the same color via currentColor, so it highlights too. */ .bricks-offcanvas-panel li > a:hover, .bricks-offcanvas-panel li > .bom-parent-toggle:hover, .bricks-offcanvas-panel li.current-menu-item > a, .bricks-offcanvas-panel li.current-menu-item > .bom-parent-toggle, .bricks-offcanvas-panel li.current-menu-ancestor > a, .bricks-offcanvas-panel li.current-menu-ancestor > .bom-parent-toggle { color: var(--panel-hover); } /* Single focus ring around the entire parent row (text + chevron) */ .bricks-offcanvas-panel li > a:focus-visible, .bricks-offcanvas-panel li > .bom-parent-toggle:focus-visible { outline: 2px solid var(--panel-hover); outline-offset: 3px; } /* ---------- Submenu chevron inside the parent button ---------- */ .bricks-offcanvas-panel .bom-parent-toggle__chevron { flex: 0 0 auto; width: 2em; height: 2em; color: currentColor; transition: transform var(--anim-duration) var(--anim-easing); } /* Rotate 90° so the right chevron points down when expanded */ .bricks-offcanvas-panel .bom-parent-toggle[aria-expanded="true"] .bom-parent-toggle__chevron { transform: rotate(90deg); } /* Static chevron for top-level leaf items — same size/color as the parent chevron, but no rotation (there's nothing to expand). */ .bricks-offcanvas-panel .bom-leaf-chevron { flex: 0 0 auto; width: 2em; height: 2em; color: currentColor; } /* When drawer opens from the left, mirror: chevron first, then label */ .bricks-offcanvas-menu.bom-side-left .bricks-offcanvas-panel .bom-parent-toggle, .bricks-offcanvas-menu.bom-side-left .bricks-offcanvas-panel li > a:has(.bom-leaf-chevron) { flex-direction: row-reverse; } /* ---------- Accordion submenus ---------- Dividers match the top-level: solid, full-width. We indent the sub-link TEXT (padding-left on the ) instead of the