/* ── 74 Labs · light blend v2 ─────────────────────────────────────── */ :root{ --ink:#131211; --ink-2:#3B3833; --muted:#5E5A53; --soft:#8B877E; --faint:#A5A096; --bone:#F1EEE7; --bone-2:#F4F1EB; --line:#E2DED4; --line-2:#EDE9E0; --border:#DCD8CE; --tint:19%; /* strength of the address-pill glow */ --tintn:.19; /* the same value, unitless, for the alpha maths */ /* ── load sequence ────────────────────────────────────────────── Reveal blocks run on --d (see .reveal): badge .05, headline .14/.22, subhead .32, addresses .40, buttons .52, strip .62, each over .75s. The two hand-drawn marks come after, in reading order: the underline under the subhead first, then the arrow between the addresses. */ --t-underline:1.05s; --t-arrow:1.62s; --t-arrowhead:2.02s; --shell:1440px; --navh:72px; /* the sticky bar, so surfaces can reach behind it */ --pad:44px; --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } *,*::before,*::after{box-sizing:border-box} /* Rubber-band overscroll reveals the canvas, which is painted from . A two-stop gradient does NOT work here: backgrounds tile by default, so past the top edge the browser repeats the gradient and you see the white half again — which is the gap. Kill the bounce instead, and keep the ink canvas underneath as the fallback for anything that ignores it. */ html,body{overscroll-behavior-y:none} html{scroll-behavior:smooth;background:var(--ink)} body{ margin:0;background:#fff;color:var(--ink); font-family:var(--sans);font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} .shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);width:100%} /* ── fine grain over the whole page ────────────────────────────── Paper-like texture. Without it a bone-and-white palette renders as flat default-white, which is what makes a light page feel cheap. */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.038; background-size:170px 170px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* counters are wrapped in / only to be addressable — no styling */ [data-count]{font-style:normal;font-weight:inherit;font-variant-numeric:tabular-nums} /* ── staged entrance ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(16px)} html.ready .reveal{opacity:1;transform:none; transition:opacity .75s cubic-bezier(.2,.7,.25,1) var(--d,0s), transform .75s cubic-bezier(.2,.7,.25,1) var(--d,0s)} /* ── type ── */ .display{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;margin:0} .h2{font-size:52px;line-height:.98} .h2-sm{font-size:44px;line-height:1} /* Headline is locked to exactly two lines. The divisor is the measured width of the longest line at font-size 1 (13.6em) plus ~5% slack — so it is a property of the words, and a translation that runs longer needs its own. Italian measures 15.7 against English's 13.3; 17 keeps the same slack. Getting this wrong does not wrap, it overflows the viewport, because the spans below are nowrap and .hero is a flex column that lets them grow. */ .hero-h1{--h1-fit:14.3; font-size:min(94px, calc((100vw - 100px) / var(--h1-fit))); line-height:.95;letter-spacing:-.045em;text-align:center} [lang="it"] .hero-h1{--h1-fit:17} .hero-h1>span{display:block;white-space:nowrap} .center{text-align:center} .narrow{max-width:640px;margin-inline:auto} .light{color:#fff} .lead{color:var(--muted);font-size:17px;line-height:1.65;margin:0} .ink{color:var(--ink)} .mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--soft);line-height:1.3} .mono-label.tight{letter-spacing:.14em;font-size:10px} .mono-label.soft{color:var(--soft)} .mono-num{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em} /* ── mark on the income phrase ──────────────────────────────────── A brush swash in the logo's idiom: one smooth curve, constant width, round caps, aspect ratio locked so it scales with the type. */ .hero-sub .inc{font-style:normal;white-space:nowrap;position:relative;display:inline-block; color:var(--ink);font-weight:600} .inc .mark{position:absolute;pointer-events:none;color:var(--ink);left:-.16em;right:-.16em;width:auto} .mk-u{bottom:-.18em;height:auto} /* the mark draws itself on, left to right, after the hero has settled */ .inc .mark{clip-path:inset(0 100% 0 0)} html.ready .inc .mark{animation:drawmark .62s cubic-bezier(.3,.7,.3,1) forwards var(--t-underline)} @keyframes drawmark{to{clip-path:inset(0 -2% 0 0)}} /* ── buttons ── */ /* .btn was written for ; on a real