/* ========================================================================== BAR'EVO SOCIAL - motion layer Vanilla CSS. No build step. RTL. Two grounds (bone + emerald). Rules held throughout: - 150-350ms core band, 480ms hard ceiling for the two long gestures - exits always shorter than entrances - ease-out entering, ease-in exiting, never linear - transform and opacity only (one documented grid-template-rows exception) - transform-origin always set where the thing comes from - nothing animates on first paint - reduced motion reduces, it does not strand content GROUND CONTRACT This site alternates light and emerald sections. Motion must never assume a dark page. Anything that paints a temporary surface (reveal veils, image placeholders, the lightbox scrim) reads --m-ground, which the LAYOUT stylesheet sets per section. Set it once per section and every veil and placeholder inside that section is automatically the right colour: .sec--bone { --m-ground: #f2ece1; --m-ink: #10241c; } .sec--emerald { --m-ground: #0e2a20; --m-ink: #f2ece1; } The fallbacks below exist only so this file is never wrong on its own. ========================================================================== */ :root { /* ---- easing ------------------------------------------------------- */ --e-out: cubic-bezier(0.25, 1, 0.5, 1); /* quart out - default entrance */ --e-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* long settle - display type, veils */ --e-in: cubic-bezier(0.5, 0, 0.75, 0); /* quart in - everything leaving */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* on-screen A -> B */ /* ---- durations ---------------------------------------------------- */ --d-press: 90ms; /* :active, must feel like contact */ --d-out: 120ms; /* every hover-out and small exit */ --d-hover: 160ms; /* hover-in */ --d-link: 180ms; /* underline draw */ --d-close: 190ms; /* accordion close */ --d-exit: 160ms; /* overlay exit */ --d-lightbox: 240ms; /* overlay enter */ --d-open: 260ms; /* accordion open */ --d-rail: 260ms; /* rail marker travel */ --d-callbar: 280ms; --d-label: 300ms; --d-tile: 300ms; --d-type: 320ms; --d-hero: 400ms; --d-veil: 420ms; --d-rule: 480ms; /* full-column hairline - the longest thing on the page */ --d-dezoom: 480ms; --m-stagger: 40ms; /* capped at 5 steps in JS */ /* ---- ground fallbacks (layout CSS overrides these per section) ----- */ --m-ground: #0e2a20; --m-ink: #f2ece1; } /* Horizontal-overflow guard. Stated precisely, because it is a PRECAUTION and not a fix for a measured bug on the current content: - measured: with this rule removed, an in-flow 4000px-wide element gives scrollWidth - clientWidth = 2757px; with the rule, 0. It works. - measured: the reveal transforms themselves (translateX 12px inside a max-width wrapper) produce 0px of overflow either way, so nothing on the page today needs this. - measured: it does NOT clip a position:absolute element whose containing block is the initial containing block. Do not rely on it for those. It stays because horizontal overflow in RTL runs LEFT, which is the one direction nobody thinks to check, and because a future wide table or grid would otherwise ship broken. clip, not hidden: hidden makes the root a scroll container and silently kills every position:sticky further down the page. */ html, body { overflow-x: clip; } /* ========================================================================== 1. SCROLL REVEAL Anti-pattern being avoided: one uniform "fade up 40px" on every element. Here the gesture is assigned by ROLE, travel never exceeds 12px, and three of the five roles do not translate at all. A reader should register that the page composed itself, not that each block was individually thrown in. All hidden states are gated behind .js on , set by an inline script in . No JS -> no hidden state -> the page is simply static. There is no path on which content is stranded at opacity 0. ========================================================================== */ /* -- 1a. Latin eyebrow label: enters from the RTL start edge (the right) --- */ .js [data-reveal="label"] { opacity: 0; transform: translateX(12px); transition: opacity var(--d-label) var(--e-out), transform var(--d-label) var(--e-out); } /* -- 1b. Hebrew headings and body: short rise, nothing showy --------------- */ .js [data-reveal="type"] { opacity: 0; transform: translateY(10px); transition: opacity var(--d-type) var(--e-out), transform var(--d-type) var(--e-out); } /* -- 1c. Grid tile: settles in place. A grid that slides upward is the exact cheap look we are avoiding; a grid that resolves reads composed. ------- */ .js [data-reveal="tile"] { opacity: 0; transform: scale(0.965); transform-origin: 50% 50%; transition: opacity var(--d-tile) var(--e-out), transform var(--d-tile) var(--e-out); } /* -- 1d. Price / package card: opacity only. Eleven cards in motion is noise; eleven cards arriving is one gesture. -------------------------- */ .js [data-reveal="card"] { opacity: 0; transition: opacity var(--d-tile) var(--e-out); } /* -- 1e. Hairline rule: drawn from the right, the RTL reading direction. This is the connective tissue of the whole page. --------------------- */ .js [data-reveal="rule"] { transform: scaleX(0); transform-origin: right center; transition: transform var(--d-rule) var(--e-out); } /* -- 1f. Statement figure: a satin veil retracts and the image settles out of a de-zoom. The veil is the section's own ground, so on a bone section it is bone and on an emerald section it is emerald. ---------- */ .m-figure { position: relative; overflow: hidden; } .m-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; } .m-veil { position: absolute; inset: 0; background: var(--m-ground); transform: scaleY(1); transform-origin: 50% 100%; /* retracts downward: the face appears first */ transition: transform var(--d-veil) var(--e-out-expo); pointer-events: none; } .js [data-reveal="figure"] > img { transform: scale(1.06); transition: transform var(--d-dezoom) var(--e-out); } .js [data-reveal="figure"].is-in > img { transform: scale(1); } .js [data-reveal="figure"].is-in .m-veil { transform: scaleY(0); } /* No JS: the veil must never sit on top of the picture. */ html:not(.js) .m-veil { display: none; } /* -- stagger + resolved states -------------------------------------------- */ .js [data-reveal] { transition-delay: calc(var(--i, 0) * var(--m-stagger)); } .js [data-reveal="label"].is-in, .js [data-reveal="type"].is-in, .js [data-reveal="card"].is-in { opacity: 1; transform: none; } .js [data-reveal="tile"].is-in { opacity: 1; transform: scale(1); } .js [data-reveal="rule"].is-in { transform: scaleX(1); } /* -- 1g. THE FAILSAFE ------------------------------------------------------ The claim above - "there is no path on which content is stranded at opacity 0" - was true for JS DISABLED and false for JS ENABLED with motion.js failing to load, which is exactly what the v5r1 capture showed: 43% of index.html and half the portfolio rendered as flat ground. .js is set by an inline script; that same one-liner now also sets .m-shown after 3s. It needs no external file, no observer and no callback, so if motion.js 404s, throws, or is blocked, every hidden state is still released three seconds later. motion.js's own 1800ms sweep normally gets there first, which is why this is invisible on a healthy page. */ .js.m-shown [data-reveal] { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; } .js.m-shown [data-reveal="figure"] > img { transform: none !important; } .js.m-shown .m-veil { transform: scaleY(0) !important; } .js.m-shown .hero__mark, .js.m-shown .hero__byline, .js.m-shown .hero__cta { opacity: 1 !important; transform: none !important; } /* Print, crawlers, OG renderers and every screenshot tool: no scroll ever happens, so no reveal ever fires. The page must be whole on paper. */ @media print { .js [data-reveal], .js .hero__mark, .js .hero__byline, .js .hero__cta { opacity: 1 !important; transform: none !important; } .js [data-reveal="figure"] > img { transform: none !important; } .js .m-veil { display: none !important; } } /* ========================================================================== 2. HERO - the only load animation on the page Three elements, one gesture, 70ms apart. The portrait behind them is NOT animated: it is the ground, it is simply there when the page is there. "Never animate on first paint" is enforced structurally: the initial state is committed by an inline .js class, and .hero-ready is added only after document.fonts.ready plus two rAFs, so the browser has already painted the resting frame before anything transitions. Fading display type through a font swap is the ugliest thing on the web, hence the font gate. ========================================================================== */ .js .hero__mark, .js .hero__byline, .js .hero__cta { opacity: 0; transform: translateY(12px); } /* The wordmark settles down onto its baseline, so its origin is its baseline. */ .js .hero__mark { transform: translateY(12px) scale(1.012); transform-origin: 50% 100%; } .js .hero-ready .hero__mark, .js .hero-ready .hero__byline, .js .hero-ready .hero__cta { opacity: 1; transform: none; transition: opacity var(--d-hero) var(--e-out-expo), transform var(--d-hero) var(--e-out-expo); } .js .hero-ready .hero__byline { transition-delay: 70ms; } .js .hero-ready .hero__cta { transition-delay: 140ms; } /* The scroll cue is gone. It was pinned to inset-inline-start:50% - viewport centred - while the wordmark was column centred, so it landed under the V of EVO and read as a stray artifact rather than as an instruction. */ /* ========================================================================== 3. IMAGES Parallax: argued down to exactly one element. Twenty-five portfolio tiles on scroll-linked transforms is twenty-five chances to jank and it is the single loudest "trendy" tell, which the brief rules out. The hero portrait gets 40px of drift, and only through a CSS scroll-driven animation, so there is no scroll listener, no layout read, and the work stays on the compositor. Browsers without animation-timeline get a static hero and lose nothing. ========================================================================== */ /* Wired to the real hero markup (.hx__silk img), not the .hero__media structure this was originally authored against - that element never existed in index.html, so this whole block was dead: shipped to every visitor, running for none of them. .hx__silk img already carries a static transform: scale(1.06) (editorial.css) for overscan, so the keyframe restates it at both ends rather than letting the animation's `to` replace it outright - transform is not additive across rules, so leaving the base scale out of the keyframe would have snapped the image from 1.06x to 1x the instant the timeline started. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes hero-drift { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.06) translateY(40px); } } .hx__silk img { will-change: transform; /* justified: a genuinely running animation */ animation: hero-drift linear both; /* linear is correct here - scroll IS the clock */ animation-timeline: view(); animation-range: contain 0% cover 100%; } } } /* Aspect is reserved in CSS so nothing reflows when a tile decodes. The portfolio frames are 9:16 video stills - never crop them square. An undecoded tile is the section's own ground, never white. */ .m-tile { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--m-ground); } .m-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--d-out) var(--e-in); /* the EXIT curve lives on the base */ } /* Hover only where there is a real pointer. On touch this rule would fire on tap and stick until the next tap somewhere else. */ @media (hover: hover) and (pointer: fine) { .m-tile:hover > img, .m-tile:focus-within > img { transform: scale(1.035); transition: transform var(--d-hover) var(--e-out); } } /* ========================================================================== 4. MICRO-INTERACTIONS ========================================================================== */ /* Inline link: underline drawn from the right, retracts to the left. The origin flip is what makes it read as one stroke rather than a bar fading. */ .m-link { position: relative; text-decoration: none; } .m-link::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; /* exit: retreats leftward */ transition: transform var(--d-out) var(--e-in); } .m-link:hover::after, .m-link:focus-visible::after { transform: scaleX(1); transform-origin: right center; /* enter: drawn from the right */ transition: transform var(--d-link) var(--e-out); } /* Thin outlined button, as in her deck. The fill arrives as opacity on a pseudo-element, not as a background-color transition, so it stays on the compositor and works on either ground without a second rule. */ .m-btn { position: relative; isolation: isolate; border: 1px solid currentColor; background: transparent; min-height: 44px; /* touch target */ transform: scale(1); transition: transform var(--d-press) var(--e-out); -webkit-tap-highlight-color: transparent; } .m-btn::before { content: ""; position: absolute; inset: 0; /* Without this the fill paints a hard-cornered rectangle inside a 999px capsule and the bone border survives only as four corner arcs - visible on every hover, focus and press of all 8 .pill.m-btn controls on the site. inset stays 0 so .pill--sand's 1px border is not covered by its own fill. */ border-radius: inherit; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--d-out) var(--e-in); } .m-btn:hover::before, .m-btn:focus-visible::before { opacity: 0.10; transition: opacity var(--d-hover) var(--e-out); } .m-btn:active { transform: scale(0.985); } /* Phone CTA - the only real conversion on this site. It gets contact feedback and nothing else. No shimmer, no pulse, no attention-seeking. */ .m-call { min-height: 44px; transition: transform var(--d-press) var(--e-out); } .m-call:active { transform: scale(0.97); } /* Sticky mobile call bar: appears once the hero has fully left, so it is never competing with the hero CTA that says the same thing. */ .m-callbar { position: fixed; inset-inline: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(100%); transform-origin: 50% 100%; visibility: hidden; transition: transform var(--d-exit) var(--e-in), visibility 0s linear var(--d-exit); } .m-callbar.is-in { transform: translateY(0); visibility: visible; transition: transform var(--d-callbar) var(--e-out), visibility 0s; } /* .m-header / .m-header.is-hidden are DELETED with their JS (motion.js ยง4). The header on this site is permanent and changes ground only. The blanket `:focus-visible { outline: 2px solid currentColor }` is DELETED too. currentColor is the ink of whatever is focused, so on the emerald skip link and on a filled pill it drew a ring the same colour as the text it surrounded - 1.00:1, an invisible focus indicator. It was beaten in the cascade only by style.css loading second at equal specificity, i.e. by source order. The ring is owned once, by style.css, per ground. */ /* Anything numeric that changes in place */ .m-num { font-variant-numeric: tabular-nums; } /* ========================================================================== 4b. PACKAGE ACCORDION Eleven packages will not fit open. grid-template-rows 0fr -> 1fr is the one non-transform property animated on this site: it is cheap, it is the only way to animate to content height without measuring, and it is documented here rather than smuggled in. The inner opacity carries the perceived work. ========================================================================== */ .m-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-close) var(--e-in); } .m-acc__panel > * { overflow: hidden; } .m-acc__inner { opacity: 0; transform: translateY(-4px); transition: opacity var(--d-out) var(--e-in), transform var(--d-out) var(--e-in); } .m-acc[open] > .m-acc__panel, .m-acc.is-open > .m-acc__panel { grid-template-rows: 1fr; transition: grid-template-rows var(--d-open) var(--e-out); } .m-acc[open] > .m-acc__panel .m-acc__inner, .m-acc.is-open > .m-acc__panel .m-acc__inner { opacity: 1; transform: none; transition: opacity var(--d-open) var(--e-out) 60ms, transform var(--d-open) var(--e-out) 60ms; } /* Closing.
hides its content the instant open flips to false, so JS holds the element open, adds .is-closing, and only then flips it. This is the state that plays the exit - shorter than the entrance, ease-in. */ .m-acc[open].is-closing > .m-acc__panel { grid-template-rows: 0fr; transition: grid-template-rows var(--d-close) var(--e-in); } .m-acc[open].is-closing > .m-acc__panel .m-acc__inner { opacity: 0; transform: translateY(-4px); transition: opacity var(--d-out) var(--e-in), transform var(--d-out) var(--e-in); } /* The chevron rotates about its own centre, 180ms, matching the panel's perceived start rather than its full length. */ .m-acc__chevron { transform: rotate(0deg); transform-origin: 50% 50%; transition: transform var(--d-link) var(--e-inout); } .m-acc[open] > summary .m-acc__chevron, .m-acc.is-open > .m-acc__head .m-acc__chevron { transform: rotate(180deg); } .m-acc[open].is-closing > summary .m-acc__chevron { transform: rotate(0deg); } /* ========================================================================== 4c. LIGHTBOX The panel scales up FROM the tile that was clicked - transform-origin is written per-open from that tile's real position. That is the whole point: the reader must not lose track of which frame they opened. ========================================================================== */ .m-lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; width: 100%; height: 100%; max-width: none; /* the UA sheet caps dialog at calc(100% - 6px) */ max-height: none; padding: 5vmin; border: 0; background: transparent; } /* Setting display on a overrides the UA's dialog:not([open]){display:none} and leaves a full-viewport fixed layer swallowing every click on the page. Verified: without this line the closed dialog still returns a live layout box. */ .m-lb:not([open]) { display: none; } .m-lb::backdrop { background: rgba(8, 22, 17, 0.82); } .m-lb__panel { opacity: 0; transform: scale(0.94); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: opacity var(--d-exit) var(--e-in), transform var(--d-exit) var(--e-in); } .m-lb.is-open .m-lb__panel { opacity: 1; transform: scale(1); transition: opacity var(--d-lightbox) var(--e-out), transform var(--d-lightbox) var(--e-out); } /* ========================================================================== 4d. MOBILE SHEET - the one spring on the site A finger drags this, so it must be interruptible and velocity-aware. The spring lives in JS (motion.js); CSS only supplies the non-dragging enter and exit and gets out of the way the instant a pointer goes down. ========================================================================== */ .m-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; transform: translateY(100%); transform-origin: 50% 100%; visibility: hidden; /* a closed sheet must not be tabbable */ transition: transform var(--d-exit) var(--e-in), visibility 0s linear var(--d-exit); touch-action: none; /* we own the vertical gesture */ } .m-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 320ms var(--e-out), visibility 0s; } .m-sheet.is-dragging { visibility: visible; } .m-sheet.is-dragging { transition: none; } /* the spring is driving now */ .m-sheet__scrim { position: fixed; inset: 0; z-index: 89; background: rgba(8, 22, 17, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--d-exit) var(--e-in); } .m-sheet__scrim.is-open { opacity: 1; pointer-events: auto; transition: opacity var(--d-callbar) var(--e-out); } .m-sheet__grip { min-height: 44px; } /* ========================================================================== 5. SECTION CONTINUITY Continuity here is mostly LAYOUT, and it should be said plainly: sections overlap, figures bleed across the seam between a bone section and an emerald one, and the same hairline recurs at every section head. Motion only underlines that. The two things motion contributes: (a) the chapter rail - ONE marker element that travels between chapters, so the page has a single continuous thread down its start edge; (b) the seam hairline, which is the same [data-reveal="rule"] gesture, so every ground change is announced by the same stroke. Explicitly rejected: a fixed full-viewport backdrop with transparent sections scrolling over it. That is a one-ground site, and this brief is a two-ground site. ========================================================================== */ .m-rail { position: fixed; inset-inline-end: 0; top: 0; bottom: 0; pointer-events: none; /* decorative overlay - never intercept a click */ } .m-rail__marker { transform: translateY(var(--rail-y, 0px)) scaleY(var(--rail-h, 1)); transform-origin: 50% 0%; transition: transform var(--d-rail) var(--e-inout); } .m-rail__item { opacity: 0.35; transition: opacity var(--d-rail) var(--e-inout); } .m-rail__item.is-current { opacity: 1; } /* Scoped smooth scrolling for in-page anchors. Never set globally without the reduced-motion guard - it makes scroll-to-top jarring for people who asked for less movement. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================== 6. REDUCED MOTION Reduce, do not remove. What goes: all travel, all scale, the veils, the parallax, the count-up, smooth scrolling. What stays: opacity crossfades at 120ms, so every state change is still legible, and the focus ring, which was never animated in the first place. The hidden states are dropped with !important rather than merely sped up, so content can never be stranded at opacity 0 because a class failed to land. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: opacity 120ms var(--e-out) !important; transition-delay: 0ms !important; } .js [data-reveal="rule"] { transform: scaleX(1) !important; } .m-veil { display: none !important; } /* The de-zoom lives on the CHILD img, so the [data-reveal] override above does not reach it. Without this the portrait sits at scale(1.06) forever for anyone who asked for less motion - a permanently wrong crop. */ .js [data-reveal="figure"] > img { transform: none !important; transition: none !important; } .js .hero__mark, .js .hero__byline, .js .hero__cta { opacity: 1 !important; transform: none !important; transition: none !important; } .m-tile:hover > img, .m-tile:focus-within > img, .m-btn:active, .m-call:active { transform: none !important; } /* The underline becomes a fade rather than a stroke - still legible. */ .m-link::after { transform: scaleX(1); opacity: 0; transition: opacity 120ms var(--e-out) !important; } .m-link:hover::after, .m-link:focus-visible::after { opacity: 1; transform: scaleX(1); } .m-callbar { transform: none !important; opacity: 0; visibility: visible; pointer-events: none; transition: opacity 120ms var(--e-out) !important; } .m-callbar.is-in { opacity: 1; pointer-events: auto; } .m-acc__panel, .m-acc[open] > .m-acc__panel, .m-acc[open].is-closing > .m-acc__panel, .m-acc.is-open > .m-acc__panel { transition: none !important; } .m-acc__inner { transition: opacity 120ms var(--e-out) !important; transform: none !important; } .m-acc__chevron { transition: none !important; } .m-lb__panel, .m-lb.is-open .m-lb__panel { transform: none !important; transition: opacity 120ms var(--e-out) !important; } .m-sheet, .m-sheet.is-open { transition: none !important; } .m-rail__marker { transition: none !important; } html { scroll-behavior: auto !important; } /* backstop for anything not named above */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }