/* ============================================================ Site footer — BR Marketing Group BEM namespace: bmg-footer__* Uses design tokens from :root in br-market-group.br.css. No collisions with legacy .footer-wrapper / .legal-cell / etc. ============================================================ */ .bmg-footer { /* Footer-scoped tokens. Keep them local so the partial is self-contained. */ --bmg-footer-bg: var(--bg-primary); --bmg-footer-fg: var(--text-colors--main); --bmg-footer-muted: var(--text-colors--second); --bmg-footer-hover: var(--text-colors--hover); --bmg-footer-divider: var(--text-colors--dividers-lines); --bmg-footer-surface-hover: var(--shadow--highlight); --bmg-footer-shadow: var(--shadow--primary-shadow-w); --bmg-footer-pad-y: 4rem; --bmg-footer-pad-x: clamp(1.25rem, 4vw, 4rem); --bmg-footer-gap: 4rem; --bmg-footer-row-gap: 2.5rem; --bmg-footer-divider-height: 1.5px; --bmg-footer-transition: 200ms ease; background-color: var(--bmg-footer-bg); color: var(--bmg-footer-fg); font-family: var(--_text---font-family); margin-top: var(--bmg-footer-pad-y); padding: var(--bmg-footer-pad-y) var(--bmg-footer-pad-x); position: relative; width: 100%; } /* Light-background mode (data-theme="light" on ): flip footer to dark-on-light. */ [data-theme="light"] .bmg-footer { --bmg-footer-bg: transparent; --bmg-footer-fg: #121212; --bmg-footer-muted: rgba(18, 18, 18, 0.62); --bmg-footer-hover: #121212; --bmg-footer-divider: rgba(18, 18, 18, 0.14); --bmg-footer-surface-hover: rgba(18, 18, 18, 0.06); } /* PNG mark -> black silhouette in light mode (swap for a currentColor SVG to theme cleanly). */ [data-theme="light"] .bmg-footer__logo-img { filter: brightness(0); } .bmg-footer__divider { background-color: var(--bmg-footer-divider); height: var(--bmg-footer-divider-height); margin: 0 auto var(--bmg-footer-pad-y); width: 100%; max-width: 1400px; } .bmg-footer__inner { align-items: center; display: grid; gap: var(--bmg-footer-row-gap); grid-template-columns: 1fr; margin: 0 auto; max-width: 1400px; text-align: center; } /* Logo block */ .bmg-footer__logo { display: flex; justify-content: center; } .bmg-footer__logo-link { border-radius: 50%; display: inline-flex; outline: none; padding: 4px; transition: opacity var(--bmg-footer-transition); } .bmg-footer__logo-link:hover, .bmg-footer__logo-link:focus-visible { opacity: 0.85; } .bmg-footer__logo-link:focus-visible { outline: 2px solid var(--bmg-footer-fg); outline-offset: 4px; } .bmg-footer__logo-img { display: block; height: auto; width: 100px; } /* Social block */ .bmg-footer__social { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; list-style: none; margin: 0; padding: 0; } .bmg-footer__social-item { display: inline-flex; } .bmg-footer__social-link { align-items: center; background-color: transparent; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bmg-footer-shadow); color: var(--bmg-footer-fg); display: inline-flex; height: 44px; justify-content: center; outline: none; text-decoration: none; transition: background-color var(--bmg-footer-transition), color var(--bmg-footer-transition), transform var(--bmg-footer-transition); width: 44px; } .bmg-footer__social-link:hover { background-color: var(--bmg-footer-surface-hover); color: var(--bmg-footer-fg); } .bmg-footer__social-link:focus-visible { outline: 2px solid var(--bmg-footer-fg); outline-offset: 4px; } .bmg-footer__icon { display: block; height: 16px; width: 16px; } /* Legal block */ .bmg-footer__legal { align-items: center; display: flex; flex-direction: column; gap: 1rem; } .bmg-footer__legal-list { align-items: center; display: flex; flex-wrap: wrap; /* The links carry their own 44px now, so the row gap only has to separate them visually rather than make room for a hit area. */ gap: 0 1.5rem; justify-content: center; list-style: none; margin: 0; padding: 0; } /* 0.9rem text in an 18px box is a mouse-sized target. The box grows to 44px, the type does not, and centring keeps the row on the same baseline. */ .bmg-footer__legal-link { align-items: center; color: var(--bmg-footer-fg); display: inline-flex; font-size: 0.9rem; letter-spacing: 0.01em; min-height: 44px; outline: none; text-decoration: none; transition: color var(--bmg-footer-transition); } .bmg-footer__legal-link:hover { color: var(--bmg-footer-hover); } .bmg-footer__legal-link:focus-visible { outline: 2px solid var(--bmg-footer-fg); outline-offset: 4px; } /* Reset the button's UA font *without* the `font` shorthand — the shorthand also resets font-size, which handed this control the footer wrapper's legacy fluid em (3.7px on a phone) instead of the 0.9rem its sibling links use. */ .bmg-footer__legal-link--button { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-weight: inherit; letter-spacing: inherit; padding: 0; } .bmg-footer__copy { color: var(--bmg-footer-muted); font-size: 0.8rem; letter-spacing: 0.02em; margin: 0; } /* ============================================================ Layout breakpoints ============================================================ */ @media (min-width: 768px) { .bmg-footer__inner { align-items: center; column-gap: var(--bmg-footer-gap); grid-template-columns: auto 1fr auto; text-align: left; } .bmg-footer__logo { justify-content: flex-start; } .bmg-footer__social { justify-content: center; } .bmg-footer__legal { align-items: flex-end; } .bmg-footer__legal-list { justify-content: flex-end; } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .bmg-footer__logo-link, .bmg-footer__social-link, .bmg-footer__legal-link { transition: none; } }