/* ===================================================================== Deborah Potts Counselling - header / mega menu enhancements (template-only override, loaded last from index.php) Brand: #155e71 (deep teal) #178eb5 (blue) #2ab3b5 (aqua) ===================================================================== */ /* ---------- Telephone ---------- */ .s5_tel { font-family: 'Open Sans', Helvetica, Arial, sans-serif; } .s5_tel .moduletable, .s5_tel .-absolute { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; } .s5_tel .mod-custom > div + div { display: none; } /* empty   line */ .s5_tel .mod-custom > div { white-space: nowrap; } .s5_tel img { height: 22px !important; width: auto !important; margin: 0 4px 0 0 !important; vertical-align: middle; } .s5_tel a.s5_tel_link, .s5_tel a.s5_tel_link:hover { text-decoration: none; } .s5_tel a.s5_tel_link { color: #155e71; font-size: 16px; font-weight: 400; letter-spacing: .3px; transition: color .2s; } .s5_tel a.s5_tel_link:hover { color: #2ab3b5; } .s5_tel_mobile { display: none; } /* ===================================================================== DESKTOP + TABLET (menu visible) >= 769px ===================================================================== */ @media screen and (min-width: 769px) { /* containing block for the full-width dropdown = the header bar (#s5_logo_and_options_inner, or #s5_menu_wrap when it floats) */ #s5_logo_and_options_width, #s5_menu_inner, #jux_memamenu321 #megamenucss, #jux_memamenu321 #megamenucss #js-mainnav.megamenu, #jux_memamenu321 #megamenucss #js-mainnav.megamenu .js-megamenu, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.megamenu.level0, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.megamenu.level0 > li.megacss { position: static !important; } /* phone: top right, above the menu */ .s5_tel_desktop { float: right; height: 44px; line-height: 44px; padding-right: 14px; padding-top:20px; } /* menu block: right aligned under the phone, no grey box / borders */ #jux_memamenu321 { float: right; clear: right; padding-top: 0 !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu, #jux_memamenu321 #megamenucss #js-mainnav.megamenu .js-megamenu, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.megamenu.level0 { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.megamenu.level0 { display: flex; flex-wrap: nowrap; float: right; left: auto !important; transform: none !important; margin: 0; padding: 0; } #s5_menu_wrap #jux_memamenu321 li, #s5_menu_wrap #jux_memamenu321 li:hover { background: transparent !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss { float: none; border: 0 !important; box-shadow: none !important; } #jux_memamenu321 #js-mainnav.megamenu .js-megamenu i.jux-fa { display: none !important; } /* level 0 links */ #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss { position: relative; display: block; padding: 14px 14px 22px !important; line-height: 20px; color: #3a3a3a !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: color .2s ease; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss span.menu-title { background: none !important; padding: 0 !important; letter-spacing: .4px; } /* animated underline (sits on the header's bottom border) */ #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: #2ab3b5; border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss:hover > a.megacss, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss:focus, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss.active > a.megacss { color: #155e71 !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss:hover > a.megacss::after, #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss:focus::after { transform: scaleX(1); } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss.active > a.megacss::after { transform: scaleX(1); background: #155e71; } /* dropdown caret */ #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.haschild > a.megacss span.menu-title::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s ease, margin .25s ease; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.haschild:hover > a.megacss span.menu-title::after { transform: rotate(-135deg); margin-bottom: -1px; } /* ---------- full-width mega dropdown ---------- */ #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > .childcontent { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 60; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > .childcontent > .childcontent-inner-wrap.dropdown-menu { float: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; background: #155e71 !important; border: 0 !important; border-top: 3px solid #2ab3b5 !important; box-shadow: 0 22px 34px -18px rgba(0, 0, 0, .45) !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner { width: auto !important; max-width: 1237px; margin: 0 auto !important; padding: 30px 28px 34px; box-sizing: border-box; display: grid !important; grid-template-columns: 1.15fr repeat(3, 1fr); column-gap: 0; row-gap: 18px; border: 0 !important; float: none !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner::before, #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner::after { content: none !important; display: none !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner > .megacol { width: auto !important; float: none !important; margin: 0 !important; padding: 0 22px !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, .14) !important; box-sizing: border-box; } #jux_memamenu321 #js-mainnav.megamenu .childcontent ul.megamenu.level1 { margin: 0 !important; padding: 0; float: none; width: 100%; } /* intro column */ #jux_memamenu321 .s5-mega-intro { padding: 2px 28px 0 0; color: #fff; } #jux_memamenu321 .s5-mega-intro .s5-mega-intro-title { display: block; font-family: Merriweather, Georgia, serif; font-size: 22px; line-height: 1.3; color: #fff; margin: 0 0 12px; } #jux_memamenu321 .s5-mega-intro a.s5-mega-intro-link { display: inline-block; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; color: #fff !important; text-decoration: none; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 30px; transition: background .2s, border-color .2s; opacity: 1 !important; background: transparent; } #jux_memamenu321 .s5-mega-intro a.s5-mega-intro-link:hover { background: #2ab3b5; border-color: #2ab3b5; } /* level 1 links */ #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss { float: none !important; width: 100%; background: transparent !important; border: 0 !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss > a.megacss { display: block; padding: 9px 12px 9px 14px !important; margin: 1px 0 !important; color: rgba(255, 255, 255, .86) !important; opacity: 1 !important; background: transparent !important; border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 3px 3px 0; box-shadow: none !important; font-size: 15px; line-height: 1.4; white-space: normal; text-transform: none; transition: background .2s, color .2s, padding .2s, border-color .2s; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss > a.megacss span.menu-title { font-size: 15px !important; background: none !important; padding: 0 !important; white-space: normal; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss:hover > a.megacss, #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss > a.megacss:focus, #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent ul.level1 li.megacss.active > a.megacss { background: rgba(255, 255, 255, .09) !important; color: #fff !important; border-left-color: #2ab3b5 !important; padding-left: 18px !important; } /* floating (scrolled) bar keeps logo + phone + menu */ #s5_menu_wrap.s5_wrap_fmfullwidth { box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .25); } #s5_menu_wrap.s5_wrap_fmfullwidth #s5_menu_inner { overflow: visible; } #s5_menu_wrap.s5_wrap_fmfullwidth #s5_menu_inner::after { content: ""; display: block; clear: both; } } /* ---------- Wide desktop: centre dropdown content with the header ---------- */ @media screen and (min-width: 1200px) { #s5_menu_wrap.s5_wrap_fmfullwidth .s5_logo { margin-top: 25px !important; } } /* ===================================================================== SMALL DESKTOP / TABLET LANDSCAPE 769px - 1199px : two clean rows ===================================================================== */ @media screen and (min-width: 769px) and (max-width: 1199px) { #s5_logo_and_options_inner { height: auto !important; } .s5_tel_desktop { height: auto; line-height: 1.4; margin-top: 36px; } #jux_memamenu321 { float: none !important; clear: both; width: 100%; border-top: 1px solid #e6e9e9; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.megamenu.level0 { float: none; justify-content: center; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss { padding: 14px 12px !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss::after { left: 12px; right: 12px; } /* keep the page from jumping when the menu row floats */ #s5_logo_and_options_inner:has(#s5_menu_wrap.s5_wrap_fmfullwidth) { padding-bottom: 49px; } /* floating bar on tablets = slim menu row only */ #s5_menu_wrap.s5_wrap_fmfullwidth .s5_logo, #s5_menu_wrap.s5_wrap_fmfullwidth .s5_logo_module, #s5_menu_wrap.s5_wrap_fmfullwidth .s5_tel_desktop { display: none !important; } #s5_menu_wrap.s5_wrap_fmfullwidth #jux_memamenu321 { border-top: 0; } } @media screen and (min-width: 769px) and (max-width: 991px) { #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner { grid-template-columns: repeat(3, 1fr); padding: 24px 16px 28px; } #jux_memamenu321 .s5-mega-intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 4px; } #jux_memamenu321 .s5-mega-intro .s5-mega-intro-title { margin: 0; font-size: 19px; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu .childcontent .childcontent-inner > .megacol:nth-of-type(2) { border-left: 0 !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss { padding: 14px 9px !important; font-size: 14px; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 li.megacss span.menu-title { font-size: 14px !important; } #jux_memamenu321 #megamenucss #js-mainnav.megamenu ul.level0 > li.megacss > a.megacss::after { left: 9px; right: 9px; } } /* ===================================================================== MOBILE <= 768px (S5 mobile bar) ===================================================================== */ @media screen and (max-width: 768px) { #s5_logo_and_options_inner { height: auto !important; padding-bottom: 14px; } .s5_logo_wrap { float: none !important; text-align: center; } .s5_logo_wrap .s5_logo { float: none !important; display: block; margin: 18px auto 10px !important; width: auto !important; max-width: 300px; } .s5_tel_mobile { display: block; clear: both; text-align: center; } .s5_tel_mobile .mod-custom > div:first-child { display: inline-block; padding: 6px 18px 6px 10px; border: 1px solid #2ab3b5; border-radius: 30px; background: #f2fafa; } .s5_tel_mobile a.s5_tel_link { font-size: 16px; } /* brand-coloured mobile bars and drop-down */ #s5_responsive_mobile_top_bar, #s5_responsive_mobile_bottom_bar { background: #155e71 !important; } #s5_responsive_mobile_toggle_click_menu, #s5_responsive_mobile_toggle_click_menu span, #s5_responsive_mobile_scroll, #s5_responsive_mobile_scroll a { border-color: rgba(255, 255, 255, .12) !important; } .s5_responsive_mobile_open, .s5_responsive_mobile_closed:hover, #s5_responsive_mobile_scroll:hover { background: #0f4a59 !important; } #s5_responsive_mobile_bar_active, #s5_responsive_mobile_bar_active * { color: rgba(255, 255, 255, .85) !important; } #s5_responsive_mobile_drop_down_menu .s5_responsive_mobile_drop_down_inner, #s5_responsive_mobile_drop_down_search .s5_responsive_mobile_drop_down_inner { background: #124f5f !important; } #s5_responsive_mobile_drop_down_menu .current > a, #s5_responsive_mobile_drop_down_menu .current > span { color: #7fdadb !important; } #s5_responsive_mobile_drop_down_wrap, #s5_responsive_mobile_drop_down_menu { width: 100% !important; max-width: none !important; left: 0 !important; } #s5_responsive_mobile_drop_down_menu a, #s5_responsive_mobile_drop_down_menu span { font-size: 17px !important; line-height: 1.35 !important; padding-top: 11px !important; padding-bottom: 11px !important; } #s5_responsive_mobile_drop_down_menu ul ul a, #s5_responsive_mobile_drop_down_menu ul ul span { font-size: 15px !important; padding-top: 8px !important; padding-bottom: 8px !important; } }