/* ========================================================================== WoMa Drawer — Frontend Styles v1.1.0 Self-contained: no dependency on any theme's button classes/JS. ========================================================================== */ /* ---------- Custom properties (override in your theme if needed) ---------- */ :root { --woma-drawer-z: 9999; --woma-drawer-overlay-z: 9998; --woma-drawer-duration: 0.3s; --woma-drawer-ease: cubic-bezier(0.4, 0, 0.2, 1); --woma-drawer-shadow: -4px 0 32px rgba(0, 0, 0, 0.12); --woma-drawer-close-size: 1.1rem; --woma-drawer-overlay-bg: rgba(0, 0, 0, 0.45); } /* ---------- Trigger button ---------- */ .woma-drawer-trigger { display: inline-block; margin: 0; border: 2px solid var(--woma-drawer-trigger-color, #111); border-radius: 4px; font: inherit; font-weight: 600; line-height: 1; cursor: pointer; background: var(--woma-drawer-trigger-color, #111); color: #fff; transition: background-color 0.15s, color 0.15s; } .woma-drawer-trigger--small { padding: 0.5rem 0.9rem; font-size: 0.8rem; } .woma-drawer-trigger--medium { padding: 0.75rem 1.4rem; font-size: 0.9rem; } .woma-drawer-trigger--large { padding: 0.95rem 1.8rem; font-size: 1rem; } .woma-drawer-trigger--jumbo { padding: 1.3rem 2.4rem; font-size: 1.15rem; } .woma-drawer-trigger--outline, .woma-drawer-trigger--outline-fill { background: transparent; color: var(--woma-drawer-trigger-color, #111); } .woma-drawer-trigger--outline-fill:hover, .woma-drawer-trigger--outline-fill:focus-visible { background: var(--woma-drawer-trigger-color, #111); color: #fff; } .woma-drawer-trigger:focus-visible, .woma-drawer-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ---------- Panel ---------- */ .woma-drawer { /* Always hidden via CSS — not relying on the `hidden` attribute so that a parent CSS transform (common in WPBakery / Salient rows) cannot cause the panel to appear in normal document flow before JS teleports it to . */ display: none; position: fixed; top: 0; height: 100%; z-index: var(--woma-drawer-z); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--woma-drawer-shadow); transition: transform var(--woma-drawer-duration) var(--woma-drawer-ease); will-change: transform; /* background & width are set inline via shortcode atts */ } /* is-visible is added by JS just before is-open so the transition can play */ .woma-drawer.is-visible { display: block; } /* Positions */ .woma-drawer--right { right: 0; transform: translateX(105%); } .woma-drawer--left { left: 0; transform: translateX(-105%); } .woma-drawer--bottom { bottom: 0; top: auto; left: 0; right: 0; width: 100% !important; height: auto; max-height: 80vh; transform: translateY(105%); box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12); } /* Open state */ .woma-drawer.is-open { transform: none; } /* ---------- Close button ---------- */ .woma-drawer-close { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font: inherit; font-size: var(--woma-drawer-close-size); line-height: 1; color: inherit; opacity: 0.6; transition: opacity 0.15s; padding: 0; } .woma-drawer-close:hover { opacity: 1; } .woma-drawer-close--ghost { border-color: currentColor; } .woma-drawer-close--filled { opacity: 0.85; } .woma-drawer-close--filled:hover { opacity: 1; } /* ---------- Body ---------- */ .woma-drawer-body {} /* ---------- Overlay ---------- */ .woma-drawer-overlay { display: none; position: fixed; inset: 0; background: var(--woma-drawer-overlay-bg); z-index: var(--woma-drawer-overlay-z); opacity: 0; transition: opacity var(--woma-drawer-duration) var(--woma-drawer-ease); cursor: pointer; } .woma-drawer-overlay.is-visible { display: block; } .woma-drawer-overlay.is-open { opacity: 1; } /* ---------- Body scroll lock ---------- */ body.woma-drawer-open { overflow: hidden; } /* ---------- Reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { .woma-drawer, .woma-drawer-overlay { transition: none; } }