/* Fonts (Inter + Fraunces) are loaded via in each page for
faster, non-render-blocking delivery — see preconnect + stylesheet links. */
/* =====================================================================
Sustainable Impact Capital & Holding (SICH)
Global stylesheet — shared foundation
--------------------------------------------------------------------
Sections:
1. Design tokens (CSS variables)
2. Reset & base
3. Typography
4. Layout helpers (container, sections, grid)
5. Buttons & links
6. Header / navigation (with dropdowns)
7. Mobile navigation
8. Footer
9. Motion / scroll-reveal
10. Utilities
11. Responsive
===================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS
--------------------------------------------------------------------- */
:root {
/* Brand palette */
--color-accent: #14463B; /* bottle green — logo, buttons, accents */
--color-accent-hover: #0E332B; /* deeper bottle green — hover */
--color-accent-soft: #E8EEEA; /* tint for soft backgrounds */
/* Text is pure black or pure white only, no greys. The
"secondary" feel comes from a lighter font-weight (300), not colour. */
--color-ink: #000000; /* primary text / dark bands */
--color-text: #000000;
--color-text-secondary: #000000; /* black; lightness comes from weight */
/* Muted is NOT for body text (that's black now) — it's the grey used for
de-emphasis: hover dimming, closed-accordion rows, chart sub-labels. */
--color-muted: #8A8A82;
--color-bg: #FFFFFF; /* main background */
--color-bg-alt: #F7F7F5; /* alternating sections */
--color-footer: #000000; /* pure-black dark bands */
--color-border: #E7E7E3; /* hairlines */
--color-border-strong: #D8D8D2;
/* Typography
Switch the whole site to all-sans by setting --font-display to
var(--font-sans). */
--font-sans: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
/* Institutional/premium look: large titles use an elegant serif (Newsreader),
body / UI / labels stay in the clean sans (Source Sans 3). Revert to
all-sans by setting --font-display back to var(--font-sans). */
--font-display: var(--font-serif);
font-optical-sizing: auto;
--fs-xs: 0.8125rem; /* 13px */
--fs-sm: 0.9375rem; /* 15px */
--fs-base: 1.0625rem; /* 17px */
--fs-lg: 1.25rem; /* 20px */
--fs-xl: 1.5rem; /* 24px */
--fs-2xl: 2rem; /* 32px */
--fs-3xl: 2.75rem; /* 44px */
--fs-4xl: 3.75rem; /* 60px */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.6;
/* Spacing scale */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 3rem;
--space-6: 4rem;
--space-7: 6rem;
--space-8: 8rem;
/* Layout */
--container-max: 1320px;
--container-pad: 1.5rem;
--header-h: 96px;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
--shadow: 0 8px 30px rgba(17, 17, 17, 0.08);
--shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.12);
--transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
--z-header: 1000;
--z-dropdown: 1100;
--z-mobile: 1200;
}
/* ---------------------------------------------------------------------
2. RESET & BASE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Always reserve the scrollbar gutter so the page never shifts sideways
when content height changes (e.g. filtering Team/Portfolio to fewer items). */
scrollbar-gutter: stable;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* =====================================================================
Page transitions (View Transitions API)
The browser cross-fades between pages natively. The header and footer
are given stable transition names so they stay put while only the
page content fades — like Kleiner Perkins. Browsers without support
simply navigate normally (graceful fallback).
===================================================================== */
@view-transition {
navigation: auto;
}
/* Only the content area (root) cross-fades */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 380ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Pin the chrome so it doesn't flash or move during navigation */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
/* Accessible focus ring */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------
3. TYPOGRAPHY
--------------------------------------------------------------------- */
h1, h2, h3, h4 {
margin: 0 0 0.5em;
font-family: var(--font-display);
font-weight: 400;
line-height: var(--lh-tight);
color: var(--color-ink);
letter-spacing: -0.005em;
}
/* Newsreader reads light, so large titles sit at
Regular (400) to carry the same presence in pure black; leads/body stay 300. */
h1, h2 { font-weight: 400; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
.lead {
font-size: var(--fs-lg);
line-height: var(--lh-normal);
color: var(--color-text-secondary);
}
.eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1rem;
}
/* Section kicker — our signature label to contextualise each in-page section:
a short bottle-green lead-in tick, then an uppercase label. */
.kicker {
display: flex;
align-items: center;
width: fit-content;
gap: 14px;
margin: 0 0 clamp(3.15rem, 6.3vw, 5.4rem);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
color: var(--color-ink);
}
.kicker::before {
content: "";
flex: 0 0 auto;
width: 34px;
height: 2px;
background: currentColor;
}
/* On dark bands: white for contrast */
.kicker--on-dark { color: #fff; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-hover); }
/* ---------------------------------------------------------------------
4. LAYOUT HELPERS
--------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1400px; }
/* Generous, fluid vertical rhythm */
.section { padding-block: clamp(5.5rem, 8vw, 9.5rem); }
.section--tight { padding-block: var(--space-5); }
/* Reusable page header: title (left) + short editorial lead (right), aligned
and spread apart (Portfolio-style). Wraps to a stack on narrow screens. */
.page-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 3rem;
}
.page-head .eyebrow { margin-bottom: 0.55rem; }
.page-head__heading { margin: 0; line-height: 1.08; }
.page-head__lead {
max-width: 42ch;
margin: 0;
color: var(--color-text-secondary);
font-size: var(--fs-base);
font-weight: 300;
line-height: 1.6;
}
@media (max-width: 640px) {
.page-head { align-items: flex-start; }
}
/* Split block under a page head: smaller heading + lead left, image right.
Shared by Strategy > Entry and About > Overview. */
.page-split {
margin-top: clamp(3rem, 7vw, 6rem);
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: start;
}
.page-split__title {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
line-height: 1.15;
letter-spacing: -0.006em;
color: var(--color-ink);
}
.page-split__lead {
margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
max-width: 46ch;
font-size: var(--fs-base);
font-weight: 300;
line-height: 1.62;
color: var(--color-text-secondary);
}
.page-split__media {
aspect-ratio: 16 / 9;
background: var(--color-surface, #f3f3ef);
overflow: hidden;
}
.page-split__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.page-split { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
.page-split__media { aspect-ratio: 16 / 10; }
}
/* Reusable wide panoramic banner (Portfolio-style): sits under a page header,
full container width, soft dark veil to match the site's photo treatment. */
.page-banner {
position: relative;
margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
aspect-ratio: 16 / 7;
overflow: hidden;
background: var(--color-surface, #f3f3ef);
}
.page-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.page-banner::after {
content: "";
position: absolute;
inset: 0;
background: rgba(8, 10, 10, 0.22);
pointer-events: none;
}
/* Centered play button over a banner. Outlined white circle that fills white
on hover, with a dark triangle. */
.banner-play {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(64px, 7vw, 92px);
height: clamp(64px, 7vw, 92px);
display: grid;
place-items: center;
padding: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
color: #fff;
cursor: pointer;
transition: background 340ms cubic-bezier(0.16, 1, 0.3, 1),
transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
color 340ms, border-color 340ms;
}
.banner-play svg {
width: 34%;
height: 34%;
margin-left: 3px; /* subtle optical centering of the triangle */
fill: currentColor;
}
.banner-play:hover,
.banner-play:focus-visible {
background: rgba(255, 255, 255, 0.95);
color: var(--color-ink);
border-color: #fff;
transform: translate(-50%, -50%) scale(1.06);
}
/* Video lightbox popup */
.vid-lb {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(8, 10, 10, 0.74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 180ms ease, visibility 180ms;
}
.vid-lb.is-open { opacity: 1; visibility: visible; }
.vid-lb__frame {
position: relative;
width: min(100%, 1040px);
aspect-ratio: 16 / 9;
background: #000;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.vid-lb__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-lb__close {
position: absolute;
top: clamp(0.9rem, 3vw, 1.75rem);
right: clamp(0.9rem, 3vw, 1.75rem);
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
background: none;
border: 0;
color: #fff;
cursor: pointer;
opacity: 0.85;
transition: opacity var(--transition);
}
.vid-lb__close:hover,
.vid-lb__close:focus-visible { opacity: 1; }
.vid-lb__close svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) {
.vid-lb { transition: none; }
.banner-play { transition: color 340ms, border-color 340ms; }
}
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-ink); color: #fff; }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section-head { max-width: 720px; margin-bottom: var(--space-5); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.divider { height: 1px; background: var(--color-border); border: 0; margin: 0; }
/* ---------------------------------------------------------------------
5. BUTTONS
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
padding: 0.95rem 1.6rem;
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: background var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition);
cursor: pointer;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
background: var(--color-accent);
color: #fff;
}
.btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn--outline {
background: transparent;
color: var(--color-ink);
border-color: var(--color-border-strong);
}
.btn--outline:hover { border-color: var(--color-ink); color: var(--color-ink); }
.btn--ghost {
background: transparent;
color: var(--color-accent);
padding-inline: 0;
}
.btn--ghost:hover { color: var(--color-accent-hover); }
.btn--on-dark {
background: #fff;
color: var(--color-ink);
}
.btn--on-dark:hover { background: var(--color-accent-soft); color: var(--color-ink); }
/* Arrow link */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--fs-sm);
font-weight: 500;
}
.link-arrow svg { transition: transform var(--transition); }
/* diagonal arrow ↗ — nudges up-and-right on hover */
.link-arrow:hover svg { transform: translate(3px, -3px); }
/* ---------------------------------------------------------------------
Signature button — corner brackets (PJT-inspired). At rest, four
L-shaped brackets sit at the corners. On hover the bracket arms grow
until they meet, completing a full frame; text shifts to accent and
the diagonal arrow nudges out. Built with 8 corner gradients (2 arms
per corner). Reusable site-wide.
--------------------------------------------------------------------- */
.btn-draw {
--bw: 2px; /* bracket thickness */
--bl: 12px; /* bracket arm length at rest */
--bc: var(--color-accent);
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.95rem 1.55rem;
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-ink);
text-decoration: none;
background-image:
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc));
background-repeat: no-repeat;
background-size:
var(--bl) var(--bw), var(--bw) var(--bl), /* top-left: h, v */
var(--bl) var(--bw), var(--bw) var(--bl), /* top-right */
var(--bl) var(--bw), var(--bw) var(--bl), /* bottom-left */
var(--bl) var(--bw), var(--bw) var(--bl); /* bottom-right */
background-position:
left top, left top,
right top, right top,
left bottom, left bottom,
right bottom, right bottom;
transition: background-size 0.4s ease, color var(--transition);
}
/* hover: each arm grows to 50% so the two arms on every edge meet → full frame */
.btn-draw:hover,
.btn-draw:focus-visible {
color: var(--color-accent);
background-size:
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%;
}
.btn-draw svg { transition: transform var(--transition); }
.btn-draw:hover svg,
.btn-draw:focus-visible svg { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
.btn-draw { transition: color var(--transition); }
}
/* light variant for dark / coloured backgrounds (e.g. the green media panel) */
.btn-draw--light {
--bc: rgba(255, 255, 255, 0.55);
color: #fff;
}
.btn-draw--light:hover,
.btn-draw--light:focus-visible {
--bc: #fff;
color: #fff;
}
/* Text button: a thin underline that draws in smoothly on hover.
It grows from the left on enter and slips out to the right on leave,
for a continuous, unhurried feel. */
.btn-line {
position: relative;
display: inline-block;
padding-bottom: 4px;
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-ink);
text-decoration: none;
}
.btn-line::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-line:hover::after,
.btn-line:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
/* keep the text colour steady on hover (only the underline animates) */
.btn-line:hover,
.btn-line:focus-visible { color: var(--color-ink); }
/* light variant for dark backgrounds */
.btn-line--light,
.btn-line--light:hover,
.btn-line--light:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.btn-line::after { transition: none; }
}
/* Touch: a text link is only ~26px tall, well under the 44px a thumb needs.
An invisible ::before enlarges the tap area without changing the layout or
moving the underline (which lives in ::after). */
@media (max-width: 960px) {
.btn-line { position: relative; }
.btn-line::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
}
/* ===== Corner-bracket icon buttons (portfolio + partners + team LinkedIn links) =====
Same draw animation as .btn-draw: small corner ticks that grow into a full
square frame on hover. Size/layout/colour stay in the per-page CSS. */
.pa-links a,
.team-card__link,
.ct-links a {
--bw: 2px; /* bracket thickness */
--bl: 9px; /* bracket arm length at rest */
--bc: rgba(255, 255, 255, 0.55);
background-color: transparent;
background-image:
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc)),
linear-gradient(var(--bc), var(--bc)), linear-gradient(var(--bc), var(--bc));
background-repeat: no-repeat;
background-size:
var(--bl) var(--bw), var(--bw) var(--bl),
var(--bl) var(--bw), var(--bw) var(--bl),
var(--bl) var(--bw), var(--bw) var(--bl),
var(--bl) var(--bw), var(--bw) var(--bl);
background-position:
left top, left top,
right top, right top,
left bottom, left bottom,
right bottom, right bottom;
transition: background-size 0.4s ease, color var(--transition);
}
.pa-links a:hover,
.pa-links a:focus-visible,
.team-card__link:hover,
.team-card__link:focus-visible,
.ct-links a:hover,
.ct-links a:focus-visible {
--bc: #fff;
color: #fff;
background-size:
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%,
50% var(--bw), var(--bw) 50%;
}
/* ---------------------------------------------------------------------
6. HEADER / NAVIGATION
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: #fff;
border-bottom: 1px solid transparent;
transition: border-color 340ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--transition),
background 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header.is-scrolled {
border-bottom-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
/* Header is always solid white — including over the hero (no transparent state).
Dark text and the full-colour logo everywhere; the scrolled state just adds
the hairline + shadow (see .is-scrolled). */
.site-header--hero:not(.is-scrolled) {
border-bottom-color: transparent;
box-shadow: none;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
}
/* Brand / logo */
.nav__brand {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
/* Clip wrapper: animates its width so the wordmark collapses on scroll,
leaving only the globe (see .is-condensed). */
.nav__logo-clip {
display: inline-block;
overflow: hidden;
height: 57.5px;
width: var(--logo-full, 161px);
transition: width 440ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__logo {
height: 57.5px; /* 50px + 15%, requested 24/08/2026 */
width: auto;
max-width: none; /* keep full natural width so the clip can crop it */
display: block;
transition: filter 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Scrolled down → keep just the globe; back at the top → full lockup returns */
.site-header.is-condensed .nav__logo-clip { width: var(--logo-globe, 48px); }
/* Turn the dark logo fully white on dark backgrounds (footer) */
.nav__brand--light .nav__logo {
filter: brightness(0) invert(1);
}
/* Primary menu */
.nav__menu {
display: flex;
align-items: center;
gap: 1.1rem;
margin-left: auto; /* push the menu to the right of the bar */
}
.nav__item { position: relative; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.35rem;
font-family: var(--font-sans);
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--color-text);
border-radius: 0;
transition: color 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__link:hover,
.nav__item.is-active > .nav__link { color: var(--color-ink); }
/* Underline (draws in from the left) on hover; stays while the panel is open */
.nav__link-label {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
padding-bottom: 2px;
transition: background-size 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav__link:hover .nav__link-label,
.nav__link:focus-visible .nav__link-label,
.nav__item.is-active > .nav__link .nav__link-label,
.nav__item--has-children.is-open .nav__link-label { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
.nav__link-label { transition: none; }
}
.nav__caret {
width: 10px; height: 10px;
transition: transform var(--transition);
opacity: 0.7;
}
.nav__item--has-children.is-open .nav__caret { transform: rotate(180deg); }
/* =====================================================================
MEGA MENU — a full-width panel that UNROLLS below the header on click.
Mechanism: the content height animates 0 -> auto (clipped), so
it reveals top-to-bottom straight out of the separator line — no slide, no
fade of the content. Done with the grid-template-rows 0fr->1fr trick (pure
CSS, no JS height measurement). JS toggles .is-open on the parent .
===================================================================== */
/* The panel appears at a fixed position, so the separator "trait" shows right
under the header bar (where the closed menu's bottom is). Only the COLUMNS
beneath the line unroll (height 0 -> auto), revealing straight out of the
fixed line. */
.nav__dropdown {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
width: 100%;
background: #fff;
/* separator sits flush at the header's bottom edge (no gap above it) */
padding-top: 0;
opacity: 0;
visibility: hidden;
z-index: var(--z-dropdown);
}
.nav__item--has-children.is-open .nav__dropdown {
opacity: 1;
visibility: visible;
box-shadow: 0 28px 44px -32px rgba(17, 17, 17, 0.45);
}
/* Fixed container-aligned hairline; its single grid row (the clip) unrolls the
columns beneath it. The line itself does NOT move — it stays at the top. */
.nav__dropdown-inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
border-top: 1px solid var(--color-border);
display: grid;
grid-template-rows: 0fr;
}
.nav__item--has-children.is-open .nav__dropdown-inner { grid-template-rows: 1fr; }
/* Clip: the collapsing grid row (no padding of its own so it reaches 0) */
.nav__dropdown-clip { min-height: 0; overflow: hidden; }
/* Columns beneath the line */
.nav__dropdown-cols {
padding-top: clamp(2.5rem, 4vw, 3.25rem); /* line → columns */
padding-bottom: clamp(2.75rem, 5vw, 4rem);
display: flex;
gap: clamp(2.5rem, 4.5vw, 5rem);
}
.nav__dropdown-group { min-width: 185px; }
/* Serif section titles (Fraunces) */
.nav__dropdown-title {
margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
letter-spacing: -0.01em;
color: var(--color-ink);
}
.nav__dropdown-link {
display: block;
padding: 0.5rem 0;
font-size: var(--fs-base);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--color-text);
transition: color var(--transition);
}
.nav__dropdown-link:hover,
.nav__dropdown-link.is-active { color: var(--color-ink); }
/* Underline (draws in from the left) on hover — matches the top nav */
.nav__dropdown-label {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
padding-bottom: 2px;
transition: background-size 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.nav__dropdown-link:hover .nav__dropdown-label,
.nav__dropdown-link:focus-visible .nav__dropdown-label,
.nav__dropdown-link.is-active .nav__dropdown-label { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
.nav__dropdown-label { transition: none; }
}
/* Scrim dims the page while a panel is open. It must sit BELOW the header's
stacking context (z-header) so the panel — which lives inside the header —
stays above it and remains clickable. */
.nav__scrim {
position: fixed;
top: var(--header-h);
left: 0; right: 0; bottom: 0;
background: rgba(17, 17, 17, 0.40);
/* The page behind is dimmed and softly blurred, so the panel reads as the
only live layer. A blurred backdrop is re-rasterised in TILES by the
browser: if anything keeps moving behind it, the tiles refresh out of step
and show up as squares in the blur. Everything that animates is therefore
frozen while a panel is open (see .mega-open rules below and the hero
video in main.js). Do not add a moving element behind this without
freezing it too. */
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
opacity: 0; visibility: hidden;
z-index: calc(var(--z-header) - 1);
}
/* Freeze every looping animation while the blurred scrim is up */
body.mega-open .hm-back__track,
body.mega-open [class*="__marquee"] * { animation-play-state: paused; }
body.mega-open .nav__scrim { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
.nav__dropdown { transition: visibility 120ms; }
}
/* Header right side */
.nav__actions { display: flex; align-items: center; gap: 0.75rem; }
/* Hamburger */
.nav__toggle {
display: none;
width: 44px; height: 44px;
border: 0; background: transparent;
align-items: center; justify-content: center;
}
.nav__toggle span {
position: relative;
width: 22px; height: 2px;
background: var(--color-ink);
transition: background var(--transition);
}
.nav__toggle span::before,
.nav__toggle span::after {
content: "";
position: absolute; left: 0;
width: 22px; height: 2px;
background: var(--color-ink);
transition: transform var(--transition), top var(--transition);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
/* ---------------------------------------------------------------------
7. MOBILE NAVIGATION (panel)
--------------------------------------------------------------------- */
.nav__backdrop {
position: fixed; inset: 0;
background: rgba(17, 17, 17, 0.4);
opacity: 0; visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
z-index: var(--z-mobile);
}
body.nav-open .nav__backdrop { opacity: 1; visibility: visible; }
@media (max-width: 960px) {
.nav__toggle { display: inline-flex; }
/* The burger IS the close button: it turns into an X once the panel is open,
so it has to stay visible and clickable. This needs BOTH rules below,
either one alone fails:
1. the header owns a stacking context, so nothing inside it can paint
above the full-screen backdrop (z 1200) until the header itself is
lifted above it;
2. the panel is a CHILD of the header and is positioned (z 1200), so
inside that context it still covers the unpositioned burger.
Lifting the header also keeps the logo visible next to the X. */
body.nav-open .site-header { z-index: calc(var(--z-mobile) + 1); }
body.nav-open .nav__toggle {
position: relative;
z-index: calc(var(--z-mobile) + 1);
}
.nav__menu {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(380px, 86vw);
flex-direction: column;
align-items: stretch;
gap: 0;
background: #fff;
padding: calc(var(--header-h) + 1rem) 1.25rem 2rem;
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--transition-slow);
overflow-y: auto;
z-index: var(--z-mobile);
}
body.nav-open .nav__menu { transform: translateX(0); }
.nav__item { border-bottom: 1px solid var(--color-border); }
.nav__link { padding: 1rem 0.25rem; font-size: var(--fs-base); justify-content: space-between; }
/* dropdown becomes an in-panel accordion (reset the desktop unrolling band) */
.nav__dropdown {
position: static;
display: block;
top: auto; left: auto; right: auto; width: auto;
opacity: 1; visibility: visible;
box-shadow: none; border: 0; border-radius: 0;
background: transparent;
padding: 0 0 0.5rem 0.5rem;
max-height: 0; overflow: hidden;
transition: max-height var(--transition);
}
.nav__dropdown-inner {
display: block;
grid-template-rows: none;
max-width: none; margin: 0; padding: 0;
border-top: 0;
}
.nav__dropdown-clip { overflow: visible; min-height: 0; }
.nav__dropdown-cols {
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0;
}
.nav__dropdown-group { min-width: 0; }
/* second group onward gets a little separation on mobile */
.nav__dropdown-group + .nav__dropdown-group { margin-top: 0.6rem; }
.nav__dropdown-title { margin: 0.4rem 0 0.35rem; }
.nav__dropdown-link { font-size: var(--fs-base); }
.nav__item--has-children.is-open .nav__dropdown { max-height: 640px; }
.nav__item--has-children.is-open .nav__caret { transform: rotate(180deg); }
/* the desktop scrim never shows on mobile (the slide-in has its own backdrop) */
.nav__scrim { display: none; }
.nav__actions .btn { display: none; }
}
/* ---------------------------------------------------------------------
8. FOOTER
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
Minimal footer: brand + animated tagline (left), half-globe (right),
slim bottom bar (LinkedIn · copyright · legal).
--------------------------------------------------------------------- */
.site-footer {
position: relative;
overflow: hidden; /* contain the globe so it can't add space below */
background: var(--color-footer);
color: #ffffff;
padding-block: var(--space-7) var(--space-4);
font-size: var(--fs-sm);
}
/* The brand mark holds the first cell of the columns grid, level with the
titles of the columns to its right */
.footer__brand {
position: relative;
z-index: 1;
align-self: start;
}
.footer__logo {
display: block;
height: clamp(51px, 5.5vw, 81px);
width: auto;
/* render the mark pure white */
filter: brightness(0) invert(1);
}
/* ---------------------------------------------------------------------
Intro split — title (left) | divider | body text (right)
--------------------------------------------------------------------- */
.intro-split__grid {
display: grid;
grid-template-columns: 0.8fr 1px 1.5fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
/* Variant without the vertical divider */
.intro-split__grid--plain { grid-template-columns: 0.8fr 1.5fr; }
.intro-split__text {
position: sticky;
top: calc(var(--header-h) + 1.5rem);
}
.intro-split__title {
font-size: var(--fs-3xl);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0.6rem 0 0;
}
.intro-split__sep {
width: 1px;
background: var(--color-border-strong);
align-self: stretch;
}
.intro-split__body > p {
color: var(--color-text-secondary);
font-size: var(--fs-lg);
line-height: 1.65;
margin: 0 0 1.4rem;
}
.intro-split__body > p:last-child { margin-bottom: 0; }
/* Important words in green */
.hl-green {
color: var(--color-accent);
font-weight: 500;
}
@media (max-width: 820px) {
.intro-split__grid { grid-template-columns: 1fr; gap: var(--space-4); }
.intro-split__sep { display: none; }
.intro-split__text { position: static; }
}
/* ---------------------------------------------------------------------
Animated tagline — green gradient text with leaves swaying around it.
Shared by the hero and the footer (both sit on dark backgrounds).
--------------------------------------------------------------------- */
.tagline-fx {
position: relative;
display: inline-block;
font-weight: 500;
letter-spacing: 0.01em;
overflow: visible;
}
.tagline-fx__text {
background: linear-gradient(
100deg,
#DDF1E7 0%,
#84CBAF 22%,
#2C8B71 45%,
#6FC1A4 68%,
#DDF1E7 100%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: tagline-shine 7s linear infinite;
}
@keyframes tagline-shine {
to { background-position: 220% 50%; }
}
.tagline-fx__leaf {
position: absolute;
width: 19px;
height: 19px;
color: #57bd93;
opacity: 0.9;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
pointer-events: none;
transform-origin: 80% 20%;
}
.tagline-fx__leaf--1 {
left: -32px;
top: -14px;
animation: tagline-leaf-sway 4.6s ease-in-out infinite;
}
.tagline-fx__leaf--2 {
right: -26px;
top: -18px;
width: 15px;
height: 15px;
color: #8FD0B9;
animation: tagline-leaf-sway 5.8s ease-in-out infinite reverse;
}
.tagline-fx__leaf--3 {
right: 24%;
bottom: -20px;
width: 13px;
height: 13px;
animation: tagline-leaf-sway 6.4s ease-in-out infinite;
animation-delay: -2.2s;
}
@keyframes tagline-leaf-sway {
0%, 100% { transform: translateY(0) rotate(-14deg); }
50% { transform: translateY(-7px) rotate(16deg); }
}
@media (prefers-reduced-motion: reduce) {
.tagline-fx__text { animation: none; }
.tagline-fx__leaf { animation: none; }
}
/* Link columns: About · Strategy · Impact · Quick Links · Legal · Get in Touch.
Each column opens with a hairline above its title. */
.footer__cols {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(2.75rem, 4.5vw, 3.75rem) clamp(2.25rem, 3.5vw, 3.25rem);
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The rule stops short of the column edge, so the columns breathe apart */
.footer__col::before {
content: "";
display: block;
width: 87%;
height: 1px;
margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
background: #ffffff;
}
.footer__col-title {
margin: 0 0 1.75rem;
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.2;
color: #fff;
}
.footer__nav {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.7rem;
font-size: var(--fs-sm);
font-weight: 400;
}
/* Same underline-draw as .btn-line: it sweeps in from the left on hover */
.footer__nav a {
position: relative;
display: inline-block;
padding-bottom: 3px;
color: #ffffff;
transition: color var(--transition);
}
.footer__nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.footer__nav a:hover::after,
.footer__nav a:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.footer__nav a:hover,
.footer__nav a:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.footer__nav a::after { transition: none; }
}
@media (max-width: 1000px) {
.footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Copyright: last cell of the grid, bottom-aligned so it sits level with the
final link of the tallest column. No rule above it. */
.footer__copy {
/* spans the row's free cells so it stays on one line */
grid-column: 3 / -1;
align-self: end;
margin: 0;
text-align: right;
color: #ffffff;
font-size: var(--fs-xs);
line-height: 1.5;
}
@media (max-width: 1000px) {
.footer__copy { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.footer__copy { text-align: left; }
}
/* ---------------------------------------------------------------------
9. MOTION / SCROLL-REVEAL
--------------------------------------------------------------------- */
/* Scroll-reveal disabled — content is shown immediately. */
.reveal { opacity: 1; transform: none; }
/* Scroll reveal — blocks fade + rise into view as they scroll in (all pages).
Active only when JS adds `.reveal-ready` to , so users without JS
or with reduced motion always see the content (no hidden blocks). */
html.reveal-ready [data-reveal] { opacity: 0; }
html.reveal-ready [data-reveal].is-revealed {
opacity: 1;
/* an animation (not a transition) so each element keeps its own transition
for hover effects, e.g. the .btn-draw corner brackets */
animation: reveal-rise 850ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes reveal-rise {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; }
html.reveal-ready [data-reveal] { opacity: 1; animation: none; }
}
/* ---------------------------------------------------------------------
10. UTILITIES
--------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-secondary { color: var(--color-text-secondary); }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.no-scroll { overflow: hidden; }
/* Legal / long-form document — see assets/css/legal.css */
/* ---------------------------------------------------------------------
11. RESPONSIVE
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
:root { --fs-4xl: 3rem; --fs-3xl: 2.25rem; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
:root {
--fs-4xl: 2.5rem;
--fs-3xl: 2rem;
--fs-2xl: 1.6rem;
--space-7: 4rem;
--space-8: 5rem;
}
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}