/** * CF Mega Menu (Services) — McCabe's Automotive Specialists * * Desktop only. Everything that reshapes the dropdown lives inside the * min-width:981px block so Divi's mobile accordion behaves exactly as before. * * Specificity note: Divi prints per-module CSS inline in , after this * file, and marks it !important. Two of its rules compete directly here: * * .et_pb_fullwidth_menu_0_tb_header.et_pb_fullwidth_menu .nav li ul * { background-color:#003f80!important } (0,3,2) * .et_pb_fullwidth_menu_0_tb_header.et_pb_fullwidth_menu .nav li ul.sub-menu a * { color:#FFFFFF!important } (0,4,3) * * So panel rules are anchored on * `.et_pb_fullwidth_menu.et_pb_module .fullwidth-menu` to clear (0,4,3) * without depending on the `_0_tb_header` module index, which changes if the * header layout is rebuilt. * * Colour note: every piece of text in the panel is solid #ffffff. Dimmed * whites (#cddced, #dbe6f2) used to stand in for a secondary text tone, but * against a navy panel they read as white-at-reduced-opacity, and any change * of panel colour underneath them looked like the text itself had darkened. * Solid white is stable whatever the card is doing. * * Layout note: the categories flow through a 3 column multicol container * rather than a 6 cell grid. A grid row is as tall as its tallest cell, so the * 2 link categories left tall holes beside the 7 link one. Multicol packs them * end to end and balances the columns instead, and it keeps the panel in the * same order as the WordPress menu. */ /* ========================================================================== Desktop mega panel ========================================================================== */ @media screen and (min-width: 981px) { /* Every wrapper between the section and the menu has to be static, or the panel anchors to whichever one is relative. Divi puts position:relative on .et_pb_row inside the menu module, which is the one that bites. */ .et_pb_fullwidth_menu:has(.cf-mm-parent), .et_pb_fullwidth_menu:has(.cf-mm-parent) .et_pb_row, .et_pb_fullwidth_menu:has(.cf-mm-parent) .et_pb_menu__wrap, .et_pb_fullwidth_menu:has(.cf-mm-parent) .et_pb_menu__menu, .et_pb_fullwidth_menu:has(.cf-mm-parent) .fullwidth-menu-nav, .et_pb_fullwidth_menu:has(.cf-mm-parent) .fullwidth-menu { position: static; } .et_pb_section:has(.cf-mm-parent), .et_pb_fullwidth_menu:has(.cf-mm-parent), .et_pb_fullwidth_menu:has(.cf-mm-parent) .et_pb_row, .et_pb_fullwidth_menu:has(.cf-mm-parent) .et_pb_menu__wrap, .et_pb_fullwidth_menu:has(.cf-mm-parent) .fullwidth-menu-nav { overflow: visible; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu > li.cf-mm-parent { position: static; } /* ---- the panel itself ------------------------------------------------ */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu li.cf-mm-parent > ul.cf-mm-panel { --cf-gutter: max(25px, calc((100% - 1280px) / 2)); --cf-rail: 268px; display: block !important; columns: 3; column-gap: 44px; text-align: left; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; /* Right padding reserves the rail's lane; the rail is absolute. */ padding: 36px calc(var(--cf-gutter) + var(--cf-rail) + 44px) 32px var(--cf-gutter) !important; /* Floor so a short menu can never let the rail overflow the panel. */ min-height: 396px; background-color: #003f80 !important; border: 0 !important; border-top: 4px solid #b21e0e !important; border-radius: 0 !important; box-shadow: 0 18px 34px rgba(0, 0, 0, .28) !important; z-index: 9999; /* Own the open/closed state outright rather than leaning on Divi's dropdown rules, which the panel no longer reliably matches once it is restyled this heavily. */ opacity: 0 !important; visibility: hidden !important; /* There is a 25px dead gap between the Services link and the panel (the menu module's bottom padding). Without a grace period the panel closes while the cursor is crossing it. Re-entering the panel keeps it open on its own, because the panel is a descendant of the li the :hover rule below targets. */ transition: opacity .2s ease .3s, visibility 0s linear .5s !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu > li.cf-mm-parent:hover > ul.cf-mm-panel, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu > li.cf-mm-parent:focus-within > ul.cf-mm-panel { opacity: 1 !important; visibility: visible !important; /* Above any panel still fading out, regardless of DOM order. */ z-index: 10000; transition: opacity .2s ease 0s, visibility 0s linear 0s !important; } /* The grace period above is what lets the cursor cross the gap, but it also means a panel lingers when the cursor moves sideways onto another top level item. As soon as any sibling is hovered, drop the grace period so the outgoing panel closes at once instead of stacking. No transition at all: if the outgoing panel faded while the incoming one was still fading in, both would be semi-transparent at once and the two would visibly ghost through each other. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu:has(> li:hover) > li.cf-mm-parent:not(:hover) > ul.cf-mm-panel { opacity: 0 !important; visibility: hidden !important; transition: none !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; } /* Keep a category and its links together in one column. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat { -webkit-column-break-inside: avoid; break-inside: avoid; margin: 0 0 24px !important; } /* ---- category heading ------------------------------------------------ */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat > a { display: flex !important; align-items: center; gap: 11px; width: auto !important; padding: 0 0 10px !important; margin: 0 0 10px !important; border-bottom: 1px solid rgba(255, 255, 255, .22) !important; font-family: "Francois One", Helvetica, Arial, sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: .2px; text-transform: none !important; color: #ffffff !important; opacity: 1 !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat > a:hover { color: #ffffff !important; border-bottom-color: #b21e0e !important; } /* Divi's dropdown caret has no job inside the panel. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat > a:first-child:after { display: none !important; } /* ---- leaf lists ------------------------------------------------------ */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul { position: static !important; display: block !important; /* `inherit`, not `visible`. All this has to beat is Divi's un-important `.nav li ul { visibility: hidden }`, so the leaf lists show once the panel is open. `visible` also cancelled the panel's own `visibility: hidden`, and visibility is what takes a closed panel out of hit testing: opacity 0 alone still receives the pointer. That left an invisible slab of leaf links lying over the top of the page, so moving the cursor across the hero hovered a link inside the Services li and re-opened the panel. The same override also kept those links in the tab order while the menu was closed. */ visibility: inherit !important; opacity: 1 !important; transform: none !important; animation: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Divi renders submenu items as inline-block, which would run the leaf links together on one line inside the wider panel columns. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li > a { display: inline-block !important; position: relative; width: auto !important; padding: 5px 0 !important; font-family: "Open Sans", Helvetica, Arial, sans-serif !important; /* Matches body size, at 600 so light-on-navy does not read thinner than body copy does dark-on-white. */ font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; text-transform: none !important; text-decoration: none !important; color: #ffffff !important; background: transparent !important; opacity: 1 !important; transform: none !important; } /* Same swipe-in underline the footer links use (footer template 9883, et_pb_text custom CSS): a 3px #B21F0D bar that grows from the left. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: #b21f0d; transition: width .2s ease-in-out, left .3s ease-in-out; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li > a:hover { background: transparent !important; transform: none !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li > a:hover::after { width: 100%; left: 0; } /* ---- current page ---------------------------------------------------- */ /* Divi's own active colour is white, which works on the navy panel, but its selector is only (0,5,4) for leaves and misses the category level, so both are set explicitly here. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat.current-menu-item > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat.current_page_item > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat.current-menu-ancestor > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat.current-menu-parent > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-cat.current_page_ancestor > a { color: #ffffff !important; border-bottom-color: #b21e0e !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li.current-menu-item > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li.current_page_item > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li.current-menu-ancestor > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel li.cf-mm-cat > ul > li.current_page_ancestor > a { color: #ffffff !important; font-weight: 600 !important; } /* ---- About Us panel -------------------------------------------------- */ /* Its menu items are flat links rather than categories with children, so this panel is a card grid instead of the Services column flow: one tall photo card for the team, five icon cards beside it. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu li.cf-mm-parent > ul.cf-mm-panel.cf-mm-panel--about { columns: auto !important; display: grid !important; grid-template-columns: 300px repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-right: var(--cf-gutter) !important; min-height: 0; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link { margin: 0 !important; } /* Team card: first column, both rows. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-feature { grid-column: 1; grid-row: 1 / span 2; } /* Five cards into six remaining cells, so the last one takes the slack rather than leaving a hole. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link:last-child { grid-column: span 2; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link > a { display: flex !important; flex-direction: column; align-items: flex-start; gap: 7px; height: 100%; width: auto !important; padding: 16px 18px 15px !important; background: #144e8a !important; border: 1px solid #35679a; border-radius: 10px; font-family: "Open Sans", Helvetica, Arial, sans-serif !important; text-transform: none !important; text-decoration: none !important; color: #ffffff !important; opacity: 1 !important; transition: background .15s ease; } /* One hover state: the card fades to the nav CTA blue. Nothing else moves. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link > a:hover { background: #0e3c89 !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-card-ico { flex: 0 0 auto; display: block; line-height: 0; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-card-ico img { width: 26px; height: 26px; display: block; object-fit: contain; filter: invert(1); } /* Card title, carrying the same swipe-in underline as the footer links. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-cat-label { position: relative; display: inline-block; font-family: "Francois One", Helvetica, Arial, sans-serif !important; font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: .2px; color: #ffffff; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-cat-label::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 3px; background-color: #b21f0d; transition: width .2s ease-in-out, left .3s ease-in-out; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-card-copy { font-size: 13px; line-height: 1.55; font-weight: 400; color: #ffffff; } /* Feature photo. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-feature-img { display: block; width: 100%; margin-bottom: 3px; border-radius: 6px; overflow: hidden; line-height: 0; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about .cf-mm-feature-img img { display: block; width: 100%; height: 148px; object-fit: cover; object-position: center 38%; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-feature > a { padding: 14px !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link.current-menu-item > a, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link.current_page_item > a { border-color: #b21f0d; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link.current-menu-item .cf-mm-cat-label::after, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-link.current_page_item .cf-mm-cat-label::after { width: 100%; } /* ---- category icon --------------------------------------------------- */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-cat-ico { flex: 0 0 auto; display: block; line-height: 0; } /* The source PNGs are black line art, inverted to read on the navy panel. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-cat-ico img { width: 28px; height: 28px; display: block; object-fit: contain; filter: invert(1); } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-cat-label { min-width: 0; } /* ---- right hand rail ------------------------------------------------- */ /* The rail sits in the lane reserved by the panel's right padding. width needs !important to beat the generic `.cf-mm-panel > li` reset above, which forces width:auto on every panel child. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-rail { position: absolute; top: 36px; right: var(--cf-gutter); width: var(--cf-rail) !important; display: flex !important; flex-direction: column; gap: 14px; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card { display: flex !important; flex-direction: column; gap: 7px; width: auto !important; padding: 18px 18px 16px !important; background: #144e8a !important; border: 1px solid #35679a; border-radius: 10px; text-decoration: none !important; line-height: 1.4 !important; /* Divi dims every menu link it owns with `.et-menu a:hover {opacity:.7}`. On a rail item that veils the whole element, fill and text together, which reads as the text darkening on hover. The panel's other links already carry this guard; the rail items were missed. */ opacity: 1 !important; transition: background .15s ease; } /* One hover state: the card fades to the nav CTA blue. Nothing else moves. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card:hover { background: #0e3c89 !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card-title { font-family: "Francois One", Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.2; color: #ffffff; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card-copy { font-size: 13px; line-height: 1.55; color: #ffffff; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card-link { margin-top: 1px; font-size: 13px; font-weight: 700; color: #ffffff; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-btn { display: block !important; width: auto !important; padding: 13px 14px !important; background: #b21e0e !important; border-radius: 5px; color: #fff !important; font-family: "Open Sans", Helvetica, Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center; text-decoration: none !important; opacity: 1 !important; transition: background .15s ease; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-btn:hover { background: #86170a !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-tel { display: block !important; width: auto !important; padding: 0 !important; font-family: "Francois One", Helvetica, Arial, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.2 !important; text-align: center; color: #ffffff !important; text-decoration: none !important; opacity: 1 !important; } /* Narrower desktops: the rail's lane is given back to the columns and the rail returns to the flow as a full width strip under them. The columns stay at 3 (about 280px each even at 981px), because dropping to 2 makes the panel roughly twice as tall, which is the opposite of the point. */ @media screen and (max-width: 1180px) { .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu li.cf-mm-parent > ul.cf-mm-panel { padding-right: var(--cf-gutter) !important; min-height: 0; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel > li.cf-mm-rail { position: static; width: auto !important; column-span: all; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 6px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-card { flex: 1 1 260px; } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-btn, .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel .cf-mm-tel { flex: 0 0 auto; } /* About Us: two card columns beside the team photo, so the cards keep a readable width. Five cards then fill three rows. */ .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu li.cf-mm-parent > ul.cf-mm-panel.cf-mm-panel--about { grid-template-columns: 260px repeat(2, minmax(0, 1fr)); } .et_pb_fullwidth_menu.et_pb_module .fullwidth-menu .cf-mm-panel--about > li.cf-mm-feature { grid-row: 1 / span 3; } } } /* ========================================================================== Mobile accordion — Divi clones the desktop list, so only tidy what it copied ========================================================================== */ @media screen and (max-width: 980px) { /* The rail and the leading icons are desktop only. The accordion keeps plain text rows: at mobile widths the icons read as clutter beside the labels, and one item (the team card, which is a photo on desktop) has no icon to show, so the column of glyphs was never going to line up anyway. The markup still carries them because Divi builds the mobile menu by cloning the desktop list, so there is one DOM for both. */ .cf-mm-rail, .cf-mm-cat-ico, .cf-mm-card-ico { display: none !important; } /* The card chrome is desktop only; the accordion keeps plain rows. */ .et_mobile_menu .cf-mm-card-copy, .et_mobile_menu .cf-mm-feature-img { display: none !important; } }