.elementor-7008 .elementor-element.elementor-element-d451e24{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-858c30f *//* ============================================================ Annual Report Navigation — WordPress / Elementor build GENERATED from modules/Annual Report Navigation.module/module.css Do not hand-edit. Regenerate: python3 docs/harden.py Ships with docs/annual-report-navigation.html (static markup, the HubL fields already resolved to the AR2025 section list) and docs/annual-report-navigation.js (the module's JS, unchanged). HOW TO USE 1. Paste the static HTML anywhere on the page — an Elementor HTML widget is fine. Its own JS immediately relocates the panel to , so its placement in the layout does not matter. 2. Load this CSS after Elementor's, and load the JS at the end of (or with defer). 3. Set the top offset to your theme header's height via the inline style on the wrapper: style="--ap-offset: 96px". Kept as an inline custom property on purpose — see below. WHY THIS IS NOT SCOPED UNDER `.ar2025` The panel portals itself to on init, escaping any wrapper the markup started in. A `.ar2025 …` prefix would therefore stop matching the moment the JS runs. Specificity comes from doubling the panel's own class instead — `.atom-panel.atom-panel` — which matches exactly the same elements at 0-2-0. WHAT WAS CHANGED vs the module CSS - First class in each .elementor-7008 .elementor-element.elementor-element-858c30f duplicated (specificity 0-1-x -> 0-2-x). - !important on every declaration EXCEPT --ap-* custom properties, which must stay soft so the inline style on the element still wins. - The mobile `html, body { overflow-x: clip }` clamp is deliberately left unscoped — it is a page-level rule, not panel chrome. ============================================================ */ .atom-panel.atom-panel { --ap-width: 260px; --ap-bg: #070b08; /* near-black panel */ --ap-text: #ffffff; /* white sub-links */ --ap-heading: #2ff29e; /* green section labels + HIDE */ --ap-active: #2ff29e; /* active highlight */ --ap-sep: rgba(255, 255, 255, 0.1); /* faint separators */ --ap-border: rgba(120, 200, 140, 0.22); --ap-btn: #3f8f45; /* download button green */ --ap-offset: 96px; /* overridden inline from the "Top offset" field */ --ap-gap: 24px; /* distance from the viewport edge */ /* The module's JS relocates this element to so no HubSpot section/column wrapper (overflow, transform, short height) can affect it. It floats fixed to the viewport regardless of where it's dropped. */ position: fixed !important; top: var(--ap-offset) !important; width: var(--ap-width) !important; max-height: calc(100vh - var(--ap-offset) - 24px) !important; z-index: 1000 !important; } .atom-panel--left.atom-panel--left.left { left: var(--ap-gap) !important; right: auto !important; } .atom-panel--right.atom-panel--right.right { right: var(--ap-gap) !important; left: auto !important; } /* Left in the original DOM spot after the panel is portaled to ; on mobile it reserves the bar's slot in the flow and marks where the bar should pin. */ /* Always in the flow, zero-height until the bar pins: the JS sets --ap-slot to the bar's height so the page does not jump. It must be a custom property, not an inline `height`/`display` — the hardened rules here carry !important, which an inline declaration cannot beat, while a custom property set inline still feeds this var(). */ .atom-panel__sentinel.atom-panel__sentinel { display: block !important; width: 100% !important; height: var(--ap-slot, 0px) !important; } .atom-panel__inner.atom-panel__inner { display: flex !important; flex-direction: column !important; /* background: var(--ap-bg) !important; */ background: linear-gradient(180deg, #202122 0%, #000000 100%) !important; color: var(--ap-text) !important; /* border: 1px solid var(--ap-border) !important; */ border-radius: 10px !important; max-height: inherit !important; overflow: hidden !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important; } /* ---- Toggle row: "← HIDE" ---- */ .atom-panel__toggle.atom-panel__toggle { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; text-align: left !important; background: transparent !important; border: 0 !important; border-bottom: 0.5px solid #fff !important; color: #fff !important; font: inherit !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 3px !important; line-height: 120% !important; text-transform: uppercase !important; padding: 10px 18px !important; cursor: pointer !important; transition: color 0.2s !important; } .atom-panel__toggle.atom-panel__toggle:hover { /* color: #7ff09a !important; */ color: #2ff29e !important; } .atom-panel__toggle.atom-panel__toggle svg { width: 20px !important; height: 20px !important; flex: 0 0 auto !important; } .atom-panel__toggle.atom-panel__toggle .chevron-right { display: none !important; } .atom-panel__toggle-closed.atom-panel__toggle-closed { display: none !important; } /* Header row holds TWO controls: a collapse arrow (→ icon rail) + a caret (open/close the sections). Label always reads "BROWSE" (never "Hide"). */ .atom-panel__toggle-open.atom-panel__toggle-open, .atom-panel__toggle-closed.atom-panel__toggle-closed { display: none !important; } .atom-panel__toggle-browse.atom-panel__toggle-browse { display: inline !important; flex: 1 1 auto !important; cursor: pointer !important; } .atom-panel__collapse.atom-panel__collapse, .atom-panel__caret.atom-panel__caret { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; color: inherit !important; cursor: pointer !important; } .atom-panel__collapse.atom-panel__collapse svg, .atom-panel__caret.atom-panel__caret svg { width: 20px !important; height: 20px !important; } /* Caret points up while the sections are open, down when collapsed */ .atom-panel__caret.atom-panel__caret .chevron-down { transition: transform 0.2s !important; } .atom-panel.atom-panel:not(.is-nav-closed) .atom-panel__caret .chevron-down { transform: rotate(180deg) !important; } /* Caret collapses just the sections (BROWSE pill stays); the arrow collapses the whole panel to the icon rail. */ .atom-panel.atom-panel.is-nav-closed .atom-panel__nav, .atom-panel.atom-panel.is-nav-closed .atom-panel__download { display: none !important; } .atom-panel.atom-panel.is-nav-closed .atom-panel__toggle { border-bottom-color: transparent !important; } /* Collapsed pill: drop the collapse arrow — just BROWSE + caret remain */ .atom-panel.atom-panel.is-nav-closed .atom-panel__collapse { display: none !important; } /* ---- Collapsed = narrow icon rail (→ + emojis + download icon) ---- */ .atom-panel.atom-panel.is-collapsed { width: auto !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__inner { width: 50px !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__toggle { justify-content: center !important; padding: 0 !important; letter-spacing: 0 !important; } /* Icon rail: the arrow button fills the whole top cell = the expand trigger, and the arrow glyph itself is enlarged. */ .atom-panel.atom-panel.is-collapsed .atom-panel__collapse { width: 100% !important; justify-content: center !important; padding: 12px 5px !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__collapse svg { width: 20px !important; height: 20px !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__toggle-open, .atom-panel.atom-panel.is-collapsed .atom-panel__toggle-closed, .atom-panel.atom-panel.is-collapsed .atom-panel__toggle-browse, .atom-panel.atom-panel.is-collapsed .atom-panel__caret { display: none !important; } .atom-panel.atom-panel.is-collapsed .chevron-left { display: none !important; } .atom-panel.atom-panel.is-collapsed .chevron-right { display: inline !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__nav { padding: 6px 0 !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__label, .atom-panel.atom-panel.is-collapsed .atom-panel__sub, .atom-panel.atom-panel.is-collapsed .atom-panel__sep { display: none !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__item { padding: 0 !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__link { justify-content: center !important; margin: 0 !important; padding: 16px 0 !important; } /* Icon rail: no scrollspy active bar (emojis only) */ .atom-panel.atom-panel.is-collapsed .atom-panel__sublink.is-current::after, .atom-panel.atom-panel.is-collapsed .atom-panel__link.is-current::after { display: none !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__icon { font-size: 24px !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__download { justify-content: center !important; padding: 5px !important; /* padding: 16px 0 20px !important; */ } .atom-panel.atom-panel.is-collapsed .atom-panel__download-link { display: none !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__download-icon-btn { color: #fff !important; } /* ---- Scroll area ---- */ .atom-panel.atom-panelscroll .atom-panel__nav { overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; min-height: 0 !important; padding: 0px 10px !important; } .atom-panel.atom-panelscroll .atom-panel__nav::-webkit-scrollbar { width: 6px !important; } .atom-panel.atom-panelscroll .atom-panel__nav::-webkit-scrollbar-thumb { background: var(--ap-sep) !important; border-radius: 6px !important; } .atom-panel__list.atom-panel__list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .atom-panel__item.atom-panel__item { margin: 0 !important; padding: 10px 0 !important; } /* ---- Section header (emoji + UPPERCASE green label) ---- */ .atom-panel__link.atom-panel__link { display: flex !important; align-items: center !important; gap: 10px !important; color: #2ff29e !important; text-decoration: none !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; line-height: 1.3 !important; margin-bottom: 5px !important; } /* No sub-list following the link (section has no subitems): drop the gap */ .atom-panel__link.atom-panel__link:not(:has(+ .atom-panel__sub)) { margin-bottom: 0 !important; } .atom-panel__link.atom-panel__link:hover { color: #2ff29e !important; } .atom-panel__icon.atom-panel__icon { flex: 0 0 auto !important; font-size: 15px !important; } .atom-panel__label.atom-panel__label { flex: 1 1 auto !important; } /* ---- Separator between sections ---- */ .atom-panel__sep.atom-panel__sep { height: 1px !important; background: var(--ap-sep) !important; margin: 15px 0px !important; list-style: none !important; } /* ---- Sub-links (large white, always visible) ---- */ .atom-panel__sub.atom-panel__sub { list-style: none !important; margin: 0 !important; padding: 0 !important; padding-left: 27px !important; } .atom-panel__subitem.atom-panel__subitem { margin: 0 !important; } .atom-panel__sublink.atom-panel__sublink { display: block !important; padding: 5px 0 !important; color: var(--ap-text) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 400 !important; line-height: 120% !important; transition: color 0.18s !important; /* max-width: 148px !important; */ } .atom-panel__sublink.atom-panel__sublink:hover { color: var(--ap-active) !important; } /* ---- Active state (scrollspy): active sub-link turns green + green bar ---- */ .atom-panel__sublink.atom-panel__sublink.is-current { color: var(--ap-active) !important; position: relative !important; } /* Rounded green bar spanning the active item's height, pinned near the panel's right edge. Sits inside the nav's 24px right padding (clear of the scrollbar) so it renders like the reference. */ .atom-panel__sublink.atom-panel__sublink.is-current::after { content: "" !important; position: absolute !important; /* top: 4px !important; */ top: 0px !important; bottom: 4px !important; right: -5px !important; width: 2px !important; min-height: 20px !important; border-radius: 5px !important; background: var(--ap-active) !important; } /* ---- Active state for a section with NO sub-items (desktop) ---- A no-sub section has only its header link, which is itself the scroll target, so scrollspy lands `is-current` on it -> highlight it like an active sub-link (active green + rounded right bar). Scoped with :not(:has(+ .atom-panel__sub)) so a parent header that OWNS a sub-list never gets the bar (only its active sub-link does). Desktop-only so the mobile chip row is untouched. */ @media (min-width: 992px) { .atom-panel__link.atom-panel__link:not(:has(+ .atom-panel__sub)).is-current { color: var(--ap-active) !important; position: relative !important; } .atom-panel__link.atom-panel__link:not(:has(+ .atom-panel__sub)).is-current::after { content: "" !important; position: absolute !important; top: -3px !important; bottom: 4px !important; right: -5px !important; width: 2px !important; min-height: 30px !important; border-radius: 5px !important; background: var(--ap-active) !important; }} /* ---- Mobile second-row sub-bar: hidden on desktop ---- */ .atom-panel__subbar.atom-panel__subbar { display: none !important; } /* ---- Download row ---- */ .atom-panel__download.atom-panel__download { display: flex !important; align-items: center !important; margin-top: 5px !important; gap: 14px !important; padding: 11px 8px 11px !important; border-top: 0.5px solid #fff !important; } .atom-panel__download-icon-btn.atom-panel__download-icon-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; color: var(--ap-text) !important; text-decoration: none !important; transition: color 0.2s !important; } .atom-panel__download-icon-btn.atom-panel__download-icon-btn:hover { color: var(--ap-active) !important; } .atom-panel__download-icon-btn.atom-panel__download-icon-btn svg { width: 26px !important; height: 26px !important; } .atom-panel__download-link.atom-panel__download-link { flex: 1 1 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 8px 12px !important; border-radius: 14px !important; background: #2ff29e !important; color: #000000 !important; font-weight: 600 !important; font-size: 15px !important; text-decoration: none !important; line-height: 120% !important; transition: filter 0.2s, transform 0.2s !important; } .atom-panel__download-link.atom-panel__download-link:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; } .atom-panel__pdf-chip.atom-panel__pdf-chip { font-size: 10px !important; font-weight: 400 !important; letter-spacing: 0.5px !important; background: #000000 !important; color: #fff !important; padding: 3px 8px !important; border-radius: 6px !important; line-height: 100% !important; } /* =================================================================== MOBILE: fixed horizontal top bar (two tiers) Row 1 = main sections (horizontal scroll) Row 2 = sub-items of the active section (built by JS) =================================================================== */ @media (max-width: 991px) {/* Un-stick the site header on mobile so it scrolls away with the page — this report nav stays the only thing pinned. The header is the FIXED element (.maya-nav, z-index 9999); .maya-nav__topbar is only its child, so we target the parent and collapse its 70px spacer so no gap is left. The bar is kept (not removed), just no longer fixed. Ships with the module, so it only affects pages that use this module. */ .maya-nav.maya-nav { position: static !important; } .maya-nav-spacer.maya-nav-spacer { height: 0 !important; } /* Same treatment for the WordPress host (mayabank.ph). That theme's header is `header.site-header.dynamic-header`, position:sticky at z-index 99997 — far above this bar's z-index 1000 — so a pinned report bar lands *behind* it and only the sub-bar row shows. There is no .maya-nav there (that class is HubSpot-only), so the rule above never fires. Un-stick it the same way. */ .site-header.site-header.dynamic-header { position: static !important; } /* Kill sideways page scroll on mobile. The bar is full-width and gets pinned (position:fixed/absolute, width:100%); if ANY element on the page is wider than the viewport (a full-bleed carousel, an over-wide image, etc.) the page scrolls sideways and the pinned bar appears to overflow with it. Clamp the document so that can't happen. Ships with the module, so it only affects pages that use this nav. (Internal scroll areas — the chip rows here, the report's own overflow-x:auto tables/carousels — keep their own scrolling.) */ html, body { /* clip (not hidden): clips the sideways overflow without turning the page into a scroll container, so it can't break position:sticky or the vertical scroll. Falls back to the pre-existing behaviour on very old browsers. */ overflow-x: clip !important; max-width: 100% !important; } /* Sits in the real page flow at its placement — relative, NOT absolute, so no JS-computed top is needed and it scrolls with the page like any other block… */ .atom-panel.atom-panel { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; max-height: none !important; z-index: 1000 !important; } /* …then pins to the top once scrolled to (JS toggles .is-stuck). */ .atom-panel.atom-panel.is-stuck { position: fixed !important; top: 0 !important; } /* full-width top bar — override the desktop side rules (equal specificity) */ .atom-panel--left.atom-panel--left.left, .atom-panel--right.atom-panel--right.right { left: 0 !important; right: 0 !important; margin: 0 !important; } .atom-panel__inner.atom-panel__inner { width: auto !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--ap-border) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important; } /* Desktop-only pieces have no place in a slim top bar */ .atom-panel__toggle.atom-panel__toggle, .atom-panel__download.atom-panel__download, .atom-panel__sep.atom-panel__sep { display: none !important; } /* Collapse behaviour is desktop-only; force the expanded bar on mobile */ .atom-panel.atom-panel.is-collapsed .atom-panel__inner { width: auto !important; } .atom-panel.atom-panel.is-collapsed .atom-panel__label, .atom-panel.atom-panel.is-collapsed .atom-panel__nav { display: initial !important; } /* ---- Row 1: main section chips ---- */ .atom-panel.atom-panelscroll .atom-panel__nav { overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch !important; padding: 8px 12px !important; } /* Hide the scrollbar on both mobile rows but keep them swipeable */ .atom-panel.atom-panelscroll .atom-panel__nav, .atom-panel__subbar.atom-panel__subbar { scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* old Edge/IE */ } .atom-panel.atom-panelscroll .atom-panel__nav::-webkit-scrollbar, .atom-panel__subbar.atom-panel__subbar::-webkit-scrollbar { display: none !important; /* WebKit/Blink */ } .atom-panel__list.atom-panel__list { display: flex !important; gap: 8px !important; } .atom-panel__item.atom-panel__item { padding: 0 !important; flex: 0 0 auto !important; } .atom-panel__sub.atom-panel__sub { display: none !important; } /* nested subs unused on mobile */ /* Plain text chips — no capsule background/border */ .atom-panel__link.atom-panel__link { margin: 0 !important; padding: 8px 14px !important; font-size: 10px !important; line-height: 120% !important; white-space: nowrap !important; } .atom-panel__icon.atom-panel__icon { font-size: 15px !important; } /* Active parent turns white; inactive parents keep the green heading color */ .atom-panel__link.atom-panel__link.is-section-current { color: #fff !important; } /* ---- Row 2: sub-items of the active section ---- */ .atom-panel__subbar.atom-panel__subbar { display: flex !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; -webkit-overflow-scrolling: touch !important; padding: 8px 12px !important; border-top: 1px solid var(--ap-sep) !important; background: rgba(0, 0, 0, 0.28) !important; } .atom-panel__subbar.atom-panel__subbar:empty { display: none !important; } /* Plain text sub-items — no capsule background/border */ .atom-panel__subchip.atom-panel__subchip { flex: 0 0 auto !important; white-space: nowrap !important; padding: 6px 12px !important; color: var(--ap-text) !important; text-decoration: none !important; font-size: 13px !important; line-height: 1.2 !important; transition: color 0.18s !important; } .atom-panel__subchip.atom-panel__subchip:hover { color: var(--ap-active) !important; } /* Active sub-item is green text; the rest stay white */ .atom-panel__subchip.atom-panel__subchip.is-current { color: var(--ap-active) !important; font-weight: 600 !important; }}/* End custom CSS */