by JS, and a position:sticky element is trapped by its containing block — that div is only as tall as the demo bar plus the bar itself, so the header (and the bag button with it) scrolled away the moment you passed it: measured 2572px above the viewport two thirds down the homepage. `display: contents` dissolves the wrapper so the header's containing block is and it sticks for the whole page. The other half of the same bug was `overflow-x: clip` on — see the note on . zc-header-probe.mjs asserts the button is on screen and hittable on every page, both languages, both viewports. */ [data-header] { display: contents; } /* The bar joins the pastel family too. At full-strength seafoam the taupe wordmark measured 4.36:1 — the brand's own two colours are only 4.13:1 against each other, and a translucent bar over a pastel page lands right in that trap. The seafoam itself survives in .hd-mark, where it carries the monogram and nothing small. */ .hd { position: sticky; top: 0; z-index: 60; background: rgba(233, 244, 241, 0.92); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line-soft); } .hd-in { display: flex; align-items: center; gap: 12px; min-height: 60px; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); } .hd-logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .hd-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--sea); color: var(--taupe-on-brand); display: grid; place-items: center; font-family: var(--f-disp); font-size: 16px; font-weight: 600; letter-spacing: -0.06em; } .hd-name { font-family: var(--f-disp); font-size: 16.5px; letter-spacing: -0.01em; white-space: nowrap; } body[dir="rtl"] .hd-name { font-family: var(--f-ar); font-size: 16px; } .hd-nav { display: none; gap: 4px; margin-inline-start: 14px; } .hd-nav a { padding: 8px 12px; border-radius: 999px; font-size: 14.5px; color: var(--mute); transition: background .22s var(--ease), color .22s var(--ease); } .hd-nav a:hover { background: var(--sea-pale); color: var(--ink); } .hd-nav a[aria-current="page"] { color: var(--ink); background: var(--sea-pale); } .hd-right { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; } .icon-btn { border: 1px solid var(--line); background: var(--sea-pale); border-radius: 999px; height: 38px; min-width: 38px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; line-height: 1; transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); } .icon-btn:hover { border-color: var(--sea-deep); background: var(--sea-mist); } .icon-btn:active { transform: scale(0.96); } .icon-btn svg { width: 17px; height: 17px; } .bag-btn { position: relative; } .bag-n { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--taupe); color: #fff; font-size: 11px; font-weight: 600; line-height: 19px; text-align: center; transform: scale(0); transition: transform .28s var(--ease); } .bag-n.on { transform: scale(1); } @media (min-width: 880px) { .hd-nav { display: flex; } .hd-in { min-height: 70px; } } /* ============================================================ the doors The closet opens ONCE, on load, over the whole page — a curtain, not a toll gate. An earlier version drove --open from scroll, which cost a full screen of scrolling before anything could be reached and hid the features behind it. Now: the cloth folds and is drawn away in under two seconds, then the overlay is removed from the DOM entirely so nothing can ever sit on top of the page. THE FOLD (Alex's call, 2026-09-05 — option A of three; reworked 2026-09-06 for realism). Each half is NINE pleats, hinged alternately, so when they turn they concertina into each other the way a curtain gathers on its own folds. Four things make it read as cloth rather than as a mechanism: nine pleats narrow enough to read as fabric. Six read as panels. the sheen a light overlay per pleat, lit from opposite sides on alternate pleats and STRENGTHENING as the pleat turns — an oblique face catches less light. Static shading reads as a painted stripe; shading that moves reads as a fold. the lag the whole panel leans a couple of degrees from the top as it is pulled, so the hem trails behind the head, then settles. Cloth has weight; a rigid rectangle does not. the geometry each pleat slides as it turns so the folds stay joined (see zc.js — this is the part that has to be exact). The 3D is per-panel `perspective` + `rotateY` on the pleats; the panel itself only ever translates and leans. Nothing else animates: every frame is a composited transform/opacity change, which is what makes a fold this size smooth on a phone. The monogram is a ZC repeat printed INTO the cloth (a tiled SVG, ~64px), so it folds with the pleats instead of sitting on top of them. Each pleat carries the same tile shifted by its own offset (--i × one pleat width), which keeps the print continuous across the whole panel rather than restarting nine times. */ .door-set { position: fixed; inset: 0; z-index: 500; pointer-events: none; /* never blocks a tap, even mid-animation */ overflow: hidden; } .door { position: absolute; inset-block: 0; width: 50.6%; display: flex; /* the perspective lives on the PANEL, so the pleats turn in 3D while the panel's own travel stays a flat, cheap 2D transform */ perspective: 1000px; perspective-origin: 50% 40%; will-change: transform, opacity; } /* Pinned PHYSICALLY, not logically. The curtain carries no text now, so there is nothing about it to mirror — and with logical insets the left panel became the right one under RTL while the JS still drove it to the left, so in Arabic the two halves crossed over each other. The origin is at the TOP because that is where a curtain hangs from: the lean pivots there, and rotateY is unaffected by the origin's height. */ .door-l { left: 0; transform-origin: left top; } .door-r { right: 0; transform-origin: right top; } .pleat { --sw: calc(50.6vw / 9); /* one pleat: the panel divided nine ways */ flex: 1 1 0; position: relative; background-color: var(--sea); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%235d4f46' fill-opacity='0.30' font-family='Georgia,Times,serif' font-size='17'%3E%3Ctext x='4' y='22' transform='rotate(-7 4 22)'%3EZC%3C/text%3E%3Ctext x='34' y='54' transform='rotate(6 34 54)'%3EZC%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 64px 64px; background-position: calc(var(--i, 0) * var(--sw) * -1) 0; backface-visibility: hidden; will-change: transform; } /* the right half prints from a different phase, so the two halves are not mirror images of each other across the seam */ .door-r .pleat { background-position: calc(var(--i, 0) * var(--sw) * -1 - 23px) 31px; } /* The light on the cloth. Alternate pleats catch it from opposite sides, and JS animates this element's opacity as the pleat turns — flat while the curtain is closed, full strength once the folds are made. It is a real element rather than a pseudo so ONE timeline drives both the turn and the light; a CSS keyframe would be a second copy of the timing to keep in sync. It rests at .46, not at nothing: a closed curtain still has pleats in it. The first pass rested at .26 and the closed state read as flat paint. */ .sheen { position: absolute; inset: 0; opacity: .46; background: linear-gradient(90deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.06) 42%, rgba(22,60,55,.34) 100%); will-change: opacity; } .pleat:nth-child(even) .sheen { background: linear-gradient(90deg, rgba(22,60,55,.34) 0%, rgba(255,255,255,.06) 58%, rgba(255,255,255,.40) 100%); } /* the seam light — a bright edge where the two halves meet. It rides the innermost pleat, not the panel, so it travels with the cloth as it gathers */ .door-l .pleat:last-child::before, .door-r .pleat:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; width: 12px; z-index: 1; } .door-l .pleat:last-child::before { right: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.46)); } .door-r .pleat:first-child::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,0)); } /* ============================================================ the hero A normal section — sized so the closets strip below always peeks into view, which is what tells you the page keeps going. Behind the words: the boutique itself, moving. Jasmine grows in from the edges (jasmine is the Levantine flower, and its white-and-green is already in the brand). */ .hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(400px, 56svh, 560px); padding: clamp(40px, 8vw, 78px) var(--pad); text-align: center; background: var(--paper); } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; /* Frame it low. The model's dark hair sits in the upper third of the shot, which is exactly where the headline lands — measured at 2.0:1. Pushing the crop down puts the pale dress, the floor and the hanging rail behind the copy instead, which fixes the contrast with composition rather than paint. */ object-position: 50% 74%; /* Alex wants the film to READ, not sit under a slab of paint. So the footage is lifted into the page's own key instead of being hidden: brightened a little and flattened in contrast so its darks come up enough for dark taupe copy to sit on. It keeps its own colour: the teal cloud that looked like the footage's fault was never the footage — it was the seafoam disc behind the copy, below. Tuned against the measured numbers, not by eye. */ filter: saturate(0.8) brightness(1.14) contrast(0.92); } /* The veil keeps the ink legible without hiding the shop. A pale veil, not a black one: the page is light, and darkening it would force white text and break the brand's airiness. The radial bloom sits under the copy. Retinted 2026-09-04, then simplified 2026-09-05. The radial bloom under the copy was a saturated teal disc (#95c7c0) floating on a page of #e9f4f1 — Alex read it as "the blue part", and he was right: it was the one shape on the page that belonged to no surface. It is gone. What is left is a flat wash in the page's own tone, light enough that the rail and the room read through it. That wash is the only thing standing between the copy and moving footage, so legibility is measured on the real composited pixels, per element, at the threshold WCAG actually sets for that element's size — see zc-contrast-probe.mjs + zc-hero-contrast.mjs. */ .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* WHITE, not the page's green. This is the whole answer to "remove the blue part", and it took measuring the layers one at a time to see it: a green veil over greyscale footage has nothing to blend into, so its tint reads as a mint cloud floating in the middle of the frame — brightest where the gradient is strongest, which is exactly where the copy sits. Neutral white over monochrome film simply lightens it. No hue, no cloud, no shape. The colour on this page comes from the ground and the jasmine; the hero is a photograph, and it is allowed to look like one. */ radial-gradient(130% 92% at 50% 48%, rgba(255,255,255,.84), rgba(255,255,255,.48) 58%, rgba(255,255,255,.26)), linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.36) 40%, rgba(255,255,255,.44) 78%, rgba(233,244,241,.72)); } /* ---------------------------------------------------------------- jasmine */ .hero-flora { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .hero-flora span { position: absolute; background-repeat: no-repeat; background-size: contain; opacity: .92; will-change: transform; } /* left sprig arcs in from the top corner, right one climbs from the bottom */ .hero-flora .fl-a { inset-inline-start: clamp(-42px, -6vw, -18px); inset-block-start: clamp(-30px, -4vw, -10px); width: clamp(96px, 21vw, 300px); height: clamp(155px, 34vw, 490px); background-image: url("../img/site/jasmine-a.webp"); background-position: top left; transform-origin: top left; animation: sway-a 13s ease-in-out infinite alternate; } .hero-flora .fl-b { inset-inline-end: clamp(-38px, -5vw, -14px); inset-block-end: clamp(-40px, -5vw, -16px); width: clamp(84px, 18vw, 250px); height: clamp(175px, 38vw, 540px); background-image: url("../img/site/jasmine-b.webp"); background-position: bottom right; transform-origin: bottom right; animation: sway-b 17s ease-in-out infinite alternate; } /* RTL mirrors the composition, so mirror the sprigs too or they point the wrong way out of their corners */ /* RTL mirrors the composition, so the sprigs have to point the other way. Do NOT mirror with `scale: -1 1`: the `scale` property shares `transform-origin` with the sway transform, and reflecting about a corner origin translates the whole sprig a full width INWARD — which is how the jasmine ended up growing across the Arabic headline. Mirror the artwork itself instead; the box never moves, and the sway keeps its own pivot. */ body[dir="rtl"] .hero-flora .fl-a { background-image: url("../img/site/jasmine-a-rtl.webp"); background-position: top right; transform-origin: top right; } body[dir="rtl"] .hero-flora .fl-b { background-image: url("../img/site/jasmine-b-rtl.webp"); background-position: bottom left; transform-origin: bottom left; } /* On a phone the copy fills almost the whole hero, so the sprigs have to stay corner accents — measured: a leaf under the kicker dropped it to 2.5:1. */ @media (max-width: 620px) { .hero-flora span { opacity: .72; } .hero-flora .fl-a { width: 88px; height: 118px; inset-block-start: -14px; inset-inline-start: -20px; } .hero-flora .fl-b { width: 74px; height: 132px; inset-block-end: -18px; inset-inline-end: -16px; } } @keyframes sway-a { from { transform: rotate(-1.4deg) translate3d(0, 0, 0); } to { transform: rotate(1.9deg) translate3d(0, 7px, 0); } } @keyframes sway-b { from { transform: rotate(1.6deg) translate3d(0, 0, 0); } to { transform: rotate(-1.5deg) translate3d(0, -8px, 0); } } .hero-in { position: relative; z-index: 3; max-width: min(680px, 100%); } /* The copy carries its own ground. Without this, contrast depends on which video frame is showing and on whether a jasmine leaf has drifted behind a word — measured 2.49:1 on a leaf at 390px. THIS was "the blue part" (Alex, 2026-09-05). It was full-strength brand seafoam at .97 alpha, so it read as a solid teal disc floating over the footage — the one shape on the page that belonged to no surface. Worth recording how long it hid: every isolation pass I ran hid `.hero-in` to measure the backdrop behind the copy, and `visibility: hidden` takes its ::before with it. The layer causing the problem was invisible in the very tests built to find it, and the veil and the video both got blamed first. When a probe hides an element to look behind it, it is also hiding that element's pseudo-elements — check them by name, not by elimination. It is now white and much softer, so it lightens the film instead of colouring it, and it still does its job of making the copy's ground independent of the frame. */ .hero-in::before { content: ""; position: absolute; z-index: -1; inset: -26% -30%; /* farthest-side, not closest-side. On a box wider than it is tall, closest-side sizes the ellipse to the HALF-HEIGHT, so it never reached the outer words of the paragraph — which is exactly where the worst pixel was, and why strengthening the stops moved the measured number by nothing at all (4.55:1, three runs, identical). farthest-side spans the whole box. */ background: radial-gradient(farthest-side, rgba(255,255,255,.78), rgba(255,255,255,.56) 52%, rgba(255,255,255,.22) 78%, transparent); } /* ---------------------------------------------------------- the typing Every character is in the DOM from the first paint; only opacity moves, so a balanced two-line headline never reflows while it types. Words are nowrap so a line breaks between words, never inside one. */ .tw-w { white-space: nowrap; } /* Each glyph resolves from a slight blur into focus as the sweep reaches it, instead of cutting in hard — the same trigger (.on), a softer arrival. */ .tw-c { opacity: 0; filter: blur(4px); transition: opacity .18s var(--ease), filter .24s var(--ease); } .tw-c.on { opacity: 1; filter: blur(0); } .hero h1.typing .tw-c.caret { position: relative; } .hero h1.typing .tw-c.caret::after { content: ""; position: absolute; inset-block: .08em .06em; inset-inline-end: -.08em; width: 2px; background: var(--taupe); opacity: .75; animation: tw-blink .9s steps(1, end) infinite; } @keyframes tw-blink { 0%, 49% { opacity: .75 } 50%, 100% { opacity: 0 } } /* the rest of the hero arrives once the line has finished writing itself */ .hero-in p, .hero-in .hero-cta { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .hero-in.typed p { opacity: 1; transform: none; transition-delay: .05s; } .hero-in.typed .hero-cta { opacity: 1; transform: none; transition-delay: .16s; } /* Every other headline carries a caret while it writes, exactly like the hero's — the effect is one voice, not two. */ h1.typing .tw-c.caret, h2.typing .tw-c.caret { position: relative; } h1.typing .tw-c.caret::after, h2.typing .tw-c.caret::after { content: ""; position: absolute; inset-block: .08em .06em; inset-inline-end: -.08em; width: 2px; background: var(--taupe); opacity: .75; animation: tw-blink .9s steps(1, end) infinite; } /* The block a headline introduces arrives with it. `.rv` is only ever added by JS, and only when an observer exists to add `.rv-on` — nothing can be left invisible. */ .rv { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .rv-on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .tw-c { opacity: 1 !important; filter: none !important; } h1.typing .tw-c.caret::after, h2.typing .tw-c.caret::after { display: none; } .hero-in p, .hero-in .hero-cta { opacity: 1 !important; transform: none !important; } .rv, .rv-on { opacity: 1 !important; transform: none !important; transition: none; } } .hero .in-k { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #24473f; font-weight: 500; margin-bottom: 14px; } /* The kicker is the shop's name AND the pin. It has to stay a small quiet line, so the only affordance is the pin glyph and an underline on hover — never a button. */ .hero a.in-k-map { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border-bottom: 1px solid rgba(36,71,63,.28); padding-bottom: 3px; transition: border-color .2s var(--ease), color .2s var(--ease); } .hero a.in-k-map svg { flex: none; opacity: .8; } .hero a.in-k-map:hover { border-bottom-color: rgba(36,71,63,.7); } .hero a.in-k-map:focus-visible { outline: 2px solid var(--taupe); outline-offset: 4px; border-radius: 3px; } /* One light pass over her name on arrival — a single sweep, never a loop. Literal hex stops, not currentColor: currentColor would resolve against this SAME element's own color, which the text-fill-color trick sets to transparent, collapsing the whole gradient to nothing. */ .in-k > span[data-i18n] { background-image: linear-gradient(100deg, #24473f 0%, #24473f 42%, #cfeee7 50%, #24473f 58%, #24473f 100%); background-size: 280% 100%; background-position: 220% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: in-k-shine 1.7s var(--ease) .7s 1 both; } @keyframes in-k-shine { to { background-position: -140% 0; } } /* the "Where" line in the visit block opens the same pin */ /* anchors are undecorated site-wide, so this one says so for itself */ .visit .map-a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(93,79,70,.45); } .visit .map-a:hover { text-decoration-color: currentColor; } .visit .map-a:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; border-radius: 3px; } body[dir="rtl"] .hero .in-k { letter-spacing: 0; } .hero h1 { margin: 0 0 16px; font-size: clamp(34px, 8vw, 68px); text-wrap: balance; } .hero p { margin: 0 auto 26px; max-width: 40ch; color: #4c443d; font-size: clamp(15px, 3.6vw, 18px); } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* ============================================================ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 500; line-height: 1; transition: transform .14s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .btn:active { transform: scale(0.975); } .btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .btn-solid { background: var(--taupe); color: #fff; } .btn-solid:hover { background: #4c4139; box-shadow: var(--shadow-1); } .btn-sea { background: var(--sea); color: var(--taupe-on-brand); } .btn-sea:hover { background: var(--sea-deep); color: #fff; } .btn-wa { background: #25d366; color: #06331a; } .btn-wa:hover { background: #1fbe5a; } .btn-line { background: var(--sea-pale); border-color: var(--line); color: var(--ink); } .btn-line:hover { border-color: var(--sea-deep); background: var(--sea-mist); } .btn-block { width: 100%; } .btn-sm { padding: 9px 15px; font-size: 13.5px; } /* ============================================================ sections */ .sec { padding-block: clamp(48px, 9vw, 104px); } /* The step between two sections — a translucent lift over the atmosphere, with a hairline on each edge. Alternate sections sit a shade lighter than the ground, which is what gives the page its quiet rhythm without ever introducing a second colour. */ .sec-pale { background: var(--lift); border-block: 1px solid var(--line-soft); } /* and a shade deeper, for a section that should feel like a recess */ .sec-sink { background: var(--sink); border-block: 1px solid var(--line-soft); } .sec-head { margin-bottom: clamp(22px, 4vw, 40px); } .k { font-size: 11.5px; letter-spacing: 0.19em; text-transform: uppercase; color: #24473f; margin-bottom: 10px; } body[dir="rtl"] .k { letter-spacing: 0; } .sec-head h2 { margin: 0 0 10px; font-size: clamp(27px, 6.4vw, 46px); } .sec-head p { margin: 0; color: var(--mute-on-brand); max-width: 56ch; font-size: 15.5px; } /* ========================================================== brand ethos The introduction has to work as a pause after the moving shop entrance, not compete with it. On a phone the values remain a calm numbered list; only on wider screens do they become the equal visual counterweight. */ .ethos { background: var(--lift); border-block: 1px solid var(--line-soft); } .ethos-grid { display: grid; gap: clamp(30px, 6vw, 76px); } .ethos-copy { max-width: 61ch; } .ethos-copy h2 { margin: 0 0 16px; font-size: clamp(30px, 7.2vw, 53px); } .ethos-copy p { margin: 0; color: var(--mute); font-size: 15.5px; } .ethos-copy p + p { margin-top: 13px; } .ethos-values { display: grid; border-top: 1px solid var(--line); } .ethos-value { display: flex; align-items: baseline; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); } .ethos-value span { color: var(--sea-ink); font-size: 12px; letter-spacing: .1em; } .ethos-value strong { font-family: var(--f-disp); font-size: clamp(23px, 5.5vw, 31px); font-weight: 400; } body[dir="rtl"] .ethos-value strong { font-family: var(--f-ar); } @media (min-width: 800px) { .ethos-grid { grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); align-items: end; } } /* ============================================================ the grid Clothes used to hang from a drawn rail, with a hook over each card and a sway driven by scroll velocity. Alex's call 2026-09-05: it read as fast fashion, and it made every photograph fight a piece of furniture. The pieces are the point, so the page is now a quiet editorial run — two up on a phone, wide gutters, nothing rotating, nothing drawn around them. */ .grid { display: grid; gap: 30px 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 46px 26px; } } @media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 56px 32px; } } @media (min-width: 1320px) { .grid { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; display: flex; flex-direction: column; text-align: start; background: none; border: 0; padding: 0; } .card-img { display: block; position: relative; overflow: hidden; border-radius: var(--r); background: var(--sea-pale); /* A taller frame than the old 3:4 — the garments are full length and the page is now about showing them. */ aspect-ratio: 4 / 5.4; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform 1.1s var(--ease); } .card-img .alt-img { position: absolute; inset: 0; opacity: 0; } .card:hover .card-img .main-img { opacity: 0; } .card:hover .card-img .alt-img { opacity: 1; } .card:hover .card-img img { transform: scale(1.045); } /* Cursor-follow tilt + shine, cards' own version of the curtain's light-catching cloth. Scoped to (hover: hover) + (pointer: fine): a touch screen has no pointermove to drive --mx/--rx, so the rule never matches there and the transform stays at rest — no extra CSS needed to gate it a second time on the JS side beyond skipping the listener entirely. */ @media (hover: hover) and (pointer: fine) { .card { perspective: 800px; } .card-img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); } .card:hover .card-img { transition-duration: .12s; } .card-shine { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 60%); mix-blend-mode: soft-light; transition: opacity .35s var(--ease); } .card:hover .card-shine { opacity: 1; } } .tag-ai { position: absolute; inset-block-end: 9px; inset-inline-end: 9px; background: rgba(145,198,190,.92); color: var(--mute-on-brand); font-size: 10px; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 999px; } /* Titles run to one or two lines, so a plain block would leave each card's price at a different height across a row. The body is a column that grows, and the price block is pushed to its foot — the prices line up. */ .card-b { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 2px 0; } .card-t { display: block; font-family: var(--f-disp); font-size: 16.5px; line-height: 1.25; margin: 0 0 3px; } body[dir="rtl"] .card-t { font-family: var(--f-ar); } .card-k { display: block; font-size: 12.8px; color: var(--mute-on-brand); margin: 0 0 7px; line-height: 1.45; } .card-p { display: block; font-size: 15px; font-weight: 600; margin-top: auto; } .card-p .cur { font-size: 12.5px; font-weight: 400; color: var(--mute-on-brand); margin-inline-end: 2px; } /* The sizes moved here from the filter bar above the grid (Alex, 2026-09-05): what a shopper wants to know is whether THIS piece comes in her size, and that answer belongs under the piece, not in a control at the top of the page. Quiet by design — it is information, not a set of buttons. */ .card-sz { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .card-sz .card-z { font-size: 11.5px; line-height: 1; letter-spacing: .05em; color: var(--mute-on-brand); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .card-sz .card-z:hover, .card-sz .card-z:focus-visible { background: var(--sea); border-color: var(--sea); color: var(--taupe-on-brand); } /* how many pictures this piece has — only shown when there is more than one */ .tag-more { position: absolute; inset-block-end: 9px; inset-inline-start: 9px; background: rgba(255,255,255,.92); color: var(--mute-on-brand); font-size: 10.5px; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; } /* ============================================================ the drawer Accessories sit in a lined jewellery drawer — fitted recesses in a felt tray, lit from above. Nothing sways here; it's the quiet opposite of the rail. */ .tray { background: radial-gradient(120% 70% at 50% -10%, var(--sea-pale), transparent 62%), var(--sea-sink); border-radius: 20px; padding: clamp(14px, 3.4vw, 30px); border: 1px solid var(--line-soft); box-shadow: inset 0 2px 14px rgba(52, 96, 90, 0.09); } .tray + .tray { margin-top: 18px; } .tray-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .tray-h h3 { margin: 0; font-family: var(--f-disp); font-size: 19px; } body[dir="rtl"] .tray-h h3 { font-family: var(--f-ar); } .tray-h span { font-size: 12.5px; color: var(--mute); } .recess .card-img { background: radial-gradient(80% 60% at 50% 12%, var(--sea-pale), var(--sea-sink) 72%); border-radius: 16px; aspect-ratio: 1 / 1; } /* the recess rim sits OVER the photo, so the piece looks set into the tray */ .recess .card-img::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: inset 0 3px 12px rgba(93, 79, 70, 0.22), inset 0 0 0 1px rgba(93, 79, 70, 0.08); } .recess .card-img img { object-fit: cover; } .recess:hover .card-img img { transform: scale(1.06) translateY(-2px); } /* ============================================================ filters */ .filters { position: sticky; top: 60px; z-index: 40; background: rgba(233, 244, 241, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); padding-block: 11px; margin-bottom: 26px; } @media (min-width: 880px) { .filters { top: 70px; } } .filters-in { max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; gap: 9px; } /* Search is the only control in this bar now that the size chips are gone (sizes live under each piece). It no longer has to share the row, so it opens to a readable width instead of a 42px puck. */ .filters-in .search { flex: 1 1 auto; max-width: 420px; } .filters-in .search input { width: 100%; } .search { position: relative; flex: 0 0 auto; } .search input { width: 42px; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--sea-pale); font: inherit; font-size: 14px; color: var(--ink); transition: width .3s var(--ease), border-color .2s var(--ease); } body[dir="rtl"] .search input { padding: 0 34px 0 12px; } .search svg { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; translate: 0 -50%; width: 15px; height: 15px; color: var(--mute); pointer-events: none; } .count { font-size: 13px; color: var(--mute-on-brand); margin-bottom: 16px; } .empty { text-align: center; padding: 60px 20px; color: var(--mute-on-brand); } .empty p { margin: 0 0 16px; } /* ============================================================ quick view */ .sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgba(42, 36, 31, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .sheet-bg.on { opacity: 1; pointer-events: auto; } .sheet { position: fixed; z-index: 91; inset-inline: 0; inset-block-end: 0; max-height: 92svh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-2); transform: translate3d(0, 101%, 0); transition: transform .42s var(--ease-door); -webkit-overflow-scrolling: touch; } .sheet.on { transform: translate3d(0, 0, 0); } @media (min-width: 800px) { .sheet { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; width: min(460px, 92vw); max-height: none; border-radius: 0; transform: translate3d(101%, 0, 0); } body[dir="rtl"] .sheet { transform: translate3d(-101%, 0, 0); } .sheet.on, body[dir="rtl"] .sheet.on { transform: translate3d(0, 0, 0); } } .sheet-grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line); margin: 10px auto 0; } @media (min-width: 800px) { .sheet-grab { display: none; } } .sheet-x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: rgba(233,244,241,.96); display: grid; place-items: center; } .sheet-in { padding: 16px var(--pad) 26px; } /* The gallery. A piece can carry a front, a back and her own photographs of the actual garment, so the quick view is a scroll-snap track: swiped with a thumb on a phone, dragged or tabbed on a desktop. The dots follow the track (JS listens to its scroll), and the thumbnails below drive the same track — they are one control shown twice, not two competing ones. */ .qv-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); background: var(--sea-pale); aspect-ratio: 3 / 4; margin-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .qv-gal::-webkit-scrollbar { display: none; } .qv-slide { flex: 0 0 100%; scroll-snap-align: center; } .qv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .qv-gal.contain { aspect-ratio: 1/1; background: radial-gradient(80% 60% at 50% 12%, var(--sea-pale), var(--sea-sink) 72%); } .qv-gal.contain .qv-slide img { object-fit: contain; padding: 8%; } .qv-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; } .qv-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: background .2s var(--ease), width .2s var(--ease); } .qv-dots span.on { background: var(--taupe); width: 18px; } /* Six shots wrapped to a second row with one orphan on a 390px screen. The strip scrolls sideways instead — it is a filmstrip, not a grid. */ .qv-thumbs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .qv-thumbs::-webkit-scrollbar { display: none; } .qv-thumbs button { flex: 0 0 auto; } .qv-thumbs button { width: 54px; height: 66px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--sea-pale); padding: 0; } .qv-thumbs button[aria-pressed="true"] { border-color: var(--taupe); border-width: 2px; } .qv-thumbs img { width: 100%; height: 100%; object-fit: cover; } .qv h2 { margin: 0 0 5px; font-size: 25px; } .qv-kind { color: var(--mute); font-size: 14.5px; margin: 0 0 14px; } .qv-price { font-size: 22px; font-weight: 600; margin-bottom: 18px; } .qv-price .cur { font-size: 14px; font-weight: 400; color: var(--mute); } .qv-note { background: var(--sea-mist); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 13px; font-size: 13.5px; color: var(--mute); margin-bottom: 18px; } .lbl { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 9px; } body[dir="rtl"] .lbl { letter-spacing: 0; } .sizes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .size { min-width: 46px; padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sea-pale); font-size: 14px; line-height: 1; transition: all .18s var(--ease); } .size:hover { border-color: var(--sea-deep); } .size[aria-pressed="true"] { background: var(--taupe); border-color: var(--taupe); color: #fff; } .qv-acts { display: grid; gap: 9px; } /* ============================================================ the bag */ .bag-line { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); } .bag-line img { width: 62px; height: 78px; object-fit: cover; border-radius: 8px; background: var(--sea-pale); flex: 0 0 auto; } .bag-line .bl-b { flex: 1 1 auto; min-width: 0; } .bag-line h4 { margin: 0 0 3px; font-family: var(--f-disp); font-size: 15.5px; } body[dir="rtl"] .bag-line h4 { font-family: var(--f-ar); } .bag-line .bl-s { font-size: 12.5px; color: var(--mute); margin-bottom: 7px; } .qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; } .qty button { width: 28px; height: 28px; border: 0; background: none; border-radius: 999px; line-height: 1; } .qty button:hover { background: var(--sea-pale); } .qty span { min-width: 22px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } .bl-p { margin-inline-start: auto; font-weight: 600; font-size: 14.5px; white-space: nowrap; } .totals { margin: 16px 0 18px; font-size: 14.5px; } .totals div { display: flex; justify-content: space-between; padding: 5px 0; } .totals .grand { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 600; } .ship-note { font-size: 12.5px; color: var(--sea-ink); background: var(--sea-mist); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 16px; } /* ============================================================ strips */ .strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .cat-card { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: var(--sea-pale); display: block; } .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .cat-card:hover img { transform: scale(1.045); } .cat-card .cc-b { display: block; position: absolute; inset-block-end: 0; inset-inline: 0; padding: 14px 16px 15px; /* A solid seafoam plate, not a scrim. White-on-photo measured 1.9:1 over these bright studio shots, and a scrim strong enough to fix that would have put a black band on a one-colour site. The plate is on-brand and its contrast does not depend on the photograph behind it. */ background: var(--sea); border-top: 1px solid var(--line); color: var(--taupe-on-brand); } .cat-card h3 { margin: 0 0 3px; font-family: var(--f-disp); font-size: 22px; } body[dir="rtl"] .cat-card h3 { font-family: var(--f-ar); } .cat-card p { margin: 0; font-size: 13px; color: var(--mute-on-brand); } /* ============================================================ the menu A side drawer: every closet, and the shelves inside it. The closet name is a link to the whole closet; the arrow beside it opens the shelves. Two taps to any shelf from any page. */ .sheet-side { inset-block: 0; inset-inline-end: auto; inset-inline-start: 0; width: min(360px, 88vw); max-height: 100svh; border-radius: 0 22px 22px 0; transform: translate3d(-101%, 0, 0); padding-block-start: 8px; } /* RTL only flips the TRANSFORM and the corners. The drawer stays pinned with `inset-inline-start`, which is already the same side as the menu button in both directions — re-pinning it to inline-end here put it on the physical left in Arabic and then slid it right, straight into the middle of the page, where it silently swallowed every tap. */ body[dir="rtl"] .sheet-side { border-radius: 22px 0 0 22px; transform: translate3d(101%, 0, 0); } .sheet-side.on, body[dir="rtl"] .sheet-side.on { transform: translate3d(0, 0, 0); } .mn-btn { flex: 0 0 auto; } .mn-btn svg { width: 19px; height: 19px; } /* The drawer is a full-height column so the WhatsApp block can be pushed to the BOTTOM OF THE SCREEN when the list is short, and simply follow the list when it is long — `margin-top: auto` does both. The sheet scrolls, so the height has to come from the sheet's own padded box, not from svh. */ .mn { display: flex; flex-direction: column; gap: 2px; min-height: calc(100svh - 58px); } .mn-wa { margin-block-start: auto; padding-block-start: 22px; } .mn-c { border-bottom: 1px solid var(--line-soft); } .mn-row { display: flex; align-items: center; gap: 4px; } .mn-top { flex: 1 1 auto; display: flex; align-items: baseline; gap: 9px; padding: 15px 2px; font-family: var(--f-disp); font-size: 20px; } body[dir="rtl"] .mn-top { font-family: var(--f-ar); } .mn-x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; border-radius: 999px; transition: background .18s var(--ease); } .mn-x svg { width: 19px; height: 19px; transition: transform .28s var(--ease); } .mn-x:hover { background: var(--sea-pale); } .mn-c.on .mn-x svg { transform: rotate(180deg); } /* The drawer's own pleats: each block of the list cascades in a beat behind the one before it, instead of the whole drawer arriving as one flat sheet. --i is set once, freshly, every time renderMenu() rebuilds the list (see zc.js), so a language toggle mid-open replays the cascade rather than leaving stale delays on recycled nodes. */ @keyframes mn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .mn > * { animation: mn-in .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); } .mn-n { font-family: var(--f-body); font-size: 12px; color: var(--mute); font-weight: 400; letter-spacing: 0; } /* the shelves: closed by default, opened by the arrow */ /* The 0fr → 1fr reveal has to wrap the WHOLE list in ONE grid item. `grid-template-rows: 0fr` declares a single explicit row: with the

s as the grid items, only the FIRST shelf landed in that row and every other one fell into an implicit auto row — so a collapsed closet quietly showed all of its shelves except the first. (Found 2026-09-05, in the drawer's first screenshot after it was flipped.) The wrapper is the one item; the list inside it is ordinary flow. */ .mn-subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); } .mn-c.on .mn-subwrap { grid-template-rows: 1fr; } .mn-subwrap > .mn-sub { min-height: 0; overflow: hidden; } .mn-sub { list-style: none; margin: 0; padding: 0; } .mn-sub li:first-child { padding-block-start: 2px; } .mn-sub li:last-child { padding-block-end: 12px; } .mn-sub a { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px 10px 16px; font-size: 15px; color: var(--mute); border-inline-start: 2px solid var(--line-soft); margin-inline-start: 4px; transition: color .18s var(--ease), border-color .18s var(--ease); } body[dir="rtl"] .mn-sub a { padding: 10px 16px 10px 2px; } .mn-sub a:hover { color: var(--ink); border-color: var(--sea-deep); } /* The quick links now sit ABOVE the closets (the drawer was flipped, 2026-09-05), so the block needs a rule under it rather than over it. The WhatsApp button went to the FOOT of the drawer, 2026-09-06 (Alex): it is where a thumb already is, and it stopped the drawer opening on a block of green before the shop itself. */ .mn-head { display: flex; flex-direction: column; gap: 2px; padding-block-end: 4px; } .mn-plain { padding: 11px 2px; font-size: 15px; color: var(--mute); } .mn-plain:hover { color: var(--ink); } /* the button at the foot of the drawer — straight to the questions */ .mn-faq { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 18px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sea-pale); color: var(--ink); font-size: 15.5px; font-weight: 500; transition: background .2s var(--ease), border-color .2s var(--ease); } .mn-faq:hover { background: var(--sea-mist); border-color: var(--sea-deep); } .mn-faq-x { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mute); } .mn-faq-x svg { width: 20px; height: 20px; transform: rotate(-90deg); } body[dir="rtl"] .mn-faq-x svg { transform: rotate(90deg); } /* which shelf you are looking at, and one tap back to the whole closet */ /* The shelf rail. It WRAPS rather than scrolling sideways: eight chips at 390px come to three short lines, and every one of them is on screen — a horizontal rail would hide half the closet behind a swipe nobody is told about. */ .shelf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .shelf-chip { border: 1px solid var(--line); background: none; color: var(--mute); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .shelf-chip:hover { border-color: var(--sea-deep); color: var(--ink); } .shelf-chip.on { background: var(--sea); border-color: var(--sea); color: var(--taupe-on-brand); } .shelf-chip.on:hover { color: var(--taupe-on-brand); } /* The season chip is a different KIND of filter from a shelf — an edit, not a drawer — so it carries a soft fill when it is off. Quiet enough that the rail still reads as one row; distinct enough that the reader who arrived from the homepage recognises where she landed. */ .shelf-chip.season { background: var(--sea-pale); border-color: var(--sea-pale); color: var(--ink); } .shelf-chip.season:hover { border-color: var(--sea-deep); } .shelf-chip.season.on { background: var(--sea); border-color: var(--sea); color: var(--taupe-on-brand); } /* ====================================================== the size guide */ .lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sg-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; color: var(--mute); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; letter-spacing: 0; text-transform: none; } .sg-btn svg { width: 15px; height: 15px; } .sg-btn:hover { border-color: var(--sea-deep); color: var(--ink); } .sg h2 { margin: 0 0 8px; font-size: 24px; } .sg-lead { color: var(--mute); font-size: 14.5px; margin: 0 0 20px; } .sg h3 { margin: 22px 0 8px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); } body[dir="rtl"] .sg h3 { letter-spacing: 0; } .sg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sg-t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 320px; } .sg-t th, .sg-t td { padding: 9px 8px; text-align: start; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .sg-t th { font-weight: 500; color: var(--mute); font-size: 12.5px; } .sg-t tbody tr:nth-child(odd) { background: var(--lift); } .sg .qv-note { margin-block: 20px 16px; } /* ============================================================ the FAQ */ .faq { border-top: 1px solid var(--line-soft); } .faq-i { border-bottom: 1px solid var(--line-soft); } .faq-i summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; font-family: var(--f-disp); font-size: 18px; line-height: 1.35; } body[dir="rtl"] .faq-i summary { font-family: var(--f-ar); } .faq-i summary::-webkit-details-marker { display: none; } .faq-x { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mute); } .faq-x svg { width: 22px; height: 22px; transition: transform .26s var(--ease); } .faq-i[open] .faq-x svg { transform: rotate(180deg); } .faq-a { padding: 0 2px 20px; color: var(--mute); font-size: 15px; max-width: 62ch; } .faq-cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .faq-cta p { margin: 0; color: var(--mute); font-size: 15px; } /* ================================================= what goes with what The strip on the clothes page and the smaller one inside the bag. Two buttons per card on purpose: the picture opens the piece, and the button under it either adds a one-size piece or opens it to ask which size — it never guesses a size on a customer's behalf. */ /* the filter bar is sticky on this page, so anything scrolled to must clear the header AND that bar or it lands underneath them */ .goes-sec { padding-block: clamp(34px, 6vw, 64px) clamp(48px, 9vw, 92px); scroll-margin-block-start: 128px; } .goes-sec .sec-head h2 { font-size: clamp(24px, 5.6vw, 36px); } .pairs { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pair { display: flex; flex-direction: column; background: var(--lift); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; transition: border-color .2s var(--ease); } .pair:hover { border-color: var(--sea-deep); } .pair-open { display: flex; flex-direction: column; gap: 2px; border: 0; background: none; padding: 0 0 8px; cursor: pointer; font: inherit; color: inherit; text-align: start; width: 100%; } .pair-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sea-sink); } .pair-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); } .pair-open:hover .pair-img img { transform: scale(1.04); } .pair-t { padding: 10px 12px 0; font-size: 14px; line-height: 1.35; } .pair-p { padding: 0 12px; font-size: 14px; color: var(--mute); } .pair-add { margin: 0 10px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .pair-add:hover { background: var(--taupe); border-color: var(--taupe); color: #fff; } /* inside the bag: three across even on a phone, and no hover scale — the sheet is a small space and this must not shout over the order itself */ /* no rule of its own — the last bag line already draws one */ .bag-goes { margin: 18px 0 8px; } .bag-goes h3 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--mute); letter-spacing: .04em; } body[dir="rtl"] .bag-goes h3 { letter-spacing: 0; } .pairs-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .pairs-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pairs-sm .pair-t { padding: 8px 8px 0; font-size: 12.5px; } .pairs-sm .pair-p { padding: 0 8px; font-size: 12.5px; } .pairs-sm .pair-add { margin: 0 7px 7px; padding: 8px 6px; font-size: 12px; } .pairs-sm .pair-open:hover .pair-img img { transform: none; } /* ======================================================== the checkout Her side of the counter. Mobile is one column — the order first, so she can see what she is paying for before she starts typing — and on a wide screen the order moves to a sticky column beside the form so the total never scrolls away while the address is being filled in. The fields borrow the feedback form's controls (one input style on the site, not two) and add what an address in Lebanon actually needs: a governorate, and a landmark. */ .co-main { padding-block: clamp(20px, 5vw, 44px) clamp(56px, 10vw, 110px); } .co-head { margin-bottom: clamp(22px, 4vw, 34px); max-width: 46ch; } .co-head h1 { margin: 0 0 10px; font-size: clamp(28px, 7vw, 44px); } .co-head p { margin: 0; color: var(--mute); font-size: 15.5px; } .co-cols { display: flex; flex-direction: column-reverse; gap: clamp(24px, 4vw, 40px); } @media (min-width: 900px) { .co-cols { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; } } .co-sec { margin-bottom: clamp(22px, 3.5vw, 32px); } .co-sec h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; } body[dir="rtl"] .co-sec h2 { letter-spacing: 0; } .co-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 560px) { .co-grid { grid-template-columns: 1fr 1fr; } .co-wide { grid-column: 1 / -1; } } .co-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .co-f > span { font-size: 13px; color: var(--mute); letter-spacing: .02em; } .co-opt { font-style: normal; opacity: .72; font-size: 12px; } .co-f input, .co-f select, .co-f textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--lift); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; min-width: 0; /* native chrome ignores the box model otherwise — iOS renders its own control past the field's edge on a narrow phone */ -webkit-appearance: none; appearance: none; transition: border-color .18s var(--ease); } .co-f textarea { resize: vertical; min-height: 84px; } .co-f select { /* the arrow has to be drawn back on once appearance is stripped */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236b5c52' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 12px center; padding-inline-end: 38px; } body[dir="rtl"] .co-f select { background-position: left 12px center; padding-inline-end: 14px; padding-inline-start: 38px; } .co-f input:focus, .co-f select:focus, .co-f textarea:focus { outline: none; border-color: var(--sea-deep); box-shadow: 0 0 0 3px rgba(145, 198, 190, .32); } .co-f [aria-invalid="true"] { border-color: var(--sale); } .co-hint { font-size: 12.5px; color: var(--mute); opacity: .9; } .co-err:empty { display: none; } .co-err { font-size: 12.5px; color: var(--sale); } .co-top-err { margin: 0 0 18px; padding: 11px 14px; border-radius: 12px; background: rgba(179, 71, 93, .09); border: 1px solid rgba(179, 71, 93, .3); color: #8d2e42; font-size: 14px; } .co-alt-add { border: 1px dashed var(--line); background: none; color: var(--mute); border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 14.5px; width: 100%; text-align: start; cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease); } .co-alt-add:hover { border-color: var(--sea-deep); color: var(--ink); } .co-alt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .co-alt-h h2 { margin-bottom: 6px; } .co-alt > .co-hint { display: block; margin-bottom: 14px; } .co-alt-rm { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--mute); text-decoration: underline; cursor: pointer; } .co-pays { display: flex; flex-direction: column; gap: 10px; } .co-pay { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r); background: var(--lift); padding: 14px 16px; transition: border-color .18s var(--ease), background .18s var(--ease); } .co-pay:hover { border-color: var(--sea-deep); } .co-pay:has(input:checked) { border-color: var(--sea-deep); background: var(--sea-mist); } .co-pay input { margin: 3px 0 0; accent-color: var(--sea-deep); width: 18px; height: 18px; flex: 0 0 auto; } .co-pay-b { display: flex; flex-direction: column; gap: 3px; } .co-pay-t { font-size: 15.5px; font-weight: 500; } .co-pay-p { font-size: 13.5px; color: var(--mute); } /* Delivery or pickup — the same card as a payment method, because it is the same kind of decision, but two up once there is room for two. */ @media (min-width: 720px) { .co-ways { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .co-ways .co-pay { align-items: flex-start; } } /* Her counter, when that is where the order is going. */ .co-pick { border: 1px solid var(--line); border-radius: var(--r); background: var(--lift); padding: 16px; } .co-pick-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-block: 7px; } .co-pick-r + .co-pick-r { border-top: 1px solid var(--line-soft); } .co-pick-r strong { font-size: 15px; font-weight: 500; } .co-pick-r span { font-size: 14px; color: var(--mute); } .co-pick-r a { font-size: 13.5px; margin-inline-start: auto; } .co-pick .co-hint { display: block; margin: 10px 0 0; } .co-done-pick { max-width: 460px; margin: 22px auto 0; text-align: start; } .co-place { margin-top: 6px; padding-block: 16px; font-size: 16px; } .co-safe { margin: 10px 0 0; font-size: 12.5px; color: var(--mute); text-align: center; } /* ------------------------------------------------ the order, beside it */ .co-sum-in { background: var(--sea-pale); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 18px; } @media (min-width: 900px) { .co-sum { position: sticky; top: 92px; } } .co-sum-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .co-sum-h h2 { margin: 0; font-family: var(--f-disp); font-size: 21px; font-weight: 400; } .co-edit { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--mute); text-decoration: underline; cursor: pointer; } .co-edit:hover { color: var(--ink); } .co-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line-soft); } .co-line img { width: 52px; height: 68px; object-fit: cover; border-radius: 8px; } .co-line h3 { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; } .co-line-s { font-size: 12.5px; color: var(--mute); } .co-line-p { font-size: 14.5px; } /* ------------------------------------------------------- the thank-you */ .co-done { max-width: 52ch; margin-inline: auto; text-align: center; padding-block: clamp(12px, 4vw, 40px); } .co-tick { color: var(--sea-deep); margin-bottom: 18px; } .co-tick svg { width: 56px; height: 56px; } .co-done h1 { margin: 4px 0 14px; font-size: clamp(30px, 7.5vw, 46px); outline: none; } .co-done-p { margin: 0 auto; color: var(--mute); font-size: 16px; max-width: 42ch; } .co-ref { display: flex; flex-direction: column; gap: 4px; align-items: center; margin: clamp(26px, 5vw, 38px) auto; background: var(--sea-pale); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 20px 18px; } .co-ref-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } body[dir="rtl"] .co-ref-k { letter-spacing: 0; } .co-ref strong { font-family: var(--f-disp); font-size: clamp(30px, 8vw, 40px); font-weight: 400; line-height: 1.1; } .co-ref-p { font-size: 13px; color: var(--mute); max-width: 34ch; } .co-next-h { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin: 0 0 14px; } body[dir="rtl"] .co-next-h { letter-spacing: 0; } .co-next { list-style: none; counter-reset: n; margin: 0 0 clamp(26px, 5vw, 38px); padding: 0; text-align: start; } .co-next li { counter-increment: n; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; } body[dir="rtl"] .co-next li { padding: 14px 44px 14px 0; } .co-next li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--sea); color: var(--taupe-on-brand); display: grid; place-items: center; font-size: 13.5px; } .co-next b { font-weight: 500; font-size: 15.5px; } .co-next span { color: var(--mute); font-size: 14.5px; } .co-done-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .co-empty { text-align: center; padding-block: clamp(50px, 12vw, 110px); } .co-empty h1 { margin: 0 0 10px; font-size: clamp(27px, 7vw, 40px); } .co-empty p { margin: 0 0 24px; color: var(--mute); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ======================================================= the feedback */ .fb { max-width: 620px; display: flex; flex-direction: column; gap: 14px; } .fb-row { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 620px) { .fb-row { grid-template-columns: 1fr 1fr; } } .fb-f { display: flex; flex-direction: column; gap: 6px; } .fb-f > span { font-size: 13px; color: var(--mute); letter-spacing: .02em; } .fb-f input, .fb-f textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--lift); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .18s var(--ease); } .fb-f textarea { resize: vertical; min-height: 96px; } .fb-f input:focus, .fb-f textarea:focus { outline: none; border-color: var(--sea-deep); } .fb-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fb-lbl { font-size: 13px; color: var(--mute); } .fb-say { font-size: 13px; color: var(--sea-ink); } .fb-prev { flex-basis: 100%; } .fb-prev img { width: 108px; height: 144px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .fb-note { margin: 0; font-size: 12.5px; color: var(--mute); max-width: 62ch; } /* scroller for the seasonal row */ .scroller { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .scroller::-webkit-scrollbar { display: none; } .scroller > * { flex: 0 0 min(60vw, 230px); scroll-snap-align: start; } /* ============================================================ how it works */ .steps { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .step { padding: 22px; background: var(--sea-pale); border: 1px solid var(--line); border-radius: var(--r); } .step .n { width: 30px; height: 30px; border-radius: 999px; background: var(--sea); color: var(--taupe-on-brand); display: grid; place-items: center; font-size: 14px; font-weight: 600; margin-bottom: 12px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; } .step h3 { margin: 0 0 6px; font-family: var(--f-disp); font-size: 18px; } body[dir="rtl"] .step h3 { font-family: var(--f-ar); } .step p { margin: 0; font-size: 14px; color: var(--mute); } /* ============================================================ visit */ .visit { display: grid; gap: 22px; } @media (min-width: 860px) { .visit { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; } } .visit-img { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background: var(--sea-pale); } .visit-img img { width: 100%; height: 100%; object-fit: cover; } .visit dl { margin: 0 0 22px; display: grid; gap: 12px; } .visit dt { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sea-ink); } body[dir="rtl"] .visit dt { letter-spacing: 0; } .visit dd { margin: 3px 0 0; font-size: 15.5px; } /* ============================================================ footer */ .ft { background: var(--sink); color: var(--taupe-on-brand); padding-block: 44px 30px; border-top: 1px solid var(--line); } .ft a:hover { color: var(--sea-ink); } .ft-in { display: grid; gap: 26px; } @media (min-width: 760px) { .ft-in { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } } .ft h4 { margin: 0 0 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #24473f; font-weight: 500; } body[dir="rtl"] .ft h4 { letter-spacing: 0; } .ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; } .ft-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute-on-brand); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; } .ft-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ft-mark .hd-mark { background: var(--sea); } /* ============================================================ toast */ .toast { position: fixed; z-index: 95; inset-block-end: 18px; inset-inline: var(--pad); margin-inline: auto; max-width: 380px; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 20px; font-size: 14px; text-align: center; box-shadow: var(--shadow-2); opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .3s var(--ease), translate .3s var(--ease); } .toast.on { opacity: 1; translate: 0 0; } /* ============================================================ demo banner This site is a demo. Say so, plainly, so nobody mistakes the placeholder prices for real ones. */ .demo-bar { background: var(--sea-sink); color: var(--taupe-on-brand); font-size: 12.5px; text-align: center; padding: 7px var(--pad); line-height: 1.4; } .demo-bar b { color: #1f3f38; font-weight: 600; } /* ============================================================ reduced motion Kill the movement, keep the site beautiful. The doors open instantly, nothing sways, nothing slides. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-property: none !important; } .door-set { display: none; } .hero-flora span { animation: none !important; transform: none !important; } .sheet { transition-property: none; } .in-k > span[data-i18n] { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; } .mn > * { animation: none !important; opacity: 1 !important; transform: none !important; } .card-img { transform: none !important; } .card-shine { display: none !important; } }