/** * #.# Footer * #.# Client Custom Styles * * Footer area styles including layout, typography, and social links. * Spec source: Farani Taylor footer design (burgundy/orange brand). */ /* ============================= # Footer ============================= */ .site-footer { background-color: var(--farani-burgundy, #401115); color: var(--white); padding: 80px 0 0; position: relative; overflow: hidden; } /* Reveal-on-scroll footer (desktop only) — CSS-only "sticky footer" trick. The footer is a direct child of (see footer.php/site-footer.php), so `top: 100vh` pins its top edge to the bottom of the viewport as soon as normal scrolling would carry it past that point; it then stays pinned there until the document itself runs out of room to scroll, at which point it naturally slides the rest of the way into view. Net effect: the footer only becomes visible during the last stretch of scroll, right at the bottom of the page — no JS/height calculation needed. Left in normal flow on mobile/tablet, where this effect isn't wanted and 100vh is less reliable against mobile browser toolbars. */ @media (min-width: 992px) { .site-footer { position: sticky; top: 100vh; } } .site-footer a { color: inherit; } .footer-top-row { padding-bottom: 48px; } /* Stagger the .js-reveal fade-up (additions.css) for footer-top-row's columns and the accreditation-logos/social-links list items, so each cascades in slightly after the last instead of all fading up together. Scoped to these three lists only — doesn't touch .js-reveal's shared base behaviour used elsewhere in the theme. */ .footer-top-row > .js-reveal:nth-child(1) { transition-delay: 0s; } .footer-top-row > .js-reveal:nth-child(2) { transition-delay: .1s; } .footer-top-row > .js-reveal:nth-child(3) { transition-delay: .2s; } .footer-top-row > .js-reveal:nth-child(4) { transition-delay: .3s; } .footer-top-row > .js-reveal:nth-child(5) { transition-delay: .4s; } .footer-top-row > .js-reveal:nth-child(6) { transition-delay: .5s; } .footer-accreditation-logos li:nth-child(1) { transition-delay: 0s; } .footer-accreditation-logos li:nth-child(2) { transition-delay: .08s; } .footer-accreditation-logos li:nth-child(3) { transition-delay: .16s; } .footer-accreditation-logos li:nth-child(4) { transition-delay: .24s; } .footer-accreditation-logos li:nth-child(5) { transition-delay: .32s; } .footer-accreditation-logos li:nth-child(6) { transition-delay: .4s; } .footer-accreditation-logos li:nth-child(7) { transition-delay: .48s; } .footer-accreditation-logos li:nth-child(8) { transition-delay: .56s; } .footer-accreditation-logos li:nth-child(9) { transition-delay: .64s; } .footer-accreditation-logos li:nth-child(10) { transition-delay: .72s; } .social-links li:nth-child(1) { transition-delay: 0s; } .social-links li:nth-child(2) { transition-delay: .08s; } .social-links li:nth-child(3) { transition-delay: .16s; } .social-links li:nth-child(4) { transition-delay: .24s; } .social-links li:nth-child(5) { transition-delay: .32s; } .social-links li:nth-child(6) { transition-delay: .4s; } .social-links li:nth-child(7) { transition-delay: .48s; } .social-links li:nth-child(8) { transition-delay: .56s; } .social-links li:nth-child(9) { transition-delay: .64s; } @media (prefers-reduced-motion: reduce) { .footer-top-row > .js-reveal, .footer-accreditation-logos li, .social-links li { transition-delay: 0s; } } .footer-logo { display: inline-block; margin-bottom: 20px; } .footer-logo img { width: auto; max-height: 40px; } .footer-bio { font-family: var(--farani-body-font); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .85); max-width: 320px; margin: 0 0 28px; } /* Subscribe block */ .footer-subscribe__heading { font-family: var(--farani-body-font); font-weight: 400; font-size: 11px; letter-spacing: 0.88px; text-transform: uppercase; color: var(--farani-orange, #e95a3a); margin: 0 0 12px; } .footer-subscribe__form { display: flex; flex-wrap: wrap; gap: 0; max-width: 360px; } .footer-subscribe__form input[type="email"], .footer-subscribe__form input[type="text"] { flex: 1 1 auto; min-width: 160px; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: var(--white); padding: 13px 16px; font-family: var(--farani-body-font); font-size: 13px; } .footer-subscribe__form input[type="email"]::placeholder, .footer-subscribe__form input[type="text"]::placeholder { color: rgba(255, 255, 255, .5); } .footer-subscribe__form button[type="submit"], .footer-subscribe__form input[type="submit"] { flex: 0 0 auto; background: var(--farani-orange, #e95a3a); color: var(--farani-burgundy, #401115); border: none; padding: 13px 22px; font-family: var(--farani-body-font); font-weight: 500; font-size: 13px; white-space: nowrap; transition: var(--transition); } .footer-subscribe__form button[type="submit"]:hover, .footer-subscribe__form input[type="submit"]:hover { filter: brightness(.93); } /* Menu columns */ .footer-menu-heading { font-family: var(--farani-body-font); font-weight: 400; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--farani-orange, #e95a3a); margin: 0 0 18px; } .footer-menu { list-style: none; padding: 0; margin: 0; } .footer-menu li { margin-bottom: 3px; } .footer-menu li a { position: relative; display: inline-block; font-family: var(--farani-body-font); font-size: 13px; line-height: 1.4; color: var(--white); transition: var(--transition); } .footer-menu li a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; } .footer-menu li a:hover { color: var(--farani-orange, #e95a3a); } .footer-menu li a:hover::after { width: 100%; } /* Accreditation logos + legal text row */ .footer-bottom-row { border-top: 1px solid rgba(255, 255, 255, .12); padding: 40px 0 32px; align-items: flex-start; } .footer-accreditation-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; list-style: none; margin: 0 0 24px; padding: 0; } .footer-accreditation-logos li { background: var(--white); display: flex; align-items: center; justify-content: center; height: 61px; padding: 8px 14px; } .footer-accreditation-logos img { max-height: 51px; max-width: 96px; width: auto; } .footer-legal-line { font-family: var(--farani-body-font); font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .6); max-width: 640px; margin: 0 0 8px; } /* Social icons */ .site-footer .social-links { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; } .site-footer .text-end .social-links { justify-content: flex-end; } .site-footer .social-links li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--farani-orange, #e95a3a); color: var(--farani-burgundy, #401115); font-size: 15px; transition: var(--transition); } .site-footer .social-links li a:hover { background: var(--white, #ffffff); } /* Sub-footer */ .sub-footer { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; } .sub-footer__credit { font-family: var(--farani-body-font); font-size: 11px; color: rgba(255, 255, 255, .6); margin: 0; } .sub-footer__credit a { position: relative; display: inline-block; transition: var(--transition); } .sub-footer__credit a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; } .sub-footer__credit a:hover { color: var(--farani-orange, #e95a3a); } .sub-footer__credit a:hover::after { width: 100%; } .footer-legal-nav-col { display: flex; align-self: flex-end; } .footer-menu-legal { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; margin: 0 0 0 auto; padding: 0; } .footer-menu-legal li a { position: relative; display: inline-block; font-family: var(--farani-body-font); font-size: 11px; color: rgba(255, 255, 255, .7); transition: var(--transition); } .footer-menu-legal li a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; } .footer-menu-legal li a:hover { color: var(--farani-orange, #e95a3a); } .footer-menu-legal li a:hover::after { width: 100%; } @media (max-width: 1200px) { .footer-top-row > div { margin-bottom: 40px; } } @media (max-width: 992px) { .site-footer { padding-top: 56px; } .site-footer .text-end .social-links { justify-content: flex-start; margin-top: 24px; } } @media (max-width: 768px) { .footer-bottom-row { text-align: center; } .footer-accreditation-logos { justify-content: center; } .footer-legal-line { max-width: none; } }