/* Structure only. * * Colour, type, border, shadow and decorative treatment were stripped when * this became the blank starter. The design comes from the build's own * Figma / Claude Design work, not from here. * * Spacing and sizing are exposed as --fw-- tokens that * default to 0, so the starter asserts nothing and the design layer sets * them. Everything left is layout mechanics the block needs to function. */ /* ========================================================================= * fw-offcanvas — proprietary off-canvas mobile navigation (framework). * * A right-side drawer with iOS/mmenu-style drill-down panels. The panels are * built by fw-offcanvas.js from the existing .fw-nav markup (no markup * duplication). Active below 768px; the desktop nav is left untouched. * * Behaviour goals: * - exactly ONE back button, always the current panel's (panels fully cover * their parent — deeper panel = higher z-index) * - no horizontal overflow; a thin branded vertical scrollbar * ========================================================================= */ /* Burger button lives in the header markup; hidden until mobile. */ .fw-menu-btn { display: none; } @media (max-width: 768px) { /* Hide the desktop horizontal nav; the drawer replaces it. JS still reads .fw-nav from the DOM to build the drawer, so display:none is fine. */ #fw-primary-nav { display: none; } .fw-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--fw-menu-btn-gap, 0); width: var(--fw-menu-btn-width, 0); height: var(--fw-menu-btn-height, 0); padding: var(--fw-menu-btn-padding, 0); margin: 0; cursor: pointer; position: relative; z-index: 1210; } .fw-menu-btn .bar { display: block; width: var(--fw-bar-width, 0); height: 2px; transition: transform .25s ease, opacity .2s ease; } /* The drawer has its own close (×) button, so hide the burger while the drawer is open — otherwise both show as a doubled X in the same corner. */ body.fw-oc-open .fw-menu-btn { opacity: 0; pointer-events: none; } } /* ---- Drawer + overlay (created by JS, appended to ) ---------------- */ .fw-oc { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: var(--fw-oc-max-width, 0); z-index: 1200; visibility: hidden; transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s; display: flex; flex-direction: column; overflow: hidden; } .fw-oc.is-open { transform: translateX(0); visibility: visible; } .fw-oc__overlay { position: fixed; inset: 0; z-index: 1190; opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s; } .fw-oc__overlay.is-open { opacity: 1; visibility: visible; } body.fw-oc-open { overflow: hidden; } /* Drawer top bar: brand + close */ .fw-oc__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--fw-oc-bar-height, 0); padding: var(--fw-oc-bar-padding, 0); } .fw-oc__bar img { max-height: 42px; width: auto; display: block; } .fw-oc__close { width: var(--fw-oc-close-width, 0); height: var(--fw-oc-close-height, 0); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* ---- Panels ------------------------------------------------------------- */ .fw-oc__panels { position: relative; flex: 1 1 auto; overflow: hidden; } .fw-oc__panel { position: absolute; inset: 0; transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .fw-oc__panel.is-root, .fw-oc__panel.is-active { transform: translateX(0); } .fw-oc__panel::-webkit-scrollbar { width: var(--fw-oc-panel-width, 0); } /* Back header inside a sub-panel (one per panel, sticky at the top). */ .fw-oc__back { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--fw-oc-back-gap, 0); width: 100%; padding: var(--fw-oc-back-padding, 0); cursor: pointer; text-align: left; } .fw-oc__back .fw-oc__chev { margin-top: var(--fw-oc-chev-margin-top, 0); } /* Rows */ .fw-oc__list { margin: 0; padding: 0; } .fw-oc__item { margin: 0; } .fw-oc__link, .fw-oc__drill { display: flex; align-items: center; justify-content: space-between; gap: var(--fw-oc-link-gap, 0); width: 100%; padding: var(--fw-oc-link-padding, 0); margin: 0; cursor: pointer; text-align: left; } .fw-oc__link { justify-content: flex-start; } .fw-oc__drill::after { content: ''; flex: none; width: var(--fw-oc-drill-width, 0); height: var(--fw-oc-drill-height, 0); transform: rotate(45deg); } .fw-oc__ico { flex: none; display: inline-flex; } /* Search panel */ .fw-oc__search { padding: var(--fw-oc-search-padding, 0); } .fw-oc__search form { display: flex; height: var(--fw-oc-search-height, 0); margin: 0; } .fw-oc__search input[type="search"] { flex: 1; min-width: 0; padding: var(--fw-oc-search-padding, 0); height: var(--fw-oc-search-height, 0); box-sizing: border-box; } .fw-oc__search button { padding: var(--fw-oc-search-padding, 0); cursor: pointer; height: var(--fw-oc-search-height, 0); display: inline-flex; align-items: center; gap: var(--fw-oc-search-gap, 0); }