/* =========================================================
SILANDE — MICRO-INTERACTIONS
Loaded LAST, after every other stylesheet, so it can refine
what the component files already set without editing them.
Delete the one and the site returns exactly to how it
was: nothing here changes layout, size or position at rest.
THE VOCABULARY — four moves, used everywhere, never mixed:
1. BREATHE a photo scales 1.04 inside its own frame
2. TRAVEL an arrow slides 4px the way it points
3. OPEN a hairline or the brand rule extends from its
anchored edge
4. DEEPEN ink or a panel shifts one step in contrast
RTL NOTE: every arrow on this site points physically LEFT
(forward, with the reading) or DOWN (into the page). The
travel distances below are PHYSICAL on purpose --
`transform` is never flipped by `direction`.
========================================================= */
:root {
/* Decelerating, no overshoot. The same curve navigation.css
already uses, so the header and the page feel like one hand. */
--ix-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
/* A long expo tail -- the photo keeps drifting after the
pointer stops, which is what reads as expensive. */
--ix-ease-photo: cubic-bezier(0.19, 1, 0.22, 1);
--ix-ink: 400ms; /* colour and opacity */
--ix-move: 420ms; /* arrows, lifts */
--ix-open: 560ms; /* rules and hairlines */
--ix-photo: 1100ms; /* image scale */
}
/* =========================================================
1 — CARDS WITH A PHOTO
The photo breathes inside its frame, the card's panel
deepens one step, the brand rule opens. Nothing moves the
card's own box, so the grid never shifts.
========================================================= */
/* ---- category product cards ----
The card carries no shadow at rest, so the resting value is
written out as two transparent layers of the same shape as
the hover value -- that is what lets the browser interpolate
between them instead of snapping.
The blur is scaled to this card: 233x313 against the project
card's 546x563, so the same look needs a shorter throw. */
.product-card {
box-shadow:
0 0 0 rgba(60, 60, 60, 0),
0 0 0 rgba(60, 60, 60, 0);
transition:
background-color var(--ix-ink) var(--ix-ease),
box-shadow var(--ix-open) var(--ix-ease);
}
.product-card:hover {
box-shadow:
0 2px 6px rgba(60, 60, 60, 0.04),
0 14px 36px rgba(60, 60, 60, 0.10);
}
.product-card__image {
transition: transform var(--ix-photo) var(--ix-ease-photo);
}
.product-card__link:hover .product-card__image,
.product-card__link:focus-visible .product-card__image {
transform: scale(1.04);
}
.product-card:hover {
background-color: #EDEBE9;
}
/* The rule is the brand's own mark; opening it from its
anchored edge is the most SILANDE move available.
transform-origin is PHYSICAL right -- the rule is pinned
there by its own margin-inline-end: auto. */
.product-card__rule {
transform-origin: right center;
transition: transform var(--ix-open) var(--ix-ease);
}
.product-card__link:hover .product-card__rule,
.product-card__link:focus-visible .product-card__rule {
transform: scaleX(1.32);
}
/* ---- related-products cards on a product page ---- */
.pr-related-card__image {
transition: transform var(--ix-photo) var(--ix-ease-photo);
}
.pr-related-card__link:hover .pr-related-card__image,
.pr-related-card__link:focus-visible .pr-related-card__image {
transform: scale(1.04);
}
/* The card owns the panel colour, not the body, so the shift
goes here -- fading in over `transparent` would wash the
whole card instead of deepening it. */
/* The shadow is the same two-layer bloom the home page's project
cards use (.projects__card above): a short near layer plus a
wide, very soft, warm-grey one. The difference is where it
starts -- a project card already sits on a resting shadow and
only grows the second layer, while this card has none at all,
so BOTH layers open from fully transparent. The blurs are
scaled to this card's 325px width against the project card's
481px, which is what keeps the two reading as the same effect
rather than the same numbers.
box-shadow is added to the transition this rule already had.
background-color is restated, not replaced: a transition
declaration overwrites any earlier one on the same element,
so dropping it here would have silently deleted the panel
deepening below. */
.pr-related-card {
box-shadow:
0 0 0 rgba(12, 12, 13, 0),
0 0 0 rgba(60, 60, 60, 0);
transition:
background-color var(--ix-ink) var(--ix-ease),
box-shadow var(--ix-open) var(--ix-ease);
}
.pr-related-card:hover {
background-color: #ECEAE8;
box-shadow:
0 5px 14px rgba(12, 12, 13, 0.08),
0 14px 40px rgba(60, 60, 60, 0.10);
}
/* ---- project cards (the Projects page) ----
The same three moves the home page's project cards use, at
this card's smaller size: the shadow blooms, the photo
breathes inside its frame, and the two meta dividers draw
themselves one after the other. The card itself does not
move, does not lift and does not change size.
These cards are not links to anywhere yet, so nothing here
suggests a click. */
:root {
--pjc-shadow: 620ms;
--pjc-zoom: 700ms;
--pjc-line: 620ms;
--pjc-stagger: 80ms;
}
/* 1 — the shadow. The resting pair is restated so both values
have the same shape and the browser interpolates cleanly;
layer one is the card's own, untouched. */
.pj-card {
box-shadow:
0 1px 4px rgba(12, 12, 13, 0.10),
0 0 0 rgba(60, 60, 60, 0);
transition: box-shadow var(--pjc-shadow) var(--ix-ease);
}
.pj-card:hover {
box-shadow:
0 1px 4px rgba(12, 12, 13, 0.10),
0 16px 40px rgba(60, 60, 60, 0.10);
}
/* 2 — the photo. .pj-card__media now holds the 303x205 box the
used to hold, so the image can scale behind
overflow:hidden without the card changing size. */
.pj-card__media {
display: block;
width: 303px;
height: 205px;
overflow: hidden;
}
.pj-card__media .pj-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--pjc-zoom) var(--ix-ease);
}
.pj-card:hover .pj-card__image {
transform: scale(1.028);
}
/* Below the frame width projects-page.css lets the photo go
fluid; the frame has to follow it. */
@media (max-width: 1139px) {
.pj-card__media {
width: 100%;
height: auto;
aspect-ratio: 463 / 313;
}
}
/* 3 — the dividers. Each row keeps its own 1px #E6E3DF border at
rest; the bar below draws across it from the physical RIGHT,
a shade darker while it travels, settling back to the resting
grey once it lands. The second row starts 80ms later. */
.pj-card__row {
position: relative;
}
.pj-card__row::before {
content: "";
position: absolute;
/* -1px: the border sits in the row's border box, above the
padding box this element is measured from. */
top: -1px;
/* PHYSICAL left/right: the direction of travel is set by
transform-origin and must not depend on the page's RTL. */
left: 0;
right: 0;
height: 1px;
background-color: #C9C3BC;
transform: scaleX(0);
transform-origin: right center;
pointer-events: none;
transition:
transform 440ms var(--ix-ease),
background-color 200ms var(--ix-ease);
}
.pj-card:hover .pj-card__row::before {
transform: scaleX(1);
background-color: #E6E3DF;
transition:
transform var(--pjc-line) var(--ix-ease) var(--pjc-delay, 0ms),
background-color 300ms var(--ix-ease)
calc(var(--pjc-delay, 0ms) + var(--pjc-line));
}
.pj-card__row:nth-of-type(2) { --pjc-delay: var(--pjc-stagger); }
/* =========================================================
2 — ARROWS THAT TRAVEL
Each one moves the way it points: 4px, once, and it stays
there while the pointer does.
========================================================= */
/* ---- pointing physically LEFT (forward) ---- */
.contact-about__more-icon,
.projects__view-all-icon,
.dl-cta__link-icon,
.pr-related__all-icon,
.tech-service__cta-arrow,
.dl-list__arrow {
transition: transform var(--ix-move) var(--ix-ease);
}
.contact-about__more:hover .contact-about__more-icon,
.contact-about__more:focus-visible .contact-about__more-icon,
.projects__view-all:hover .projects__view-all-icon,
.projects__view-all:focus-visible .projects__view-all-icon,
.dl-cta__link:hover .dl-cta__link-icon,
.dl-cta__link:focus-visible .dl-cta__link-icon,
.pr-related__all:hover .pr-related__all-icon,
.pr-related__all:focus-visible .pr-related__all-icon,
.tech-service__cta:hover .tech-service__cta-arrow,
.tech-service__cta:focus-visible .tech-service__cta-arrow,
.tech-consult__cta:hover .tech-service__cta-arrow,
.tech-consult__cta:focus-visible .tech-service__cta-arrow {
transform: translateX(-4px);
}
/* technical-service.css animates this arrow at 150ms; restate
it on the shared curve so the whole site agrees. */
.tech-service__cta-arrow,
.contact-form__submit svg {
transition: transform var(--ix-move) var(--ix-ease);
}
.contact-form__submit:hover svg,
.contact-form__submit:focus-visible svg {
transform: translateX(-4px);
}
/* ---- pointing DOWN (into the page) ---- */
.pr-hero__link-icon,
.pr-article__link-icon,
.dl-doc__get-icon,
.contact-hero__cta-icon,
.hero-cta__icon {
transition: transform var(--ix-move) var(--ix-ease);
}
.pr-hero__link:hover .pr-hero__link-icon,
.pr-hero__link:focus-visible .pr-hero__link-icon,
.pr-article__link:hover .pr-article__link-icon,
.pr-article__link:focus-visible .pr-article__link-icon,
.dl-doc__get:hover .dl-doc__get-icon,
.dl-doc__get:focus-visible .dl-doc__get-icon,
.contact-hero__cta:hover .contact-hero__cta-icon,
.contact-hero__cta:focus-visible .contact-hero__cta-icon,
.hero-cta:hover .hero-cta__icon,
.hero-cta:focus-visible .hero-cta__icon {
transform: translateY(3px);
}
/* The home CTA's chevron is a bordered square already turned
45deg. The extra translate goes FIRST in the list so it
resolves in the page's own axes, not the rotated ones. */
.hero__cta-icon {
transition: transform var(--ix-move) var(--ix-ease);
}
.hero__cta:hover .hero__cta-icon,
.hero__cta:focus-visible .hero__cta-icon {
transform: translateY(3px) rotate(45deg) translateY(-2px);
}
/* hero.css fades the whole control to 0.7 on hover -- too much
for a single CTA on a photo. The arrow carries the response
now, so the label only softens. */
.hero__cta {
transition: opacity var(--ix-ink) var(--ix-ease),
border-color var(--ix-ink) var(--ix-ease);
}
.hero__cta:hover {
opacity: 0.88;
}
/* =========================================================
3 — TEXT LINKS: A HAIRLINE THAT OPENS
Grows from the inline-START edge, i.e. physically RIGHT on
this page, so it opens WITH the reading rather than against
it. 1px, currentColor, no colour change.
========================================================= */
.site-footer__email,
.pr-related__all,
.contact-about__more,
.projects__view-all,
.dl-cta__link {
position: relative;
}
.site-footer__email::after,
.pr-related__all::after,
.contact-about__more::after,
.projects__view-all::after,
.dl-cta__link::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: -5px;
height: 1px;
background-color: currentColor;
opacity: 0.55;
transform: scaleX(0);
transform-origin: right center; /* physical: the reading edge */
transition: transform var(--ix-open) var(--ix-ease);
pointer-events: none;
}
.site-footer__email:hover::after,
.site-footer__email:focus-visible::after,
.pr-related__all:hover::after,
.pr-related__all:focus-visible::after,
.contact-about__more:hover::after,
.contact-about__more:focus-visible::after,
.projects__view-all:hover::after,
.projects__view-all:focus-visible::after,
.dl-cta__link:hover::after,
.dl-cta__link:focus-visible::after {
transform: scaleX(1);
}
/* =========================================================
4 — ROWS
The home "פתרונות בניה" rows and the downloads category
list are not links yet (their anchors are still to come).
:has(a) keeps the response switched OFF until one is there,
so nothing invites a click that does nothing -- and it
switches itself ON the moment the links land.
========================================================= */
.solutions__row {
transition: border-color var(--ix-ink) var(--ix-ease);
}
.solutions__row:has(a):hover {
border-block-end-color: #9A9A9A;
}
.solutions__row:has(a):hover .solutions__row-title {
color: #000000;
}
/* No breathe on the row photo: it is a bare flex child with no
frame to be clipped by, so scaling it would spill over the
row's divider. The divider and the title carry the row. */
.solutions__row-title,
.dl-list__label {
transition: color var(--ix-ink) var(--ix-ease);
}
.dl-list__item {
transition: border-color var(--ix-ink) var(--ix-ease);
}
.dl-list__item:has(a):hover {
border-bottom-color: #8C8C8C;
}
.dl-list__item:has(a):hover .dl-list__arrow {
transform: translateX(-4px);
}
/* ---- document rows (these DO have a link) ---- */
.dl-doc {
transition: border-color var(--ix-ink) var(--ix-ease);
}
.dl-doc:hover {
border-bottom-color: #8C8C8C;
}
.dl-doc__icon {
transition: color var(--ix-ink) var(--ix-ease);
}
.dl-doc:hover .dl-doc__icon {
color: #000000;
}
/* =========================================================
5 — SMALL CONTROLS
========================================================= */
/* The product hero's carousel dots: they are 5px, so they grow
rather than move. The ring keeps the hit area honest. */
.pr-hero__dot {
transition:
transform var(--ix-move) var(--ix-ease),
background-color var(--ix-ink) var(--ix-ease);
}
.pr-hero__dot:hover {
transform: scale(1.45);
background-color: #8C77B8;
}
.pr-hero__dot.is-active:hover {
transform: scale(1.3);
}
/* The two logo lockups: a mark should acknowledge the pointer,
not perform for it. */
.site-header__logo-link,
.site-footer__logo-link {
transition: opacity var(--ix-ink) var(--ix-ease);
}
.site-header__logo-link:hover,
.site-footer__logo-link:hover {
opacity: 0.74;
}
/* The downloads search field: the rule under it deepens on
focus instead of a browser outline. */
/* Nothing for the downloads search field here, on purpose.
An earlier pass added a 1px underline on focus, on the
assumption the field had no focus indicator of its own. It
does: downloads.css turns the whole field's rule blue with
`.dl-search__field:focus-within { border-bottom-color:
#005E8E }`. The underline was a second, shorter, black line
sitting on top of that one, and has been removed. */
/* =========================================================
6 — KEYBOARD FOCUS
One ring, everywhere, in the brand blue. Pointer users
never see it; keyboard users never lose their place.
========================================================= */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 1px solid var(--color-brand-blue, #1F4E8C);
outline-offset: 4px;
border-radius: 1px;
}
/* The header and the catalog menu already answer the keyboard
with their own rule and panel. navigation.css switches the
browser outline off there on purpose -- keep it off, or they
get boxed twice. */
.site-navigation__link:focus-visible,
.site-navigation__trigger:focus-visible,
.catalog-menu__cat:focus-visible,
.catalog-menu__product:focus-visible,
.catalog-menu__all:focus-visible {
outline: none;
}
/* Cards are large; the ring sits closer so it reads as part of
the card rather than a second box around it. */
.product-card__link:focus-visible,
.pr-related-card__link:focus-visible,
.pj-card__link:focus-visible {
outline-offset: 2px;
}
/* =========================================================
7 — REDUCED MOTION
Everything that MOVES is switched off; everything that only
changes colour or opacity stays, because that is what
carries the meaning.
========================================================= */
@media (prefers-reduced-motion: reduce) {
.product-card__image,
.pr-related-card__image,
.product-card__rule,
.hero__cta-icon,
.contact-about__more-icon,
.projects__view-all-icon,
.dl-cta__link-icon,
.pr-related__all-icon,
.tech-service__cta-arrow,
.dl-list__arrow,
.pr-hero__link-icon,
.pr-article__link-icon,
.dl-doc__get-icon,
.contact-hero__cta-icon,
.hero-cta__icon,
.pr-hero__dot,
.contact-form__submit svg {
transition: none !important;
}
.product-card__link:hover .product-card__image,
.pr-related-card__link:hover .pr-related-card__image,
.product-card__link:hover .product-card__rule,
.pj-card:hover .pj-card__image,
.pr-hero__dot:hover {
transform: none;
}
.pj-card__media .pj-card__image,
.pj-card__row::before,
.pj-card:hover .pj-card__row::before { transition: none; }
.pj-card:hover .pj-card__row::before { transform: scaleX(1); }
.site-footer__email::after,
.pr-related__all::after,
.contact-about__more::after,
.projects__view-all::after,
.dl-cta__link::after {
transition: none;
}
}