/* ========================================================= BELAIR HILL JUNIOR SCHOOL PUBLIC WEBSITE FOOTER FILE: css/footer.css FOOTER STYLING ONLY ========================================================= */ /* ========================================================= FOOTER ROOT ========================================================= */ .bh-footer { width: 100%; margin: 0; padding: 0; background: var(--teal-deep, #045661); color: #ffffff; border-top: 4px solid var(--gold, #d6a84f); box-sizing: border-box; overflow: hidden; } /* ========================================================= BOX SIZING ========================================================= */ .bh-footer *, .bh-footer *::before, .bh-footer *::after { box-sizing: border-box; } /* ========================================================= CONTAINER ========================================================= */ .bh-footer-container { width: 100%; max-width: var(--container, 1220px); margin: 0 auto; padding: 68px 24px 28px; } /* ========================================================= MAIN GRID ========================================================= */ .bh-footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(170px, 0.72fr) minmax(0, 1.93fr); column-gap: 72px; align-items: start; } /* ========================================================= BRAND COLUMN ========================================================= */ .bh-footer-brand { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } /* ========================================================= SCHOOL INITIALS ========================================================= */ .bh-footer-initials { width: 155px; margin: 0 0 13px; padding: 0; color: var(--gold, #d6a84f); font-family: var(--font-heading, "Playfair Display", serif); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: 0.09em; text-align: center; } /* ========================================================= LOGO HOLDER ========================================================= */ .bh-footer-logo { display: flex; align-items: center; justify-content: center; width: 155px; height: 155px; min-width: 155px; min-height: 155px; margin: 0 0 18px; padding: 0; background: #ffffff; border-radius: 12px; overflow: hidden; text-decoration: none; flex-shrink: 0; } /* ========================================================= LOGO IMAGE ========================================================= */ .bh-footer-logo-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; object-fit: contain; object-position: center; } /* ========================================================= SCHOOL NAME ========================================================= */ .bh-footer-school-name { width: 155px; max-width: 155px; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.98); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 1.08rem; font-weight: 800; line-height: 1.4; letter-spacing: 0.01em; text-align: center; overflow-wrap: break-word; } /* ========================================================= DESCRIPTION ========================================================= */ .bh-footer-description { width: min(440px, 100%); max-width: 440px; margin: 17px 0 0; padding: 0; color: rgba(255, 255, 255, 0.70); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.88rem; font-weight: 400; line-height: 1.75; } /* ========================================================= EXPLORE ========================================================= */ .bh-footer-explore { min-width: 0; } /* ========================================================= CONTACT COLUMN ========================================================= */ .bh-footer-contact-column { min-width: 0; } /* ========================================================= HEADINGS ========================================================= */ .bh-footer h4 { margin: 0 0 23px; padding: 0; color: #ffffff; font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.79rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; } /* ========================================================= HEADING ACCENT Admissions Apply Button Gold ========================================================= */ .bh-footer h4::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 10px; background: var(--gold, #d6a84f); border-radius: 999px; } /* ========================================================= EXPLORE LIST ========================================================= */ .bh-footer-links { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; } /* ========================================================= EXPLORE LINKS ========================================================= */ .bh-footer-links a { display: inline-block; width: fit-content; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.70); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.87rem; font-weight: 500; line-height: 1.5; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; } .bh-footer-links a:hover { color: var(--gold, #d6a84f); transform: translateX(4px); } /* ========================================================= CONTACT ROOT ========================================================= */ .bh-footer-contact { width: 100%; min-width: 0; } /* ========================================================= ADDRESS ========================================================= */ .bh-footer-address { width: 100%; margin: 0 0 25px; padding: 0 0 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } /* ========================================================= CONTACT GRID ========================================================= */ .bh-footer-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 21px; } /* ========================================================= CONTACT ITEM ========================================================= */ .bh-footer-contact-item { min-width: 0; display: flex; align-items: flex-start; gap: 11px; } /* ========================================================= CONTACT ICON ========================================================= */ .bh-footer-contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; margin: 0; border-radius: 50%; background: rgba(214, 168, 79, 0.14); color: var(--gold, #d6a84f); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.72rem; font-weight: 700; line-height: 1; flex-shrink: 0; } /* ========================================================= CONTACT VALUE ========================================================= */ .bh-footer-contact-value { min-width: 0; color: rgba(255, 255, 255, 0.76); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.86rem; line-height: 1.6; overflow-wrap: anywhere; } /* ========================================================= CONTACT LINKS ========================================================= */ .bh-footer-contact-item a { min-width: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.78); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.84rem; font-weight: 500; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; transition: color 0.25s ease, background-color 0.25s ease; } .bh-footer-contact-item a:hover { color: var(--gold, #d6a84f); } /* ========================================================= PHONE LABELS ========================================================= */ [data-contact-phone-1-label], [data-contact-phone-2-label], [data-contact-phone-3-label] { color: rgba(255, 255, 255, 0.45); font-size: 0.68rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; } /* ========================================================= PHONE / EMAIL / WHATSAPP VALUES ========================================================= */ [data-contact-phone-1], [data-contact-phone-2], [data-contact-phone-3], [data-contact-email], [data-contact-whatsapp] { color: var(--gold, #d6a84f); } /* ========================================================= ADDRESS VALUE ========================================================= */ [data-contact-address-value] { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.86rem; line-height: 1.65; overflow-wrap: anywhere; } /* ========================================================= OFFICE HOURS ========================================================= */ [data-contact-office-hours-value] { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.84rem; line-height: 1.55; overflow-wrap: anywhere; } /* ========================================================= FOOTER BOTTOM ========================================================= */ .bh-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 55px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.45); font-family: var(--font-body, "DM Sans", sans-serif); font-size: 0.75rem; line-height: 1.5; } /* ========================================================= FOOTER BOTTOM LINKS ========================================================= */ .bh-footer-bottom a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.25s ease; } .bh-footer-bottom a:hover { color: var(--gold, #d6a84f); } /* ========================================================= HIDDEN ELEMENTS ========================================================= */ .bh-footer [hidden] { display: none !important; } /* ========================================================= ACCESSIBILITY ========================================================= */ .bh-footer a:focus-visible, .bh-footer button:focus-visible { outline: 2px solid var(--gold, #d6a84f); outline-offset: 4px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1050px) { .bh-footer-container { padding: 60px 24px 28px; } .bh-footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.8fr); column-gap: 55px; row-gap: 52px; } .bh-footer-contact-column { grid-column: 1 / -1; } .bh-footer-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 680px) { .bh-footer-container { padding: 50px 20px 24px; } .bh-footer-grid { display: flex; flex-direction: column; gap: 42px; } .bh-footer-brand { width: 100%; } .bh-footer-initials { width: 125px; margin-bottom: 11px; font-size: 2.4rem; } .bh-footer-logo { width: 125px; height: 125px; min-width: 125px; min-height: 125px; margin-bottom: 17px; } .bh-footer-school-name { width: 125px; max-width: 125px; font-size: 1rem; line-height: 1.4; } .bh-footer-description { width: 100%; max-width: 100%; margin-top: 15px; } .bh-footer-explore { width: 100%; } .bh-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; } .bh-footer-contact-column { width: 100%; } .bh-footer-contact-grid { grid-template-columns: 1fr; row-gap: 18px; } .bh-footer-address { margin-bottom: 22px; padding-bottom: 20px; } .bh-footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 42px; padding-top: 20px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .bh-footer-container { padding-left: 17px; padding-right: 17px; } .bh-footer-initials { width: 112px; font-size: 2.1rem; } .bh-footer-logo { width: 112px; height: 112px; min-width: 112px; min-height: 112px; } .bh-footer-school-name { width: 112px; max-width: 112px; font-size: 0.96rem; } .bh-footer-links { grid-template-columns: 1fr; } .bh-footer-contact-item { gap: 9px; } .bh-footer-contact-icon { width: 28px; height: 28px; min-width: 28px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .bh-footer *, .bh-footer *::before, .bh-footer *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }