/* ========================================================= TECHNICAL SERVICE — THE SERVICE BLOCKS Technical-service page only. Pure CSS, no script. The whole band is the unit: the pointer entering anywhere in a .tech-service section starts all three moves, each a beat after the one before, so it reads as one gesture rather than three effects firing together. 0ms the photo begins its drift 60ms the number lifts and deepens 120ms the blue half of the rule stretches 190ms the red half follows Nothing here changes layout, size, spacing, type or content. Every rule is a transform, a colour, or the one overflow that gives the photo something to be clipped by -- and the photo already fills that box exactly, so at rest nothing is cut. ========================================================= */ :root { /* Soft, decelerating, no overshoot -- the site's own curve. */ --ts-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* A long expo tail for the photo alone: it keeps drifting a moment after the pointer settles. */ --ts-ease-photo: cubic-bezier(0.19, 1, 0.22, 1); --ts-photo: 800ms; --ts-type: 480ms; --ts-rule: 820ms; } /* --------------------------------------------------------- 1 — THE PHOTO 546x307 (545 on the even blocks). scale(1.022) gains 12px of width and 6.7px of height, so a 4px sideways and 2px upward pan stays inside the overflow and never exposes an edge. translate() is written BEFORE scale() so the 4px is 4 page pixels, not 4 scaled ones. --------------------------------------------------------- */ .tech-service__photo { overflow: hidden; /* the frame the zoom is clipped by */ } .tech-service__image { transition: transform var(--ts-photo) var(--ts-ease-photo); will-change: transform; } /* The photo drifts INWARD, toward the text it belongs to. PHYSICAL directions, measured in the browser rather than reasoned from the class names: on an --image-start block the photo renders on the physical LEFT (x150 of the 150-1290 column) with the text to its right, so inward is rightward; on an --image-end block it is the other way about. transform is never flipped by direction, which is why these are split. */ .tech-service--image-start:hover .tech-service__image { transform: translate(4px, -2px) scale(1.022); } .tech-service--image-end:hover .tech-service__image { transform: translate(-4px, -2px) scale(1.022); } /* --------------------------------------------------------- 2 — THE NUMBER 48px of very light grey. It deepens one step and rises 5px. The rise is a transform, so the heading below it does not move with it. --------------------------------------------------------- */ .tech-service__number { transition: color var(--ts-type) var(--ts-ease) 60ms, transform var(--ts-type) var(--ts-ease) 60ms; } .tech-service:hover .tech-service__number { color: #A8A8A8; transform: translateY(-5px); } /* --------------------------------------------------------- 3 — THE RULE 42px, red 43% / blue 57%, anchored at the physical RIGHT (the content column is align-items:flex-start, and in RTL that is the right edge). Each half stretches from that same right edge and comes back on its own -- a keyframe, not a transition, because the move has to return while the pointer is still there. Red is lifted above blue so that when it stretches it is visible: it is first in the DOM and would otherwise be painted over by blue. --------------------------------------------------------- */ @keyframes tech-rule-breathe { 0% { transform: scaleX(1); } 45% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } .tech-service__rule .tech-rule__segment { transform-origin: right center; /* PHYSICAL: the anchored end */ } .tech-service__rule .tech-rule__segment--red { position: relative; z-index: 1; } .tech-service:hover .tech-service__rule .tech-rule__segment--blue { animation: tech-rule-breathe var(--ts-rule) var(--ts-ease) 120ms both; } .tech-service:hover .tech-service__rule .tech-rule__segment--red { animation: tech-rule-breathe var(--ts-rule) var(--ts-ease) 190ms both; } /* --------------------------------------------------------- 4 — WHERE IT DOES NOT RUN The CTA arrow keeps the hover interactions.css already gives it; nothing here touches it. --------------------------------------------------------- */ @media (hover: none) { .tech-service--image-start:hover .tech-service__image, .tech-service--image-end:hover .tech-service__image, .tech-service:hover .tech-service__number { transform: none; } .tech-service:hover .tech-rule__segment { animation: none; } } @media (prefers-reduced-motion: reduce) { .tech-service__image { transition: none; } .tech-service--image-start:hover .tech-service__image, .tech-service--image-end:hover .tech-service__image { transform: none; } .tech-service:hover .tech-service__number { transform: none; } .tech-service:hover .tech-rule__segment { animation: none; } } /* ========================================================= TECHNICAL SERVICE — "תהליך העבודה שלנו" A one-time reveal as the section comes into view, then a hover on each step. js/tech-process-reveal.js watches the section and adds .is-revealed once, and never again. The inline one-liner in adds .tp-js to before the page paints, which is what lets the steps start hidden without a flash -- and without JavaScript they are simply never hidden at all. EVERY entry animation uses fill-mode `backwards`, not `both`. `backwards` holds the from-state during the delay (so nothing shows early) but releases the property once the animation ends. `both` would keep holding it, and the hover transitions below -- which touch the same properties -- would never be able to move anything again. PER STEP, from its own base beat: +0ms the number rises 8px into view +90ms the title follows +180ms the tick draws itself, brand blue/red, then settles to the grey it has at rest +280ms the explanatory text fades up and each step's base is 140ms after the one before it. ========================================================= */ .tech-process__steps { /* The beat between steps. */ --tp-step: 140ms; --tp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } .tech-process__step:nth-child(1) { --tp-base: 0ms; } .tech-process__step:nth-child(2) { --tp-base: var(--tp-step); } .tech-process__step:nth-child(3) { --tp-base: calc(var(--tp-step) * 2); } .tech-process__step:nth-child(4) { --tp-base: calc(var(--tp-step) * 3); } /* --------------------------------------------------------- 1 — THE STARTING STATE Only ever applied when the script is present AND the section has not been revealed yet. --------------------------------------------------------- */ .tp-js .tech-process:not(.is-revealed) .tech-process__step-number, .tp-js .tech-process:not(.is-revealed) .tech-process__step-title, .tp-js .tech-process:not(.is-revealed) .tech-process__step-text { opacity: 0; } .tp-js .tech-process:not(.is-revealed) .tech-process__step::before { transform: scaleX(0); } /* --------------------------------------------------------- 2 — THE REVEAL --------------------------------------------------------- */ @keyframes tp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes tp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* The brand pass: the same bar in blue and red, drawn on top of the grey tick and then faded off it, so the grey one is what remains. Red on the physical right, as everywhere. */ @keyframes tp-tick-ink { 0% { transform: scaleX(0); opacity: 1; } 62% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } .is-revealed .tech-process__step-number { animation: tp-rise 520ms var(--tp-ease) var(--tp-base) backwards; } .is-revealed .tech-process__step-title { animation: tp-rise 520ms var(--tp-ease) calc(var(--tp-base) + 90ms) backwards; } .is-revealed .tech-process__step::before { animation: tp-draw 460ms var(--tp-ease) calc(var(--tp-base) + 180ms) backwards; } .is-revealed .tech-process__step-text { animation: tp-fade 560ms var(--tp-ease) calc(var(--tp-base) + 280ms) backwards; } /* The brand-coloured twin, on the tick's own geometry. It is invisible except while its animation is running. */ .tech-process__step:not(:first-child)::after { content: ""; position: absolute; top: 79px; right: -7.5px; /* PHYSICAL, like the tick it covers */ width: 15px; height: 1px; opacity: 0; transform-origin: right center; background-image: linear-gradient( to left, #CC2F3A 0 43%, #005E8E 43% 100% ); pointer-events: none; } .is-revealed .tech-process__step:not(:first-child)::after { animation: tp-tick-ink 760ms var(--tp-ease) calc(var(--tp-base) + 180ms) backwards; } /* --------------------------------------------------------- 3 — HOVER ON A SINGLE STEP No shadow, no frame, no background. Ink and 2px. --------------------------------------------------------- */ .tech-process__step { transition: opacity 420ms var(--tp-ease); } .tech-process__step-number { transition: color 420ms var(--tp-ease); } .tech-process__step-title { transition: transform 420ms var(--tp-ease); } .tech-process__step::before { transform-origin: right center; /* PHYSICAL: it grows inward */ transition: transform 460ms var(--tp-ease); } /* A touch, not a dimming. The :has() in the rule above carries its argument's specificity, so the hovered step has to repeat it to stay ahead. */ .tech-process__steps:has(.tech-process__step:hover) .tech-process__step { opacity: 0.68; } .tech-process__steps:has(.tech-process__step:hover) .tech-process__step:hover { opacity: 1; } /* #005E8E: the blue this page's own rules are drawn in. */ .tech-process__step:hover .tech-process__step-number { color: #005E8E; } .tech-process__step:hover .tech-process__step-title { transform: translateY(-2px); } .tech-process__step:hover::before { transform: scaleX(1.5); } /* --------------------------------------------------------- 4 — WHERE IT DOES NOT RUN --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tp-js .tech-process:not(.is-revealed) .tech-process__step-number, .tp-js .tech-process:not(.is-revealed) .tech-process__step-title, .tp-js .tech-process:not(.is-revealed) .tech-process__step-text { opacity: 1; } .tp-js .tech-process:not(.is-revealed) .tech-process__step::before { transform: scaleX(1); } .is-revealed .tech-process__step-number, .is-revealed .tech-process__step-title, .is-revealed .tech-process__step-text, .is-revealed .tech-process__step::before, .is-revealed .tech-process__step:not(:first-child)::after { animation: none; } .tech-process__step-title, .tech-process__step::before { transition: none; } .tech-process__step:hover .tech-process__step-title, .tech-process__step:hover::before { transform: none; } }