/* ============================================================ FLOWCRAFT - design system Mobile-first. Dark "desert night" palette, gold accent, Anton condensed display over Inter body. ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: "Anton"; src: url("assets/fonts/anton.woff2") format("woff2"); /* Single-weight display face. Declare a full range so the design system's heading font-weights (600/700) map to the one master with no faux-bold. */ font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("assets/fonts/inter-var.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Metric-matched fallback to kill font-swap layout shift */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%; } /* ---------- Tokens ---------- */ :root { --bg: #0a0a0b; --bg-raised: #101014; --ink: #eae7e0; --ink-soft: #cfccc4; --muted: #a6a29a; --line: rgba(234, 231, 224, 0.13); --line-bright: rgba(234, 231, 224, 0.3); --gold: #e0a458; --gold-bright: #efbe74; --gold-dim: rgba(224, 164, 88, 0.55); /* Light-chapter roles: the same palette with surface/ink swapped. Paper IS --ink; the darks are warm near-blacks for text on it. */ --paper: var(--ink); --ink-dark: #17150f; --muted-dark: rgba(23, 21, 15, 0.72); --line-dark: rgba(23, 21, 15, 0.16); --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif; --font-display: "Anton", "Impact", "Arial Narrow", system-ui, sans-serif; /* Type: two-pole ladder (see ../references/design-blueprint-x8-adencys.md): a fixed small register + a viewport-scaled display pole, nothing between. Small text never scales with the viewport; only display type does. */ --fs-micro: 0.72rem; --fs-label: 0.8125rem; --fs-body-s: 0.95rem; --fs-body: 1.0625rem; --track-chip: 0.09em; --track-label: 0.14em; --track-wide: 0.18em; --pad: clamp(1.25rem, 3.6vw, 3.25rem); --container: 1480px; --ease-out: cubic-bezier(0.22, 0.7, 0.18, 1); --ease-exp: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Lenis smooth scroll (see script.js), only active on pointer/no-reduced-motion. Lenis adds these classes to while it drives the page; they stop native smooth-scroll and focus() from fighting it. No-ops when Lenis isn't running. (Guard on html.lenis, not .lenis-smooth; Lenis only toggles the latter transiently, and native smooth-scroll must stay off the whole time Lenis drives; script.js also forces this inline whenever GSAP motion is active, because CSS smooth scrolling corrupts ScrollTrigger.refresh() positions.) */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } html.lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--muted); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; letter-spacing: -0.006em; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Film grain over everything (static, costs nothing) */ body::after { content: ""; position: fixed; inset: 0; z-index: 75; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size: 160px 160px; } ::selection { background: var(--gold); color: #0a0a0b; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 600; line-height: 1.1; } p { max-width: 65ch; } a { color: var(--ink); text-decoration: none; transition: color 0.3s var(--ease-out); } a:hover { color: var(--gold); } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; } .container { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.7rem 1.2rem; background: var(--gold); color: #0a0a0b; font-size: var(--fs-label); font-weight: 600; border-radius: 999px; transform: translateY(-300%); } .skip-link:focus { transform: none; color: #0a0a0b; } .accent { color: var(--gold); } /* ============================================================ Header ============================================================ */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--pad); transition: transform 0.5s var(--ease-exp), background-color 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(10, 10, 11, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); } .site-header.is-hidden { transform: translateY(-100%); } /* Without JS the header never learns what's beneath it (no .is-scrolled, no .over-light); keep it on a solid night surface so it stays legible over the light chapter too. */ html:not(.js) .site-header { background: rgba(10, 10, 11, 0.9); border-bottom-color: var(--line); } html.menu-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } /* Over the light chapter (html.over-light, set in script.js) the fixed header inverts to stay legible on paper. Same transition timings. */ html.over-light .site-header.is-scrolled { background: rgba(234, 231, 224, 0.82); border-bottom-color: var(--line-dark); } html.over-light .wordmark, html.over-light .nav-links a { color: var(--muted-dark); } html.over-light .nav-links a:hover, html.over-light .nav-links a[aria-current] { color: var(--ink-dark); } html.over-light .nav-links .nav-cta { border-color: var(--muted-dark); } html.over-light .nav-links .nav-cta:hover, html.over-light .nav-links .nav-cta:focus-visible { border-color: var(--gold); color: #0a0a0b; } html.over-light .burger-box span { background: var(--ink-dark); } html.over-light .cursor-ring { border-color: rgba(23, 21, 15, 0.45); } /* The menu overlay is always night. While it's open the header sits on it, so the inversion must yield even when the page behind is the light chapter. Scoped to the breakpoint where the overlay exists. */ @media (max-width: 879.98px) { html.menu-open.over-light .site-header, html.menu-open.over-light .site-header.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; } html.menu-open.over-light .wordmark { color: var(--ink); } html.menu-open.over-light .burger-box span { background: var(--ink); } } .wordmark { font-family: var(--font-display); font-size: var(--fs-body-s); font-weight: 700; letter-spacing: 0.22em; color: var(--ink); } .wordmark-dot { color: var(--gold); } .header-right { display: flex; align-items: center; gap: 1.1rem; } .nav-links { display: none; align-items: center; gap: 1.9rem; } .nav-links a { position: relative; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding: 0.4rem 0.1rem; } .nav-links a:hover { color: var(--ink); } /* Scrollspy underline: gold rule under the section you're reading. --spy is the live progress through that section (driven by a ScrollTrigger in script.js); it defaults to 1 so the no-motion / no-JS-motion path still gets a full static underline. */ .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; inset-inline: 0.1rem; bottom: 0.05rem; height: 1px; background: var(--gold); opacity: 0; transform: scaleX(var(--spy, 1)); transform-origin: left; transition: opacity 0.3s; } .nav-links a[aria-current] { color: var(--ink); } .nav-links a[aria-current]::after { opacity: 1; } .nav-links .nav-cta { color: var(--ink); border: 1px solid var(--line-bright); border-radius: 999px; padding: 0.55rem 1.15rem; overflow: hidden; z-index: 0; transition: border-color 0.3s, color 0.3s; } /* Gold fill rises from the bottom edge of the pill */ .nav-links .nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gold); transform: translateY(102%); transition: transform 0.45s var(--ease-exp); } .nav-links .nav-cta:hover, .nav-links .nav-cta:focus-visible { border-color: var(--gold); color: #0a0a0b; } .nav-links .nav-cta:hover::before, .nav-links .nav-cta:focus-visible::before { transform: none; } .burger { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; } .burger-box { position: relative; width: 22px; height: 14px; display: block; } .burger-box span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease-exp), top 0.35s var(--ease-exp), bottom 0.35s var(--ease-exp); } .burger-box span:first-child { top: 0; } .burger-box span:last-child { bottom: 0; } /* Closed-state hover: the two lines shear apart, hinting "this opens" */ html:not(.menu-open) .burger:hover .burger-box span:first-child { transform: translateX(3px); } html:not(.menu-open) .burger:hover .burger-box span:last-child { transform: translateX(-3px); } html.menu-open .burger-box span:first-child { top: 6.25px; transform: rotate(45deg); } html.menu-open .burger-box span:last-child { bottom: 6.25px; transform: rotate(-45deg); } @media (min-width: 880px) { .nav-links { display: flex; } .burger { display: none; } } /* ============================================================ Mobile menu overlay ============================================================ */ .menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--pad) 2.5rem; background: #0b0b0e; visibility: hidden; transform: translateY(-102%); transition: transform 0.6s var(--ease-exp), visibility 0s 0.6s; } html.menu-open .menu { visibility: visible; transform: none; transition: transform 0.6s var(--ease-exp), visibility 0s 0s; } html.menu-open { overflow: hidden; } .menu-links { list-style: none; } .menu-links li { overflow: hidden; border-bottom: 1px solid var(--line); } .menu-links a { display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem 0; font-family: var(--font-display); font-size: clamp(2.1rem, 8.5vw, 3.6rem); font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--ink); transform: translateY(115%); transition: transform 0.55s var(--ease-exp); } html.menu-open .menu-links a { transform: none; transition-delay: calc(0.16s + var(--i) * 0.055s); } .menu-num { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); color: var(--gold); } .menu-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-size: var(--fs-body-s); color: var(--muted); } @media (min-width: 880px) { .menu { display: none; } } /* ============================================================ Hero ============================================================ */ .hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: clamp(0.5rem, 1.2vw, 0.9rem); } /* Rounded media frame. Background layers back-to-front: CSS gradient (no-GL fallback) → shader canvas → loop video. Later siblings at the same z-index paint on top, so each layer covers the one below it. */ .hero-frame { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; overflow: clip; border-radius: clamp(1rem, 2vw, 1.75rem); background: radial-gradient(110% 85% at 72% 16%, rgba(33, 36, 86, 0.55), transparent 60%), radial-gradient(85% 70% at 22% 80%, rgba(78, 48, 17, 0.42), transparent 64%), var(--bg); } #gl, .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .hero-video { object-fit: cover; } /* Legibility tint over the video: quiet ceiling under the fixed header, darker floor under the wordmark. The ::after pseudo-element paints after all children, so it sits above the video, below the content. */ .hero-frame::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 10, 11, 0.35), transparent 38%, transparent 58%, rgba(10, 10, 11, 0.55) ); } .hero-main { position: relative; z-index: 1; display: grid; align-items: end; gap: 1.7rem; padding: clamp(1.1rem, 2.6vw, 2.6rem); } /* The rail is narrow, so this often wraps: block display keeps the dot riding the first line instead of hanging beside the block as a bullet. */ .eyebrow { display: block; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-soft); } .eyebrow-dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.55rem; vertical-align: 0.05em; border-radius: 50%; background: var(--gold); } /* The wordmark IS the display type: Anton at viewport scale, hugging the frame floor. Single word, so the house .hw rise plays as one lift. */ .hero-title { font-size: min(18.5vw, 9.5rem); font-weight: 600; line-height: 0.9; letter-spacing: 0.005em; text-transform: uppercase; } .hero-title .line { display: block; overflow: clip; } .hero-title .hw { display: inline-block; } /* Right rail: positioning line, message, CTAs */ .hero-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem; max-width: 34rem; } .hero-sub { max-width: 44ch; font-size: clamp(1rem, 1.1vw + 0.6rem, 1.2rem); color: var(--ink-soft); } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } /* Two-rail layout only once the wordmark (measured ≈4.5em wide) clears the right rail at every width; below this it stacks, wordmark on top. */ @media (min-width: 1080px) { .hero-main { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: clamp(2.5rem, 5vw, 5rem); } .hero-title { font-size: min(11.5vw, 13.5rem); /* Optical: tuck Anton's left side bearing to the padding edge */ margin-left: -0.012em; } .hero-aside { padding-bottom: clamp(0.4rem, 2vh, 1.6rem); } /* The rail rides the video's brightest band on wide screens; add a right-edge scrim on top of the base floor/ceiling tint. */ .hero-frame::after { background: linear-gradient(to left, rgba(10, 10, 11, 0.62), transparent 50%), linear-gradient( to bottom, rgba(10, 10, 11, 0.35), transparent 38%, transparent 58%, rgba(10, 10, 11, 0.55) ); } } /* Hero choreography: CSS-only so it runs before any JS loads. Gated on html.js: with scripts disabled the hero renders static. */ @media (prefers-reduced-motion: no-preference) { /* Title: word-by-word mask rise. Each word climbs out of its line's clip on a cascading delay (--wi set inline in the markup). */ html.js .hero-title .hw { transform: translateY(112%); animation: rise 0.85s var(--ease-exp) forwards; animation-delay: calc(0.1s + var(--wi, 0) * 0.07s); } html.js .eyebrow, html.js .hero-sub, html.js .hero-cta { opacity: 0; animation: fade-up 0.9s var(--ease-exp) forwards; } html.js .eyebrow { animation-delay: 0.28s; } html.js .hero-sub { animation-delay: 0.4s; } html.js .hero-cta { animation-delay: 0.52s; } /* Header items cascade in one by one: wordmark, then each link left→right. (Animating the children, not the header itself, keeps the fill-forwards transform off the bar, so hide-on-scroll owns .site-header's transform untouched.) */ html.js .site-header .wordmark, html.js .site-header .nav-links a, html.js .site-header .burger { opacity: 0; animation: fade-down 0.7s var(--ease-exp) forwards; } html.js .site-header .wordmark { animation-delay: 0.5s; } html.js .site-header .nav-links a:nth-child(1) { animation-delay: 0.62s; } html.js .site-header .nav-links a:nth-child(2) { animation-delay: 0.7s; } html.js .site-header .nav-links a:nth-child(3) { animation-delay: 0.78s; } html.js .site-header .nav-links a:nth-child(4) { animation-delay: 0.86s; } html.js .site-header .nav-links a:nth-child(5) { animation-delay: 0.94s; } html.js .site-header .nav-links a:nth-child(6) { animation-delay: 1.02s; } html.js .site-header .burger { animation-delay: 0.7s; } .eyebrow-dot { animation: pulse 2.6s ease-out infinite; } } @keyframes rise { to { transform: translateY(0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 164, 88, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(224, 164, 88, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 164, 88, 0); } } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.75rem; border-radius: 999px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-chip); white-space: nowrap; transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } .btn-primary { background: var(--gold); color: #0a0a0b; } .btn-primary:hover { background: var(--gold-bright); color: #0a0a0b; } .btn-ghost { border: 1px solid var(--line-bright); color: var(--ink); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ============================================================ Marquee ============================================================ */ .marquee { overflow: clip; border-block: 1px solid var(--line); padding-block: 1.05rem; } .marquee-track { display: flex; width: max-content; } @media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 36s linear infinite; } } .marquee-group { display: flex; align-items: center; gap: 2.8rem; padding-right: 2.8rem; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted); white-space: nowrap; } .marquee .sep { color: var(--gold); font-size: var(--fs-micro); } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ Sections ============================================================ */ .section { padding-block: clamp(5.5rem, 13vw, 10.5rem); } .section-label { display: flex; align-items: center; gap: 0.8rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--gold); } .section-label::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.6; } .section-title { margin: 1.1rem 0 clamp(2.8rem, 7vw, 4.5rem); max-width: 24ch; font-size: clamp(2rem, 5.2vw, 4.75rem); letter-spacing: 0; line-height: 1.04; } /* ============================================================ Fit: who this is for Message-match block for cold-DM traffic. Same hairline-row + asymmetric-grid vocabulary as Services/Work; gold stays a scalpel (label rule + row marks only). ============================================================ */ /* Tighter measure than the default 24ch so the title breaks as "Your brand outgrew / the link in bio." No orphaned last line. */ #fit .section-title { max-width: 19ch; } .fit-grid { display: grid; gap: 2.6rem; } .fit-lede p { max-width: 40ch; font-size: clamp(1.05rem, 1.15vw + 0.65rem, 1.3rem); color: var(--ink-soft); } .fit-lede p + p { margin-top: 1.1rem; } .fit-link { display: inline-flex; align-items: center; gap: 0.55rem; /* margin+padding split keeps the same visual position while the padding grows the tap target */ margin-top: 1.4rem; padding-top: 0.6rem; padding-bottom: 0.35rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); border-bottom: 1px solid var(--gold-dim); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .fit-link:hover { border-bottom-color: var(--gold); } .fit-arrow { display: inline-block; transition: transform 0.45s var(--ease-exp); } .fit-link:hover .fit-arrow, .fit-link:focus-visible .fit-arrow { transform: translateX(5px); } .fit-heading { margin-bottom: 1.1rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); } .fit-list { list-style: none; border-bottom: 1px solid var(--line); } .fit-row { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding-block: 1.35rem; border-top: 1px solid var(--line); } .fit-mark { font-family: var(--font-display); color: var(--gold); line-height: 1.5; } .fit-row p { max-width: 46ch; font-size: var(--fs-body-s); color: var(--ink-soft); } @media (min-width: 900px) { .fit-grid { grid-template-columns: repeat(12, 1fr); } .fit-lede { grid-column: 1 / 6; } .fit-side { grid-column: 7 / 13; } } /* ============================================================ Work ============================================================ */ .work-list { display: grid; gap: clamp(4rem, 10vw, 8rem); } .work-card { display: grid; gap: 1.6rem; } .work-media { position: relative; overflow: hidden; border-radius: 12px; transition: transform 0.8s var(--ease-out); } .work-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 12px; pointer-events: none; } .work-media img { width: 100%; height: auto; } .work-card:hover .work-media { transform: scale(1.015); } /* Live cards: the media itself is the link (global :focus-visible covers it) */ a.work-media { display: block; } .work-index { display: block; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); color: var(--gold); } .work-name { margin: 0.5rem 0 0.9rem; font-size: clamp(1.8rem, 3.2vw, 2.9rem); letter-spacing: 0; } .badge { display: inline-block; vertical-align: 0.35em; margin-left: 0.5rem; padding: 0.28rem 0.7rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); } .work-desc { font-size: var(--fs-body-s); max-width: 48ch; } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; list-style: none; } .tags li { padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-chip); color: var(--muted); } .work-link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; padding-top: 0.6rem; padding-bottom: 0.35rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); border-bottom: 1px solid var(--gold-dim); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .work-link:hover { border-bottom-color: var(--gold); } .work-arrow { display: inline-block; transition: transform 0.45s var(--ease-exp); } .work-link:hover .work-arrow, .work-link:focus-visible .work-arrow { transform: translate(3px, -3px); } @media (min-width: 900px) { .work-card { grid-template-columns: repeat(12, 1fr); align-items: end; gap: 0 2rem; } .work-card .work-media { grid-column: 1 / 8; grid-row: 1; } .work-card .work-info { grid-column: 9 / 13; grid-row: 1; padding-bottom: 0.4rem; } .work-card:nth-child(even) .work-media { grid-column: 6 / 13; } .work-card:nth-child(even) .work-info { grid-column: 1 / 5; } } /* ============================================================ Services ============================================================ */ .svc-list { list-style: none; border-bottom: 1px solid var(--line); } .svc-row { display: grid; gap: 0.7rem; padding-block: clamp(1.8rem, 4.5vw, 3rem); border-top: 1px solid var(--line); } .svc-num { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); color: var(--gold); } .svc-title { font-size: clamp(1.6rem, 3.6vw, 3rem); letter-spacing: 0; transition: transform 0.45s var(--ease-out), color 0.3s; } .svc-desc { font-size: var(--fs-body-s); max-width: 46ch; } .svc-row:hover .svc-title { transform: translateX(10px); color: var(--gold-bright); } @media (min-width: 820px) { .svc-row { grid-template-columns: 5rem 1.25fr 1fr; align-items: start; gap: 2rem; } .svc-num { padding-top: 0.6rem; } } /* ============================================================ Packages: productized pricing (lives on the paper panel) Rate-card vocabulary: hairline rows, Anton prices in dark ink, gold restricted to graphic marks (rules + arrows) per the light-chapter contrast rule. ============================================================ */ .pkg-grid { display: grid; gap: 2.6rem; list-style: none; } .pkg { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--line-dark); padding-top: 1.5rem; } .pkg-name { font-size: var(--fs-body); font-weight: 600; } .pkg-badge { display: inline-block; vertical-align: 0.25em; margin-left: 0.5rem; padding: 0.28rem 0.7rem; border: 1px solid var(--muted-dark); border-radius: 999px; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-dark); } .pkg-price { margin-top: 1.1rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--ink-dark); font-variant-numeric: tabular-nums; } .pkg-from { display: block; margin-bottom: 0.4rem; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted-dark); } .pkg-time { margin-top: 0.55rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted-dark); } .pkg-list { width: 100%; margin-top: 1.5rem; list-style: none; } .pkg-list li { padding-block: 0.6rem; border-top: 1px solid var(--line-dark); font-size: var(--fs-body-s); color: var(--muted-dark); max-width: 36ch; } .pkg-link { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.6rem; padding-block: 0.5rem 0.35rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-dark); border-bottom: 1px solid var(--gold); transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .pkg-arrow { display: inline-block; transition: transform 0.45s var(--ease-exp); } .pkg-link:hover .pkg-arrow, .pkg-link:focus-visible .pkg-arrow { transform: translateX(5px); } .pkg-note { margin-top: clamp(2.2rem, 5vw, 3.5rem); max-width: 58ch; font-size: var(--fs-body-s); color: var(--muted-dark); } /* Founding-rate line - sits between the title and the rate card. */ .pkg-founding { margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 clamp(2rem, 4vw, 3rem); max-width: 62ch; font-size: var(--fs-body-s); color: var(--muted-dark); } .pkg-founding strong { color: var(--ink-dark); font-weight: 600; } @media (min-width: 900px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* CTAs sit on one baseline regardless of list length */ .pkg-link { margin-top: auto; } .pkg-list { margin-bottom: 1.6rem; } } /* ============================================================ Process ============================================================ */ .process-grid { display: grid; gap: 2.4rem; list-style: none; counter-reset: step; } .process-step { border-top: 1px solid var(--line); padding-top: 1.3rem; } .process-num { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold-dim); } @supports not (-webkit-text-stroke: 1px black) { .process-num { color: var(--gold-dim); } } .process-step h3 { margin: 0.9rem 0 0.45rem; font-size: var(--fs-body); font-weight: 600; } .process-step p { font-size: var(--fs-body-s); } @media (min-width: 760px) { .process-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } /* ============================================================ Light chapter: mid-page palette inversion (Services + Process) Full-bleed paper panel; rounded corners let the night bg show at the seams. Gold stays the single accent: graphic marks only, text on paper is always dark ink (contrast). ============================================================ */ .chapter-light { background: var(--paper); border-radius: clamp(1.25rem, 3vw, 2.5rem); color: var(--muted-dark); } .chapter-light h1, .chapter-light h2, .chapter-light h3 { color: var(--ink-dark); } .chapter-light .section-label { color: var(--ink-dark); } .chapter-light .section-label::before { background: var(--gold); opacity: 1; } .chapter-light .svc-list { border-bottom-color: var(--line-dark); } .chapter-light .svc-row { border-top-color: var(--line-dark); } .chapter-light .svc-row:hover .svc-title { color: var(--ink-dark); } .chapter-light .process-step { border-top-color: var(--line-dark); } .chapter-light .process-num { -webkit-text-stroke-color: var(--gold); } @supports not (-webkit-text-stroke: 1px black) { .chapter-light .process-num { color: var(--gold); } } .chapter-light ::selection { background: var(--ink-dark); color: var(--paper); } .chapter-light :focus-visible { outline-color: var(--ink-dark); } /* ============================================================ About ============================================================ */ .about-lede { margin: 1.3rem 0 clamp(3rem, 7vw, 5rem); max-width: 26ch; /* Reading copy, not a heading; keep it in the body face (Anton is display-only) */ font-family: var(--font-body); font-size: clamp(1.55rem, 3.4vw, 2.8rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); } .about-lede .w { display: inline-block; } .about-grid { display: grid; gap: 2.5rem; } .about-portrait { width: min(100%, 380px); border-radius: 12px; } .about-meta { font-size: var(--fs-body); color: var(--ink-soft); max-width: 38ch; } .about-facts { margin-top: 1.8rem; list-style: none; } .about-facts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: var(--fs-body-s); color: var(--ink-soft); } .about-facts li span { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding-top: 0.15rem; } @media (min-width: 900px) { .about-lede { max-width: 30ch; } .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; } } /* ============================================================ Proof / stats ============================================================ */ .proof { border-block: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 5rem); } .proof-grid { display: grid; gap: 2.2rem; } .stat { border-top: 1px solid var(--line); padding-top: 1.3rem; } .stat-value { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-unit { color: var(--gold); } .stat-label { display: block; margin-top: 0.7rem; font-size: var(--fs-body-s); } @media (min-width: 720px) { .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } /* Real-quote testimonial: markup ships commented in index.html until a real quote exists (honesty rule: never invent one). Reading copy, so it stays in the body face; the gold quote mark is decorative. */ .testimonial { margin-top: clamp(2.6rem, 6vw, 4.5rem); border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vw, 3.2rem); } .testimonial blockquote p { max-width: 28ch; font-size: clamp(1.45rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.24; letter-spacing: -0.015em; color: var(--ink); } .testimonial blockquote p::before { content: "\201C\00A0"; color: var(--gold); } .testimonial figcaption { margin-top: 1.4rem; font-size: var(--fs-body-s); color: var(--muted); } .testimonial .t-name { color: var(--ink-soft); font-weight: 600; } /* ============================================================ FAQ: objection handling Native
: works without JS, keyboard-accessible. Questions are reading copy, so they stay in the body face (Anton is display-only); the gold + mark is decorative. ============================================================ */ .faq-list { border-bottom: 1px solid var(--line); } .faq-item { border-top: 1px solid var(--line); } .faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-q { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.006em; line-height: 1.45; color: var(--ink); transition: color 0.3s var(--ease-out); } .faq-item summary:hover .faq-q { color: var(--gold-bright); } .faq-mark { flex: none; font-family: var(--font-display); font-size: 1.15rem; line-height: 1; color: var(--gold); transition: transform 0.35s var(--ease-exp); } .faq-item[open] .faq-mark { transform: rotate(45deg); } .faq-a { max-width: 58ch; padding-bottom: 1.5rem; font-size: var(--fs-body-s); color: var(--ink-soft); } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-a { animation: fade-up 0.45s var(--ease-out); } } .faq-a a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 0.2em; } .faq-a a:hover { color: var(--gold-bright); } /* ============================================================ Contact ============================================================ */ .contact-title { font-size: clamp(2.4rem, 8.6vw, 8rem); line-height: 0.94; letter-spacing: 0.005em; text-transform: uppercase; } .contact-title .line { display: block; overflow: clip; } .contact-title .line-inner { display: inline-block; } .contact-grid { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: clamp(3rem, 7vw, 5rem); } .contact-direct p { max-width: 34ch; font-size: var(--fs-body); color: var(--ink-soft); } /* Assurance microcopy under the intro: quiet risk-reversal */ .contact-assure { margin-top: 0.6rem; font-size: var(--fs-body-s); color: var(--muted); } .btn-wa { margin-top: 1.8rem; } /* Low-commitment path: the free teardown offer */ .contact-alt { margin-top: clamp(2rem, 4.5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); } .contact-alt-label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--gold); } .contact-alt-copy { margin-top: 0.6rem; max-width: 38ch; font-size: var(--fs-body-s); color: var(--muted); } .contact-email { display: block; width: fit-content; margin-top: clamp(1.8rem, 4vw, 2.6rem); /* A contact detail people read/copy; keep it in the readable body face. Display-scale on purpose: the email is the interface, not a footnote. */ font-family: var(--font-body); font-weight: 600; font-size: clamp(1.35rem, 3.4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-dim); text-decoration-thickness: 2px; text-underline-offset: 0.28em; transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out); } .contact-email:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); } .contact-form { display: grid; gap: 1.9rem; align-content: start; } .field label { display: block; margin-bottom: 0.55rem; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); } .field input, .field textarea { width: 100%; padding: 0.7rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-bright); border-radius: 0; color: var(--ink); font: inherit; transition: border-color 0.3s; } .field textarea { resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); } .contact-form .btn { justify-self: start; } .contact-form.is-sending { opacity: 0.65; } /* Submit feedback - empty until the form reports, so it costs no layout. */ .form-status { margin: 0; min-height: 1.4em; font-size: var(--fs-body-s); color: var(--muted); } .form-status.is-ok { color: var(--gold-bright); } .form-status.is-error { color: var(--ink-soft); } @media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================ Footer ============================================================ */ .site-footer { position: relative; overflow: clip; padding: clamp(2rem, 5vw, 4rem) 0 1.6rem; } .footer-ghost { font-family: var(--font-display); font-size: clamp(4rem, 18.5vw, 16rem); font-weight: 700; line-height: 0.9; letter-spacing: 0.02em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(234, 231, 224, 0.16); user-select: none; } @supports not (-webkit-text-stroke: 1px black) { .footer-ghost { color: rgba(234, 231, 224, 0.07); } } .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; margin-top: clamp(1.5rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-label); } .footer-row a { color: var(--muted); padding: 0.3rem 0; } .footer-row a:hover { color: var(--gold); } /* ============================================================ Custom cursor (fine pointers only; JS-driven) ============================================================ */ .cursor { display: none; } @media (hover: hover) and (pointer: fine) { html.has-cursor .cursor { display: block; } html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor input, html.has-cursor textarea, html.has-cursor label { cursor: none; } } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; border-radius: 50%; will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: var(--gold); } .cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(234, 231, 224, 0.4); transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s; } .cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--gold-dim); } /* ============================================================ v2 motion layer: "Awwwards mode" Premium CTA hover · nav underline draw · cinematic work reveal · scroll-velocity marquee · View-cursor · branded load intro. Everything here is opacity/transform/clip-path only, gated on no-preference, and degrades to nothing under reduced-motion (handled in the block below). ============================================================ */ /* ---------- Buttons: sweep + arrow ---------- */ .btn { position: relative; overflow: hidden; } .btn > .btn-label, .btn > .btn-arrow, .btn > svg { position: relative; z-index: 1; } .btn-arrow { display: inline-block; margin-left: -0.1rem; transition: transform 0.45s var(--ease-exp); } .btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(5px); } /* Gold button: a light sweep crosses on hover */ .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%); transform: translateX(-130%); transition: transform 0.7s var(--ease-exp); } .btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(130%); } /* Ghost button: gold wipes in from the left, text flips dark */ .btn-ghost::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-exp); } .btn-ghost:hover::before, .btn-ghost:focus-visible::before { transform: scaleX(1); } .btn-ghost:hover, .btn-ghost:focus-visible { color: #0a0a0b; border-color: var(--gold); } /* ---------- Nav links: underline draw ---------- */ .nav-links a:not(.nav-cta) { position: relative; } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.05rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s var(--ease-exp); } .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left center; } /* Scrollspy: the section you're in keeps its underline (aria-current set in script.js), the same drawn line, just left in place. */ .nav-links a[aria-current="true"] { color: var(--ink); } .nav-links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left center; } html.over-light .nav-links a[aria-current="true"] { color: var(--ink-dark); } .nav-links .nav-cta[aria-current="true"] { border-color: var(--gold); color: var(--gold); } /* ---------- Marquee: skew reacts to scroll velocity (JS-driven) ---------- */ .marquee-inner { will-change: transform; } /* ---------- Custom cursor: "View" state over work cards ---------- */ .cursor-label { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #0a0a0b; opacity: 0; transition: opacity 0.3s var(--ease-out); will-change: transform; } html.cursor-view .cursor-ring { width: 66px; height: 66px; background: var(--gold); border-color: var(--gold); } html.cursor-view .cursor-dot { opacity: 0; } html.cursor-view .cursor-label { opacity: 1; } /* ---------- Branded load intro ---------- First visit per session only (an inline script flips html.intro-done after the first paint, via sessionStorage). Never shown without JS (gated on html.js) or under reduced-motion. Pure CSS so it runs before the deferred scripts: no flash, no dependency on GSAP. */ .intro { display: none; } @media (prefers-reduced-motion: no-preference) { html.js:not(.intro-done) .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--bg); animation: intro-lift 0.6s var(--ease-exp) 0.95s forwards; } html.js:not(.intro-done) .intro-word { position: relative; font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.4rem); font-weight: 700; letter-spacing: 0.26em; color: var(--ink); opacity: 0; transform: translateY(16px); animation: intro-word-in 0.65s var(--ease-exp) 0.12s forwards, intro-word-out 0.45s var(--ease-out) 0.92s forwards; } html.js:not(.intro-done) .intro-word .intro-dot { color: var(--gold); } html.js:not(.intro-done) .intro::after { content: ""; position: absolute; bottom: calc(50% - 2.6rem); height: 1px; width: 0; background: var(--gold); animation: intro-line 0.8s var(--ease-exp) 0.32s forwards; } /* First visit: retime the hero so its choreography is revealed as the curtain lifts, not played behind it. */ html.js:not(.intro-done) .eyebrow { animation-delay: 1.02s; } html.js:not(.intro-done) .hero-title .hw { animation-delay: calc(1.02s + var(--wi, 0) * 0.07s); } html.js:not(.intro-done) .hero-sub { animation-delay: 1.32s; } html.js:not(.intro-done) .hero-cta { animation-delay: 1.44s; } html.js:not(.intro-done) .site-header .wordmark { animation-delay: 1.2s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(1) { animation-delay: 1.32s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(2) { animation-delay: 1.4s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(3) { animation-delay: 1.48s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(4) { animation-delay: 1.56s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(5) { animation-delay: 1.64s; } html.js:not(.intro-done) .site-header .nav-links a:nth-child(6) { animation-delay: 1.72s; } html.js:not(.intro-done) .site-header .burger { animation-delay: 1.4s; } } @keyframes intro-word-in { to { opacity: 1; transform: none; } } @keyframes intro-word-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes intro-line { to { width: min(240px, 42vw); } } @keyframes intro-lift { to { transform: translateY(-100%); visibility: hidden; } } /* ============================================================ Reduced motion: kill everything decorative ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .marquee-track { animation: none !important; } .intro { display: none !important; } /* Loop video never gets a src under reduced motion (script.js checks), but hide it too in case the preference flips mid-session. */ .hero-video { display: none !important; } .marquee-inner { transform: none !important; } html.js .hero-title .hw, html.js .eyebrow, html.js .hero-sub, html.js .hero-cta, html.js .site-header, html.js .site-header .wordmark, html.js .site-header .nav-links a, html.js .site-header .burger { opacity: 1 !important; transform: none !important; animation: none !important; } }