html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Gilroy Light', sans-serif;
opacity: 0;
}
/* Hide default cursor */
body {
cursor: none;
}
/* Custom cursor container */
#custom-cursor {
position: fixed;
top: 0;
left: 0;
width: 26px;
height: 26px;
pointer-events: none;
z-index: 9999;
transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0) translate(-50%, -50%) scale(var(--c-scale, 1));
transition: transform 0.08s ease-out;
}
#custom-cursor img {
width: 100%;
height: 100%;
}
.cursor-hidden {
opacity: 0;
}
.pointer-active {
--c-scale: 1.15;
}
@media (hover: none) {
body {
cursor: auto;
}
#custom-cursor {
display: none;
}
}
.screen-fade-out {
opacity: 0;
transition: opacity 0.5s ease;
}
.fade-in {
opacity: 1;
transition: opacity 0.5s ease;
}
@font-face {
font-family: 'Sk-Modernist Regular';
src: url(/fonts/Sk-Modernist-Regular.woff2) format('woff2'),
url(/fonts/Sk-Modernist-Regular.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Sk-Modernist Bold';
src: url(/fonts/Sk-Modernist-Bold.woff2) format('woff2'),
url(/fonts/Sk-Modernist-Bold.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Gilroy Light';
src: url(/fonts/Gilroy-Light.woff2) format('woff2'),
url(/fonts/Gilroy-Light.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Gilroy ExtraBold';
src: url(/fonts/Gilroy-ExtraBold.woff2) format('woff2'),
url(/fonts/Gilroy-ExtraBold.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Gilroy SemiBold';
src: url(/fonts/Gilroy-Bold.woff2) format('woff2'),
url(/fonts/Gilroy-Bold.ttf) format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Awesome Serif Bold Regular';
src: url(/fonts/AwesomeSerif-BoldRegular.woff2) format('woff2'),
url(/fonts/AwesomeSerif-BoldRegular.otf) format('opentype');
font-display: swap;
}
@font-face {
font-family: 'Awesome Serif SemiBd Extra Tall Italic';
src: url(/fonts/AwesomeSerifItalic-SmExraTall.woff2) format('woff2'),
url(/fonts/AwesomeSerifItalic-SmExraTall.otf) format('opentype');
font-display: swap;
}
::selection {
background: #DFFCA1;
}
:root {
--paper: #FBF9F3;
--ink: #1a1a1a;
--muted: #696969;
--accent-dark: #094020;
--accent-light: #DFFCA1;
}
/* Case-study pages skip the homepage's dot-grid background (and its
hover glow) for better text readability over long-form case content -
only the plain paper background color is kept. The .paper-grid class
stays on because the shared /script.js also uses it to target
the bottom gradual-blur effect behind the mobile nav pill. */
body.paper-grid {
position: relative;
background-color: var(--paper);
}
.fade-scale {
opacity: 1;
transform: scale(1);
transition: opacity 0.175s ease-in-out, transform 0.175s ease-in-out;
}
.fade-scale.hidden {
opacity: 0;
transform: scale(0.85);
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background-color: transparent;
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
box-sizing: border-box;
/* backdrop-filter is deliberately NOT in this transition - animating
its blur radius makes Chrome briefly flash the layer blank/white
while it recompiles the filter (a known compositor bug, see the
Home page's styles.css for the fuller writeup). Letting it snap
instantly between states, backed by will-change below, is far less
visible than that flash. */
transition: background-color 0.3s ease, box-shadow 0.3s ease;
will-change: backdrop-filter;
}
.navbar.scrolled {
background-color: rgba(251, 249, 243, 0.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 1px 0 rgba(28, 28, 28, 0.06);
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left {
display: flex;
align-items: center;
gap: 40px;
}
.navbar-left img {
height: 40px;
width: auto;
cursor: pointer;
transition: ease-in-out 0.175s;
}
.navbar-left img:hover {
cursor: pointer;
transform: scale(1.2);
transition: ease-in-out 0.175s;
}
.navbar-right {
display: flex;
align-items: center;
gap: 8px;
}
/* On desktop this wrapper must not participate in the box model at all -
its buttons need to sit directly in .navbar-right's flex row. display:
contents does exactly that; the mobile media query below turns it back
into a real flex column for the collapse/expand animation. */
.mobile-nav-links {
display: contents;
}
/* Bottom-center floating menu trigger: "Menu" label and icon side by
side, both in normal flow so the pill's auto width - and therefore how
much it needs to grow when it opens - correctly accounts for the
icon's space too. .hamburger-icon morphs into an X via .active, same
as the old top-right icon did. No hover/active feedback here by
design - that's reserved for the actual nav links below. */
.hamburger {
display: none;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 14px;
z-index: 10;
}
.hamburger-label {
color: #fff;
font-family: "Sk-Modernist Bold";
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
/* Match the icon's tight 12px box instead of the font's natural
(much taller) line-height, so it centers accurately instead of
against an inflated, mostly-empty line box. */
line-height: 1;
}
.hamburger-icon {
position: relative;
width: 18px;
height: 12px;
flex-shrink: 0;
}
.hamburger-icon span {
background: #fff;
height: 2px;
width: 100%;
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.hamburger-icon span:nth-child(1) {
top: 0;
}
.hamburger-icon span:nth-child(2) {
top: 10px;
}
.hamburger.active .hamburger-icon span:nth-child(1) {
transform: rotate(45deg);
top: 5px;
}
.hamburger.active .hamburger-icon span:nth-child(2) {
transform: rotate(-45deg);
top: 5px;
}
/* Mobile Styles */
@media (max-width: 768px) {
/* .navbar is position:fixed with its own z-index, which makes it a
stacking context - .navbar-right's z-index only ever competes
within THAT context, so no value on it could out-rank the gradual
blur overlay (z-index 600, in script.js) sitting in the page's root
stacking context. Raising .navbar's own z-index lifts the whole
context (.navbar-right included) above the blur. */
.navbar {
z-index: 1000;
will-change: auto;
}
/* backdrop-filter establishes a new containing block for position:fixed
descendants - since .navbar-right lives inside