/* ========================================================= RELAXATION REALM KADENCE NAVIGATION + MEGA MENU + SERVICE AREA ACCORDION ========================================================= */ /* ========================================================= 1. TOP-LEVEL NAVIGATION ========================================================= */ .main-navigation .primary-menu-container > ul > li > a { border-radius: 999px; padding-left: 18px; padding-right: 18px; background: transparent !important; color: inherit !important; transition: background-color .2s ease, color .2s ease; } /* Hover */ .main-navigation .primary-menu-container > ul > li:hover > a { background: #7b764e !important; color: #ffffff !important; } /* Current page */ .main-navigation .primary-menu-container > ul > li.current-menu-item > a, .main-navigation .primary-menu-container > ul > li.current_page_item > a, .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a, .main-navigation .primary-menu-container > ul > li.current_page_ancestor > a { background: #7b764e !important; color: #ffffff !important; } /* ========================================================= HOMEPAGE ACTIVE FIX ========================================================= */ body.home .main-navigation .primary-menu-container > ul > li > a { background: transparent !important; color: inherit !important; } /* Home only */ body.home .main-navigation .primary-menu-container > ul > li.current-menu-item > a, body.home .main-navigation .primary-menu-container > ul > li.current_page_item > a { background: #7b764e !important; color: #ffffff !important; } /* Hover still works on homepage */ body.home .main-navigation .primary-menu-container > ul > li:hover > a { background: #7b764e !important; color: #ffffff !important; } /* ========================================================= 2. DESKTOP ========================================================= */ @media (min-width: 1025px) { /* ===================================================== SERVICES MEGA MENU ===================================================== */ .main-navigation .rr-services-menu { position: relative; } .main-navigation .rr-services-menu > .sub-menu { width: 760px !important; max-width: 760px !important; padding: 26px 30px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 42px; row-gap: 0; /* Olive top -> black bottom */ background: linear-gradient( 180deg, #79734f 0%, #615d41 32%, #39382b 62%, #090909 100% ) !important; border: none !important; border-radius: 22px !important; box-shadow: 0 20px 50px rgba(0,0,0,.22) !important; overflow: hidden; left: 50% !important; transform: translateX(-50%); } /* Divider between service columns */ .main-navigation .rr-services-menu > .sub-menu::after { content: ""; position: absolute; top: 28px; bottom: 28px; left: 50%; width: 1px; background: rgba(255,255,255,.14); pointer-events: none; } /* Remove Kadence borders */ .main-navigation .rr-services-menu .sub-menu li { border: none !important; } .main-navigation .rr-services-menu > .sub-menu > li { width: 100% !important; margin: 0 !important; } /* Service link */ .main-navigation .rr-services-menu > .sub-menu > li > a { display: flex !important; align-items: center; width: 100%; min-height: 45px; padding: 9px 5px !important; background: transparent !important; color: #ffffff !important; border: none !important; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: normal; transition: color .2s ease, transform .2s ease; } /* Check circle */ .main-navigation .rr-services-menu > .sub-menu > li > a::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 10px; flex: 0 0 16px; background: #ffffff; color: #77714f; border-radius: 50%; font-size: 10px; font-weight: 700; } .main-navigation .rr-services-menu > .sub-menu > li > a:hover { color: #eadba3 !important; transform: translateX(3px); } /* ===================================================== 3. SERVICE AREAS — MAIN PANEL ===================================================== */ .main-navigation .rr-service-areas-menu { position: relative; } .main-navigation .rr-service-areas-menu > .sub-menu { /* * Wider panel so we have: * * LOGO | ACCORDION */ width: 760px !important; max-width: 760px !important; padding: 20px 24px 20px 205px !important; /* Olive top -> black bottom */ background: linear-gradient( 180deg, #79734f 0%, #635f43 32%, #3c3a2c 62%, #090909 100% ) !important; border: none !important; border-radius: 24px !important; box-shadow: 0 22px 55px rgba(0,0,0,.24) !important; overflow: hidden !important; position: absolute !important; } /* ===================================================== LEFT LOGO ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu::before { content: ""; position: absolute; left: 38px; top: 50%; width: 125px; height: 125px; transform: translateY(-50%); background-image: url("https://relaxrealm.com/wp-content/uploads/2024/04/Artboard-1-copy-7@2x.png"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .98; pointer-events: none; } /* Divider between logo and accordion */ .main-navigation .rr-service-areas-menu > .sub-menu::after { content: ""; position: absolute; left: 178px; top: 28px; bottom: 28px; width: 1px; background: rgba(255,255,255,.14); pointer-events: none; } /* ===================================================== REMOVE DEFAULT BORDERS ===================================================== */ .main-navigation .rr-service-areas-menu .sub-menu li { border: none !important; } /* ===================================================== CITY ROWS ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li { position: relative !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; background: transparent !important; } .main-navigation .rr-service-areas-menu > .sub-menu > li:last-child { border-bottom: none !important; } /* City title */ .main-navigation .rr-service-areas-menu > .sub-menu > li > a { display: flex !important; align-items: center; justify-content: space-between; width: 100% !important; min-height: 52px; padding: 12px 10px !important; background: transparent !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-size: 14px; font-weight: 600; transition: background-color .2s ease, color .2s ease, padding-left .2s ease; } /* Hover city */ .main-navigation .rr-service-areas-menu > .sub-menu > li:hover > a { background: rgba(255,255,255,.07) !important; color: #f2e5ad !important; padding-left: 14px !important; } /* ===================================================== 4. ACCORDION SERVICES OPEN BELOW CITY ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu { position: static !important; top: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 4px 10px 16px !important; /* * Hidden until city hover */ display: none !important; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 28px; row-gap: 0; /* * Very subtle inner shade. * No more chunky inner box. */ background: rgba(0,0,0,.08) !important; border: none !important; border-radius: 0 0 12px 12px !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* Expand downward */ .main-navigation .rr-service-areas-menu > .sub-menu > li:hover > .sub-menu { display: grid !important; } /* ===================================================== SERVICE ROWS ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li { width: 100% !important; margin: 0 !important; border: none !important; } .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a { display: flex !important; align-items: flex-start; width: 100%; min-height: 38px; padding: 8px 3px !important; background: transparent !important; color: rgba(255,255,255,.94) !important; border: none !important; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: normal; transition: color .2s ease, transform .2s ease; } /* Check */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 8px; margin-top: 1px; flex: 0 0 15px; background: #ffffff; color: #77714f; border-radius: 50%; font-size: 9px; font-weight: 700; } .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a:hover { color: #eadba3 !important; transform: translateX(3px); } /* ===================================================== REMOVE FALSE CURRENT CITY BLOCK ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li.current-menu-item > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current-menu-ancestor > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current_page_item > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current_page_ancestor > a { background: transparent !important; color: #ffffff !important; } } /* ========================================================= 5. MOBILE / TABLET LET KADENCE HANDLE ACCORDION ========================================================= */ @media (max-width: 1024px) { /* * Do not force display:block. * Kadence controls its mobile accordion. */ .mobile-navigation .rr-services-menu > .sub-menu, .mobile-navigation .rr-service-areas-menu > .sub-menu, .mobile-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu { position: static !important; width: auto !important; max-width: none !important; height: auto !important; transform: none !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; grid-template-columns: none !important; overflow: visible !important; } /* * Hide desktop logo/dividers */ .mobile-navigation .rr-service-areas-menu > .sub-menu::before, .mobile-navigation .rr-service-areas-menu > .sub-menu::after, .mobile-navigation .rr-services-menu > .sub-menu::after { display: none !important; } /* Mobile submenu links */ .mobile-navigation .rr-services-menu > .sub-menu > li > a, .mobile-navigation .rr-service-areas-menu > .sub-menu > li > a, .mobile-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a { width: auto !important; min-height: 0 !important; padding: 12px 14px !important; background: transparent !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; transform: none !important; font-size: inherit !important; line-height: inherit !important; } /* Remove desktop checks */ .mobile-navigation .rr-services-menu > .sub-menu > li > a::before, .mobile-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a::before { display: none !important; } /* ===================================================== MOBILE ACTIVE / HOVER COLOR ===================================================== */ .mobile-navigation li.current-menu-item > a, .mobile-navigation li.current_page_item > a, .mobile-navigation li.current-menu-ancestor > a, .mobile-navigation li.current_page_ancestor > a { color: #aaa167 !important; background: rgba(123,118,78,.14) !important; } .mobile-navigation a:hover, .mobile-navigation a:focus { color: #aaa167 !important; } } /* ========================================================= 6. Z-INDEX ========================================================= */ .site-header, .site-main-header-wrap, .site-header-row-container, .main-navigation, .main-navigation .menu, .main-navigation .sub-menu { z-index: 9999; } /* ========================================================= RELAXATION REALM DROPDOWN POLISH OVERRIDES Paste at the VERY BOTTOM of existing CSS ========================================================= */ /* ========================================================= 1. ABOUT DROPDOWN ========================================================= */ /* About dropdown outer panel */ .main-navigation .primary-menu-container > ul > li:not(.rr-services-menu):not(.rr-service-areas-menu) > .sub-menu { background: linear-gradient( 180deg, #79734f 0%, #55523a 45%, #111111 100% ) !important; border: none !important; border-radius: 16px !important; padding: 8px !important; box-shadow: 0 18px 40px rgba(0,0,0,.20) !important; } /* Remove blocky row backgrounds */ .main-navigation .primary-menu-container > ul > li:not(.rr-services-menu):not(.rr-service-areas-menu) > .sub-menu > li { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } /* Last row no divider */ .main-navigation .primary-menu-container > ul > li:not(.rr-services-menu):not(.rr-service-areas-menu) > .sub-menu > li:last-child { border-bottom: none !important; } /* About links */ .main-navigation .primary-menu-container > ul > li:not(.rr-services-menu):not(.rr-service-areas-menu) > .sub-menu > li > a { background: transparent !important; color: #ffffff !important; padding: 13px 12px !important; border-radius: 10px !important; transition: background-color .2s ease, color .2s ease, padding-left .2s ease; } /* Hover only */ .main-navigation .primary-menu-container > ul > li:not(.rr-services-menu):not(.rr-service-areas-menu) > .sub-menu > li > a:hover { background: rgba(255,255,255,.07) !important; color: #eadba3 !important; padding-left: 16px !important; } /* ========================================================= 2. SERVICES MEGA MENU — ADD LOGO ========================================================= */ @media (min-width: 1025px) { .main-navigation .rr-services-menu > .sub-menu { /* * Make room on the left for logo */ width: 900px !important; max-width: 900px !important; padding: 28px 32px 28px 225px !important; position: absolute !important; background: linear-gradient( 180deg, #79734f 0%, #615d41 34%, #39382b 65%, #080808 100% ) !important; border-radius: 24px !important; box-shadow: 0 22px 55px rgba(0,0,0,.23) !important; } /* Logo */ .main-navigation .rr-services-menu > .sub-menu::before { content: ""; position: absolute; left: 42px; top: 50%; width: 135px; height: 135px; transform: translateY(-50%); background-image: url("https://relaxrealm.com/wp-content/uploads/2024/04/Artboard-1-copy-7@2x.png"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } /* Divider after logo */ .main-navigation .rr-services-menu > .sub-menu { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* * Existing ::after was center divider. * Move it so it divides the TWO service columns, * not the logo. */ .main-navigation .rr-services-menu > .sub-menu::after { left: 62% !important; top: 30px !important; bottom: 30px !important; background: rgba(255,255,255,.13) !important; } /* ===================================================== SERVICES — TRANSPARENT LINKS ===================================================== */ .main-navigation .rr-services-menu > .sub-menu > li { background: transparent !important; border: none !important; } .main-navigation .rr-services-menu > .sub-menu > li > a { background: transparent !important; border: none !important; border-radius: 10px !important; padding: 10px 7px !important; color: #ffffff !important; transition: background-color .2s ease, color .2s ease, transform .2s ease; } /* Subtle hover instead of solid block */ .main-navigation .rr-services-menu > .sub-menu > li > a:hover { background: rgba(255,255,255,.055) !important; color: #eadba3 !important; transform: translateX(3px); } /* ===================================================== 3. SERVICE AREAS — OUTER PANEL ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu { width: 760px !important; max-width: 760px !important; padding: 22px 26px 22px 210px !important; background: linear-gradient( 180deg, #79734f 0%, #605c40 34%, #37362a 65%, #080808 100% ) !important; border-radius: 24px !important; box-shadow: 0 22px 55px rgba(0,0,0,.23) !important; } /* Service Areas logo */ .main-navigation .rr-service-areas-menu > .sub-menu::before { content: ""; position: absolute; left: 42px; top: 50%; width: 125px; height: 125px; transform: translateY(-50%); background-image: url("https://relaxrealm.com/wp-content/uploads/2024/04/Artboard-1-copy-7@2x.png"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } /* Logo divider */ .main-navigation .rr-service-areas-menu > .sub-menu::after { left: 185px !important; top: 30px !important; bottom: 30px !important; background: rgba(255,255,255,.13) !important; } /* ===================================================== SERVICE AREA CITY ROWS — REMOVE BOXES ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; border-radius: 0 !important; margin: 0 !important; overflow: visible !important; } .main-navigation .rr-service-areas-menu > .sub-menu > li:last-child { border-bottom: none !important; } /* City link */ .main-navigation .rr-service-areas-menu > .sub-menu > li > a { background: transparent !important; border: none !important; border-radius: 9px !important; padding: 14px 10px !important; color: #ffffff !important; transition: background-color .2s ease, color .2s ease, padding-left .2s ease; } /* City hover */ .main-navigation .rr-service-areas-menu > .sub-menu > li:hover > a { background: rgba(255,255,255,.055) !important; color: #eadba3 !important; padding-left: 15px !important; } /* ===================================================== CITY SERVICE ACCORDION CONTENT ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu { /* * No solid rectangle behind services */ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 8px 16px !important; } /* Service rows */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li { background: transparent !important; border: none !important; } /* Individual service links */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a { background: transparent !important; border: none !important; border-radius: 8px !important; padding: 9px 5px !important; color: rgba(255,255,255,.95) !important; transition: background-color .2s ease, color .2s ease, transform .2s ease; } /* Subtle service hover */ .main-navigation .rr-service-areas-menu > .sub-menu > li > .sub-menu > li > a:hover { background: rgba(255,255,255,.045) !important; color: #eadba3 !important; transform: translateX(3px); } /* ===================================================== REMOVE CURRENT CITY BLOCK BACKGROUND ===================================================== */ .main-navigation .rr-service-areas-menu > .sub-menu > li.current-menu-item > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current-menu-ancestor > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current_page_item > a, .main-navigation .rr-service-areas-menu > .sub-menu > li.current_page_ancestor > a { background: transparent !important; color: #ffffff !important; } } /* ========================================================= 4. MOBILE — KEEP OLIVE ACTIVE COLOR ========================================================= */ @media (max-width: 1024px) { .mobile-navigation li.current-menu-item > a, .mobile-navigation li.current_page_item > a, .mobile-navigation li.current-menu-ancestor > a, .mobile-navigation li.current_page_ancestor > a { color: #aaa167 !important; background: rgba(123,118,78,.12) !important; } .mobile-navigation a:hover, .mobile-navigation a:focus { color: #aaa167 !important; } }