/** * 2026 DS page footer. * * Colours come from the school's own theme colours: --primary-color is emitted * per-blog in the page , the #F26C21 fallbacks only apply if it is missing. */ .ds-page--footer { position: relative; padding-top: 0; } .footer-nav { margin: 0; } footer.ds-page--footer h2 { font-family: "Bebas Neue", sans-serif; } /********************************************** * * School info section * **********************************************/ .footer-nav--info { background: #fff; border-top: 2px solid var(--primary-color, #F26C21); padding: 40px 0; position: relative; transition: background .25s ease; } #footerInfoSection { margin: 0; } .footer-nav__theme-toggle { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--primary-color, #F26C21); border: 2px solid var(--primary-color, #F26C21); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; z-index: 5; } .footer-nav__theme-toggle:hover { transform: scale(1.08); } #footerInfoThemeToggle { margin: 0; } .footer-nav--info-alt .footer-nav__theme-toggle { background: #000; color: #fff; border-color: #fff; } .footer-nav__container--info { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-nav__logo img { max-width: 90px; max-height: 90px; margin-bottom: 15px; } .footer-nav__school-name { color: #000; text-transform: uppercase; font-size: 28px; font-weight: 900; margin: 0 0 10px; } .footer-nav__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; color: #333; font-weight: 600; margin-bottom: 25px; } .footer-nav__meta a { color: inherit; } .footer-nav__meta-divider { width: 1px; height: 16px; background: #999; } .footer-nav__follow-heading { color: #000; font-family: "Bebas Neue", sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 15px; } .footer-nav__socials { display: flex; align-items: center; justify-content: center; gap: 12px; } .footer-nav__socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--primary-color, #F26C21); color: #fff; font-size: 20px; } .footer-nav__socials a:hover, .footer-nav__socials a:focus { background: #000; color: #fff; } /* Alternate look: school primary background, white text, black social icons */ .footer-nav--info-alt { background: var(--primary-color, #F26C21); } .footer-nav--info-alt .footer-nav__school-name, .footer-nav--info-alt .footer-nav__meta, .footer-nav--info-alt .footer-nav__follow-heading { color: #fff; } .footer-nav--info-alt .footer-nav__meta-divider { background: #fff; } .footer-nav--info-alt .footer-nav__socials a { background: #000; color: #fff; } .footer-nav--info-alt .footer-nav__socials a:hover, .footer-nav--info-alt .footer-nav__socials a:focus { background: #fff; color: #000; } /********************************************** * * Bottom bar * **********************************************/ .footer-nav--bottom { padding: 20px 0; } .footer-nav__container--bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .footer-nav__powered-by { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; } .footer-nav__powered-by-badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .65); padding: 16px 40px; border-radius: 10px; } .footer-nav__powered-by-logo { height: 28px; width: auto; display: block; } .footer-nav__policy-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .footer-nav--bottom ul, .footer-nav--bottom ul li { padding: 5px 0px 6px; } .footer-nav__policy-links li { display: flex; align-items: center; } .footer-nav__policy-links li:not(:last-child)::after { content: "|"; color: #fff; opacity: .6; margin: 0 10px; } .footer-nav__policy-links a { color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; } .footer-nav__policy-links a:hover { text-decoration: underline; } .footer-nav__copyright { color: #fff; font-size: 13px; font-weight: 700; opacity: .8; margin: 0; } .footer-nav--bottom--black { background: #000 !important; } @media screen and (max-width: 600px) { .footer-nav__meta { flex-direction: column; gap: 6px; } .footer-nav__meta-divider { display: none; } }