/* Footer styles for Leadernace - simplified and accessible */ .ln-footer { background: transparent; color: #ffffff; /* Keep footer in normal document flow so flex `margin-top: auto` can work */ position: static; margin-top: auto; } /* Inner container: use rgba background instead of element opacity so child text remains fully opaque */ .ln-footer-inner { border-radius: 13.73px !important; background: rgba(217, 217, 217, 0.13); width: 100%; max-width: 1221px; margin: 0 auto; padding: 70px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .ln-footer, .ln-footer a, .ln-footer h5 { color: #ffffff; /* explicit white text */ } .ln-footer-title { font-family: 'Portada ARA', sans-serif; font-weight: 700; color: #ffffff; font-size: 16.02px; line-height: 100%; letter-spacing: 0%; text-align: right; vertical-align: middle; } .ln-footer-links li { margin-bottom: 8px; } .ln-footer-links a { color: #ffffff; font-size: 12.87px; font-weight: 400; font-style: normal; line-height: 100%; letter-spacing: 0%; text-align: right; vertical-align: middle; text-decoration: none; } .ln-footer-links a:hover { text-decoration: underline; } .ln-socials img { width: 32px; height: 32px; object-fit: cover; } .ln-contact-email { font-weight: 800; font-size: 15px; } .ln-contact-phone { font-weight: 800; font-size: 15px; } /* Divider and bottom row */ .ln-footer-divider { border: 0.86px solid #f4f4f4; } .ln-footer-bottom { padding-top: 16px; /* force LTR layout inside this row so flex starts on the left (page uses dir="rtl" at but this row should flow LTR) */ direction: ltr; gap: 176px; /* fixed gap between the two bottom blocks */ } .ln-footer-bottom .list-inline-item { margin-left: 12px; margin-right: 12px; } /* Logo area */ .ln-footer-logo img { width: 240px; max-width: 40%; height: auto; opacity: 1; object-fit: contain; } @media (max-width: 992px) { .ln-footer-logo img { width: 200px; max-width: 50%; } } @media (max-width: 576px) { .ln-footer-logo img { width: 160px; max-width: 60%; } } @media (max-width: 768px) { .ln-footer { margin-top: auto; /* let flex layout control spacing on mobile as well */ } .ln-footer-divider { margin-top: 16px; } .ln-footer-bottom { flex-direction: column; gap: 20px; align-items: center; } .ln-bottom-left { margin-left: 0; } /* ensure bottom blocks expand and center on small screens */ .ln-bottom-left, .ln-bottom-right { width: 100%; display: flex; justify-content: center; align-items: center; } .ln-bottom-right { flex-grow: 0; /* don't rely on desktop flex-grow here */ } /* stack top columns vertically on small screens */ .ln-footer-inner .footer-top { display: flex; flex-direction: column; gap: 20px; align-items: stretch; } .ln-footer-title, .ln-footer-links a { text-align: right; } .ln-footer-inner { padding: 20px; } } /* Responsive fallback for narrow viewports: allow height to expand */ @media (max-width: 1221px) { .ln-footer-inner { width: calc(100% - 32px); height: auto; padding: 20px; } } /* Desktop: use a flex row with equal 159px gap between the three columns */ @media (min-width: 992px) { .ln-footer-inner .footer-top { display: flex; align-items: flex-start; gap: 159px; /* equal horizontal spacing as in Figma */ } .ln-footer-inner .footer-top > .ln-footer-logo { flex: 0 0 356px; /* logo fixed width */ } .ln-footer-inner .footer-top > div:not(.ln-footer-logo) { flex: 1 1 0; /* lists share remaining space evenly */ } } /* Language button (right) */ .ln-footer-lang { background: transparent; border: none; color: #ffffff; width: 113.10781860351562px; height: 34.32432556152344px; padding: 0 8px; box-sizing: border-box; align-items: center; gap: 8px; } .ln-footer-lang img { display: inline-block; } .ln-footer-lang-text { font-family: 'Portada ARA', sans-serif; font-size: 14px; /* keep the language label RTL while the container is LTR */ direction: rtl; } /* small dropdown trigger styling for footer language */ .ln-footer-lang-btn { background: transparent; border: none; color: #ffffff; padding: 4px 8px; font-family: 'Portada ARA', sans-serif; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; direction: ltr; /* ensure icon/text ordering inside button */ } .ln-footer .dropdown-menu-dark { background-color: #0d1220; /* match footer dark tone */ border-color: rgba(255, 255, 255, 0.06); } .ln-footer .dropdown-item { color: #ffffff; } .ln-footer .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.05); } /* Chevron icon */ .chev-icon { width: 9px; height: 15px; } /* bottom blocks use gap on the container; remove manual margin */ .ln-bottom-right { margin-left: 0; } /* Icons grid (right) */ .ln-icons-grid { display: flex; flex-direction: column; align-items: center; gap: 17px; } .ln-icons-grid .icons-row { display: flex; gap: 24px; justify-content: center; align-items: center; } .ln-social-icon { width: 28px; height: 28px; object-fit: contain; } .ln-footer-email a { color: #ffffff; text-decoration: none; margin-left: 8px; font-family: 'Portada ARA', sans-serif; font-weight: 800; font-style: Extrabold; font-size: 15px; leading-trim: none; line-height: 100%; /* approx. -3% letter-spacing */ letter-spacing: -0.03em; text-align: center; } /* Centered email placed outside right section */ .ln-footer-email-center { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; } .ln-footer-email-center { /* keep LTR flow so image appears on the left in RTL document */ direction: ltr; } .ln-footer-email-center img { width: 19px; height: 15px; margin-right: 8px; /* explicit spacing between icon and email */ margin-left: 0; } .ln-footer-email-center a { color: #ffffff; font-weight: 800; font-size: 15px; text-decoration: none; } @media (min-width: 992px) { /* On wide screens, keep it visually outside the right block by spacing */ .ln-footer-email-center { margin-top: 24px; } } @media (max-width: 480px) { .ln-footer-lang { width: auto; padding: 6px 10px; } .ln-footer-lang-text { font-size: 13px; } .ln-social-icon { width: 24px; height: 24px; } .ln-footer-email a { font-size: 14px; margin-left: 6px; } } /* Mobile: stack email and phone vertically for small screens */ @media (max-width: 480px) { .ln-footer-email-center { flex-direction: column; align-items: center; gap: 8px; } .ln-footer-email-center img { margin-right: 0; margin-left: 0; margin-bottom: 4px; } .ln-footer-email-center > div { display: flex; align-items: center; justify-content: center; gap: 6px; } } /* Ensure spacing from divider is at least 35px */ .ln-footer-divider + .ln-footer-bottom, .ln-footer-bottom { margin-top: 35px; }