/* ============================================================ 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 : ============================================================ */ 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(55% 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: 1.5fr 1fr 1fr 1fr 1fr; gap: clamp(28px, 3vw, 48px); } sp-footer.site-footer .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; } 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 h4 { 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; } @media (max-width: 860px) { sp-footer.site-footer .inner { grid-template-columns: 1fr 1fr; gap: 32px; } sp-footer.site-footer .footer-brand { grid-column: 1 / -1; } }