/** * Grouped mega menu for GeneratePress Off Canvas (overlay mode). * Only styles the OPEN panel. Closed visibility / open-close stay in GP Premium. */ /* GP puts .slide-opened on both and . */ .slide-opened #generate-slideout-menu.slideout-navigation.main-navigation.do-overlay { background: linear-gradient(160deg, #06343b 0%, #00849b 72%) !important; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .slideout-exit { position: absolute !important; top: 24px !important; right: 0 !important; left: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 1024 1024' fill='%23ffffff'%3E%3Cpath d='M176.662 817.173c-8.19 8.471-7.96 21.977 0.51 30.165 8.472 8.19 21.978 7.96 30.166-0.51l618.667-640c8.189-8.472 7.96-21.978-0.511-30.166-8.471-8.19-21.977-7.96-30.166 0.51l-618.666 640z'/%3E%3Cpath d='M795.328 846.827c8.19 8.471 21.695 8.7 30.166 0.511 8.471-8.188 8.7-21.694 0.511-30.165l-618.667-640c-8.188-8.471-21.694-8.7-30.165-0.511-8.471 8.188-8.7 21.694-0.511 30.165l618.666 640z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; color: #fff !important; z-index: 2; font-size: 0 !important; text-align: center !important; } .slide-opened #generate-slideout-menu.do-overlay .slideout-exit:before { content: none !important; display: none !important; } .slide-opened #generate-slideout-menu.do-overlay .main-nav:before { display: none !important; content: none !important; } .slide-opened #generate-slideout-menu.do-overlay .main-nav { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; min-width: 0 !important; } /* Hide the original flat list after JS moves items into columns. */ .slide-opened #generate-slideout-menu.do-overlay .main-nav > ul.slideout-menu[hidden], .slide-opened #generate-slideout-menu.do-overlay .main-nav > ul.satori-offcanvas-source { display: none !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-grid { display: grid !important; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px 48px; width: 100%; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col { display: block !important; float: none !important; width: 100% !important; margin: 0; padding: 0; text-align: left !important; } /* * Beat GP Premium overlay rule: * .slideout-navigation.do-overlay .slideout-menu li a { display: inline-block } */ .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col li { display: block !important; float: none !important; width: 100% !important; clear: both !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li > a, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li a { display: block !important; float: none !important; width: 100% !important; height: auto !important; padding: 12px 0 !important; margin: 0 !important; line-height: 1.35 !important; color: #fff !important; font-size: 22px !important; font-weight: 500 !important; text-transform: none !important; text-align: left !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12); white-space: normal !important; transition: color 0.2s ease, padding-left 0.2s ease; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li > a:hover, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li.current-menu-item > a, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li a:hover, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li.current-menu-item > a { color: #ffe7b3 !important; background: transparent !important; padding-left: 8px !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-brand { display: flex !important; align-items: center; gap: 12px; margin: 8px 56px 40px 0; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; font-weight: 700; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-brand-link { display: inline-flex !important; align-items: center; line-height: 0 !important; text-decoration: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-brand img { height: 52px; width: auto; max-width: 150px; object-fit: contain; background: transparent; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col h2 { margin: 0 0 16px; color: rgba(255, 255, 255, 0.65); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; text-align: left !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-note { display: block !important; max-width: 420px; margin: 48px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 1.55; text-align: left !important; } @media (max-width: 900px) { /* Panel stays fixed to the viewport; content scrolls inside. */ .slide-opened #generate-slideout-menu.slideout-navigation.main-navigation.do-overlay { position: fixed !important; inset: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; } .slide-opened #generate-slideout-menu.do-overlay, .slide-opened #generate-slideout-menu.do-overlay * { box-sizing: border-box !important; } /* Mobile only: drop GP overlay’s 10% column padding; this is the scroll area. */ .slide-opened #generate-slideout-menu.do-overlay .inside-navigation { display: block !important; position: relative !important; max-width: 100% !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; padding-right: max(20px, env(safe-area-inset-right, 0px)) !important; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important; padding-left: max(20px, env(safe-area-inset-left, 0px)) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .slide-opened #generate-slideout-menu.do-overlay .inside-navigation.grid-container, .slide-opened #generate-slideout-menu.do-overlay .inside-navigation.grid-parent { max-width: 100% !important; padding-left: max(20px, env(safe-area-inset-left, 0px)) !important; padding-right: max(20px, env(safe-area-inset-right, 0px)) !important; } /* Keep close always visible above the scrolling content. */ .slide-opened #generate-slideout-menu.do-overlay .slideout-exit { position: fixed !important; top: max(12px, env(safe-area-inset-top, 0px)) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; width: 36px !important; height: 36px !important; background-size: 16px 16px !important; z-index: 100002 !important; } .slide-opened #generate-slideout-menu.do-overlay .main-nav { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-brand { margin: 8px 48px 28px 0; max-width: calc(100% - 48px); } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-brand img { height: 44px; max-width: 100%; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col { width: auto !important; max-width: 100% !important; min-width: 0 !important; padding: 16px 14px !important; border-radius: 14px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col li, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li > a, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li a { max-width: 100% !important; min-width: 0 !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.14em; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li > a, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li a { font-size: 17px !important; padding: 11px 0 !important; line-height: 1.3 !important; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-list > li:last-child > a, .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-col ul li:last-child a { border-bottom: 0; } .slide-opened #generate-slideout-menu.do-overlay .satori-offcanvas-note { max-width: none; margin: 28px 0 12px; font-size: 14px; line-height: 1.5; padding: 0 2px 8px; } }