/* ========================================================================== Naqi · frozen-fruit dessert maker — Saudi landing page The palette is sampled from the campaign renders rather than chosen: warm bone travertine, one directional daylight, and exactly one saturated accent (mango) carried by the product's own output. Nothing else is allowed to be saturated, which is why the page reads calm at speed. One typeface: IBM Plex Sans Arabic. It is a real bilingual family — the Arabic is designed, not a fallback, and its Latin companion sets the digits without a second family fighting it. Written RTL-first. Logical properties throughout (inline-start/end), so the layout does not need mirroring. ========================================================================== */ :root{ /* surfaces, warm to cool */ --bone:#FBF7F0; --travertine:#F3EBDD; --sand:#E7DAC5; --line:#E2D6C2; /* ink */ --ink:#1E1913; --ink-2:#514637; --muted:#8C8172; /* the one accent, plus the flavour secondaries */ --mango:#E09A22; --mango-deep:#B87A11; --mango-ghost:rgba(224,154,34,.14); --date:#B4844F; --pistachio:#7C9450; --blush:#C9564B; --wa:#25D366; --r:14px; --r-lg:22px; --shadow:0 1px 2px rgba(58,44,24,.05), 0 8px 24px -10px rgba(58,44,24,.14); --shadow-lg:0 2px 4px rgba(58,44,24,.06), 0 28px 60px -24px rgba(58,44,24,.26); --ease:cubic-bezier(.22,.9,.28,1); --gut:clamp(16px,4vw,32px); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bone);color:var(--ink); /* Platform Arabic faces, in the order each OS actually has one, so the page is readable the instant the HTML lands rather than after a round trip to fonts.gstatic.com. */ font-family:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:17px;line-height:1.75;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select{font:inherit;color:inherit} h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.015em;font-weight:700;text-wrap:balance} em{font-style:normal;color:var(--mango-deep)} s{text-decoration:none;position:relative} s::after{content:'';position:absolute;inset-inline:-2px;top:52%;height:1.5px;background:currentColor;opacity:.55} .wrap{width:min(1120px,100% - var(--gut)*2);margin-inline:auto} .wrap.narrow{width:min(760px,100% - var(--gut)*2)} /* Latin digits inside Arabic text: keep them LTR and tabular so prices and timers do not reflow character by character as they tick. */ .n,.clock,.cur,[data-price],[data-was],[data-off],[data-save],.c-n,#total,#qtyN{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;display:inline-block; } /* ── reveal ─────────────────────────────────────────────────────────────── Visible by DEFAULT. The hidden state is scoped to .js, a class set by an inline script in , so the page is fully readable with no JavaScript, with a blocked script, or with a failed one. Content parked at opacity:0 waiting on an observer is a single point of failure for the whole page — if the observer never fires, the customer sees nothing. */ .rv{opacity:1;transform:none} .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .rv.in{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s} .js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}.js .rv.d5{transition-delay:.4s} /* ── header ─────────────────────────────────────────────────────────────── */ .hdr{ position:fixed;inset-block-start:0;inset-inline:0;z-index:60; background:rgba(251,247,240,0);backdrop-filter:saturate(1.1) blur(0px); border-block-end:1px solid transparent; transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease); } .hdr.stuck{background:rgba(251,247,240,.86);backdrop-filter:saturate(1.2) blur(14px);border-block-end-color:var(--line)} .hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px} .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.01em} .brand-mk{width:25px;height:25px;fill:none;stroke:var(--mango-deep);stroke-width:1.7;stroke-linejoin:round} .hdr-r{display:flex;align-items:center;gap:12px} .hdr-price{opacity:0;transform:translateY(-6px);transition:.35s var(--ease);font-weight:700;font-size:17px;white-space:nowrap} .hdr.stuck .hdr-price{opacity:1;transform:none} .hdr-price .cur{font-size:12px;color:var(--muted);margin-inline-start:3px;font-weight:500} /* ── buttons ────────────────────────────────────────────────────────────── */ .btn{ --bg:var(--ink); display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--bg);color:var(--bone);border:0;border-radius:999px; padding:13px 24px;font-weight:600;font-size:16px;cursor:pointer;white-space:nowrap; box-shadow:0 1px 2px rgba(30,25,19,.18),0 10px 22px -12px rgba(30,25,19,.6); transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease); } .btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(30,25,19,.2),0 18px 34px -14px rgba(30,25,19,.65)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:3px solid var(--mango);outline-offset:3px} .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)} .btn:hover svg{transform:translateX(-3px)} .btn-sm{padding:9px 17px;font-size:14.5px} .btn-lg{padding:17px 30px;font-size:17.5px;--bg:var(--mango-deep)} .btn-lg:hover{--bg:#A86D0C} .btn-full{width:100%} .btn[disabled]{opacity:.5;pointer-events:none} .btn-wa{--bg:var(--wa);color:#06251A} .btn-ghost{ display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:16px; color:var(--ink-2);border-block-end:1.5px solid var(--sand);padding-block-end:2px; transition:color .2s,border-color .2s; } .btn-ghost:hover{color:var(--mango-deep);border-block-end-color:var(--mango)} /* ── hero ───────────────────────────────────────────────────────────────── The render is the stage, not an illustration beside the copy: machine on one side, bare warm wall on the other, and the headline lives in that wall. A scrim guarantees legibility whatever the crop does at a given width. */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(580px,82svh,780px); display:flex;align-items:center; padding-block:clamp(84px,10vw,104px) clamp(60px,8vw,88px); } .hero-media{position:absolute;inset:0;z-index:-1} .hero-media img{ width:100%;height:100%;object-fit:cover; /* Y at 42%: the frame is wider than the source's 16:9 at most desktop sizes, so cover crops vertically — biased up, the chute stays whole instead of being sliced by the top edge. */ object-position:22% 42%; /* a very slow drift, so the frame breathes instead of sitting dead */ animation:heroDrift 26s ease-in-out infinite alternate; } @keyframes heroDrift{from{transform:scale(1.02)}to{transform:scale(1.06)}} .hero-scrim{ position:absolute;inset:0; background: linear-gradient(to right, rgba(251,247,240,0) 26%, rgba(251,247,240,.62) 46%, rgba(251,247,240,.93) 60%, var(--bone) 74%), /* top: lift the header off the photograph · bottom: melt into the next section instead of ending on a hard horizontal seam */ linear-gradient(to bottom, rgba(251,247,240,.62), rgba(251,247,240,0) 24%, rgba(251,247,240,0) 78%, var(--travertine)); } .hero-in{position:relative;width:min(1180px,100% - var(--gut)*2)} /* margin-inline-END auto, not start: an auto margin pushes content AWAY from the side it sits on, so inline-start:auto would shove the copy left in RTL — straight onto the machine. */ .hero-copy{max-width:min(600px,100%);margin-inline-end:auto} .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;box-shadow:var(--shadow)} .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--mango);box-shadow:0 0 0 0 var(--mango-ghost);animation:ping 2.4s ease-out infinite} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(224,154,34,.5)}70%,100%{box-shadow:0 0 0 9px rgba(224,154,34,0)}} h1{font-size:clamp(38px,5.4vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance} .lede{font-size:clamp(17px,2.1vw,19.5px);color:var(--ink-2);margin:20px 0 26px;max-width:46ch;line-height:1.72} .lede b{color:var(--ink);font-weight:600} /* One row: the number leads, everything qualifying it sits small beside it. The old block spent three stacked elements on a single price. */ .price-blk{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-block-end:30px} .price-now{display:inline-flex;align-items:baseline;gap:6px} .price-now .n{font-size:clamp(46px,6.4vw,62px);font-weight:700;letter-spacing:-.04em;line-height:1} .price-now .cur{font-size:17px;font-weight:600;color:var(--muted)} .price-meta{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap} .price-meta s{font-size:20px;color:var(--muted);font-weight:500} .off{background:var(--blush);color:#fff;font-size:13px;font-weight:700;border-radius:7px;padding:4px 9px} .save{font-size:14.5px;color:var(--ink-2);border-inline-start:1px solid var(--sand);padding-inline-start:10px} .save b{color:var(--blush);font-weight:700} .cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-end:26px} .trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;font-size:14.5px;color:var(--ink-2)} .trust li{display:flex;align-items:center;gap:7px} .trust svg{width:17px;height:17px;fill:none;stroke:var(--pistachio);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Sits on the image itself, over the machine's side of the frame — it labels what you are looking at rather than floating in the copy column. */ .fig-tag{ position:absolute;margin:0; inset-block-end:clamp(74px,9vw,96px);inset-inline-end:clamp(20px,5vw,64px); display:inline-flex;align-items:center;gap:8px;background:rgba(251,247,240,.9); backdrop-filter:blur(10px);border:1px solid rgba(231,218,197,.7); border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600; box-shadow:var(--shadow);z-index:2; } .pulse{width:7px;height:7px;border-radius:50%;background:var(--pistachio);animation:ping 2.4s ease-out infinite} /* Sits under the copy column, not centred on the seam between photograph and page — centred it read as a stray element straddling two surfaces. */ .scroll-cue{ position:absolute;inset-block-end:34px;inset-inline-start:max(var(--gut),calc(50% - 590px + var(--gut))); width:24px;height:40px;border-radius:999px;border:1.5px solid var(--sand); display:grid;place-items:start center;padding-block-start:7px;z-index:2; background:rgba(251,247,240,.5);backdrop-filter:blur(4px); transition:border-color .25s,transform .25s var(--ease); } .scroll-cue:hover{border-color:var(--mango);transform:translateY(2px)} .cue-line{width:2px;height:8px;border-radius:2px;background:var(--muted);animation:cue 1.9s var(--ease) infinite} @keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}} /* ── sections ───────────────────────────────────────────────────────────── */ .sec{padding-block:clamp(64px,9vw,108px)} .sec-alt{background:var(--travertine)} .sec-dark{background:var(--ink);color:#F4EEE4} .sec-dark .kicker{color:var(--mango)} .sec-dark em{color:var(--mango)} .sec-hd{max-width:60ch;margin-block-end:clamp(32px,5vw,56px)} .sec-hd.tight{margin-block-end:26px} .kicker{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mango-deep)} h2{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.025em} h3{font-size:20px;letter-spacing:-.015em} .body{font-size:17.5px;color:var(--ink-2);margin:16px 0 0;max-width:52ch;line-height:1.75} .sec-dark .body,.sec-dark .note{color:#CFC4B4} .note{font-size:15.5px;color:var(--muted);max-width:56ch;margin:22px auto 0;text-align:center} .fine{font-size:13px;color:var(--muted);margin-block-start:14px;line-height:1.6} .fine.center{text-align:center} /* ── ledger ─────────────────────────────────────────────────────────────── */ .ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .counter{display:flex;align-items:baseline;gap:12px;margin-block-start:30px} .c-n{font-size:clamp(64px,10vw,104px);font-weight:700;line-height:.9;letter-spacing:-.05em;color:var(--mango-deep)} .c-l{font-size:19px;font-weight:600;color:var(--ink-2)} .strikes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .strikes li{ display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:15px 18px;font-size:17px;font-weight:500;color:var(--muted); transition:opacity .5s var(--ease),transform .5s var(--ease),color .4s,border-color .4s; } .strikes li .x,.strikes li .v{ width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center; background:var(--sand);transition:background .4s; } .strikes svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:24;stroke-dashoffset:24} .strikes li.gone{color:var(--muted);opacity:.44} .strikes li.gone .x{background:var(--blush)} .strikes li.gone svg{stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ease)} .strikes li.gone b,.strikes li.gone{text-decoration:line-through;text-decoration-color:rgba(140,129,114,.5)} .strikes li.keep{color:var(--ink);border-color:var(--mango);background:#fff;box-shadow:var(--shadow);text-decoration:none} .strikes li.keep .v{background:var(--pistachio)} .strikes li.keep.on svg{stroke-dashoffset:0;transition:stroke-dashoffset .4s .1s var(--ease)} .strikes li.keep.on{transform:scale(1.025)} /* ── steps ──────────────────────────────────────────────────────────────── */ .steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)} .rail{position:absolute;inset-block-start:38px;inset-inline:6%;height:2px;background:var(--line);border-radius:2px;z-index:0} .rail-fill{position:absolute;inset-block:0;inset-inline-end:0;width:0;background:var(--mango);border-radius:2px;transition:width .1s linear} .rail-cube{ position:absolute;inset-block-start:-7px;inset-inline-end:0;width:16px;height:16px;border-radius:4px; background:var(--mango);box-shadow:0 0 0 5px var(--mango-ghost);transition:inset-inline-end .1s linear; } .step{position:relative;z-index:1;text-align:center} .step-n{ width:44px;height:44px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center; background:var(--bone);border:2px solid var(--line);font-weight:700;font-size:17px;color:var(--muted); transition:border-color .4s var(--ease),color .4s,background .4s,transform .4s var(--ease); } .step.lit .step-n{border-color:var(--mango);color:var(--mango-deep);background:#fff;transform:scale(1.08)} .step figure{margin:0 0 18px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--travertine)} .step figure img{aspect-ratio:1;object-fit:cover;transition:transform .8s var(--ease)} .step:hover figure img{transform:scale(1.035)} .step p{margin:9px auto 0;color:var(--ink-2);font-size:16px;max-width:34ch} .step-tip{ display:inline-flex;align-items:center;gap:7px;margin-block-start:13px; background:var(--mango-ghost);color:var(--mango-deep);border-radius:999px; padding:6px 13px;font-size:14px;font-weight:600; } .step-tip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} /* ── compare slider ─────────────────────────────────────────────────────── */ /* Two pixel-aligned crops of the same generated frame, stacked. The "after" layer is clipped from the inline-start edge, so dragging genuinely wipes between two photographs rather than faking a transition. */ .compare{ position:relative;width:min(460px,88vw);margin-inline:auto;border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--shadow-lg);cursor:ew-resize;touch-action:pan-y; user-select:none;-webkit-user-select:none; } .compare .cmp-img{width:100%;display:block;pointer-events:none} .cmp-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p));will-change:clip-path} /* Physical left/right here on purpose: this is a spatial control, not text flow, and the handle and the clip-path must agree in the same axis. */ .cmp-handle{ position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--bone); transform:translateX(-50%);box-shadow:0 0 0 1px rgba(30,25,19,.12); } .cmp-grip{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%;background:var(--bone);display:grid;place-items:center; box-shadow:var(--shadow-lg);transition:transform .2s var(--ease); } .compare:hover .cmp-grip{transform:translate(-50%,-50%) scale(1.06)} .cmp-grip svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .cmp-handle:focus-visible{outline:3px solid var(--mango);outline-offset:2px;border-radius:2px} .cmp-lbl{ position:absolute;top:14px;background:rgba(30,25,19,.66);color:#fff; font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px); pointer-events:none; } .cmp-lbl-a{left:14px} .cmp-lbl-b{right:14px} /* ── flavours ───────────────────────────────────────────────────────────── */ .flav{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,60px);align-items:center;justify-items:center} .flav-stage{position:relative;width:min(380px,74vw);aspect-ratio:1;display:grid;place-items:center} .flav-glow{ position:absolute;inset:6%;border-radius:50%;filter:blur(38px);opacity:.34; background:var(--tint,#E8A93A);transition:background .6s var(--ease);z-index:0; } #flavImg{position:relative;z-index:1;border-radius:50%;box-shadow:var(--shadow-lg);transition:opacity .28s var(--ease),transform .5s var(--ease)} #flavImg.swap{opacity:0;transform:scale(.965)} .flav-pick{display:flex;flex-direction:column;gap:9px;width:100%;max-width:300px} .flav-pick button{ background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 20px; font-weight:600;font-size:16.5px;text-align:start;cursor:pointer;color:var(--ink-2); transition:border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s; position:relative; } .flav-pick button::before{ content:'';position:absolute;inset-inline-start:0;inset-block:14px;width:3px;border-radius:3px; background:var(--mango);transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease); } .flav-pick button:hover{border-color:var(--sand);transform:translateX(-3px)} .flav-pick button.on{color:var(--ink);border-color:var(--mango);box-shadow:var(--shadow)} .flav-pick button.on::before{transform:scaleY(1)} /* ── sugar ──────────────────────────────────────────────────────────────── */ .sugar-in{display:grid;grid-template-columns:1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center} /* Nineteen in a fixed 10-wide grid: two rows that read as "ten and nine more", which is the point. auto-fill scattered them into ragged rows and the quantity stopped being legible. */ .spoons{display:grid;grid-template-columns:repeat(10,1fr);gap:10px 7px;max-width:440px} .spoon{opacity:0;transform:translateY(8px) rotate(-8deg)} .spoon.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)} .spoon svg{width:100%;height:auto;fill:none;stroke:var(--date);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Filled bowls, not outlines — at this size an outline reads as texture and the quantity stops being countable, which is the entire point of drawing nineteen of them instead of writing the number. */ .spoon .bowl{fill:var(--date);fill-opacity:.85;stroke:none} .spoon .stem{opacity:.55} .spoons-cap{ margin:20px 0 0;font-size:16px;color:var(--ink-2);opacity:0;transform:translateY(6px); transition:opacity .5s var(--ease),transform .5s var(--ease); } .spoons-cap.in{opacity:1;transform:none} .spoons-cap b{font-size:21px;color:var(--date);font-weight:700} .spoons-cap b.zero{color:var(--pistachio)} .spoons-cap .vs{color:var(--muted);margin-inline:6px} /* The affirmation carries the same green as the old zero, but it is a phrase, not a numeral — it must not inherit b.zero's 21px. */ .spoons-cap .no-sugar{color:var(--pistachio);font-weight:600} /* ── two-col + ticks ────────────────────────────────────────────────────── */ .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .two figure{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--travertine)} .ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .ticks li{display:flex;align-items:center;gap:11px;font-size:16.5px;color:var(--ink-2)} .ticks li::before{ content:'';width:21px;height:21px;flex:0 0 21px;border-radius:50%;background:var(--mango-ghost); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B87A11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size:13px;background-repeat:no-repeat;background-position:center; } .bonus{display:flex;gap:15px;align-items:flex-start;margin-block-start:28px;background:#fff;border:1px dashed var(--mango);border-radius:var(--r);padding:17px 19px} .bonus-ic{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--mango-ghost);display:grid;place-items:center} .bonus-ic svg{width:21px;height:21px;fill:none;stroke:var(--mango-deep);stroke-width:1.7;stroke-linejoin:round} .bonus b{display:block;font-size:16px} .bonus p{margin:3px 0 0;font-size:15px;color:var(--ink-2)} /* ── band ───────────────────────────────────────────────────────────────── */ .band{position:relative;isolation:isolate} .band img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover} .band-txt{position:absolute;inset:0;display:grid;place-items:center;padding:var(--gut); background:linear-gradient(to top,rgba(30,25,19,.5),rgba(30,25,19,.06))} .band-txt p{margin:0;color:#fff;font-size:clamp(20px,3.2vw,31px);font-weight:600;text-align:center;max-width:22ch;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(30,25,19,.4)} /* ── order ──────────────────────────────────────────────────────────────── */ .sec-order{background:var(--travertine)} .order-in{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(24px,4vw,52px);align-items:start} .offer{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:sticky;top:84px} .offer-top{background:var(--travertine)} .offer-top img{width:100%;aspect-ratio:4/3;object-fit:cover} .offer-body{padding:22px} .offer-body h3{font-size:19px} .offer-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:12px 0 18px} .offer-price .n{font-size:38px;font-weight:700;letter-spacing:-.03em} .offer-price .cur{font-size:15px;color:var(--muted);font-weight:600} .offer-price s{font-size:17px;color:var(--muted)} .offer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px;color:var(--ink-2)} .offer-list li{display:flex;gap:9px;align-items:flex-start} .offer-list li::before{content:'';width:6px;height:6px;margin-block-start:9px;flex:0 0 6px;border-radius:50%;background:var(--mango)} .fomo{margin-block-start:20px;background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px} .fomo-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .fomo-k{font-size:14px;color:var(--ink-2)} .clock{font-size:20px;font-weight:700;letter-spacing:.01em;color:var(--ink)} .clock.beat{animation:beat .9s var(--ease)} @keyframes beat{0%{transform:scale(1.045)}100%{transform:scale(1)}} .fomo-bar{height:4px;border-radius:4px;background:var(--sand);overflow:hidden;margin-block-start:10px} .fomo-bar span{display:block;height:100%;width:100%;background:var(--pistachio);border-radius:4px;transition:width 1s linear,background .6s} .fomo[data-urgency="mid"] .fomo-bar span{background:var(--mango)} .fomo[data-urgency="high"] .fomo-bar span{background:var(--blush)} .fomo[data-urgency="high"] .clock{color:var(--blush)} .fomo-n{margin:9px 0 0;font-size:13px;color:var(--muted)} .stockline{display:flex;align-items:center;gap:8px;margin-block-start:13px;font-size:14px;color:var(--ink-2)} .stock-dot{width:7px;height:7px;border-radius:50%;background:var(--pistachio);animation:ping 2.4s ease-out infinite} /* ── form ───────────────────────────────────────────────────────────────── */ .form-side{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3.4vw,38px);box-shadow:var(--shadow)} .fld{margin-block-end:17px} .fld label{display:block;font-size:14.5px;font-weight:600;margin-block-end:7px;color:var(--ink-2)} .fld input,.fld select{ width:100%;background:var(--bone);border:1.5px solid var(--line);border-radius:var(--r); padding:14px 16px;font-size:16.5px;transition:border-color .2s,box-shadow .2s,background .2s; } .fld input::placeholder{color:#B5AA99} .fld input:focus,.fld select:focus{outline:0;border-color:var(--mango);background:#fff;box-shadow:0 0 0 4px var(--mango-ghost)} .fld input.bad,.fld select.bad{border-color:var(--blush);background:rgba(201,86,75,.04)} .phone{display:flex;align-items:stretch;gap:0;direction:ltr} .phone .dial{ display:grid;place-items:center;padding-inline:14px;background:var(--sand);color:var(--ink-2); border:1.5px solid var(--line);border-inline-end:0;border-radius:var(--r) 0 0 var(--r); font-weight:600;font-size:15px; } .phone input{border-radius:0 var(--r) var(--r) 0;text-align:left} .hint{margin:7px 0 0;font-size:13px;color:var(--muted)} .qty-fld{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .qty-fld label{margin:0} .qty{display:flex;align-items:center;gap:4px;background:var(--bone);border:1.5px solid var(--line);border-radius:999px;padding:4px;direction:ltr} .qty button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;font-size:19px;font-weight:600;cursor:pointer;color:var(--ink-2);transition:background .2s} .qty button:hover{background:var(--sand)} .qty b{min-width:28px;text-align:center;font-size:17px} .qty-total{margin-inline-start:auto;font-size:15px;color:var(--ink-2)} .qty-total b{font-size:18px;color:var(--ink)} .msg{margin:0 0 14px;font-size:15px;min-height:0;display:none} .msg.show{display:block} .msg.err{color:var(--blush);background:rgba(201,86,75,.07);border-radius:10px;padding:11px 14px} /* ── done / confirmation states ─────────────────────────────────────────── */ .done{text-align:center;padding:12px 0 6px} .done h3{font-size:26px;margin-block-end:10px} .done p{color:var(--ink-2);max-width:42ch;margin:0 auto;font-size:16.5px} .tick{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:var(--mango-ghost);display:grid;place-items:center} .tick svg{width:30px;height:30px;fill:none;stroke:var(--mango-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .tick.wa{background:rgba(37,211,102,.12)} .tick.wa svg{stroke:var(--wa)} .tick.draw .tick-path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .55s .12s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} .num{display:inline-block;margin-block-start:18px;background:var(--bone);border:1px dashed var(--sand);border-radius:10px;padding:9px 18px;font-weight:700;letter-spacing:.04em;direction:ltr} .wa-preview{margin:20px auto 4px;max-width:330px;padding:12px 12px 10px;border-radius:16px;background:#0b141a;text-align:right} .wa-bubble{position:relative;background:#202c33;border-radius:12px 12px 12px 4px;padding:9px 12px 18px} .wa-bubble p{margin:0;color:#e9edef;font-size:14.5px;line-height:1.55;max-width:none} .wa-bubble b{color:#fff;direction:ltr;display:inline-block} .wa-time{position:absolute;inset-block-end:4px;inset-inline-end:10px;font-size:11px;color:#8696a0} .wa-btns{display:grid;gap:5px;margin-block-start:6px} .wa-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border-radius:9px;background:#202c33;color:#53bdeb;font-size:14.5px;font-weight:600;border:1.5px solid transparent} .wa-btn.hot{color:#fff;border-color:var(--wa);background:rgba(37,211,102,.14);animation:tapRing 1.8s ease-out .8s infinite} .wa-btn.hot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--wa)} @keyframes tapRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} .wait{display:inline-flex;gap:4px;margin-inline-end:8px;vertical-align:middle} .wait i{width:6px;height:6px;border-radius:50%;background:var(--mango);opacity:.35;animation:wd 1.2s ease-in-out infinite} .wait i:nth-child(2){animation-delay:.15s}.wait i:nth-child(3){animation-delay:.3s} @keyframes wd{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} .alt{margin-block-start:16px;display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px} .link{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:500} .link[disabled]{opacity:.4;cursor:default;text-decoration:none} .link:hover:not([disabled]){color:var(--mango-deep)} .sep{color:var(--sand)} /* ── faq ────────────────────────────────────────────────────────────────── */ .acc details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-block-end:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s} .acc details[open]{border-color:var(--sand);box-shadow:var(--shadow)} .acc summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:14px} .acc summary::-webkit-details-marker{display:none} /* A down-caret that flips up on open. Direction-neutral on purpose — a left/right chevron reads as "next" in RTL, not "expand". */ .chev{width:10px;height:10px;flex:0 0 10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)} .acc details[open] .chev{transform:rotate(225deg) translate(-2px,-2px);border-color:var(--mango-deep)} .acc p{margin:0;padding:0 20px 19px;color:var(--ink-2);font-size:16px;max-width:64ch} /* ── footer + dock ──────────────────────────────────────────────────────── */ .ftr{background:var(--ink);color:#B0A392;padding-block:26px;font-size:14px} .ftr-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .dock{ position:fixed;inset-block-end:0;inset-inline:0;z-index:70;display:none; align-items:center;justify-content:space-between;gap:14px; background:rgba(251,247,240,.94);backdrop-filter:blur(14px); border-block-start:1px solid var(--line);padding:11px var(--gut); transform:translateY(110%);transition:transform .4s var(--ease); padding-block-end:calc(11px + env(safe-area-inset-bottom)); } .dock.up{transform:none} .dock-p{display:flex;align-items:baseline;gap:7px} .dock-p b{font-size:23px;font-weight:700} .dock-p .cur{font-size:13px;color:var(--muted)} .dock-p s{font-size:14px;color:var(--muted)} .dock .btn{--bg:var(--mango-deep)} /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .order-in{grid-template-columns:1fr} .offer{position:static;order:2} .form-side{order:1} } @media (max-width:820px){ body{font-size:16.5px} .ledger,.two,.sugar-in,.flav{grid-template-columns:1fr} /* The copy is too long to sit on a 16:9 frame at this width, so the image stops being a backdrop and becomes a full-bleed band above it. Still no card, no radius — the photograph runs edge to edge. */ .hero{display:block;min-height:0;padding-block:64px 44px;overflow:visible} .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;margin-block-end:28px} /* 4:3 out of a 16:9 source crops hard horizontally; bias left so the whole machine survives — the empty wall it loses is not needed here, the copy sits below rather than on it. */ .hero-media img{object-position:2% 52%;animation:none} .hero-scrim{background:linear-gradient(to bottom,rgba(251,247,240,.5),rgba(251,247,240,0) 30%,rgba(251,247,240,0) 72%,var(--bone))} .hero-copy{max-width:none;margin-inline-start:0} .fig-tag{inset-block-end:14px;inset-inline-end:14px;font-size:12.5px;padding:7px 13px} .scroll-cue{display:none} .flav{justify-items:stretch} .flav-pick{max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:center} .flav-pick button{flex:0 1 auto;text-align:center;padding:10px 17px;font-size:15px} .flav-pick button::before{display:none} .steps{grid-template-columns:1fr;gap:34px} .rail{display:none} .dock{display:flex} .ftr-in{justify-content:center;text-align:center} .hdr-r .btn-sm{display:none} } @media (max-width:480px){ .price-now .n{font-size:44px} .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{width:100%} .btn-ghost{align-self:center} .qty-total{margin-inline-start:0;width:100%} } /* ── motion off ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .rv{opacity:1;transform:none} .spoon{opacity:1;transform:none} }