/* ============================================================ SHARED SITE FOOTER COMPONENT Extracted from the home page's resolved footer cascade in styles.css ("SITE HEADER + FOOTER — FROSTED GLASS" + the .brand block it reuses) so every page can use the exact same footer by loading this one file. Values are hardcoded (not var()-based) so this file is fully self-contained and safe to drop into any page's without depending on -- or clashing with -- that page's own CSS variables. Currently used by: services.html. Not loaded by index.html, since index.html already gets identical output straight from styles.css. ============================================================ */ .site-footer { /* display:block explicitly overrides a leftover generic wireframe.css rule (bare "footer{display:flex;gap:30px;align-items:center;...}", written for a different, one-line footer on the starter template) that would otherwise lay .site-footer__top and .site-footer__bottom out side-by-side in a row instead of stacked -- the exact same class of bug fixed earlier on .site-header. */ display: block; width: 100%; padding: 0; gap: 0; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); color: #28231c; font-family: "Roboto", Arial, sans-serif; font-size: 14px; } .site-footer__top { max-width: 1460px; margin: 0 auto; padding: 56px 32px 40px; display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; } /* ---- Brand lockup (reused from the header's .brand markup) ---- */ .site-footer .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-right: 0; } /* wireframe.css (a leftover generic starter-template rule, unrelated to this footer) has a ".brand span{...}" rule that turns every inside .brand into a fixed 38x38 gold circle with centered content -- it was written for a totally different brand mark and never scoped away from other pages. Our brand__mark/__text/__name/__tagline are all s, so on this page (which loads wireframe.css) they were each silently turned into overlapping gold circles instead of a plain icon + two lines of text. These resets explicitly override every property that rule sets, at higher specificity, so nothing leaks through. */ .site-footer .brand__mark, .site-footer .brand__text, .site-footer .brand__name, .site-footer .brand__tagline { width: auto; height: auto; border-radius: 0; background: none; place-items: unset; } .site-footer .brand__mark { display: block; } .site-footer .brand__mark svg { width: 30px; height: 30px; display: block; } .site-footer .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .site-footer .brand__name { display: inline; font-size: 19px; font-weight: 700; letter-spacing: .01em; color: inherit; } .site-footer .brand__name b { color: #f4ad18; font-weight: 900; } .site-footer .brand__tagline { display: inline; font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #756d61; } .site-footer__blurb { margin: 16px 0 18px; max-width: 260px; font-size: 13px; line-height: 1.6; color: #756d61; } .site-footer__socials { display: flex; gap: 10px; } .site-footer__socials a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(184, 140, 60, .32); color: #28231c; } .site-footer__socials a:hover { background: #f4ad18; border-color: #f4ad18; color: #382814; } .site-footer__socials svg { width: 16px; height: 16px; fill: currentColor; } .site-footer__head { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #28231c; } .site-footer__col nav { display: grid; gap: 11px; } .site-footer__col nav a, .site-footer__col--contact p { font-size: 13.5px; line-height: 1.5; color: #756d61; } .site-footer__col nav a:hover { color: #f4ad18; } .site-footer__col--contact p { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; } .site-footer__col--contact svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: #f4ad18; } .site-footer__bottom { max-width: 1460px; margin: 0 auto; padding: 18px 32px 26px; border-top: 1px solid rgba(184, 140, 60, .32); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-footer__bottom p { margin: 0; font-size: 12px; color: #756d61; } .site-footer__housing { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #756d61; } .site-footer__housing svg { width: 16px; height: 16px; fill: none; stroke: #756d61; } @media (max-width: 1080px) { .site-footer__top { grid-template-columns: 1fr 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .site-footer__top { grid-template-columns: 1fr 1fr; padding: 44px 20px 30px; gap: 28px; } .site-footer__bottom { padding: 16px 20px 22px; justify-content: center; text-align: center; } } /* Service footer black theme is owned by this component file. */ .site-footer{ background:#050505 !important; background-image:none !important; color:#fff !important; border-top:1px solid rgba(255,255,255,.12) !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .site-footer::before, .site-footer::after{ display:none !important; } .site-footer, .site-footer a, .site-footer p, .site-footer .brand__name, .site-footer .site-footer__head{ color:#fff !important; } .site-footer .brand__tagline, .site-footer__blurb, .site-footer__col nav a, .site-footer__col--contact p, .site-footer__bottom p, .site-footer__housing{ color:rgba(255,255,255,.68) !important; } .site-footer__bottom{ border-top-color:rgba(255,255,255,.14) !important; } .site-footer__socials a{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.18) !important; color:#fff !important; } .site-footer__socials a:hover{ background:#f4ad18 !important; border-color:#f4ad18 !important; color:#1a1203 !important; } .site-footer__socials span{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.68); } .site-footer__socials span svg{width:16px;height:16px;fill:currentColor} .site-footer__col nav .site-footer__link--pending{color:rgba(255,255,255,.5);font-size:13px;cursor:default} .site-footer a:focus-visible{outline:3px solid #f4ad18;outline-offset:3px} @media(max-width:440px){.site-footer__top{grid-template-columns:1fr}.site-footer__brand{grid-column:auto}}