/* ========================================================================== Clari5 Tabs — main stylesheet Brand identity pulled from the real Clari5 logo: charcoal wordmark, a two-tone blue (sky blue + navy), and a small green accent. Light is the primary experience (matching the logo's light-background mark); a dark palette is available via the header theme toggle, using the same hues. ========================================================================== */ :root { --bg: #FFFFFF; --bg-alt: #F3F5F8; --surface: #FFFFFF; --surface-2: #EDF1F6; --ink: #2B2B2E; /* Matched to the reference's --muted-foreground, oklch(47% .04 255) converted. */ --ink-soft: #4C5C71; --ink-faint: #8B8D94; --border: #E3E6EC; --border-soft: #EDF0F4; /* The reference's own pale two-tone gradient stops (oklch 93%/96.5% navy tints), used on the hub-diagram center circle. */ --navy-soft: #DFE9F4; --navy-deep: #EFF4F9; /* "Strong ink" for headings — dark charcoal on light, near-white on dark, so headings always read at full contrast regardless of theme. Matched to the reference site's own --foreground (a true navy, not neutral gray-black) by converting its oklch(22% .05 263) to sRGB. */ --navy: #0E1A32; --navy-rgb: 14, 26, 50; --navy-600: #000000; --navy-100: #E9F4FC; /* Matched to the reference site's --primary, converted from its own oklch(45% .296 264.6) to sRGB — a touch more violet-leaning than the design doc's original #2E5BFF. --accent-600 is the same hue darkened in oklch space (38% lightness) rather than an eyeballed shade. */ --accent: #0619F5; --accent-600: #0E00DC; --accent-100: #E8ECFF; --accent-rgb: 6, 25, 245; --accent-600-rgb: 14, 0, 220; --brand-green: #4CB27A; --brand-green-rgb: 76, 178, 122; /* Matched to the reference's --destructive, oklch(60% .2 20) converted. */ --brand-red: #DE394B; --brand-red-rgb: 222, 57, 75; /* The reference's --cyan-glow accent (small live-stat highlights) — oklch(56% .11 215) converted. Not wired in broadly yet; available for spot use where the reference uses it distinctly from the main blue. */ --cyan-glow: #00849C; --cyan-glow-rgb: 0, 132, 156; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.06); --shadow-md: 0 8px 24px rgba(20, 22, 27, 0.08); --shadow-lg: 0 20px 48px rgba(20, 22, 27, 0.12); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Site-wide font audit: Inter was still showing up in the FAQ, footer, and elsewhere -- everything routes through these two variables (only 2 hardcoded 'Inter' references existed in the whole file, both right here), so both now resolve to Poppins. Small mono headings/eyebrows (--font-mono) are the deliberate exception, untouched. */ --font-display: 'Poppins', -apple-system, sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Was JetBrains Mono / Oswald -- a deliberate typographic accent for small kicker labels and big stat numbers, but the client note is explicit and repeated: every page should use Poppins, no exceptions. Kept as separate variables (not merged into --font-body) so anything keyed off --font-mono/--font-numeric for its letter-spacing/tracking treatment, not just its typeface, is untouched. */ --font-mono: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-numeric: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Matched to the reference's own header/hero container width (1280px, confirmed via its actual computed layout), not guessed -- was 1620px, noticeably wider, which is why the hero's proportions (and the badge chips relative to the sphere) didn't match. .container-max used to stay at 1440px after that fix, so every section using plain .container (most of the homepage) no longer shared a left/right edge with .container-wide (header, footer, hero) -- per direct feedback, both now match. */ --container-max: 1280px; --container-wide-max: 1280px; color-scheme: light; } :root[data-theme="dark"] { --bg: #12151A; --bg-alt: #181C22; --surface: #1C2129; --surface-2: #212730; --ink: #F2F3F5; --ink-soft: #A3A8B0; --ink-faint: #6C717A; --border: #2A303A; --border-soft: #232931; --navy: #F5F6F8; --navy-600: #FFFFFF; --navy-100: #16283C; --accent: #4FADE0; --accent-600: #7EC4EA; --accent-100: #16283C; --accent-rgb: 79, 173, 224; --accent-600-rgb: 126, 196, 234; --brand-green: #57C486; --brand-green-rgb: 87, 196, 134; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55); color-scheme: dark; } body { transition: background 0.4s var(--ease), color 0.4s var(--ease); } .site-header, .feature-card, .case-card, .tabs-v-layout, .stats-grid, .insight-item, .accordion-item, .hero-visual { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* "Why do we have horizontal scroll, I don't want horizontal scroll" -- decorative absolutely-positioned glow/blur elements (.hero-glow etc.) intentionally bleed past their own section on purpose, clipped by that section's own overflow:hidden; this is a page-level safety net so a transform/animation on one of those, or any future one, can never leak into a document-level horizontal scrollbar regardless of which section it's in. */ html, body { overflow-x: hidden; max-width: 100%; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg) radial-gradient(var(--border-soft) 1px, transparent 1px) 0 0/28px 28px; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } /* Form fields never inherit the page font by default (they fell back to Arial, e.g. the Insights "By Document / By Country / By Topic" selects) -- use the site font everywhere. */ input, select, textarea { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--navy); } p { margin: 0 0 1em; color: var(--ink-soft); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--bg); padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; font-weight: 700; } .skip-link:focus { left: 0; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; } .container-wide { max-width: var(--container-wide-max); margin: 0 auto; padding: 0 40px; } /* ---------- scroll progress bar ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-600)); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6); z-index: 999; transition: width 0.1s linear; } /* ---------- scroll-to-top button ---------- */ .scroll-top-btn { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #FFFFFF; border: 0; box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), 0.6); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s, background 0.25s var(--ease); z-index: 500; } .scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top-btn:hover { background: var(--accent-600); transform: translateY(-3px); } /* "The scroll to top button is not working in mobile" -- it wasn't broken, it was being covered by the cookie-consent banner's own hit area (same bottom-right corner) for any first-time visitor who hadn't dismissed it yet. --cookie-banner-offset is set to that banner's real height by initCookieConsent() in main.js. */ body.has-cookie-banner .scroll-top-btn { bottom: var(--cookie-banner-offset, 24px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s, background 0.25s var(--ease), bottom 0.3s var(--ease); } @media (max-width: 760px) { .scroll-top-btn { right: 16px; bottom: 16px; width: 40px; height: 40px; } } /* ---------- cookie consent banner ---------- */ /* "Scroll to top is not working in mobile" -- the REAL cause, found by checking which element actually receives the tap: this unconditional `display: flex` is author CSS, which always beats the browser's own `[hidden] { display: none }` default regardless of specificity, so setting banner.hidden = true in JS never actually removed it from the layout. It just sat there at opacity:0 (invisible) but still on top (z-index 600, above the button's 500) and fully clickable, silently swallowing every tap on the scroll-top button on every page, forever after the first dismissal -- not only while genuinely visible. Explicit pointer-events + a real [hidden] rule close both gaps. */ .cookie-consent { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 600; max-width: 620px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .cookie-consent.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cookie-consent[hidden] { display: none; } .cookie-consent-text { margin: 0; font-size: 13.5px; color: var(--ink-soft); flex: 1 1 260px; } .cookie-consent-text a { color: var(--accent); font-weight: 600; } .cookie-consent-actions { display: flex; gap: 10px; flex: none; } @media (max-width: 640px) { .cookie-consent { left: 12px; right: 12px; bottom: 12px; padding: 16px; } .cookie-consent-actions { width: 100%; } .cookie-consent-actions .btn { flex: 1; } } /* ---------- theme toggle ---------- */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); flex: none; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* Both icons are always in the DOM; only the one for the *next* state shows — moon while in light mode ("tap for dark"), sun while in dark mode. */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } :root[data-theme="dark"] .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-icon-moon { display: none; } .theme-toggle-label { display: none; } /* Matched to the reference's own eyebrow exactly (inspected directly): Inter, not mono -- font-weight 600, and letter-spacing 0.3em, much wider than what was here before. */ /* Every section eyebrow on the reference (Solutions, Proof at scale, Insights, The Anatomy of a Decision, Enterprise-wide coverage, ...) uses the same cyan, never the blue accent -- confirmed by sampling every uppercase/tracked label site-wide, not just this one section. */ .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan-glow); margin: 0 0 12px; } /* ---------- buttons ---------- */ /* Fully pill-shaped, matching the reference site's own buttons exactly (border-radius: 3.35544e+07px in their computed styles, i.e. "however round the box allows" — 999px does the same thing without the silly number). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; position: relative; overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s var(--ease), color .25s var(--ease); white-space: nowrap; } .btn > * { position: relative; z-index: 1; } /* Submit button starts disabled on the Contact Us / Request a Demo forms until every mandatory field (incl. captcha) validates -- needs to visibly look inactive, not just silently refuse clicks (Sept 2026 site-modifications doc). */ .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .btn:disabled:hover::before { animation: none; } /* Same hover-only diagonal sheen used on every other box/button on the site (.hub-node, the insights cards, etc.) for one consistent effect everywhere, not a per-component variant. */ .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(var(--cyan-glow-rgb), 0.22) 50%, transparent 65%); transform: translateX(-140%); pointer-events: none; } .btn:hover::before { animation: clari5-sheen 0.9s ease-out 1; } /* Always-on soft glow at rest, matched to the reference's own primary button (it isn't hover-only there). */ .btn-primary { background: var(--accent); color: #FFFFFF; box-shadow: 0 0 42px -8px rgba(var(--accent-rgb), 0.6); } .btn-primary:hover { background: var(--accent-600); transform: translateY(-4px); box-shadow: 0 18px 46px -20px rgba(var(--accent-rgb), 0.55); } .btn-primary:disabled:hover { background: var(--accent); transform: none; box-shadow: none; } .is-magnetic { transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); } /* A clean focus ring instead of the browser's default (often a harsh black rectangle) — shown only for keyboard/assistive-tech users, not mouse clicks. */ .btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; } /* Matched to the reference's secondary button: a translucent navy wash rather than plain transparent-with-border. */ .btn-ghost { background: rgba(var(--navy-rgb), 0.06); color: var(--ink); border: 1px solid rgba(var(--navy-rgb), 0.12); } .btn-ghost:hover { border-color: rgba(var(--accent-rgb), 0.35); background: var(--accent-100); color: var(--accent); transform: translateY(-4px); box-shadow: 0 18px 46px -20px rgba(var(--accent-rgb), 0.55); } .btn-lg { padding: 16px 32px; font-size: 14px; } .btn-sm { padding: 9px 16px; font-size: 13px; } .btn-block { display: flex; width: 100%; } /* ---------- reveal-on-scroll ---------- The reference's own entrance (its Tailwind "enter" keyframe, sampled directly off its site) blurs elements into focus on top of the usual fade + slide -- a much more pronounced, deliberate reveal than a plain fade. Matched here across every .reveal use, not just the hero, so the whole site's reveals read as one consistent effect. */ .reveal { opacity: 0; transform: translateY(22px); filter: blur(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); } .reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); } /* Two-column split sections slide in from their own side, like the reference (left column from the left, right column from the right). */ .genie-split > .reveal:first-child:not(.in-view) { transform: translateX(-48px); } .genie-split > .reveal:nth-child(2):not(.in-view) { transform: translateX(48px); } .genie-split > .reveal:nth-child(2) { transition-delay: 0.12s; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; /* Light is the default now (no toggle sets [data-theme] at all), so this rule — not a [data-theme="light"] override — is what actually applies. */ background: rgba(250, 250, 247, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); } :root[data-theme="dark"] .site-header { background: rgba(10, 11, 14, 0.78); } .site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; } .brand { display: flex; align-items: center; gap: 8px; } .brand-word { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); } /* Real uploaded logo (Appearance > Customize > Site Identity), when set. Sized taller than a typical single-line wordmark since Clari5's logo file is a two-row lockup ("Clari5" + "A Perfios Company" stacked beneath it) — this keeps the tagline legible instead of shrinking it to a sliver. */ .custom-logo-link { display: flex; align-items: center; } /* Sized to roughly match the "Schedule Demo" button's height, so the two line up visually instead of the logo dominating the header row. */ .custom-logo-link img { max-height: 46px; width: auto; display: block; } .footer-brand .custom-logo-link img { max-height: 40px; } @media (max-width: 760px) { .custom-logo-link img { max-height: 36px; } .logo-mobile img { max-height: 30px; } } /* Optional separate dark-mode logo (Site Identity > "Logo — Dark Mode"). Both logos are always in the DOM; CSS swaps which one is visible the instant [data-theme] changes, so there's no flash or JS-timed swap. */ .logo-light, .logo-dark, .logo-mobile { display: flex; align-items: center; } .logo-dark, .logo-mobile { display: none; } :root[data-theme="dark"] .has-dark-variant { display: none; } :root[data-theme="dark"] .logo-dark { display: flex; } /* Optional separate compact logo for small screens (Site Identity > "Logo — Mobile"). Overrides whichever of light/dark is otherwise active. */ @media (max-width: 760px) { .has-mobile-variant { display: none !important; } .logo-mobile { display: flex !important; } } .primary-nav .nav-menu { display: flex; align-items: center; gap: 32px; } .primary-nav .nav-menu > li { position: static; } .primary-nav .nav-menu > li.has-mega { position: relative; } /* wins over the rule above on specificity */ /* "Menu font is small and dropdown menu is big" -- the top-level nav bar (14.5px) read as undersized next to its own dropdown content, which is 17px since the mega-menu font-size fix above. Bumped the bar itself closer to that scale instead of shrinking the dropdown back down (that dropdown size was itself a deliberate earlier fix for "Solutions banner ... looks very congested"). */ .primary-nav .nav-menu a, .nav-mega-trigger { font-size: 16px; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; } .primary-nav .nav-menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right 0.3s var(--ease); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7); } .primary-nav .nav-menu a:hover::after { right: 0; } /* ---------- mega menu ---------- */ .has-mega { position: relative; } /* Same padding/no-background as every other nav link — per feedback it should read as a plain nav item with a dropdown caret, not a highlighted pill. */ .nav-mega-trigger { display: flex; align-items: center; gap: 5px; } .mega-caret { transition: transform 0.3s var(--ease); color: var(--ink-faint); } .has-mega:hover .mega-caret, .nav-mega-trigger[aria-expanded="true"] .mega-caret { transform: rotate(180deg); color: var(--accent); } /* The gap between the trigger and the panel lives INSIDE this element as padding-top, not as a `top` offset — so the invisible space the cursor crosses on the way down is still part of .mega-menu's hoverable box. (An offset gap creates a dead zone: the mouse leaves .has-mega between the button and the panel, so :hover drops and the menu closes early.) */ .mega-menu { position: absolute; top: 100%; /* Left-anchored to the trigger (not centered) and capped to the viewport width with margin either side — "Platform" sits near the left edge of the header, so centering a wide panel on it pushed most of the panel off-screen to the left and got visually cut off. */ left: 0; /* Header Menu Changes-30Sept.pdf: "increase the box size" -- widened to comfortably fit the now-longer full-form labels without wrapping mid-word. */ width: min(880px, calc(100vw - 48px)); padding-top: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), visibility 0.25s; z-index: 90; } .mega-menu-inner { transform: translateY(10px); transition: transform 0.25s var(--ease); } /* :hover scoped to devices that actually have hover (a real pointer) -- on touch, a :hover rule on this element makes the browser swallow the first tap just to simulate the hover state, so opening it needed two taps: one to "hover", one to actually click. The click-to-toggle JS below (.mega-menu.is-open) already handles touch on its own; :hover is purely a desktop nicety layered on top. */ @media (hover: hover) and (pointer: fine) { .has-mega:hover .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; } .has-mega:hover .mega-menu-inner { transform: translateY(0); } } .has-mega:has(:focus-visible) .mega-menu, .mega-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .has-mega:has(:focus-visible) .mega-menu-inner, .mega-menu.is-open .mega-menu-inner { transform: translateY(0); } .mega-menu-inner { display: flex; gap: 36px; padding: 32px; max-width: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; flex: 1; } /* Matches the sitewide convention for these small tracked kicker labels (Inter/font-body, not mono) -- same fix already applied to .eyebrow, .logo-strip-label, .hero-visual-chip-label, etc. */ .mega-col-heading { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin: 0 0 10px; } .mega-link { display: flex; align-items: center; gap: 7px; padding: 9px 0; } /* Header Menu Changes-30Sept.pdf: "Increase the font size of the menus" -- was 13.5px; also carries longer full-form labels now (e.g. "EFRM – Enterprise Fraud Risk Management") so line-height needs the room too. */ .mega-link-title { font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--ink); transition: color 0.25s var(--ease); } .mega-link:hover .mega-link-title { color: var(--accent); } .mega-promo { flex: 0 0 240px; background: var(--accent-100); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; overflow: hidden; /* belt-and-braces: nothing inside can visually break out past the rounded corners */ } .mega-promo .btn { display: flex; /* block-level, so margin:auto below can actually center it */ white-space: normal; text-align: center; justify-content: center; max-width: 200px; width: fit-content; margin: 4px auto 0; /* centered, so there's visible space on both sides instead of sitting flush with the card's left edge */ padding: 16px 28px !important; /* deliberately generous and !important so no inherited .btn/.btn-sm padding can win instead */ } /* .primary-nav .nav-menu a, .nav-mega-trigger { color: var(--ink) } (2 classes + 1 element) outranks .btn-primary's plain white (1 class) since this button lives inside .nav-menu's own dropdown -- text was rendering dark-on-blue, unreadable. Three classes here beats that compound selector on specificity. */ .mega-promo .btn.btn-primary { color: #FFFFFF; } /* Requested: no darkening/lift on hover for this specific button — it stays flat. */ .mega-promo .btn:hover { background: var(--accent); transform: none; box-shadow: none; } .mega-promo-tag { display: inline-block; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-600); margin-bottom: 10px; } .mega-promo h4 { font-size: 1.05rem; margin-bottom: 6px; } .mega-promo p { font-size: 13px; margin-bottom: 16px; } /* Resources / Company dropdowns: flat link lists, no promo card and no per-column group headings -- much narrower than the grouped Solutions mega menu (760px), so it doesn't read as a half-empty giant panel over just two short columns of links. */ .mega-menu.is-compact { width: min(360px, calc(100vw - 48px)); } .mega-menu.is-compact .mega-cols { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; } /* Solutions dropdown, redesigned into a flat 2-column list of fixed product names (header menu redesign, Sept 2026) -- wider than the Resources/Company .is-compact panels since several labels here ("Cybercrime Complaint Processing", "AI-Powered Risk Intelligence") are long enough to wrap awkwardly at 360px. */ .mega-menu.is-flat-solutions { width: min(460px, calc(100vw - 48px)); } .mega-menu.is-flat-solutions .mega-cols { grid-template-columns: repeat(2, 1fr); gap: 4px 24px; } /* "Insurance" flyout inside the Solutions dropdown -- its own hover/click sub-panel (EFRM, AML) instead of a plain link. Flies out to the right of the Solutions panel on desktop; collapses into an inline accordion on mobile/touch instead (see @media blocks below). */ .mega-link-parent { position: relative; } .mega-submenu-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; } .mega-submenu-trigger .mega-link-title { transition: color 0.25s var(--ease); } .mega-submenu-trigger:hover .mega-link-title, .mega-submenu-trigger[aria-expanded="true"] .mega-link-title { color: var(--accent); } .mega-caret-right { transition: transform 0.25s var(--ease), color 0.25s var(--ease); color: var(--ink-faint); flex-shrink: 0; } .mega-submenu-trigger[aria-expanded="true"] .mega-caret-right { transform: rotate(90deg); color: var(--accent); } .mega-submenu { position: absolute; left: 100%; top: -8px; min-width: 150px; max-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(6px); transition: opacity 0.2s var(--ease), visibility 0.2s, transform 0.2s var(--ease); z-index: 91; } @media (hover: hover) and (pointer: fine) { .mega-link-parent:hover .mega-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } .mega-link-parent:hover .mega-caret-right { transform: rotate(90deg); color: var(--accent); } } .mega-submenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } .mega-sublink { display: block; padding: 6px 0; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--ink); white-space: normal; transition: color 0.25s var(--ease); } .mega-sublink:hover { color: var(--accent); } @media (max-width: 1080px) { .mega-cols { grid-template-columns: repeat(2, 1fr); } .mega-menu-inner { flex-direction: column; } .mega-promo { flex: none; } /* Not enough room to fly out sideways once the panel itself is already near the viewport edge -- drop the submenu below its trigger instead, same direction the main mega-menu opens. */ .mega-submenu { left: 0; top: 100%; transform: translateY(4px); } .mega-submenu.is-open { transform: translateY(0); } } @media (hover: hover) and (pointer: fine) and (max-width: 1080px) { .mega-link-parent:hover .mega-submenu { transform: translateY(0); } } /* Inside .mobile-nav, hover doesn't apply (touch) — the mega menu becomes a plain accordion driven purely by JS toggling .is-open via click. */ @media (max-width: 760px) { .mobile-nav .mega-menu { position: static; width: 100%; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto; transform: none; padding-top: 0; margin-top: 4px; transition: max-height 0.4s var(--ease); } .mobile-nav .mega-menu.is-open { max-height: 1200px; } .mobile-nav .mega-menu-inner { padding: 8px 0 16px; background: transparent; border: none; border-radius: 0; box-shadow: none; } .mobile-nav .mega-cols { grid-template-columns: 1fr 1fr; gap: 14px; } .mobile-nav .mega-promo { margin-top: 4px; } /* Insurance flyout becomes an inline accordion here -- no room to fly out sideways on a phone-width panel. */ .mobile-nav .mega-submenu { position: static; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: none; border: none; box-shadow: none; border-radius: 0; padding: 0 0 0 14px; margin-bottom: 0; transition: max-height 0.3s var(--ease), margin-bottom 0.3s var(--ease); } .mobile-nav .mega-submenu.is-open { max-height: 200px; padding-top: 4px; margin-bottom: 6px; } } .header-actions { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); margin: 0 auto; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; max-height: 0; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); transition: max-height 0.4s var(--ease); } .mobile-nav.is-open { max-height: 80vh; overflow-y: auto; } .mobile-nav { padding: 0 24px; } /* Was a plain stacked text list with a 4px gap and no separation -- per direct feedback ("looks very simple"), gave each link its own row with even padding and a divider, matching the weight/size of the desktop nav links instead of reading as an afterthought. */ .mobile-nav .nav-menu-mobile { padding: 8px 0 16px; display: flex; flex-direction: column; gap: 0; } .mobile-nav .nav-menu-mobile li { border-bottom: 1px solid var(--border-soft); } .mobile-nav .nav-menu-mobile li:last-child { border-bottom: none; } /* .nav-mega-trigger included alongside the plain links -- it was missing here entirely, so Solutions/Resources/Company (all