/** * Hilanaw Global FAB Styles * * !! CRITICAL DOM REQUIREMENT !! * .hilanaw-fab-menu-panel and .hilanaw-fab-overlay MUST be siblings of * .hilanaw-fab-container in the HTML — NOT children of it. * * Reason: transform: translateY(-50%) on .hilanaw-fab-container creates a new * CSS containing block, which breaks position: fixed on any descendant — fixed * children become fixed relative to the transformed ancestor instead of the * viewport, causing the panel to misposition. * * If a theme or page builder ever wraps .hilanaw-fab-container in a transformed, * filtered, or will-change ancestor, the same break will occur for the container * itself. In that case the transform must be moved to a wrapper element that is * NOT the positioning ancestor of any fixed children. * * State is toggled by JavaScript adding .fab-menu-open to . * All open-state selectors therefore use: body.fab-menu-open #element * * @package Hilanaw_Chat_UI * @version 2.0.0 */ /* ============================================ FAB CONTAINER (button only — no panel inside) ============================================ */ .hilanaw-fab-container { position: fixed; right: calc(-1 * clamp(20px, 2.5vw, 26px)); top: 50%; transform: translateY(-50%); z-index: 999999; transition: right 0.25s ease; } /* On non-chat pages: hide the floating FAB tab by default. When the menu opens (body.fab-menu-open), show it again so the close button remains accessible — the header trigger has no close state. */ body:not(.hilanaw-chat-page) .hilanaw-fab-container { visibility: hidden; pointer-events: none; } body.fab-menu-open:not(.hilanaw-chat-page) .hilanaw-fab-container { visibility: visible; pointer-events: auto; } .hilanaw-fab-container:hover { right: clamp(1px, 0.3vw, 4px); } body.fab-menu-open .hilanaw-fab-container { right: clamp(1px, 0.3vw, 4px); } body { padding-right: 0 !important; } /* ============================================ FAB BUTTON ============================================ */ .hilanaw-fab-button { width: clamp(44px, 5vw, 52px); height: clamp(44px, 5vw, 52px); border-radius: 50%; background: linear-gradient(135deg, #002d6e 0%, #0046a0 100%); border: none; box-shadow: 0 clamp(3px, 0.5vw, 5px) clamp(10px, 1.5vw, 14px) rgba(0, 70, 160, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease; position: relative; overflow: hidden; } .hilanaw-fab-button:hover { background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%); box-shadow: 0 clamp(4px, 0.8vw, 8px) clamp(12px, 2vw, 18px) rgba(0, 70, 160, 0.55), 0 3px 6px rgba(0, 0, 0, 0.3); transform: scale(1.05); } .hilanaw-fab-button:active { transform: scale(0.95); } .hilanaw-fab-button:focus-visible { outline: 3px solid rgba(0, 70, 160, 0.5); outline-offset: 3px; } @keyframes fabPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 70, 160, 0.4); } 50% { box-shadow: 0 4px 20px rgba(0, 70, 160, 0.8); } } .hilanaw-fab-button.fab-first-load { animation: fabPulse 1.5s ease-in-out 3; } /* ============================================ FAB ICONS ============================================ */ .fab-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; width: clamp(18px, 2.5vw, 24px); height: clamp(18px, 2.5vw, 24px); transition: opacity 0.2s ease, transform 0.25s ease; } .fab-icon svg { width: 100%; height: 100%; } .fab-icon-menu { opacity: 1; transform: translate(-50%, -50%) translateX(clamp(-4px, -0.8vw, -3px)) rotate(0deg); transition: opacity 0.2s ease, transform 0.25s ease; } .fab-icon-close { opacity: 0; transform: translate(-50%, -50%) translateX(clamp(-4px, -0.8vw, -3px)) rotate(90deg); transition: opacity 0.2s ease, transform 0.25s ease; } .hilanaw-fab-container:hover .fab-icon-menu { transform: translate(-50%, -50%) translateX(0) rotate(0deg); } .hilanaw-fab-container:hover .fab-icon-close { transform: translate(-50%, -50%) translateX(0) rotate(90deg); } body.fab-menu-open .fab-icon-menu { opacity: 0; transform: translate(-50%, -50%) translateX(0) rotate(-90deg); } body.fab-menu-open .fab-icon-close { opacity: 1; transform: translate(-50%, -50%) translateX(0) rotate(0deg); } /* ============================================ OVERLAY ============================================ */ .hilanaw-fab-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999997; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; } body.fab-menu-open .hilanaw-fab-overlay { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================ MENU PANEL ============================================ */ .hilanaw-fab-menu-panel { position: fixed; top: 0; right: 0; width: 320px; max-width: 85vw; height: 100vh; height: 100dvh; background: #ffffff; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18); z-index: 999998; transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease; display: flex; flex-direction: column; overflow: hidden; } body.fab-menu-open .hilanaw-fab-menu-panel { transform: translateX(0); visibility: visible; pointer-events: auto; } /* ============================================ MENU CONTENT (scrollable area) ============================================ */ .fab-menu-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .fab-menu-content::-webkit-scrollbar { width: 4px; } .fab-menu-content::-webkit-scrollbar-track { background: #f1f1f1; } .fab-menu-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; } /* ============================================ MENU ITEMS — DEPTH 0 (top level) ============================================ */ .fab-menu-items { list-style: none; margin: 0; padding: 12px 0; } .fab-menu-items li { margin: 0; padding: 0; } /* All links at depth 0 */ .fab-menu-items > li > a { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: #2c2c2c; text-decoration: none; border-left: 3px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; position: relative; } .fab-menu-items > li > a:hover { background: #f0f5ff; border-left-color: #0066cc; color: #0046a0; } .fab-menu-items > li > a:active { background: #e0edff; } /* Active/current page — depth 0 */ .fab-menu-items .current-menu-item > a, .fab-menu-items .current_page_item > a, .fab-menu-items .current-menu-ancestor > a { background: #eef4ff; border-left-color: #0046a0; color: #0046a0; font-weight: 600; } /* ============================================ ICONS & TEXT — shared across all depths ============================================ */ .menu-item-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #555; transition: color 0.15s ease; } .fab-menu-items a:hover .menu-item-icon, .fab-menu-items .current-menu-item > a .menu-item-icon { color: #0046a0; } .menu-item-icon svg { width: 20px; height: 20px; } .menu-item-text { font-size: 15px; line-height: 1.3; flex: 1; } /* ============================================ CHEVRON (parent toggle indicator) ============================================ */ .fab-chevron { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #aaa; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease; margin-left: auto; padding-left: 4px; } /* Rotate chevron when parent is open */ .fab-has-submenu.fab-submenu-open > a .fab-chevron { transform: rotate(180deg); color: #0046a0; } /* ============================================ ACCORDION — DEPTH 1 (children) ============================================ */ /* The