/* ========================================================================= Static-site fixes — layered OVER the original Elementor CSS. Goal: keep the look identical, fix the audit issues, WITHOUT touching original stylesheets. Loaded last in on every page. NOTE: #2 (top contact bar) is intentionally left untouched by request. ========================================================================= */ /* #11 — reveal fade-in elements immediately so nothing stays blank if the scroll-animation JS doesn't fire (static site, no reliance on runtime JS). Elementor's base rule is `.elementor-invisible{visibility:hidden}`, so opacity alone isn't enough — must also restore visibility, otherwise widgets that rely on it (e.g. the elementskit icon-box service cards on /lending/) render as an empty void even though they're laid out. .elementor-invisible is only applied to elements with entrance animations, so forcing them visible is always safe. */ .elementor-invisible { opacity: 1 !important; visibility: visible !important; } /* #3 — footer legal links (Public Disclosure / Privacy / Terms / Complaints): original inline layout wraps to an ugly 3-up-1-down, left-shifted, overlapping. Center the row and let it wrap evenly. (Shared footer widget id.) */ .elementor-element-4934068 .elementor-icon-list-items { justify-content: center !important; gap: 6px 30px; } .elementor-element-4934068 .elementor-icon-list-item { margin: 0 !important; } /* #15 — long email in icon-box descriptions was clipped (GET IN TOUCH / footer). Allow wrapping so info@mortgageallied.co.nz never gets cut off. */ .elementor-icon-box-description { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } /* #4 — footer GET IN TOUCH three cards (Phone / Email / Location, container 95a5220): Location wraps to 3 lines so its inline-start icon centered lower than the other two (parallax) and the cards were unequal height. SCOPED to that container only — must NOT touch the #2 top contact bar. Top-align the whole row, top-align each icon to its text, equal-height cards. */ .elementor-element-95a5220 { align-items: flex-start !important; } .elementor-element-95a5220 > .elementor-widget-icon-box { align-self: stretch; } .elementor-element-95a5220 .elementor-icon-box-wrapper { align-items: flex-start !important; height: 100%; } /* #1 — ghost whitespace (about-us "OUR PHILOSOPHY" dark section, bb41fc1): its bottom padding was 15em (~240px) on desktop to reserve room for an overlap image (7506643) that is hidden on ALL devices → a big empty dark void below the bullet list. Match the 7em top padding. Desktop only; tablet/mobile already override to 2–3em. Scoped to that section. */ .elementor-73 .elementor-element.elementor-element-bb41fc1 { --padding-bottom: 7em; } /* #5 — service sub-pages (home-loan, construction-loan, …) right "Our Services" sidebar (nav-menu widget d7a3aba): raw dark-blue link list with no dividers or hover feedback. Add subtle separators + a gold hover/indent so it reads as a real menu. Scoped to that widget; the active item keeps its own styling. */ .elementor-element-d7a3aba .elementor-nav-menu > li { border-bottom: 1px solid rgba(255,255,255,0.12); } .elementor-element-d7a3aba .elementor-nav-menu > li:last-child { border-bottom: none; } .elementor-element-d7a3aba .elementor-item { transition: color 0.2s ease, padding-left 0.2s ease; } .elementor-element-d7a3aba .elementor-item:hover { color: var(--e-global-color-3b18848) !important; padding-left: 8px; } /* Header nav dropdowns (Lending / Wealth / About Us submenus). The desktop menu (.elementor-nav-menu--main) uses Elementor Pro + SmartMenus: the sub-menu is fully styled and positioned (position:absolute; top:100%; dark panel) but starts at display:none and relies on SmartMenus JS to toggle it on hover. On the static export that JS never initialises (the