/* ===================================================================================================== Holy Bagel: craft layer (SGO, 17/10/2026). Loads last (inc/polish.php). Details only, never a restyle: timing, easing, what is allowed to animate, reduced motion, hit areas, placeholder contrast, truncation. Standard: Emil Kowalski (motion-craft/review-animations.STANDARDS.md) + impeccable craft floor. Measured with tools/layout-audit/{taste,motion,defect}-audit + tools/impeccable-audit at 390 and 1440. ===================================================================================================== */ /* ---- 1. Reduced motion: the finished picture, still -------------------------------------------------- The earlier layers each switch off their own pieces; 1440 still left every element moving (motion-audit: 142 of 142 on the trays page). One rule for everything: no travel, no loops, no delays. 0s (not .01ms) so nothing keeps "animating"; the JS that listens for transitionend also listens for scroll/resize, so it still runs. The site's own "stop animations" switch (html.hb-a11y-motion) gets the same rule. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } html.hb-a11y-motion *, html.hb-a11y-motion *::before, html.hb-a11y-motion *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } /* ---- 2. UI timing: under 300ms, strong ease-out -------------------------------------------------------- Things a guest meets tens of times a visit (menu chevron, the header button, the order pill, choice ticks, photos leaning in on hover) answer fast. Same curves as the site's timing table (--hbm-out). */ .hb-mm__chev { transition-duration: .2s; } .hbc-label { transition-duration: .24s; } .hbc-bagel { transition: opacity .18s ease-out, transform .28s cubic-bezier(.22, 1, .36, 1); } .hb-hpill__ico { transition-duration: .24s; } .hb-cline__edit svg { transition-duration: .24s; } .hb-quote .hb-evc__tick { transition-duration: .22s; } /* Photo "leans in" on hover: 700-800ms read as lag under the pointer; 300ms keeps the softness. */ .hb-way__img { transition-duration: .3s; } .hb-quote .hb-evc__img img { transition: transform .3s var(--q-out, cubic-bezier(.22, 1, .36, 1)); } .hb-pk-card__img, .hb-gallery__btn img, .hb-pkp__menu-media img, .hb-cp__cmp-media img, .hb-pcard__media img, .hb-pp__card-media img { transition-duration: .3s; } .hb-shop.is-js .hb-pcard__media img { transition: opacity .3s var(--ease-out, ease-out), transform .3s var(--hb-ease, ease-out); } /* The header button's shine: a loop on the main call to action reads as a nag after the second pass. It sweeps twice after load, then the button rests. */ .hbc-ready .hbc-shine::before { animation-iteration-count: 2; } /* ---- 3. Animate only transform / opacity / colour ----------------------------------------------------- box-shadow and top re-paint or re-layout every frame. The sticky bars change colour smoothly and the shadow arrives with it; "top" never animates (it follows the header, it is not a gesture). */ .hb-shop.is-js .hb-shop__toolbar, .hb-shop.is-js .hb-shop__bar, .hb-shop--compact.is-js .hb-shop__toolbar { transition-property: background-color; transition-duration: .25s; } html body .hb-pkp .hb-packages--page .hb-pk-filter.hb-pkbar, html body .hb-pkp .hb-pk-filter.hb-pkbar { transition-property: background-color; } .hb-cp__band { transition: opacity .3s var(--ease-out, ease-out), transform .3s cubic-bezier(.22, 1, .36, 1); } .hb-state__link { transition: transform .22s var(--hb-ease, ease-out), background-color .22s ease, color .22s ease; } .hb-quote .hb-evc__card { transition-property: transform, background-color, border-color, opacity; } .hb-header .hb-header__cta { transition-property: transform, background-color, border-color, color, opacity; } html body .hb-header .hb-btn.hb-hpill { transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out, transform var(--hb-t-press, 90ms) ease-out; } /* ---- 4. Choice ticks never appear from nothing ------------------------------------------------------- scale(0) -> scale(.5) + opacity (Emil: nothing in the real world appears from nothing). */ .hb-start__tick { transform: scale(.5); opacity: 0; transition: transform .24s cubic-bezier(.34, 1.4, .64, 1), opacity .16s ease-out; } .hb-start__chip.is-picked .hb-start__tick { transform: scale(1); opacity: 1; } /* ---- 5. Hit areas: 44px without moving a pixel -------------------------------------------------------- Breadcrumb links were 13-22px tall: vertical padding on an inline link grows the target, not the line. */ .hb-ob__crumbs a, .hb-crumbs a, .woocommerce-breadcrumb a { padding-block: 12px; margin-block: -12px; } /* "שאלה על אלרגנים" under the product facts: 27px tall; same margin box, a 45px target. */ .hb-prod__ask { padding-block: 9px; margin-top: -3px; margin-bottom: -9px; } /* ---- 6. Placeholders readable (AA 4.5:1), the site's own placeholder colour -------------------------- */ .hb-checkout form.hb-co .form-row .input-text::placeholder, .hb-checkout form.hb-co .form-row textarea::placeholder, .woocommerce form .form-row :is(input, textarea)::placeholder { color: #7d726c; opacity: 1; } /* Owner 18/10 — accordions (FAQ, product details): one animation only. main.js folds the answer with WAAPI; the ::details-content height transition then ran a second fold after it, so the answer snapped back open and closed again. The script owns the motion; border-box lets the fold reach 0 (the 16+24px padding was left standing). */ .hb-faq__item::details-content, .hb-prod__acc-item::details-content { transition: none !important; } details.hb-faq__item > :not(summary), details.hb-prod__acc-item > :not(summary) { box-sizing: border-box; } /* Owner 18/10 — event cards' "לפתרונות לפי כמות אורחים": the entrance delay (.75s) also delayed the text colour, so on hover the white fill swept in under white text and the text turned dark .75s later. Only the entrance (opacity/transform) keeps the delay; colour follows the fill at once, both ways. */ .hb-event-wrap .hb-event__btn { transition-property: opacity, transform, color, border-color !important; transition-duration: .7s, .7s, .3s, .3s !important; transition-timing-function: var(--hb-ease), var(--hb-ease), var(--hbm-out, ease-out), var(--hbm-out, ease-out) !important; transition-delay: 0s, 0s, 0s, 0s !important; } .hb-event-wrap.is-in .hb-event__btn { transition-delay: .75s, .75s, 0s, 0s !important; } /* A box can't fold below its own padding, so the answer's vertical padding (16 / 24px) lives inside its content instead: same look open, and the fold reaches 0. */ details.hb-faq__item > .hb-faq__answer { padding-block: 0 !important; } details.hb-faq__item > .hb-faq__answer::before { content: ""; display: block; height: 16px; } details.hb-faq__item > .hb-faq__answer::after { content: ""; display: block; height: 24px; } /* Owner 18/10: on narrow product rails (4 cards in a row) the price + "הוספה" did not fit and the button was cut by the card edge. The foot wraps: the button drops under the price instead of overflowing. */ .hb-pp__card-foot { flex-wrap: wrap; row-gap: 10px; min-width: 0; } .hb-pp__card-foot > .hb-pp__cq { margin-inline-start: auto; max-width: 100%; } .hb-pp__card-foot .hb-qty, .hb-pp__card-foot .hb-qty__add { max-width: 100%; min-width: 0; } /* Owner 18/10: the product page's "more from" rails sat on a narrower 1240px column (144-1296 at 1440) than the rest of the page (product panel content and the CTA run 57-1383). On computers the rails take the same text edges. */ @media (min-width: 768px) { .hb-pp-page .hb-pp__rail { max-width: none !important; padding-inline: 0 !important; margin-inline: var(--hb-page-pad) !important; width: auto !important; } }