/* ================================================================== TIMETRAX MEGA MENU The panel is generated at runtime by assets/js/mega-menu.js; this file styles it. Full-bleed under the navbar on desktop (section 2), an inline accordion inside the drawer on mobile (section 9). Follows the site design system: brand orange only, soft ambient wash. See .claude/skills/timetrax-design-system. Note the panel itself is deliberately NOT a glass surface - see section 2. ================================================================== */ /* --- 0. CRAWLABLE LINK SOURCE --- */ /* scripts/static-nav-source.ps1 writes the real module / device / company / careers links into each page as a plain nested

in both layouts: at this width position:absolute resolves against the
, so unlike the full-bleed mega panel it is unaffected by the navbar's backdrop-filter creating a containing block for fixed elements. */ .tt-has-mini { position: relative; } .tt-mini-panel { background: #FDFCFB; border: 1px solid rgba(var(--tt-primary-rgb), 0.14); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(31, 38, 80, 0.24), 0 2px 6px rgba(31, 38, 80, 0.05); left: 50%; min-width: 208px; opacity: 0; padding: 0.5rem; pointer-events: none; position: absolute; top: calc(100% + 0.85rem); transform: translateX(-50%) translateY(-8px); transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s; visibility: hidden; z-index: 1040; } .tt-mini-panel.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); visibility: visible; } /* Bridges the gap between trigger and panel so the pointer can travel down without crossing dead space and triggering the close timer. */ .tt-mini-panel::before { content: ''; height: 0.85rem; left: 0; position: absolute; right: 0; top: -0.85rem; } .tt-mini-item { align-items: center; border-radius: 9px; color: var(--tt-dark); display: flex; font-size: 0.9rem; font-weight: 500; gap: 0.6rem; padding: 0.5rem 0.6rem; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; white-space: nowrap; } .tt-mini-item:hover, .tt-mini-item:focus-visible { background-color: rgba(var(--tt-primary-rgb), 0.09); color: var(--tt-primary); } .tt-mini-item-icon { color: var(--tt-primary); flex: 0 0 auto; font-size: 0.8rem; text-align: center; width: 16px; } /* --- 2. PANEL SHELL --- */ .tt-navbar { position: relative; } /* A zero-size anchor on whose only job is to own the stacking context for the panels. 1020 keeps them below the header (1030) so the navbar and its triggers stay above the open panel. */ .tt-mega-host { position: fixed; top: 0; left: 0; height: 0; width: 0; z-index: 1020; } /* Edge to edge horizontally - that full width is what makes the reference menu so readable, since nothing of the page sits beside it. Vertically the panel is only as tall as its content; max-height is just a guard so a short window scrolls the contents instead of running off screen. position:fixed (not absolute) so it stays locked under the header and does not need an offset that scrolling would invalidate. --tt-mega-top is the live header height, measured in mega-menu.js, because the header shrinks on scroll when the top contact strip collapses. */ .tt-mega-panel { /* --tt-mega-gutter is the space between the viewport edge and the site's 1320px content column. Every edge-touching child pads by it so copy lines up with the page grid while backgrounds still run edge to edge. --tt-mega-rail-w is the rail's *content* width, not its column width - see the note on .tt-mega-body. */ --tt-mega-gutter: max(1.5rem, calc((100vw - 1320px) / 2)); --tt-mega-rail-w: clamp(255px, 23vw, 380px); position: fixed; top: var(--tt-mega-top, 110px); left: 0; right: 0; max-height: calc(100vh - var(--tt-mega-top, 110px)); display: flex; flex-direction: column; /* Fully opaque, and deliberately NOT a glass surface. The site's glass treatment was tried here first: the hero headline and the video block sit directly behind this panel and bled through badly, and backdrop-filter on an element this large is an expensive repaint on every open. Both reference menus use a solid panel for the same reason. */ background: #FDFCFB; border-top: 1px solid rgba(var(--tt-primary-rgb), 0.12); box-shadow: 0 24px 60px -20px rgba(31, 38, 80, 0.25); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s; } .tt-mega-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Faint brand wash in the top-left corner so the panel is not a flat white slab - the same ambient-glow treatment used across the page sections. */ .tt-mega-panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: none; pointer-events: none; } /* Backgrounds run edge to edge, but the text inside still lines up with the page's container so the menu reads as part of the site grid rather than a separate full-width thing. Hence the max() padding instead of a wrapper. */ /* The rail column is its content width PLUS the gutter, because the rail is the one column that touches the viewport edge. Sizing the column at just the content width and then padding by the gutter is the obvious-looking version and it is wrong: on a 1920px screen the gutter is 300px, which would leave a 380px column with ~80px of usable space and wrap the rail one word per line. The rail also tracks the viewport rather than being a fixed 296px, which would eat a 1200px screen and look mean on a 1920px one. */ .tt-mega-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--tt-mega-rail-w) + var(--tt-mega-gutter)); min-height: 0; overflow-y: auto; position: relative; } .tt-mega-main { display: flex; flex-direction: column; min-width: 0; padding: 1.9rem clamp(1.5rem, 3vw, 3rem) 1.9rem var(--tt-mega-gutter); } /* --- 2b. DESKTOP FAMILY TABS --- Splits the 37 modules into the two lines the business sells. Desktop only: below 992px this whole strip is display:none and the group-heading accordion in section 3 takes over, which is why both mechanisms can coexist in one panel without fighting. The tabs are hidden by default and revealed at >=992px rather than the other way round, so a page that somehow renders without the media query shows the full list (the old behaviour) rather than an empty panel. */ .tt-mega-tabs { display: none; } @media (min-width: 992px) { .tt-mega-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(var(--tt-dark-rgb), 0.1); padding-bottom: 0.75rem; } .tt-mega-tab { align-items: center; background: none; border: 0; border-radius: 10px; color: rgba(var(--tt-dark-rgb), 0.62); cursor: pointer; display: inline-flex; font-family: var(--tt-font-secondary); font-size: 0.95rem; font-weight: 700; gap: 0.5rem; letter-spacing: -0.01em; padding: 0.5rem 0.95rem; transition: color 0.18s ease, background-color 0.18s ease; } .tt-mega-tab:hover { background: rgba(var(--tt-dark-rgb), 0.05); color: var(--tt-dark); } .tt-mega-tab:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: 2px; } .tt-mega-tab.is-active { background: rgba(var(--tt-primary-rgb), 0.1); color: var(--tt-primary); } .tt-mega-tab-count { background: rgba(var(--tt-dark-rgb), 0.08); border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1; padding: 0.22rem 0.45rem; } .tt-mega-tab.is-active .tt-mega-tab-count { background: rgba(var(--tt-primary-rgb), 0.18); } /* Only the selected family renders. `display: none` rather than visibility or height, so the hidden grid costs no layout and the panel height is that of one family instead of both. The links stay in the DOM either way, and the crawlable copy of them lives in the tt-nav-src markup regardless. */ .tt-mega-group { display: none; } .tt-mega-group.is-tab-active { display: block; } /* The tab strip now labels the family, so the in-panel heading would say it twice. Kept in the DOM because it is the mobile accordion trigger. */ .tt-mega-group-heading { display: none; } .tt-mega-group + .tt-mega-group { margin-top: 0; } } /* --- 3. HEADINGS --- */ .tt-mega-group + .tt-mega-group { margin-top: 1.5rem; } .tt-mega-group-heading { margin: 0; } /* A