/* * Lester Toolbox - Fullscreen Menu * v1.7.0 - GSAP animated fullscreen navigation overlay + custom hamburger icon */ /* ===== CONFIG ===== */ :root { --lester-hamburger-color: #ffffff; --lester-hamburger-size: 30px; } /* =================================================================== BURGER STYLE A — MORPH (Square → Triangle, default) =================================================================== */ /* Hide the default WordPress SVG icon */ .wp-block-navigation__responsive-container-open svg { display: none !important; } /* Hamburger button container */ .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; justify-content: center; min-width: 44px !important; min-height: 44px !important; background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer; position: relative; z-index: 100000; /* Above the fullscreen overlay */ } /* --- MORPH style (default, no body class needed) --- */ /* Custom icon via CSS background + clip-path (Square → Triangle → Cross) */ body:not(.lester-fm-burger-classic) .wp-block-navigation__responsive-container-open::before { content: ""; display: block; width: var(--lester-hamburger-size); height: var(--lester-hamburger-size); background-color: var(--lester-hamburger-color) !important; transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Default state: Solid Square (12 points for morphing) */ -webkit-clip-path: polygon(40% 0%, 60% 0%, 100% 0%, 100% 40%, 100% 60%, 100% 100%, 60% 100%, 40% 100%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); clip-path: polygon(40% 0%, 60% 0%, 100% 0%, 100% 40%, 100% 60%, 100% 100%, 60% 100%, 40% 100%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); transform: rotate(0deg); } /* Hover: Triangle ▶ (straight vertical edge on the left) */ body:not(.lester-fm-burger-classic) .wp-block-navigation__responsive-container-open:hover::before { -webkit-clip-path: polygon(40% 20%, 60% 30%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 60% 70%, 40% 80%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); clip-path: polygon(40% 20%, 60% 30%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 60% 70%, 40% 80%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); } /* Menu open state: retain the triangle shape but rotate it */ body.lester-fm-open:not(.lester-fm-burger-classic) .wp-block-navigation__responsive-container-open::before, body.lester-fm-open:not(.lester-fm-burger-classic) .wp-block-navigation__responsive-container-open:hover::before { -webkit-clip-path: polygon(40% 20%, 60% 30%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 60% 70%, 40% 80%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); clip-path: polygon(40% 20%, 60% 30%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 60% 70%, 40% 80%, 0% 100%, 0% 60%, 0% 40%, 0% 0%); /* Rotate 180deg so the triangle points left */ transform: rotate(180deg); } /* =================================================================== BURGER STYLE B — CLASSIC (3 lines → ✕) Activated when has class .lester-fm-burger-classic =================================================================== */ body.lester-fm-burger-classic .wp-block-navigation__responsive-container-open { flex-direction: column; gap: 0; } /* The three lines are made with ::before, a real span, and ::after. JS injects a inside the button. */ body.lester-fm-burger-classic .wp-block-navigation__responsive-container-open::before, body.lester-fm-burger-classic .wp-block-navigation__responsive-container-open::after { content: ""; display: block; width: var(--lester-hamburger-size); height: 3px; background-color: var(--lester-hamburger-color); border-radius: 2px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; margin: 5px 0; } body.lester-fm-burger-classic .lester-fm-burger-mid { display: block; width: var(--lester-hamburger-size); height: 3px; background-color: var(--lester-hamburger-color); border-radius: 2px; transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } /* Open state: top line rotates +45°, bottom −45°, middle fades */ body.lester-fm-open.lester-fm-burger-classic .wp-block-navigation__responsive-container-open::before { transform: translateY(8px) rotate(45deg); margin: 5px 0; } body.lester-fm-open.lester-fm-burger-classic .wp-block-navigation__responsive-container-open::after { transform: translateY(-8px) rotate(-45deg); margin: 5px 0; } body.lester-fm-open.lester-fm-burger-classic .lester-fm-burger-mid { opacity: 0; transform: scaleX(0); } /* ===== OVERLAY ===== */ #lester-fullscreen-menu { position: fixed; inset: 0; z-index: 99999; background: #000; visibility: hidden; opacity: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* ===== CORNER TRIANGLES ===== */ .lester-fm-triangle { position: absolute; width: 120px; height: 120px; background: #fff; opacity: 0; z-index: 1; } .lester-fm-triangle--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); } .lester-fm-triangle--br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* ===== CLOSE BUTTON ===== */ .lester-fm-close { position: absolute; top: 2.5rem; z-index: 10; background: none; border: none; color: #fff; font-size: 3.5rem; line-height: 0.8; cursor: pointer; padding: 0.25rem 0.5rem; opacity: 0; transition: color 0.3s ease; } body.lester-fm-close-left .lester-fm-close { left: 3rem; right: auto; } body.lester-fm-close-right .lester-fm-close { right: 3rem; left: auto; } .lester-fm-close:hover { color: rgba(255, 255, 255, 0.6); } /* ===== NAVIGATION LIST ===== */ .lester-fm-nav { list-style: none; margin: 0; padding: 0; text-align: center; display: flex; flex-direction: column; gap: 0.4rem; } /* ===== NAV LINKS ===== */ .lester-fm-nav a { display: inline-block; color: #fff; text-decoration: none; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; padding: 0.15em 0; position: relative; transition: color 0.3s ease; } /* Underline hover effect */ body.lester-fm-hover-underline .lester-fm-nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: var(--lester-fm-underline-color, currentColor); transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } body.lester-fm-hover-underline .lester-fm-nav a:hover::after { width: 100%; left: 0; } /* Zoom hover effect */ body.lester-fm-hover-zoom .lester-fm-nav a { transform: scale(1); transition: color 0.3s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } body.lester-fm-hover-zoom .lester-fm-nav a:hover { transform: scale(1.06); } /* ===== SCROLL LOCK ===== */ body.lester-fm-open { overflow: hidden !important; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .lester-fm-close { top: 1.5rem; font-size: 3rem; } body.lester-fm-close-left .lester-fm-close { left: 1.5rem; right: auto; } body.lester-fm-close-right .lester-fm-close { right: 1.5rem; left: auto; } .lester-fm-triangle { width: 70px; height: 70px; } .lester-fm-nav { gap: 0.2rem; } .lester-fm-nav a { font-size: clamp(1.6rem, 7vw, 2.4rem); } }