/* ============================================================ LET MARK COOK — 01 base tokens · reset · type · buttons · nav · cursor · progress ============================================================ */ :root { /* Ground the palette in the photography: Mark is shot against a deep crimson backdrop, so the darks carry a red undertone rather than being neutral black, and the light sections are a warm paper. */ --ink: #0a0506; --char: #14090b; --oxblood: #2a0a0e; --claret: #4a0d14; --bone: #ece5d8; --bone-2: #ddd3c0; --cream: #f7f4ee; --smoke: #8d8279; --flame: #ff5a1f; --ember: #ffa23a; --line: rgba(247,244,238,.14); --line-ink: rgba(10,5,6,.16); --wrap: 1340px; --gutter: 1.25rem; --ease: cubic-bezier(.16,.84,.28,1); --ease-out: cubic-bezier(.2,.9,.3,1); --font-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --nav-h: 4.25rem; --dock-h: 0px; } @media (min-width: 700px) { :root { --gutter: 2.25rem; } } @media (min-width: 1100px) { :root { --gutter: 3.5rem; --nav-h: 5rem; } } *, *::before, *::after { box-sizing: border-box; } /* Any class that sets `display` beats the UA's [hidden] rule on specificity alone — .btn { display: inline-flex } was enough to show every step button at once — so the attribute is made to win outright. */ [hidden] { display: none !important; } /* Parallax offset arrives as a custom property rather than as a written transform, so anything that also needs its own transform can include it here. Overriding this rule means re-stating var(--par-y). */ [data-parallax] { transform: translate3d(0, var(--par-y, 0px), 0); } /* The page scrolls on , and only on . Both the sideways clipping and the rubber-band suppression live here rather than on , and that is deliberate: setting overflow-x on makes its overflow-y compute to `auto`, which turns into a scroll container of its own — one that is exactly as tall as its content and so can never scroll. A wheel or touch drag then lands on , finds nothing to move, and `overscroll-behavior-y: none` stops it chaining up to , which is the element that actually scrolls. The result is a page that scrolls programmatically but not by hand. Keep these two properties off . */ html { overflow-x: hidden; overscroll-behavior-y: none; /* js drives anchor scrolling so it can offset for the nav; native smooth scroll would fight it, so it stays off. */ } body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; margin: 0; padding: 0; } figure, dl, dd { margin: 0; } ::selection { background: var(--flame); color: #fff; } :focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 2px; } .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; } .skip { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .7rem 1.1rem; background: var(--flame); color: #fff; font-weight: 700; font-size: .8rem; border-radius: 2px; transform: translateY(-160%); transition: transform .25s var(--ease); } .skip:focus-visible { transform: none; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(4.5rem, 12vw, 9rem); } /* ---------- type ---------- */ .display { font-family: var(--font-display); font-weight: 400; line-height: .92; letter-spacing: -.025em; text-transform: uppercase; margin: 0; } .h2 { font-size: clamp(2.4rem, 7.5vw, 5.6rem); } .eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); } .lede { font-size: clamp(1.05rem, 2.1vw, 1.4rem); line-height: 1.5; max-width: 34ch; margin: 0; } .note { margin: 1.25rem 0 0; font-size: .9rem; color: var(--smoke); } .hot { color: var(--flame); } /* placeholder prose the client still needs to replace */ .is-placeholder { color: var(--smoke); border-left: 2px dashed rgba(255,90,31,.45); padding-left: 1rem; } /* ---------- buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; background: var(--flame); color: #fff; font-weight: 800; font-size: .84rem; letter-spacing: .04em; border-radius: 999px; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; -webkit-tap-highlight-color: transparent; } /* the fill wipes up from the bottom on hover rather than a colour fade */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); transform: translateY(101%); transition: transform .45s var(--ease); } .btn:hover { box-shadow: 0 .8rem 2.2rem rgba(255,90,31,.28); } .btn:hover::before { transform: none; } .btn:hover { color: var(--ink); } .btn:active { transform: scale(.96); } .btn--lg { padding: 1.1rem 2rem; font-size: .92rem; } .btn--sm { padding: .7rem 1.15rem; font-size: .76rem; } .btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); } .btn--ghost::before { background: var(--cream); } .btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px transparent; } .textlink { display: inline-flex; align-items: center; padding: 0; font-weight: 700; font-size: .88rem; color: var(--cream); background-image: linear-gradient(var(--flame), var(--flame)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size .35s var(--ease), color .3s var(--ease); -webkit-tap-highlight-color: transparent; } .textlink:hover { color: var(--flame); background-size: 100% 2px; } /* ---------- ambient background ---------- */ .bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; } .bg__glow--a { width: 46vw; height: 46vw; left: -12vw; top: 4vh; background: radial-gradient(circle, rgba(74,13,20,.9), transparent 70%); } .bg__glow--b { width: 52vw; height: 52vw; right: -16vw; bottom: -6vh; background: radial-gradient(circle, rgba(255,90,31,.16), transparent 70%); } .bg__stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; } .bg__grain { position: absolute; inset: -50%; opacity: .05; 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"); } /* everything above the ambient field */ .nav, main, .footer, .menu, .lightbox, .booking, .dock, .curtain, .progress { position: relative; z-index: 2; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: var(--gutter); transition: transform .5s var(--ease), background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(10,5,6,.72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--line); } /* hides itself when you scroll down, comes back when you scroll up */ .nav.is-hidden { transform: translateY(-102%); } .nav.is-menu-open { transform: none; background: transparent; backdrop-filter: none; border-color: transparent; } .nav__brand { display: flex; gap: .35em; font-family: var(--font-display); font-size: clamp(.85rem, 2.4vw, 1.05rem); letter-spacing: -.01em; text-transform: uppercase; line-height: 1; } .nav__brand-hot { color: var(--flame); } .nav__brand span { transition: transform .4s var(--ease); } .nav__brand:hover span:nth-child(1) { transform: translateY(-2px); } .nav__brand:hover span:nth-child(2) { transform: translateY(2px); } .nav__brand:hover span:nth-child(3) { transform: translateY(-2px); } .nav__links { display: none; } @media (min-width: 1000px) { .nav__links { display: flex; gap: 2rem; position: absolute; left: 50%; transform: translateX(-50%); } } .nav__link { position: relative; font-size: .8rem; font-weight: 600; color: var(--smoke); padding-block: .4rem; transition: color .3s var(--ease); overflow: hidden; } .nav__link span { display: block; transition: transform .4s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--flame); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .nav__link:hover, .nav__link.is-current { color: var(--cream); } .nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); transform-origin: left; } .nav__link:hover span { transform: translateY(-2px); } .nav__actions { display: flex; align-items: center; gap: .6rem; } .nav__actions .btn { display: none; } @media (min-width: 640px) { .nav__actions .btn { display: inline-flex; } } .burger { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem .5rem .75rem; -webkit-tap-highlight-color: transparent; } .burger__text { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .burger__box { position: relative; width: 1.6rem; height: 1.6rem; display: grid; align-content: center; gap: .34rem; } .burger__box i { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), width .4s var(--ease); transform-origin: center; } .burger:hover .burger__box i:nth-child(2) { width: 65%; } .nav.is-menu-open .burger__box i:nth-child(1) { transform: translateY(.18rem) rotate(45deg); } .nav.is-menu-open .burger__box i:nth-child(2) { transform: translateY(-.18rem) rotate(-45deg); width: 100%; } @media (min-width: 1000px) { .burger__text { display: none; } } /* ---------- read progress ---------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; background: rgba(247,244,238,.08); opacity: 0; transition: opacity .4s var(--ease); } .progress.is-on { opacity: 1; } .progress__bar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--claret), var(--flame), var(--ember)); transform: scaleX(0); transform-origin: left; } /* ---------- custom pointer ---------- */ .cursor { display: none; } @media (hover: hover) and (pointer: fine) { .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s var(--ease); } .cursor.is-on { opacity: 1; } .cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); } .cursor__dot { width: 6px; height: 6px; background: var(--cream); transition: width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease); } .cursor__ring { width: 34px; height: 34px; border: 1px solid rgba(247,244,238,.6); transition: width .4s var(--ease), height .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); } .cursor__label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .25s var(--ease); white-space: nowrap; } /* grown state over media and rails */ .cursor.is-big .cursor__ring { width: 84px; height: 84px; background: var(--cream); border-color: transparent; } .cursor.is-big .cursor__dot { opacity: 0; } .cursor.is-big .cursor__label { opacity: 1; } /* tightened state over links and buttons */ .cursor.is-tight .cursor__ring { width: 52px; height: 52px; background: rgba(247,244,238,.14); border-color: transparent; } body.has-cursor, body.has-cursor * { cursor: none; } /* text entry always keeps a real caret */ body.has-cursor input, body.has-cursor textarea { cursor: auto; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .bg__glow { opacity: .3; } }