/* * ═══════════════════════════════════════════════════════════════════════ * element_webpage_home_footer.css — Homepage Footer Element * Daralbeida.com · DAB-VIS-CSS-EL-HP-FTR-001 · v1.0 · May 2026 * * Loaded by index.php : * * * PHP partial: api/elements/element_webpage_home_footer.php * * TOKENS USED * ─────────── * --consumer-footer-h footer band height (css/webpage_home.css) * --f-display Noto Serif stack (css/webpage_home.css) * --gold #B8832A (darx_tokens.css) * * SECTIONS * ──────── * 1. Fixed footer band * 2. Tagline text * 3. Responsive * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 1. FIXED FOOTER BAND Transparent — floats above the scroll content. Height driven by --consumer-footer-h (css/webpage_home.css). body padding-bottom matches via the same variable. ═══════════════════════════════════════════════════════════════════════ */ .footer { position: fixed; bottom: 0; left: 0; right: 0; height: var(--consumer-footer-h); /* Solid brown band height (was ~35px; now +5px). Shared by the gradient AND by .footer-tagline so the text centres on exactly this band. */ --footer-stripe-h: 40px; background: linear-gradient( to bottom, transparent 0, transparent calc(100% - var(--footer-stripe-h) - 6px), /* fade begins */ var(--brand-dark) calc(100% - var(--footer-stripe-h)), /* solid brown band */ var(--brand-dark) 100% ); z-index: 200; pointer-events: none; /* allow click-through on the transparent upper portion */ } /* ═══════════════════════════════════════════════════════════════════════ 2. TAGLINE TEXT ═══════════════════════════════════════════════════════════════════════ */ .footer-tagline { /* Occupy the brown band and centre the text vertically on it */ position: absolute; left: 0; right: 0; bottom: 0; height: var(--footer-stripe-h); display: flex; align-items: center; justify-content: center; pointer-events: auto; font-family: var(--f-mono); font-size: var(--ui-fs-label); font-weight: 600; font-style: normal; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); opacity: 1; margin: 0; -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════════════════════════════════════ 3. RESPONSIVE ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .footer-tagline { font-size: var(--ui-fs-label); letter-spacing: 0.20em; } }