*/ .invert{ --bg: var(--espresso); --bg-2: var(--espresso-2); --fg: var(--cream); --fg-soft: oklch(0.760 0.014 74); --fg-faint: oklch(0.600 0.014 66); --edge: oklch(0.340 0.016 50); --edge-soft: oklch(0.300 0.014 50); --accent: oklch(0.700 0.110 46); --accent-deep: oklch(0.760 0.100 48); --accent-fg: var(--espresso); background: var(--bg); color: var(--fg); color-scheme: dark; } /* ---------- Reset ---------- */ *{ box-sizing: border-box; margin: 0; padding: 0; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } body{ font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img{ display: block; max-width: 100%; } a{ color: inherit; text-decoration: none; } button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection{ background: var(--accent); color: var(--accent-fg); } /* ---------- Layout ---------- */ .wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide{ max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); } section{ position: relative; } /* ---------- Type ---------- */ .serif{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 1.0; letter-spacing: var(--serif-tighten); } .serif em{ font-style: italic; } .italic{ font-style: italic; } .display{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 0.98; letter-spacing: var(--serif-tighten); font-size: clamp(3.2rem, 9vw, 8.5rem); } .h1{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 1.0; letter-spacing: var(--serif-tighten); font-size: clamp(2.6rem, 6.2vw, 5.4rem); } .h2{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 1.02; letter-spacing: var(--serif-tighten); font-size: clamp(2.1rem, 4.6vw, 3.8rem); } .h3{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 1.06; letter-spacing: var(--serif-tighten); font-size: clamp(1.6rem, 3vw, 2.4rem); } .lede{ font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.5; color: var(--fg-soft); font-weight: 400; letter-spacing: -0.008em; max-width: 40ch; text-wrap: pretty; } .body{ color: var(--fg-soft); font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; text-wrap: pretty; } .body p + p{ margin-top: 1.1em; } /* mono eyebrow / labels */ .eyebrow{ font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } .eyebrow.tick::before{ content:""; width: 26px; height: 1px; background: var(--accent); } .num{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fg-faint); } .accent{ color: var(--accent); } /* ---------- Buttons & links ---------- */ .btn{ font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 100px; border: 1px solid transparent; transition: all .35s var(--ease); white-space: nowrap; cursor: pointer; } .btn .arr{ transition: transform .35s var(--ease); } .btn:hover .arr{ transform: translateX(5px); } .btn-primary{ background: var(--accent); color: var(--accent-fg); } .btn-primary:hover{ background: var(--accent-deep); transform: translateY(-2px); } .btn-ghost{ background: transparent; color: var(--fg); border-color: var(--edge); } .btn-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .btn-light{ background: var(--cream); color: var(--espresso); } .btn-light:hover{ transform: translateY(-2px); } /* underline link */ .ul{ display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; padding-bottom: 3px; position: relative; width: fit-content; } .ul::after{ content:""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .45s var(--ease); opacity: .4; } .ul:hover::after{ transform: scaleX(0); } .ul .arr{ transition: transform .35s var(--ease); } .ul:hover .arr{ transform: translateX(4px); } /* ---------- Nav ---------- */ .nav{ position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); transition: background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; color: var(--fg); } .nav.over-hero{ color: var(--cream); } .nav.scrolled{ background: color-mix(in oklab, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--line-soft); padding-top: 15px; padding-bottom: 15px; color: var(--ink); } .nav__brand{ display: inline-flex; align-items: center; gap: 13px; z-index: 2; } .nav__links{ display: flex; align-items: center; gap: 38px; } .nav__links a{ font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; position: relative; padding: 6px 0; opacity: .82; transition: opacity .3s var(--ease); } .nav__links a:hover, .nav__links a[aria-current="page"]{ opacity: 1; } .nav__links a[aria-current="page"]::after{ content:""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent); } .nav__cta{ display: inline-flex; align-items: center; gap: 26px; } .nav__menu-btn{ display: none; } /* Wordmark lockup */ .wordmark{ display: inline-flex; flex-direction: column; line-height: 1; } .wordmark__name{ font-family: var(--font-serif); font-weight: var(--serif-wght); font-size: 21px; letter-spacing: 0.01em; } .wordmark__sub{ font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; margin-top: 4px; opacity: .72; } .monogram{ width: 34px; height: 34px; flex: none; overflow: visible; } .monogram circle, .monogram path{ vector-effect: non-scaling-stroke; } /* Animated mark: opens from a closed ring, then the two C's pull apart. Both arcs share a radius, so overlapped-at-center = one perfect circle. nth-of-type(1) = left C, (2) = right C (final centers offset ±4.9 units). */ @media (prefers-reduced-motion: no-preference){ .monogram.play{ animation: monoFade .5s var(--ease-out) both; } .monogram.play path:nth-of-type(1){ animation: monoLeft 1.25s var(--ease-out) both; } .monogram.play path:nth-of-type(2){ animation: monoRight 1.25s var(--ease-out) both; } } @keyframes monoFade{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes monoLeft{ 0%, 26%{ transform: translateX(4.9px); } 62%{ transform: translateX(-0.5px); } 100%{ transform: translateX(0); } } @keyframes monoRight{ 0%, 26%{ transform: translateX(-4.9px); } 62%{ transform: translateX(0.5px); } 100%{ transform: translateX(0); } } /* Mobile menu */ .mmenu{ position: fixed; inset: 0; z-index: 99; background: var(--espresso); color: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); transform: translateY(-100%); transition: transform .6s var(--ease-out); visibility: hidden; } .mmenu.open{ transform: translateY(0); visibility: visible; } .mmenu a{ font-family: var(--font-serif); font-weight: var(--serif-wght); font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1.25; letter-spacing: var(--serif-tighten); opacity: .9; } .mmenu a:hover{ color: var(--accent); } .mmenu__meta{ margin-top: 48px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: oklch(0.7 0.014 74); } /* ---------- Images ---------- */ .frame{ position: relative; overflow: hidden; background: var(--bg-2); } .frame img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .frame::after{ content:""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, oklch(0.22 0.02 50 / 0.14)); mix-blend-mode: multiply; opacity: .5; transition: opacity .8s var(--ease); } .frame.hoverable{ cursor: pointer; } .frame.hoverable:hover img{ transform: scale(1.045); } .frame.hoverable:hover::after{ opacity: .2; } .r-sm{ border-radius: 4px; } .r-md{ border-radius: 8px; } .ar-1{ aspect-ratio: 1/1; } .ar-45{ aspect-ratio: 4/5; } .ar-34{ aspect-ratio: 3/4; } .ar-32{ aspect-ratio: 3/2; } .ar-23{ aspect-ratio: 2/3; } .ar-169{ aspect-ratio: 16/9; } /* cinematic scrim for text-over-image */ .scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.18 0.02 50 / 0.42) 0%, transparent 32%, transparent 52%, oklch(0.16 0.02 48 / 0.62) 100%); } /* ---------- Reveal on scroll ---------- */ .rv{ opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } .rv.in{ opacity: 1; transform: none; } .rv-d1{ transition-delay: .08s; } .rv-d2{ transition-delay: .16s; } .rv-d3{ transition-delay: .24s; } .rv-d4{ transition-delay: .32s; } .clip{ clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-out); } .clip.in{ clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce){ .rv, .clip{ opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ---------- Footer ---------- */ .footer{ background: var(--espresso); color: var(--cream); padding: clamp(70px, 9vw, 130px) 0 40px; } .footer a{ transition: color .3s var(--ease); } .footer a:hover{ color: var(--accent); } .footer__grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; align-items: start; } .footer__cta{ font-family: var(--font-serif); font-weight: var(--serif-wght); line-height: 1.02; letter-spacing: var(--serif-tighten); font-size: clamp(2.4rem, 5vw, 4.2rem); } .footer__col h4{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: oklch(0.66 0.014 70); margin-bottom: 20px; } .footer__col ul{ list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer__col a{ font-size: 15px; color: oklch(0.86 0.012 76); } .footer__bar{ display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px, 7vw, 88px); padding-top: 26px; border-top: 1px solid oklch(0.34 0.016 50); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: oklch(0.62 0.014 68); } /* ---------- Utilities ---------- */ .stack-sm{ display: flex; flex-direction: column; gap: 14px; } .stack{ display: flex; flex-direction: column; gap: 22px; } .row{ display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hr{ height: 1px; background: var(--edge); border: 0; width: 100%; } .pad-y{ padding-block: clamp(72px, 11vw, 168px); } .pad-y-sm{ padding-block: clamp(52px, 7vw, 104px); } .center{ text-align: center; } .mt-s{ margin-top: 18px; } .mt-m{ margin-top: 32px; } .mt-l{ margin-top: 56px; } .maxw-sm{ max-width: 46ch; } .maxw-md{ max-width: 60ch; } /* ---------- Responsive ---------- */ @media (max-width: 860px){ body{ font-size: 16px; } .nav__links, .nav__cta .btn{ display: none; } .nav__menu-btn{ display: inline-flex; align-items: center; gap: 10px; z-index: 101; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; } .footer__grid{ grid-template-columns: 1fr 1fr; gap: 40px 32px; } .footer__cta{ grid-column: 1 / -1; } } @media (max-width: 560px){ .footer__grid{ grid-template-columns: 1fr; } } /* ============================================================ WordPress integration (added for the theme build) ============================================================ */ /* The header is one shared template part. On the front page the nav sits over the dark hero, so it should read as cream from the first paint — `is-front` is added to server-side (no flash of dark text). */ body.is-front .nav:not(.scrolled){ color: var(--cream); } /* Keep the fixed nav clear of the WordPress admin bar when logged in. */ .admin-bar .nav{ top: 32px; } .admin-bar .mmenu{ top: 32px; } @media screen and (max-width: 782px){ .admin-bar .nav{ top: 46px; } .admin-bar .mmenu{ top: 46px; } } @media screen and (max-width: 600px){ .admin-bar .nav{ top: 0; } .admin-bar .mmenu{ top: 0; } } /* Neutralize the block theme's default root padding/gap so the ported, full-bleed design controls its own spacing. */ .wp-site-blocks{ padding: 0 !important; } :where(.wp-site-blocks) > *{ margin-block-start: 0 !important; } .is-layout-constrained > .alignfull{ margin-left: 0; margin-right: 0; }