/* ============================================================ AC TM MEGA MENU — scoped to .tmm / .tmm-mobile Adapted from Michael Bleau's Ascential prototype (Jul 2026) Route A: logo left, nav right, desktop mega-panels, fullscreen staggered mobile menu. ============================================================ */ .tmm, .tmm-mobile { --tmm-purple:#5522dd; --tmm-purple-dark:#3d19a5; --tmm-purple-light:#f1edfc; --tmm-orange:#dd7722; --tmm-ink:#000; --tmm-ink-soft:#4a4a4a; --tmm-line:#e5e0f2; --tmm-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .tmm *, .tmm-mobile * { box-sizing:border-box; } /* ---------- TOP BAR: logo left, nav right ---------- */ .tmm-bar{ width:100%; max-width:none; margin:0; padding:16px 40px; display:flex; align-items:center; gap:28px; font-family:var(--tmm-font); } @media (max-width:1100px){ .tmm-bar{ padding:12px 10px; } } .tmm-logo{ flex-shrink:0; display:inline-flex; align-items:center; text-decoration:none; } .tmm-logo img{ height:38px; width:auto; display:block; object-fit:contain; } .tmm-nav{ margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:nowrap; } /* High specificity + !important: the hello-ascential theme has global button {} rules (pinkish color/border) that otherwise leak in. */ .tmm .tmm-nav-btn{ background:none !important; border:0 !important; border-bottom:3px solid transparent !important; border-radius:0 !important; box-shadow:none !important; cursor:pointer; padding:12px 14px; margin:0; font-family:var(--tmm-font); font-size:15px; font-weight:700; color:var(--tmm-ink) !important; letter-spacing:.3px; white-space:nowrap; text-transform:none; line-height:1.2; display:inline-flex; align-items:center; gap:7px; text-decoration:none; outline:none; transition:color .2s ease, border-color .2s ease; } .tmm .tmm-nav-btn:hover, .tmm .tmm-nav-btn:focus{ color:var(--tmm-orange) !important; border-bottom-color:var(--tmm-orange) !important; background:none !important; } .tmm .tmm-nav-btn[aria-expanded="true"]{ color:var(--tmm-purple) !important; border-bottom-color:var(--tmm-purple) !important; } .tmm .tmm-nav-btn:focus-visible{ outline:3px solid var(--tmm-orange); outline-offset:2px; } .tmm .tmm-nav-link:hover{ color:var(--tmm-orange) !important; } .tmm-chev{ font-size:10px; opacity:.7; transition:transform .2s ease; display:inline-block; } /* ---------- TOP-OF-PAGE INVERT (transparent header over hero) ---------- The theme adds header.scrolled-top while at the top of the page and removes it once scrolled. The logo already inverts via the theme; here we flip the nav text + burger to white to match. Hover stays orange (on-brand, readable on the hero). The fullscreen mobile menu is re-parented to so it is unaffected and keeps its dark-on-white styling. */ header.scrolled-top .tmm .tmm-nav-btn{ color:#ffffff !important; } header.scrolled-top .tmm .tmm-nav-btn:hover, header.scrolled-top .tmm .tmm-nav-btn:focus{ color:var(--tmm-orange) !important; border-bottom-color:var(--tmm-orange) !important; } header.scrolled-top .tmm .tmm-nav-btn[aria-expanded="true"]{ color:#ffffff !important; border-bottom-color:#ffffff !important; } header.scrolled-top .tmm .tmm-burger span{ background:#ffffff !important; } /* When the header itself is hovered it goes SOLID WHITE (theme behavior, class stays scrolled-top) and the logo darkens — so flip nav text dark to match. The extra :hover on header outranks the plain top-of-page white rules above. The mega-panel is a DOM child of

, so hovering the open panel keeps this state active and the nav readable. */ header.scrolled-top:hover .tmm .tmm-nav-btn{ color:var(--tmm-ink) !important; border-bottom-color:transparent !important; } header.scrolled-top:hover .tmm .tmm-nav-btn:hover, header.scrolled-top:hover .tmm .tmm-nav-btn:focus{ color:var(--tmm-orange) !important; border-bottom-color:var(--tmm-orange) !important; } header.scrolled-top:hover .tmm .tmm-nav-btn[aria-expanded="true"]{ color:var(--tmm-purple) !important; border-bottom-color:var(--tmm-purple) !important; } header.scrolled-top:hover .tmm .tmm-burger span{ background:var(--tmm-purple) !important; } .tmm .tmm-nav-btn[aria-expanded="true"] .tmm-chev{ transform:rotate(180deg); } /* ---------- MEGA PANEL ---------- */ .tmm-nav-item{ position:static; } .tmm-panel{ position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--tmm-line); box-shadow:0 16px 40px rgba(85,34,221,.15); padding:36px 24px 40px; z-index:1200; } .tmm-panel[hidden]{ display:none; } .tmm-panel.tmm-open{ display:block; animation:tmm-slide .22s ease-out; } @keyframes tmm-slide{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} } .tmm-panel-inner{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; } .tmm-group-h{ margin:0 0 12px; font-size:12px; font-weight:800; color:var(--tmm-purple); text-transform:uppercase; letter-spacing:1.4px; padding-bottom:11px; border-bottom:2px solid var(--tmm-purple); } .tmm-card{ display:block; padding:11px 10px; text-decoration:none; color:var(--tmm-ink); border-radius:6px; transition:background .18s ease, transform .18s ease; } .tmm-card:hover{ background:var(--tmm-purple-light); transform:translateX(6px); } .tmm-card-label{ font-weight:700; font-size:15px; line-height:20px; letter-spacing:.2px; color:var(--tmm-ink); transition:color .18s ease; } .tmm-card:hover .tmm-card-label{ color:var(--tmm-purple); } /* Only the BRAND WORD is purple at rest (Adam 2026-07-22) — not the whole label. The PHP wraps the brand token (Galileo, Lismar, Ascentialytics, …) in on items tagged "tmm-brand" in the WP menu. On hover the whole label already goes purple, so the word blends in. */ .tmm-brand-word{ color:var(--tmm-purple) !important; } /* staggered card entrance */ .tmm-panel.tmm-open .tmm-card{ opacity:0; transform:translateY(8px); animation:tmm-card-in .32s ease forwards; } .tmm-panel.tmm-open .tmm-group:nth-child(1) .tmm-card:nth-child(2){animation-delay:.03s} .tmm-panel.tmm-open .tmm-group:nth-child(1) .tmm-card:nth-child(3){animation-delay:.06s} .tmm-panel.tmm-open .tmm-group:nth-child(1) .tmm-card:nth-child(4){animation-delay:.09s} .tmm-panel.tmm-open .tmm-group:nth-child(1) .tmm-card:nth-child(5){animation-delay:.12s} .tmm-panel.tmm-open .tmm-group:nth-child(2) .tmm-card{animation-delay:.05s} .tmm-panel.tmm-open .tmm-group:nth-child(3) .tmm-card{animation-delay:.08s} .tmm-panel.tmm-open .tmm-group:nth-child(4) .tmm-card{animation-delay:.11s} .tmm-panel.tmm-open .tmm-group:nth-child(5) .tmm-card{animation-delay:.14s} @keyframes tmm-card-in{ to{opacity:1; transform:translateY(0);} } /* ---------- BURGER (mobile trigger) ---------- */ .tmm .tmm-burger{ display:none; margin-left:auto; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; cursor:pointer; padding:8px; flex-direction:column; gap:5px; align-items:center; justify-content:center; } .tmm .tmm-burger span{ display:block !important; width:26px !important; height:3px !important; background:var(--tmm-purple) !important; border-radius:2px; transition:transform .25s, opacity .2s; } /* ============================================================ FULLSCREEN MOBILE MENU — dramatic dark takeover (v1.2.0) Solid deep purple-black, circular reveal from the burger corner, big numbered rows, staggered wipe-ins, orange accents, purple finale footer. MOBILE ONLY (.tmm-mobile is display:none >=1101px). ============================================================ */ .tmm-mobile{ position:fixed; inset:0; z-index:2147483000; background:#0b0714; /* solid deep purple-black, high contrast */ font-family:var(--tmm-font); display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; /* circular reveal originating at the burger (top-right) */ clip-path:circle(0% at calc(100% - 44px) 40px); visibility:hidden; transition:clip-path .55s cubic-bezier(.86,0,.07,1), visibility .55s; will-change:clip-path; } .tmm-mobile.tmm-mobile-open{ clip-path:circle(150% at calc(100% - 44px) 40px); visibility:visible; } /* ---- header: white logo + outlined round close ---- */ .tmm-mobile-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 20px 18px; position:sticky; top:0; z-index:3; background:#0b0714; } .tmm-mobile-logo img{ height:34px; width:auto; display:block; filter:brightness(0) invert(1); } .tmm-mobile .tmm-close{ width:48px !important; height:48px !important; min-width:48px !important; flex:0 0 48px !important; border-radius:50% !important; background:transparent !important; border:2px solid rgba(255,255,255,.25) !important; color:#fff !important; box-shadow:none !important; cursor:pointer; display:inline-flex !important; align-items:center; justify-content:center; padding:0 !important; font-size:26px; line-height:1; transition:background .25s ease, border-color .25s ease, transform .45s cubic-bezier(.86,0,.07,1); } .tmm-mobile .tmm-close:hover, .tmm-mobile .tmm-close:active{ background:var(--tmm-orange) !important; border-color:var(--tmm-orange) !important; transform:rotate(180deg); } /* ---- nav rows ---- */ .tmm-mobile-nav{ padding:20px 0 8px; } /* staggered entrance of rows + footer (uses inline --i) */ .tmm-m-section, .tmm-m-top-link, .tmm-foot{ opacity:0; transform:translateY(28px); } .tmm-mobile.tmm-mobile-open .tmm-m-section, .tmm-mobile.tmm-mobile-open .tmm-m-top-link, .tmm-mobile.tmm-mobile-open .tmm-foot{ animation:tmm-m-in .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i,1) * .07s + .2s); } @keyframes tmm-m-in{ to{ opacity:1; transform:translateY(0); } } .tmm-m-section{ border-bottom:1px solid rgba(255,255,255,.08); } .tmm-m-toggle, .tmm-m-top-link{ width:100%; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; cursor:pointer; text-transform:none !important; position:relative; display:flex; align-items:center; gap:18px; padding:26px 24px !important; font-family:var(--tmm-font) !important; font-size:26px !important; font-weight:800 !important; color:#fff !important; text-align:left; text-decoration:none; letter-spacing:-.3px !important; line-height:1.12 !important; transition:color .25s ease, padding-left .32s cubic-bezier(.16,1,.3,1); } .tmm-m-top-link{ border-bottom:1px solid rgba(255,255,255,.08) !important; } /* orange left accent bar wipes in on hover/open */ .tmm-m-toggle::after, .tmm-m-top-link::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tmm-orange); transform:scaleY(0); transform-origin:top; transition:transform .3s cubic-bezier(.16,1,.3,1); } .tmm-m-toggle:hover::after, .tmm-m-top-link:hover::after, .tmm-m-toggle[aria-expanded="true"]::after{ transform:scaleY(1); } .tmm-m-toggle:hover, .tmm-m-top-link:hover, .tmm-m-toggle:active, .tmm-m-top-link:active, .tmm-m-toggle[aria-expanded="true"]{ color:var(--tmm-orange) !important; padding-left:32px !important; } .tmm-m-label{ flex:1; min-width:0; } /* chevron — bare glyph (circle chip removed), nudged right toward the edge, away from the label */ .tmm-m-chev{ margin-left:auto; margin-right:-6px; flex-shrink:0; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:16px; background:none !important; border-radius:0 !important; width:auto !important; height:auto !important; transition:transform .3s ease, color .25s ease; } .tmm-m-toggle[aria-expanded="true"] .tmm-m-chev{ transform:rotate(180deg); background:none !important; color:var(--tmm-orange); } .tmm-m-arrow{ margin-left:auto; margin-right:-6px; flex-shrink:0; color:var(--tmm-orange); font-size:28px; line-height:1; transition:transform .25s ease; } .tmm-m-top-link:hover .tmm-m-arrow, .tmm-m-top-link:active .tmm-m-arrow{ transform:translateX(6px); } /* ---- sub panel (dark, indented, staggered children) ---- */ .tmm-m-sub{ background:rgba(255,255,255,.03); padding:8px 0 22px; } .tmm-m-sub[hidden]{ display:none; } .tmm-m-group-h{ padding:20px 24px 10px 40px; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.42); } .tmm-m-link{ display:block; padding:16px 24px 16px 40px; color:rgba(255,255,255,.82); text-decoration:none; font-size:16px; font-weight:600; letter-spacing:.1px; transition:color .18s ease, padding-left .25s cubic-bezier(.16,1,.3,1), background .18s ease; } .tmm-m-link:hover, .tmm-m-link:active{ color:#fff; padding-left:48px; background:rgba(255,255,255,.05); } /* brighter on-brand purple for brand words on the dark menu (pure #5522dd would be low-contrast/muted here). Desktop keeps exact #5522dd. */ .tmm-mobile .tmm-brand-word{ color:#a98bff !important; } /* stagger the sub-panel children in each time a section opens */ .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *{ opacity:0; animation:tmm-sub-in .45s cubic-bezier(.16,1,.3,1) forwards; } @keyframes tmm-sub-in{ from{ opacity:0; transform:translateX(-12px);} to{ opacity:1; transform:translateX(0);} } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(1){ animation-delay:.04s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(2){ animation-delay:.08s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(3){ animation-delay:.12s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(4){ animation-delay:.16s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(5){ animation-delay:.20s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(6){ animation-delay:.24s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(7){ animation-delay:.28s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(8){ animation-delay:.32s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(9){ animation-delay:.36s; } .tmm-m-toggle[aria-expanded="true"] + .tmm-m-sub > *:nth-child(n+10){ animation-delay:.40s; } /* ---- footer: solid purple finale ---- */ .tmm-foot{ margin-top:auto; background:var(--tmm-purple); padding:32px 22px 40px; text-align:center; } .tmm-foot-tag{ color:#fff; font-size:26px; font-weight:900; letter-spacing:-.3px; margin:0 0 20px; } .tmm-foot .ascential-btn.tmm-foot-cta{ display:block !important; width:100% !important; text-align:center !important; margin:0 auto 20px !important; } .tmm-foot-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px; } .tmm-foot-links a{ color:#fff !important; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.4px; opacity:.9; transition:opacity .2s ease; } .tmm-foot-links a:hover{ opacity:1; text-decoration:underline; } body.tmm-lock{ overflow:hidden; } /* ---------- BREAKPOINT ---------- */ @media (max-width:1100px){ .tmm .tmm-nav{ display:none; } .tmm .tmm-burger{ display:flex !important; } .tmm-bar{ padding:12px 10px; } } @media (min-width:1101px){ .tmm .tmm-burger{ display:none !important; } .tmm-mobile{ display:none !important; } } @media (prefers-reduced-motion:reduce){ .tmm-panel.tmm-open, .tmm-panel.tmm-open .tmm-card, .tmm-mobile, .tmm-mobile .tmm-m-section, .tmm-mobile .tmm-m-top-link, .tmm-mobile .tmm-foot, .tmm-mobile .tmm-m-sub > *{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; } .tmm-mobile{ clip-path:none !important; } }