/* vs-menu — Xapo-style main navigation for Visual Suspect. * * Two states, sitewide: * COLLAPSED a floating liquid-glass bar: wordmark left, the six main menu * items as glass pills center, "Partner with us" + hamburger right. * EXPANDED a full Xapo-style mega menu: dark blurred rounded panel over the * page, centered wordmark, category cards with 1px outlines; a * hovered card turns white and its hovered link turns VS red. * * The module is activated by html.vs-menu-on (set by the inline boot script * that inject_menu.py places in ). When the class is absent — visitor * chose ?menu=classic / localStorage vs-menu=classic — none of these rules * fire and the original theme header renders untouched. * * Markup is built at runtime by vs-menu.js from the theme's own #menu-core * list, so the menu content self-updates with the exported nav. */ :root { --vsm-accent: #D20000; --vsm-accent-2: #A50000; --vsm-ink: #131517; --vsm-ink-soft: rgba(21, 18, 16, 0.85); /* light liquid glass — same family as the vs-search FAB */ --vsm-bar-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)); --vsm-bar-glass-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)); --vsm-bar-line: rgba(255, 255, 255, 0.7); --vsm-bar-shadow: 0 10px 34px rgba(8, 10, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(255, 255, 255, 0.28); --vsm-bar-blur: blur(26px) saturate(180%); /* transparent frosted panel — the glass reads as glass; strong blur keeps text legible over both dark and light heroes */ --vsm-panel: rgba(34, 39, 46, 0.44); --vsm-panel-blur: blur(46px) saturate(160%) brightness(1.12); --vsm-panel-line: rgba(255, 255, 255, 0.1); --vsm-card-line: rgba(255, 255, 255, 0.13); --vsm-text: rgba(255, 255, 255, 0.94); --vsm-text-dim: rgba(255, 255, 255, 0.58); --vsm-label: rgba(255, 255, 255, 0.5); --vsm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --vsm-font: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif; --vsm-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* corner radii — kept small for a crisp, less-bubbly glass look */ --vsm-r-panel: 14px; --vsm-r-card: 8px; --vsm-r-chip: 11px; --vsm-r-pill: 9px; } /* ---- CLOSED STATE = the site's ORIGINAL theme header, lightly frosted ---- We no longer draw our own bar. The theme header (#header-section: centered logo, horizontal nav, "Partner with us", the red hover underline) IS the closed-state bar; vs-menu.js wires its nav + mobile hamburger to open the mega menu below. Only the theme's own mobile-menu panel is replaced. */ html.vs-menu-on #ut-mobile-nav { display: none !important; } /* a stronger liquid-glass frost over the original white bar, to match the glass menu that drops below it */ html.vs-menu-on #header-section { background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%); } /* logo slightly smaller than the theme default (~45px -> 38px) */ html.vs-menu-on #header-section .site-logo img { height: 38px !important; width: auto !important; } /* the mega menu replaces the theme's hover dropdowns: kill the CSS reveal */ html.vs-menu-on #header-section #navigation.ut-horizontal-navigation ul li:hover > ul.sub-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* parent nav items are now menu triggers */ html.vs-menu-on #header-section #menu-core > li.ut-has-children > a.ut-main-navigation-link { cursor: pointer; } /* Awards is now a sub-item of Company (in the mega menu), so drop it from the top-level nav bar */ html.vs-menu-on #header-section #menu-core > li:has(> a[href*="film-awards-for-hong-kong"]) { display: none !important; } /* (no page scroll-lock — it reset scroll to top; vs-menu.js closes the menu on page scroll instead, which also keeps hover-opening feeling natural) */ /* ========================================================================= SHARED (used by the mega-menu top bar) ========================================================================= */ #vs-menu { font-family: var(--vsm-font); -webkit-font-smoothing: antialiased; } /* the real Visual Suspect logo image (on a white chip, in the overlay top) */ .vs-menu-logo { display: inline-flex; align-items: center; text-decoration: none !important; border: 0 !important; line-height: 0; } .vs-menu-logo .vsm-logo-img { display: block; width: auto; height: 26px; } .vs-menu-actions { display: flex; align-items: center; gap: 8px; } .vs-menu-cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--vsm-r-chip); background: var(--vsm-bar-glass); border: 1px solid var(--vsm-bar-line) !important; -webkit-backdrop-filter: var(--vsm-bar-blur); backdrop-filter: var(--vsm-bar-blur); box-shadow: var(--vsm-bar-shadow); font-family: var(--vsm-font); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vsm-ink-soft) !important; text-decoration: none !important; white-space: nowrap; transition: background 0.22s var(--vsm-ease), border-color 0.22s var(--vsm-ease); } .vs-menu-cta:hover { background: var(--vsm-bar-glass-hover); color: var(--vsm-ink) !important; } .vs-menu-cta svg { width: 13px; height: 13px; flex: 0 0 auto; } .vs-menu-close { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--vsm-r-chip); background: var(--vsm-bar-glass); border: 1px solid var(--vsm-bar-line); -webkit-backdrop-filter: var(--vsm-bar-blur); backdrop-filter: var(--vsm-bar-blur); box-shadow: var(--vsm-bar-shadow); color: var(--vsm-ink-soft); cursor: pointer; transition: background 0.22s var(--vsm-ease); } .vs-menu-close:hover { background: var(--vsm-bar-glass-hover); color: var(--vsm-ink); } .vs-menu-close svg { width: 16px; height: 16px; } /* ========================================================================= EXPANDED MEGA MENU — drops DOWN from below the nav bar (Xapo cards). The theme header (logo + nav + Partner) stays visible ABOVE it, so the panel carries no logo/Partner of its own — just a close button. ========================================================================= */ .vs-menu-scrim { position: fixed; top: 204px; /* JS overrides = header bottom; dims only below the bar */ left: 0; right: 0; bottom: 0; z-index: 9980; /* below the header (10000) so the bar stays bright */ background: rgba(8, 9, 10, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.28s var(--vsm-ease); } html.vs-menu-open .vs-menu-scrim { opacity: 1; pointer-events: auto; } .vs-menu-overlay { position: fixed; top: 204px; /* JS overrides with the live header bottom */ left: clamp(24px, 5vw, 104px); /* bigger empty space left/right */ right: clamp(24px, 5vw, 104px); z-index: 9990; /* above the scrim, below the header */ display: none; max-height: calc(100vh - 224px); /* JS overrides */ overflow-y: auto; overscroll-behavior: contain; border-radius: var(--vsm-r-panel); background: var(--vsm-panel); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: var(--vsm-panel-blur); backdrop-filter: var(--vsm-panel-blur); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.03); padding: 18px clamp(26px, 3vw, 56px) 40px; /* slide-out reveal: unrolls downward from behind the nav line, with a fade */ opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0 round var(--vsm-r-panel)); transition: opacity 0.28s var(--vsm-ease), transform 0.42s var(--vsm-ease), clip-path 0.44s var(--vsm-ease); } html.vs-menu-open .vs-menu-overlay { display: block; } html.vs-menu-open .vs-menu-overlay.vs-menu-in { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0 round var(--vsm-r-panel)); } /* -- panel top row: just the close button, top-right -------------------- */ .vs-menu-panel-top { display: flex; align-items: center; justify-content: flex-end; min-height: 0; margin-bottom: 4px; } /* on hover-capable pointers the menu closes on hover-out (and Esc / click-away), so the close button is only needed on touch devices */ @media (hover: hover) and (pointer: fine) { .vs-menu-panel-top { display: none; } } .vs-menu-panel-top .vs-menu-close { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--vsm-text); } .vs-menu-panel-top .vs-menu-close:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; } /* -- the category cards ---------------------------------------------------- */ .vs-menu-cards { display: flex; align-items: stretch; gap: 22px; margin: 6px 0 6px; } .vs-menu-card { flex: 1 1 0; min-width: 0; border: 1px solid var(--vsm-card-line); border-radius: var(--vsm-r-card); padding: 26px 26px 30px; background: transparent; transition: background 0.24s var(--vsm-ease), border-color 0.24s var(--vsm-ease); } /* hovering a nav item highlights its matching card the SAME way a direct card hover does — the card turns white with dark text */ .vs-menu-card.vsm-hint { background: #ffffff; border-color: #ffffff; } .vs-menu-card.vsm-hint .vs-menu-card-label { color: #7a7f83 !important; } .vs-menu-card.vsm-hint .vs-menu-card-links a { color: var(--vsm-ink) !important; } .vs-menu-card.vsm-hint .vs-menu-card-links .vsm-tag { color: #9aa0a4; } .vs-menu-card.vsm-hint .vs-menu-card-links a:hover .vsm-name { color: var(--vsm-accent) !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .vs-menu-card-label { margin: 0 0 24px !important; padding: 0 !important; font-family: var(--vsm-mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--vsm-label) !important; transition: color 0.24s var(--vsm-ease); } .vs-menu-card-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: block; } .vs-menu-card-links li { margin: 0 !important; padding: 0 !important; } /* one label per line: single column + a responsive size that shrinks the text on narrower desktops so long labels like "All Video Productions" never wrap to a second line. Flex row = name left, tag right. */ .vs-menu-card-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; font-family: var(--vsm-font); font-size: clamp(13.5px, 0.95vw, 16px); font-weight: 400; line-height: 1.34; letter-spacing: 0.005em; white-space: nowrap; color: var(--vsm-text) !important; text-decoration: none !important; border: 0 !important; transition: color 0.18s var(--vsm-ease); } .vs-menu-card-links .vsm-name { min-width: 0; } /* the "| Corporate Video" half sits to the RIGHT of the name, small + gray */ .vs-menu-card-links .vsm-tag { flex: 0 0 auto; margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vsm-text-dim); white-space: nowrap; transition: color 0.18s var(--vsm-ease); } /* the Xapo move: hovered card goes white, hovered link goes accent -------- */ @media (hover: hover) { .vs-menu-card:hover { background: #ffffff; border-color: #ffffff; } .vs-menu-card:hover .vs-menu-card-label { color: #7a7f83 !important; } .vs-menu-card:hover .vs-menu-card-links a { color: var(--vsm-ink) !important; } .vs-menu-card:hover .vs-menu-card-links .vsm-tag { color: #9aa0a4; } .vs-menu-card:hover .vs-menu-card-links a:hover .vsm-name { color: var(--vsm-accent) !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } } /* keyboard focus mirrors hover */ .vs-menu-card:focus-within { background: #ffffff; border-color: #ffffff; } .vs-menu-card:focus-within .vs-menu-card-label { color: #7a7f83 !important; } .vs-menu-card:focus-within .vs-menu-card-links a { color: var(--vsm-ink) !important; } .vs-menu-card:focus-within .vs-menu-card-links a:focus { color: var(--vsm-accent) !important; text-decoration: underline !important; text-underline-offset: 7px; outline: none; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1099px) { /* JS still positions top = header bottom; keep small side margins */ .vs-menu-overlay { left: 8px; right: 8px; padding: 14px 14px 28px; } .vs-menu-cards { flex-direction: column; margin: 4px 0 4px; } .vs-menu-card { padding: 20px 22px 22px; } .vs-menu-card-links a { font-size: 16px; white-space: normal; } } @media (max-width: 639px) { .vs-menu-cta .vsm-cta-text { display: none; } .vs-menu-cta { padding: 12px 14px; } .vs-menu-cta svg { width: 15px; height: 15px; } } /* ========================================================================= SCROLLED-HEADER LOGO — fades in on the left once the bar collapses to one row on scroll, and fades out again near the top so the centered logo returns ========================================================================= */ .vs-scroll-logo { position: fixed; top: 25px; left: clamp(20px, 3.5vw, 56px); z-index: 10001; /* just above the collapsed nav bar (header = 10000) */ display: inline-flex; align-items: center; line-height: 0; text-decoration: none !important; border: 0 !important; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.5s var(--vsm-ease), transform 0.5s var(--vsm-ease); } /* a very subtle backlight glow behind the logo (fades with the parent) */ .vs-scroll-logo::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 340%; border-radius: 999px; background: radial-gradient(58% 58% at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 72%); filter: blur(11px); z-index: -1; pointer-events: none; } .vs-scroll-logo img { display: block; height: 30px; width: auto; } .vs-scroll-logo.vs-scroll-logo-on { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 1024px) { /* on tablet/mobile the theme doesn't collapse the bar this way; hide it */ .vs-scroll-logo { display: none; } } /* ========================================================================= MOTION SAFETY ========================================================================= */ @media (prefers-reduced-motion: reduce) { .vs-menu-overlay, .vs-menu-scrim, .vs-menu-cta, .vs-menu-card, .vs-menu-card-links a { transition: none !important; } .vs-menu-overlay { clip-path: none !important; } } @media print { #vs-menu { display: none !important; } }