/* ═══ THE STAMP ═══════════════════════════════════════════════════ The opening. Andie's brief, points 2–6: the mark is not placed on the page, it is pressed INTO it, once, and the impression stays. The metaphor is PERMANENCE — luxury deboss, heavy letterpress, industrial pressure. It is NOT cowboy. No fire, no embers, no branding iron, no rope, no barn wood, no Western type, no sparks, no cartoon shake, no rubber-stamp bounce. SIX FRAMES, 1.19s end to end: 1 STILLNESS 0.00–0.14 clean surface, nothing dancing 2 APPROACH 0.14–0.54 enters oversized, directional blur 3 IMPACT 0.54–0.63 lands; the surface answers by ~3px 4 IMPRESSION 0.60–0.80 pressed edge resolves under the mark 5 SETTLE 0.80–1.19 reaction stops, the mark stays 6 ARRIVAL 1.19+ the rest of the hero type staggers in The artwork itself is NEVER modified. Every pressed-edge effect is a CSS filter on the same untouched logo.svg, plus one blurred copy behind it standing in for displaced material. PLAYS ONCE PER VISIT. The .stamp-on class is set by an inline head script guarded on sessionStorage, so returning to the home page from /work/ does not replay it — the stamp is special because we use it once (point 28). No JS, no reduced motion, or a second visit: every rule below is inert and the hero simply renders, finished. ════════════════════════════════════════════════════════════════ */ /* ── Scale: the opening needs guts, and it must sit dead centre ── Point 3 — roughly 60–70% of the useful width on desktop, 82–90% on mobile. Four traps got hit getting here. All four are worth the note. 1. Sizing the PLATE does nothing on its own. logo.svg carries width/height attributes and just sat in the middle of it. 2. sos.css caps the mark with `.wordmark{max-width:min(100%,392px)}`. That 392px ceiling silently swallowed a `width:min(940px,66vw)` and held the mark at 35% of the viewport while every measurement above it read as correct. Lift the max-width alongside the width. 3. THE OFF-CENTRE BUG. Sizing the mark against the VIEWPORT (66vw) while its container is sized by a different chain — plate 74vw, minus 22px plate padding, minus 34px plate-in padding, each side — made the mark 741px wide inside a 720px box. An over-constrained block does not overflow evenly: the browser forces margin-left to 0 and dumps the whole 26px difference into a NEGATIVE margin-right. `margin:auto` stops centring, and the mark sits flush left while hanging off the right edge. It still measured as "66% of viewport" the entire time, which is exactly why it read as correct in numbers and wrong to the eye. Greg caught it by looking at it. The fix is to stop sizing against the viewport at all. The mark is 100% of whatever the plate hands it, so it can never exceed its container and auto margins always centre. The plate governs scale. 4. ON MOBILE THE GUTTER IS THE LIMITER, not the plate. At 375px the chain is 375 − 18 body margin − 2 body border − 44 .wrap gutter = 311px, so a plate set to 96vw never gets near 96vw and the mark lands at 70%. The hero's own gutter and paddings have to give way for the stamp to stay huge on a phone, which is what point 35 asks for. Measured, gaps equal to 0.1px: 64% at 1123px, 58% at 1440x800 (the height guard), 82% on a 375px phone. The 105vh cap is a height guard: the mark is 720x531, so width drives height, and on a short laptop the plate would run well past the fold. max-width SHRINKS the box rather than overflowing it, so centring survives — which is the whole difference between a max-width and a width here. */ .hero{padding-top:clamp(22px,3.4vw,46px);padding-bottom:clamp(18px,2.8vw,38px)} .hero .plate{max-width:min(1020px,74vw)} .hero .wordmark{ width:100%; max-width:min(100%,105vh); margin:clamp(14px,2vw,26px) auto; } @media(max-width:700px){ .hero .wrap{padding-inline:6px} .hero .plate{max-width:100%;padding:7px} .hero .plate-in{padding-left:10px;padding-right:10px} .hero .wordmark{margin:clamp(10px,2vw,18px) auto} } .hero .wordmark img{width:100%;height:auto;max-width:100%} /* ── Room for the mark to land ── The three drifting ornaments were placed for a 700px plate. At the new scale they sit inside the plate on anything under a wide desktop and read as clutter around the one thing that should be landing — "no fifteen things already dancing, give the eye somewhere to land." They keep their corners only where there is genuinely space beside the plate, and they sit further back when they do. */ .hero .orn{display:none} @media(min-width:1240px){ .hero .orn{display:block;opacity:.11} } .wordmark{position:relative;display:block} /* The real mark. The filter pair is the pressed edge: a hard dark line above where material was pushed down, a thin warm catch below where it was pushed up. */ .logo-svg{ position:relative;z-index:2; filter:drop-shadow(0 -1px 1px rgba(0,0,0,.85)) drop-shadow(0 1.5px 0 rgba(226,196,150,.14)); } /* Displaced material — a soft warm-dark halo, slightly larger than the mark and pushed down a few pixels. This is the residual detail from point 6: the thing that quietly says the surface was altered. */ .wm-impress{ position:absolute;left:0;top:0;z-index:1;pointer-events:none; filter:blur(11px) saturate(.35) brightness(.5); opacity:.55;transform:scale(1.015) translateY(4px); } /* ═══ the sequence — only when .stamp-on is on ═══ */ .stamp-on .logo-svg{ animation:sos-press 1.05s cubic-bezier(.19,.86,.24,1) .14s both; transform-origin:50% 46%; } .stamp-on .wm-impress{ animation:sos-impress 1.05s ease-out .14s both; transform-origin:50% 46%; } /* the surface answers the hit — a few pixels, not a shake */ .stamp-on .hero .plate{ animation:sos-surface 1.05s cubic-bezier(.3,.8,.3,1) .14s both; transform-origin:50% 42%; } /* frame 1: the plate is a clean empty surface for a beat */ .stamp-on .plate-in > *:not(.wordmark){ opacity:0;animation:sos-arrive .5s cubic-bezier(.2,.7,.3,1) both; } .stamp-on .plate-in > *:nth-child(1){animation-delay:1.19s} .stamp-on .plate-in > *:nth-child(2){animation-delay:1.25s} .stamp-on .plate-in > *:nth-child(3){animation-delay:1.31s} .stamp-on .plate-in > *:nth-child(5){animation-delay:1.37s} .stamp-on .plate-in > *:nth-child(6){animation-delay:1.43s} .stamp-on .plate-in > *:nth-child(7){animation-delay:1.49s} .stamp-on .plate-in > *:nth-child(8){animation-delay:1.57s} .stamp-on .plate-in > *:nth-child(9){animation-delay:1.65s} /* the ornaments and the ticker wait their turn too */ .stamp-on .hero .orn{opacity:0;animation:sos-orn .9s ease .95s both} .stamp-on .marq{opacity:0;animation:sos-arrive .7s ease 1.72s both} @keyframes sos-press{ /* 2 APPROACH — oversized, a little directional blur, no spin, no bounce */ 0% {opacity:0;transform:scale(1.42) translateY(-2.4%);filter:blur(7px) drop-shadow(0 -1px 1px rgba(0,0,0,.85)) drop-shadow(0 1.5px 0 rgba(226,196,150,.14))} 22% {opacity:1} 38% {transform:scale(1.12) translateY(-.7%);filter:blur(2px) drop-shadow(0 -1px 1px rgba(0,0,0,.85)) drop-shadow(0 1.5px 0 rgba(226,196,150,.14))} /* 3 IMPACT — micro compression, physical pressure */ 47% {transform:scale(.984) translateY(0);filter:blur(0) drop-shadow(0 -1px 1px rgba(0,0,0,.85)) drop-shadow(0 1.5px 0 rgba(226,196,150,.14))} 58% {transform:scale(1.005)} 72% {transform:scale(.998)} /* 5 SETTLE — the reaction stops. The mark remains. */ 100% {opacity:1;transform:scale(1) translateY(0);filter:blur(0) drop-shadow(0 -1px 1px rgba(0,0,0,.85)) drop-shadow(0 1.5px 0 rgba(226,196,150,.14))} } /* 4 IMPRESSION — resolves underneath the mark at the moment of contact and never fully leaves. */ @keyframes sos-impress{ 0%,40% {opacity:0;transform:scale(1.09) translateY(-1.6%)} 50% {opacity:.78;transform:scale(1.02) translateY(5px)} 70% {opacity:.62;transform:scale(1.015) translateY(4px)} 100% {opacity:.55;transform:scale(1.015) translateY(4px)} } @keyframes sos-surface{ 0%,42% {transform:scaleY(1)} 49% {transform:scaleY(.9942)} 60% {transform:scaleY(1.0016)} 72%,100%{transform:scaleY(1)} } @keyframes sos-arrive{ from{opacity:0;transform:translateY(9px)} to {opacity:1;transform:none} } /* the ornaments settle back to their own resting opacity, not to 1 */ @keyframes sos-orn{ from{opacity:0} to {opacity:.11} } /* Reduced motion: no sequence at all. The mark, the impression and the type are simply there. Accessibility does not make the site less cool (point 36) — the impression is art direction, not animation, so it stays. */ @media(prefers-reduced-motion:reduce){ .stamp-on .logo-svg, .stamp-on .wm-impress, .stamp-on .hero .plate, .stamp-on .plate-in > *, .stamp-on .hero .orn, .stamp-on .marq{animation:none;opacity:1;transform:none} .stamp-on .wm-impress{opacity:.55;transform:scale(1.015) translateY(4px)} .stamp-on .hero .orn{opacity:.11} }