/* --------------------------------------------------------------------------- Design tokens — the single place to tweak the look of the site. Pure values only: the treatments that consume them live in effects.css. You can also try values live in devtools (inspect , edit :root). --------------------------------------------------------------------------- */ :root { color-scheme: dark; /* --- Page & frame ------------------------------------------------------ */ --page-bg: #101010; --frame-inset: clamp(0px, 1.1vmin, 16px); /* 0 = full-bleed photo */ --frame-radius: 2px; /* --- Photo treatment --------------------------------------------------- */ --photo-brightness: 1; --photo-saturate: 1; --photo-position: 50% 50%; /* what stays in frame when the photo is cropped */ /* Darkening layer between photo and text. */ --scrim: radial-gradient( 72% 58% at 50% 47%, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.14) 45%, rgb(0 0 0 / 0) 100% ); /* --- Type -------------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* One size drives the whole lockup: the tagline and email are sized in `em` relative to the wordmark, so the block always scales as a single unit. */ --wordmark-min: 3.25rem; /* floor on narrow screens */ --wordmark-ideal: 6cqi; /* 6% of the photo frame's width */ --wordmark-max: 10rem; /* ceiling on very wide screens */ --wordmark-min-short: 2.25rem; /* floor used in short/landscape windows */ --wordmark-size: clamp(var(--wordmark-min), 6vw, var(--wordmark-max)); --brand-weight: 700; /* Inter Bold */ --brand-tracking: -0.02em; --brand-color: #c7c7fb; --brand-color-2: #8f8ff5; /* second stop for gradient treatments */ --brand-blend: normal; /* difference | overlay | screen | exclusion … */ --brand-shadow: 0 0.02em 0.5em rgb(0 0 0 / 0.35); --brand-stroke: 0; /* outline thickness, e.g. 0.022em */ --brand-stroke-color: currentColor; --sub-size: 0.36em; /* relative to --wordmark-size */ --sub-weight: 600; /* Inter SemiBold */ --sub-tracking: -0.005em; --sub-color: #ffffff; --sub-shadow: 0 0.05em 0.6em rgb(0 0 0 / 0.55); /* --- Lockup placement -------------------------------------------------- */ --lockup-align: center; /* center | start | end (horizontal) */ --lockup-offset-y: -1.5%; /* negative lifts the block above centre */ --gap-wordmark-tagline: 0.10em; --gap-tagline-email: 0.16em; /* --- Motion ------------------------------------------------------------ */ --enter-duration: 900ms; --enter-ease: cubic-bezier(0.22, 1, 0.36, 1); --enter-delay: 120ms; /* before the wordmark starts */ --letter-stagger: 55ms; /* per-letter delay for motion="letters" */ --ambient-duration: 6s; /* looping shimmer / breathe / drift */ --pointer-strength: 14px; /* travel for pointer="parallax" */ }