/* ============================================================ Studio Practice — Scoped Footer Embed For dropping onto pages with their own design systems. All tokens scoped to sp-footer.site-footer so nothing leaks into the host page. Load before sp-shell.js. ... Fonts must already be loaded OR add this to : ============================================================ */ /* ── FOOTER CSS MAP — these styles live in 3 places; keep in sync: • main site pages → assets/sp-design-v2.css (.footer-col, --ink-* tokens) • embedded footers → assets/sp-shell-embed.css + assets/sp-footer-embed.css (this file) (sp-footer.site-footer, self-contained --spf-* tokens) Standalone subdir projects bundle their own copies (e.g. special-projects/tesla-charging-audit). DARK footers are not a variant here — they're per-page overrides (clients/index.html, payment-system/styles.css). Most footers render light. Full reference: BRAND_ASSETS.md § Footer CSS map. ─────────────────────────── */ sp-footer:not(:defined) { display: block; min-height: 380px; visibility: hidden; } sp-footer.site-footer { /* Self-contained tokens — won't leak to host page */ --spf-bg: oklch(99% 0.002 80); --spf-ink: oklch(20% 0.005 80); --spf-ink-2: oklch(38% 0.005 80); --spf-muted: oklch(52% 0.006 80); --spf-line: oklch(88% 0.004 80); --spf-line-soft: oklch(94% 0.003 80); --spf-serif: "Fraunces", "Times New Roman", serif; --spf-sans: "DM Sans", -apple-system, system-ui, sans-serif; --spf-mono: "JetBrains Mono", ui-monospace, monospace; --spf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); display: block; background: var(--spf-bg); color: var(--spf-ink); border-top: 1px solid var(--spf-line); padding: 96px 0 64px; font-family: var(--spf-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } sp-footer.site-footer *, sp-footer.site-footer *::before, sp-footer.site-footer *::after { box-sizing: border-box; } sp-footer.site-footer a { color: inherit; text-decoration: none; } sp-footer.site-footer .inner { max-width: 1320px; margin: 0 auto; padding-inline: clamp(24px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, 1fr); /* 12-col grid — matches the homepage footer */ gap: clamp(24px, 2.2vw, 32px); } sp-footer.site-footer .footer-brand { grid-column: span 4; } /* brand block — 4 of 12 */ sp-footer.site-footer .footer-col { grid-column: span 2; } /* each link group — 2 of 12 (4+2+2+2+2 = 12) */ sp-footer.site-footer .footer-brand { display: flex; flex-direction: column; gap: 14px; } sp-footer.site-footer .footer-wordmark { display: flex; align-items: center; gap: 10px; } sp-footer.site-footer .footer-wordmark img { width: 32px; height: 32px; display: block; } sp-footer.site-footer .footer-wordmark span { font-family: var(--spf-serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--spf-ink); } sp-footer.site-footer .footer-brand p { margin: 0; font-size: 14px; color: var(--spf-muted); line-height: 1.6; } sp-footer.site-footer .footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--spf-line-soft); font-family: var(--spf-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spf-muted); } sp-footer.site-footer .footer-meta a { color: var(--spf-muted); position: relative; display: inline-block; padding-block: 2px; transition: color 280ms var(--spf-ease-out); } sp-footer.site-footer .footer-meta a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: currentColor; transition: left 460ms var(--spf-ease-out), right 460ms var(--spf-ease-out); } sp-footer.site-footer .footer-meta a:hover { color: var(--spf-ink); } sp-footer.site-footer .footer-meta a:hover::after { left: 0; right: 0; } sp-footer.site-footer .footer-col h3 { font-family: var(--spf-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--spf-muted); margin: 0 0 18px; } sp-footer.site-footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } sp-footer.site-footer .footer-col a { font-size: 14px; color: var(--spf-ink-2); position: relative; display: inline-block; padding-block: 2px; letter-spacing: 0; transition: color 280ms var(--spf-ease-out), letter-spacing 420ms var(--spf-ease-out); } sp-footer.site-footer .footer-col a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: currentColor; transition: left 460ms var(--spf-ease-out), right 460ms var(--spf-ease-out); } sp-footer.site-footer .footer-col a:hover { color: var(--spf-ink); letter-spacing: -0.01em; } sp-footer.site-footer .footer-col a:hover::after { left: 0; right: 0; } sp-footer.site-footer .footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 2px; } sp-footer.site-footer .footer-social a { display: inline-flex; padding: 0; color: var(--spf-ink-2); transition: color 280ms var(--spf-ease-out), transform 280ms var(--spf-ease-out); } sp-footer.site-footer .footer-social a::after { display: none; } sp-footer.site-footer .footer-social a:hover { color: var(--spf-ink); transform: translateX(2px); letter-spacing: 0; } sp-footer.site-footer .footer-social svg { width: 20px; height: 20px; display: block; } @media (max-width: 860px) { sp-footer.site-footer .footer-brand { grid-column: span 12; } /* full width */ sp-footer.site-footer .footer-col { grid-column: span 6; } /* 2-up */ }