/* ════════════════════════════════════════════════════════════════ — site-wide footer Single source of truth for the cream footer with the checker pattern. Pages declare at the end of their ; this file + bruna-footer.js render everything. Classes are scoped under the host element so no leakage into page-level styles. Behavior: renders as a normal block element at the bottom of the page (NOT position: fixed). The user reaches it by scrolling to the end of the page content. If the page wants the reveal-on- scroll pattern (footer fixed + content slides over), see the REVEAL-ON-SCROLL block at the bottom of this file — opt-in via `body.bruna-footer-fixed` on the host page. ══════════════════════════════════════════════════════════════════ */ /* ── Host ──────────────────────────────────────────────────────── */ bruna-footer { /* Component-scoped vars. Keeping them inside the host (rather than tokens.css) so this remains self-contained — change a value here and only the footer is affected. */ --bruna-footer-height: 380px; --bruna-footer-bg: #0a0a0a; /* dark — continuous with the site */ --bruna-footer-fg: #f5fff8; /* pastel mint text on dark */ --bruna-footer-fg-mute: rgba(245, 255, 248, 0.55); --bruna-footer-checker-w: #ffffff; --bruna-footer-checker-b: #0a0a0a; position: relative; display: block; width: 100%; min-height: var(--bruna-footer-height); background: var(--bruna-footer-bg); color: var(--bruna-footer-fg); font-family: var(--font-body); overflow: hidden; } /* ════════════════════════════════════════════════════════════════ Checker frame — cites the intro shader's signature pattern. Composition: • OUTER FRAME: 25px straight checker squares, 3 tiles thick on left, right and bottom. No top frame (the dark page content above butts straight against the cream center). • CENTER: clean cream — no diamond overlay. The text columns sit on this clean surface so the pattern is decorative SIGNATURE around the edges, not a carpet underneath content. ══════════════════════════════════════════════════════════════════ */ bruna-footer .footer-pattern { position: absolute; inset: 0; pointer-events: none; /* Straight checker — 25px tile granularity. Each 50px cell holds four 25px quadrants in WBBW arrangement. */ background: conic-gradient( var(--bruna-footer-checker-w) 0 25%, var(--bruna-footer-checker-b) 0 50%, var(--bruna-footer-checker-w) 0 75%, var(--bruna-footer-checker-b) 0 ); background-size: 50px 50px; } /* Inner overlay — covers the centre with the footer's cream background so the only checker visible is the 3-tile frame on left, right, and bottom. Top edge has no frame: the cream center extends to the very top of the footer where it meets the dark page above. */ bruna-footer .footer-pattern-inner { position: absolute; top: 0; left: 75px; right: 75px; bottom: 75px; background: var(--bruna-footer-bg); } /* ── Content grid ─────────────────────────────────────────────── */ bruna-footer .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; /* Padding ≥ 75px on left/right/bottom so the content respects the 3-tile straight-checker frame (75px). Top is unframed so it can breathe with regular spacing. */ padding: 7rem 10rem 11rem; min-height: var(--bruna-footer-height); /* Stack above the absolute .footer-pattern so the grid + text are visible against the checker. */ position: relative; z-index: 1; } bruna-footer .footer-col { display: flex; flex-direction: column; gap: 1.4rem; } bruna-footer .footer-col-label { font-family: var(--font-label); font-size: 1.05rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--bruna-footer-fg-mute); margin-bottom: 0.6rem; } bruna-footer .footer-col-body { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.55; color: var(--bruna-footer-fg); } bruna-footer .footer-col-body a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; } bruna-footer .footer-col-body a:hover { opacity: 0.55; } /* Brand block — uses display tier so it grounds the footer like a wordmark. Smaller than hero-display, larger than label. */ bruna-footer .footer-brand { font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } bruna-footer .footer-brand-tag { margin-top: 0.6rem; font-family: var(--font-label); font-size: 1rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bruna-footer-fg-mute); } /* Bottom legal line — sits inside the cream center, JUST ABOVE the 3-tile bottom frame. Padding-bottom on the grid already reserves space for it (~11rem). */ bruna-footer .footer-legal { position: absolute; left: 10rem; right: 10rem; bottom: 8rem; /* clears the 75px bottom frame + a small gap */ display: flex; justify-content: space-between; font-family: var(--font-label); font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bruna-footer-fg-mute); z-index: 1; } /* ── Mobile fallback ──────────────────────────────────────────── */ @media (max-width: 768px) { bruna-footer { --bruna-footer-height: auto; min-height: 60vh; } bruna-footer .footer-grid { grid-template-columns: 1fr; padding: 6rem 3rem 6rem; gap: 3rem; } bruna-footer .footer-legal { position: static; flex-direction: column; gap: 0.8rem; padding: 0 3rem 3rem; } } /* ════════════════════════════════════════════════════════════════ REVEAL-ON-SCROLL — opt-in pattern (off by default) ────────────────────────────────────────────────────────────── When the host page adds `class="bruna-footer-fixed"` to , the footer pins to the bottom of the viewport (z-index 0) and the main page content rides on top (z-index 1), revealing the footer as the user scrolls past. Pages opting in MUST give their main content wrapper: position: relative; z-index: 1; background: var(--color-bg); margin-bottom: 380px; (or var(--bruna-footer-height)) ══════════════════════════════════════════════════════════════════ */ body.bruna-footer-fixed bruna-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }