Merge branch 'cursor/air-freight-page'
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
* Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
|
||||
*/
|
||||
|
||||
import { MouseEvent, useEffect, useState } from "react";
|
||||
import { KeyboardEvent, FocusEvent, MouseEvent, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
@@ -20,6 +20,9 @@ const CURRENT_PAGE_MAP: Record<string, string> = {
|
||||
"/miletruth": "miletruth",
|
||||
"/solutions": "solutions",
|
||||
"/about": "about",
|
||||
"/doormile-wings": "doormile-wings",
|
||||
"/empowerment": "entarpreneurship",
|
||||
"/express": "express",
|
||||
"/about-us": "about",
|
||||
"/blog": "blogs",
|
||||
"/contact": "contact",
|
||||
@@ -33,13 +36,17 @@ const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
|
||||
home: ["home"],
|
||||
"how-it-works": ["how-it-works", "how-its-works"],
|
||||
miletruth: ["miletruth"],
|
||||
// Solutions is now a plain top-level link — no child pages own its active state.
|
||||
solutions: ["solutions"],
|
||||
about: ["about", "about-us", "women"],
|
||||
"doormile-wings": ["doormile-wings"],
|
||||
entarpreneurship: ["entarpreneurship"],
|
||||
blogs: ["blogs"],
|
||||
contact: ["contact"],
|
||||
"privacy-policy": ["privacy-policy"],
|
||||
"terms-of-service": ["terms-of-service"],
|
||||
"cookie-policy": ["cookie-policy"],
|
||||
// Company is the dropdown parent for About + Blogs + How It Works — active if any is.
|
||||
company: ["blogs", "how-it-works", "about"],
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
@@ -72,7 +79,7 @@ export default function Header() {
|
||||
targetId: string,
|
||||
shouldCloseMenu = false,
|
||||
) => {
|
||||
if (shouldCloseMenu) closeAll();
|
||||
if (shouldCloseMenu) closeMobileMenu();
|
||||
|
||||
if (pathname !== targetPath) return;
|
||||
|
||||
@@ -90,6 +97,23 @@ export default function Header() {
|
||||
const [visibleScrolled, setVisibleScrolled] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
// Company dropdown (desktop) / accordion (mobile). Local to Header —
|
||||
// unlike isMenuOpen/isSidebarOpen (HeaderUIProvider), no sibling component
|
||||
// needs to read this.
|
||||
const [isDesktopCompanyOpen, setDesktopCompanyOpen] = useState(false);
|
||||
const [isMobileCompanyOpen, setMobileCompanyOpen] = useState(false);
|
||||
|
||||
// Collapse the accordion whenever the off-canvas menu closes, so it isn't
|
||||
// left expanded the next time the menu opens.
|
||||
const closeMobileMenu = () => {
|
||||
setMobileCompanyOpen(false);
|
||||
closeAll();
|
||||
};
|
||||
const toggleMobileMenu = () => {
|
||||
setMobileCompanyOpen(false);
|
||||
toggleMenu();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handle = requestAnimationFrame(() => {
|
||||
setVisibleScrolled(true);
|
||||
@@ -448,25 +472,86 @@ export default function Header() {
|
||||
<li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
|
||||
<Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home")}>Home</Link>
|
||||
</li>
|
||||
<li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
|
||||
<Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works")}>How It Works</Link>
|
||||
<li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("doormile-wings")}`}>
|
||||
<Link href="/doormile-wings" prefetch>Wings</Link>
|
||||
</li>
|
||||
<li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
|
||||
<Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth™ AI</Link>
|
||||
</li>
|
||||
<li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions")}>Solutions</Link>
|
||||
<li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions" prefetch>Solutions</Link>
|
||||
</li>
|
||||
<li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
|
||||
<li id="menu-item-10513" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("entarpreneurship")}`}>
|
||||
<Link href="/empowerment" prefetch>Entrepreneurship</Link>
|
||||
</li>
|
||||
<li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
|
||||
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs")}>Blogs</Link>
|
||||
<li
|
||||
id="menu-item-10535"
|
||||
className={`menu-item menu-item-type-custom menu-item-has-children menu-item-10535${dmHeaderActive("company")}`}
|
||||
onMouseEnter={() => setDesktopCompanyOpen(true)}
|
||||
onMouseLeave={() => setDesktopCompanyOpen(false)}
|
||||
onKeyDown={(event: KeyboardEvent<HTMLLIElement>) => {
|
||||
if (event.key !== "Escape") return;
|
||||
setDesktopCompanyOpen(false);
|
||||
event.currentTarget.querySelector<HTMLAnchorElement>(":scope > a")?.focus();
|
||||
}}
|
||||
onBlur={(event: FocusEvent<HTMLLIElement>) => {
|
||||
if (!event.currentTarget.contains(event.relatedTarget as Node)) {
|
||||
setDesktopCompanyOpen(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={isDesktopCompanyOpen}
|
||||
onFocus={() => setDesktopCompanyOpen(true)}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setDesktopCompanyOpen((open) => !open);
|
||||
}}
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
<ul className="dm-solutions-dropdown">
|
||||
<li className={currentPage === "about" ? "dm-child-active" : ""}>
|
||||
<Link
|
||||
href="/about-us#about"
|
||||
onClick={(event) => {
|
||||
setDesktopCompanyOpen(false);
|
||||
handleNavClick(event, "/about-us", "about");
|
||||
}}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li className={currentPage === "blogs" ? "dm-child-active" : ""}>
|
||||
<Link
|
||||
href="/blog#blogs"
|
||||
onClick={(event) => {
|
||||
setDesktopCompanyOpen(false);
|
||||
handleNavClick(event, "/blog", "blogs");
|
||||
}}
|
||||
>
|
||||
Blogs
|
||||
</Link>
|
||||
</li>
|
||||
<li className={currentPage === "how-it-works" ? "dm-child-active" : ""}>
|
||||
<Link
|
||||
href="/how-it-works#how-it-works"
|
||||
onClick={(event) => {
|
||||
setDesktopCompanyOpen(false);
|
||||
handleNavClick(event, "/how-it-works", "how-it-works");
|
||||
}}
|
||||
>
|
||||
How It Works
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMenu}>
|
||||
<div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMobileMenu}>
|
||||
<span className="menu-trigger-icon">
|
||||
<span className="hamburger">
|
||||
<span></span>
|
||||
@@ -486,7 +571,7 @@ export default function Header() {
|
||||
<div className="header-icon login-logout">
|
||||
<a href="#" title="Login/Register" className="link-login"></a>
|
||||
</div>
|
||||
<div className="header-icon menu-close" onClick={closeAll}>
|
||||
<div className="header-icon menu-close" onClick={closeMobileMenu}>
|
||||
<span className="menu-close-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -496,20 +581,53 @@ export default function Header() {
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
|
||||
<Link href="/#home" onClick={(event) => handleNavClick(event, "/", "home", true)}>Home</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
|
||||
<Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("doormile-wings")}`}>
|
||||
<Link href="/doormile-wings" prefetch onClick={closeMobileMenu}>Wings</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
|
||||
<Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth™ AI</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions", true)}>Solutions</Link>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions" prefetch onClick={closeMobileMenu}>Solutions</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("entarpreneurship")}`}>
|
||||
<Link href="/empowerment" prefetch onClick={closeMobileMenu}>Entrepreneurship</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
|
||||
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
|
||||
<li
|
||||
className={`menu-item menu-item-type-custom menu-item-10535 dm-mobile-solutions${dmHeaderActive("company")}${isMobileCompanyOpen ? " dm-accordion-open" : ""}`}
|
||||
>
|
||||
<div className="dm-mobile-solutions-row">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setMobileCompanyOpen((open) => !open);
|
||||
}}
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="dm-mobile-solutions-toggle"
|
||||
aria-label={isMobileCompanyOpen ? "Close Company menu" : "Open Company menu"}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={isMobileCompanyOpen}
|
||||
onClick={() => setMobileCompanyOpen((open) => !open)}
|
||||
>
|
||||
<span className="dm-accordion-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
<ul className="dm-mobile-solutions-panel">
|
||||
<li className={currentPage === "about" ? "dm-child-active" : ""}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
|
||||
</li>
|
||||
<li className={currentPage === "blogs" ? "dm-child-active" : ""}>
|
||||
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
|
||||
</li>
|
||||
<li className={currentPage === "how-it-works" ? "dm-child-active" : ""}>
|
||||
<Link href="/how-it-works#how-it-works" onClick={(event) => handleNavClick(event, "/how-it-works", "how-it-works", true)}>How It Works</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -867,6 +985,281 @@ export default function Header() {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ── Company dropdown (desktop) / accordion (mobile) ──
|
||||
Company (Blogs + How It Works) is a non-navigating parent —
|
||||
its trigger is a plain anchor with no href target, only a
|
||||
dropdown toggle. Class names below (.dm-solutions-dropdown,
|
||||
.dm-mobile-solutions*) are unchanged from when this same
|
||||
component/markup belonged to Solutions, reusing site.css's dead
|
||||
.menu-item-has-children chevron (fontello glyph, already
|
||||
coloured white for this exact header widget) instead of
|
||||
inventing a new arrow. Desktop opens on hover/focus; mobile is a
|
||||
height-collapsing accordion controlled by the chevron button. */
|
||||
@media (min-width: 1025px) {
|
||||
#masthead .header-menu-container nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 16px !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li > a {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
min-height: 48px;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
min-width: 360px;
|
||||
height: 24px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 34px);
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
background: linear-gradient(180deg, rgba(31, 31, 31, 0.98) 0%, rgba(18, 18, 18, 0.98) 100%);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 18px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* .main-menu li:not(:last-of-type) (site.css) is a descendant
|
||||
selector that also matches these nested <li>s, pushing every
|
||||
row but the last 12px to the right. Cancel it here. */
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
/* Hardcoded rather than var(--logico-dark-text-color): that
|
||||
variable is only overridden to white inside a few unrelated
|
||||
scoped contexts (e.g. #side-panel-2f31137) and otherwise
|
||||
falls back to the sitewide light-theme value (#111111),
|
||||
which would be invisible on this dark glass panel. */
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: normal;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:before {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-left: -16px;
|
||||
flex: 0 0 11px;
|
||||
background-color: #c01227;
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4'/%3E%3Cpath d='M5 4h7v7'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4'/%3E%3Cpath d='M5 4h7v7'/%3E%3C/svg%3E");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, background-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:hover,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:hover:before,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:focus-visible:before {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
background-color: #c01227;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li.dm-child-active > a {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .dm-solutions-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 24px);
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"]:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Outlines are globally suppressed for .main-menu>li>a above;
|
||||
restore a visible focus ring scoped only to this trigger. */
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a:focus-visible {
|
||||
outline: 2px solid var(--logico-dark-text-color, #ffffff);
|
||||
outline-offset: 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-row {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-row > a {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
padding: 0.75em 0;
|
||||
color: var(--logico-default-text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 0 0 44px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--logico-default-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-toggle:focus-visible {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-accordion-chevron {
|
||||
display: inline-block;
|
||||
width: 0.7em;
|
||||
height: 0.7em;
|
||||
flex: 0 0 auto;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions.dm-accordion-open .dm-accordion-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 18px;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions.dm-accordion-open .dm-mobile-solutions-panel {
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* .mobile-header-menu-container ul.main-menu>li>a (site.css) only
|
||||
matches direct children of .main-menu, so these nested links
|
||||
fall through to the sitewide generic underlined-anchor default.
|
||||
Restore the plain sibling-item look explicitly. */
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li > a {
|
||||
display: block;
|
||||
padding: 0.35em 0;
|
||||
color: var(--logico-default-text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* A vendor li:before rule (checkmark bullet, likely intended for a
|
||||
feature-list style elsewhere) leaks through here since the reset
|
||||
at .mobile-header-menu-container ul.main-menu>li:before only
|
||||
matches direct children of .main-menu, not this nested li.
|
||||
Suppress it on both the <li> and <a> — these child rows aren't
|
||||
top-level nav items and shouldn't carry any bullet/indicator. */
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li:before,
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li > a:before {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li.dm-child-active > a {
|
||||
color: var(--logico-light-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user