/* ============================================================
ECHOSHAPE — UI COMPONENTS: BUTTONS + TAGS (Figma 1:1)
Source: Website-26, node 893:2327 ("Frame 657" spec sheet)
Button: Welcome web Bold 16px uppercase, #FF6638 on white,
2px inside stroke, 10px/20px padding → 39px tall.
Hover behaves like pressed: solid fill, white text.
Tag: Welcome web Regular 16px uppercase, #FF6638 on white,
1px inside stroke, 6px/16px padding → 31px tall.
Usage: … /
.on / .fill = pressed-look (filled) state
… (.on = filled variant)
============================================================ */
/* ---- button ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;
font-family:'Welcome web',sans-serif;font-size:16px;font-weight:700;
text-transform:uppercase;line-height:normal;
color:var(--prime,#ff6638);background:transparent;
border:2px solid var(--prime,#ff6638);border-radius:0;
padding:8px 18px; /* Figma: 10/20 incl. the 2px inside stroke */
text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background-color var(--hover-time,.25s) var(--hover-ease,ease),
color var(--hover-time,.25s) var(--hover-ease,ease),
border-color var(--hover-time,.25s) var(--hover-ease,ease)}
.btn:hover,.btn.on,.btn.fill{background:var(--prime,#ff6638);color:#fff}
/* .btn is a flex container, and flex layout discards the whitespace text nodes
between the per-word spans that data-reveal-text injects — "View our work"
rendered as "Viewourwork". Restore the space as a gap. */
.btn:has(> .es-reveal-word){column-gap:.26em}
/* ---- tag ---- */
.tag{display:inline-flex;align-items:center;justify-content:center;
font-family:'Welcome web',sans-serif;font-size:16px;font-weight:400;
text-transform:uppercase;line-height:normal;
color:var(--prime,#ff6638);background:#fff;
border:1px solid var(--prime,#ff6638);
padding:5px 15px; /* Figma: 6/16 incl. the 1px inside stroke */
white-space:nowrap}
.tag.on{background:var(--prime,#ff6638);color:#fff}
/* ============================================================
DROPDOWN — Echoshape language
Trigger is a .btn. Panel is a white plate inside a 0.5px frame
line, rows separated by the house dash (16/14), uppercase like
the mobile drawer. The caret is the icon language: 1.5px stroke.
The panel is position:fixed and placed by JS, because its usual
host — .bottombar — is overflow:hidden and would clip a plate
opening upwards.
Markup:
Families
============================================================ */
.dd{position:relative;flex:none}
.dd-btn{gap:.5em}
.dd-caret{flex:none;width:11px;height:7px;display:block;
transition:transform var(--hover-time,.25s) var(--hover-ease,ease)}
.dd-caret path{fill:none;stroke:currentColor;stroke-width:1.5}
.dd.open .dd-caret{transform:scaleY(-1)}
.dd-panel{position:fixed;z-index:120;display:none;flex-direction:column;
min-width:180px;max-height:min(70vh,520px);overflow-y:auto;
background:#fff;border:var(--line,0.5px) solid var(--frameline,#ff6638);
scrollbar-width:none}
.dd-panel::-webkit-scrollbar{width:0;display:none}
.dd.open .dd-panel{display:flex}
.dd-item{font-family:'Welcome web',sans-serif;font-size:14px;font-weight:500;
text-transform:uppercase;text-align:left;line-height:1;
color:var(--dark,#010001);background:transparent;border:0;cursor:pointer;
padding:13px 16px;white-space:nowrap;
background-image:var(--dash);background-repeat:no-repeat;
background-position:left bottom;background-size:100% var(--dashw,1px)}
.dd-item:last-child{background-image:none}
.dd-item:hover,.dd-item:focus-visible{color:var(--prime,#ff6638)}
.dd-item.on{color:var(--prime,#ff6638)}
/* group caption — the blueprint label, not a choice */
.dd-group{font-family:'Welcome web',sans-serif;font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.06em;
color:var(--prime,#ff6638);opacity:.7;padding:11px 16px 5px}
/* ---- responsive sizing ----
Both were locked at 16px with no breakpoint rules, so a hero tag on a phone
was the same size as on a 1440 screen. These are the site-wide defaults;
a place that needs bigger chips (the distributors map) overrides locally. */
@media (max-width:1023px){
.btn{font-size:15px;padding:7px 15px}
.tag{font-size:15px;padding:5px 13px}
}
@media (max-width:767px){
.btn{font-size:14px;padding:7px 13px}
.tag{font-size:13px;padding:4px 10px}
}
/* ============================================================
PRODUCT RENDER AS A CARD IMAGE
The studio renders are cut-out panels on transparency, not photographs, so every card
that shows one has to frame it differently from the interior shot it replaces: a photo
is CROPPED to fill its card, a cut-out panel would simply lose its corners.
Used by "People also chose" on the product page and by the product cards on a project
page. The catalog tile does NOT use this — there the panel is deliberately blown up and
pushed off the frame, which works because the tile is large and square; these cards are
a third of a row or a narrow strip, where a crop that tight would leave nothing you can
recognise. Here the whole panel shows, centred, on the card's own --lgrey.
============================================================ */
img.prodrender{object-fit:contain;padding:6%}
/* ------------------------------------------------------------
…AND THE TILE FRAMING, for the places where the card is big enough to carry it: the
catalog tile and the home page's products band. The panel is blown up FROM the card's
top-right corner — contain + object-position pin that corner, transform-origin keeps it
pinned while scale grows the panel off the LEFT and the BOTTOM — so it runs off the
frame instead of floating inside it, with a small gap left at the top and the right.
The far corner is what the composition hangs on. The 27.9.26 re-renders fixed the camera
to noa's Figma (the two top edges now fall at ~0.47 and ~0.43, where the 23.9 set was
0.76 / 0.47), so the -6deg counter-tilt that equalised them is gone and --rx is just the
4% gap at the right. The far corner lands ~37% down the tile for the flat panels:
--rx = -4% --ry = -3% (at --rs 1.45; was -10%, noa 27.9.26: "תוריד קצת את התקרות למטה")
A WALL panel is portrait and would never reach the left edge under contain (the renders
run 0.53 to 0.77, so one scale left the narrow ones short), so it switches to cover,
which makes the painted width the card's width whatever the aspect. Its gaps are equal
on the top and the right, also noa.
------------------------------------------------------------ */
img.prodtile{--rs:1.45;--rx:-4%;--ry:-3%;--rr:0deg;
object-fit:contain;object-position:100% 0;transform-origin:100% 0;
transform:translate(var(--rx),var(--ry)) rotate(var(--rr)) scale(var(--rs))}
img.prodtile.wall{--rs:1.08;--rx:-4%;--ry:4%;--rr:0deg;object-fit:cover}
/* .fill — the same composition where the CELL'S ASPECT IS NOT KNOWN in advance. The tile
recipe above leans on `contain`, which only fills a cell of roughly the tile's own shape:
its vertical offset is a per cent of the cell's HEIGHT, so a wider or narrower cell moves
the panel and opens a corner. The product row on a project page is exactly that case —
the cells are sized by --product-count, so two products give wide cells and six give
narrow ones, and no single set of numbers holds.
`cover` makes the painted image fill the cell at ANY aspect, and the scale and the offsets
then only have to open the small top and right gap. The panel is cropped rather than shown
whole, which is the trade: in a strip that size it reads as the material, and it is never
the first thing a visitor sees of a product — the catalog tile and the product page both
show it whole. */
img.prodtile.fill{--rs:1.08;--rx:-4%;--ry:4%;--rr:0deg;object-fit:cover}