:root{ color-scheme:light dark; --olive:#5E6B37; --olive-d:#3D4A22; --gold:#C9A24B; --gold-hi:#E3C06A; --cream:#F4EEE1; --cream-2:#ECE7DF; --espresso:#2A2520; --brown:#8C5143; --shadow:0 10px 34px -18px rgba(42,37,32,.45); --head-h:66px; /* semantic — light */ --bg:#F4EEE1; --surface:#F4EEE1; --surface-2:#ECE7DF; --text:#2A2520; --muted:#7a6f63; --heading:#3D4A22; --brand-name:#3D4A22; --brand-brown:#8C5143; --price:#5E6B37; --line:rgba(201,162,75,.4); --item-line:rgba(140,81,67,.22); --opt-text:#3D4A22; /* star lattice — olive on cream */ --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%235E6B37' stroke-linejoin='round'%3E%3Cpath d='M50 4 61 27 86 27 69 45 79 69 50 55 21 69 31 45 14 27 39 27Z' opacity='.55'/%3E%3Cpath d='M50 4 61 39 96 50 61 61 50 96 39 61 4 50 39 39Z'/%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' stroke-width='2.4' transform='translate(54 54) scale(.72)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(-24 -24) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(156 -24) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(-24 156) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(156 156) scale(.48)'/%3E%3C/svg%3E"); --pattern-op:.085; } @media (prefers-color-scheme:dark){ :root{ --bg:#1e1a16; --surface:#26201a; --surface-2:#2f2820; --text:#F4EEE1; --muted:#b6a992; --heading:#E3C06A; --brand-name:#F4EEE1; --brand-brown:#cf9a80; --price:#E3C06A; --line:rgba(201,162,75,.42); --item-line:rgba(201,162,75,.15); --opt-text:#F4EEE1; /* star lattice — gold on espresso; olive would disappear here */ --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cdefs%3E%3Cg id='s' fill='none' stroke='%23C9A24B' stroke-linejoin='round'%3E%3Cpath d='M50 4 61 27 86 27 69 45 79 69 50 55 21 69 31 45 14 27 39 27Z' opacity='.55'/%3E%3Cpath d='M50 4 61 39 96 50 61 61 50 96 39 61 4 50 39 39Z'/%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23s' stroke-width='2.4' transform='translate(54 54) scale(.72)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(-24 -24) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(156 -24) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(-24 156) scale(.48)'/%3E%3Cuse href='%23s' stroke-width='3.6' transform='translate(156 156) scale(.48)'/%3E%3C/svg%3E"); --pattern-op:.085; } } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{ font-family:'Tajawal',system-ui,sans-serif; color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; /* No background here on purpose — the page colour lives on so the star lattice in body::before (z-index:-1) is not painted over. */ } body[data-lang="en"]{direction:ltr} img{display:block;max-width:100%} .ar-only{display:inline} .en-only{display:none} body[data-lang="en"] .ar-only{display:none} body[data-lang="en"] .en-only{display:inline} /* ---------- display type ---------- */ .display{font-family:'Aref Ruqaa',serif;font-weight:700;letter-spacing:.01em} body[data-lang="en"] .display{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.015em} /* ---------- star lattice backdrop ---------- The same star that draws the divider between categories, tiled faintly behind the whole menu: one at the centre of each tile, quarter stars interlocking at the corners. Fixed rather than scrolling, so it reads as printed stock the menu moves over and never seams. The hero, photo bands and footer paint their own opaque backgrounds on top, so the lattice stays in the menu area only. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--pattern);background-size:200px 200px; opacity:var(--pattern-op); /* Fade the lattice out down the middle so it never competes with the item names and prices — it stays full strength in the margins either side and drops to a whisper behind the text column. Fixed + centred, so that clean core tracks the content column at every width. */ -webkit-mask-image:radial-gradient(ellipse 76% 58% at 50% 50%,rgba(0,0,0,.14),#000 76%); mask-image:radial-gradient(ellipse 76% 58% at 50% 50%,rgba(0,0,0,.14),#000 76%); } /* Phones have no margins to decorate, so the centre fade would erase the lattice entirely. Drop the mask there and let it sit evenly across the screen instead — fainter, and a little tighter so the star still reads. */ @media (max-width:700px){ body::before{ -webkit-mask-image:none;mask-image:none; background-size:150px 150px;opacity:calc(var(--pattern-op) * .62); } } /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:60;height:var(--head-h); display:flex;align-items:center;justify-content:space-between; padding:0 clamp(14px,4vw,40px); background:var(--surface); border-bottom:1.5px solid var(--line); box-shadow:0 6px 22px -16px rgba(42,37,32,.55); } header .brand{display:flex;align-items:center;gap:11px;font-family:'Aref Ruqaa',serif;color:var(--brand-name);font-size:1.32rem;text-decoration:none} body[data-lang="en"] header .brand{font-family:'Cormorant Garamond',serif;font-weight:600} header .brand img{height:40px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))} .lang-btn{ font-family:'Tajawal',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.05em; color:var(--brand-name);background:transparent;border:1.5px solid var(--gold); padding:7px 16px;border-radius:40px;cursor:pointer;transition:.28s; } .lang-btn:hover{background:var(--gold);color:#241f1c} /* ---------- hero ---------- */ .hero{ position:relative;min-height:92vh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; padding:60px 20px;overflow:hidden;background:#241f1c; } .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center; filter:saturate(1.05);transform:scale(1.08)} .hero .veil{position:absolute;inset:0; background:linear-gradient(180deg,rgba(36,31,28,.62) 0%,rgba(36,31,28,.5) 40%,rgba(36,31,28,.86) 100%)} .hero .frame{position:absolute;inset:clamp(12px,3vw,28px);border:1px solid rgba(201,162,75,.5); pointer-events:none} .hero .frame::before,.hero .frame::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold-hi)} .hero .frame::before{top:-2px;inset-inline-start:-2px;border-inline-end:0;border-bottom:0} .hero .frame::after{bottom:-2px;inset-inline-end:-2px;border-inline-start:0;border-top:0} .hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .hero-logo{width:min(340px,74vw);filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))} /* Both logos are inline carrying their own width/height attributes, and the reset's max-width only covers . Without this they ignore the box and render at their intrinsic 328px — overflowing it and hanging off one side, which is what pushed the footer logo left of centre. */ .hero-logo svg,footer .flogo svg{display:block;width:100%;height:auto} .hero .eyebrow{margin-top:26px;color:var(--gold-hi);font-weight:500; letter-spacing:.42em;font-size:.72rem;text-transform:uppercase} body[data-lang="ar"] .hero .eyebrow{letter-spacing:.28em} .hero h1{color:var(--cream);font-size:clamp(1.5rem,5vw,2.6rem);margin-top:14px;line-height:1.3} .hero .tag{color:rgba(244,238,225,.82);font-weight:300;margin-top:12px;font-size:clamp(.95rem,2.4vw,1.1rem);max-width:520px} /* ---------- category rail ---------- */ .rail{ position:sticky;top:var(--head-h);z-index:50; background:linear-gradient(180deg,#4b5a2d 0%,var(--olive-d) 55%,#35411d 100%); border-bottom:1px solid rgba(201,162,75,.45); box-shadow:inset 0 1px 0 rgba(227,192,106,.26),0 12px 26px -20px rgba(0,0,0,.9); } /* Soft fades over the two ends, each shown only while there is still something to scroll to on that side — so on a wide screen, where every chip fits, no fade appears at all. Physical left/right: app.js works out which side has more content, in both reading directions. */ .rail::before,.rail::after{ content:"";position:absolute;top:0;bottom:0;width:46px;z-index:2; pointer-events:none;opacity:0;transition:opacity .35s ease; } .rail::before{left:0;background:linear-gradient(90deg,var(--olive-d) 15%,transparent)} .rail::after{right:0;background:linear-gradient(270deg,var(--olive-d) 15%,transparent)} .rail.fade-l::before{opacity:1} .rail.fade-r::after{opacity:1} .rail-inner{ position:relative;display:flex;gap:10px;overflow-x:auto; padding:14px clamp(14px,4vw,34px); scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth; } .rail-inner::-webkit-scrollbar{display:none} /* The gold pill sits behind the chips and slides to whichever one is active, instead of the highlight jumping. app.js sets its size and position. */ .rail-pill{ position:absolute;top:0;left:0;z-index:0;border-radius:40px;opacity:0; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 5px 16px -5px rgba(201,162,75,.75),inset 0 1px 0 rgba(255,255,255,.4); } .rail-pill.on{opacity:1} /* Only glide once it has been placed once, so it does not fly in from the edge on first paint or after a language switch. */ .rail-inner.glide .rail-pill{ transition:transform .5s cubic-bezier(.34,.9,.28,1), width .5s cubic-bezier(.34,.9,.28,1), opacity .35s ease; } .chip{ position:relative;z-index:1;flex:0 0 auto; font-family:'Tajawal',sans-serif;font-weight:500;font-size:.95rem; color:rgba(244,238,225,.74); background:rgba(244,238,225,.05);border:1px solid rgba(244,238,225,.14); padding:9px 20px;border-radius:40px;cursor:pointer;white-space:nowrap;text-decoration:none; transition:color .3s ease,background .3s ease,border-color .3s ease, transform .3s cubic-bezier(.34,.9,.28,1); } body[data-lang="en"] .chip{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.08rem} .chip:hover{color:var(--cream);background:rgba(244,238,225,.11); border-color:rgba(227,192,106,.5);transform:translateY(-2px)} /* Active chip goes transparent so the gold pill behind it shows through. */ .chip.active,.chip.active:hover{ color:var(--olive-d);font-weight:700; background:transparent;border-color:transparent;transform:none; } /* ---------- sections ---------- */ main{padding-bottom:20px} .section{max-width:920px;margin:0 auto;padding:clamp(40px,7vw,72px) clamp(16px,5vw,34px) 10px} .sec-head{text-align:center;margin-bottom:34px} .sec-head .num{color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:.9rem;letter-spacing:.3em} .sec-head h2{color:var(--heading);font-size:clamp(1.9rem,6vw,3rem);line-height:1.15;margin-top:2px} .sec-head .en-sub{color:var(--brand-brown);font-weight:300;letter-spacing:.28em;text-transform:uppercase;font-size:.74rem;margin-top:8px} body[data-lang="en"] .sec-head .en-sub{display:none} .group-title{display:flex;align-items:center;gap:14px;margin:30px 0 16px;color:var(--brand-brown)} .group-title span{font-family:'Aref Ruqaa',serif;font-size:1.35rem;white-space:nowrap} body[data-lang="en"] .group-title span{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600} .group-title::before,.group-title::after{content:"";height:1px;background:var(--line);flex:1} /* item */ .item{padding:15px 4px;border-bottom:1px dashed var(--item-line);opacity:0;transform:translateY(18px)} .item.rise{animation:rise .6s cubic-bezier(.22,.7,.24,1) forwards} @keyframes rise{to{opacity:1;transform:none}} .item-top{display:flex;align-items:baseline;gap:10px} .item-name{font-weight:700;font-size:1.06rem;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap} body[data-lang="en"] .item-name{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:600} .leader{flex:1;border-bottom:1.5px dotted var(--line);transform:translateY(-4px);min-width:16px} .price{font-weight:700;color:var(--price);white-space:nowrap;font-size:1.02rem} .price .cur{font-size:.72em;color:var(--brand-brown);font-weight:500;margin-inline-start:2px} .item-desc{color:var(--muted);font-size:.86rem;font-weight:300;margin-top:5px;max-width:80%} .badge{font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:30px;letter-spacing:.02em;line-height:1.5} .badge.spicy{color:#a8321f;background:rgba(168,50,31,.1);border:1px solid rgba(168,50,31,.3)} .badge.meal{color:var(--heading);background:rgba(201,162,75,.13);border:1px solid rgba(201,162,75,.34)} .opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .opt{font-size:.7rem;color:var(--opt-text);background:var(--surface-2);border:1px solid var(--line); padding:3px 10px;border-radius:30px;font-weight:500} /* dual price */ .dual{display:flex;gap:8px;white-space:nowrap} .pp{display:flex;flex-direction:column;align-items:center;gap:1px; background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:4px 11px;min-width:58px} .pp .lbl{font-size:.58rem;color:var(--brand-brown);letter-spacing:.02em} .pp .val{font-weight:700;color:var(--price);font-size:.96rem} .pp.out{background:rgba(201,162,75,.1)} /* ---------- mashrabiya divider ---------- */ .divider{display:flex;align-items:center;justify-content:center;gap:18px;max-width:920px;margin:48px auto;padding:0 24px} .divider .ln{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold) 60%,var(--gold))} .divider .ln.r{background:linear-gradient(90deg,var(--gold),var(--gold) 40%,transparent)} .star{width:40px;height:40px;color:var(--gold);flex:0 0 auto;opacity:0;transform:rotate(-25deg) scale(.7)} .star.spin{animation:spin .9s cubic-bezier(.2,.7,.2,1) forwards} @keyframes spin{to{opacity:1;transform:rotate(0) scale(1)}} /* ---------- image band ---------- */ .band{position:relative;height:min(340px,52vh);margin:20px 0;overflow:hidden;display:flex;align-items:center;justify-content:center} .band .bg{position:absolute;inset:0;background-size:cover;background-position:center} .band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(61,74,34,.72),rgba(42,37,32,.5))} .band .cap{position:relative;z-index:2;text-align:center;color:var(--cream);padding:20px} .band .cap .display{font-size:clamp(1.6rem,5vw,2.6rem)} .band .cap p{color:var(--gold-hi);letter-spacing:.3em;font-size:.72rem;text-transform:uppercase;margin-top:8px;font-weight:300} /* ---------- footer ---------- */ footer{position:relative;margin-top:40px;padding:60px 20px 40px;text-align:center;overflow:hidden;background:#241f1c} footer .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16} footer .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,31,28,.9),rgba(36,31,28,.96))} footer .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px} footer .flogo{width:min(240px,60vw)} footer .contact{display:flex;flex-wrap:wrap;justify-content:center;gap:11px 26px;margin:8px 0 2px;padding:0 10px} footer .contact a{display:inline-flex;align-items:center;gap:8px;color:var(--gold-hi);text-decoration:none;font-size:.94rem;font-weight:500;transition:.25s} footer .contact a:hover{color:#fff} footer .contact svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} footer .note{color:rgba(244,238,225,.6);font-size:.82rem;font-weight:300;max-width:420px} footer .line{color:var(--gold);letter-spacing:.3em;font-size:.7rem;text-transform:uppercase} footer .sig{color:rgba(244,238,225,.4);font-size:.72rem;margin-top:8px} @media (max-width:560px){ .item-desc{max-width:100%} .item-name{font-size:1rem} .hero-logo{width:min(280px,80vw)} /* Still bigger than it was, but the rail is sticky — it must not eat the screen on a phone. */ .rail-inner{padding:11px clamp(14px,4vw,34px);gap:8px} .chip{padding:8px 17px;font-size:.9rem} body[data-lang="en"] .chip{font-size:1.02rem} } @media (prefers-reduced-motion:reduce){ html,.rail-inner{scroll-behavior:auto} .item,.star{opacity:1!important;transform:none!important;animation:none!important} .hero .bg{transform:none} .chip:hover{transform:none} .rail-inner.glide .rail-pill{transition:opacity .35s ease} }