/* ══════════════════════════════════════════════════════════════════ HOST MARGIN — design system Editorial light + cinematic dark. One accent hue per page. ══════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ─────────────────────────────────────────────────── */ :root { /* Surface. Warm off-white so photography sits on it without glare. */ --paper: #F5F4F1; --paper-2: #EDEBE6; --paper-3: #E3E0D9; --ink: #0B0C0D; --ink-2: #17191B; --ink-3: #24272A; --mute: #6C6F73; --mute-2: #93969A; --line: rgba(11,12,13,.13); --line-2: rgba(11,12,13,.07); /* Accent — overridden per page on . Cobalt default. */ --accent: #2F4BFF; --accent-in:#FFFFFF; /* text on accent */ --accent-w: rgba(47,75,255,.12); /* Type */ --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --serif:'Instrument Serif', 'Times New Roman', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --t-mega: clamp(3.4rem, 12.5vw, 13rem); --t-hero: clamp(2.9rem, 8.6vw, 8.4rem); --t-h2: clamp(2.1rem, 5.2vw, 4.6rem); --t-h3: clamp(1.35rem, 2.3vw, 2.05rem); --t-lead: clamp(1.06rem, 1.45vw, 1.42rem); --t-body: clamp(.98rem, 1.02vw, 1.08rem); --t-meta: clamp(.66rem, .78vw, .76rem); /* Rhythm */ --gut: clamp(18px, 3.6vw, 46px); --wrap: 1560px; --sec: clamp(88px, 12vw, 190px); --r: 14px; /* Motion */ --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.66,0,.24,1); --dur: .78s; /* Live values written by js/hm.js */ --vel: 0; /* smoothed scroll velocity, -1 … 1 */ --avel: 0; /* absolute velocity, 0 … 1 */ --mx: 50%; /* pointer x within nearest field */ --my: 50%; --scroll:0; /* page progress 0 … 1 */ color-scheme: light; } /* Per-page accents. Each measured ≥4.5:1 on --paper. */ [data-theme="home"] { --accent:#2F4BFF; --accent-w:rgba(47,75,255,.12); } [data-theme="services"] { --accent:#00786A; --accent-w:rgba(0,120,106,.12); } [data-theme="process"] { --accent:#C43C1B; --accent-w:rgba(196,60,27,.12); } [data-theme="pricing"] { --accent:#6B31C9; --accent-w:rgba(107,49,201,.12); } [data-theme="contact"] { --accent:#0A6E96; --accent-w:rgba(10,110,150,.12); } /* Dark passages flip the surface, keep the hue. */ .inv { --paper:#0B0C0D; --paper-2:#131517; --paper-3:#1C1F21; --ink:#F5F4F1; --ink-2:#E6E4DE; --ink-3:#CFCCC4; --mute:#9DA0A4; --mute-2:#75787C; --line:rgba(245,244,241,.16); --line-2:rgba(245,244,241,.08); background:var(--paper); color:var(--ink); } [data-theme="home"] .inv { --accent:#7A8CFF; } [data-theme="services"] .inv { --accent:#3FCBB0; } [data-theme="process"] .inv { --accent:#FF7A52; } [data-theme="pricing"] .inv { --accent:#B18CFF; } [data-theme="contact"] .inv { --accent:#4FC3E8; } /* ── 2. Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; } * { margin:0; padding:0; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* clip, not hidden — `hidden` turns into a scroll container and silently kills every animation-timeline:view() on the page. */ overflow-x:clip; } body { font-family:var(--sans); font-size:var(--t-body); line-height:1.55; font-weight:400; color:var(--ink); background:var(--paper); overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis-weight:none; } img, video, canvas, svg { display:block; max-width:100%; } img, video { height:auto; } a { color:inherit; text-decoration:none; } button, input, textarea, select { font:inherit; color:inherit; background:none; border:0; } button { cursor:pointer; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } ::selection { background:var(--accent); color:var(--accent-in); } /* ── 3. Type ───────────────────────────────────────────────────── */ h1,h2,h3,h4 { font-weight:600; letter-spacing:-.035em; line-height:.94; text-wrap:balance; } .mega { font-size:var(--t-mega); letter-spacing:-.05em; line-height:.82; } .hero-t { font-size:var(--t-hero); letter-spacing:-.045em; line-height:.86; } h2 { font-size:var(--t-h2); } h3 { font-size:var(--t-h3); letter-spacing:-.025em; line-height:1.08; } .lead { font-size:var(--t-lead); line-height:1.42; color:var(--mute); max-width:48ch; text-wrap:pretty; } .em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.015em; } .meta { font-family:var(--mono); font-size:var(--t-meta); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); } .accent { color:var(--accent); } p + p { margin-top:.9em; } /* ── 4. Layout ─────────────────────────────────────────────────── */ .wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); } .sec { padding-block:var(--sec); position:relative; } .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); } .bleed { width:100%; position:relative; } .stack { display:flex; flex-direction:column; } .row { display:flex; align-items:center; } .gap-s{gap:10px}.gap-m{gap:20px}.gap-l{gap:38px} .mt-s{margin-top:16px}.mt-m{margin-top:34px}.mt-l{margin-top:64px} .c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6} .c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-12{grid-column:span 12} @media (max-width:900px){ .grid{grid-template-columns:repeat(6,1fr)} .c-4,.c-5,.c-6,.c-7,.c-8,.c-12{grid-column:span 6} } /* Section eyebrow: index number + rule + label. */ .eyebrow { display:flex; align-items:center; gap:16px; margin-bottom:34px; } .eyebrow .n { font-family:var(--mono); font-size:var(--t-meta); color:var(--accent); font-weight:500; } .eyebrow .r { flex:1; height:1px; background:var(--line); transform-origin:left; transform:scaleX(var(--in,0)); transition:transform 1.1s var(--ease) .1s; } .eyebrow.in .r { --in:1; } /* ── 5. Reveal primitives ──────────────────────────────────────── */ /* Everything below is opt-in via a data attribute so a section can stack several at once — that is the point: multiple things move together. */ [data-rv] { --p:0; } [data-rv].in { --p:1; } /* Without script nothing ever adds .in, and a clip-based reveal would stay invisible for good. The inline flag in means this only ever applies when script is genuinely off. */ html:not(.js) [data-rv] { --p:1; } html:not(.js) .ln > i, html:not(.js) .wd > i { transform:none; } html:not(.js) .eyebrow .r { --in:1; } html:not(.js) .hero-bg::before { content:''; position:absolute; inset:0; z-index:1; background:url("../img/smoke-poster.jpg") center/cover no-repeat; } [data-rv="up"] { opacity:var(--p); transform:translate3d(0,calc((1 - var(--p)) * 46px),0); transition:opacity .9s var(--ease), transform 1.05s var(--ease); } [data-rv="fade"] { opacity:var(--p); transition:opacity 1.2s var(--ease); } [data-rv="mask"] { clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0); transform:translate3d(0,calc((1 - var(--p)) * 20px),0); transition:clip-path 1.15s var(--ease), transform 1.15s var(--ease); } [data-rv="wipe"] { clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0); transition:clip-path 1.25s var(--ease-io); } [data-rv="scale"] { opacity:var(--p); transform:scale(calc(.94 + var(--p) * .06)); transition:opacity 1s var(--ease), transform 1.3s var(--ease); } [data-rv="blur"] { opacity:var(--p); filter:blur(calc((1 - var(--p)) * 14px)); transform:translate3d(0,calc((1 - var(--p)) * 24px),0); transition:opacity 1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); } [data-delay] { transition-delay:calc(var(--d,0) * 1ms); } /* Line-by-line heading reveal — hm.js wraps each line in .ln > i */ .ln { display:block; overflow:hidden; } .ln > i { display:block; font-style:inherit; transform:translate3d(0,105%,0) rotate(2.2deg); transition:transform 1.05s var(--ease); transition-delay:calc(var(--i,0) * 75ms); } [data-rv].in .ln > i, .split.in .ln > i { transform:translate3d(0,0,0) rotate(0); } /* Word-level stagger */ .wd { display:inline-block; overflow:hidden; vertical-align:top; } .wd > i { display:inline-block; font-style:inherit; transform:translate3d(0,110%,0); transition:transform .9s var(--ease); transition-delay:calc(var(--i,0) * 34ms); } .split.in .wd > i { transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-rv]{--p:1 !important} .ln > i,.wd > i{transform:none !important} } /* ── 6. Scroll-driven (native timeline) ────────────────────────── */ @supports (animation-timeline:view()) { @media (prefers-reduced-motion:no-preference) { /* Slow drift on media as it crosses the viewport. */ .drift { animation:drift linear both; animation-timeline:view(); animation-range:cover; } .drift-s{ animation:drift-s linear both; animation-timeline:view(); animation-range:cover; } .zoomo { animation:zoomo linear both; animation-timeline:view(); animation-range:cover; } .rot { animation:rot linear both; animation-timeline:view(); animation-range:cover; } .grow { animation:grow linear both; animation-timeline:view(); animation-range:entry 0% cover 44%; } .bar { animation:bar linear both; animation-timeline:scroll(root); } } } @keyframes drift { from{transform:translate3d(0,-9%,0)} to{transform:translate3d(0,9%,0)} } @keyframes drift-s { from{transform:translate3d(0,-4.5%,0)}to{transform:translate3d(0,4.5%,0)} } @keyframes zoomo { from{transform:scale(1.22)} to{transform:scale(1.02)} } @keyframes rot { from{transform:rotate(-3.5deg) scale(1.06)} to{transform:rotate(3.5deg) scale(1.06)} } @keyframes grow { from{transform:scaleX(0)} to{transform:scaleX(1)} } @keyframes bar { from{transform:scaleX(0)} to{transform:scaleX(1)} } /* ── 7. Chrome: nav, progress, cursor ──────────────────────────── */ .nav { position:fixed; inset:0 0 auto 0; z-index:60; padding:16px var(--gut); display:flex; align-items:center; justify-content:space-between; transition:transform .55s var(--ease), background .4s linear, backdrop-filter .4s linear; } .nav::before { content:''; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--paper) 74%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); opacity:0; transition:opacity .45s var(--ease); } .nav.stuck::before { opacity:1; } .nav.hide { transform:translate3d(0,-105%,0); } .brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.03em; font-size:1.02rem; } .brand .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); animation:pulse 3.4s var(--ease) infinite; } @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.62);opacity:.55} } .nav-links { display:flex; align-items:center; gap:clamp(14px,2.2vw,32px); } .nav-links a:not(.btn) { font-size:.86rem; font-weight:500; color:var(--ink); position:relative; padding:5px 1px; letter-spacing:-.01em; } .nav-links a:not(.btn)::after { content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); } .nav-links a:not(.btn):hover::after, .nav-links a[aria-current]::after { transform:scaleX(1); transform-origin:left; } .nav-links a[aria-current] { color:var(--accent); } @media (max-width:720px){ .nav-links .hide-s{display:none} } .prog { position:fixed; inset:auto 0 0 0; height:2px; z-index:61; background:var(--accent); transform-origin:left; transform:scaleX(0); } /* Cursor: one element. A ring that thickens with velocity and swallows a label over media. No second dot — that pairing is everywhere. */ .cur { position:fixed; top:0; left:0; z-index:90; pointer-events:none; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1.5px solid var(--accent); mix-blend-mode:difference; filter:invert(1); transition:width .42s var(--ease), height .42s var(--ease), margin .42s var(--ease), background .3s linear, border-color .3s linear, opacity .3s linear; display:grid; place-items:center; opacity:0; } .cur.on { opacity:1; } .cur.lg { width:88px; height:88px; margin:-44px 0 0 -44px; background:var(--accent); border-color:transparent; } .cur.sm { width:11px; height:11px; margin:-5.5px 0 0 -5.5px; background:var(--accent); } .cur .lb { font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-in); opacity:0; transform:scale(.7); transition:opacity .3s, transform .3s var(--ease); white-space:nowrap; } .cur.lg .lb { opacity:1; transform:none; } @media (hover:none),(pointer:coarse){ .cur{display:none} } html.has-cur, html.has-cur * { cursor:none; } html.has-cur input, html.has-cur textarea { cursor:none; } /* ── 8. Buttons ────────────────────────────────────────────────── */ .btn { position:relative; display:inline-flex; align-items:center; gap:11px; padding:15px 26px; border-radius:100px; font-size:.9rem; font-weight:500; letter-spacing:-.012em; overflow:hidden; isolation:isolate; white-space:nowrap; transition:color .38s var(--ease), border-color .38s var(--ease); } .btn::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; transform:translate3d(0,101%,0); transition:transform .55s var(--ease); } .btn:hover::before { transform:none; } .btn-primary { background:var(--accent); color:var(--accent-in); } .btn-primary::before { background:var(--ink); } .btn-primary:hover { color:var(--paper); } .btn-ghost { border:1px solid var(--line); color:var(--ink); } .btn-ghost::before { background:var(--ink); } .btn-ghost:hover { color:var(--paper); border-color:var(--ink); } .btn .ar { transition:transform .5s var(--ease); } .btn:hover .ar { transform:translate3d(4px,-4px,0); } /* Text link with a travelling rule. */ .tl { position:relative; display:inline-flex; align-items:center; gap:9px; font-weight:500; } .tl::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(var(--u,1)); transform-origin:right; transition:transform .55s var(--ease); } .tl:hover::after { animation:tl-sweep .62s var(--ease); } @keyframes tl-sweep { 0%{transform:scaleX(1);transform-origin:right} 49%{transform:scaleX(0);transform-origin:right} 50%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} } /* ── 9. Media ──────────────────────────────────────────────────── */ .fig { position:relative; overflow:hidden; border-radius:var(--r); background:var(--paper-3); } picture { display:contents; } .fig img, .fig video { width:100%; height:100%; object-fit:cover; } .fig.r-0 { border-radius:0; } .fig.a-16 { aspect-ratio:16/9; } .fig.a-43 { aspect-ratio:4/3; } .fig.a-34 { aspect-ratio:3/4; } .fig.a-11 { aspect-ratio:1/1; } .fig.a-21 { aspect-ratio:21/9; } /* difference-blend captions vanish on mid-tone photographs, so give the label its own ground rather than borrowing the image's. */ .fig .cap { position:absolute; left:12px; bottom:11px; z-index:4; font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(8,9,10,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:6px 11px; border-radius:100px; line-height:1; } /* Grain — one repeating SVG, no network hit. */ .grain::after { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml;utf8,"); mix-blend-mode:overlay; } /* ── 10. Swap field — the background image sequence ────────────── */ /* Several photographs stacked; scroll progress crossfades and slides between them. Driven by hm.js writing --k on the field. */ .swap { position:relative; overflow:hidden; background:var(--ink); } .swap .lyr { position:absolute; inset:0; opacity:0; transition:opacity .95s var(--ease-io), transform 1.5s var(--ease); will-change:opacity, transform; } .swap .lyr img { width:100%; height:100%; object-fit:cover; } /* Per-photograph darkening, computed at build time from the image itself. */ .swap .lyr::after { content:''; position:absolute; inset:0; background:rgba(8,9,10,var(--scrim,0)); pointer-events:none; } .swap .lyr[data-dir="up"] { transform:translate3d(0,7%,0) scale(1.1); } .swap .lyr[data-dir="down"] { transform:translate3d(0,-7%,0) scale(1.1); } .swap .lyr[data-dir="left"] { transform:translate3d(6%,0,0) scale(1.1); } .swap .lyr[data-dir="right"] { transform:translate3d(-6%,0,0) scale(1.1); } .swap .lyr[data-dir="zoom"] { transform:scale(1.24); } .swap .lyr.on { opacity:1; transform:translate3d(0,0,0) scale(1.02); } /* Two layers: a vertical wash plus a vignette. A single soft gradient is not enough once a bright photograph turns up in the sequence. */ .swap .veil { position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(8,9,10,.70) 0%, rgba(8,9,10,.42) 40%, rgba(8,9,10,.82) 100%), radial-gradient(130% 96% at 50% 46%, rgba(8,9,10,0) 0%, rgba(8,9,10,.52) 100%); } /* Text sitting on the field carries its own lift so it never depends on whichever photograph happens to be showing. */ .swap .body h2, .swap .body p, .swap .body a { text-shadow:0 1px 26px rgba(0,0,0,.42); } .swap .body { position:relative; z-index:3; } /* Progress ticks down the right edge of a swap field. */ .swap-ix { position:absolute; right:var(--gut); top:50%; translate:0 -50%; z-index:4; display:flex; flex-direction:column; gap:9px; } .swap-ix b { display:block; width:1px; height:26px; background:rgba(255,255,255,.28); position:relative; overflow:hidden; } .swap-ix b::after { content:''; position:absolute; inset:0; background:#fff; transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease); } .swap-ix b.on::after { transform:scaleY(1); } @media (max-width:720px){ .swap-ix{display:none} } /* ── 11. Marquee ───────────────────────────────────────────────── */ .mq { overflow:hidden; display:flex; user-select:none; } .mq-t { display:flex; flex:0 0 auto; align-items:center; gap:var(--mq-gap,44px); padding-right:var(--mq-gap,44px); will-change:transform; } .mq-t > * { flex:0 0 auto; } .mq-txt { font-size:clamp(2.6rem,7vw,7rem); font-weight:600; letter-spacing:-.045em; line-height:1; } .mq-txt .o { -webkit-text-stroke:1px var(--ink); color:transparent; } .mq img { height:clamp(120px,17vw,230px); width:auto; border-radius:10px; object-fit:cover; } /* ── 12. Cards & rows ──────────────────────────────────────────── */ .card { position:relative; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,34px); overflow:hidden; isolation:isolate; transition:border-color .5s var(--ease), transform .6s var(--ease); background:var(--paper); } .card::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--accent-w); opacity:0; transition:opacity .5s var(--ease); } .card:hover { border-color:var(--accent); transform:translate3d(0,-4px,0); } .card:hover::before { opacity:1; } /* An expanding list row — services read as a directory, not a card grid. */ .rowx { border-top:1px solid var(--line); position:relative; } .rowx:last-child { border-bottom:1px solid var(--line); } .rowx > button { width:100%; display:flex; align-items:baseline; gap:var(--gut); padding:clamp(22px,2.6vw,38px) 0; text-align:left; } .rowx .ix { font-family:var(--mono); font-size:var(--t-meta); color:var(--mute); flex:0 0 auto; width:34px; } .rowx .ti { font-size:clamp(1.5rem,3.4vw,3rem); font-weight:600; letter-spacing:-.04em; line-height:1; flex:1; transition:transform .55s var(--ease), color .4s linear; } .rowx .pr { font-family:var(--mono); font-size:.8rem; color:var(--mute); flex:0 0 auto; } .rowx:hover .ti { transform:translate3d(12px,0,0); color:var(--accent); } .rowx .pl { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); } .rowx[data-open] .pl { grid-template-rows:1fr; } .rowx .pl > div { overflow:hidden; } .rowx .pl .in2 { padding-bottom:clamp(24px,3vw,44px); display:grid; grid-template-columns:34px 1fr 1fr; gap:var(--gut); } @media (max-width:820px){ .rowx .pl .in2{grid-template-columns:1fr} .rowx .pr{display:none} } /* The row's own photograph, revealed under the cursor on hover. */ .rowx .peek { position:absolute; z-index:5; width:230px; aspect-ratio:4/3; border-radius:9px; overflow:hidden; pointer-events:none; opacity:0; transform:scale(.86) rotate(-4deg); transition:opacity .4s var(--ease), transform .55s var(--ease); left:var(--mx); top:var(--my); margin:-86px 0 0 -115px; } .rowx:hover .peek { opacity:1; transform:scale(1) rotate(0); } .rowx .peek img { width:100%; height:100%; object-fit:cover; } @media (max-width:900px){ .rowx .peek{display:none} } /* ── 13. Footer ────────────────────────────────────────────────── */ .foot { background:var(--paper); border-top:1px solid var(--line); padding-block:clamp(56px,7vw,96px) 30px; } .foot-big { font-size:clamp(2.4rem,9vw,9rem); font-weight:600; letter-spacing:-.05em; line-height:.86; } .foot-bot { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; margin-top:clamp(46px,6vw,86px); padding-top:22px; border-top:1px solid var(--line-2); } /* ── 14. Mobile navigation ─────────────────────────────────────── */ .burger { display:none; width:44px; height:44px; margin-right:-10px; align-items:center; justify-content:center; position:relative; z-index:2; } .burger i { display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:background .2s linear .16s; } .burger i::before, .burger i::after { content:''; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink); transition:transform .42s var(--ease), top .22s var(--ease) .2s; } .burger i::before { top:-6px; } .burger i::after { top:6px; } body.menu .burger i { background:transparent; transition-delay:0s; } body.menu .burger i::before { top:0; transform:rotate(45deg); transition-delay:0s,.06s; } body.menu .burger i::after { top:0; transform:rotate(-45deg); transition-delay:0s,.06s; } .sheet { position:fixed; inset:0; z-index:55; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut); gap:2px; clip-path:inset(0 0 100% 0); pointer-events:none; transition:clip-path .72s var(--ease-io); } body.menu .sheet { clip-path:inset(0 0 0 0); pointer-events:auto; } .sheet a { font-size:clamp(2.1rem,10vw,3.4rem); font-weight:600; letter-spacing:-.045em; line-height:1.16; display:block; padding:5px 0; transform:translate3d(0,26px,0); opacity:0; transition:transform .6s var(--ease), opacity .5s var(--ease), color .25s linear; } body.menu .sheet a { transform:none; opacity:1; } .sheet a:nth-child(1){transition-delay:.16s} .sheet a:nth-child(2){transition-delay:.22s} .sheet a:nth-child(3){transition-delay:.28s} .sheet a:nth-child(4){transition-delay:.34s} .sheet a:nth-child(5){transition-delay:.40s} .sheet a[aria-current] { color:var(--accent); } .sheet .fo { margin-top:44px; opacity:0; transition:opacity .5s var(--ease) .48s; } body.menu .sheet .fo { opacity:1; } body.menu { overflow:hidden; } @media (max-width:820px){ .burger { display:flex; } .nav-links { display:none; } } @media (min-width:821px){ .sheet { display:none; } } /* ── 15. Hero ──────────────────────────────────────────────────── */ .hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-bottom:clamp(38px,6vw,84px); overflow:hidden; } .hero-bg { position:absolute; inset:0; z-index:0; background:#08090A; } .hero-bg video, .hero-bg img { width:100%; height:100%; object-fit:cover; } .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,9,10,.72) 0%,rgba(8,9,10,.30) 34%,rgba(8,9,10,.86) 100%); } .hero .wrap { position:relative; z-index:2; width:100%; } .hero-t { color:#F7F6F3; } .hero-sub { color:rgba(247,246,243,.72); } .hero-scroll { position:absolute; left:var(--gut); bottom:18px; z-index:3; display:flex; align-items:center; gap:10px; color:rgba(247,246,243,.6); } .hero-scroll .ln2 { display:block; width:38px; height:1px; background:currentColor; transform-origin:left; animation:sweep 2.6s var(--ease-io) infinite; } @keyframes sweep { 0%{transform:scaleX(0);opacity:0} 40%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1) translateX(38px);opacity:0} } @supports (animation-timeline:view()) { @media (prefers-reduced-motion:no-preference) { .hero-lift { animation:lift linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; } }} @keyframes lift { to { transform:translate3d(0,-70px,0); opacity:.15; filter:blur(5px); } } .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut); border-top:1px solid var(--line); padding-top:26px; } .stats .n { font-size:clamp(1.9rem,3.6vw,3.1rem); font-weight:600; letter-spacing:-.045em; line-height:1; } .stats .l { color:var(--mute); font-size:.84rem; margin-top:7px; } @media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr); gap:26px var(--gut)} } /* ── 16. Work ──────────────────────────────────────────────────── */ .work { display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); } @media (max-width:900px){ .work{grid-template-columns:1fr} } .wk { position:relative; display:block; } .wk .shot { position:relative; overflow:hidden; border-radius:var(--r); aspect-ratio:4/3; background:var(--paper-3); } .wk .shot img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 1.1s var(--ease); } .wk:hover .shot img { transform:scale(1.045); } .wk .go { position:absolute; right:14px; top:14px; z-index:3; width:46px; height:46px; border-radius:50%; background:var(--paper); color:var(--ink); display:grid; place-items:center; transform:scale(0) rotate(-40deg); transition:transform .55s var(--ease); } .wk:hover .go { transform:scale(1) rotate(0); } .wk .hd { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; padding-bottom:14px; border-bottom:1px solid var(--line); } .wk .nm { font-size:clamp(1.25rem,2.2vw,1.75rem); font-weight:600; letter-spacing:-.035em; } .wk .dm { font-family:var(--mono); font-size:.72rem; color:var(--mute); } .wk .tg { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .wk .tg span { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); border:1px solid var(--line); border-radius:100px; padding:5px 11px; } /* ── 17. Utility ───────────────────────────────────────────────── */ .hr { height:1px; background:var(--line); border:0; } .center { text-align:center; } .sr { 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:absolute; top:-60px; left:var(--gut); z-index:100; background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:8px; transition:top .3s var(--ease); } .skip:focus { top:12px; } /* Touch: real tap targets, and drop the hover-only affordances. */ @media (hover:none),(pointer:coarse){ a.btn, button.btn, .nav-links a, .rowx > button { min-height:44px; } .rowx .peek, .cur { display:none !important; } .btn::before { display:none; } .btn-primary:hover { color:var(--accent-in); } .btn-ghost:hover { color:var(--ink); border-color:var(--line); } } /* ── 18. Tick lists ────────────────────────────────────────────── */ .tick { list-style:none; display:grid; gap:11px; } .tick li { position:relative; padding-left:23px; color:var(--mute); font-size:.95rem; line-height:1.45; } .tick li::before { content:''; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--accent); } /* ── 19. Pricing plans ─────────────────────────────────────────── */ .plan { position:relative; border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; transition:border-color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); } .plan:hover { border-color:var(--accent); transform:translate3d(0,-5px,0); } .plan.hi { border-color:var(--ink); box-shadow:0 1px 0 var(--ink) inset, 0 -1px 0 var(--ink) inset; } .plan .tag { position:absolute; top:-11px; left:clamp(24px,2.6vw,38px); background:var(--accent); color:var(--accent-in); font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; padding:5px 11px; border-radius:100px; } .plan .pp { font-size:clamp(2.3rem,4.4vw,3.5rem); font-weight:600; letter-spacing:-.05em; line-height:1; margin-top:12px; } .plan .ps { color:var(--mute); margin-top:8px; font-size:.95rem; } .plan .btn { margin-top:auto; justify-content:center; } .plan .tick { margin-bottom:26px; } /* ── 20. Interactive build demo ────────────────────────────────── */ .bd { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--gut); align-items:start; } @media (max-width:900px){ .bd{grid-template-columns:1fr} } .bd-pick { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .bd-pick button { position:relative; text-align:left; border:1px solid var(--line); border-radius:11px; padding:16px 17px; min-height:44px; overflow:hidden; isolation:isolate; transition:border-color .4s var(--ease), color .3s linear; } .bd-pick button::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .48s var(--ease); } .bd-pick button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-in); } .bd-pick button[aria-pressed="true"]::before { transform:scaleY(1); } .bd-pick b { display:block; font-weight:600; letter-spacing:-.02em; font-size:1.02rem; } .bd-pick span { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; opacity:.62; margin-top:5px; } .bd-meta { display:flex; gap:26px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .bd-meta div b { display:block; font-size:1.45rem; font-weight:600; letter-spacing:-.035em; line-height:1.1; } .bd-log { margin-top:20px; font-family:var(--mono); font-size:.73rem; line-height:1.85; color:var(--mute); min-height:8.5em; } .bd-log p { opacity:0; transform:translate3d(-7px,0,0); transition:opacity .4s var(--ease), transform .4s var(--ease); } .bd-log p.on { opacity:1; transform:none; } .bd-log p .accent { color:var(--accent); } /* The fake browser the layout assembles inside. */ .bd-win { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-2); } .bd-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); } .bd-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); } .bd-url { flex:1; margin-left:8px; font-family:var(--mono); font-size:.68rem; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bd-stage { padding:16px; display:grid; gap:9px; min-height:330px; grid-template-columns:repeat(6,1fr); align-content:start; } .bd-b { background:var(--paper-3); border-radius:7px; min-height:20px; opacity:0; transform:translate3d(0,14px,0) scale(.97); transition:opacity .5s var(--ease), transform .6s var(--ease), background .4s linear; } .bd-b.on { opacity:1; transform:none; } .bd-b.k-accent { background:var(--accent); } .bd-b.k-ink { background:var(--ink); } .bd-b.k-line { background:transparent; border:1px dashed var(--line); } .bd-meter { height:2px; background:var(--line); position:relative; overflow:hidden; } .bd-meter i { position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(0); transition:transform 1.5s var(--ease); } @media (max-width:520px){ .bd-pick{grid-template-columns:1fr} .bd-stage{min-height:250px} } /* ── 21. Brief builder (contact) ───────────────────────────────── */ .brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.68fr); gap:var(--gut); align-items:start; } @media (max-width:960px){ .brief{grid-template-columns:1fr} } .fs { border:0; padding:0; margin-bottom:clamp(30px,4vw,52px); } .fs legend { padding:0; margin-bottom:16px; } .opts { display:grid; gap:10px; } .opts.kinds { grid-template-columns:repeat(2,1fr); } .opts.chips { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); } .opts.chips.two { grid-template-columns:repeat(2,1fr); } @media (max-width:560px){ .opts.kinds,.opts.chips,.opts.chips.two{grid-template-columns:1fr} } .opt { position:relative; text-align:left; border:1px solid var(--line); border-radius:12px; padding:16px 17px 15px 42px; min-height:56px; overflow:hidden; isolation:isolate; transition:border-color .38s var(--ease), transform .4s var(--ease); } .opt::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--accent-w); opacity:0; transition:opacity .38s var(--ease); } .opt:hover { border-color:var(--accent); transform:translate3d(0,-2px,0); } .opt .ok { position:absolute; left:16px; top:19px; width:15px; height:15px; border-radius:50%; border:1.5px solid var(--line); transition:border-color .3s, background .3s; } .opt .ok::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent-in); transform:scale(0); transition:transform .34s var(--ease); } .opt[aria-pressed="true"] { border-color:var(--accent); } .opt[aria-pressed="true"]::before { opacity:1; } .opt[aria-pressed="true"] .ok { border-color:var(--accent); background:var(--accent); } .opt[aria-pressed="true"] .ok::after { transform:scale(1); } .opt b { display:block; font-weight:600; letter-spacing:-.02em; } .opt .sub { display:block; color:var(--mute); font-size:.84rem; margin-top:2px; } .opt .from { display:block; font-family:var(--mono); font-size:.7rem; color:var(--accent); margin-top:6px; } .pages { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .pages input[type=range] { -webkit-appearance:none; appearance:none; flex:1; min-width:200px; height:36px; background:none; } .pages input[type=range]::-webkit-slider-runnable-track { height:2px; background:var(--line); border-radius:2px; } .pages input[type=range]::-moz-range-track { height:2px; background:var(--line); border-radius:2px; } .pages input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); margin-top:-10px; border:3px solid var(--paper); box-shadow:0 0 0 1px var(--accent); transition:transform .2s var(--ease); } .pages input[type=range]:active::-webkit-slider-thumb { transform:scale(1.22); } .pages input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--accent); } .pgv { display:flex; align-items:baseline; gap:10px; } .pgv b { font-size:1.9rem; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .pgv span { font-family:var(--mono); font-size:.72rem; color:var(--mute); } .fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:620px){ .fields{grid-template-columns:1fr} } .fl { display:block; } .fl.wide { grid-column:1 / -1; } .fl > span { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:7px; } .fl > span i { font-style:normal; opacity:.6; text-transform:none; letter-spacing:.04em; } .fl input, .fl textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:14px 15px; background:var(--paper); font-size:1rem; caret-color:var(--accent); resize:vertical; transition:border-color .3s var(--ease), background .3s linear; } .fl input:focus, .fl textarea:focus { outline:none; border-color:var(--accent); background:var(--paper-2); } .fl.bad input, .fl.bad textarea { border-color:#C1281E; } .quote { position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,30px); background:var(--paper-2); } .q-total { font-size:clamp(2.6rem,5vw,3.6rem); font-weight:600; letter-spacing:-.05em; line-height:1; margin-top:10px; font-variant-numeric:tabular-nums; } .q-mo { color:var(--accent); margin-top:7px; } .q-list { margin-top:24px; border-top:1px solid var(--line); } .q-list > div { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:.9rem; } .q-list dt { color:var(--mute); } .q-list dd { font-variant-numeric:tabular-nums; } .q-meta { display:flex; gap:26px; margin-top:20px; flex-wrap:wrap; } .q-meta b { display:block; font-size:1.18rem; font-weight:600; letter-spacing:-.03em; margin-top:3px; } .q-send { width:100%; justify-content:center; margin-top:24px; } .q-note { margin-top:12px; font-size:.86rem; min-height:1.3em; } .q-note.bad { color:#C1281E; } .q-note.good { color:var(--accent); } .q-fine { margin-top:14px; color:var(--mute-2); letter-spacing:.06em; text-transform:none; font-size:.7rem; line-height:1.6; } @media (max-width:960px){ .quote{position:static} } /* ── 22. Process steps ─────────────────────────────────────────── */ /* Explicit columns alternate the sides; below the breakpoint the explicit placement has to be handed back to the flow. */ @media (max-width:900px){ .step .stp-fig, .step .stp-txt { grid-column:1 / -1 !important; } .step .stp-txt { margin-top:-6px; } } /* Centring short copy against a tall figure leaves a lot of dead space; sit it near the top instead and pull the steps closer together. */ .step .stp-txt { align-self:start !important; padding-top:clamp(6px,3vw,44px); }