/* All The Leads — Mega Menu * Scoped to .atl-header so it won't leak into Divi modules. */ @font-face { font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 900; font-display: block; src: url("./fonts/fa-solid-900.woff2") format("woff2"); } @font-face { font-family: "Font Awesome 6 Duotone"; font-style: normal; font-weight: 900; font-display: block; src: url("./fonts/fa-duotone-900.woff2") format("woff2"); } .atl-header, .atl-mobile-panel { /* CSS custom properties duplicated on .atl-mobile-panel because at runtime the panel is reparented to (to escape Divi stacking contexts that trapped position:fixed on iOS Safari). Reparenting moves it outside .atl-header where these vars normally live, so we must redeclare them here or var(--brand-green) etc. resolve to nothing inside the drawer. */ --blue-1: #0f41d7; --blue-2: #2b35d6; --brand-green: #39b27e; --brand-green-dark: #2e9265; --navy: #1b2544; --text: #1f2742; --muted: #69728d; --line: #dfe4f0; --panel: #ffffff; --panel-soft: #f5f7fc; --badge: #e8efff; --yellow: #f7b617; --shadow: 0 18px 45px rgba(31, 39, 66, 0.16); --radius: 18px; --radius-sm: 12px; --max: 1380px; } .atl-header { position: relative; z-index: 99990; font-family: Inter, Arial, Helvetica, sans-serif; color: var(--text); /* Full-bleed break-out: regardless of what Divi row/column wraps this in, the header spans the full viewport width. */ width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; } /* Neutralize Divi's row padding / max-width constraints on the parent column so our header sits flush against the viewport edges. */ .et_pb_code_inner:has(> .atl-header), .et_pb_text_inner:has(> .atl-header), .et_pb_column:has(.atl-header), .et_pb_row:has(.atl-header), .et_pb_section:has(.atl-header) { padding: 0 !important; max-width: none !important; width: 100% !important; } .atl-header *, .atl-header *::before, .atl-header *::after { box-sizing: border-box; } .atl-header a, .atl-mobile-panel a { color: inherit; text-decoration: none; } .atl-header ul { margin: 0; padding: 0; list-style: none; } .atl-header img { display: block; max-width: 100%; } .atl-header button, .atl-header input { font: inherit; } .atl-wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; } .atl-topbar { background: linear-gradient(90deg, var(--blue-1) 0%, var(--blue-2) 100%); color: #fff; } .atl-topbar .atl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; } .atl-support { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .atl-support .heart { color: #4cd28c; font-size: 16px; line-height: 1; } .atl-support .phone { font-weight: 500; opacity: 0.95; } .atl-topbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; } .atl-search { display: flex; align-items: stretch; width: 340px; max-width: 100%; height: 34px; background: #fff; border: 0; border-radius: 10px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(15, 23, 42, 0.05); } .atl-search-icon { width: 38px; display: flex; align-items: center; justify-content: center; color: #6f7692; font-size: 14px; flex: 0 0 auto; } /* Shared input reset for BOTH desktop and mobile search */ .atl-search input, .atl-mobile-search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; padding: 0 14px 0 0; color: var(--text); font-size: 16px; /* Prevents iOS zoom-on-focus */ -webkit-appearance: none; /* Kill iOS default input styling */ appearance: none; } .atl-search input:focus, .atl-mobile-search input:focus { outline: 0; box-shadow: none; } /* Placeholder styling */ .atl-search input::placeholder, .atl-mobile-search input::placeholder { color: #8e96ad; opacity: 1; } .atl-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease; font-weight: 800; letter-spacing: 0.02em; } .atl-btn:hover { transform: translateY(-2px); } .atl-search button, .atl-login, .atl-store, .atl-cta { border-radius: 12px; } .atl-search button { padding: 0 22px; background: var(--brand-green); color: #fff; text-transform: uppercase; font-size: 12px; min-height: 34px; } .atl-search button:hover, .atl-login:hover, .atl-cta:hover { background: var(--brand-green-dark); } /* The search button is INSIDE the .atl-search container (which has overflow: hidden + rounded corners to look like a unified search bar). The shared .atl-btn:hover { transform: translateY(-2px) } lift made the button rise on hover, exposing the white .atl-search background underneath as an ugly white gap at the bottom of the button. Cancel the lift specifically for the search button to keep the bar illusion intact. */ .atl-search button:hover { transform: none; } .atl-login { background: var(--brand-green); color: #fff; min-height: 34px; padding: 0 20px; font-size: 13px; text-transform: uppercase; white-space: nowrap; } .atl-mainbar { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(10, 20, 55, 0.05); border-bottom: 3px solid #39b27e; } .atl-mainbar .atl-wrap { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 24px; min-height: 86px; } .atl-logo { display: inline-flex; align-items: center; padding: 10px 0; } .atl-logo img { width: 180px; height: auto; max-height: 62px; object-fit: contain; } .atl-desktop-nav { display: flex; justify-content: center; } .atl-menu { display: flex; align-items: center; gap: 8px; position: relative; } .atl-menu-item { position: relative; } .atl-menu-link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 17px; font-weight: 700; color: var(--text); border-radius: 10px; transition: color 0.2s ease; } .atl-menu-link:hover, .atl-menu-item.is-open > .atl-menu-link, .atl-menu-item.is-active > .atl-menu-link { color: var(--blue-1); } .atl-menu-item.has-mega > .atl-menu-link::after { content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 11px; line-height: 1; transform: translateY(1px); } .atl-menu-item.is-open > .atl-menu-link::before, .atl-menu-item.is-active > .atl-menu-link::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: -4px; height: 3px; background: var(--blue-1); border-radius: 999px; } .atl-menu-item.is-open > .atl-menu-link::after, .atl-menu-item.is-active > .atl-menu-link::after { transform: rotate(180deg) translateY(1px); } .atl-store { background: var(--yellow); color: #11203c; min-height: 44px; padding: 0 20px; gap: 10px; font-size: 15px; font-weight: 900; box-shadow: 0 6px 14px rgba(247, 182, 23, 0.22); white-space: nowrap; } .atl-store .cart { font-size: 18px; line-height: 1; } /* Hover-gap bridge: invisible pseudo-element that keeps the hover hitbox continuous between the top-level menu item and the mega panel below. Wider than the menu item so diagonal mouse paths still stay inside the menu-item subtree on the way down into the wide mega panel. */ .atl-menu-item.has-mega::after { content: ""; position: absolute; top: 100%; left: -400px; right: -400px; height: 22px; z-index: 60; pointer-events: none; } .atl-menu-item.has-mega.is-open::after { pointer-events: auto; } .atl-mega { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%) translateY(8px); background: var(--panel); border: 1px solid #d9e0ef; border-radius: 18px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .atl-mega::before { content: ""; position: absolute; top: -11px; left: 50%; width: 22px; height: 22px; background: #fff; border-top: 1px solid #d9e0ef; border-left: 1px solid #d9e0ef; transform: translateX(-50%) rotate(45deg); z-index: 0; } .atl-mega-inner { position: relative; z-index: 1; background: #fff; border-radius: 18px; overflow: hidden; } .atl-menu-item.is-open > .atl-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .atl-mega.leads { width: 520px; } .atl-mega.training { width: 560px; } .atl-mega.data-enrichment { width: 520px; } .atl-mega.marketing { width: 1180px; max-width: calc(100vw - 48px); } /* Staggered fade-in for items inside open mega panels */ @keyframes atlFadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .atl-menu-item.is-open .atl-list-item, .atl-menu-item.is-open .atl-mini-item { animation: atlFadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .atl-menu-item.is-open .atl-list-item:nth-child(1), .atl-menu-item.is-open .atl-mini-item:nth-child(1) { animation-delay: 0s; } .atl-menu-item.is-open .atl-list-item:nth-child(2), .atl-menu-item.is-open .atl-mini-item:nth-child(2) { animation-delay: 0.04s; } .atl-menu-item.is-open .atl-list-item:nth-child(3), .atl-menu-item.is-open .atl-mini-item:nth-child(3) { animation-delay: 0.08s; } .atl-menu-item.is-open .atl-list-item:nth-child(4), .atl-menu-item.is-open .atl-mini-item:nth-child(4) { animation-delay: 0.12s; } .atl-menu-item.is-open .atl-list-item:nth-child(5), .atl-menu-item.is-open .atl-mini-item:nth-child(5) { animation-delay: 0.16s; } .atl-menu-item.is-open .atl-list-item:nth-child(6), .atl-menu-item.is-open .atl-mini-item:nth-child(6) { animation-delay: 0.20s; } .atl-menu-item.is-open .atl-list-item:nth-child(7), .atl-menu-item.is-open .atl-mini-item:nth-child(7) { animation-delay: 0.24s; } .atl-mega-section { padding: 20px 20px 12px; } /* v1.2.5: panel section heads (.atl-mega-head — Leads/Training/DE) and Marketing column heads (.atl-col-head) share the same subtle grey card look so all dropdowns feel consistent. */ .atl-mega-head, .atl-col-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.04); border-radius: 10px; border-bottom: 0; } .atl-icon-box { width: 46px; height: 46px; border-radius: 12px; background: var(--badge); display: flex; align-items: center; justify-content: center; color: #3d63ea; font-size: 20px; flex: 0 0 auto; } /* v3 (2026-05-01): unified panel section headers per team feedback — single-column panel titles now match the Marketing column-title style (small, uppercase, brand blue) so all dropdowns feel uniform. */ .atl-mega-title { font-size: 15px; font-weight: 900; color: #1e4fd8; margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.04em; } .atl-mega-copy, .atl-item-copy, .atl-callout-copy, .atl-helper-copy { color: var(--muted); font-size: 13px; line-height: 1.35; } .atl-list-item, .atl-helper-card { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background-color 0.15s ease; } .atl-list-item:last-child { border-bottom: 0; } .atl-list-item:hover { background-color: var(--panel-soft); } .atl-item-title { font-size: 15px; font-weight: 800; color: #222a47; margin: 0 0 3px; line-height: 1.3; } .atl-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; font-size: 14px; color: #8892b0; line-height: 1; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease; } /* Leaf links: chevron slides right on hover ("go to page") */ /* v3 (2026-05-01): drop the redundant nav chevrons on leaf items per team feedback — Marketing items never had them and looked cleaner. Keep chevrons only where they indicate state: mobile-trigger accordions and sub-submenu toggles. */ .atl-list-item:not(.has-children) .atl-arrow, .atl-mobile-submenu .atl-mobile-link .atl-arrow { display: none; } /* Subtle hover lift instead — visual cue without the chevron noise */ .atl-list-item:not(.has-children):hover { transform: translateX(2px); } /* Expandable items: chevron rotates on expand */ .atl-list-item.has-children.is-expanded .atl-arrow { transform: rotate(90deg); color: var(--blue-1); } .atl-icon-box i, .atl-mini-icon i, .atl-mobile-icon i { font-size: inherit; line-height: 1; } .atl-icon-box .fa-duotone, .atl-mini-icon .fa-duotone, .atl-mobile-icon .fa-duotone { --fa-primary-color: #2f59dc; --fa-secondary-color: #9db3ff; --fa-secondary-opacity: 0.9; } .atl-helper-card { background: #f2f5fb; border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px; margin-top: 12px; } .atl-cta, .atl-cta:visited, .atl-cta:link { background: #1653e4; color: #ffffff; min-height: 36px; padding: 0 16px; font-size: 13px; font-weight: 800; white-space: nowrap; border-radius: 8px; gap: 6px; text-decoration: none; } .atl-cta:hover, .atl-cta:focus { background: #0f41d7; color: #ffffff; } .atl-cta i { color: #ffffff; } .atl-cta.secondary { background: transparent; color: #239b82; border: 2px solid #4ab89d; } .atl-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr 260px; gap: 0; align-items: stretch; } .atl-col { padding: 18px 20px 10px; min-width: 0; } .atl-col + .atl-col { border-left: 1px solid var(--line); } /* .atl-col-head consolidated into the .atl-mega-head rule above (v1.2.5). Kept as a marker for styles specific to columns if any are needed later. */ .atl-col-title { margin: 0 0 3px; font-size: 15px; font-weight: 900; color: #1e4fd8; text-transform: uppercase; letter-spacing: 0.04em; } .atl-mini-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: flex-start; padding: 12px 6px; border-radius: 10px; transition: background-color 0.15s ease; } .atl-mini-item:hover { background-color: var(--panel-soft); } .atl-mini-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--badge); display: flex; align-items: center; justify-content: center; color: #3460e5; font-size: 20px; flex: 0 0 auto; } .atl-mini-title { font-size: 14px; font-weight: 800; margin: 0 0 3px; color: #1f2742; line-height: 1.3; } .atl-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 0 8px; border-radius: 999px; background: #1d57e6; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; vertical-align: middle; } .atl-badge.green { background: #39b27e; } .atl-callout { padding: 20px 18px 18px; margin: 12px; border-radius: 12px; background: linear-gradient(180deg, #eaf0ff 0%, #edf3ff 100%); border: 1px solid #cbd8f8; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100% - 24px); } .atl-callout .pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; padding: 0 12px; border-radius: 999px; background: #1d57e6; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .atl-callout-title { font-size: 20px; line-height: 1.1; margin: 0 0 8px; color: #1f2742; font-weight: 900; } /* v3 (2026-05-01): callout copy now has explicit bottom margin so it doesn't crash into the bullets list. Balances the rhythm Lyndsay flagged. */ .atl-callout-copy { margin: 0 0 14px; } .atl-checks { margin: 0 0 18px; display: grid; gap: 6px; } .atl-checks li { position: relative; padding-left: 22px; color: #4f5b7a; line-height: 1.35; font-size: 13px; } .atl-checks li::before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: 0; top: 0; color: #1d57e6; } .atl-mobile-top, .atl-mobile-panel { display: none; } /* v1.3.0: header (logo + container) scrolls with the page; only the hamburger button floats. Reverted v1.2.7-v1.2.9 fixed-bar approach. */ .atl-mobile-top { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid #dde5f4; box-shadow: 0 10px 24px rgba(10, 20, 55, 0.08); padding: 10px 0; } .atl-mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; } .atl-mobile-topbar .atl-logo img { width: 164px; } .atl-hamburger { width: 46px; height: 46px; border: 0; border-radius: 12px; background: #edf2ff; color: #1f4fd8; font-size: 24px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* v1.3.0: hamburger button floats fixed in the top-right while the rest of the header scrolls naturally. Once reparented to by JS, this is independent of any Divi transform/will-change containing-block trap. v1.3.2: hide on desktop — reparenting escaped the .atl-mobile-top { display: none } rule, so it needs its own viewport guard. */ body > .atl-hamburger { display: none; } @media (max-width: 1100px) { body > .atl-hamburger { display: inline-flex; position: fixed; top: 14px; right: 14px; z-index: 99990; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18); transition: box-shadow 0.2s ease, transform 0.15s ease; } body > .atl-hamburger:hover, body > .atl-hamburger:focus { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24); } } .atl-mobile-close { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #d5deef; background: #fff; color: #223056; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; flex: 0 0 auto; } .atl-mobile-support { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; flex: 1; min-width: 0; color: #1f2742; } .atl-mobile-support .heart { color: #42c786; } .atl-mobile-support span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atl-mobile-login { min-height: 44px; padding: 0 18px; background: var(--brand-green); color: #fff; border-radius: 12px; text-transform: uppercase; font-weight: 800; border: 0; white-space: nowrap; } .atl-mobile-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .atl-mobile-brandrow img { width: 144px; } .atl-mobile-meta { display: grid; gap: 12px; margin-bottom: 14px; } .atl-mobile-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .atl-mobile-search { display: flex; border: 0; border-radius: 14px; overflow: hidden; background: #fff; height: 48px; width: 100%; box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(15, 23, 42, 0.05); } .atl-mobile-search .atl-search-icon { width: 46px; } .atl-mobile-search input { padding-right: 8px; } .atl-mobile-search button { border: 0; background: var(--brand-green); color: #fff; min-width: 114px; font-weight: 800; text-transform: uppercase; } .atl-mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; /* near max int32; beats WP admin bar (99999), Divi sticky (99998), staging banners */ background: rgba(18, 25, 48, 0.55); opacity: 0; visibility: hidden; transition: 0.25s ease; /* Force own stacking context so iOS Safari can't trap us inside a parent's transform */ isolation: isolate; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .atl-mobile-panel.is-open { opacity: 1; visibility: visible; } .atl-mobile-drawer { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 12%, rgba(67, 94, 255, 0.45), transparent 24%), radial-gradient(circle at 82% 68%, rgba(255, 178, 127, 0.3), transparent 22%), linear-gradient(180deg, #eef2fb 0%, #f6f8fd 100%); transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px 24px; /* iOS notch / Dynamic Island safe areas */ padding-top: max(16px, env(safe-area-inset-top, 16px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)); padding-left: max(14px, env(safe-area-inset-left, 14px)); padding-right: max(14px, env(safe-area-inset-right, 14px)); } .atl-mobile-panel.is-open .atl-mobile-drawer { transform: translateX(0); } .atl-mobile-card { background: rgba(255, 255, 255, 0.95); border: 1px solid #d9e0ef; border-radius: 18px; box-shadow: 0 16px 35px rgba(31, 39, 66, 0.08); overflow: hidden; } .atl-mobile-item, .atl-mobile-heading { border-bottom: 1px solid var(--line); } .atl-mobile-heading:last-child, .atl-mobile-item:last-child { border-bottom: 0; } .atl-mobile-trigger, .atl-mobile-link { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; color: var(--text); text-align: left; cursor: pointer; transition: background-color 0.12s ease; -webkit-tap-highlight-color: transparent; } /* Press-state feedback for touch (no sticky :hover) */ .atl-mobile-trigger:active, .atl-mobile-link:active { background-color: #eef2fb; } /* :hover only on devices that can actually hover (mouse/trackpad) */ @media (hover: hover) { .atl-mobile-trigger:hover, .atl-mobile-link:hover { background-color: #eef2fb; } } .atl-mobile-heading .atl-mobile-trigger, .atl-mobile-heading .atl-mobile-link { grid-template-columns: 1fr auto; padding: 20px 24px; font-size: 19px; font-weight: 800; } .atl-mobile-heading .atl-arrow { transition: transform 0.18s ease; } .atl-mobile-trigger.is-open .atl-arrow { transform: rotate(90deg); } .atl-mobile-heading.simple .atl-mobile-link { grid-template-columns: 1fr auto; } .atl-mobile-item .atl-mobile-title { font-size: 17px; font-weight: 800; margin: 0; } .atl-mobile-item .atl-mobile-copy { display: none; } .atl-mobile-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--badge); display: flex; align-items: center; justify-content: center; color: #3d63ea; font-size: 25px; } /* Mobile submenu uses CSS max-height + padding animation so it works even if * jQuery animations fail to run (cache plugins, JS conflicts, etc.). * The fallback `display:none` is dropped in favour of collapsed max-height:0. */ .atl-mobile-submenu { max-height: 0; overflow: hidden; padding: 0 16px; background: transparent; opacity: 0; transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), padding 0.2s ease, opacity 0.2s ease; } .atl-mobile-submenu.is-open { max-height: 2000px; padding: 0 16px 10px 16px; opacity: 1; } .atl-mobile-submenu .atl-mobile-item { border-bottom: 1px solid var(--line); background: transparent; } .atl-mobile-submenu .atl-mobile-item:last-child { border-bottom: 0; } /* v1.2.6: helper CTA at the bottom of each mobile submenu — "Check Your County", "Contact Sales", "Get Help". Mirrors the desktop helper-card CTA so mobile users have the same primary action available without scrolling to the drawer footer. */ .atl-mobile-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 8px 6px; padding: 12px 18px; background: #013CC3; color: #ffffff !important; border: 1px solid #013CC3; border-radius: 10px; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .atl-mobile-cta:hover, .atl-mobile-cta:focus { background: #012a8f; color: #ffffff !important; } .atl-mobile-cta i { color: #ffffff !important; font-size: 12px; } .atl-mobile-subgroup { margin: 4px 0 10px; } .atl-mobile-subgroup-title { font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-1); padding: 14px 8px 6px; } /* ------ Sub-sub-menus inside mega panels (Phase 3) ------ */ .atl-submenu-toggle { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background-color 0.15s ease; } .atl-submenu-toggle:hover { background-color: var(--panel-soft); } .atl-sub-submenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, padding 0.2s ease; padding: 0; } .atl-list-item.has-children.is-expanded .atl-sub-submenu { max-height: 800px; opacity: 1; padding: 4px 0 8px 60px; } .atl-sub-submenu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--text); transition: background-color 0.15s ease, color 0.15s ease; } .atl-sub-submenu a:hover { background-color: var(--panel-soft); color: var(--blue-1); } .atl-sub-submenu a .atl-sub-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--badge); display: flex; align-items: center; justify-content: center; color: #3d63ea; font-size: 16px; flex: 0 0 auto; } /* "View all" link inside sub-submenu */ .atl-sub-submenu .atl-view-all { font-size: 14px; font-weight: 800; color: var(--blue-1); padding: 8px 12px; margin-top: 4px; } .atl-mobile-support-box { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--line); } .atl-mobile-support-box strong { display: block; font-size: 16px; margin-bottom: 4px; } .atl-mobile-help { min-height: 48px; padding: 0 18px; border-radius: 12px; background: transparent; color: #239b82; border: 2px solid #4ab89d; font-weight: 800; } .atl-mobile-store { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 900; color: #172442; padding: 18px 20px 22px; border-top: 1px solid var(--line); } body.atl-lock { overflow: hidden; } /* ------ Focus-visible for keyboard users ------ */ .atl-header a:focus-visible, .atl-header button:focus-visible { outline: 2px solid var(--blue-1); outline-offset: 2px; border-radius: 4px; } /* ------ Reduced motion for users who prefer it ------ */ @media (prefers-reduced-motion: reduce) { .atl-mega, .atl-mobile-panel, .atl-mobile-drawer, .atl-mobile-submenu, .atl-mobile-trigger .atl-arrow, .atl-btn, .atl-list-item, .atl-mini-item, .atl-arrow, .atl-sub-submenu, .atl-menu-item.is-open .atl-list-item, .atl-menu-item.is-open .atl-mini-item { transition: none !important; animation: none !important; } } @media (max-width: 1280px) { .atl-mainbar .atl-wrap { grid-template-columns: 170px 1fr auto; gap: 16px; } .atl-menu-link { font-size: 15px; padding: 12px 12px; } .atl-store { min-height: 38px; font-size: 14px; padding: 0 16px; } .atl-support { font-size: 13px; } .atl-search { width: 280px; } } @media (max-width: 1100px) { .atl-topbar, .atl-mainbar { display: none; } .atl-mobile-top, .atl-mobile-panel { display: block; } /* v1.2.7: lock horizontal overflow on mobile. A wide hero element or a stray full-bleed module elsewhere on the page can introduce accidental left/right scrolling — kill it at the page level. */ html, body { overflow-x: hidden; max-width: 100vw; } } @media (max-width: 640px) { .atl-mobile-topbar .atl-logo img { width: 148px; } .atl-mobile-search button { min-width: 98px; padding: 0 14px; } .atl-mobile-meta-row { flex-direction: column; align-items: stretch; } .atl-mobile-login { width: 100%; } .atl-mobile-support-box { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ DIVI THEME INTEGRATION — v1.1.0 (2026-04-24) These overrides used to live in the staging site's Divi Custom CSS field. Moved here so the plugin is self-contained and portable. Every rule below targets either (a) Divi Theme Builder wrappers that fight our menu, or (b) our own .atl-* classes that need adjustments when hosted inside Divi. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Defeat Divi's overflow:hidden that clips the mega dropdown ──────── Divi wraps the header in .et_builder_inner_content which has overflow: hidden by default. Absolutely-positioned mega panels extend below the header and get clipped unless we force overflow:visible on the chain. Desktop only (mobile drawer is a separate, full-screen panel). */ @media (min-width: 1101px) { .et-l--header, .et-l--header .et_builder_inner_content, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et-l--header .et_pb_column, .atl-header, .atl-header .atl-mainbar, .atl-header .atl-desktop-nav, .atl-menu-item.has-mega { overflow: visible !important; } /* Stack the header above Divi page sections. Divi's section_1_tb_header uses z-index 460; going to 500 here guarantees our mega wins. */ .et-l--header { position: relative; z-index: 500; } .atl-mega { z-index: 100 !important; } .atl-menu-item.is-open, .atl-menu-item.has-mega:hover { position: relative; z-index: 100; } } /* ── 2. Leads + Training dropdowns: 2-column layout ─────────────────────── Default single-column treatment feels cramped for menus with 4-5 items. Use flexbox (no gap / no fr / no calc so Divi's CSS linter is quiet). */ @media (min-width: 1101px) { /* Leads (5 items) and Training (4 items) get the 2-column layout — dense enough to fill the panel without looking sparse. */ .atl-mega.leads, .atl-mega.training { min-width: 720px; } .atl-mega.leads .atl-mega-section, .atl-mega.training .atl-mega-section { display: flex !important; flex-wrap: wrap; } /* Head row + helper CTA card span the full row */ .atl-mega.leads .atl-mega-section .atl-mega-head, .atl-mega.training .atl-mega-section .atl-mega-head, .atl-mega.leads .atl-mega-section .atl-helper-card, .atl-mega.training .atl-mega-section .atl-helper-card { flex: 1 1 100% !important; max-width: 100% !important; box-sizing: border-box; } .atl-mega.leads .atl-mega-section .atl-mega-head, .atl-mega.training .atl-mega-section .atl-mega-head { margin-bottom: 12px; } .atl-mega.leads .atl-mega-section .atl-helper-card, .atl-mega.training .atl-mega-section .atl-helper-card { margin-top: 12px; } /* 2-column list items. v1.6.2: reverted from the v1.6.1 `flex: 0 1 calc(50% - 5px)` + `column-gap: 10px` approach because the combo was failing on production (items rendering single-column instead of 2-col). Most likely a calc-in-flex-shorthand minification edge case in Hummingbird's CSS bundler. Going back to plain `flex: 0 1 50%; max-width: 50%` which is known-good. Visual breathing room between the two columns is provided via `padding-right: 17px` on each item (was 12px in v1.5.x; +5px addresses Bradley's "5px right padding so they aren't touching" feedback). */ .atl-mega.leads .atl-mega-section .atl-list-item, .atl-mega.training .atl-mega-section .atl-list-item { flex: 0 1 50%; max-width: 50%; padding-right: 17px; margin-bottom: 4px; box-sizing: border-box; } /* Data Enrichment only has 2 items — single-column with full-width items. v1.2.1 set this to 560px to compensate for the prior 2-col layout. v1.5.2 reduces to 480px because the 560px panel left ~90px of empty space to the right of each item's text (1fr column wider than the description sentence), which read as ugly right-padding. */ .atl-mega.data-enrichment { width: 480px; } .atl-mega.data-enrichment .atl-mega-section .atl-list-item { width: 100%; } } /* ── 3. Button contrast — solid blue with white text ────────────────────── The original helper CTAs rendered as green outline on a light background, which failed AA contrast. Unify all atl-btn instances inside the menu system to solid brand blue with white text. */ .atl-helper-card .atl-btn, .atl-helper-card .atl-cta, .atl-mobile-card .atl-btn, .atl-mobile-help.atl-btn, .atl-callout .atl-btn, .atl-callout .atl-cta { background: #013CC3 !important; color: #ffffff !important; border: 1px solid #013CC3 !important; } /* v3-rev2: more breathing room above the Explore Plans CTA at the bottom of the Marketing callout column. */ .atl-callout .atl-btn, .atl-callout .atl-cta { margin-top: 18px; } .atl-helper-card .atl-btn:hover, .atl-helper-card .atl-cta:hover, .atl-mobile-card .atl-btn:hover, .atl-mobile-help.atl-btn:hover, .atl-callout .atl-btn:hover, .atl-callout .atl-cta:hover { background: #012A8F !important; border-color: #012A8F !important; color: #ffffff !important; } /* Arrows/icons inside these buttons inherit white */ .atl-helper-card .atl-btn i, .atl-helper-card .atl-btn svg, .atl-helper-card .atl-cta i, .atl-helper-card .atl-cta svg, .atl-mobile-help.atl-btn i, .atl-mobile-help.atl-btn svg, .atl-callout .atl-btn i, .atl-callout .atl-btn svg, .atl-callout .atl-cta i, .atl-callout .atl-cta svg { color: #ffffff !important; fill: #ffffff !important; } /* ── 4. Mobile hamburger: fixed-position + scroll-driven shadow ─────────── Hamburger stays pinned to the viewport as the user scrolls the page. Shadow is absent at page top, fades in over the first 120px of scroll (modern browsers via animation-timeline; older browsers stay shadowless). */ @keyframes atl-hamburger-elevate { from { box-shadow: none; } to { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } } @media (max-width: 1100px) { /* Close the gap the hamburger used to occupy when it was in-flow */ .atl-header .atl-mainbar { min-height: 60px; padding-right: 0 !important; justify-content: flex-start !important; } .atl-hamburger { position: fixed !important; top: 25px !important; right: 14px !important; z-index: 9998 !important; width: 46px !important; height: 46px !important; padding: 0 !important; margin: 0 !important; background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 10px !important; box-shadow: none !important; transition: box-shadow 0.25s ease !important; animation: atl-hamburger-elevate linear both; animation-timeline: scroll(root); animation-range: 0 120px; } /* When the drawer is open, the drawer's own close button takes over */ body.atl-menu-open .atl-hamburger, .atl-mobile-panel.is-open ~ .atl-hamburger { display: none !important; } } /* ── 5. Marketing column headers — light grey differentiator ────────────── Separates the 3 column titles (Direct Mail / Digital Presence / Marketing Tools) from the actual menu items below them. */ @media (min-width: 1101px) { .atl-mega.marketing .atl-col-head { background: rgba(0, 0, 0, 0.04); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } } /* v3-rev3 (2026-05-01): badge spans the TOP of the item, centered above both the icon and title columns. Reads as a "tag" or "label" sitting above the row rather than competing with icon/title alignment. */ .atl-mini-item.has-top-badge { position: relative; padding-top: 26px; /* make room for the badge sitting at the top */ } .atl-mini-item .atl-badge--top { position: absolute; top: 4px; left: 6px; /* pill — sized to content, capped so it covers the icon and a little of the first word */ width: max-content; max-width: 96px; margin: 0; /* override .atl-badge { margin-left: 6px } */ display: inline-block; text-align: center; min-height: 16px; padding: 1px 10px; font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; background: #1d57e6; color: #ffffff !important; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); z-index: 1; } .atl-mini-item .atl-badge--top.green { background: #39b27e; } /* ------------------------------------------------------------------ Mega panel subsection (v1.4.0) Used for the Referral Hub block under the Leads dropdown — a small labeled section appended below the main item list and helper card. ------------------------------------------------------------------ */ .atl-mega-subsection { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .atl-mega-subhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-1); } .atl-mega-subhead i { font-size: 13px; opacity: 0.85; } /* ------------------------------------------------------------------ Sub-sub-menus on mini-items — HOVER POPOUT (v1.5.1 — rewritten) v1.5.0 nested a custom-layout