/* ===== A1 CONNECT — Site Footer (blue palette, matches header/hero) ===== Paste on every page, right before . Requires in , in this order: base.css, header.css, footer.css. Reuses header.css's .brand-mark / .brand-word for the logo block. */ .site-footer { background: #060606; border-top: 1px solid rgba(59, 130, 246, 0.15); color: rgba(255, 255, 255, 0.6); padding: 72px 0 0; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; } .footer-logo { display: flex; align-items: center; gap: 8px; } .footer-logo .brand-mark { height: 22px; } .footer-logo .brand-word { font-size: 22px; } .footer-brand p { color: rgba(255, 255, 255, 0.45); font-size: 0.92rem; line-height: 1.7; max-width: 320px; margin: 14px 0 0; } .footer-col h4 { color: #ffffff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 18px; } .footer-col { display: flex; flex-direction: column; } .footer-col a { color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; margin-bottom: 14px; transition: color 0.15s ease; } .footer-col a:hover { color: var(--gold-light); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 30px 0 42px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.45); } @media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; row-gap: 36px; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .site-footer { padding-top: 56px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }