/* =========================================================== THE CURRENT — main.css Tokens, ambient day-cycle, base type, layout, nav, footer =========================================================== */ /* --- Registered custom properties so the day-cycle can interpolate --- */ @property --sky-top { syntax: ''; inherits: true; initial-value: #2b3b46; } @property --sky-low { syntax: ''; inherits: true; initial-value: #7d8f96; } @property --amb-bg { syntax: ''; inherits: true; initial-value: #14171a; } @property --amb-fg { syntax: ''; inherits: true; initial-value: #e8e4dc; } @property --amb-accent { syntax: ''; inherits: true; initial-value: #b87333; } @property --water-deep { syntax: ''; inherits: true; initial-value: #1d2a28; } @property --water-mid { syntax: ''; inherits: true; initial-value: #3d4f47; } @property --water-tint { syntax: ''; inherits: true; initial-value: #6d7a5c; } @property --sun { syntax: ''; inherits: true; initial-value: #d8c6a6; } :root { /* --- Locked palette ------------------------------------ */ --charcoal: #14171a; --charcoal-2: #1c2124; --charcoal-3: #262c30; --copper: #b87333; --copper-lo: #8d5827; --copper-hi: #d9954f; --driftwood: #d8ccb8; --driftwood-lo: #a89b86; --slate: #6b7d89; --slate-lo: #47565f; --slate-hi: #9fb0b9; --paper: #ebe6dd; /* --- Semantic ------------------------------------------ */ --fg: var(--amb-fg); --fg-dim: color-mix(in srgb, var(--amb-fg) 58%, transparent); --fg-faint: color-mix(in srgb, var(--amb-fg) 28%, transparent); --rule: color-mix(in srgb, var(--amb-fg) 14%, transparent); --rule-soft: color-mix(in srgb, var(--amb-fg) 8%, transparent); /* --- Type ---------------------------------------------- */ --display: 'Fraunces', 'Times New Roman', serif; --body: 'Inter Tight', 'Helvetica Neue', Helvetica, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --fs-hero: clamp(3.4rem, 13.5vw, 13.5rem); --fs-xl: clamp(2.6rem, 6.4vw, 6.2rem); --fs-h2: clamp(2.1rem, 4.4vw, 4.1rem); --fs-h3: clamp(1.5rem, 2.4vw, 2.2rem); --fs-lede: clamp(1.06rem, 1.45vw, 1.42rem); --fs-body: clamp(1rem, 1.05vw, 1.09rem); --fs-mono: 0.688rem; /* --- Space --------------------------------------------- */ --gut: clamp(1.25rem, 5vw, 5.5rem); --sect: clamp(6rem, 15vh, 13rem); --maxw: 1520px; --readw: 62ch; /* --- Motion (slow. nothing snaps.) --------------------- */ --ease: cubic-bezier(.16,.62,.24,1); --ease-out: cubic-bezier(.22,1,.36,1); --t-amb: 2400ms; --t-slow: 1400ms; --t-med: 720ms; --t-fast: 320ms; } /* ===================== AMBIENT DAY CYCLE ===================== The page descends through the day. Each section declares data-ambient; animations.js promotes it to . The only thing that changes is this handful of variables. Slowly. ============================================================ */ :root { transition: --sky-top var(--t-amb) linear, --sky-low var(--t-amb) linear, --amb-bg var(--t-amb) linear, --amb-fg var(--t-amb) linear, --amb-accent var(--t-amb) linear, --water-deep var(--t-amb) linear, --water-mid var(--t-amb) linear, --water-tint var(--t-amb) linear, --sun var(--t-amb) linear; } :root[data-ambient="dawn"] { --sky-top: #26333d; --sky-low: #8496a0; --amb-bg: #171b1e; --amb-fg: #e6e2da; --amb-accent: #b87333; --water-deep: #1c2724; --water-mid: #506057; --water-tint: #6f7c5f; --sun: #cfd6d4; } :root[data-ambient="copper"] { --sky-top: #3b3630; --sky-low: #c08b52; --amb-bg: #1a1714; --amb-fg: #efe6d8; --amb-accent: #d9954f; --water-deep: #241f18; --water-mid: #6a5a3f; --water-tint: #8a7444; --sun: #e6b273; } :root[data-ambient="ice"] { --sky-top: #4a5a63; --sky-low: #c3ced2; --amb-bg: #1b2124; --amb-fg: #eef2f2; --amb-accent: #9fb0b9; --water-deep: #1e2a2f; --water-mid: #5e7078; --water-tint: #7c8d92; --sun: #e4edef; } :root[data-ambient="dusk"] { --sky-top: #1e2429; --sky-low: #6a6257; --amb-bg: #16191c; --amb-fg: #e4ded3; --amb-accent: #b87333; --water-deep: #171f21; --water-mid: #44514e; --water-tint: #5e6650; --sun: #b08a5e; } :root[data-ambient="night"] { --sky-top: #0e1113; --sky-low: #2c3439; --amb-bg: #101315; --amb-fg: #ded9d0; --amb-accent: #b87333; --water-deep: #0f1517; --water-mid: #303b3c; --water-tint: #3e4740; --sun: #6f6353; } /* ===================== RESET / BASE ===================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--amb-bg); color: var(--fg); font-family: var(--body); font-size: var(--fs-body); font-weight: 300; line-height: 1.62; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--t-amb) linear, color var(--t-amb) linear; } body.is-locked { overflow: hidden; } img, svg, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { margin: 0; font-weight: 300; } p { margin: 0 0 1.1em; } ul, dl { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--copper); color: #14171a; } :focus-visible { outline: 1px solid var(--amb-accent); outline-offset: 4px; } .skip { position: fixed; top: -100px; left: var(--gut); z-index: 999; background: var(--copper); color: #14171a; padding: .7rem 1.2rem; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; } .skip:focus { top: 1rem; } /* ===================== TYPE HELPERS ===================== */ .mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; } .eyebrow { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--amb-accent); margin: 0 0 1.6rem; transition: color var(--t-amb) linear; } .shead { max-width: 74ch; margin: 0 0 clamp(3rem, 7vh, 6rem); } .shead--wide { max-width: 88ch; } .shead__h { font-family: var(--display); font-size: var(--fs-h2); font-variation-settings: 'opsz' 120, 'SOFT' 40, 'WONK' 1; line-height: 1.02; letter-spacing: -0.022em; margin: 0 0 1.6rem; text-wrap: balance; } .shead__h--xl { font-size: var(--fs-xl); } .lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--fg-dim); max-width: 52ch; font-weight: 300; } .prose p { max-width: var(--readw); color: var(--fg-dim); } .prose p:first-child { color: var(--fg); } .disclaimer { color: var(--fg-faint); letter-spacing: 0.1em; margin-top: clamp(2rem, 4vh, 3.5rem); max-width: 70ch; line-height: 1.9; } /* ===================== LAYOUT ===================== */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .section { position: relative; padding: var(--sect) 0; } .section + .section { border-top: 1px solid var(--rule-soft); } /* ===================== GRAIN ===================== */ .grain { position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainshift 7s steps(6) infinite; } /* ===================== NAV ===================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1rem, 2vh, 1.7rem) var(--gut); transition: background-color var(--t-med) var(--ease), backdrop-filter var(--t-med), padding var(--t-med) var(--ease); } .nav.is-stuck { background: color-mix(in srgb, var(--amb-bg) 78%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); padding-top: .85rem; padding-bottom: .85rem; } .nav__mark { display: block; flex: 0 0 auto; } .nav__logo { height: clamp(20px, 2.4vw, 27px); width: auto; } .nav__logotype, .footer__logotype { font-family: var(--display); font-size: 1.28rem; letter-spacing: -0.02em; font-variation-settings: 'opsz' 40, 'SOFT' 60; } .nav__links { display: flex; gap: clamp(1.1rem, 2.1vw, 2.4rem); } .nav__link { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); position: relative; padding: .35rem 0; transition: color var(--t-fast) var(--ease); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--amb-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); } .nav__link:hover { color: var(--fg); } .nav__link.is-active { color: var(--fg); } .nav__link.is-active::after { transform: scaleX(1); } .nav__end { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; } .nav__progress { position: absolute; left: 0; bottom: 0; height: 1px; background: var(--amb-accent); width: 0%; opacity: .55; } @media (max-width: 1020px) { .nav__links { display: none; } .nav__cta { display: none; } } @media (min-width: 1021px) { .burger { display: none; } } .burger { width: 34px; height: 22px; position: relative; } .burger span { position: absolute; left: 0; height: 1px; width: 100%; background: var(--fg); transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); } .burger span:nth-child(1) { top: 7px; } .burger span:nth-child(2) { top: 14px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(10deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-10deg); } /* ===================== MOBILE MENU ===================== */ .menu { position: fixed; inset: 0; z-index: 480; background: var(--amb-bg); display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--gut) 3rem; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-out); pointer-events: none; } .menu.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; } .menu__links { display: flex; flex-direction: column; gap: .3rem; } .menu__link { font-family: var(--display); font-size: clamp(2rem, 9vw, 3.4rem); font-variation-settings: 'opsz' 90, 'SOFT' 50; line-height: 1.16; letter-spacing: -0.02em; opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), color var(--t-fast); } .menu.is-open .menu__link { opacity: 1; transform: none; } .menu__link:hover { color: var(--amb-accent); } .menu__cta { margin-top: 2.6rem; align-self: flex-start; } .menu__meta { margin-top: 2.4rem; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); } /* ===================== FOOTER ===================== */ .footer { padding: clamp(4rem, 9vh, 7rem) 0 clamp(1.6rem, 3vh, 2.4rem); border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--amb-bg) 92%, #000); } .footer__top { display: grid; grid-template-columns: minmax(260px, 1.1fr) 2fr; gap: clamp(2.4rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vh, 5rem); } .footer__logo { height: 26px; width: auto; margin-bottom: 1.6rem; } .footer__statement { max-width: 30ch; color: var(--fg-dim); } .footer__address { color: var(--fg-faint); } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer__coltitle { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amb-accent); margin-bottom: 1.3rem; } .footer__cols li { margin-bottom: .55rem; } .footer__cols a { color: var(--fg-dim); transition: color var(--t-fast); } .footer__cols a:hover { color: var(--fg); } .footer__base { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-top: 1.6rem; border-top: 1px solid var(--rule-soft); color: var(--fg-faint); } .footer__legal { display: flex; gap: 1.6rem; } .footer__legal a { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); transition: color var(--t-fast); } .footer__legal a:hover { color: var(--fg); } @media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; } } /* ===================== FATAL ===================== */ .fatal { position: fixed; inset: auto var(--gut) 2rem var(--gut); z-index: 950; border: 1px solid var(--copper); background: #14171a; color: var(--paper); padding: 1.4rem 1.6rem; max-width: 620px; } .fatal code { color: var(--copper-hi); }