/* ============================================================
Studio Practice — Scoped Shell Embed (Nav + Footer)
For pages with their own design systems that want the full
shared chrome (nav at top, footer at bottom). All styles
scoped to sp-nav / sp-footer — no leakage into host page.
Use:
...page content...
Add `class="has-hero"` to if the top of your page is
a dark hero/canvas — nav goes transparent until scrolled.
============================================================ */
/* FOUC prevention */
sp-nav:not(:defined) {
display: flex;
height: 64px;
visibility: hidden;
}
sp-footer:not(:defined) {
display: block;
min-height: 380px;
visibility: hidden;
}
/* ============================================================
NAV — scoped to sp-nav.nav
============================================================ */
sp-nav.nav {
--sn-bg: oklch(99% 0.002 80);
--sn-ink: oklch(20% 0.005 80);
--sn-ink-2: oklch(38% 0.005 80);
--sn-muted: oklch(55% 0.006 80);
--sn-line: oklch(88% 0.004 80);
--sn-serif: "Fraunces", "Times New Roman", serif;
--sn-sans: "DM Sans", -apple-system, system-ui, sans-serif;
--sn-mono: "JetBrains Mono", ui-monospace, monospace;
--sn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--sn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
position: sticky;
top: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding-inline: clamp(24px, 5vw, 72px);
background: rgba(20, 21, 24, 0.72); /* fallback */
background: color-mix(in oklch, var(--sn-ink) 72%, transparent);
backdrop-filter: saturate(180%) blur(28px);
-webkit-backdrop-filter: saturate(180%) blur(28px);
border-bottom: 1px solid rgba(255,255,255,0.1);
transition: background 420ms var(--sn-ease),
backdrop-filter 420ms var(--sn-ease),
border-color 420ms var(--sn-ease);
font-family: var(--sn-sans);
}
sp-nav.nav *,
sp-nav.nav *::before,
sp-nav.nav *::after { box-sizing: border-box; }
sp-nav.nav a { color: inherit; text-decoration: none; }
sp-nav.nav button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
sp-nav.nav .nav-wordmark {
display: flex; align-items: center; gap: 10px;
color: #fff;
}
sp-nav.nav .nav-wordmark img {
width: 28px; height: 28px;
filter: invert(1) brightness(2);
transition: filter 360ms var(--sn-ease);
}
sp-nav.nav .nav-sp-wordmark {
font-family: var(--sn-serif);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
}
sp-nav.nav .nav-links {
display: flex; align-items: center; gap: 32px;
}
sp-nav.nav .nav-links a {
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.86);
position: relative;
padding-block: 6px;
letter-spacing: 0;
transition: color 280ms var(--sn-ease-out), letter-spacing 420ms var(--sn-ease-out);
}
sp-nav.nav .nav-links a:not(.nav-client-login)::after {
content: "";
position: absolute;
left: 50%; right: 50%; bottom: 0;
height: 1px;
background: currentColor;
transition: left 460ms var(--sn-ease-out), right 460ms var(--sn-ease-out);
}
sp-nav.nav .nav-links a:not(.nav-client-login):hover {
color: #fff;
letter-spacing: -0.012em;
}
sp-nav.nav .nav-links a.active { color: #fff; }
sp-nav.nav .nav-links a:hover::after,
sp-nav.nav .nav-links a.active::after { left: 0; right: 0; }
sp-nav.nav .nav-links a.nav-client-login {
font-family: var(--sn-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
padding: 9px 16px;
border: 1px solid rgba(255,255,255,0.45);
border-radius: 100px;
background: transparent;
transition: all 360ms var(--sn-ease-out);
}
sp-nav.nav .nav-links a.nav-client-login:hover {
color: var(--sn-ink);
background: #fff;
border-color: #fff;
transform: translateY(-1px);
letter-spacing: 0.18em;
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.35);
}
sp-nav.nav .nav-hamburger {
display: none;
flex-direction: column;
gap: 4px;
padding: 8px;
}
sp-nav.nav .nav-hamburger span {
width: 20px;
height: 1.5px;
background: #fff;
transition: background 360ms var(--sn-ease);
}
/* Has-hero override — transparent over dark hero until scrolled */
body.has-hero sp-nav.nav:not(.is-scrolled) {
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (max-width: 860px) {
sp-nav.nav .nav-links { display: none; }
sp-nav.nav .nav-hamburger { display: flex; }
}
/* Mobile menu (sibling injected by sp-shell.js) */
#sp-mobile-menu.mobile-menu {
--smm-bg: oklch(99% 0.002 80);
--smm-ink: oklch(20% 0.005 80);
--smm-muted: oklch(55% 0.006 80);
--smm-serif: "Fraunces", "Times New Roman", serif;
--smm-mono: "JetBrains Mono", ui-monospace, monospace;
--smm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
position: fixed;
top: 0; left: 0; right: 0;
height: 100dvh;
background: var(--smm-bg);
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
opacity: 0;
pointer-events: none;
transition: opacity 360ms var(--smm-ease);
}
#sp-mobile-menu.mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
#sp-mobile-menu.mobile-menu a {
font-family: var(--smm-serif);
font-size: clamp(36px, 8vw, 56px);
font-weight: 300;
color: var(--smm-ink);
text-decoration: none;
}
#sp-mobile-menu.mobile-menu .mobile-menu-close {
position: absolute;
top: 18px; right: 24px;
font-family: var(--smm-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--smm-muted);
background: transparent;
border: 0;
cursor: pointer;
}
/* ============================================================
FOOTER — scoped to sp-footer.site-footer (same as sp-footer-embed.css)
============================================================ */
sp-footer.site-footer {
--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;
}
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; }
}