wrapping an . Inline layout aligns the icon on the text * baseline differently in the two, costing another 1px vertically. Flex * centring makes both identical. */ .site-switcher .btn { display: inline-flex; align-items: center; justify-content: center; } .site-switcher .btn > a { display: inline-flex; align-items: center; } /* * "Financial services, your way" (Use cases) cards are links via * .stretched-link but had no hover state, so nothing signalled they were * clickable. Figma 6518:208974 lifts the card from #181818 to #262626 — * #262626 is the same step the theme uses for active surfaces on dark. */ .uc-card { transition: background-color .2s ease-in-out; } .uc-card:hover, .uc-card:focus-within { background-color: #262626; } [data-bs-theme="light"] .uc-card:hover, [data-bs-theme="light"] .uc-card:focus-within { background-color: var(--al-tertiary-bg); } /* * Blurred backdrop behind every modal (country list, industry modal, …). * * The theme already sets backdrop-filter: blur(100px) on .modal-backdrop, but * .modal-backdrop.show keeps it at --al-backdrop-opacity (0.7). A translucent * backdrop composites the blurred layer back over the sharp page, so the page * stays legible through it. Full opacity gives the frosted panel the design * asks for; the backdrop is only a 20% tint, so nothing goes dark. * * _personal_app_download_modal.html already did this for its own modal — this * generalises it instead of repeating the override per modal. */ .modal-backdrop.show { opacity: 1; } /* * Sticky mobile CTA slides out of the way while the hero CTA is on screen * (see the observer in partials/_sticky_cta.html). Transform rather than * display so the change animates; pointer-events keep the hidden bar from * swallowing taps near the bottom edge. */ [data-sticky-cta] { transition: transform .3s ease, opacity .3s ease; } [data-sticky-cta].sticky-cta-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-sticky-cta] { transition: none; } } /* * "Grow faster with Altery Business" banner: gap between the description and * the CTA is 20px on mobile and 32px on desktop (replaces Bootstrap's pb-4, * which is 24px at both sizes). Same banner appears on the business landing * and on Business account. */ .biz-cta-desc { padding-bottom: 20px; } @media (min-width: 768px) { .biz-cta-desc { padding-bottom: 32px; } } /* * Contacts: the map sits directly above the footer, and the section's default * 40px bottom padding reads as a gap between them on mobile. Desktop keeps it. */ @media (max-width: 767.98px) { .contacts-map { padding-bottom: 0; } } /* * Mega-menu: no shadow line under the open panel. * * The theme drops a shadow under .modal-content (0 8px 32px -4px). On the dark * Business menu it is rgba(8,11,18,.25) and invisible against black, but on the * light One menu it resolves to rgba(103,111,123,.1) and reads as a grey rule * across the full width where the panel meets the page. The panel is already * separated by its own background, so the shadow only adds that line. */ #modal-one .modal-content, #modal-business .modal-content { box-shadow: none; } /* * …and no focus ring around the modal container — this is the line that * stayed under the open mega-menu after the shadow was gone. * * Bootstrap focuses the .modal element itself on show (it carries * tabindex="-1" for the focus trap). The mega-menu opens on hover, with no * click, so Chrome and Safari treat that programmatic focus as :focus-visible, * and the theme's global `html :focus-visible` rule draws a 4px outline in * --al-focus-ring-color around the whole modal. Its top and sides fall off * screen; its bottom edge lands exactly under the panel: white 10% on the dark * menu, near-black 10% on the light one. * * Bootstrap means modals to have no outline (.modal { outline: 0 }), but the * theme's selector outranks it. The container is never something the user * tabs to — focus rings still show on the links and buttons inside — so this * restores Bootstrap's intent, the same exception the theme already makes for * .offcanvas:focus-visible. * * Opening the menu from a script does not trip the focus-visible heuristic, * so the line never shows in automated screenshots; reproduce it with a key * press before focusing the modal. */ .modal:focus-visible { outline: 0; } /* * Mobile mega-menu spacing (Figma: segment control 20pt from the edge, the * links below 28pt, 8pt between the header and the control). * * The theme gives .modal-body 32px of top padding, which pushes the segment * control far from the header, and .container contributes the 16px side * padding the rest of the menu is aligned to — 4px short of the control's 20. * The links keep the container's 16px plus their own 12px, landing on 28. */ @media (max-width: 575.98px) { #modal-one .modal-body, #modal-business .modal-body { padding-top: 8px; } .menu-switcher-row { margin-inline: 4px; } } /* * Burger and close icon stay fully white on the dark Business chrome; the * theme renders them at 80% opacity, which greys them out against black. */ [data-bs-theme="dark"] .navbar-toggler, [data-bs-theme="dark"] .navbar-toggler-icon, #modal-business .navbar-toggler, #modal-business .navbar-toggler-icon { color: #fff; } /* * Decorative background video (partials/_bg_video.html). * * The