and
placeholders.
*
* Page-specific overrides (e.g. the home page premium-skin nav-cta) can sit
* inline AFTER this stylesheet; the cascade respects load order.
*
* Edit weights, sizes, or colors here once. They propagate site-wide.
*/
/* ---- HEADER (fixed, blurred-on-scroll) ---- */
.header-wrap {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s, transform 0.3s;
}
/* Adaptive contrast on the transparent state. The whole header inverts
against whatever pixel is currently behind it (iOS-status-bar trick),
so logo + links read on dark hero images and stay legible on the pale
page background as the user scrolls between sections. We force the
children to pure white so the difference math always lands on a clean
inverse of the backdrop. The blend cuts out the moment .scrolled is
added — at that point the frosted pale bg gives us the contrast we
need, and difference-blending with a translucent surface gets weird. */
.header-wrap:not(.scrolled) { mix-blend-mode: difference; }
.header-wrap:not(.scrolled) .header-logo { filter: brightness(0) invert(1); }
.header-wrap:not(.scrolled) .nav-links a:not(.nav-cta),
.header-wrap:not(.scrolled) .nav-links a.is-current,
.header-wrap:not(.scrolled) .nav-cta {
color: #ffffff;
}
/* In the transparent (pre-scroll) header state, mix-blend-mode: difference
paints every child as the inverse of whatever's behind. var(--text) and
var(--accent) both invert to pale yellow-green over the off-white hero
veil — the same RGB-subtraction quirk that shifts hue on the iOS status
bar. Force the underline + hover color to pure white so the inverse
stays neutral (dark on pale, light on dark) while the underline-extend
animation still carries the hover affordance. */
.header-wrap:not(.scrolled) .nav-cta::after,
.header-wrap:not(.scrolled) .nav-cta:hover::after {
background: #ffffff;
}
.header-wrap:not(.scrolled) .nav-cta:hover {
color: #ffffff;
}
.header-wrap.scrolled {
background: rgba(250, 250, 250, 0.55);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
border-bottom-color: rgba(0, 0, 0, 0.04);
}
header {
max-width: 1320px; margin: 0 auto;
height: 80px; padding: 0 48px;
display: flex; align-items: center; justify-content: space-between;
}
.header-logo { height: 22px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a:not(.nav-cta) {
font-size: 0.88rem; font-weight: 500;
color: var(--text-2); letter-spacing: 0.01em;
transition: color 0.2s ease;
}
.nav-links a:not(.nav-cta):hover { color: var(--text); }
.nav-links a.is-current {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 1.5px;
}
.nav-cta {
font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em;
padding: 6px 0;
background: transparent;
border: none;
border-radius: 0;
color: var(--text);
position: relative;
transition: color 0.25s ease;
}
.nav-cta::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--text);
transform: scaleX(0.3);
transform-origin: left;
transition: transform 0.25s ease, background 0.25s ease;
}
.nav-cta:hover {
color: var(--accent);
}
.nav-cta:hover::after {
transform: scaleX(1);
background: var(--accent);
}
/* ---- FOOTER ---- */
footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 88px 0 36px;
margin-top: 0;
}
.footer-inner {
max-width: 1320px; margin: 0 auto; padding: 0 48px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 72px;
padding-bottom: 56px;
border-bottom: 1px solid var(--border);
}
.footer-brand-mark { height: 22px; width: auto; display: block; margin-bottom: 22px; }
.footer-brand-line {
font-family: var(--sans);
font-size: 1rem; line-height: 1.6;
font-weight: 500;
color: var(--text-2); max-width: 360px; margin: 0;
}
.footer-entity {
font-size: 0.78rem; font-weight: 600;
color: var(--text-2); letter-spacing: 0.04em;
margin-top: 28px;
}
.footer-col-label {
font-family: var(--sans);
font-size: 0.74rem; font-weight: 700;
color: var(--accent-dim);
text-transform: uppercase; letter-spacing: 0.14em;
margin-bottom: 22px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 14px; }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a, .footer-col span {
font-size: 0.95rem; line-height: 1.5;
font-weight: 500;
color: var(--text-2);
transition: color 0.2s ease;
display: inline-flex; align-items: center; gap: 6px;
}
.footer-col a:hover { color: var(--accent); }
.footer-col-arrow {
font-size: 0.78rem; opacity: 0.7;
transition: transform 0.2s ease;
}
.footer-col a:hover .footer-col-arrow { transform: translateX(2px); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 28px; gap: 24px; flex-wrap: wrap;
font-size: 0.84rem; color: var(--text-2);
}
.footer-bottom-copyright { font-weight: 600; letter-spacing: 0.01em; }
.footer-legal {
display: inline-flex; align-items: center; gap: 6px;
flex-wrap: wrap;
font-weight: 500;
}
.footer-legal a {
color: var(--text-2);
transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--accent); }
.footer-legal-sep { color: var(--text-3); opacity: 0.55; padding: 0 4px; }
/* ---- MOBILE ---- */
@media (max-width: 768px) {
header { padding: 0 20px; height: 64px; }
.header-logo { height: 14px; }
.nav-links { gap: 20px; }
.nav-links a:not(.nav-cta) { display: none; }
.nav-cta { padding: 6px 0; font-size: 0.78rem; }
footer { padding: 56px 0 28px; }
.footer-inner { padding: 0 20px; }
.footer-grid {
grid-template-columns: 1fr;
gap: 36px;
padding-bottom: 32px;
}
.footer-brand-mark { height: 18px; margin-bottom: 18px; }
.footer-brand-line { font-size: 0.96rem; max-width: none; }
.footer-entity { margin-top: 22px; font-size: 0.74rem; }
.footer-col-label { margin-bottom: 16px; font-size: 0.7rem; }
.footer-col li { margin-bottom: 12px; }
.footer-col a, .footer-col span { font-size: 0.92rem; }
.footer-bottom {
flex-direction: column; align-items: flex-start;
gap: 14px; padding-top: 22px; font-size: 0.78rem;
}
}