/* ========================================================================== CURRY MILE — British Indian. Delivered. Velare · build 2026-08-20 Direction: dark / charcoal, warm white, sparing gold. Cinematic, editorial. ========================================================================== ONE-LINE SWAPS when the client sends brand assets: --gold → their exact brand gold --display / --sans → their chosen typefaces ========================================================================== */ :root{ /* charcoal & black tones — deliberately NOT pure #000 */ --black:#0F0F0E; /* deep charcoal — deliberately not #000 */ --charcoal:#121211; /* page ground */ --charcoal-2:#191817; /* raised surface */ --charcoal-3:#211F1D; /* hover / inset */ --warm-white:#F2EEE7; --muted:#B0A99D; --muted-2:#8C867B; /* gold — used sparingly: hairlines, nav states, small details */ --gold:#C8A75B; --gold-dim:rgba(200,167,91,.34); --gold-faint:rgba(200,167,91,.14); --hair:rgba(242,238,231,.13); --hair-soft:rgba(242,238,231,.07); /* Headings and body share one typeface — headings are simply larger and lighter. Swap --display alone to reintroduce a separate display face. */ --sans:'Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --display:'Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --slow:1.1s; --maxw:1280px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--sans); background:var(--charcoal); color:var(--warm-white); font-size:17.5px; line-height:1.72; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--gold);color:var(--black)} .container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px)} .narrow{max-width:820px} /* ---------- type ---------- */ h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.14;letter-spacing:.004em} .statement{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.34em; line-height:1.5; } .eyebrow{ font-family:var(--sans); font-size:12.5px;font-weight:400; text-transform:uppercase;letter-spacing:.4em; color:var(--gold); } .kicker{ font-family:var(--sans); font-size:12.5px;font-weight:400; text-transform:uppercase;letter-spacing:.38em; color:var(--muted-2); } p{color:var(--muted);font-weight:400;letter-spacing:.004em} p.lead{color:var(--warm-white);font-size:clamp(18px,1.7vw,21px);line-height:1.75} /* ---------- subtle reveal (no bounce, no fly-in) ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.10s}.reveal.d2{transition-delay:.20s} .reveal.d3{transition-delay:.30s}.reveal.d4{transition-delay:.40s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---------- header ---------- */ header.site{ position:fixed;top:0;left:0;right:0;z-index:900; padding:26px 0; transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent; } header.site.stuck{ background:rgba(18,18,17,.82); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px); padding:16px 0; border-bottom-color:var(--hair-soft); } header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:32px} .wordmark{display:flex;align-items:center} .wordmark img{height:30px;width:auto} .wordmark.sm img{height:46px} .nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);list-style:none} .nav a{ font-size:12.5px;text-transform:uppercase;letter-spacing:.22em;font-weight:600; color:var(--warm-white);padding:8px 0;position:relative;opacity:.9; transition:opacity .35s var(--ease),color .35s var(--ease); } .nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px; background:var(--gold);transition:right .45s var(--ease); } .nav a:hover{opacity:1} .nav a:hover::after,.nav a.active::after{right:0} .nav a.active{color:var(--gold);opacity:1} .nav-order{ font-size:12.5px;text-transform:uppercase;letter-spacing:.24em; border:1px solid var(--gold-dim);color:var(--gold); padding:11px 22px;transition:background .4s var(--ease),border-color .4s var(--ease); } .nav-order:hover{background:var(--gold-faint);border-color:var(--gold)} .burger{display:none;width:26px;height:16px;position:relative} .burger span{position:absolute;left:0;right:0;height:1px;background:var(--warm-white);transition:.35s var(--ease)} .burger span:nth-child(1){top:0}.burger span:nth-child(2){top:50%}.burger span:nth-child(3){bottom:0} body.menu-open .burger span:nth-child(1){top:50%;transform:rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){bottom:auto;top:50%;transform:rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:880;background:var(--black); display:flex;flex-direction:column;justify-content:center;gap:6px; padding:0 clamp(22px,7vw,64px); opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s; } body.menu-open .drawer{opacity:1;visibility:visible} .drawer a{ font-family:var(--display);font-weight:300;font-size:clamp(28px,7vw,44px); padding:12px 0;border-bottom:1px solid var(--hair-soft);color:var(--warm-white); } .drawer a:last-child{border-bottom:0;color:var(--gold)} /* ---------- cinematic hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero.short{min-height:74svh} .hero .bg{ position:absolute;inset:0;background-size:cover;background-position:center; transform:scale(1.04); animation:drift 26s var(--ease) forwards; /* the charcoal treatment the brief asks for: deepen and desaturate the plate, keep the food warm and legible */ filter:brightness(.68) saturate(.88) contrast(1.0); } @keyframes drift{to{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.hero .bg{animation:none;transform:none}} /* the "dark/charcoal treatment" from the brief: desaturate + deepen, keep food warm */ .hero .grade{ position:absolute;inset:0; background: linear-gradient(to right,rgba(18,18,17,.86) 0%,rgba(18,18,17,.5) 42%,rgba(18,18,17,.34) 100%), linear-gradient(to top,rgba(18,18,17,.96) 0%,rgba(18,18,17,.55) 38%,rgba(18,18,17,.34) 66%,rgba(18,18,17,.78) 100%), radial-gradient(120% 90% at 50% 58%,rgba(18,18,17,0) 0%,rgba(18,18,17,.6) 100%); } .hero .container{position:relative;z-index:2;width:100%} /* ---------- steam rising off the dish ---------- Sits above the photograph and its scrim, below the copy. Pure CSS: five blurred plumes on long, staggered, offset cycles so it never visibly loops. Deliberately slow — the brief asks for movement that is felt, not watched. */ .steam{ position:absolute;z-index:1;pointer-events:none; left:52%;top:3%; width:min(500px,48vw);height:34%; transform:translateX(-50%); } .steam span{ position:absolute;bottom:0; width:52%;height:52%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,251,244,.62), rgba(255,249,240,.24) 50%, rgba(255,249,240,0) 76%); filter:blur(15px); opacity:0; will-change:transform,opacity; animation:steam-rise 13s ease-out infinite; } .steam span:nth-child(1){left:8%; animation-delay:0s; animation-duration:13s} .steam span:nth-child(2){left:30%;width:62%;height:62%;animation-delay:2.6s; animation-duration:15s} .steam span:nth-child(3){left:50%;animation-delay:5.2s; animation-duration:12s} .steam span:nth-child(4){left:20%;width:44%;height:44%;animation-delay:7.8s; animation-duration:16s} .steam span:nth-child(5){left:40%;animation-delay:10.4s;animation-duration:14s} @keyframes steam-rise{ 0% {transform:translate3d(0,16%,0) scale(.42);opacity:0} 12% {opacity:.55} 45% {transform:translate3d(-14px,-68%,0) scale(1.05);opacity:.34} 100% {transform:translate3d(12px,-190%,0) scale(1.6);opacity:0} } @media (prefers-reduced-motion:reduce){.steam{display:none}} @media (max-width:860px){.steam{width:min(310px,66vw);top:2%;height:26%}} /* ---------- homepage: city gateway ---------- */ .gateway{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden} .gateway .bg{ position:absolute;inset:0;background-size:cover;background-position:center; transform:scale(1.05);animation:drift 30s var(--ease) forwards; filter:brightness(.70) saturate(.88) contrast(1.0); } .gateway .grade{ position:absolute;inset:0; background: linear-gradient(to bottom,rgba(18,18,17,.9) 0%,rgba(18,18,17,.42) 24%,rgba(18,18,17,.5) 58%,rgba(18,18,17,.94) 100%), radial-gradient(100% 74% at 50% 52%,rgba(18,18,17,0) 0%,rgba(18,18,17,.72) 100%); } .gateway .top,.gateway .mid,.gateway .base{position:relative;z-index:2} .gateway .top{padding:34px 0} .gateway .mid{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:40px 0} .gateway .base{padding:0 0 40px;text-align:center} .brand-statement{ font-family:var(--sans);font-weight:300; font-size:clamp(23px,4.5vw,52px); text-transform:uppercase;letter-spacing:.3em; line-height:1.42; margin-bottom:clamp(38px,6vw,64px); } .brand-statement em{font-style:normal;color:var(--gold)} .prompt{ font-family:var(--display);font-weight:300; font-size:clamp(16px,2.05vw,23px);letter-spacing:.06em;color:var(--muted); margin-bottom:clamp(30px,4.5vw,52px); } .cities{max-width:640px;margin:0 auto;width:100%} .city{ display:flex;align-items:center;gap:22px; padding:26px 4px 20px; border-bottom:1px solid var(--hair); position:relative; transition:border-color .6s var(--ease); } .city:first-child{border-top:1px solid var(--hair)} .city .name{ flex:0 0 auto; font-family:var(--sans);font-weight:300; font-size:clamp(20px,3.4vw,32px); text-transform:uppercase;letter-spacing:.24em; transition:color .6s var(--ease),letter-spacing .6s var(--ease); } .city .rule{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden} .city .rule::after{ content:"";position:absolute;inset:0;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease); } .city .arrow{ flex:0 0 auto;width:42px;height:42px;border-radius:50%; border:1px solid var(--hair); display:grid;place-items:center; transition:border-color .6s var(--ease),background .6s var(--ease),transform .6s var(--ease); } .city .arrow svg{width:14px;height:14px;stroke:var(--warm-white);transition:stroke .6s var(--ease)} .city .tag{ position:absolute;right:60px;bottom:22px; font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold); } .city:hover{border-bottom-color:var(--gold-dim)} .city:hover .name{color:var(--gold);letter-spacing:.28em} .city:hover .rule::after{transform:scaleX(1)} .city:hover .arrow{border-color:var(--gold);background:var(--gold-faint);transform:translateX(5px)} .city:hover .arrow svg{stroke:var(--gold)} .signature{ display:inline-block; font-size:12px;text-transform:uppercase;letter-spacing:.6em; color:var(--muted);opacity:.9; } /* ---------- sections ---------- */ .section{padding:clamp(58px,6.8vw,96px) 0} .section.tight{padding:clamp(46px,5.2vw,72px) 0} .section.dark2{background:var(--charcoal-2)} .rule-top{border-top:1px solid var(--hair-soft)} .sec-head{margin-bottom:clamp(40px,5vw,68px)} .sec-head.center{text-align:center;margin-left:auto;margin-right:auto;max-width:720px} .sec-head h2{font-size:clamp(36px,5.8vw,72px);margin-top:16px} .sec-head p{margin-top:18px;max-width:580px;font-size:18px} .sec-head.center p{margin-left:auto;margin-right:auto} /* ---------- ordering ---------- */ .order-direct{ border:1px solid var(--gold-dim); background:linear-gradient(180deg,rgba(200,167,91,.07),rgba(200,167,91,.02)); padding:clamp(30px,4.4vw,52px); display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; } .order-direct .t{display:flex;flex-direction:column;gap:12px} .order-direct .t b{ font-family:var(--sans);font-weight:400; font-size:clamp(20px,2.6vw,30px); text-transform:uppercase;letter-spacing:.28em;color:var(--warm-white); } .order-direct .t span{font-size:14.5px;text-transform:uppercase;letter-spacing:.3em;color:var(--gold)} .btn-gold{ display:inline-flex;align-items:center;gap:14px; border:1px solid var(--gold);color:var(--gold); padding:17px 36px;font-size:13px;text-transform:uppercase;letter-spacing:.28em; transition:background .45s var(--ease),color .45s var(--ease); white-space:nowrap; } .btn-gold:hover{background:var(--gold);color:var(--black)} .btn-gold svg{width:13px;height:13px;stroke:currentColor} .btn-line{ display:inline-flex;align-items:center;gap:14px; font-size:13px;text-transform:uppercase;letter-spacing:.28em;color:var(--warm-white); padding-bottom:10px;border-bottom:1px solid var(--gold-dim); transition:color .45s var(--ease),border-color .45s var(--ease),gap .45s var(--ease); } .btn-line:hover{color:var(--gold);border-color:var(--gold);gap:20px} .btn-line svg{width:13px;height:13px;stroke:currentColor} .partners{margin-top:20px} .partners .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.4em;color:var(--muted-2);margin-bottom:20px} .partner-row{display:flex;flex-wrap:wrap;border-top:1px solid var(--hair-soft)} .partner{ flex:1 1 0;min-width:150px; padding:22px 8px;text-align:center; border-bottom:1px solid var(--hair-soft);border-right:1px solid var(--hair-soft); font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--warm-white);opacity:1; transition:color .45s var(--ease),opacity .45s var(--ease),background .45s var(--ease); } .partner:last-child{border-right:0} .partner:hover{color:var(--gold);opacity:1;background:rgba(200,167,91,.045)} .partner small{display:block;margin-top:8px;font-size:11px;letter-spacing:.3em;color:var(--muted-2)} /* ---------- popular dishes (editorial strip) ---------- */ .dishes{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .dish{position:relative;display:block;overflow:hidden;background:var(--black);grid-column:span 2} .dish:nth-child(4),.dish:nth-child(5){grid-column:span 3} /* 4:3 matches the source photography, so the frame shows the dish, not a slice of it. The two wider tiles go 16:10 so both rows sit at a similar height. */ .dish .ph{display:block;aspect-ratio:4/3;overflow:hidden} .dish:nth-child(4) .ph,.dish:nth-child(5) .ph{aspect-ratio:16/10} .dish img{ width:100%;height:100%;object-fit:cover; filter:saturate(.94) contrast(1.0) brightness(.86); transform:scale(1.02); transition:transform 1.4s var(--ease),filter 1.4s var(--ease); } .dish:hover img{transform:scale(1.07);filter:saturate(1) contrast(1.06) brightness(.92)} .dish .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,18,17,.92) 0%,rgba(18,18,17,.06) 58%)} .dish .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 28px} .dish .cap b{ display:block;font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.4; text-transform:uppercase;letter-spacing:.2em; } .dish .cap i{ display:block;width:26px;height:1px;background:var(--gold);margin-top:14px;font-style:normal; transition:width .7s var(--ease); } .dish:hover .cap i{width:64px} /* ---------- numbers ---------- */ .numbers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)} .num{padding:clamp(34px,4.4vw,54px) 24px;border-right:1px solid var(--hair-soft);text-align:center} .num:last-child{border-right:0} .num b{ display:block;font-family:var(--display);font-weight:400; font-size:clamp(25px,3.3vw,42px);font-weight:300;color:var(--gold);letter-spacing:.04em;white-space:nowrap; } .num span{display:block;margin-top:14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.28em;color:var(--muted-2);line-height:1.9} /* ---------- ratings / social proof ---------- */ .ratings{display:flex;flex-wrap:wrap;justify-content:center;gap:0} .rating{ flex:1 1 0;min-width:180px;text-align:center;padding:34px 20px; border-right:1px solid var(--hair-soft); } .rating:last-child{border-right:0} .rating b{ display:flex;align-items:baseline;justify-content:center;gap:9px; font-family:var(--display);font-size:clamp(25px,3.3vw,40px);font-weight:300;letter-spacing:.03em;white-space:nowrap; } .rating b .st{color:var(--gold);font-family:var(--sans);font-size:.5em;line-height:1} .rating span{display:block;margin-top:13px;font-size:12px;text-transform:uppercase;letter-spacing:.34em;color:var(--muted-2)} /* ---------- about split ---------- */ .split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,86px);align-items:center} .split .ph{position:relative;overflow:hidden} .split .ph img{width:100%;aspect-ratio:4/3.4;object-fit:cover;filter:saturate(.92) contrast(1.0) brightness(.88)} .split h2{font-size:clamp(33px,4.8vw,58px)} .split .body{display:flex;flex-direction:column;gap:22px} /* ---------- final CTA ---------- */ .finale{position:relative;min-height:78svh;display:flex;align-items:center;text-align:center;overflow:hidden} .finale .bg{ position:absolute;inset:0;background-size:cover;background-position:center; filter:brightness(.66) saturate(.86) contrast(1.0); } .finale .grade{ position:absolute;inset:0; background:linear-gradient(to bottom,rgba(18,18,17,.92),rgba(18,18,17,.7) 45%,rgba(18,18,17,.96)); } .finale .container{position:relative;z-index:2} .finale h2{font-size:clamp(38px,6.8vw,86px);letter-spacing:.01em} /* ---------- notify — unused in v2, retained for a future second city ---------- */ .notify{border:1px solid var(--hair);padding:clamp(30px,4.4vw,54px);background:var(--charcoal-2)} .notify h3{font-size:clamp(24px,3.2vw,36px);margin:16px 0 16px} .notify p{max-width:520px} .nform{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .nform input{ flex:1 1 260px;background:transparent;border:0;border-bottom:1px solid var(--hair); color:var(--warm-white);padding:15px 2px;font-family:var(--sans);font-size:16.5px;font-weight:300; transition:border-color .4s var(--ease); } .nform input::placeholder{color:var(--muted-2);text-transform:uppercase;letter-spacing:.14em;font-size:13px} .nform input:focus{outline:none;border-bottom-color:var(--gold)} .nform .err{flex-basis:100%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#D98A6A;display:none} .nform.bad .err{display:block} .notify .ok{display:none;margin-top:22px;font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .notify.sent .ok{display:block} .notify.sent .nform{display:none} /* ---------- badge ---------- */ .badge{ display:inline-block;margin-bottom:22px; border:1px solid var(--gold);color:var(--gold); background:rgba(200,167,91,.10); padding:10px 22px;font-size:11.5px;text-transform:uppercase;letter-spacing:.38em; } /* ---------- menu page ---------- */ .menu-note{border-left:1px solid var(--gold-dim);padding-left:24px;max-width:660px;font-size:16px;line-height:1.7} .tabs{position:sticky;top:0;z-index:800;background:rgba(18,18,17,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)} .tabs .container{display:flex;gap:0;overflow-x:auto;scrollbar-width:none} .tabs .container::-webkit-scrollbar{display:none} .tab{ padding:20px 26px 18px;white-space:nowrap; font-size:12.5px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--muted-2); border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease); } .tab:hover{color:var(--warm-white)} .tab.active{color:var(--gold);border-bottom-color:var(--gold)} .menu-cat{padding:clamp(56px,7vw,92px) clamp(22px,5vw,64px) 0} .menu-cat .head{display:flex;align-items:baseline;gap:20px;margin-bottom:12px} .menu-cat h2{font-size:clamp(30px,4.4vw,52px);font-weight:700;letter-spacing:.005em} .menu-cat .line{flex:1;height:1px;background:var(--hair-soft)} .cat-note{max-width:640px;font-size:16px;line-height:1.7;margin-bottom:44px} .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px)} .mi{ display:flex;align-items:flex-start;justify-content:space-between;gap:24px; width:100%;text-align:left;padding:24px 0;border-bottom:1px solid var(--hair-soft); transition:border-color .4s var(--ease); } .mi:hover{border-bottom-color:var(--gold-dim)} .mi .n{display:block;font-size:17.5px;font-weight:700;letter-spacing:.02em;transition:color .4s var(--ease)} .mi:hover .n{color:var(--gold)} .mi .d{display:block;margin-top:9px;font-size:15.5px;color:var(--muted);line-height:1.65} .mi .tags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .mi .tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted-2);border:1px solid var(--hair-soft);padding:5px 10px} .mi .tag.hot{color:var(--gold);border-color:var(--gold-dim)} .mi .price{flex:0 0 auto;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.03em;color:var(--warm-white);white-space:nowrap} .mi .price .cur{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--muted-2);margin-left:6px} /* modal */ .modal{position:fixed;inset:0;z-index:960;display:none;place-items:center;padding:24px} .modal.open{display:grid} .modal .veil{position:absolute;inset:0;background:rgba(6,6,6,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .modal .card{ position:relative;max-width:520px;width:100%;background:var(--charcoal-2); border:1px solid var(--hair);max-height:88svh;overflow:auto; } .modal .card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:brightness(.88) saturate(.95)} .modal .card .in{padding:clamp(24px,4vw,38px)} .modal .card h3{font-size:clamp(24px,3.3vw,34px);margin-bottom:8px} .modal .card .pr{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--gold);font-size:18.5px;margin-bottom:18px} .modal .card p{font-size:16px;line-height:1.7} .modal .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(18,18,17,.7);display:grid;place-items:center;font-size:19px;line-height:1;color:var(--warm-white)} /* ---------- footer ---------- */ footer.site{background:var(--black);border-top:1px solid var(--hair-soft);padding:clamp(52px,6vw,80px) 0 34px} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} footer.site h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.34em;color:var(--gold);margin-bottom:20px;font-family:var(--sans);font-weight:400} footer.site ul{list-style:none;display:flex;flex-direction:column;gap:12px} footer.site a,footer.site li{font-size:15px;color:var(--muted);transition:color .4s var(--ease)} footer.site a:hover{color:var(--gold)} footer.site .f-brand img{height:26px;margin-bottom:18px} footer.site .f-brand p{font-size:15px;max-width:300px} .social{display:flex;gap:18px;margin-top:22px} .social a{font-size:11.5px;text-transform:uppercase;letter-spacing:.24em} .f-bottom{ margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--hair-soft); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-2); } .f-bottom a{ color:var(--muted-2);border-bottom:1px solid var(--hair-soft);padding-bottom:2px; transition:color .4s var(--ease),border-color .4s var(--ease); } .f-bottom a:hover{color:var(--gold);border-color:var(--gold-dim)} /* ---------- article ---------- */ .article{padding-top:clamp(120px,14vw,180px)} .article h1{font-size:clamp(38px,6.2vw,76px);margin:20px 0 26px} .article .meta{font-size:12px;text-transform:uppercase;letter-spacing:.34em;color:var(--muted-2)} .article-body{max-width:720px} .article-body h2{font-size:clamp(28px,4vw,46px);margin:56px 0 20px} .article-body h3{font-family:var(--sans);font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:.28em;color:var(--gold);margin:46px 0 16px} .article-body p{margin-bottom:22px;font-size:18px;line-height:1.85} .article-body p.big{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.8vw,31px);color:var(--warm-white);line-height:1.45;letter-spacing:.01em;margin:38px 0} .article-body figure{margin:48px 0} .article-body figure img{filter:saturate(.92) contrast(1.0) brightness(.90)} .article-body figcaption{margin-top:14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.26em;color:var(--muted-2)} .article-body hr{border:0;border-top:1px solid var(--hair-soft);margin:52px 0} /* ---------- journal grid ---------- */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)} .post{display:block;background:var(--charcoal-2);border:1px solid var(--hair-soft);transition:border-color .5s var(--ease)} .post:hover{border-color:var(--gold-dim)} .post .ph{display:block;overflow:hidden;aspect-ratio:16/10} .post img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.88);transition:transform 1.3s var(--ease),filter 1.3s var(--ease)} .post:hover img{transform:scale(1.05);filter:saturate(1) brightness(.95)} .post .in{display:block;padding:28px} .post .kicker{display:block} .post h3{font-size:23px;font-weight:400;margin:15px 0 13px} .post p{font-size:15.5px} .post .more{display:inline-block;margin-top:20px;font-size:11.5px;text-transform:uppercase;letter-spacing:.28em;color:var(--gold)} .post.lead{grid-column:span 3;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch} .post.lead .ph{aspect-ratio:auto;height:100%;min-height:320px} .post.lead .in{padding:clamp(30px,4vw,56px);display:flex;flex-direction:column;justify-content:center} .post.lead h3{font-size:clamp(28px,4vw,46px)} /* ---------- responsive ---------- */ @media (max-width:1080px){ .dishes{grid-template-columns:repeat(2,1fr)} .dish,.dish:nth-child(4),.dish:nth-child(5){grid-column:span 1} .dish:nth-child(5){grid-column:span 2} .dish:nth-child(5) .ph{aspect-ratio:16/9} .numbers{grid-template-columns:1fr 1fr} .num:nth-child(2){border-right:0} .num:nth-child(1),.num:nth-child(2){border-bottom:1px solid var(--hair-soft)} .posts{grid-template-columns:1fr 1fr} .post.lead{grid-column:span 2} footer.site .cols{grid-template-columns:1fr 1fr} } @media (max-width:940px){ .nav,.nav-order{display:none} .burger{display:block} .split{grid-template-columns:1fr} .menu-grid{grid-template-columns:1fr} .post.lead{grid-template-columns:1fr} } @media (max-width:640px){ body{font-size:16.5px} .dishes{grid-template-columns:1fr;gap:12px} .dish,.dish:nth-child(4),.dish:nth-child(5){grid-column:span 1} .dish .ph,.dish:nth-child(5) .ph{aspect-ratio:16/10} .posts{grid-template-columns:1fr} .post.lead{grid-column:span 1} .ratings{flex-direction:column} .rating{border-right:0;border-bottom:1px solid var(--hair-soft)} .rating:last-child{border-bottom:0} .order-direct{flex-direction:column;align-items:flex-start} .city{flex-wrap:wrap;gap:14px} .city .name{order:1} .city .rule{order:2} .city .arrow{order:3} .city .tag{order:4;position:static;flex:0 0 100%;margin-top:0;text-align:left} footer.site .cols{grid-template-columns:1fr} } /* ========================================================================== OPTION B — warm white reading pages -------------------------------------------------------------------------- Homepage and both city pages stay dark and cinematic. The pages people READ — Menu, Journal, Our Story — open into Warm White, the fourth colour in the client's stated palette (Charcoal / Black / Warm White / Subtle Gold). Applied by adding class="light" to . Nothing else changes. ========================================================================== */ body.light{ --charcoal:#F6F2EA; /* page ground becomes warm white */ --charcoal-2:#EFE9DE; /* raised surface */ --charcoal-3:#E6DFD2; --warm-white:#1A1815; /* "warm white" role now carries the ink */ --muted:#5E584E; --muted-2:#8A8275; --gold:#9C7B27; /* gold darkened so it holds on a light ground */ --gold-dim:rgba(156,123,39,.42); --gold-faint:rgba(156,123,39,.10); --hair:rgba(26,24,21,.16); --hair-soft:rgba(26,24,21,.10); background:#F6F2EA; color:#1A1815; } body.light ::selection{background:#9C7B27;color:#F6F2EA} /* the hero photograph stays dark and cinematic — the page opens up beneath it */ body.light .hero .grade{ background: linear-gradient(to right,rgba(18,18,17,.86) 0%,rgba(18,18,17,.5) 42%,rgba(18,18,17,.34) 100%), linear-gradient(to top,rgba(18,18,17,.96) 0%,rgba(18,18,17,.55) 38%,rgba(18,18,17,.34) 66%,rgba(18,18,17,.78) 100%), radial-gradient(120% 90% at 50% 58%,rgba(18,18,17,0) 0%,rgba(18,18,17,.6) 100%); } body.light .hero .container, body.light .hero h1, body.light .hero .menu-note{color:#F2EEE7} body.light .hero .eyebrow{color:#C8A75B} body.light .hero .menu-note{border-left-color:rgba(200,167,91,.5)} /* header: over the dark hero it must stay LIGHT — only once it condenses onto the warm-white page does it flip to ink. */ /* .has-hero = the page opens on a dark photograph, so the header starts light and flips to ink once it condenses. Pages without a hero start ink. */ body.light.has-hero header.site:not(.stuck) .nav a{color:#F2EEE7} body.light.has-hero header.site:not(.stuck) .nav a.active{color:#C8A75B} body.light.has-hero header.site:not(.stuck) .nav a::after{background:#C8A75B} body.light.has-hero header.site:not(.stuck) .nav-order{color:#C8A75B;border-color:rgba(200,167,91,.4)} body.light.has-hero header.site:not(.stuck) .nav-order:hover{background:rgba(200,167,91,.12);border-color:#C8A75B} body.light.has-hero header.site:not(.stuck) .burger span{background:#F2EEE7} body.light:not(.has-hero) header.site .nav a{color:#1A1815} body.light:not(.has-hero) header.site .nav a.active{color:#755A18} body.light:not(.has-hero) header.site .nav a::after{background:#9C7B27} body.light:not(.has-hero) header.site .nav-order{color:#755A18;border-color:rgba(156,123,39,.5)} body.light:not(.has-hero) header.site .burger span{background:#1A1815} body.light:not(.has-hero) header.site .wordmark img{content:url(logo-dark.png)} body.light header.site.stuck{ background:rgba(246,242,234,.9); border-bottom-color:rgba(26,24,21,.12); } body.light header.site.stuck .nav a{color:#1A1815} body.light header.site.stuck .nav a.active{color:#755A18} body.light header.site.stuck .nav-order{color:#755A18;border-color:rgba(156,123,39,.5)} body.light header.site.stuck .burger span{background:#1A1815} body.light header.site.stuck .wordmark img{content:url(logo-dark.png)} /* sticky menu tab bar */ body.light .tabs{ background:rgba(246,242,234,.94); border-top-color:rgba(26,24,21,.10); border-bottom-color:rgba(26,24,21,.10); } body.light .tab:hover{color:#1A1815} body.light .tab.active{color:#755A18;border-bottom-color:#9C7B27} /* editorial imagery is not darkened on a light ground */ body.light .article-body figure img, body.light .post img, body.light .split .ph img{filter:saturate(1) contrast(1.02) brightness(1)} body.light .modal .card img{filter:none} body.light .modal .veil{background:rgba(26,24,21,.55)} body.light .modal .card{background:#FFFDF9;border-color:rgba(26,24,21,.14)} body.light .modal .x{background:rgba(26,24,21,.55);color:#F6F2EA} /* buttons re-weighted for a light ground */ body.light .btn-gold{border-color:#9C7B27;color:#755A18} body.light .btn-gold:hover{background:#9C7B27;color:#F6F2EA} body.light .order-direct{ border-color:rgba(156,123,39,.45); background:linear-gradient(180deg,rgba(156,123,39,.07),rgba(156,123,39,.02)); } body.light .post{background:#FFFDF9} body.light .notify{background:#EFE9DE} /* the footer stays dark on every page — it anchors the whole site */ body.light footer.site{ background:#0F0F0E;color:#B0A99D;border-top-color:rgba(242,238,231,.07); } body.light footer.site h4{color:#C8A75B} body.light footer.site a,body.light footer.site li{color:#B0A99D} body.light footer.site a:hover{color:#C8A75B} body.light footer.site .f-bottom{color:#8C867B;border-top-color:rgba(242,238,231,.07)} body.light footer.site .f-bottom a{color:#8C867B;border-bottom-color:rgba(242,238,231,.07)} body.light footer.site .f-bottom a:hover{color:#C8A75B;border-color:rgba(200,167,91,.34)} body.light footer.site .f-brand img, body.light .drawer{filter:none} body.light .drawer{background:#0F0F0E} body.light .drawer a{color:#F2EEE7} body.light .drawer a:last-child{color:#C8A75B} @media (max-width:860px){ .hero .grade{ background: linear-gradient(to top,rgba(18,18,17,.95) 0%,rgba(18,18,17,.5) 40%,rgba(18,18,17,.28) 70%,rgba(18,18,17,.7) 100%), radial-gradient(130% 80% at 50% 55%,rgba(18,18,17,0) 0%,rgba(18,18,17,.5) 100%); } .post.lead .ph{aspect-ratio:16/10;min-height:0;height:auto} } /* ── Menu legibility & dietary colour coding ───────────────────────────────── Requested 2026-08-23. Two rules govern this block: 1. Every colour that carries TEXT is checked against its own ground at WCAG AA (4.5:1). Measured values are noted beside each. 2. Colour is never the ONLY signal — each tag keeps its written word ("Vegetarian", "Gluten free"), so the coding survives colour blindness, greyscale printing and the brief's reduced-motion/plain-text fallbacks. The lighter gold (#9C7B27) stays on borders and rules, where contrast minimums do not apply; gold TEXT on the warm-white ground uses #755A18. */ .mi .tag{ font-weight:600;letter-spacing:.16em; border-radius:2px; } /* dish name holds ink on the warm-white page, and stays legible on hover */ body.light .menu-cat h2{color:#1A1815} /* 15.9:1 */ body.light .mi .n{color:#171512} /* 16.3:1 */ body.light .mi:hover .n{color:#755A18} /* 5.8:1 */ body.light .mi .d{color:#4F4A42} /* 8.0:1 */ /* ---- dark ground (city pages / all-charcoal build) ---- */ .mi .tag-v{color:#7FBF8A;border-color:rgba(127,191,138,.42)} /* 8.7:1 */ .mi .tag-ve{color:#7FBF8A;border-color:rgba(127,191,138,.42)} .mi .tag-gf{color:#8FBEDB;border-color:rgba(143,190,219,.42)} /* 9.4:1 */ .mi .tag-signature{color:#C8A75B;border-color:rgba(200,167,91,.45)} /* 8.2:1 */ .mi .tag-mild{color:#B0A99D;border-color:rgba(176,169,157,.36)} /* 8.0:1 */ .mi .tag-medium{color:#E0A46A;border-color:rgba(224,164,106,.42)} /* 8.7:1 */ .mi .tag-hot{color:#E08A7A;border-color:rgba(224,138,122,.45)} /* 7.2:1 */ /* ---- warm-white ground (the menu page) — all verified >= 5.6:1 ---- */ body.light .mi .tag-v, body.light .mi .tag-ve{color:#2E6B3E;border-color:rgba(46,107,62,.38);background:rgba(46,107,62,.06)} /* 5.72:1 */ body.light .mi .tag-gf{color:#1F5E7A;border-color:rgba(31,94,122,.38);background:rgba(31,94,122,.06)} /* 6.40:1 */ body.light .mi .tag-signature{color:#755A18;border-color:rgba(117,90,24,.40);background:rgba(117,90,24,.07)} /* 5.82:1 */ body.light .mi .tag-mild{color:#5E584E;border-color:rgba(94,88,78,.32);background:transparent} /* 6.31:1 */ body.light .mi .tag-medium{color:#944D14;border-color:rgba(148,77,20,.38);background:rgba(148,77,20,.06)}/* 5.65:1 */ body.light .mi .tag-hot{color:#A32C1E;border-color:rgba(163,44,30,.40);background:rgba(163,44,30,.06)} /* 6.41:1 */ /* ── Tab bar: black, and the menu's own scroll reveal ──────────────────────── Requested 2026-08-24. The inactive tab colour was --muted-2, which measures only 3.40:1 on the warm-white ground and failed AA. Both states are now ink; the active one is separated by the gold rule beneath it and by full ink, not by being the only readable item in the row. */ body.light .tab{color:#2E2A24} /* 12.77:1 */ body.light .tab:hover{color:#1A1815} /* 15.87:1 */ body.light .tab.active{color:#1A1815;border-bottom-color:#9C7B27} /* menu reveal — same fade-and-rise as .reveal, applied to nodes menu.js builds after site.js has already gathered its own targets */ .menu-cat .head.rv, .menu-cat .cat-note.rv, .mi.rv{ opacity:0;transform:translateY(16px); transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease); } .menu-cat .head.rv.in, .menu-cat .cat-note.rv.in, .mi.rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .menu-cat .head.rv, .menu-cat .cat-note.rv, .mi.rv{opacity:1;transform:none;transition:none;transition-delay:0s !important} } /* ── Sticky category bar must clear the fixed header ───────────────────────── .tabs sticks to top:0, but header.site is position:fixed and 79px tall at z-index 900 against the bar's 800 — so once the page scrolled past the hero the category bar was 100% covered and the menu lost its navigation entirely. --hdr-h is published by site.js from the header's live height (it changes when the header condenses), with a static fallback for a no-JS load. */ .tabs{top:78px;top:var(--hdr-h,78px)} /* the scrollspy also has to judge "current" from below the header + bar */ html{scroll-padding-top:calc(var(--hdr-h,78px) + 63px + 16px)} /* ── v2: charcoal, never black ─────────────────────────────────────────────── The brief asks for dark charcoal and rules out pure black. Every scrim in this build is now based on rgba(18,18,17) — the --charcoal value — rather than rgba(10,10,10), and --black is #0F0F0E: still a step under the page ground so the footer and drawer keep their separation, but not black. Photo filters were also eased. brightness() is multiplicative, so a true black pixel in a source photograph stays black no matter what is applied — the residual pure black in this build comes from the placeholder imagery, not from the CSS, and will go when real graded photography arrives. */ /* ── Menu legibility, pass 2 (2026-08-27) ──────────────────────────────────── The menu is the page that has to sell. Sizes lifted, the description weight raised off 300 (thin type on a light ground is the main thing that made it feel faint), price given real presence, and the row opened up so each dish reads as an entry rather than a line in a list. */ .mi .n{font-size:21px;letter-spacing:.01em;line-height:1.25} .mi .d{font-size:16.5px;font-weight:400;line-height:1.68;margin-top:11px} .mi .price{font-size:22px;font-weight:500} .mi .price .cur{font-size:11.5px} .mi{padding-top:30px;padding-bottom:30px} .mi .tags{margin-top:15px} .mi .tag{font-size:11px;padding:6px 11px;letter-spacing:.14em} .menu-cat h2{font-size:clamp(34px,5vw,60px)} .cat-note{font-size:17.5px;line-height:1.72;max-width:660px} /* on the warm-white page, darken the description further and give the price full ink — both were carrying muted greys built for a charcoal ground */ body.light .mi .d{color:#3F3A33} /* 10.5:1, was 8.0:1 */ body.light .mi .price{color:#171512} /* 16.3:1 */ body.light .cat-note{color:#453F38} /* 9.6:1 */ body.light .mi .price .cur{color:#6B6459} /* 5.3:1 */ @media (max-width:640px){ .mi .n{font-size:19px} .mi .d{font-size:15.8px} .mi .price{font-size:20px} } /* ── Category banners on the menu (2026-08-27) ─────────────────────────────── One wide image per section. Wrapped in a block-level div because the card bug in this codebase comes from putting aspect-ratio on inline spans. */ .cat-band{ display:block;overflow:hidden;margin:6px 0 30px; aspect-ratio:21/6;background:var(--charcoal-2); } .cat-band img{ display:block;width:100%;height:100%;object-fit:cover; filter:brightness(.86) saturate(.96) contrast(1.02); transform:scale(1.02); transition:transform 1.6s var(--ease),filter .8s var(--ease); } .cat-band:hover img{transform:scale(1.06)} body.light .cat-band{background:#EFE9DE} body.light .cat-band img{filter:brightness(1) saturate(1) contrast(1.01)} @media (max-width:640px){ .cat-band{aspect-ratio:16/9;margin-bottom:24px} } @media (prefers-reduced-motion:reduce){ .cat-band img{transition:none;transform:none} } /* ── Depth / 3D motion (2026-08-27) ────────────────────────────────────────── Paired with assets/motion.js. Everything here animates transform only, so nothing in this block can trigger layout while scrolling. All of it is switched off under prefers-reduced-motion at the foot of the file. */ /* cards that lean towards the cursor */ .tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s var(--ease); } .tilt:hover{box-shadow:0 26px 60px -28px rgba(0,0,0,.75)} .tilt .hp-ph{overflow:hidden} .tilt .hp-ph img{ will-change:transform; transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s var(--ease); } /* the tilt handler drives the image transform directly, so the stock hover scale must not fight it */ .tilt:hover .hp-ph img{transform:none} body.light .tilt:hover{box-shadow:0 26px 60px -30px rgba(26,24,21,.35)} /* parallax layers: the frame clips, the image is oversized and travels */ .plx{will-change:transform;transition:none} .cat-band{perspective:1000px} .cat-band img{transform-origin:center} .hp-proper .hp-ph{overflow:hidden} /* hero background is driven by the scroll handler, so drop the CSS drift animation that would otherwise compete for the same property */ .hp-hero .bg{animation:none;will-change:transform} /* settling-flat entrance */ .dpt{ opacity:0; transform:perspective(1000px) rotateX(7deg) translate3d(0,26px,0); transform-origin:50% 100%; transition:opacity .95s var(--ease), transform .95s cubic-bezier(.22,.61,.36,1); } .dpt-in{opacity:1;transform:perspective(1000px) rotateX(0) translate3d(0,0,0)} /* menu rows lift very slightly — enough to feel physical, not enough to move the eye off the price column */ .mi{transition:transform .45s var(--ease),background-color .45s var(--ease)} .mi:hover{transform:translate3d(0,-3px,0)} @media (hover:none){ .tilt{transform:none !important} .tilt .hp-ph img{transform:none !important} .mi:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .tilt,.tilt .hp-ph img,.plx,.hp-hero .bg,.mi{transform:none !important;transition:none !important} .dpt{opacity:1;transform:none;transition:none} } /* ── Category tabs must fit without scrolling (2026-08-27) ─────────────────── Seven labels came to 1268px against 1152px of available width, so the last category was always cut off. Padding, tracking and size all come down together — cutting only one of them would have had to cut it hard. The fluid clamps keep all seven on screen from 1024px up; below that the row still scrolls, which is the right behaviour on a phone. */ .tabs .container{justify-content:space-between} .tab{ padding:20px clamp(8px,1.15vw,17px) 18px; font-size:clamp(10.4px,.86vw,12px); letter-spacing:.1em; flex:0 1 auto; } @media (max-width:1023px){ .tabs .container{justify-content:flex-start} .tab{padding:20px 18px 18px;font-size:11.5px;letter-spacing:.14em} } /* ── Brand palette taken from the logo (2026-08-27) ────────────────────────── Sampled from the client's own CM-Vector-Logo: the mark runs #E3C519 at the top of the gradient to #B4832E at the foot, averaging #CAA324. That average becomes --gold on the charcoal ground (7.83:1). It CANNOT be used for text on the warm-white bands — #CAA324 measures just 2.14:1 there — so gold text on light keeps its own darker value, #7A5F14 (5.41:1), drawn from the same hue family as the foot of the gradient. */ :root{ --gold:#CAA324; --gold-dim:rgba(202,163,36,.38); --gold-faint:rgba(202,163,36,.12); --gold-top:#E3C519; --gold-deep:#B4832E; } body.light{--gold:#7A5F14;--gold-dim:rgba(122,95,20,.42);--gold-faint:rgba(122,95,20,.10)} /* gold text on the light homepage bands and the light pages */ .hp-inv .eyebrow,.hp-inv .hp-fig, .hp-inv a:hover .hp-t,.hp-inv .hp-sig:hover .hp-nm{color:#7A5F14} body.light .tab.active, body.light:not(.has-hero) header.site .nav a.active, body.light header.site.stuck .nav a.active, body.light .btn-gold, body.light .mi:hover .n, body.light .mi .tag-signature{color:#7A5F14} /* the wordmark logo carries its own gradient, so it must never be tinted */ .wordmark img,.f-brand img{filter:none} /* ── Real logo is SQUARE, the placeholder was wide (2026-08-27) ────────────── The client's CM-Vector-Logo is 1:1 — mark above, wordmark below — so the 30px height that suited the old horizontal placeholder rendered it postage stamp sized. Height roughly doubles and the header gains a little room. The file is used unmodified; only its display size changes here. */ .wordmark img{height:58px;width:auto} header.site.stuck .wordmark img{height:46px;transition:height .5s var(--ease)} .wordmark.sm img{height:96px} footer.site .f-brand img{height:76px;width:auto;margin-bottom:6px} @media (max-width:900px){ .wordmark img{height:48px} header.site.stuck .wordmark img{height:40px} } /* ── Header nav sized up (2026-08-27) ──────────────────────────────────────── 12.5px with .22em tracking read as small print rather than navigation. Larger type needs less tracking to stay tidy, so the two move together. */ .nav{gap:clamp(20px,2.4vw,38px)} .nav a{font-size:15px;letter-spacing:.13em;font-weight:600;padding:10px 0} .nav-order{font-size:13px;letter-spacing:.18em;padding:13px 26px} header.site.stuck .nav a{font-size:14px} @media (max-width:1100px){ .nav a{font-size:13.5px;letter-spacing:.1em} } /* ── Order button in white (2026-08-27) ────────────────────────────────────── Border and label both go white on the dark headers, which is the highest contrast this button has ever had (about 17:1 on the hero scrim). Hover fills white and flips the label to charcoal, so the "filled" state is still there without ever putting white text on gold — that combination measures 2.39:1 and is unreadable. The light pages keep a dark label: white on warm white is invisible. */ .nav-order{color:#FFFFFF;border-color:rgba(255,255,255,.55)} .nav-order:hover{background:#FFFFFF;color:#121211;border-color:#FFFFFF} header.site.stuck .nav-order{color:#FFFFFF;border-color:rgba(255,255,255,.55)} header.site.stuck .nav-order:hover{background:#FFFFFF;color:#121211;border-color:#FFFFFF} /* dark hero on a light page — header still sits on the photograph */ body.light.has-hero header.site:not(.stuck) .nav-order{color:#FFFFFF;border-color:rgba(255,255,255,.55)} body.light.has-hero header.site:not(.stuck) .nav-order:hover{background:#FFFFFF;color:#121211;border-color:#FFFFFF} /* header condensed onto a warm-white page — must stay ink */ body.light:not(.has-hero) header.site .nav-order, body.light header.site.stuck .nav-order{color:#1A1815;border-color:rgba(26,24,21,.42)} body.light:not(.has-hero) header.site .nav-order:hover, body.light header.site.stuck .nav-order:hover{background:#1A1815;color:#F6F2EA;border-color:#1A1815} /* ── Category bands now carry the client's own square photography ──────────── Their shots are 1280x1280. A 21:6 letterbox threw most of the plate away, so the band opens up to 12:5 (2.4:1) — still a band, but it keeps the food. Focal point sits slightly above centre, where plated food usually sits. */ .cat-band{aspect-ratio:12/5} .cat-band img{object-position:50% 42%} @media (max-width:640px){ .cat-band{aspect-ratio:4/3} } /* ── Order button: solid yellow (2026-08-27) ───────────────────────────────── Filled with the bright yellow from the top of the logo gradient (#E3C519), which is also what the client's current site uses for its own buttons. The label is charcoal, not white: white on this yellow measures 1.71:1 and cannot be read at all. Charcoal gives 10.95:1 and matches how their live DOWNLOAD APP button is set. Same treatment on every header state, dark or light, so the primary action never changes appearance mid-site. */ .nav-order, header.site.stuck .nav-order, body.light.has-hero header.site:not(.stuck) .nav-order, body.light:not(.has-hero) header.site .nav-order, body.light header.site.stuck .nav-order{ background:#E3C519; color:#121211; border-color:#E3C519; font-weight:700; } .nav-order:hover, header.site.stuck .nav-order:hover, body.light.has-hero header.site:not(.stuck) .nav-order:hover, body.light:not(.has-hero) header.site .nav-order:hover, body.light header.site.stuck .nav-order:hover{ background:#F2D53A; color:#121211; border-color:#F2D53A; } /* ---- footer app column ---- */ footer.site .cols{align-items:start} .f-app-note{font-size:13.5px;color:var(--muted);line-height:1.55;margin:10px 0 14px;max-width:26ch} .f-stores{display:flex;flex-direction:column;align-items:flex-start;gap:4px} .f-stores a{display:inline-flex} .f-stores img{width:auto;display:block;height:40px} .f-stores .f-play img{height:54px;margin-left:-8px} @media (max-width:900px){ .f-stores{flex-direction:row;align-items:center;flex-wrap:wrap} } /* ── Footer: four columns, social as icons (2026-08-27) ────────────────────── The Order column went — its two links duplicated the header and the app badges. Menu now sits with the rest of the site under Curry Mile. */ footer.site .cols{grid-template-columns:1.25fr .8fr .8fr 1.15fr} .social{display:flex;gap:10px;margin-top:16px} .social a{ width:40px;height:40px;border-radius:999px;display:grid;place-items:center; border:1px solid var(--hair);color:var(--muted); transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .social a svg{width:19px;height:19px;display:block} .social a:hover{color:var(--gold);border-color:var(--gold-dim);transform:translate3d(0,-2px,0)} @media (max-width:1000px){ footer.site .cols{grid-template-columns:1fr 1fr} } @media (max-width:600px){ footer.site .cols{grid-template-columns:1fr} } /* ── Tab bar with the real 17-section menu (2026-08-27) ────────────────────── The earlier sizing made 7 categories fit on one row. The real menu has 17, which cannot fit at any readable size — 2948px of tabs against 1280px of bar. Rather than force a horizontal scroll that hides half the menu, the bar now wraps and centres. Everything stays visible and reachable. */ .tabs .container{flex-wrap:wrap;justify-content:center;row-gap:0;overflow-x:visible} .tab{ padding:13px clamp(9px,1vw,15px); font-size:clamp(10.5px,.8vw,11.8px); letter-spacing:.08em; border-bottom-width:2px; } @media (max-width:1023px){ .tabs .container{justify-content:flex-start;flex-wrap:wrap} .tab{padding:12px 12px;font-size:11px;letter-spacing:.06em} } /* ── Menu rows redesigned for the real data (2026-08-27) ───────────────────── The old row was built around a description. The client's menu publishes none, so every row collapsed to a name and a price separated by a large empty band. This is the classic printed-menu treatment instead: name left, price right, a dotted leader carrying the eye between them, and rows tight enough that a 17-section menu stays readable. Rows that DO gain a description later simply push the leader down — nothing here assumes the description stays empty. */ .menu-grid{gap:0 clamp(34px,5vw,80px)} .mi{ align-items:baseline; padding-top:15px;padding-bottom:15px; gap:0; } .mi .mi-body{display:flex;align-items:baseline;gap:0;flex:1;min-width:0} .mi .n{ flex:0 1 auto;font-size:18px;line-height:1.3; white-space:normal; } /* the dotted leader only appears when there is nothing else between */ .mi .mi-body::after{ content:"";flex:1 1 auto;height:0;margin:0 10px 5px; border-bottom:1px dotted var(--hair); min-width:18px; } .mi .d:empty{display:none} .mi .d{flex:1 0 100%;order:3;margin-top:6px;font-size:15px} .mi .tags:empty{display:none} .mi .price{font-size:18px;font-weight:700;letter-spacing:.01em} .mi .price .cur{font-size:10.5px;letter-spacing:.16em} body.light .mi .mi-body::after{border-bottom-color:rgba(26,24,21,.28)} /* a 122-dish menu needs the section openers to breathe less */ .menu-cat{padding-top:clamp(38px,4.4vw,62px)} .cat-note:empty{display:none} @media (max-width:760px){ .menu-grid{grid-template-columns:1fr} .mi .n{font-size:17px} } /* ── "Ready to order?" given some colour (2026-08-27) ──────────────────────── It was a pale outlined box on a pale ground and disappeared at the foot of a 122-dish menu. Now it carries the brand yellow, which is also where the eye should land after reading the whole menu. */ .order-direct{ background:linear-gradient(135deg,#E3C519 0%,#EBD24A 55%,#E3C519 100%); border:2px solid #121211; border-radius:4px; padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,48px); } .order-direct *{color:#121211 !important} /* 10.9:1 on the yellow */ .order-direct .t{font-weight:800;letter-spacing:.02em} .order-direct span{opacity:.82} .order-direct .btn-gold{ background:#121211;border-color:#121211;font-weight:700; } .order-direct .btn-gold *{color:#F6F2EA !important} .order-direct .btn-gold:hover{background:#2A2320;border-color:#2A2320} body.light .order-direct .btn-gold{color:#F6F2EA !important} /* the light-theme rule at line 669 is body.light-scoped and was winning, so the yellow has to match that specificity */ body.light .order-direct, .order-direct{ background:linear-gradient(135deg,#E3C519 0%,#EBD24A 55%,#E3C519 100%) !important; border:2px solid #121211 !important; } /* ── Category bar redesigned as chips (2026-08-27) ─────────────────────────── Seventeen underlined text links across three rows read as an overflowing list. As chips the row reads as a deliberate filter set, the active one is unmistakable, and the wrap looks intended rather than forced. */ .tabs{background:var(--charcoal-2);border-bottom:1px solid var(--hair)} body.light .tabs{background:#F1E9D8;border-bottom-color:rgba(26,24,21,.12)} .tabs .container{gap:8px;padding-top:16px;padding-bottom:16px} .tab{ padding:9px 16px;border:1px solid var(--hair);border-radius:999px; font-size:11.5px;letter-spacing:.09em;font-weight:700;line-height:1; background:transparent;border-bottom-width:1px; transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease); } .tab:hover{border-color:var(--gold-dim)} .tab.active{background:var(--gold);border-color:var(--gold);border-bottom-color:var(--gold)} body.light .tab{border-color:rgba(26,24,21,.20);color:#2E2A24} body.light .tab:hover{background:rgba(26,24,21,.05);color:#1A1815} body.light .tab.active{background:#E3C519;border-color:#121211;color:#121211} /* 10.9:1 */ /* ── Menu keeps two columns on mobile (2026-08-27) ─────────────────────────── It collapsed to one column under 760px, which made a 122-dish menu an extremely long scroll. Two columns hold all the way down; the dotted leader is dropped on the narrowest screens because there is no room for it to read as anything but noise, and the price sits under the name instead. */ @media (max-width:760px){ .menu-grid{grid-template-columns:1fr 1fr;gap:0 clamp(14px,3vw,26px)} .mi{padding-top:13px;padding-bottom:13px;flex-wrap:wrap;gap:2px} .mi .n{font-size:15px;line-height:1.3} .mi .price{font-size:15px} } @media (max-width:520px){ .mi .mi-body{flex:1 1 100%} .mi .mi-body::after{display:none} /* leader has no room to read */ .mi{align-items:flex-start;flex-direction:column} .mi .price{margin-top:3px;font-size:14.5px;opacity:.9} .mi .n{font-size:14.5px} .menu-grid{gap:0 12px} .cat-band{aspect-ratio:16/9} } /* ---- legal pages ---- */ .legal-updated{margin-top:14px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .legal .article-body h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:38px 0 12px} .legal .article-body h2:first-of-type{margin-top:8px} .legal .article-body p,.legal .article-body li{font-size:16.5px;line-height:1.72} .legal .article-body ul{margin:12px 0 4px;padding-left:20px} .legal .article-body li{margin-bottom:8px} .legal-note{ padding:20px 22px;margin-bottom:34px;border-left:3px solid var(--gold); background:rgba(202,163,36,.08);font-size:15.5px;line-height:1.65; } mark.tbc{ background:rgba(163,44,30,.12);color:#A32C1E;padding:1px 6px;border-radius:3px; font-size:.92em;font-weight:600; } body.light mark.tbc{background:rgba(163,44,30,.10);color:#8E2418} /* ── About Curry Mile uses the full page width (2026-08-27) ────────────────── The article sat in an 820px column with a 720px body inside it, so the copy wrapped far more than it needed to and the page felt narrow against the header. Everything now shares the header's own container — the same left edge as the logo, the same right edge as the Order button. Trade-off worth knowing: 1280px is a long line for running text. The copy is set in two columns on wide screens so the measure stays readable while the page still fills, and drops to one column below 1000px. */ .article .container{max-width:var(--maxw)} .legal .container{max-width:var(--maxw)} .article .article-body{max-width:none} .article .article-body > p, .article .article-body > ul{max-width:none} @media (min-width:1000px){ .article .article-body{ column-count:2;column-gap:clamp(40px,4vw,72px); } .article .article-body > h2{column-span:all;margin-top:34px} .article .article-body > figure{column-span:all;margin:28px 0} .article .article-body > hr{column-span:all} .article .article-body > .statement{column-span:all} .article .article-body > p{break-inside:avoid-column} } /* the legal pages keep a single readable column — a policy read in two columns is genuinely worse to use */ .legal .article-body{column-count:1 !important;max-width:860px} /* the hero photograph is not body copy, so it must not sit inside the columns */ .article-hero{max-width:none} .article-hero img{width:100%;display:block} /* ── Two columns dropped: they were clipping copy (2026-08-27) ─────────────── CSS multi-column plus `column-span:all` figures plus the transform on every .reveal child produced fragmentation the browser could not resolve, and the final paragraph of a column was cut off mid-line. Losing text is worse than a narrower measure, so the body is one column again — but a wide one. It still runs edge to edge with the logo and the Order button; only the running copy is held to a measure the eye can actually track. */ @media (min-width:1000px){ .article .article-body{column-count:1;column-gap:normal} .article .article-body > h2, .article .article-body > figure, .article .article-body > hr, .article .article-body > .statement, .article .article-body > p{column-span:none} } .article .article-body > p, .article .article-body > ul{max-width:78ch} /* ~980px — far wider than the old 692 */ .article .article-body > h2{max-width:none} .article .article-body > figure{max-width:none} .article .article-body{overflow:visible} /* ── Header logo enlarged (2026-08-27) ─────────────────────────────────────── 58px -> 82px at rest, 64px once the header condenses. The mark is square, so height drives the header's own height: the vertical padding comes down to compensate and the bar stays close to what it was. */ .wordmark img{height:82px} header.site.stuck .wordmark img{height:64px} header.site{padding:14px 0} header.site.stuck{padding:10px 0} @media (max-width:1100px){ .wordmark img{height:70px} header.site.stuck .wordmark img{height:56px} } @media (max-width:900px){ .wordmark img{height:60px} header.site.stuck .wordmark img{height:50px} } .legal .article-body h3{font-size:17.5px;font-weight:700;margin:22px 0 6px} /* ── Menu reads as one list again (2026-08-28) ─────────────────────────────── With the banners gone the section openers carry the rhythm on their own, so they get a little more air above and a firmer rule beneath the heading. */ .menu-cat{padding-top:clamp(44px,5vw,72px)} .menu-cat .head{margin-bottom:6px} .menu-cat .line{height:1px;background:var(--hair)} body.light .menu-cat .line{background:rgba(26,24,21,.20)} .cat-note{margin-bottom:30px} .menu-cat:first-of-type{padding-top:clamp(30px,3.4vw,44px)} /* ── Mobile menu, rebuilt (2026-08-28) ─────────────────────────────────────── Two problems at phone width, both from the real 17-section / 122-dish menu: 1. The chip bar wrapped to 419-538px — more than half the screen before any food appeared. On a phone it becomes ONE swipeable row instead. 2. Two columns at ~165px each cannot hold "Mint & Coriander Tikka" beside a price, so names ran into the figures. The cell now stacks: name on its own lines, price beneath. Two columns are kept, as asked. */ @media (max-width:760px){ /* --- chip bar: one swipeable row --- */ .tabs .container{ flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start; scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-top:12px;padding-bottom:12px; } .tabs .container::-webkit-scrollbar{display:none} .tab{flex:0 0 auto;white-space:nowrap} /* --- menu cell: name over price --- */ .menu-grid{grid-template-columns:1fr 1fr;gap:0 14px} .mi{ display:flex;flex-direction:column;align-items:flex-start; gap:4px;padding:14px 0; } .mi .mi-body{display:block;width:100%} .mi .mi-body::after{display:none} /* no room for a leader */ .mi .n{ display:block;font-size:14.5px;line-height:1.3; white-space:normal;overflow-wrap:anywhere; } .mi .price{ display:block;font-size:14px;font-weight:700;white-space:nowrap; margin-top:2px;opacity:.92; } .mi .price .cur{font-size:9.5px;letter-spacing:.14em} .mi .d{font-size:13.5px} } @media (max-width:400px){ .menu-grid{gap:0 10px} .mi .n{font-size:13.8px} } /* ── Mobile menu cell, final (2026-08-28) ──────────────────────────────────── Two earlier attempts kept losing to flex rules inherited from the desktop row — the price ended up overlapping the next column. The cell is GRID on mobile, which discards the flex model entirely, and every child is reset explicitly rather than relying on what it inherits. */ @media (max-width:760px){ .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .mi{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-auto-rows:min-content; align-items:start !important; justify-content:start !important; gap:3px !important; padding:14px 0 !important; min-width:0; } .mi .mi-body{ display:block !important; flex:none !important; width:auto !important; min-width:0 !important; grid-column:1 !important; } .mi .mi-body::after{display:none !important} .mi .n{ display:block !important; font-size:14.5px !important;line-height:1.32 !important; white-space:normal !important;overflow-wrap:anywhere; } .mi .d{display:block;font-size:13.5px;margin-top:4px} .mi .price{ display:block !important; grid-column:1 !important; flex:none !important; margin:0 !important; font-size:14px !important;font-weight:700 !important; white-space:nowrap !important;text-align:left !important; opacity:.9; } .mi .price .cur{font-size:9.5px;letter-spacing:.14em;margin-left:4px} } @media (max-width:400px){ .menu-grid{gap:0 12px} .mi .n{font-size:13.8px !important} } /* ── Text over photography must not follow the page theme (2026-08-29) ─────── body.light redefines --warm-white to ink (#1A1815) so body copy flips. But the dish cards and the finale sit on PHOTOGRAPHS, which stay dark whatever the page theme is — so on the city pages they inherited ink onto black and measured about 1.0:1. Invisible. Anything painted over an image gets an explicit colour, never the theme token. Verified by sampling rendered pixels, not computed CSS: a photograph has no background-color for CSS to compare against. */ body.light .dish .cap b, body.light .dish .cap i, body.light .dish .cap span, body.light .dish .cap{color:#F2EEE7} body.light .dish .cap i{color:rgba(242,238,231,.72)} body.light .finale h2, body.light .finale p, body.light .finale .btn-gold, body.light .finale .eyebrow{color:#F2EEE7} body.light .finale .eyebrow{color:#E3C519} body.light .finale .btn-gold{border-color:rgba(242,238,231,.55)} body.light .finale .btn-gold:hover{background:#F2EEE7;color:#121211;border-color:#F2EEE7} /* the hero sits on a photograph too */ body.light .hero h1, body.light .hero .menu-note, body.light .hero .brand-statement{color:#F2EEE7} body.light .hero .eyebrow{color:#E3C519} /* ── Footer text must not follow the page theme (2026-08-29) ───────────────── The footer is DARK on every page, including the warm-white ones. Its paragraphs were inheriting #5E584E — the muted grey introduced for text on cream — which measured 2.72:1 against the footer's own #0F0F0E. Same trap as the dish cards: a theme token used on a surface that contradicts the page theme. Pinned explicitly; measured 8.04:1. */ footer.site p, footer.site .f-brand p, footer.site .f-app-note, body.light footer.site p, body.light footer.site .f-brand p, body.light footer.site .f-app-note{color:#B0A99D} footer.site li a, body.light footer.site li a{color:#B0A99D} footer.site li a:hover, body.light footer.site li a:hover{color:#E3C519} footer.site h4, body.light footer.site h4{color:#E3C519} /* ── The ordering platforms row on the light band (2026-08-29) ─────────────── "Or order through" and the small city label under each platform were set in --muted-2 (#8A8275) — a grey built for the CHARCOAL theme. On the cream band both measured 3.40:1, under AA for 11-12px text. Pinned to the light-ground secondary greys: 6.31:1 and 8.04:1. */ body.light .partner small, body.light .partners small, body.light .partner-note, body.light .or-through{color:#5E584E} body.light .partner{color:#171512} body.light .partner:hover{color:#7A5F14} /* ---- social icons, real accounts only ---- Instagram and Facebook come from the client's own footer. TikTok is omitted deliberately: the handle could not be verified, and TikTok returns 200 for profiles that do not exist, so a link would have been a guess. */ .social{display:flex;gap:10px;margin-top:16px} .social a{ width:40px;height:40px;border-radius:999px;display:grid;place-items:center; border:1px solid rgba(242,238,231,.20);color:#B0A99D; transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .social a svg{width:19px;height:19px;display:block} .social a:hover{color:#E3C519;border-color:rgba(227,197,25,.55);transform:translate3d(0,-2px,0)} /* ---------- ordering-platforms block ---------------------------------- Reported unreadable on the light theme. The label inherited --muted-2 (#8A8275 → 3.35:1 on warm white); an earlier fix targeted `.partner small` and never reached `.lbl`. Both are pinned explicitly here, and the row is given enough weight that the block reads as content rather than as empty space. ORDER-THROUGH BLOCK */ body.light .partners .lbl{color:#5E584E} /* 6.21:1 */ body.light .partner small{color:#6B655B} /* 5.05:1 */ body.light .partner{color:#171512} body.light .partner-row{border-top-color:rgba(26,24,21,.20)} body.light .partner{border-bottom-color:rgba(26,24,21,.20);border-right-color:rgba(26,24,21,.20)} .partners .lbl{font-weight:600} /* ---------- contact page ------------------------------------------------ Details verified 2026-08-28 from currymile.ae's own schema.org data. */ .ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:6px 0 40px} .ct-card{border:1px solid var(--hair-soft);padding:26px 24px;display:flex;flex-direction:column;gap:9px} .ct-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.34em;color:var(--gold)} .ct-big{font-size:clamp(17px,2vw,21px);font-weight:600;line-height:1.35;color:var(--warm-white)} a.ct-big{text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start} a.ct-big:hover{border-bottom-color:currentColor} .ct-addr{font-weight:500} .ct-sub{font-size:13px;line-height:1.5;color:var(--muted-2)} a.ct-sub{color:var(--gold);text-decoration:none} a.ct-sub:hover{text-decoration:underline} @media (max-width:720px){.ct-grid{grid-template-columns:1fr}} /* light theme: these must not follow --warm-white, which flips to ink */ body.light .ct-card{border-color:rgba(26,24,21,.20)} body.light .ct-big{color:#171512} body.light .ct-sub{color:#5E584E} body.light a.ct-sub,body.light .ct-lbl{color:#7A5F14} /* ---------- logo intro -------------------------------------------------- Five clipped copies of the untouched logo over one square stage, so the steam, the bowl and the type can move independently and still line up. */ .intro-veil{position:fixed;inset:0;z-index:9000;display:none;place-items:center; background:#121211;opacity:0;transition:opacity .42s var(--ease)} .intro-veil.on{display:grid;opacity:1} .intro-veil.out{display:grid;opacity:0} .intro-stage{position:relative;width:min(38vh,300px);aspect-ratio:1/1} .il{position:absolute;inset:0;background:url("logo-light.png") center/contain no-repeat; opacity:0;will-change:transform,opacity,clip-path} /* the four steam bars, clipped by their measured x positions */ .il-s0{clip-path:inset(0 68.62% 76.69% 29.44%)} .il-s1{clip-path:inset(0 55.62% 76.69% 42.50%)} .il-s2{clip-path:inset(0 42.56% 76.69% 55.50%)} .il-s3{clip-path:inset(0 29.56% 76.69% 68.56%)} .il-bowl{clip-path:inset(28% 0 21.5% 0)} .il-word{clip-path:inset(82% 0 8% 0)} .il-tag {clip-path:inset(94.5% 0 2% 0)} .intro-veil.play .il-s0,.intro-veil.play .il-s1, .intro-veil.play .il-s2,.intro-veil.play .il-s3{animation:il-steam .72s var(--ease) forwards} .intro-veil.play .il-s0{animation-delay:.10s} .intro-veil.play .il-s1{animation-delay:.19s} .intro-veil.play .il-s2{animation-delay:.28s} .intro-veil.play .il-s3{animation-delay:.37s} .intro-veil.play .il-bowl{animation:il-bowl .82s var(--ease) .42s forwards} .intro-veil.play .il-word{animation:il-rise .60s var(--ease) 1.06s forwards} .intro-veil.play .il-tag {animation:il-rise .60s var(--ease) 1.22s forwards} @keyframes il-steam{ 0% {opacity:0;transform:translateY(16px) scaleY(.55)} 60% {opacity:1} 100%{opacity:1;transform:none} } @keyframes il-bowl{ 0% {opacity:1;clip-path:inset(28% 0 72% 0)} 100%{opacity:1;clip-path:inset(28% 0 21.5% 0)} } @keyframes il-rise{ 0% {opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){.intro-veil{display:none!important}} /* ---------- footer logo ------------------------------------------------- The footer mark was a bare on every page, so it looked clickable and was not. Wrapped in a link home; data-intro makes it play the same intro as the header logo. inline-block keeps the img's own margins working and stops a baseline gap appearing under it. */ footer.site .f-brand .f-logo{display:inline-block;line-height:0; transition:opacity .35s var(--ease)} footer.site .f-brand .f-logo:hover{opacity:.78} footer.site .f-brand .f-logo:focus-visible{outline:2px solid var(--gold); outline-offset:6px} /* ---------- desktop chip bar as one sliding row (2026-08-28) ------------- The 17 real categories were wrapping to THREE rows on desktop, making the sticky bar 145px tall (184px at 1100px) and eating the viewport. One non-wrapping row that slides instead: the scrollspy in menu.js already scrolls the active chip into view, so the bar now tracks the page as you read down it. Arrows are added by menu.js for mouse users, who have no swipe. */ @media (min-width:1024px){ .tabs{position:sticky} .tabs .container{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -ms-overflow-style:none;scroll-behavior:smooth; padding-left:56px;padding-right:56px} .tabs .container::-webkit-scrollbar{display:none} .tabs .tab{flex:0 0 auto} .tabs{position:sticky;--edge:rgba(18,18,17,.92)} body.light .tabs{--edge:#F1E9D8} .tabs .t-arrow{position:absolute;top:50%;transform:translateY(-50%); width:38px;height:38px;display:grid;place-items:center;z-index:3; background:var(--edge);border:1px solid var(--hair-soft);border-radius:50%; color:inherit;cursor:pointer;opacity:0;pointer-events:none; transition:opacity .3s var(--ease),background .3s var(--ease)} .tabs .t-arrow.on{opacity:1;pointer-events:auto} .tabs .t-arrow:hover{background:var(--gold);color:#121211;border-color:var(--gold)} .tabs .t-prev{left:8px} .tabs .t-next{right:8px} .tabs .t-arrow svg{width:15px;height:15px} } /* ---------- ordering platforms on phones (2026-08-28) ------------------- Four platforms were laid out by flex with min-width:150px, so they held two per row at 390px but dropped to one per row — four tall rows — on narrower phones. A fixed two-column grid keeps it to two rows at any width, and lets the cells size to their content instead of stretching. */ @media (max-width:720px){ .partner-row{display:grid;grid-template-columns:1fr 1fr} .partner{min-width:0;padding:18px 10px} .partner:nth-child(2n){border-right:0} } /* ---------- Order Direct band, rebuilt around the app (2026-08-28) ------- Scoped to .order-direct.app — the band on the city page that carries the phone. The menu page uses a plain .order-direct and must keep its normal padding, so none of this may apply there. */ .order-direct.app{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3.4vw,52px);align-items:end;overflow:hidden; padding-bottom:0 !important} .order-direct.app .od-copy{display:flex;flex-direction:column;gap:16px; padding-bottom:clamp(30px,4.4vw,52px)} .order-direct.app .od-copy .t{gap:10px} .od-note{max-width:44ch;font-size:15px;line-height:1.6;opacity:.86} .order-direct.app .btn-gold{align-self:flex-start;margin-top:4px} .od-stores{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px} .od-stores a{display:inline-flex;transition:opacity .3s var(--ease)} .od-stores a:hover{opacity:.78} .od-stores img{height:38px;width:auto;display:block} .od-stores .od-play img{height:54px;margin:-8px 0 -8px -8px} .od-phone{align-self:end;width:clamp(150px,17vw,214px);margin-bottom:-2px} .od-phone img{display:block;width:100%;height:auto; filter:drop-shadow(0 22px 46px rgba(0,0,0,.34))} /* ---- MOBILE: the band stacks, the phone sits under the copy ---- minmax(0,1fr) rather than 1fr: a bare 1fr takes its floor from the widest item, so the full-width button pushed the column past the band and spilled 62px sideways. Everything here is border-box so padding cannot re-inflate it. */ @media (max-width:860px){ .order-direct.app{grid-template-columns:minmax(0,1fr);justify-items:stretch; text-align:center;gap:6px;padding-bottom:0 !important} .order-direct.app *{min-width:0;max-width:100%;box-sizing:border-box} .order-direct.app .od-copy{align-items:center;padding-bottom:14px;gap:14px;width:auto} .order-direct.app .od-copy .t{align-items:center} .order-direct.app .btn-gold{align-self:center;width:100%;max-width:330px; justify-content:center;text-align:center} .od-note{max-width:34ch} .od-stores{justify-content:center;gap:10px} .od-stores img{height:34px} .od-stores .od-play img{height:48px;margin:-7px 0 -7px -7px} .od-phone{width:min(210px,58vw);margin:2px auto -2px} .od-call{margin-left:0;justify-content:center;white-space:normal} } @media (max-width:420px){ .od-stores{flex-direction:column;align-items:center;gap:2px} .od-phone{width:min(190px,62vw)} } /* ---------- call button beside Order (2026-08-28) ----------------------- The header sits over a dark photograph on hero pages and over warm white once it condenses, and body.light redefines --warm-white to ink — so this button cannot use a theme token. It mirrors .nav-order's three states exactly: light over the hero, ink on the page, ink when stuck. .nav-cta keeps the call icon glued to the Order button; without it the header's space-between left the icon stranded mid-bar. */ .nav-cta{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto} .nav-call{display:inline-grid;place-items:center;width:42px;height:42px; border:1px solid rgba(242,238,231,.34);color:#F2EEE7; transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)} .nav-call svg{width:17px;height:17px;display:block} .nav-call:hover{color:#121211;background:#E3C519;border-color:#E3C519} body.light.has-hero header.site:not(.stuck) .nav-call{ color:#FFFFFF;border-color:rgba(255,255,255,.5)} body.light:not(.has-hero) header.site .nav-call, body.light header.site.stuck .nav-call{ color:#1A1815;border-color:rgba(26,24,21,.34)} body.light:not(.has-hero) header.site .nav-call:hover, body.light header.site.stuck .nav-call:hover{ color:#121211;background:#E3C519;border-color:#E3C519} .od-call{display:inline-flex;align-items:center;gap:9px;margin-left:16px; font-size:14px;letter-spacing:.02em;white-space:nowrap; border-bottom:1px solid rgba(18,18,17,.35);padding-bottom:2px} .od-call svg{width:16px;height:16px} .od-call:hover{border-bottom-color:#121211} @media (max-width:600px){ .nav-call{width:38px;height:38px} } /* ---------- mobile header: call · logo · menu (2026-08-28) -------------- Below 940px the nav and the Order button are hidden, which left the call icon floating in the middle of the bar between the logo and the burger. A three-column grid puts the call on the left, the logo truly centred, and the burger on the right. Uses `order` because the DOM sequence is logo → nav → cta → burger and must stay that way for keyboard users. */ @media (max-width:940px){ header.site .container{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:8px} header.site .wordmark{order:2;justify-self:center;margin:0} header.site .nav-cta{order:1;justify-self:start;gap:0} header.site .burger{order:3;justify-self:end} header.site .nav{order:4} .nav-call{width:40px;height:40px} } @media (max-width:380px){ .nav-call{width:36px;height:36px} .nav-call svg{width:15px;height:15px} } /* ---------- "Or order through" centred on phones (2026-08-28) ----------- */ @media (max-width:720px){ .partners{text-align:center} .partners .lbl{text-align:center;margin-bottom:16px; letter-spacing:.3em;padding-left:.3em} /* offset the trailing letter-space */ } /* ---------- call icon matches the Order button's height (2026-08-28) ---- The icon had a fixed 42px box while .nav-order sizes from its own padding and font, so the two borders did not line up. Stretching it inside .nav-cta makes it exactly as tall as the button, whatever the button becomes; aspect-ratio keeps it square. Below 940px the button is hidden, so there is nothing to match and the icon goes back to a fixed square. */ .nav-cta{align-items:stretch} /* Built from the SAME box as .nav-order — 13px padding + a 22px line over a 1px border = 50px — so the two borders match exactly and stay matched if the button's padding is ever changed. Stretch/aspect-ratio was tried first and gave 38x50: aspect-ratio cannot resolve a width without a definite height, and neither stretch nor height:100% supplies one here. */ header.site .nav-call{box-sizing:border-box;padding:13px;height:auto;width:auto; aspect-ratio:auto;align-self:center;line-height:0;min-width:0} header.site .nav-call svg{width:22px;height:22px} @media (max-width:940px){ header.site .nav-call{height:40px;width:40px;aspect-ratio:auto;align-self:center} } @media (max-width:380px){ header.site .nav-call{height:36px;width:36px} } /* ---------- footer bottom line (2026-08-28) ----------------------------- */ footer.site .f-bottom{gap:14px} footer.site .f-copy{color:#8F887C} footer.site .f-copy a{color:#B0A99D;border-bottom:1px solid rgba(176,169,157,.3)} footer.site .f-copy a:hover{color:var(--gold);border-bottom-color:var(--gold)} footer.site .f-tag{font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#F2EEE7;font-size:12px} footer.site .f-tag em{font-style:normal;color:var(--gold)} body.light footer.site .f-tag{color:#F2EEE7} @media (max-width:640px){ footer.site .f-bottom{flex-direction:column;align-items:flex-start;gap:10px} footer.site .f-sep{display:none} footer.site .f-by{display:block} } /* ---------- review stars in rating amber (2026-08-28) ------------------- The stars were painted in brand gold (#C8A75B -> #7A5F14 once body.light darkened it), which read as an ornament rather than a score. They now use the amber people recognise from store listings. Deliberate: the star is decorative reinforcement, not the message. The score itself ("4.6") and the platform name stay at full text contrast — 4.6 is #1A1815 on the light band (14.5:1) and #8C867B on the dark band (5.2:1) — so nothing meaningful depends on the amber alone. */ .rating b .st, .hp-app-r .hp-star, .hp-star{color:#FBBC04;font-style:normal} body.light .rating b .st, body.light .hp-app-r .hp-star, body.light .hp-star{color:#F5A623} .hp-app-r .hp-star{margin-left:1px} /* ---------- landing-page logo enlarged (2026-08-28) --------------------- Asked for so the "TRUE TO BRITISH INDIAN" line under the wordmark can be read. Measured off the artwork, that line occupies just 2.75% of the square's height, so at the previous 82px it rendered 2.3px tall. These sizes take it to roughly 3.4px in the header and 5.5px on the gateway — noticeably better, but see the note to Jane: it cannot become genuinely legible at header scale. */ header.site .wordmark img{height:124px} header.site.stuck .wordmark img{height:74px} .wordmark.sm img{height:200px} @media (max-width:940px){ header.site .wordmark img{height:66px} header.site.stuck .wordmark img{height:52px} .wordmark.sm img{height:132px} } /* ---------- numbers: three stats, evenly divided (2026-08-28) ----------- The grid was still repeat(4,1fr) from when there were four stats. With three items the fourth column stayed empty and :last-child removed the third divider, so the last stat read as a double-width cell. */ .numbers{grid-template-columns:repeat(3,1fr)} @media (max-width:760px){ .numbers{grid-template-columns:1fr} .num{border-right:0;border-bottom:1px solid var(--hair-soft)} .num:last-child{border-bottom:0} } @media (max-width:549px){ .num:nth-child(2){border-right:0} } /* the count-up: hold the value still while it runs, then let it settle */ .num b{transition:transform .7s var(--ease),opacity .7s var(--ease)} .num.n-rise b{opacity:0;transform:translateY(14px)} .num.n-in b{opacity:1;transform:none} .num .n-rule{display:block;height:1px;margin:18px auto 0;width:0; background:var(--gold);transition:width .9s var(--ease) .15s} .num.n-in .n-rule{width:46px} body.light .num .n-rule{background:#9C7B27} /* ---------- menu labels: vegetarian + heat (2026-08-28) ----------------- Colour-coded so the list can be scanned. Every colour is paired with a word — never colour alone — so the meaning survives for anyone who cannot distinguish them. Contrast is checked against the warm-white menu ground (#F6F2EA) and the dark theme. */ .mi .tags{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap} .mi .tag{font-size:10px;text-transform:uppercase;letter-spacing:.2em; padding:4px 9px;border:1px solid currentColor;border-radius:2px; background:transparent;line-height:1.5} .mi .tag-v {color:#5E8C3A} .mi .tag-mild {color:#8A8275} .mi .tag-medium {color:#B8791C} .mi .tag-hot {color:#C0491F} .mi .tag-xhot {color:#A81D0D;font-weight:700} body.light .mi .tag-v {color:#3F6B22} /* 4.9:1 on #F6F2EA */ body.light .mi .tag-mild {color:#6B655B} /* 5.1:1 */ body.light .mi .tag-medium {color:#8A5A0B} /* 5.0:1 */ body.light .mi .tag-hot {color:#A33A15} /* 5.4:1 */ body.light .mi .tag-xhot {color:#8C1508;font-weight:700} /* 7.6:1 */ .menu-key{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center; margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.18em} .menu-key .k{display:inline-flex;align-items:center;gap:7px} .menu-key .sw{width:9px;height:9px;border:1px solid currentColor;border-radius:50%} .menu-note-diet{margin:14px 0 0;font-size:13px;line-height:1.65;max-width:70ch; color:var(--muted-2)} body.light .menu-note-diet{color:#5E584E} /* the legend sits in its own quiet band above the sticky chip bar */ .menu-legend{padding-top:clamp(28px,3vw,44px) !important;padding-bottom:clamp(20px,2.2vw,30px) !important} /* ---------- dish marks: small graphics under the name (2026-08-28) ------ Replaces the word chips. Small enough to read as annotation rather than as content: a 12px veg symbol, or one to three 11px chillies. Heat is carried by the NUMBER of chillies as well as the colour, so it does not depend on colour vision; each mark also carries a title and aria-label. */ .mi .tags{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap} .mi .mk{display:inline-flex;align-items:center;gap:1px;line-height:0} .mi .mk svg{width:11px;height:11px;display:block} .mi .mk-v svg{width:12px;height:12px} .mi .mk-v {color:#5E8C3A} .mi .mk-mild {color:#C9A227} .mi .mk-medium{color:#D07A1A} .mi .mk-hot {color:#C0491F} .mi .mk-xhot {color:#A81D0D} body.light .mi .mk-v {color:#3F6B22} body.light .mi .mk-mild {color:#8A6B0A} body.light .mi .mk-medium{color:#8A5A0B} body.light .mi .mk-hot {color:#A33A15} body.light .mi .mk-xhot {color:#8C1508} /* legend: the same marks, with their words, so the key can be learnt */ .menu-key{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center; margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.18em} .menu-key .k{display:inline-flex;align-items:center;gap:7px} .menu-key .k svg{width:12px;height:12px} .menu-key .k .mk{line-height:0} body.light .menu-key{color:#5E584E} /* ---------- dish marks, corrected (2026-08-28) -------------------------- Two fixes: the marks were rendering on the dish-name line because the button's inner wrapper is an inline , and the chilli glyph was unreadable at 11px (it read as a musical note). Heat is now one to three pips — the COUNT carries the level, which survives both small sizes and colour blindness — and the block is forced onto its own line under the name. */ .mi .mi-body{display:block} .mi .tags{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap} .mi .mk{display:inline-flex;align-items:center;gap:3px;line-height:0} .mi .mk .pip{width:6px;height:6px;border-radius:50%;background:currentColor;display:block} .mi .mk-v svg{width:12px;height:12px;display:block} .menu-key .k .pip{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block} .menu-key .k .mk{display:inline-flex;gap:3px;align-items:center} /* ---------- the line is the brand: always bold (2026-08-28) ------------- "British Indian. Delivered." carries the positioning, so it is set bold wherever it appears as rendered text — hero statements, the About heading, the story pull-quote and closing line, and the footer tag. It is left alone inside and <meta>, which have no typography. */ .brand-statement, .brand-statement em, .hero h1, .split .body h2, .article-body p.big, p.statement, footer.site .f-tag{font-weight:700} .brand-statement em{font-style:normal} /* ---------- dish marks: leaf + flames, under the name (2026-08-28) ------ Pips were abstract. A leaf for vegetarian and one to three flames for heat read at a glance; the COUNT still carries the level, so nothing depends on telling the colours apart. The whole block is forced onto its own line beneath the dish name. */ .mi .mi-body{display:block} .mi .n{display:block} .mi .tags{display:flex !important;align-items:center;gap:11px;margin-top:5px; flex-wrap:wrap;width:100%} .mi .mk{display:inline-flex;align-items:center;gap:2px;line-height:0} .mi .mk svg{width:13px;height:13px;display:block} .mi .mk-v svg{width:13px;height:13px} .menu-key .k svg{width:13px;height:13px} .menu-key .k .mk{display:inline-flex;gap:2px;align-items:center} /* ---------- dish marks, final placement (2026-08-28) -------------------- The previous attempt set the inner wrapper to display:block, which killed the dotted leader between name and price — the leader is that wrapper's ::after inside a flex row. The wrapper stays flex; the marks instead take a full-width flex line of their own (the same trick .d already uses), so they sit under the name AND the leader survives. */ .mi .mi-body{display:flex !important;flex-wrap:wrap;align-items:baseline} .mi .tags{flex:1 0 100%;order:4;display:flex !important;align-items:center; gap:11px;margin-top:5px;width:auto} .mi .mk{display:inline-flex;align-items:center;gap:2px;line-height:0} .mi .mk svg{width:13px;height:13px;display:block} /* ---------- call icon on phones, corrected (2026-08-28) ----------------- The desktop rule sizes this button from .nav-order's box: 13px padding around a 22px glyph. Below 940px the Order button is hidden and the button was pinned to a fixed 40x40 — but the 13px padding and 22px glyph came with it, leaving a 12px content box for a 22px icon. The glyph overflowed its own border and sat off-centre. On phones the box owns the size and the glyph is sized to fit it. */ @media (max-width:940px){ header.site .nav-call{width:40px;height:40px;padding:0; display:inline-grid;place-items:center;aspect-ratio:auto;align-self:center} header.site .nav-call svg{width:17px;height:17px} } @media (max-width:380px){ header.site .nav-call{width:36px;height:36px} header.site .nav-call svg{width:16px;height:16px} } /* the key and its disclaimer moved out of the way of the tab bar and down to the foot of the menu (2026-08-28) */ .menu-foot-key{margin-top:34px;padding-top:26px;border-top:1px solid var(--hair-soft)} body.light .menu-foot-key{border-top-color:rgba(26,24,21,.12)} .menu-foot-key .menu-key{margin-bottom:14px} /* ---------- dish marks: heat meter + Indian veg square (2026-08-28) ----- Chosen by Jane from a rendered comparison. Heat = four rising bars filled to the level; the unfilled bars stay visible at low opacity so the scale is legible rather than implied. Vegetarian = the standard Indian mark. */ .mi .mk.mtr{display:inline-flex;align-items:flex-end;gap:2px;height:12px} .mi .mk.mtr i{width:4px;background:currentColor;border-radius:1px; opacity:.22;display:block} .mi .mk.mtr i:nth-child(1){height:5px} .mi .mk.mtr i:nth-child(2){height:7px} .mi .mk.mtr i:nth-child(3){height:9px} .mi .mk.mtr i:nth-child(4){height:12px} .mi .mk.mtr i.on{opacity:1} .mi .mk-v svg{width:12px;height:12px;display:block} .menu-key .k .mtr{display:inline-flex;align-items:flex-end;gap:2px;height:12px} .menu-key .k .mtr i{width:4px;background:currentColor;border-radius:1px; opacity:.22;display:block} .menu-key .k .mtr i:nth-child(1){height:5px} .menu-key .k .mtr i:nth-child(2){height:7px} .menu-key .k .mtr i:nth-child(3){height:9px} .menu-key .k .mtr i:nth-child(4){height:12px} .menu-key .k .mtr i.on{opacity:1} .menu-key .k svg{width:12px;height:12px} /* ---------- dish marks: chillies (2026-08-28) --------------------------- Jane's scheme: mild = one half-filled chilli, medium = two, hot = three, extra hot = four. All the same red — the count and the half-fill carry the level, not the hue. The shape was chosen from a rendered test at real size; earlier attempts were too round and read as berries, and one read as a musical note. This one is elongated and angled with a separate green stem, which is what makes it legible at 15px. */ .mi .mk-chilli,.menu-key .mk-chilli{display:inline-flex;align-items:flex-end;gap:3px} .chz{width:10px;height:15px;display:block;overflow:visible} .chz .pale{fill:#A33A15;opacity:.22} .chz .fill{fill:#A33A15} .chz .stem{fill:#4E7A2A} .chz.half .fill{clip-path:inset(0 52% 0 0)} .mi .mk-chilli,.menu-key .mk-chilli{color:#A33A15} /* dark theme: the red has to lift off near-black */ body:not(.light) .chz .pale{fill:#D8613A;opacity:.26} body:not(.light) .chz .fill{fill:#D8613A} body:not(.light) .chz .stem{fill:#6FA13C} /* the legend's veg square must be green like the ones in the list */ .menu-key .k.mk-v{color:#3F6B22} body:not(.light) .menu-key .k.mk-v{color:#7FA85A} /* ======================================================================= PREMIUM PASS — 2026-08-28 Approved by Jane: serif display type, brass instead of the saturated yellow, lighter dish names. Deliberately REVERSES some of the earlier "make it bold" work; that trade-off was put to her and this is the direction she chose. Everything below is additive and sits at the end of the file, so the whole pass can be lifted out by deleting this block. ======================================================================= */ :root{ --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --brass:#B08D3F; --brass-deep:#8C7231; } /* ---- 1. the yellow goes to brass -------------------------------------- */ .nav-order, .order-direct, body.light .order-direct{ background:#171512 !important; border-color:var(--brass) !important; color:#F2EEE7 !important; } .nav-order{background:transparent !important;border:1px solid var(--brass) !important; color:var(--brass) !important;font-weight:400 !important;letter-spacing:.26em !important} .nav-order:hover{background:var(--brass) !important;color:#121211 !important; border-color:var(--brass) !important} .order-direct *{color:#F2EEE7 !important} .order-direct .t b{color:#F2EEE7 !important} .order-direct .t span,.order-direct .od-note{color:var(--brass) !important} .order-direct .btn-gold{background:transparent !important;border:1px solid var(--brass) !important} .order-direct .btn-gold *{color:var(--brass) !important} .order-direct .btn-gold:hover{background:var(--brass) !important} .order-direct .btn-gold:hover *{color:#121211 !important} .order-direct .od-call{border-bottom-color:rgba(176,141,63,.5) !important} .order-direct .od-call *{color:var(--brass) !important} .nav-call:hover{background:var(--brass) !important;border-color:var(--brass) !important} /* ---- 2. display type ---------------------------------------------------- */ .menu-cat .head h2, .hp-hero h1,.hero h1,.brand-statement, .split .body h2,.hp-sigs h2,.hp-proper h2,.hp-jrnl h2,.article .article-body h2{ font-family:var(--display) !important; font-weight:300 !important; letter-spacing:.005em !important; } .menu-cat .head h2{font-size:clamp(30px,3.6vw,46px) !important;font-style:italic} .hp-hero h1,.hero h1,.brand-statement{font-size:clamp(46px,7.6vw,112px) !important; line-height:1.02 !important;letter-spacing:0 !important} .hp-hero h1 em,.brand-statement em{font-style:italic !important;color:var(--brass) !important} .menu-cat .head .line{background:linear-gradient(90deg,var(--brass),rgba(176,141,63,0)) !important; opacity:1 !important;height:1px} /* ---- 3. the list breathes; the price carries the weight ------------------ */ .mi .n{font-weight:500 !important;letter-spacing:.01em} .mi .price{font-family:var(--display) !important;font-weight:400 !important; font-size:21px !important;letter-spacing:.02em} .mi .price .cur{font-family:var(--sans) !important;font-size:9.5px !important; letter-spacing:.28em !important} .mi .mi-body::after{border-bottom-style:solid !important; border-bottom-color:rgba(26,24,21,.10) !important} body:not(.light) .mi .mi-body::after{border-bottom-color:rgba(242,238,231,.10) !important} .mi{border-bottom-color:rgba(26,24,21,.08) !important} body:not(.light) .mi{border-bottom-color:rgba(242,238,231,.08) !important} /* ---- 4. accents follow the brass --------------------------------------- */ .eyebrow,.meta,.tab.active,.num b,.rating b{color:var(--brass) !important} .tab.active{border-bottom-color:var(--brass) !important} .num .n-rule{background:var(--brass) !important} .f-tag em{color:var(--brass) !important} .btn-gold{border-color:var(--brass)} .hp-app-r .hp-star,.rating b .st{color:#C9962F !important} /* ---- 5. the brand line stays emphatic, but by type not weight ----------- */ footer.site .f-tag{font-family:var(--display) !important;font-weight:400 !important; font-size:15px !important;letter-spacing:.06em !important;text-transform:none !important; font-style:italic} /* ---- serif figures must be lining, not old-style ---------------------- Cormorant defaults to text figures, so "21" rendered as "2I" and "11" as "II". Every number set in the display face needs lining figures. */ .mi .price,.num b,.rating b,.hp-app-r,.pr,.ct-big,.od-note, .article-body .big,.legal-updated{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; } /* the call link is an inline-flex child of a stretch column, so its underline ran the full width of the band instead of sitting under the number */ .order-direct .od-call{align-self:flex-start;width:auto} @media (max-width:860px){.order-direct .od-call{align-self:center}} /* ======================================================================= PREMIUM PASS — corrections, 2026-08-28 ======================================================================= */ /* ---- 1. brass fails as TEXT on the warm-white ground ------------------- #B08D3F measured 2.80:1 against #F6F2EA — below AA for text. It stays for borders, rules and anything over a photograph, where it is fine, but text on the light ground uses the deeper #755A18 (5.79:1) that the site already used before this pass. */ body.light .eyebrow, body.light .meta, body.light .num b, body.light .rating b, body.light .tab.active, body.light .hp-app-r{color:#755A18 !important} body.light .tab.active{border-bottom-color:#9C7B27 !important} /* over photography the light brass is correct and must survive the rule above */ body.light .hero .eyebrow, body.light .finale .eyebrow, body.light .hp-hero .eyebrow, body.light .hero .meta, body.light .finale .meta{color:#D9B25A !important} /* ---- 2. the statistics read as statements, so they carry weight -------- */ .num b{font-weight:700 !important;letter-spacing:.01em} body.light .num b{color:#755A18 !important} /* ---- 3. "Tonight, we're having a curry." — the photograph now moves ---- A slow Ken Burns drift, transform only. Paused entirely under prefers-reduced-motion. */ .finale .bg{ transform-origin:52% 48%; animation:finale-drift 32s cubic-bezier(.37,0,.63,1) infinite alternate; will-change:transform; } @keyframes finale-drift{ from{transform:scale(1.06) translate3d(0,0,0)} to {transform:scale(1.20) translate3d(0,-2.2%,0)} } @media (prefers-reduced-motion:reduce){ .finale .bg{animation:none;transform:scale(1.06)} } /* ---- 4. the gateway door reads as a button on a phone ------------------ At desktop it is an editorial full-width door with a hairline rule. On a phone that reads as a heading rather than something to tap, so it becomes a solid brass button with a proper tap target. */ @media (max-width:720px){ .cities.one{max-width:none} .cities.one .city{ display:flex;align-items:center;justify-content:center;gap:12px; background:#B08D3F;border:0;border-radius:2px; padding:19px 22px;min-height:56px;width:100%; transition:background .35s var(--ease); } .cities.one .city .rule{display:none} .cities.one .city .name{ font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:#121211;font-family:var(--sans); } .cities.one .city .arrow{color:#121211;display:inline-flex} .cities.one .city .arrow svg{width:17px;height:17px} .cities.one .city:active{background:#9A7A33} .prompt-2{margin-top:20px} } /* ======================================================================= MENU AS A BOOKLET + mobile header — 2026-08-28 ======================================================================= */ /* ---- 1. category headings carry weight again -------------------------- Jane asked for every category heading bold. Kept in the display serif at 600 rather than reverting to the old black sans, so it gains weight without losing the premium direction. */ .menu-cat .head h2{font-weight:600 !important} /* ---- 2. the menu reads as a printed card ------------------------------ The list now sits on a paler paper panel with a hairline edge and a soft drop, a centred heading with a brass rule and a small lozenge beneath, and a faint gutter line down the fold. */ #menuContent{ background:#FBF8F1; border:1px solid rgba(26,24,21,.11); box-shadow:0 34px 70px -40px rgba(26,24,21,.32); max-width:1220px;margin:30px auto 0;padding:18px 0 34px;position:relative; } #menuContent::before{ content:"";position:absolute;top:56px;bottom:56px;left:50%;width:1px; background:linear-gradient(180deg,transparent,rgba(26,24,21,.10) 10%, rgba(26,24,21,.10) 90%,transparent); pointer-events:none; } body:not(.light) #menuContent{ background:#16150F;border-color:rgba(242,238,231,.10); box-shadow:0 34px 70px -40px rgba(0,0,0,.7); } body:not(.light) #menuContent::before{ background:linear-gradient(180deg,transparent,rgba(242,238,231,.10) 10%, rgba(242,238,231,.10) 90%,transparent); } .menu-cat .head{text-align:center;display:block;margin-bottom:10px} .menu-cat .head h2{display:block;text-align:center;margin:0 auto} .menu-cat .head .line{ display:block;width:130px;height:1px;margin:16px auto 0;flex:none; background:linear-gradient(90deg,transparent,#B08D3F,transparent) !important; } .menu-cat .head::after{ content:"";display:block;width:5px;height:5px;margin:13px auto 0; transform:rotate(45deg);background:#B08D3F;opacity:.85; } @media (max-width:940px){ #menuContent{margin:18px 12px 0;padding:12px 0 26px} #menuContent::before{display:none} } /* ---- 3. mobile: the logo stays legible once the header condenses ------- */ @media (max-width:940px){ header.site.stuck .wordmark img{height:64px} } @media (max-width:380px){ header.site.stuck .wordmark img{height:56px} } /* ---- 4. the drawer's Contact entry ------------------------------------ */ .drawer a[href="contact.html"]{} /* ---------- reveals need more travel on a phone (2026-08-28) ------------ Measured: 16-18px of travel over 1.1s, identical on mobile and desktop. That reads on a large screen but disappears on a phone, where you scroll past faster and several rows enter the viewport at once. On small screens the travel roughly doubles and the move is quicker, so it registers. Reduced-motion is untouched — it still disables all of this. */ @media (max-width:940px){ .reveal{transform:translateY(32px)} .rv{transform:translateY(26px)} .reveal,.rv{transition-duration:.78s !important} .sl-u{transform:translateY(38px)} .sl-l{transform:translateX(-30px)} .sl-r{transform:translateX(30px)} } @media (max-width:940px) and (prefers-reduced-motion:reduce){ .reveal,.rv,.sl-u,.sl-l,.sl-r{transform:none !important;transition:none !important} } /* the city hero animates in like the homepage one */ .hero .hp-h1 .ln{display:block;overflow:hidden;padding-bottom:.04em} .hero .hp-h1 .ln > span{display:block;transform:translateY(115%);opacity:0; transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .9s ease} .hero .hp-h1.in .ln > span{transform:translateY(0);opacity:1} .hero .hp-h1.in .ln:nth-child(1) > span{transition-delay:.10s} .hero .hp-h1.in .ln:nth-child(2) > span{transition-delay:.26s} @media (prefers-reduced-motion:reduce){ .hero .hp-h1 .ln > span{transform:none !important;opacity:1 !important;transition:none !important} } /* the menu rows' reveal is set at .menu-cat .head.rv specificity, so the phone override has to match it or it loses the cascade */ @media (max-width:940px){ .menu-cat .head.rv,.menu-cat .cat-note.rv,.mi.rv{transform:translateY(26px)} } @media (max-width:940px) and (prefers-reduced-motion:reduce){ .menu-cat .head.rv,.menu-cat .cat-note.rv,.mi.rv{transform:none !important} } /* ======================================================================= RESPONSIVE OPTIMISATION + DEPTH — 2026-08-28 Laptop audited clean. Phone and both iPad orientations had tap targets below 40px, which is the real usability problem on touch: the category chips were 32px tall, footer and contact links 20-24px, store badges 34px. Nothing below is a visual redesign — it adds hit area, mostly with padding, so the type and rhythm stay as they are. ======================================================================= */ @media (hover:none),(max-width:1024px){ /* category chips — the worst offender at 32px */ .tabs .tab{min-height:44px;display:inline-flex;align-items:center} /* header nav */ header.site .nav a{min-height:44px;display:inline-flex;align-items:center} /* footer and contact links: grow the hit box without moving the text */ footer.site .cols a, .ct-card a, .article-body ul li a, .od-call, .prompt-2 a{display:inline-flex;align-items:center;min-height:44px} /* outline buttons */ .btn-line,.btn-gold{min-height:46px;display:inline-flex;align-items:center; justify-content:center} /* store badges */ .od-stores img,.f-stores img{height:44px} .od-stores .od-play img,.f-stores .f-play img{height:60px;margin:-8px 0 -8px -8px} /* the burger itself */ .burger{min-width:44px;min-height:44px;display:grid;place-items:center} } /* ---- iPad portrait: the menu was one column and wasting half the page --- */ @media (min-width:700px) and (max-width:940px){ .menu-grid{grid-template-columns:1fr 1fr;gap:0 clamp(22px,4vw,40px)} #menuContent{margin-inline:20px} .menu-cat .head h2{font-size:clamp(28px,4.4vw,38px)} } /* ---- the steam wisp reached past the viewport edge --------------------- */ .hp-hero .steam,.hero .steam{overflow:hidden;max-width:100%} /* ======================================================================= DEPTH / 3D Transform and shadow only, so nothing here can reflow the page. All of it is switched off under prefers-reduced-motion, and the hover effects are gated behind hover:hover so a phone never gets a stuck :hover state. ======================================================================= */ .od-phone{perspective:1200px} .od-phone img{ transform:rotateY(-9deg) rotateX(3deg) translateZ(0); transform-style:preserve-3d; animation:phone-float 9s ease-in-out infinite alternate; filter:drop-shadow(-18px 26px 40px rgba(0,0,0,.55)); } @keyframes phone-float{ from{transform:rotateY(-9deg) rotateX(3deg) translateY(0)} to {transform:rotateY(-4deg) rotateX(1deg) translateY(-10px)} } @media (hover:hover){ .ct-card,.partner,.hp-p{transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .ct-card:hover,.hp-p:hover{ transform:perspective(900px) translateY(-6px) rotateX(1.4deg); box-shadow:0 26px 46px -28px rgba(26,24,21,.42); } .partner:hover{transform:translateY(-3px)} .mi{transition:transform .4s var(--ease)} .mi:hover{transform:translateX(4px)} } /* The booklet was given a perspective rotateX to lift it off the page. A 3D rotation inflates the RENDERED box beyond the layout box, which pushed the panel 2-6px past the viewport at 1024px and made the page scroll sideways. The depth is carried by the shadow instead. */ #menuContent{transform:none} @media (prefers-reduced-motion:reduce){ .od-phone img{animation:none;transform:none;filter:drop-shadow(0 22px 46px rgba(0,0,0,.34))} #menuContent{transform:none} .ct-card:hover,.hp-p:hover,.partner:hover,.mi:hover{transform:none} } /* ======================================================================= BACKGROUND KEN BURNS — 2026-08-28 The old `drift` was a one-shot scale(1.05) -> scale(1) that settled after a few seconds and then sat still, so the landing photograph read as a flat still. This is a continuous, slow drift on every hero photograph. It animates the independent `scale` and `translate` properties, NOT `transform`. That matters: motion.js writes an inline `transform` on .hp-hero .bg for the scroll parallax, and a CSS animation on `transform` would sit above inline styles in the cascade and kill it. scale/translate compose with transform instead of replacing it, so the drift and the parallax run together. ======================================================================= */ .gateway .bg, .hero .bg, .hp-hero .bg, .finale .bg, .hp-closing .bg{ animation:bg-kenburns 46s ease-in-out infinite alternate !important; will-change:scale, translate; } @keyframes bg-kenburns{ 0% {scale:1.00; translate:0 0} 50% {scale:1.07; translate:-1.5% -1.0%} 100%{scale:1.12; translate:1.2% -2.0%} } /* the finale keeps its own deeper move, layered on top of its transform */ .finale .bg{animation-duration:38s !important} @media (prefers-reduced-motion:reduce){ .gateway .bg,.hero .bg,.hp-hero .bg,.finale .bg,.hp-closing .bg{ animation:none !important;scale:1;translate:0 0} } /* ======================================================================= MENU AS SEPARATE CARDS — 2026-08-31 Each category is now its own panel rather than one continuous 122-dish list: Tandoori Dishes is one card, Signature Dishes is another. Dishes inside a card sit on Bootstrap's grid (row / col-12 col-md-6). NOTE ON BOOTSTRAP: only bootstrap-grid.min.css is loaded, not the full framework. The full build ships Reboot (its own reset) and its own type scale, which would flatten the serif/brass work across the whole page. The grid-only build is the real Bootstrap grid with none of that. ======================================================================= */ /* the page is no longer one big panel — the cards are the panels now */ #menuContent{ background:transparent !important;border:0 !important;box-shadow:none !important; max-width:1260px;margin:22px auto 0;padding:0 22px 30px; } #menuContent::before{display:none !important} .menu-book{ background:#FBF8F1; border:1px solid rgba(26,24,21,.13); box-shadow:0 22px 44px -34px rgba(26,24,21,.34); padding:clamp(26px,3.4vw,48px) clamp(20px,3vw,44px) clamp(18px,2.4vw,34px); margin:0 0 clamp(26px,3.2vw,44px); max-width:none; position:relative; scroll-margin-top:180px; /* the tab bar must not cover the heading */ } /* a hairline inset, so the card reads as a printed card rather than a box */ .menu-book::after{ content:"";position:absolute;inset:7px;border:1px solid rgba(176,141,63,.22); pointer-events:none; } body:not(.light) .menu-book{ background:#16150F;border-color:rgba(242,238,231,.12); box-shadow:0 22px 44px -34px rgba(0,0,0,.7); } body:not(.light) .menu-book::after{border-color:rgba(176,141,63,.26)} .menu-book .head{margin-bottom:22px} .menu-book .menu-grid{margin-bottom:0} .menu-book .mi{padding:15px 0} .menu-book .col-12:last-child .mi:last-child{border-bottom:0} @media (max-width:767.98px){ #menuContent{padding:0 14px 24px;margin-top:14px} .menu-book{padding:24px 18px 12px;margin-bottom:20px} .menu-book::after{inset:5px} .menu-book .mi{padding:13px 0} } /* Bootstrap's .row is display:flex; the element also still carries the old .menu-grid class, whose CSS grid would fight it. The grid rules are stood down inside a card so the Bootstrap columns actually govern — which is what makes col-12 (one column on a phone) work at all. */ .menu-book .menu-grid{ display:flex !important; grid-template-columns:none !important; gap:0 !important; } .menu-book .menu-grid > .col-12{display:block} /* ======================================================================= LIVELIER PALETTE — 2026-08-31 The premium pass went restrained: brass, charcoal, warm white. Jane found the result too flat, so colour comes back — but as a SPICE palette drawn from the food rather than as a second brand colour, and used on structure (category accents, headings, chips) rather than sprayed over everything. Every value below was checked against its own ground. The accents sit on card edges and headings, never as body text on the warm white, so none of them is load-bearing for legibility. ======================================================================= */ :root{ --sp-saffron:#D8901A; --sp-paprika:#B8432A; --sp-cardamom:#4F7C36; --sp-tamarind:#94531D; --sp-turmeric:#C08A12; --sp-chilli:#A8331C; --sp-mint:#3F7A5E; --sp-clove:#7A4326; } /* the ground warms up a little — pure warm-white read as clinical */ body.light{background:#F4EEE2} body.light .menu-legend,body.light #menuContent{background:transparent} /* ---- each category card carries its own spice accent ------------------- */ .menu-book{border-top-width:3px;border-top-style:solid} .menu-book:nth-of-type(8n+1){border-top-color:var(--sp-paprika)} .menu-book:nth-of-type(8n+2){border-top-color:var(--sp-cardamom)} .menu-book:nth-of-type(8n+3){border-top-color:var(--sp-saffron)} .menu-book:nth-of-type(8n+4){border-top-color:var(--sp-chilli)} .menu-book:nth-of-type(8n+5){border-top-color:var(--sp-mint)} .menu-book:nth-of-type(8n+6){border-top-color:var(--sp-turmeric)} .menu-book:nth-of-type(8n+7){border-top-color:var(--sp-clove)} .menu-book:nth-of-type(8n+8){border-top-color:var(--sp-tamarind)} /* the heading rule and lozenge pick up the same accent */ .menu-book:nth-of-type(8n+1) .head .line{background:linear-gradient(90deg,transparent,var(--sp-paprika),transparent) !important} .menu-book:nth-of-type(8n+2) .head .line{background:linear-gradient(90deg,transparent,var(--sp-cardamom),transparent) !important} .menu-book:nth-of-type(8n+3) .head .line{background:linear-gradient(90deg,transparent,var(--sp-saffron),transparent) !important} .menu-book:nth-of-type(8n+4) .head .line{background:linear-gradient(90deg,transparent,var(--sp-chilli),transparent) !important} .menu-book:nth-of-type(8n+5) .head .line{background:linear-gradient(90deg,transparent,var(--sp-mint),transparent) !important} .menu-book:nth-of-type(8n+6) .head .line{background:linear-gradient(90deg,transparent,var(--sp-turmeric),transparent) !important} .menu-book:nth-of-type(8n+7) .head .line{background:linear-gradient(90deg,transparent,var(--sp-clove),transparent) !important} .menu-book:nth-of-type(8n+8) .head .line{background:linear-gradient(90deg,transparent,var(--sp-tamarind),transparent) !important} .menu-book:nth-of-type(8n+1) .head::after{background:var(--sp-paprika)} .menu-book:nth-of-type(8n+2) .head::after{background:var(--sp-cardamom)} .menu-book:nth-of-type(8n+3) .head::after{background:var(--sp-saffron)} .menu-book:nth-of-type(8n+4) .head::after{background:var(--sp-chilli)} .menu-book:nth-of-type(8n+5) .head::after{background:var(--sp-mint)} .menu-book:nth-of-type(8n+6) .head::after{background:var(--sp-turmeric)} .menu-book:nth-of-type(8n+7) .head::after{background:var(--sp-clove)} .menu-book:nth-of-type(8n+8) .head::after{background:var(--sp-tamarind)} /* ---- the chip bar earns some colour ------------------------------------ */ body.light .tabs{background:#F0E6D2} body.light .tab{border-color:rgba(26,24,21,.16)} body.light .tab.active{ background:var(--sp-paprika) !important;color:#FFF6EE !important; border-color:var(--sp-paprika) !important; } body.light .tab:hover{border-color:var(--sp-paprika)} /* ---- the order band stops being all-charcoal --------------------------- */ .order-direct.app{ background:linear-gradient(135deg,#1D1A15 0%,#2A1D14 55%,#3A2415 100%) !important; border-color:var(--sp-saffron) !important; } .order-direct .t span,.order-direct .od-note{color:#E8B551 !important} .order-direct .btn-gold{border-color:var(--sp-saffron) !important} .order-direct .btn-gold *{color:#E8B551 !important} .order-direct .btn-gold:hover{background:var(--sp-saffron) !important} /* ---- eyebrows and statistics warm up ----------------------------------- */ body.light .eyebrow,body.light .meta{color:#9A5A16 !important} body.light .num b{color:#A8451F !important} body.light .hero .eyebrow,body.light .finale .eyebrow, body.light .hp-hero .eyebrow{color:#E8B551 !important} /* ---------- dish thumbnails (2026-08-31) -------------------------------- Only 38 of the 122 dishes have a photograph: 9 are Curry Mile's own, 29 are stand-ins sourced from Wikimedia Commons and are flagged DEMO on the image itself. Rows without one simply have no thumbnail, and the layout has to look deliberate either way — hence a fixed-width slot rather than a stretched grid. */ .mi{align-items:flex-start;gap:14px} .mi .thumb{ flex:0 0 auto;width:62px;height:62px;position:relative;overflow:hidden; border:1px solid rgba(26,24,21,.14);background:#EFE9DC;margin-top:2px; } .mi .thumb img{width:100%;height:100%;object-fit:cover;display:block} .mi .thumb.is-demo i{ position:absolute;left:0;right:0;bottom:0; font-style:normal;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase; text-align:center;padding:2px 0 2.5px; background:rgba(18,18,17,.82);color:#F2EEE7;font-family:var(--sans); } body:not(.light) .mi .thumb{border-color:rgba(242,238,231,.16);background:#211F19} @media (hover:hover){ .mi .thumb img{transition:transform .55s var(--ease)} .mi:hover .thumb img{transform:scale(1.07)} } @media (max-width:520px){ .mi{gap:11px} .mi .thumb{width:52px;height:52px} .mi .thumb.is-demo i{font-size:7px;letter-spacing:.12em} } /* the credit line under the menu */ .photo-credit{margin:18px 0 0;font-size:11.5px;line-height:1.7;color:#8C8578; max-width:78ch} .photo-credit b{font-weight:600;color:#6B655B} /* The thumbnail is now the first child of .mi, so every rule that reached the text block via `.mi > span:first-child` was landing on the IMAGE instead — it inherited display:flex and stretched into a band. The text block carries an explicit .mi-body class now; nothing here depends on child order. */ .mi .thumb{flex:0 0 62px !important;width:62px !important;height:62px !important; display:block !important;align-self:flex-start} .mi .mi-body{flex:1 1 auto;min-width:0} @media (max-width:520px){ .mi .thumb{flex:0 0 52px !important;width:52px !important;height:52px !important} } /* ---------- the active chip goes gold, not red (2026-08-31) ------------- The lively palette made the selected category chip solid paprika. Red on a control reads as an alert or an error state rather than "you are here", so the selected chip uses the deep gold from the logo instead — still clearly coloured, but it says selected rather than warning. The paprika stays where it belongs: on the card edges and the chillies. */ body.light .tabs .tab.active{ background:#B8891C !important;color:#1A1508 !important; border-color:#B8891C !important;font-weight:600; } body.light .tabs .tab:hover{border-color:#B8891C} body:not(.light) .tabs .tab.active{ background:#C9A227 !important;color:#171512 !important;border-color:#C9A227 !important; }