/* ============================================================================ Sarvoraa Desktop positions and type sizes are measured off the reference recording. Reference stage is 1000 x 655.2 units (aspect 1.526); 1 unit = 0.1vw. COLOUR RULE: components never carry a raw hex. They read --t-* slots, which each surface remaps. That is what stops dark ink ending up on the dark field. ========================================================================= */ :root{ /* ---- primitives: the only colour values in the file ---- */ --bg:#191E24; --cream:#D9D9D9; --accent:#F0A81A; --white:#fff; --ink:#000; --ink-soft:#2E2E2E; --ink-price:#111; --pill-dark:#424242; --pill-dark-hover:#2F2F2F; --on-dark:rgba(255,255,255,.92); --on-dark-dim:rgba(255,255,255,.62); --ink-ui:#15181D; /* chrome ink: 12.60:1 on cream, 17.79:1 on white */ --muted-paper:#53565C; /* 5.21:1 on cream (replaces #6B6E73 at 3.63:1) */ --link-paper:#7A4E00; /* brand hue when it must speak on paper: 5.10:1 */ /* ---- PAPER map (on #D9D9D9) ---- */ --paper-heading:var(--ink); /* 14.88:1 */ --paper-body:var(--ink-soft); /* 9.62:1 */ --paper-strong:var(--ink-price); /* 13.38:1 */ --paper-price:var(--ink-price); /* 13.38:1 */ --paper-muted:var(--muted-paper); /* 5.21:1 */ --paper-link:var(--link-paper); /* 5.10:1 */ --paper-border:rgba(0,0,0,.46); --paper-hairline:rgba(0,0,0,.12); --paper-focus:var(--bg); /* ring 11.88:1 on cream */ --paper-pill-bg:var(--pill-dark); /* boundary 7.12:1 vs cream */ --paper-pill-ink:var(--white); /* 10.05:1 on #424242 */ --paper-pill-hover:var(--pill-dark-hover); /* ---- DARK map (on #191E24) ---- */ --dark-heading:var(--cream); /* 11.88:1 (large text) */ --dark-body:var(--on-dark); /* 14.30:1 */ --dark-strong:var(--white); /* 16.77:1 */ --dark-price:var(--accent); /* 8.24:1 */ --dark-muted:var(--on-dark-dim); /* 7.10:1 */ --dark-link:var(--accent); /* 8.24:1 */ --dark-border:rgba(255,255,255,.48); --dark-hairline:rgba(255,255,255,.11); --dark-focus:var(--accent); /* ring 8.24:1 on field */ --dark-pill-bg:var(--cream); /* boundary 11.88:1 vs field */ --dark-pill-ink:var(--ink-ui); /* 12.60:1 on cream */ --dark-pill-hover:var(--white); /* ---- default surface is the dark field, because sits on it ---- */ --t-heading:var(--dark-heading); --t-body:var(--dark-body); --t-strong:var(--dark-strong); --t-price:var(--dark-price); --t-muted:var(--dark-muted); --t-link:var(--dark-link); --t-border:var(--dark-border); --t-hairline:var(--dark-hairline); --t-focus:var(--dark-focus); --t-pill-bg:var(--dark-pill-bg); --t-pill-ink:var(--dark-pill-ink); --t-pill-hover:var(--dark-pill-hover); /* type — vw-anchored so the reference proportions survive any width */ --fs-logo:clamp(19px, 2.27vw, 40px); --fs-nav:clamp(12px, 1.46vw, 25px); --fs-title:clamp(36px, 5.10vw, 90px); --fs-dish:clamp(21px, 2.91vw, 51px); --fs-price:clamp(12px, 1.75vw, 30px); --fs-body:clamp(11px, 1.24vw, 21px); --fs-order:clamp(15px, 2.14vw, 37px); --gutter:5.9%; --e-out:cubic-bezier(.55,.06,.68,.19); --e-in:cubic-bezier(.16,.84,.34,1); --e-soft:cubic-bezier(.4,0,.2,1); } /* ---------- surface maps ---------- */ /* panel copy sits on the cream blob; sheets and the header capsule are cream too */ .panel,.sheet,.hdr{ --t-heading:var(--paper-heading); --t-body:var(--paper-body); --t-strong:var(--paper-strong); --t-price:var(--paper-price); --t-muted:var(--paper-muted); --t-link:var(--paper-link); --t-border:var(--paper-border); --t-hairline:var(--paper-hairline); --t-focus:var(--paper-focus); --t-pill-bg:var(--paper-pill-bg); --t-pill-ink:var(--paper-pill-ink); --t-pill-hover:var(--paper-pill-hover); } /* the menu list sits on the field at every width, so it flips back */ .menu-list{ --t-heading:var(--dark-heading); --t-body:var(--dark-body); --t-strong:var(--dark-strong); --t-price:var(--dark-price); --t-muted:var(--dark-muted); --t-link:var(--dark-link); --t-border:var(--dark-border); --t-hairline:var(--dark-hairline); --t-focus:var(--dark-focus); } /* on desktop the nav and cart sit on the field, not on the blob */ @media (min-width:701px){ .hdr .nav,.hdr .cart-btn{ --t-body:var(--dark-body); --t-muted:var(--dark-muted); --t-focus:var(--dark-focus); } } *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--t-body); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; } .stage{position:fixed;inset:0;overflow:hidden;isolation:isolate} .blob-m,.arc-m{display:none} /* phone-only art, switched on in the <=700px block */ .sr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- layers ---------- */ /* purely decorative: they must never eat a click */ .blob{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:var(--cream); pointer-events:none;filter:drop-shadow(0 0 60px rgba(0,0,0,.18))} .arc{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;fill:none} .arc path{ stroke:var(--accent);stroke-width:2.4;stroke-linecap:round; stroke-dasharray:9 11; animation:arc-drift 22s linear infinite; } @keyframes arc-drift{to{stroke-dashoffset:-400}} /* ---------- header ---------- */ /* The reference sits the nav at 7.05% of a 1.526-aspect laptop screen. On a real browser (typically 1.78) that lands the nav ~55px off the top edge, which reads cramped, so it is dropped to 9.6% with a px floor for short viewports. */ .hdr{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);top:max(9.6%,52px); transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;gap:4%} .logo{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-logo); color:var(--t-heading);text-decoration:none;letter-spacing:-.005em;line-height:1;white-space:nowrap} .nav{position:relative;display:flex;align-items:center;gap:clamp(14px,3.05vw,54px)} .nav-link{ position:relative;z-index:1;appearance:none;background:none;border:0;padding:.34em .9em;margin:0; font:inherit;font-size:var(--fs-nav);font-weight:500;color:var(--t-body); cursor:pointer;white-space:nowrap;border-radius:999px;text-decoration:none; transition:color .32s var(--e-soft),opacity .3s var(--e-soft); } .nav-link:hover{opacity:.72} .nav-link.is-active{color:var(--ink-ui);font-weight:600;opacity:1} /* always on the white pill */ .nav-pill{ position:absolute;z-index:0;top:50%;left:0;height:2.62%;min-height:22px; background:var(--white);border-radius:999px; transform:translate(var(--pill-x,0),-50%);width:var(--pill-w,0); transition:transform .52s var(--e-in),width .52s var(--e-in); } .nav-pill.no-anim{transition:none} /* ---------- left panel ---------- */ .panel{position:absolute;z-index:5;left:var(--gutter);top:0;width:41%;height:100%; pointer-events:none} .panel>*{pointer-events:auto} /* Vertical positions below are the measured CAP-TOP of each string minus the ascender+half-leading gap, so the rendered ink lands where the reference has it. Inter: ascent .9688em, cap height .7275em -> gap = (lh-1)/2*F + .2413*F */ .section-title{ position:absolute;top:19.06%;margin:0;font-size:var(--fs-title);font-weight:800; letter-spacing:-.032em;line-height:.82;color:var(--t-heading); } .dish{position:absolute;top:31.53%;width:100%} /* The blob's right edge pinches to x=418 of 1000 in this band while the panel runs to 46.9%, so long Romanian names would push the price off the cream onto the dark field where the dark price ink is unreadable. Capped at the blob. Inline, not flex: the price must reflow after the last word of a wrapped name. As a flex item it was forced onto its own line and collided with the description. */ .dish-head{margin:0;line-height:1.06;max-width:87%} .section-title{max-width:87%} .dish-name{font-size:var(--fs-dish);font-weight:700;letter-spacing:-.022em;color:var(--t-heading)} .dish-price{font-size:var(--fs-price);font-weight:500;color:var(--t-price);white-space:nowrap; margin-left:.5em} /* In normal flow under the head, so a name that wraps pushes it down instead of being overlapped. The margin lands it at the measured 37.70% for a single-line name. */ .dish-desc{ margin:1.5vh 0 0;width:80.2%; font-size:var(--fs-body);line-height:1.32;color:var(--t-body); text-align:justify;text-justify:inter-word;hyphens:none; } /* ---------- thumbnails ---------- */ .thumbs{position:absolute;top:47.98%;display:flex;align-items:center;gap:.72%} .thumb{ appearance:none;padding:0;margin:0;border:0;background:none;cursor:pointer; width:6.36vw;min-width:44px;max-width:112px;aspect-ratio:1;border-radius:50%; overflow:hidden;position:relative;flex:0 0 auto; box-shadow:0 2px 10px rgba(0,0,0,.22); transition:transform .42s var(--e-in),box-shadow .42s var(--e-in); } .thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .thumb::after{ content:"";position:absolute;inset:0;border-radius:50%; box-shadow:inset 0 0 0 0 var(--white);transition:box-shadow .42s var(--e-in); } .thumb:hover{transform:translateY(-6%) scale(1.04)} /* white inner ring + dark outer keyline so the state reads on cream and on photos */ .thumb.is-active{transform:scale(1.075); box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--bg),0 6px 20px rgba(0,0,0,.3)} .thumb.is-active::after{box-shadow:inset 0 0 0 3px var(--white)} /* ---------- hint pill ---------- */ .hint{ position:absolute;top:59.92%;appearance:none;border:0;cursor:pointer; background:var(--t-pill-bg);color:var(--t-pill-ink); font:inherit;font-size:var(--fs-body);font-weight:400; padding:.92em 1.34em;border-radius:999px;line-height:1;white-space:nowrap; transition:background .3s var(--e-soft),transform .3s var(--e-in); } .hint:hover{background:var(--t-pill-hover);transform:translateY(-2px)} .hint-arrow{display:inline-block;margin-left:.45em; animation:hint-bob 2.4s var(--e-soft) infinite} @keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.22em)}} /* ---------- the plate ---------- */ .hero-slot{ position:absolute;z-index:4;left:77.2%;top:58.5%; width:46.6%;aspect-ratio:1;transform:translate(-50%,-50%); pointer-events:none; } .hero-card{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative; will-change:transform,opacity; box-shadow:0 26px 70px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.9)} .hero-card img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .hero-ghost{position:absolute;inset:0;border-radius:50%;overflow:hidden; box-shadow:0 26px 70px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.9); will-change:transform,opacity;pointer-events:none} .hero-ghost img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} @keyframes plate-pop{ from{opacity:0;transform:translateY(14px) scale(.92)} to{opacity:1;transform:none} } /* ---------- order ---------- */ .order{ position:absolute;z-index:6;left:35.81%;top:83.40%; width:18.3%;min-width:132px;height:6.88%;min-height:42px; appearance:none;border:0;cursor:pointer;background:var(--white);color:var(--ink-price); border-radius:999px; font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-order); letter-spacing:.005em;line-height:1; box-shadow:0 10px 30px rgba(0,0,0,.32); transition:transform .34s var(--e-in),box-shadow .34s var(--e-in); } .order:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.4)} .order:active{transform:translateY(0)} .order.is-done{background:var(--accent);color:var(--bg)} /* The menu and about views have no selected dish and the button would sit on top of the list. :not([hidden]) is load-bearing: without it the panels are always earlier siblings, so the rule hid the button on every view. */ .panel-about:not([hidden]) ~ .order{display:none} /* ---------- menu index ---------- */ .menu-row{ display:flex;align-items:baseline;gap:.8em;width:100%; appearance:none;background:none;border:0;cursor:pointer;text-align:left; text-decoration:none;padding:.26em 0;color:var(--t-body); border-bottom:1px solid var(--t-hairline); transition:color .28s var(--e-soft),padding-left .34s var(--e-in); } .menu-row:hover,.menu-row:focus-visible{color:var(--t-strong);padding-left:.7em} .menu-row .m-name{font-family:'Playfair Display',Georgia,serif;font-weight:700; font-size:clamp(14px,1.42vw,24px);line-height:1.15} .menu-row .m-rule{flex:1 1 auto;height:1px;background:var(--t-hairline);transform:translateY(-.25em)} .menu-row .m-price{font-size:var(--fs-body);color:var(--t-muted);white-space:nowrap} .menu-row:hover .m-price{color:var(--t-link)} /* ---------- about ---------- */ .about-copy{position:absolute;top:32.59%;width:74%; font-size:var(--fs-body);line-height:1.62;color:var(--t-body)} .about-copy p{margin:0 0 .95em} .about-copy p:last-child{margin-bottom:0} .about-copy strong{color:var(--t-heading);font-weight:600} /* ---------- cart button ---------- */ .cart-btn{ position:relative;flex:0 0 auto;appearance:none;border:0;cursor:pointer;background:none; width:clamp(38px,3.2vw,56px);aspect-ratio:1;border-radius:50%;margin-left:clamp(10px,1.6vw,26px); display:grid;place-items:center;color:var(--t-body); transition:transform .3s var(--e-in),color .3s var(--e-soft); } .cart-btn svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round} .cart-btn:hover{transform:translateY(-2px) scale(1.06)} .cart-btn.bump{animation:cart-bump .5s var(--e-in)} @keyframes cart-bump{0%,100%{transform:none}38%{transform:scale(1.22)}} .cart-count{ position:absolute;top:2%;right:2%;min-width:1.5em;height:1.5em;padding:0 .32em; display:grid;place-items:center;border-radius:999px; background:var(--accent);color:var(--bg);font-size:clamp(10px,.82vw,14px);font-weight:700; transform:scale(0);transition:transform .34s var(--e-in)} .cart-count.on{transform:scale(1)} /* the plate flies into the tray when something is ordered */ .fly{position:fixed;z-index:120;border-radius:50%;overflow:hidden;pointer-events:none; box-shadow:0 14px 34px rgba(0,0,0,.5)} .fly img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- burger ---------- These live here, BEFORE the media queries. Kept after them they overrode the mobile display:grid at equal specificity and the button never rendered, which left the navigation completely unreachable on a phone. */ .burger{display:none;flex:0 0 auto;appearance:none;border:0;background:none;cursor:pointer; width:44px;height:44px;place-items:center;gap:5px;grid-auto-flow:row;color:var(--ink-ui)} .burger{position:relative} .burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px; transition:transform .34s var(--e-in),opacity .2s} /* Absolutely centring both bars first guarantees they cross into an X. Translating them toward each other inside the grid produced a chevron instead. */ .burger[aria-expanded="true"] span{position:absolute;top:50%;left:50%;margin:-1px 0 0 -11px} .burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)} /* ---------- deck links ---------- */ .deck{ position:absolute;z-index:6;left:var(--gutter);bottom:5.6%; display:flex;align-items:center;gap:.62em;flex-wrap:wrap; font-size:clamp(11px,1.1vw,18px);color:var(--t-muted); } .deck-link{appearance:none;background:none;border:0;padding:0;cursor:pointer; font:inherit;color:var(--t-muted);text-decoration:none; border-bottom:1px solid var(--t-border); transition:color .28s var(--e-soft),border-color .28s var(--e-soft)} .deck-link:hover{color:var(--t-strong);border-bottom-color:var(--t-link)} .deck-note{white-space:nowrap} /* ---------- overlays ---------- */ .scrim{position:fixed;inset:0;z-index:110;background:rgba(9,11,14,.62); backdrop-filter:blur(3px);opacity:0;transition:opacity .34s var(--e-soft)} .scrim.on{opacity:1} .sheet{ position:fixed;z-index:115;top:0;right:0;height:100dvh;width:min(430px,92vw); background:var(--cream);color:var(--t-body); display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; padding:clamp(20px,2.2vw,34px) clamp(18px,2vw,32px) calc(env(safe-area-inset-bottom,0px) + 26px); box-shadow:-24px 0 60px rgba(0,0,0,.42); transform:translateX(100%);transition:transform .46s var(--e-in); } .sheet.on{transform:none} /* .sheet{display:flex} outranks the UA [hidden]{display:none}, so without this a closed dialog stays rendered off-screen and keyboard-focusable. */ .sheet[hidden]{display:none} .sheet-top{display:flex;align-items:center;justify-content:space-between;gap:1em; margin-bottom:1.1em} .sheet-top h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700; font-size:clamp(22px,1.9vw,32px);letter-spacing:-.01em;color:var(--t-heading)} .sheet-x{appearance:none;border:0;background:rgba(0,0,0,.07);cursor:pointer; width:44px;height:44px;border-radius:50%;font-size:22px;line-height:1;color:var(--t-strong); transition:background .25s var(--e-soft)} .sheet-x:hover{background:rgba(0,0,0,.14)} .sheet-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin-bottom:1.2em} .sheet-fine{margin:1em 0 0;font-size:12px;color:var(--t-muted)} /* tray */ .tray{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em} .tray-item{display:flex;align-items:center;gap:.8em;padding:.5em 0; border-bottom:1px solid var(--t-hairline)} .tray-item img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto} .tray-body{flex:1 1 auto;min-width:0} .tray-name{display:block;font-weight:600;font-size:14px;line-height:1.25;color:var(--t-strong)} .tray-sub{display:block;font-size:12px;color:var(--t-muted)} .qty{display:flex;align-items:center;gap:.15em;flex:0 0 auto} .qty button{appearance:none;border:0;background:rgba(0,0,0,.07);cursor:pointer; width:44px;height:44px;border-radius:50%;font-size:16px;line-height:1;color:var(--t-strong); transition:background .2s var(--e-soft)} .qty button:hover{background:rgba(0,0,0,.15)} .qty span{min-width:1.6em;text-align:center;font-size:13px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--t-strong)} .tray-empty{margin:.4em 0 0;font-size:14px;color:var(--t-muted)} .tray-foot{margin-top:auto;padding-top:1.2em} .tray-row{display:flex;align-items:baseline;justify-content:space-between; font-size:15px;margin-bottom:.9em;color:var(--t-body)} .tray-row b{font-size:20px;font-variant-numeric:tabular-nums;color:var(--t-heading)} .tray-note{margin:.8em 0 0;font-size:12px;color:var(--t-muted)} .btn-primary{ appearance:none;border:0;cursor:pointer;width:100%;min-height:48px; background:var(--bg);color:var(--white);border-radius:999px;padding:.92em 1.2em; font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:17px; transition:transform .3s var(--e-in),background .3s var(--e-soft)} .btn-primary:hover{transform:translateY(-2px);background:#23282F} .btn-primary.done{background:var(--accent);color:var(--bg)} /* facts + form */ .facts{margin:0;font-size:14px;line-height:1.5;color:var(--t-body)} .facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted); margin-top:1em} .facts dd{margin:.18em 0 0} .facts a{color:var(--t-strong)} .res-form{display:flex;flex-direction:column;gap:.75em} .res-form label{display:flex;flex-direction:column;gap:.3em; font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-muted)} .res-form input{ font:inherit;font-size:16px;color:var(--t-strong);letter-spacing:normal;text-transform:none; background:rgba(255,255,255,.72);border:1px solid var(--t-border);border-radius:10px; padding:.66em .8em;min-height:44px;width:100%; transition:border-color .25s var(--e-soft),background .25s var(--e-soft)} .res-form input:focus{outline:none;border-color:var(--bg);background:var(--white)} .res-form input[aria-invalid="true"]{border-color:#8E2F1C;background:#FBEFEC} .res-grid{display:grid;grid-template-columns:1fr 1fr 92px;gap:.6em} .res-error{margin:0;font-size:13px;color:#8E2F1C} .res-done{margin:0;font-size:15px;line-height:1.55;color:var(--t-body)} /* ---------- entrance ---------- */ @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes plate-in{from{opacity:0;transform:translate(6vw,7vh) scale(.62)}to{opacity:1;transform:none}} .boot .logo{animation:rise .7s var(--e-in) both .05s} .boot .nav{animation:rise .7s var(--e-in) both .12s} .boot .section-title{animation:rise .8s var(--e-in) both .2s} .boot .dish,.boot .dish-desc{animation:rise .8s var(--e-in) both .3s} .boot .thumbs{animation:rise .8s var(--e-in) both .4s} .boot .hint{animation:rise .8s var(--e-in) both .48s} .boot .order{animation:rise .8s var(--e-in) both .56s} .boot .hero-card{animation:plate-in .95s var(--e-in) both .22s} .boot .arc path{animation:arc-draw 1.5s var(--e-in) both .1s, arc-drift 22s linear infinite 1.6s} @keyframes arc-draw{from{opacity:0;stroke-dashoffset:520}to{opacity:1;stroke-dashoffset:0}} .swapping .section-title,.swapping .dish,.swapping .dish-desc,.swapping .thumbs,.swapping .hint{ animation:rise .62s var(--e-in) both} .swapping .dish,.swapping .dish-desc{animation-delay:.06s} .swapping .thumbs{animation-delay:.12s} .swapping .hint{animation-delay:.18s} /* ---------- focus ---------- */ :where(button,a):focus-visible{outline:2.5px solid var(--t-focus);outline-offset:3px; border-radius:999px} .thumb:focus-visible{outline-offset:4px} /* ============================ responsive ============================ */ @media (max-width:1180px){ .deck{font-size:12px} } @media (max-width:1024px){ :root{--gutter:6.4%} .panel{width:47%} .dish-desc{width:86%} .nav{gap:clamp(8px,1.9vw,26px)} .nav-link{padding:.34em .7em} } /* ==================== PHONE (<=700px) ==================== Gated on width ALONE. The old gate was "(max-width:700px) and (orientation:portrait)"; when a soft keyboard shrinks the layout viewport to 390x340 the orientation flips to landscape, the whole block stops applying and the parked off-canvas nav renders wide open. That was the menu opening by itself. There is no drawer any more either, so nothing is left to reveal. Model: dish first. Name, price, copy, the whole plate and a persistent order bar all fit the first screenful. No clearance-guard margins: the blob is drawn for portrait instead of being the desktop blob inflated to 270vw. */ @media (max-width:700px){ :root{ --gutter:6.4vw; --bandH:clamp(500px,132vw,660px); --fs-body:15px; } html,body{height:auto;min-height:100%} body{overflow:auto;-webkit-overflow-scrolling:touch} .stage{position:relative;inset:auto;height:auto;min-height:100dvh; overflow-x:clip;overflow-y:visible;display:flex;flex-direction:column; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 116px)} /* portrait-drawn cream band; the landscape blob and its arc step aside */ .blob,.arc{display:none} .blob-m{display:block;position:absolute;inset:auto;left:0;top:0; width:100%;height:var(--bandH);z-index:1;fill:var(--cream);pointer-events:none; filter:drop-shadow(0 16px 36px rgba(0,0,0,.28))} .arc-m{display:block;position:absolute;inset:auto;left:0;top:0; width:100%;height:calc(var(--bandH) * 1.4);z-index:0;fill:none;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0 34%,#000 52% 88%,transparent 99%); mask-image:linear-gradient(180deg,transparent 0 34%,#000 52% 88%,transparent 99%)} .arc-m path{stroke:var(--accent);stroke-width:3;stroke-linecap:round; stroke-dasharray:9 12;animation:arc-drift 22s linear infinite} /* white header card: row 1 logo + cart, row 2 the course rail, always visible */ .hdr{position:sticky;z-index:105;top:calc(env(safe-area-inset-top,0px) + 8px); left:auto;right:auto;transform:none;order:0; margin:calc(env(safe-area-inset-top,0px) + 8px) 12px 0; padding:8px 10px 8px 16px;background:var(--white);border-radius:26px; box-shadow:0 10px 28px rgba(9,11,14,.28); display:flex;flex-direction:column;align-items:stretch;gap:6px; --t-focus:var(--paper-focus)} .hdr-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .logo{flex:0 0 auto;font-size:22px;min-height:44px;display:flex;align-items:center} .cart-btn{width:44px;height:44px;margin-left:0;color:var(--ink-ui)} .cart-count{background:var(--bg);color:var(--accent)} .nav-pill{display:none} .nav{position:static;display:flex;gap:6px;align-items:center; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-bottom:2px;transform:none;background:none;box-shadow:none} .nav::-webkit-scrollbar{display:none} .nav-link{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center; padding:0 14px;border-radius:999px;font-size:15px;font-weight:500; color:var(--ink-ui);background:rgba(0,0,0,.06);white-space:nowrap} .nav-link.is-active{background:var(--pill-dark);color:var(--white);font-weight:600} /* panels dissolve into one column; order interleaves the plate with the copy */ .panel[hidden]{display:none} .panel:not([hidden]){display:contents} .section-title,.dish,.dish-desc,.thumbs,.hint,.menu-list,.about-copy{ position:static;width:auto;max-height:none} /* the course is an eyebrow, the DISH is the headline. The previous block shouted the category at 46px and whispered the product at 28px. */ .section-title{order:1;z-index:2;margin:18px var(--gutter) 0;max-width:none; display:flex;align-items:center;gap:.6em; font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; line-height:1;color:var(--t-heading)} .section-title::before{content:"";flex:0 0 auto;width:20px;height:3px; background:var(--accent);border-radius:2px} .dish{order:2;z-index:2;margin:10px var(--gutter) 0} .dish-head{max-width:none;line-height:1.12} .dish-name{font-size:clamp(26px,7.7vw,34px);letter-spacing:-.02em} .dish-price{font-size:17px;font-weight:600;margin-left:.45em} .dish-desc{order:3;z-index:2;margin:10px var(--gutter) 0;width:auto; text-align:left;line-height:1.5} /* plate straddles the seam, offset right like the desktop composition */ .hero-slot{order:4;position:relative;left:auto;top:auto;transform:none;z-index:3; width:min(77vw,340px);margin:18px 4vw 0 auto;touch-action:pan-y} .hero-card{box-shadow:0 22px 54px rgba(0,0,0,.55),0 0 0 5px rgba(255,255,255,.94)} .hero-card.swap{animation:plate-pop .46s var(--e-in)} /* rail peeks at the fold; shadows tuned for the dark field, where the old rgba(0,0,0,.22) drop and the dark active keyline were both invisible */ .thumbs{order:5;z-index:2;display:flex;gap:10px;overflow-x:auto; scroll-snap-type:x proximity;scrollbar-width:none; margin:26px 0 0;padding:4px var(--gutter) 6px} .thumbs::-webkit-scrollbar{display:none} .thumb{width:min(calc((100vw - 2*var(--gutter) - 40px)/5),64px);min-width:44px; max-width:64px;scroll-snap-align:center; box-shadow:0 6px 18px rgba(0,0,0,.55)} .thumb:hover{transform:none} .thumb:active{transform:scale(.94)} .thumb.is-active{transform:scale(1.08); box-shadow:0 0 0 3px var(--white),0 8px 20px rgba(0,0,0,.6)} /* a second control pointing up at the rail directly above it was desktop residue */ .hint{display:none} .menu-list{order:6;z-index:2;margin:26px var(--gutter) 0} .about-copy{order:6;z-index:2;margin:26px var(--gutter) 0; --t-body:var(--dark-body);--t-heading:var(--dark-heading)} .deck{order:9;z-index:2;position:static;left:auto;bottom:auto; margin:26px var(--gutter) 0;font-size:13px; display:flex;flex-wrap:wrap;gap:8px;align-items:center} .deck-link{min-height:48px;display:inline-flex;align-items:center;padding:0 16px; border:0;border-radius:999px;background:rgba(255,255,255,.09); color:var(--t-body);font-size:14px} .deck-link:hover{background:rgba(255,255,255,.16);color:var(--t-strong)} .deck-dot{display:none} .deck-note{width:100%;text-align:center;color:var(--t-muted);margin-top:2px} /* ordering must never sit below the fold */ /* Centred with auto margins, NOT translateX(-50%): the boot "rise" animation ends at transform:none with fill, which would drag a translate-centred bar off to the left for the whole 2.6s boot window. Same trap as the drawer. */ .stage .order{order:8;position:fixed;left:16px;right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px);top:auto; transform:none; width:auto;max-width:400px;min-width:0;height:auto;min-height:56px; margin:0 auto;padding:.8em 1.2em;font-size:18px;z-index:100; box-shadow:0 14px 34px rgba(0,0,0,.5)} .stage .order:hover{transform:translateY(-2px)} .boot .order{animation:none} .deck .deck-link{min-height:48px} .sheet{top:auto;bottom:0;left:0;right:0;width:auto;height:auto;max-height:85dvh; border-radius:22px 22px 0 0; padding:20px 18px calc(env(safe-area-inset-bottom,0px) + 24px); box-shadow:0 -22px 60px rgba(0,0,0,.5); transform:translateY(100%);transition:transform .46s var(--e-in)} .sheet.on{transform:none} .res-grid{grid-template-columns:1fr 1fr} .res-grid label:last-child{grid-column:1 / -1} } /* ============= LANDSCAPE PHONE (landscape, height<=520px) ============= Keeps the desktop one-screen composition but re-spaces the left column so the description can never collide with the thumbs, and clamps the plate. */ @media (orientation:landscape) and (max-height:520px){ :root{ --gutter:max(6%, env(safe-area-inset-left,0px), env(safe-area-inset-right,0px)); --fs-title:clamp(26px,11vh,42px); --fs-dish:clamp(17px,7vh,26px); --fs-price:clamp(12px,4.5vh,16px); --fs-body:12px; } .section-title{top:13%} .dish{top:26.5%} .dish-desc{top:34%;width:88%;line-height:1.3} .thumbs{top:52%} .thumb{width:max(44px,11.5vh)} .hint{top:69%;min-height:44px} .hero-slot{width:min(46.6vw,74vh);top:56%} .order{top:auto;bottom:6%;height:auto;min-height:44px;padding:.6em 1.1em} .deck{bottom:4.5%} .deck-note{display:none} .cart-btn{width:44px;height:44px} } /* Touch hardware, including tablets that keep the desktop composition. Every control gets a 44px hit area even where the visual stays small. */ @media (pointer:coarse){ button{touch-action:manipulation} .res-form input{font-size:16px} /* under 16px triggers iOS focus auto-zoom */ .sheet-x{width:44px;height:44px} .nav-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center; justify-content:center} .cart-btn{width:44px;height:44px;min-width:44px} .order{min-height:44px} /* scoped >700 so it cannot resurrect the pill that the phone block hides */ @media (min-width:701px){ .hint{min-height:44px;display:inline-flex;align-items:center} } .logo{min-height:44px;display:inline-flex;align-items:center} .deck-link{min-height:44px;display:inline-flex;align-items:center} .facts a{min-height:44px;display:inline-flex;align-items:center} .qty button{width:44px;height:44px} } /* ==================== pagina meniului (meniu.html) ==================== Compoziția homepage-ului, oglindită: acolo text pe crem + farfurie pe întuneric, aici farfurie pe crem + lista pe întuneric. Așa nu se mai suprapun niciodată. */ .page-menu .menu-cap{position:absolute;top:31.53%;margin:0;line-height:1.12;max-width:87%} .page-menu .menu-cap .dish-name{font-size:clamp(17px,2.05vw,36px)} .page-menu .menu-cap .dish-price{font-size:clamp(12px,1.5vw,26px)} .page-menu .menu-note{position:absolute;top:38.2%;margin:0;width:78%; font-size:var(--fs-body);line-height:1.34;color:var(--t-muted)} .only-mob{display:none} /* Pe pagina de meniu arcul trece exact peste numele preparatelor. Ramane ca semn grafic, dar coborat la textura de fundal ca sa nu concureze cu textul. */ .page-menu .arc{opacity:.26} /* farfuria de previzualizare: mai mică, pe lobul de jos al blob-ului */ .preview-slot{position:absolute;z-index:4;left:20.5%;top:63%;width:23%;aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none} .preview-card{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative; will-change:transform,opacity; box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 0 5px rgba(255,255,255,.9)} .preview-card img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .preview-card.swap{animation:plate-pop .46s var(--e-in)} /* lista: o coloană pe câmpul întunecat, la dreapta blob-ului (se termină la x=470u) */ .page-menu .menu-list{position:absolute;z-index:5;left:52%;top:15.5%;bottom:8.5%;width:42.1%; margin:0;padding:0 .4% 0 0; display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.2vh,26px); overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent} .course-head{display:flex;align-items:center;gap:.7em;margin:0 0 .3em; font-size:clamp(10px,.9vw,15px);font-weight:800;letter-spacing:.22em; text-transform:uppercase;color:var(--t-price)} /* stație pe traseu: aceeași liniuță ambru punctată ca arcul */ .course-head::before{content:"";flex:0 0 auto;width:2.2em;border-top:2.4px dashed var(--accent)} .course-rows{list-style:none;margin:0;padding:0} .page-menu .boot .menu-cap {animation:rise .8s var(--e-in) both .3s} .page-menu .boot .menu-note {animation:rise .8s var(--e-in) both .38s} .page-menu .boot .preview-card{animation:plate-in .95s var(--e-in) both .22s} .page-menu .boot .course-head {animation:rise .7s var(--e-in) both .3s} .page-menu .boot .menu-row {animation:rise .6s var(--e-in) both calc(.34s + var(--i,0)*.045s)} /* ecrane scunde: 15 rânduri fără scroll şi la 720px înălţime */ @media (min-width:701px) and (max-height:760px){ .page-menu .menu-list{gap:clamp(6px,1.4vh,14px)} .menu-row{padding:.16em 0} .course-head{margin-bottom:.12em} } @media (min-width:701px) and (max-width:1024px){ .page-menu .menu-list{left:50%;width:44.1%} } @media (pointer:coarse){ .menu-row{min-height:44px;align-items:center} } /* mobil portrait: bandă crem sus, farfuria pe muchie, lista pe întuneric */ @media (max-width:700px){ .page-menu .menu-cap{display:none} .page-menu .menu-note{position:static;order:3;z-index:2;width:auto; margin:2.8vw var(--gutter) 0;color:var(--t-body)} .only-desk{display:none} .only-mob{display:inline} .page-menu .preview-slot{order:4;position:relative;left:auto;top:auto;transform:none; z-index:3;width:min(66vw,300px);margin:clamp(28px,9vw,64px) auto 0} .preview-card{box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 5px rgba(255,255,255,.92)} .page-menu .menu-list{position:static;display:block;order:6;z-index:2;overflow:visible; padding:0;width:auto; margin:max(clamp(24px,8vw,48px), 62vw - 128px, 128vw - 428px) var(--gutter) 0} .course-head{margin:1.7em 0 .2em;font-size:12px} .course:first-child .course-head{margin-top:0} .menu-row{padding:.55em 0;min-height:52px;align-items:center} .menu-row:active{transform:scale(.98)} .menu-row .m-name{font-size:18px} .menu-row .m-price{font-size:14px} } @media (orientation:landscape) and (max-height:520px){ .page-menu .menu-list{top:12%;bottom:8%;left:50%;width:44%;gap:8px} .page-menu .menu-cap{top:28%} .page-menu .menu-note{top:41%} .preview-slot{width:min(23vw,40vh)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .arc path{animation:none} }