/* CHESKA QR MENU 0.7.13 — Cheska signature visual refinement. Public behavior remains compatible with 0.7.10; this file focuses on layout, type and motion. */ :root{ --ink:#121210;--muted:#77736e;--paper:#fff;--line:#ece9e4;--soft:#f8f7f4; --accent:#181714;--green:#173621;--ease:cubic-bezier(.22,.7,.22,1);--header:60px; --sans:"Avenir Next","Helvetica Neue",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;background:#efeeeb} body{margin:0;background:#efeeeb;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button,input,textarea,select{font:inherit} button{-webkit-tap-highlight-color:transparent} .shell{width:min(100%,520px);min-height:100svh;margin:auto;background:#fff;position:relative;overflow:clip} .view{display:none}.view.active{display:block} /* Header */ .topbar{height:var(--header);position:sticky;top:0;z-index:60;display:grid;grid-template-columns:54px 1fr 54px;align-items:center;background:rgba(255,255,255,.985);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(18,18,16,.06)} .wordmark{text-align:center;letter-spacing:.205em;font-size:24px;line-height:1;font-weight:620} .iconbtn{width:42px;height:42px;border:0;background:transparent;margin:auto;display:grid;place-items:center;cursor:pointer;color:#151513;position:relative} .iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round} /* Hero */ .hero{height:calc(100svh - var(--header));min-height:520px;position:relative;overflow:hidden;background:#17120f} .hero-media,.hero-media>video,.hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .hero-media>video,.hero-media>img{pointer-events:none} .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.02) 22%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.52) 100%);pointer-events:none} .hero-actions{position:absolute;z-index:4;left:18px;right:18px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));display:grid;justify-items:center;gap:9px} .menu-cta{width:100%;height:42px;border:1px solid rgba(255,255,255,.86);border-radius:6px;background:rgba(17,16,14,.08);backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:650;letter-spacing:.01em;cursor:pointer;transition:background .22s ease,border-color .22s ease,transform .18s ease} .menu-cta:active{background:rgba(17,16,14,.24);transform:scale(.995)} .lang{color:#fff;font-size:10.5px;line-height:1;padding:7px 10px;border:1px solid rgba(255,255,255,.36);border-radius:6px;background:rgba(0,0,0,.17);backdrop-filter:blur(4px)} /* Editorial category mosaic: small+large / full / large+small / full. */ #menuStart{scroll-margin-top:var(--header)} .menu-stage{padding:12px 12px 14px;background:#fff} .mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:9px;grid-auto-flow:dense;align-items:stretch} .mosaic-card{position:relative;height:clamp(184px,46vw,228px);min-height:0;overflow:hidden;background:#ddd;border-radius:10px;cursor:pointer;isolation:isolate;box-shadow:0 1px 0 rgba(0,0,0,.02)} .mosaic-card.s4{grid-column:span 4}.mosaic-card.s5{grid-column:span 5}.mosaic-card.s7{grid-column:span 7}.mosaic-card.s8{grid-column:span 8} .mosaic-card.full{grid-column:1/-1;height:clamp(158px,39vw,194px)} .mosaic-card img,.mosaic-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none;transition:transform .75s var(--ease),filter .35s ease;background:#d9d5cf} .mosaic-card:after,.product-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.36) 0%,rgba(0,0,0,.08) 42%,rgba(0,0,0,.24) 100%);z-index:1;pointer-events:none} .mosaic-copy{position:absolute;z-index:2;left:14px;right:12px;top:13px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.28)} .mosaic-copy strong{display:block;font-size:18.5px;line-height:1.02;font-weight:720;letter-spacing:-.028em} .mosaic-card.full .mosaic-copy strong{font-size:20.5px} .mosaic-copy small{display:block;margin-top:4px;font-size:10.2px;line-height:1.3;font-weight:520;max-width:92%;opacity:.97} @media(hover:hover){.mosaic-card:hover img,.mosaic-card:hover video{transform:scale(1.024)}} /* Footer — clear end-state without copying Foost branding. */ .footer{padding:28px 16px 0;text-align:center;border-top:1px solid #25231f;background:#171714;color:#fff;overflow:hidden} .footer-logo{font-size:17px;line-height:1;font-weight:620;letter-spacing:.19em} .footer p{font-size:10px;line-height:1.55;color:#bcb8b2;margin:8px 0 24px} .footer-strip{margin:0 -16px;padding:12px 16px;background:var(--green);color:#f4f1eb;font-size:10.5px;line-height:1.35;font-weight:600} /* Category page */ .category-toolbar{position:sticky;top:var(--header);z-index:50;background:rgba(255,255,255,.985);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)} .tabs{display:flex;gap:24px;overflow:auto;white-space:nowrap;padding:11px 14px 0;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;border:0;background:transparent;color:#918d88;padding:0 0 11px;font-size:11.5px;font-weight:470;border-bottom:1.5px solid transparent;cursor:pointer} .tab.active{color:#171714;border-color:#171714;font-weight:650} .category-wrap{padding:18px 12px 34px} .category-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:0 2px 16px} .category-head h1{margin:0;font-size:23px;line-height:1;font-weight:720;letter-spacing:-.028em} .category-head p{margin:0;max-width:190px;color:#8a8782;font-size:10.3px;line-height:1.42;text-align:right} .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .product-card{position:relative;aspect-ratio:.90;border:0;border-radius:10px;overflow:hidden;background:#ddd;padding:0;text-align:left;color:#fff;cursor:pointer;isolation:isolate} .product-card img,.product-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .68s var(--ease);background:#ddd} .product-card:after{background:linear-gradient(to bottom,rgba(0,0,0,.02) 30%,rgba(0,0,0,.60) 100%)} .product-info{position:absolute;z-index:2;left:12px;right:11px;bottom:11px} .product-name{font-size:15px;line-height:1.08;font-weight:720;letter-spacing:-.018em;text-shadow:0 2px 12px rgba(0,0,0,.30)} .product-price{margin-top:5px;font-size:11px;font-weight:680} .sold{display:inline-flex;margin-top:7px;padding:5px 7px;border-radius:999px;background:rgba(255,255,255,.94);color:#221e1a;font-size:8.3px;font-weight:760;letter-spacing:.02em} .placeholder{width:100%;height:100%;display:grid;place-items:center;padding:18px;text-align:center;background:linear-gradient(145deg,#d9d4cd,#aaa29a);color:#fff;font-size:15px;line-height:1.15;font-weight:650} @media(hover:hover){.product-card:hover img,.product-card:hover video{transform:scale(1.022)}} .end{text-align:center;padding:40px 20px 8px;color:#918e89;font-size:10px;line-height:1.55} .end button{border:0;background:transparent;border-bottom:1px solid #aaa49e;color:#6e6964;margin-top:13px;padding:0 0 2px;cursor:pointer} /* Product detail */ dialog{border:0;padding:0;width:min(92vw,410px);max-height:92svh;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 32px 90px rgba(0,0,0,.30)} dialog::backdrop{background:rgba(20,18,16,.56);backdrop-filter:blur(7px)} .detail{display:flex;flex-direction:column;max-height:92svh} .detail-media{height:min(44svh,342px);min-height:245px;position:relative;overflow:hidden;background:#ddd} .detail-media img,.detail-media video{width:100%;height:100%;object-fit:cover;display:block;background:#ddd} .detail-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.62);border-radius:50%;background:rgba(21,19,17,.18);backdrop-filter:blur(9px);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.10)} .detail-close:before,.detail-close:after{content:"";position:absolute;left:10px;top:16px;width:13px;height:1px;background:#fff} .detail-close:before{transform:rotate(45deg)}.detail-close:after{transform:rotate(-45deg)} .detail-scroll{overflow:auto;padding:19px 19px 23px} .detail-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start} .detail h2{margin:0;font-size:23px;line-height:1.08;font-weight:720;letter-spacing:-.027em} .detail-price{font-size:13px;font-weight:760;padding-top:3px;white-space:nowrap} .detail-desc{margin:10px 0 16px;color:#74706b;font-size:12px;line-height:1.55} .facts{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;gap:0} .fact{padding:0 11px;font-size:10.5px;font-weight:570;color:#3d3a36}.fact:first-child{padding-left:0}.fact+.fact{border-left:1px solid var(--line)} .label{margin:16px 0 8px;font-size:9px;font-weight:760;letter-spacing:.12em;text-transform:uppercase;color:#5f5a55} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{padding:6px 9px;border-radius:999px;border:1px solid #e6e2dc;background:#faf9f7;font-size:9.5px;color:#4d4945} .ingredients{font-size:11px;line-height:1.55;color:#706b66} .rule{height:1px;background:var(--line);margin:19px 0} .rec-title{font-size:17px;line-height:1.1;font-weight:720;letter-spacing:-.018em;margin-bottom:11px} .recs{display:grid;grid-auto-flow:column;grid-auto-columns:70%;gap:9px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px} .recs::-webkit-scrollbar{display:none} .rec{scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer} .rec-media{height:116px;background:#ddd;overflow:hidden} .rec-media img,.rec-media video{width:100%;height:100%;object-fit:cover;display:block} .rec-body{padding:10px 10px 11px}.rec-body strong{font-size:11.5px;line-height:1.25}.rec-body p{font-size:9.5px;line-height:1.42;color:#77726d;margin:6px 0}.rec-body p b{color:#393632}.rec-price{font-size:10.5px;font-weight:760;margin-top:7px} /* Drawer and search */ .overlay{position:fixed;inset:0;z-index:100;background:rgba(15,13,11,.42);display:none;justify-content:center}.overlay.open{display:flex} .panel{width:min(100%,520px);min-height:100svh;background:#fff;padding:76px 24px 30px;position:relative} .panel h2{font-size:28px;line-height:1;font-weight:720;letter-spacing:-.027em;margin:0 0 20px} .panel a{display:block;color:#171714;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:520} .panel>.iconbtn{border:1px solid var(--line)!important;border-radius:50%;font-size:0;background:#fff!important} .panel>.iconbtn:before,.panel>.iconbtn:after{content:"";position:absolute;width:13px;height:1px;background:#171714;left:14px;top:20px} .panel>.iconbtn:before{transform:rotate(45deg)}.panel>.iconbtn:after{transform:rotate(-45deg)} .searchbox{width:100%;border:0;border-bottom:1px solid #dcd8d2;padding:12px 0;font-size:17px;outline:none} .result{width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:13px 0;cursor:pointer}.result b{font-size:13px}.result small{color:#827e79;font-size:10px} .status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:280;background:#171714;color:#fff;padding:9px 12px;border-radius:999px;font-size:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);display:none}.status.show{display:block} .empty{padding:120px 30px;text-align:center}.empty h1{font-size:28px;line-height:1.05;font-weight:720;letter-spacing:-.027em}.empty p{color:#77736e;font-size:12px;line-height:1.6} /* One-time experience notice — visually inspired by Foost's compact consent card, but accurate to Cheska's local storage use. */ .experience-layer{position:fixed;inset:0;z-index:250;display:none;align-items:flex-end;justify-content:center;padding:16px;background:rgba(6,6,6,.38);backdrop-filter:blur(2px)} .experience-layer.open{display:flex} .experience-card{position:relative;width:min(100%,476px);padding:18px 16px 14px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(19,18,16,.965);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.35)} .experience-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#5b5955;color:#fff;font-size:16px;margin-bottom:13px} .experience-title{font-size:14px;font-weight:720;letter-spacing:-.01em;margin-bottom:7px} .experience-card p{margin:0;color:#c9c6c1;font-size:11px;line-height:1.55;font-weight:520;max-width:92%} .experience-close{position:absolute;right:13px;top:13px;width:30px;height:30px;border:0;background:transparent;cursor:pointer} .experience-close:before,.experience-close:after{content:"";position:absolute;left:8px;top:14px;width:14px;height:1px;background:#fff}.experience-close:before{transform:rotate(45deg)}.experience-close:after{transform:rotate(-45deg)} .experience-more{display:block;margin:14px auto 10px;border:0;background:transparent;color:#aaa7a2;font-size:10.5px;cursor:pointer} .experience-details{display:none;margin:-2px 0 10px;padding:10px 11px;border-radius:9px;background:rgba(255,255,255,.06);color:#bcb8b2;font-size:9.7px;line-height:1.45}.experience-details.open{display:block} .experience-accept{width:100%;height:37px;border:0;border-radius:999px;background:#e8e6e2;color:#181714;font-size:11.5px;font-weight:650;cursor:pointer} @media(max-width:390px){ .wordmark{font-size:22.5px}.menu-stage{padding:10px}.mosaic{gap:8px} .mosaic-card{height:clamp(170px,48vw,188px)}.mosaic-card.full{height:clamp(148px,41vw,166px)} .mosaic-copy{left:12px;top:12px}.mosaic-copy strong{font-size:17px}.mosaic-card.full .mosaic-copy strong{font-size:18.5px}.mosaic-copy small{font-size:9.7px} .category-wrap{padding-left:10px;padding-right:10px}.product-grid{gap:8px}.product-name{font-size:14.5px}.detail-media{height:40svh} .experience-layer{padding:10px}.experience-card{padding:16px 14px 12px} } @media(min-width:700px){body{padding:18px 0}.shell{border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.14)}.topbar{border-radius:24px 24px 0 0}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mosaic-card img,.mosaic-card video,.product-card img,.product-card video{transition:none}} /* ========================================================= CHESKA QR MENU 0.7.12 — PREMIUM POLISH LAYER Intentional override-only layer: no public/admin behavior changes. ========================================================= */ :root{ --header:62px; --ink:#11110f; --muted:#756f68; --line:#ebe7e1; --soft:#f7f5f1; } body{background:#ebe9e5} .shell{width:min(100%,510px);background:#fff} /* Header: quieter, slightly more architectural. */ .topbar{height:var(--header);grid-template-columns:52px 1fr 52px;background:rgba(255,255,255,.975);box-shadow:0 1px 0 rgba(17,17,15,.07)} .wordmark{font-size:23px;font-weight:590;letter-spacing:.245em;text-indent:.245em} .iconbtn{width:40px;height:40px} .iconbtn svg{width:18px;height:18px;stroke-width:1.45} /* Hero: stronger cinematic falloff and lighter controls. */ .hero{height:calc(100svh - var(--header));min-height:560px;background:#171411} .hero-media>video,.hero-media>img{object-position:center center;filter:saturate(.96) contrast(1.015)} .hero:before{content:"";position:absolute;z-index:2;inset:0;box-shadow:inset 0 -80px 95px rgba(0,0,0,.10);pointer-events:none} .hero:after{z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,.015) 18%,rgba(0,0,0,.03) 46%,rgba(0,0,0,.18) 74%,rgba(0,0,0,.58) 100%)} .hero-actions{left:17px;right:17px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));gap:8px} .menu-cta{height:43px;border-color:rgba(255,255,255,.76);border-radius:7px;background:rgba(12,12,10,.11);box-shadow:0 4px 18px rgba(0,0,0,.10);font-size:11.5px;font-weight:630;letter-spacing:.015em} .menu-cta:hover{background:rgba(12,12,10,.18)} .lang{padding:7px 10px;border-radius:7px;border-color:rgba(255,255,255,.31);font-size:10px;background:rgba(10,10,9,.16)} /* Foost-like editorial rhythm: 5/7, full, 7/5, full. */ .menu-stage{padding:12px 12px 16px} .mosaic{gap:8px} .mosaic-card{height:clamp(205px,47vw,236px);border-radius:9px;box-shadow:none;background:#d8d3cc} .mosaic-card.full{height:clamp(174px,39vw,198px)} .mosaic-card img,.mosaic-card video{filter:saturate(.93) contrast(1.025);transform:scale(1.005)} .mosaic-card:nth-child(1) img,.mosaic-card:nth-child(1) video{object-position:50% 48%} .mosaic-card:nth-child(2) img,.mosaic-card:nth-child(2) video{object-position:51% 52%} .mosaic-card:nth-child(3) img,.mosaic-card:nth-child(3) video{object-position:50% 54%} .mosaic-card:nth-child(4) img,.mosaic-card:nth-child(4) video{object-position:50% 50%} .mosaic-card:nth-child(5) img,.mosaic-card:nth-child(5) video{object-position:52% 50%} .mosaic-card:nth-child(6) img,.mosaic-card:nth-child(6) video{object-position:50% 53%} .mosaic-card:after{background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.13) 29%,rgba(0,0,0,.04) 60%,rgba(0,0,0,.15) 100%)} .mosaic-copy{left:14px;right:12px;top:13px;text-shadow:0 2px 14px rgba(0,0,0,.34)} .mosaic-copy strong{font-size:18px;line-height:1.01;font-weight:700;letter-spacing:-.034em} .mosaic-card.full .mosaic-copy strong{font-size:20px} .mosaic-copy small{margin-top:4px;max-width:94%;font-size:9.8px;line-height:1.32;font-weight:535;letter-spacing:-.005em} @media(hover:hover){.mosaic-card:hover img,.mosaic-card:hover video{transform:scale(1.035);filter:saturate(.98) contrast(1.03)}} /* Footer: compact, decisive end state. */ .footer{padding:25px 16px 0;border-top:0;background:#131311} .footer-logo{font-size:16px;font-weight:590;letter-spacing:.22em;text-indent:.22em} .footer p{margin:7px 0 20px;color:#aaa59e;font-size:9.5px;letter-spacing:.01em} .footer-strip{padding:11px 16px;background:#17341f;font-size:10px;font-weight:580} /* Category navigation + product grid: lighter catalogue feel. */ .category-toolbar{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line)} .tabs{gap:25px;padding:10px 14px 0} .tab{padding-bottom:10px;font-size:10.8px;color:#948f89;font-weight:490;border-bottom-width:1px} .tab.active{color:#121210;font-weight:650} .category-wrap{padding:18px 12px 36px} .category-head{margin:0 2px 15px;align-items:center} .category-head h1{font-size:22px;font-weight:700;letter-spacing:-.035em} .category-head p{max-width:185px;font-size:9.7px;line-height:1.42;color:#88827b} .product-grid{gap:8px} .product-card{aspect-ratio:.91;border-radius:9px;background:#d8d3cc} .product-card:after{background:linear-gradient(180deg,rgba(0,0,0,.01) 33%,rgba(0,0,0,.13) 64%,rgba(0,0,0,.66) 100%)} .product-card img,.product-card video{filter:saturate(.97) contrast(1.015)} .product-info{left:11px;right:10px;bottom:10px} .product-name{font-size:14.6px;font-weight:700;letter-spacing:-.025em;text-shadow:0 2px 12px rgba(0,0,0,.38)} .product-price{margin-top:4px;font-size:10.6px;font-weight:690} .end{padding-top:36px;color:#97918a;font-size:9.6px} /* Detail modal: calmer hierarchy, clearer facts, refined close affordance. */ dialog{width:min(93vw,414px);max-height:93svh;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.28)} dialog::backdrop{background:rgba(19,18,16,.52);backdrop-filter:blur(8px)} .detail{max-height:93svh} .detail-media{height:min(42svh,324px);min-height:235px} .detail-media img,.detail-media video{filter:saturate(.98) contrast(1.01)} .detail-close{right:11px;top:11px;width:33px;height:33px;border-color:rgba(255,255,255,.58);background:rgba(17,16,14,.20);box-shadow:0 3px 14px rgba(0,0,0,.12)} .detail-close:before,.detail-close:after{left:10px;top:15px;width:12px} .detail-scroll{padding:18px 19px 22px} .detail-top{gap:12px} .detail h2{font-size:22px;font-weight:700;letter-spacing:-.035em} .detail-price{font-size:12.5px;font-weight:735} .detail-desc{margin:9px 0 15px;font-size:11.6px;line-height:1.58;color:#77716a} .facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));padding:11px 0;border-color:var(--line)} .facts:empty{display:none!important} .fact{padding:0 10px;text-align:center;font-size:10px;font-weight:600;color:#49443f;white-space:nowrap} .fact:first-child{padding-left:0}.fact:last-child{padding-right:0}.fact+.fact{border-left:1px solid var(--line)} .label{margin:15px 0 8px;font-size:8.6px;font-weight:780;letter-spacing:.14em;color:#6a635c} .chips{gap:5px} .chip{padding:5px 8px;border-color:#e5e0d9;background:#faf9f6;font-size:9px;color:#514c46} .ingredients{font-size:10.7px;line-height:1.58;color:#706a64} .rule{margin:18px 0} .rec-title{font-size:16.5px;font-weight:700;letter-spacing:-.024em;margin-bottom:10px} .recs{grid-auto-columns:64%;gap:8px} .rec{border-color:#e8e3dd;border-radius:9px} .rec-media{height:124px} .rec-body{padding:9px 10px 10px} .rec-body strong{display:block;font-size:11.2px;line-height:1.25} .rec-body p{font-size:9px;line-height:1.42;margin:5px 0;color:#77716b} .rec-price{font-size:10px;margin-top:6px} /* Search / drawer */ .panel{padding:74px 22px 28px} .panel h2{font-size:26px;font-weight:700;letter-spacing:-.035em} .panel a{padding:15px 0;font-size:13.5px} .searchbox{font-size:16px} /* Consent / experience card — compact bottom card like a premium menu utility. */ .experience-layer{padding:13px;background:rgba(6,6,6,.34);backdrop-filter:blur(2.5px)} .experience-card{width:min(100%,472px);padding:17px 15px 13px;border-radius:16px;background:rgba(17,16,14,.975);box-shadow:0 24px 70px rgba(0,0,0,.36)} .experience-icon{width:34px;height:34px;margin-bottom:11px;font-size:14px;background:#56534f} .experience-title{font-size:13px;margin-bottom:6px} .experience-card p{font-size:10.5px;line-height:1.52} .experience-more{margin:12px auto 9px;font-size:10px} .experience-accept{height:36px;font-size:11px;background:#e5e2dd} @media(max-width:390px){ .wordmark{font-size:21.5px} .menu-stage{padding:10px} .mosaic{gap:7px} .mosaic-card{height:clamp(185px,49vw,201px)} .mosaic-card.full{height:clamp(154px,41vw,171px)} .mosaic-copy{left:12px;top:11px} .mosaic-copy strong{font-size:16.8px}.mosaic-card.full .mosaic-copy strong{font-size:18.5px} .mosaic-copy small{font-size:9.2px} .category-wrap{padding-left:10px;padding-right:10px} .product-grid{gap:7px}.product-name{font-size:14px} .detail-scroll{padding-left:16px;padding-right:16px} .detail h2{font-size:21px}.detail-media{height:39svh;min-height:220px} .recs{grid-auto-columns:72%} } @media(min-width:700px){ body{padding:18px 0} .shell{border-radius:24px;box-shadow:0 26px 86px rgba(0,0,0,.14)} .topbar{border-radius:24px 24px 0 0} } /* ========================================================= CHESKA QR MENU 0.7.13 — CHESKA SIGNATURE LAYER Goal: not a Foost clone; a calmer, warmer and more editorial Cheska menu. Public visual layer only. Admin/Firebase behavior is unchanged. ========================================================= */ :root{ --cheska-cream:#f3f0ea; --cheska-paper:#fffefb; --cheska-coal:#151310; --cheska-cocoa:#5f4636; --cheska-green:#173a25; --cheska-line:#e9e3da; --cheska-soft:#f7f4ef; --header:63px; } html,body{background:#efede8} body{color:var(--cheska-coal)} .shell{width:min(100%,516px);background:var(--cheska-paper)} /* Signature header: quiet, warm and recognisably Cheska. */ .topbar{height:var(--header);grid-template-columns:54px 1fr 54px;background:rgba(255,254,251,.972);box-shadow:0 1px 0 rgba(43,34,27,.065)} .wordmark{font-size:22.5px;font-weight:600;letter-spacing:.265em;text-indent:.265em;color:#171411} .iconbtn{color:#1b1815}.iconbtn svg{width:18.5px;height:18.5px;stroke-width:1.45} /* Hero: cinematic without feeling like an ad. */ .hero{height:calc(100svh - var(--header));min-height:555px;background:#18130f} .hero-media>video,.hero-media>img{filter:saturate(.94) contrast(1.025) brightness(.985);transform:scale(1.006)} .hero:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 35%,rgba(18,13,10,.07) 78%,rgba(18,13,10,.14) 100%)} .hero:after{z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.005) 22%,rgba(0,0,0,.035) 52%,rgba(0,0,0,.19) 76%,rgba(0,0,0,.64) 100%)} .hero-actions{left:16px;right:16px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 13px));gap:8px} .menu-cta{height:44px;border-radius:999px;border-color:rgba(255,255,255,.72);background:rgba(22,17,13,.16);backdrop-filter:blur(8px);font-size:11.7px;font-weight:650;letter-spacing:.015em;box-shadow:0 6px 24px rgba(0,0,0,.08)} .menu-cta:active{transform:scale(.992);background:rgba(22,17,13,.26)} .lang{padding:7px 10px;border-radius:999px;background:rgba(22,17,13,.19);border-color:rgba(255,255,255,.30);font-size:9.8px} /* Main category mosaic: Cheska editorial rhythm 5/7 · full · 8/4 · full. */ .menu-stage{padding:11px 11px 15px;background:var(--cheska-paper)} .mosaic{gap:8px} .mosaic-card{height:clamp(204px,48vw,238px);border-radius:12px;background:#d9d1c8;box-shadow:0 1px 0 rgba(0,0,0,.02)} .mosaic-card.full{height:clamp(171px,39vw,198px)} .mosaic-card.s8,.mosaic-card.s4{height:clamp(213px,49vw,244px)} .mosaic-card img,.mosaic-card video{filter:saturate(.92) contrast(1.03) brightness(.985);transform:scale(1.006)} .mosaic-card:after{background:linear-gradient(180deg,rgba(10,8,7,.42) 0%,rgba(10,8,7,.13) 31%,rgba(10,8,7,.025) 59%,rgba(10,8,7,.18) 100%)} .mosaic-card.full:after{background:linear-gradient(180deg,rgba(10,8,7,.14) 0%,rgba(10,8,7,.035) 48%,rgba(10,8,7,.52) 100%)} .mosaic-copy{left:14px;right:13px;top:13px;text-shadow:0 2px 16px rgba(0,0,0,.34)} .mosaic-card.full .mosaic-copy{top:auto;bottom:14px;max-width:78%} .mosaic-copy strong{font-size:18px;line-height:1.02;font-weight:710;letter-spacing:-.035em} .mosaic-card.full .mosaic-copy strong{font-size:20.5px} .mosaic-copy small{margin-top:4px;font-size:9.6px;line-height:1.35;font-weight:540;opacity:.96;max-width:96%} .mosaic-card.s4 .mosaic-copy strong{font-size:16.7px}.mosaic-card.s4 .mosaic-copy small{font-size:8.9px} @media(hover:hover){.mosaic-card:hover img,.mosaic-card:hover video{transform:scale(1.038);filter:saturate(.97) contrast(1.035)}} /* Category view: more editorial, less e-commerce. */ .category-toolbar{background:rgba(255,254,251,.975);box-shadow:0 1px 0 var(--cheska-line)} .tabs{gap:23px;padding:11px 14px 0} .tab{font-size:10.5px;color:#9a938b;padding-bottom:10px;border-bottom-width:1px;letter-spacing:-.005em} .tab.active{color:#191612;font-weight:670;border-color:#2c241e} .category-wrap{padding:19px 11px 38px;background:var(--cheska-paper)} .category-head{position:relative;margin:0 3px 18px;align-items:flex-end;gap:22px;padding-top:4px} .category-head:before{content:"";position:absolute;left:0;top:-1px;width:24px;height:1px;background:#9b755e;opacity:.7} .category-head h1{font-size:24px;font-weight:710;letter-spacing:-.04em;color:#181511} .category-head p{max-width:190px;font-size:9.6px;line-height:1.48;color:#8d867f} .product-grid{gap:8px} .product-card{aspect-ratio:.86;border-radius:12px;background:#d8d0c7;box-shadow:0 1px 0 rgba(29,23,19,.03)} .product-card img,.product-card video{filter:saturate(.96) contrast(1.018);transform:scale(1.002)} .product-card:after{background:linear-gradient(180deg,rgba(8,7,6,.015) 28%,rgba(8,7,6,.10) 58%,rgba(8,7,6,.70) 100%)} .product-info{left:11px;right:10px;bottom:10px} .product-name{font-size:14.9px;font-weight:700;letter-spacing:-.025em} .product-price{display:inline-flex;margin-top:6px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.91);backdrop-filter:blur(5px);color:#201b17;font-size:9.7px;font-weight:720;text-shadow:none} .sold{background:#f3ece3;color:#6e3428} @media(hover:hover){.product-card:hover img,.product-card:hover video{transform:scale(1.028)}} .end{padding:38px 20px 7px;color:#9a938c}.end button{color:#6d625a;border-color:#b6aaa1} /* Product detail: mini landing page, still quick to scan. */ dialog{width:min(93vw,418px);max-height:93svh;border-radius:18px;background:var(--cheska-paper);box-shadow:0 34px 100px rgba(20,15,12,.31)} dialog::backdrop{background:rgba(27,22,18,.53);backdrop-filter:blur(9px)} .detail{max-height:93svh} .detail-media{height:min(41svh,320px);min-height:238px;background:#d9d0c7} .detail-media img,.detail-media video{filter:saturate(.98) contrast(1.015)} .detail-close{right:11px;top:11px;width:34px;height:34px;border-color:rgba(255,255,255,.62);background:rgba(20,16,13,.24);box-shadow:0 4px 18px rgba(0,0,0,.10)} .detail-scroll{padding:19px 19px 23px;background:var(--cheska-paper)} .detail-top{gap:14px;align-items:baseline} .detail h2{font-size:23px;font-weight:710;letter-spacing:-.042em;color:#171411} .detail-price{padding-top:0;font-size:12.7px;font-weight:760;color:#211b17} .detail-desc{margin:9px 0 15px;font-size:11.7px;line-height:1.62;color:#766e67} .facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:10px 6px;border:0;border-radius:11px;background:var(--cheska-soft)} .facts:empty{display:none!important} .fact{padding:2px 8px;text-align:center;font-size:9.8px;font-weight:640;color:#514942;white-space:nowrap}.fact+.fact{border-left:1px solid #e4ddd5}.fact:first-child{padding-left:8px}.fact:last-child{padding-right:8px} .label{margin:16px 0 7px;font-size:8.4px;font-weight:800;letter-spacing:.15em;color:#766b62} .chips{gap:5px}.chip{padding:5px 8px;border-color:#e3ddd5;background:#fbf9f5;color:#534b44;font-size:8.8px} .ingredients{font-size:10.6px;line-height:1.62;color:#756d66} .rule{margin:18px 0;background:var(--cheska-line)} .rec-title{font-size:16.8px;font-weight:710;letter-spacing:-.03em;margin-bottom:10px} .recs{grid-auto-columns:58%;gap:8px} .rec{border:0;border-radius:12px;background:#f7f3ee;box-shadow:inset 0 0 0 1px #ebe4dc} .rec-media{height:118px;background:#d9d0c7} .rec-body{padding:9px 10px 11px}.rec-body strong{font-size:11px}.rec-body p{font-size:8.8px;line-height:1.45;color:#756d66}.rec-body p b{color:#4d433b}.rec-price{font-size:9.8px} /* Drawer/search feel like part of the same product, not utility pages. */ .overlay{background:rgba(24,19,15,.43)} .panel{background:var(--cheska-paper);padding-left:23px;padding-right:23px} .panel h2{font-size:27px;font-weight:710;letter-spacing:-.04em} .panel a{font-size:13.5px;border-color:var(--cheska-line)} .searchbox{border-color:#dcd3ca;background:transparent} .result{background:transparent;border-color:var(--cheska-line)} /* One-time welcome utility: honest about local storage, but unmistakably Cheska. */ .experience-layer{background:rgba(13,10,8,.35);backdrop-filter:blur(3px)} .experience-card{border-radius:18px;background:rgba(22,18,15,.975);border-color:rgba(255,255,255,.12)} .experience-icon{background:#654d3d}.experience-title{font-size:13.5px}.experience-card p{color:#cec6bf} .experience-accept{background:#f0ebe4;color:#1e1915;font-weight:680} /* Footer: a quiet Cheska signature, no SaaS branding. */ .footer{padding-top:27px;background:#161411;border-top:0} .footer-logo{font-size:15.5px;font-weight:610;letter-spacing:.25em;text-indent:.25em} .footer p{color:#aaa29a;margin:7px 0 21px;font-size:9.4px} .footer-strip{background:var(--cheska-green);font-size:9.7px;letter-spacing:.005em} @media(max-width:390px){ .wordmark{font-size:21px} .menu-stage{padding:9px}.mosaic{gap:7px} .mosaic-card{height:clamp(184px,50vw,204px)}.mosaic-card.full{height:clamp(154px,41vw,172px)}.mosaic-card.s8,.mosaic-card.s4{height:clamp(193px,51vw,212px)} .mosaic-copy{left:12px;right:10px;top:11px}.mosaic-card.full .mosaic-copy{bottom:12px} .mosaic-copy strong{font-size:16.6px}.mosaic-card.full .mosaic-copy strong{font-size:18.6px}.mosaic-card.s4 .mosaic-copy strong{font-size:15.2px} .mosaic-copy small{font-size:8.9px}.mosaic-card.s4 .mosaic-copy small{font-size:8.2px} .category-wrap{padding-left:9px;padding-right:9px}.product-grid{gap:7px}.product-card{border-radius:11px}.product-name{font-size:13.8px} .detail-scroll{padding-left:16px;padding-right:16px}.detail h2{font-size:21.5px}.detail-media{height:38svh;min-height:218px}.recs{grid-auto-columns:68%} } @media(min-width:700px){ .shell{border-radius:25px;box-shadow:0 28px 90px rgba(31,24,19,.14)} .topbar{border-radius:25px 25px 0 0} } /* ========================================================= CHESKA QR MENU 0.7.14 — PREMIUM DETAIL PASS Cheska-specific visual refinement. Functionality remains on the 0.7.10 core. ========================================================= */ :root{ --cheska-ui:"Avenir Next","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif; --cheska-display:Georgia,"Times New Roman",serif; --cheska-ivory:#fffdf9; --cheska-warm:#f7f2eb; --cheska-ink:#17130f; --cheska-muted:#7c736b; --cheska-accent:#7d5a43; } body{font-family:var(--cheska-ui);background:#efebe5} .shell{background:var(--cheska-ivory)} /* Hero: quieter chrome, more cinematic invitation. */ .topbar{background:rgba(255,253,249,.978);box-shadow:0 1px 0 rgba(64,48,37,.07)} .wordmark{font-weight:570;letter-spacing:.285em;text-indent:.285em} .hero-media>video,.hero-media>img{filter:saturate(.96) contrast(1.035) brightness(.985)} .hero:before{background:radial-gradient(ellipse at 48% 40%,rgba(255,255,255,.02) 0%,transparent 42%,rgba(19,13,10,.07) 78%,rgba(19,13,10,.16) 100%)} .hero:after{background:linear-gradient(180deg,rgba(0,0,0,.006) 14%,rgba(0,0,0,.025) 47%,rgba(0,0,0,.17) 72%,rgba(0,0,0,.68) 100%)} .hero-actions{bottom:max(24px,calc(env(safe-area-inset-bottom) + 15px));gap:9px} .menu-cta{height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-color:rgba(255,255,255,.72);background:linear-gradient(180deg,rgba(31,23,18,.16),rgba(20,15,12,.24));box-shadow:0 10px 28px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.11);font-size:11.8px;letter-spacing:.022em;transition:background .22s ease,transform .18s ease,box-shadow .22s ease} .menu-cta .cta-arrow{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.38);font-size:11px;line-height:1;transform:translateY(-.5px);opacity:.94} @media(hover:hover){.menu-cta:hover{background:linear-gradient(180deg,rgba(31,23,18,.24),rgba(20,15,12,.31));box-shadow:0 12px 32px rgba(0,0,0,.17),inset 0 1px rgba(255,255,255,.14)}} .lang{background:rgba(23,17,13,.23);border-color:rgba(255,255,255,.33);backdrop-filter:blur(7px)} /* Category mosaic: stronger composition without turning into a rigid template. */ .menu-stage{padding:12px 12px 18px;background:var(--cheska-ivory)} .mosaic{gap:9px} .mosaic-card{border-radius:13px;box-shadow:0 5px 18px rgba(42,31,24,.055);transition:transform .28s ease,box-shadow .28s ease} .mosaic-card.s5,.mosaic-card.s7{height:clamp(218px,49vw,246px)} .mosaic-card.full{height:clamp(180px,40vw,204px)} .mosaic-card.s8,.mosaic-card.s4{height:clamp(222px,50vw,252px)} .mosaic-card:after{background:linear-gradient(180deg,rgba(10,8,7,.47) 0%,rgba(10,8,7,.15) 29%,rgba(10,8,7,.025) 58%,rgba(10,8,7,.19) 100%)} .mosaic-card.full:after{background:linear-gradient(180deg,rgba(10,8,7,.08) 0%,rgba(10,8,7,.02) 46%,rgba(10,8,7,.58) 100%)} .mosaic-copy{left:15px;right:14px;top:14px} .mosaic-card.full .mosaic-copy{bottom:15px;max-width:74%} .mosaic-copy strong{font-size:18.6px;font-weight:680;letter-spacing:-.036em} .mosaic-card.full .mosaic-copy strong{font-size:21.5px} .mosaic-copy small{font-size:9.7px;line-height:1.4;font-weight:520;max-width:94%;opacity:.94} .mosaic-card.s4 .mosaic-copy strong{font-size:16.6px}.mosaic-card.s4 .mosaic-copy small{font-size:8.8px;max-width:100%} @media(hover:hover){.mosaic-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(42,31,24,.09)}} /* Category view: boutique gallery, not an e-commerce grid. */ .category-toolbar{position:sticky;top:var(--header);z-index:45;background:rgba(255,253,249,.965);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(70,53,42,.08)} .tabs{padding:12px 14px 0;gap:24px;scroll-padding-inline:20px} .tab{font-size:10.3px;color:#989087;padding-bottom:11px;transition:color .2s ease,border-color .2s ease} .tab.active{color:#1b1713;border-color:#765744;font-weight:680} .category-wrap{padding:21px 12px 42px;background:var(--cheska-ivory)} .category-head{margin:0 3px 20px;padding-top:7px;gap:20px} .category-head:before{width:30px;background:#9a735d;opacity:.65} .category-head h1{font-family:var(--cheska-display);font-size:29px;line-height:1;font-weight:500;letter-spacing:-.032em;color:var(--cheska-ink)} .category-head p{max-width:185px;font-size:9.5px;line-height:1.5;color:#8a8179} .product-grid{gap:10px} .product-card{aspect-ratio:.84;border-radius:14px;box-shadow:0 6px 22px rgba(47,34,25,.055);outline:1px solid rgba(68,50,38,.035);outline-offset:-1px} .product-card:after{background:linear-gradient(180deg,rgba(8,7,6,.005) 26%,rgba(8,7,6,.08) 57%,rgba(8,7,6,.73) 100%)} .product-info{left:12px;right:11px;bottom:11px} .product-name{font-size:15px;font-weight:680;letter-spacing:-.025em} .product-price{margin-top:6px;padding:4px 8px;background:rgba(255,253,249,.93);box-shadow:0 2px 9px rgba(0,0,0,.07);font-size:9.6px;color:#2d241e} @media(hover:hover){.product-card:hover{box-shadow:0 11px 28px rgba(47,34,25,.09)}.product-card:hover img,.product-card:hover video{transform:scale(1.035)}} /* Product detail: a compact Cheska product story. */ dialog{width:min(94vw,430px);border-radius:20px;background:var(--cheska-ivory);box-shadow:0 38px 110px rgba(20,14,10,.33)} dialog::backdrop{background:rgba(28,22,18,.55);backdrop-filter:blur(10px)} .detail-media{height:min(42svh,326px);min-height:240px} .detail-close{width:35px;height:35px;background:rgba(18,14,11,.23);border-color:rgba(255,255,255,.67);box-shadow:0 5px 18px rgba(0,0,0,.13)} .detail-scroll{padding:20px 20px 25px;scrollbar-width:none}.detail-scroll::-webkit-scrollbar{display:none} .detail-top{gap:14px;align-items:center} .detail h2{font-family:var(--cheska-display);font-size:27px;line-height:1.02;font-weight:500;letter-spacing:-.035em;color:var(--cheska-ink)} .detail-price{padding:6px 9px;border-radius:999px;background:#f1ebe3;color:#2e251f;font-size:11.8px;font-weight:760;line-height:1;box-shadow:inset 0 0 0 1px #e5dcd3} .detail-desc{max-width:355px;margin:11px 0 17px;font-size:11.6px;line-height:1.7;color:#746a62} .facts{padding:8px 5px 9px;border-radius:13px;background:#f5f0e9;box-shadow:inset 0 0 0 1px rgba(91,66,49,.035)} .fact{display:flex;min-height:35px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 8px!important;color:#4e443d} .fact span{font-size:9.9px;font-weight:700;line-height:1} .fact:after{font-size:7.2px;line-height:1;text-transform:uppercase;letter-spacing:.11em;color:#9a8d82;font-weight:700} .fact:after{content:attr(data-label)} .fact+.fact{border-left:1px solid #e1d8cf} .label{margin:17px 0 8px;font-size:8.1px;letter-spacing:.17em;color:#776a60} .chips{gap:6px}.chip{position:relative;padding:5px 9px 5px 17px;border:0;background:#f8f3ed;color:#53483f;font-size:8.7px;box-shadow:inset 0 0 0 1px #e6ddd4}.chip:before{content:"";position:absolute;left:8px;top:50%;width:4px;height:4px;border-radius:50%;background:#9a735d;transform:translateY(-50%)} .ingredients{padding:10px 12px;border-radius:10px;background:#faf7f2;font-size:10.5px;line-height:1.65;color:#746b64;box-shadow:inset 0 0 0 1px rgba(95,70,54,.035)} .rule{margin:19px 0 18px} .rec-title{font-family:var(--cheska-display);font-size:20px;font-weight:500;letter-spacing:-.028em;margin-bottom:11px;color:#1b1713} .recs{grid-auto-columns:calc((100% - 9px)/2);gap:9px;scroll-padding-inline:1px} .rec{border-radius:13px;background:#f8f4ee;box-shadow:inset 0 0 0 1px #e8dfd6,0 4px 15px rgba(44,32,24,.035)} .rec-media{height:112px} .rec-body{padding:10px 10px 11px}.rec-body strong{font-size:11.2px;font-weight:700;line-height:1.25;color:#211b17}.rec-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px;margin:6px 0 0;font-size:8.8px;line-height:1.45;color:#746a63}.rec-body p b{display:block;margin-bottom:2px;font-size:7.2px;letter-spacing:.10em;text-transform:uppercase;color:#9a735d}.rec-price{margin-top:7px;font-size:10px;font-weight:760;color:#312720} /* Drawers/search and footer use the same visual language. */ .panel{background:var(--cheska-ivory)} .panel h2{font-family:var(--cheska-display);font-size:30px;font-weight:500} .footer{position:relative;padding-top:31px;background:#151310}.footer:before{content:"";position:absolute;left:50%;top:18px;width:24px;height:1px;background:#8d6c56;transform:translateX(-50%);opacity:.8} .footer-logo{font-size:15px;font-weight:560;letter-spacing:.285em;text-indent:.285em} .footer p{margin:8px 0 22px;color:#aaa097;font-size:9.2px}.footer-strip{background:#173a25;padding:11px 16px;font-size:9.5px} @media(max-width:390px){ .menu-stage{padding:9px 9px 15px}.mosaic{gap:7px}.mosaic-card{border-radius:11px} .mosaic-card.s5,.mosaic-card.s7{height:clamp(190px,51vw,211px)}.mosaic-card.full{height:clamp(158px,42vw,176px)}.mosaic-card.s8,.mosaic-card.s4{height:clamp(198px,52vw,218px)} .category-wrap{padding-left:9px;padding-right:9px}.product-grid{gap:8px}.product-card{border-radius:12px}.category-head h1{font-size:27px} .detail-scroll{padding-left:16px;padding-right:16px}.detail h2{font-size:25px}.detail-price{font-size:11px}.detail-media{height:38svh;min-height:216px} .recs{grid-auto-columns:72%;gap:8px}.rec-media{height:116px} } /* ========================================================= CHESKA QR MENU 0.7.15 — TYPOGRAPHY & MICRO-POLISH PASS Goal: clearer reading, calmer hierarchy, fewer decorative distractions. Public visual layer only; admin/Firebase/data behavior is unchanged. ========================================================= */ :root{ --cheska-ui:"Segoe UI Variable Text","Aptos","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --cheska-display:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif; } html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{font-family:var(--cheska-ui);font-size:14px;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button,input,select,textarea{font-family:var(--cheska-ui)} /* Header + hero: no decorative arrow; CTA is intentionally quiet. */ .wordmark{font-family:var(--cheska-ui);font-size:22.5px;font-weight:610;letter-spacing:.27em;text-indent:.27em;transform:translateY(.25px)} .iconbtn svg{stroke-width:1.5} .menu-cta{height:45px;gap:0;font-size:12.1px;font-weight:660;letter-spacing:.012em;line-height:1} .menu-cta .cta-arrow,.cta-arrow{display:none!important} .lang{font-size:10.1px;font-weight:560;letter-spacing:.01em} /* Main mosaic: captions stay compact but no longer feel miniature. */ .mosaic-copy{left:14px;right:13px} .mosaic-copy strong{font-family:var(--cheska-ui);font-size:18.7px;line-height:1.08;font-weight:710;letter-spacing:-.022em} .mosaic-card.full .mosaic-copy strong{font-size:21px;line-height:1.08} .mosaic-copy small{margin-top:4px;max-width:96%;font-size:10.25px;line-height:1.42;font-weight:520;letter-spacing:0} .mosaic-card.s4 .mosaic-copy strong{font-size:16.9px}.mosaic-card.s4 .mosaic-copy small{font-size:9.45px;line-height:1.38} /* Category screen: readable navigation + elegant editorial heading. */ .tabs{gap:24px} .tab{font-size:10.9px;line-height:1.2;font-weight:520;letter-spacing:0} .tab.active{font-weight:680} .category-head h1{font-family:var(--cheska-display);font-size:28px;line-height:1.08;font-weight:600;letter-spacing:-.018em} .category-head p{max-width:190px;font-size:10.15px;line-height:1.5;color:#817870;font-weight:450} .product-name{font-size:15.2px;line-height:1.15;font-weight:700;letter-spacing:-.015em} .product-price{font-size:10.2px;font-weight:700;letter-spacing:0} /* Detail modal: stronger reading comfort without losing the boutique feel. */ .detail h2{font-family:var(--cheska-display);font-size:26px;line-height:1.08;font-weight:600;letter-spacing:-.018em} .detail-price{font-size:12.2px;font-weight:720;letter-spacing:0} .detail-desc{max-width:360px;margin:10px 0 17px;font-size:12px;line-height:1.66;color:#6f675f;font-weight:430} .fact span{font-size:10.2px;font-weight:700;letter-spacing:0} .fact:after{font-size:7.5px;letter-spacing:.10em;font-weight:700} .label{font-size:8.55px;line-height:1.2;letter-spacing:.145em;font-weight:760} .chip{font-size:9.15px;line-height:1.2;font-weight:520} .ingredients{font-size:11px;line-height:1.62;color:#6d655e} .rec-title{font-family:var(--cheska-display);font-size:19.5px;line-height:1.12;font-weight:600;letter-spacing:-.016em} .rec{display:flex;flex-direction:column;min-height:0} .rec-body{display:flex;flex:1;flex-direction:column;padding:10px 10px 11px} .rec-body strong{font-size:11.6px;line-height:1.3;font-weight:700;letter-spacing:-.005em} .rec-body p{font-size:9.3px;line-height:1.48;color:#6f675f;min-height:0} .rec-body p b{font-size:7.5px;letter-spacing:.09em} .rec-price{margin-top:auto;padding-top:7px;font-size:10.35px;font-weight:740} .detail-close{width:34px;height:34px;background:rgba(18,14,11,.20);border-color:rgba(255,255,255,.62);box-shadow:0 4px 16px rgba(0,0,0,.10)} .detail-close:before,.detail-close:after{width:11px;height:1px;left:11px} /* Drawer, search and footer use the same typography scale. */ .panel h2{font-family:var(--cheska-display);font-size:29px;line-height:1.08;font-weight:600;letter-spacing:-.018em} .panel a{font-size:13.8px;line-height:1.35} .searchbox{font-size:16px;line-height:1.35} .result b{font-size:13.3px}.result small{font-size:10.2px} .footer-logo{font-family:var(--cheska-ui);font-weight:620} .footer p{font-size:9.8px;line-height:1.45}.footer-strip{font-size:9.8px;line-height:1.35} .experience-title{font-size:13.8px;line-height:1.3;font-weight:700}.experience-card p{font-size:10.8px;line-height:1.56} /* Keyboard/touch polish — visible when needed, invisible otherwise. */ button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid rgba(125,90,67,.58);outline-offset:3px} @media(max-width:430px){ .wordmark{font-size:21.5px} .mosaic-copy strong{font-size:17.5px}.mosaic-card.full .mosaic-copy strong{font-size:19.2px} .mosaic-copy small{font-size:9.8px}.mosaic-card.s4 .mosaic-copy strong{font-size:15.8px}.mosaic-card.s4 .mosaic-copy small{font-size:9px} .tab{font-size:10.6px}.category-head h1{font-size:26.5px}.category-head p{font-size:9.9px} .product-name{font-size:14.6px}.product-price{font-size:9.9px} .detail h2{font-size:24.5px}.detail-desc{font-size:11.7px}.ingredients{font-size:10.8px} .rec-title{font-size:18.5px}.rec-body strong{font-size:11.3px}.rec-body p{font-size:9.1px} } /* ========================================================= CHESKA QR MENU 0.7.18 — FINAL VISUAL POLISH + MEDIA FALLBACK Public-only finishing pass. Admin/Firebase behavior is unchanged. ========================================================= */ :root{ --cheska-ui:"Avenir Next","SF Pro Text","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif; --cheska-display:"Iowan Old Style","Baskerville","Palatino Linotype",Georgia,serif; --cheska-ivory:#fffdf9; --cheska-cream:#f7f2eb; --cheska-cocoa:#4d3428; --cheska-ink:#181411; --cheska-muted:#786f67; } /* Product grid — equal product opportunity, cleaner editorial finish. */ .category-wrap{padding-top:22px} .category-head{margin-bottom:19px} .category-head h1{font-size:27.5px;line-height:1.04;font-weight:600;letter-spacing:-.022em} .category-head p{font-size:10.2px;line-height:1.52;color:#7c746d} .product-grid{gap:10px} .product-card{aspect-ratio:.86;border-radius:13px;background:#eee7df;box-shadow:0 5px 18px rgba(46,32,24,.05)} .product-card:after{background:linear-gradient(180deg,rgba(10,8,7,0) 28%,rgba(10,8,7,.07) 57%,rgba(10,8,7,.69) 100%)} .product-info{left:12px;right:11px;bottom:11px} .product-name{font-size:15px;line-height:1.16;font-weight:700;letter-spacing:-.012em} .product-price{margin-top:6px;padding:4px 8px 4.5px;border-radius:999px;background:rgba(255,253,249,.94);box-shadow:0 2px 10px rgba(18,13,10,.08);font-size:10.1px;line-height:1;font-weight:720;color:#271f1a} /* Intentional Cheska fallback: never expose a broken/grey media tile. */ .placeholder{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:22px;text-align:center;overflow:hidden;background: radial-gradient(circle at 78% 18%,rgba(255,255,255,.46),transparent 24%), radial-gradient(circle at 18% 82%,rgba(126,88,64,.13),transparent 30%), linear-gradient(145deg,#eee6dd 0%,#ded2c6 52%,#cdbdae 100%);color:#503c31} .placeholder:before{content:"";position:absolute;inset:-20%;background:linear-gradient(118deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 61%);transform:rotate(-8deg);pointer-events:none} .placeholder-mark,.placeholder-name{position:relative;z-index:1} .placeholder-mark{font-family:var(--cheska-ui);font-size:10px;line-height:1;font-weight:700;letter-spacing:.28em;text-indent:.28em;color:#745744} .placeholder-name{max-width:88%;font-family:var(--cheska-display);font-size:17px;line-height:1.16;font-weight:600;letter-spacing:-.015em;color:#45342b} .product-card .placeholder{color:#503c31} .product-card .placeholder + .product-info{color:#fff} .rec-media .placeholder,.detail-media .placeholder{position:relative;inset:auto} .detail-media .placeholder{height:100%;min-height:100%} .rec-media .placeholder{height:100%;padding:12px;gap:6px}.rec-media .placeholder-mark{font-size:7px}.rec-media .placeholder-name{font-size:12px} /* Horizontal category rail: readable, touchable, softly fades at the edges. */ .category-toolbar{position:sticky;overflow:hidden} .tabs{scrollbar-width:none;-ms-overflow-style:none;padding-left:14px;padding-right:24px;gap:23px} .tabs::-webkit-scrollbar{display:none} .tab{font-size:10.8px;line-height:1.2;font-weight:520;color:#8a8179;padding-bottom:11px;white-space:nowrap} .tab.active{font-weight:700;color:#1d1814} /* Detail modal — slightly quieter chrome, clearer facts, integrated content. */ dialog{border-radius:19px} .detail-close{width:31px;height:31px;right:11px;top:11px;background:rgba(17,13,10,.16);border-color:rgba(255,255,255,.58);box-shadow:0 3px 12px rgba(0,0,0,.08)} .detail-close:before,.detail-close:after{width:10px;left:10px;background:rgba(255,255,255,.92)} .detail-scroll{padding-bottom:17px} .detail h2{font-size:25px;line-height:1.08;font-weight:600;letter-spacing:-.018em} .detail-price{font-size:12px;font-weight:720} .detail-desc{font-size:11.9px;line-height:1.66;color:#685f58;margin-bottom:16px} .facts{padding:9px 5px 10px;background:#f7f2eb} .fact{min-height:38px;gap:4px;color:#443a33} .fact span{font-size:10.4px;line-height:1;font-weight:720} .fact:after{font-size:8px;line-height:1.05;letter-spacing:.075em;font-weight:700;color:#887a70} .label{margin-top:15px;font-size:8.8px;letter-spacing:.13em;color:#76685e} .chips{gap:6px}.chip{padding:5.5px 9px 5.5px 17px;font-size:9.25px;color:#4b413a;background:#faf6f0} .ingredients{padding:10px 1px 11px;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid rgba(101,76,59,.13);font-size:10.9px;line-height:1.62;color:#675f58} /* Recommendations read as pairing notes, not mechanical upsell cards. */ .rec-title{font-size:19px;line-height:1.15;margin-bottom:11px} .recs{gap:9px} .rec{background:#fbf7f1;box-shadow:inset 0 0 0 1px #eadfd5,0 3px 12px rgba(44,32,24,.03);cursor:pointer} .rec:focus-visible{outline:2px solid rgba(125,90,67,.5);outline-offset:2px} .rec-media{height:114px} .rec-body{padding:10px 10px 11px} .rec-body strong{font-size:11.7px;line-height:1.28} .rec-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0 0;min-height:27px;font-size:9.25px;line-height:1.45;color:#6d645d} .rec-price{padding-top:8px;font-size:10.3px;font-weight:740} /* Category ending — a quiet return, not a web-page dead end. */ .end{position:relative;padding:42px 20px 25px;color:#8e847b} .end:before{content:"";display:block;width:24px;height:1px;margin:0 auto 14px;background:#a2826d;opacity:.55} .end-kicker{font-size:9px;line-height:1;font-weight:700;letter-spacing:.22em;text-indent:.22em;color:#6b5b50} .end button{margin-top:12px;border:0;border-bottom:1px solid rgba(108,87,73,.38);padding:0 0 3px;background:transparent;color:#65564c;font-size:10.2px;font-weight:600} /* Footer is an understated signature. */ .footer{padding-top:30px}.footer p{margin-top:8px;margin-bottom:20px;color:#aaa198}.footer-strip{font-size:9.6px;font-weight:590} @media(max-width:430px){ .category-toolbar:after{content:"";position:absolute;right:0;top:0;bottom:0;width:22px;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,253,249,0),rgba(255,253,249,.98) 76%)} .tabs{gap:21px;padding-right:32px} .tab{font-size:10.5px} .category-head h1{font-size:26px}.category-head p{font-size:9.95px} .product-grid{gap:8px}.product-name{font-size:14.5px}.product-price{font-size:9.85px} .placeholder-name{font-size:15.5px}.placeholder-mark{font-size:9px} .detail h2{font-size:23.5px}.detail-desc{font-size:11.6px} .fact span{font-size:10.1px}.fact:after{font-size:7.8px} .rec-body strong{font-size:11.3px}.rec-body p{font-size:9px} } /* ========================================================= 0.7.19 — LOCKED VISUAL BASELINE Only micro-polish below this line. Structural layout and menu behavior are considered the stable Cheska baseline. ========================================================= */ /* Category ending: compact and quiet; footer already carries the brand signature. */ .end{padding:24px 20px 22px!important;min-height:0!important} .end:before{width:20px!important;margin:0 auto 11px!important;opacity:.42!important} .end button{margin-top:0!important;padding-bottom:3px!important;font-size:10.4px!important;color:#62544b!important;border-bottom-color:rgba(98,84,75,.28)!important} /* Detail content: keep the ingredient block integrated and slightly tighter. */ #ingredientsLabel.label{margin-top:13px!important;margin-bottom:5px!important} .ingredients{padding-top:6px!important;padding-bottom:10px!important;line-height:1.58!important} /* Recommendation copy: readable but disciplined, max two lines. */ .rec-body p{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:27px!important;font-size:9.45px!important;line-height:1.48!important;color:#675f58!important} .rec-body strong{line-height:1.3!important} /* Price chips: quieter, more integrated with the media card. */ .product-price{background:rgba(252,249,244,.94)!important;border:1px solid rgba(79,63,52,.08)!important;box-shadow:0 2px 8px rgba(18,13,10,.045)!important;padding:4px 8px 4.5px!important} /* Footer tagline remains subtle; content is now admin-configurable. */ .footer-tagline{max-width:340px;margin-left:auto!important;margin-right:auto!important} @media(max-width:430px){ .end{padding:21px 18px 20px!important} .rec-body p{font-size:9.15px!important;line-height:1.46!important} } /* 0.7.22 maintenance: the public mosaic rhythm already assigns s6 to categories 7–8. 0.7.19 CSS did not define s6, so those cards collapsed to one 12-column cell. Keep the existing visual system and make the final pair a balanced 6/6 row. */ .mosaic-card.s6{grid-column:span 6} .mosaic-card.s6 .mosaic-copy strong{font-size:17.2px} .mosaic-card.s6 .mosaic-copy small{font-size:9.35px;line-height:1.38;max-width:100%} @media(max-width:390px){ .mosaic-card.s6{height:clamp(190px,51vw,211px)} .mosaic-card.s6 .mosaic-copy strong{font-size:15.9px} .mosaic-card.s6 .mosaic-copy small{font-size:8.8px} } /* 0.7.23 — Koşullu alerjen / eser / ürün özelliği grupları */ #allergenTraceLabel,#productFeaturesLabel{margin-top:13px}.product-features .chip{background:#f7f5ef}.product-features .chip:before{background:#7b806d} /* 0.7.31 — çok dilli menü, manuel ürün rozetleri ve doğrulanmış alerjen durumu */ .lang{appearance:none;font-family:inherit;display:inline-flex;align-items:center;gap:5px;cursor:pointer} .lang:focus-visible,.language-option:focus-visible,.drawer-language:focus-visible{outline:2px solid rgba(255,255,255,.92);outline-offset:2px} .product-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 1px} .product-badges:empty{display:none} .product-badges.compact{position:absolute;z-index:3;left:9px;right:9px;top:9px;margin:0;align-items:flex-start;flex-direction:column;gap:4px;pointer-events:none} .product-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;padding:5px 8px;border:1px solid rgba(255,255,255,.36);border-radius:999px;background:rgba(32,24,20,.62);backdrop-filter:blur(9px);color:#fff;font-size:8.8px;font-weight:760;line-height:1.1;letter-spacing:.015em;box-shadow:0 4px 14px rgba(0,0,0,.12)} .product-badges:not(.compact) .product-badge{border-color:#e6d8cc;background:#fbf5ef;color:#5f4739;box-shadow:none;font-size:9.4px} .product-badge.badge-signature{background:rgba(116,38,34,.78)} .product-badges:not(.compact) .product-badge.badge-signature{background:#7b2d28;color:#fff;border-color:#7b2d28} .product-badge.badge-bestseller{background:rgba(73,49,30,.76)} .product-badges.compact .product-badge span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .allergen-card-marker{position:absolute;z-index:4;top:9px;right:9px;display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(255,255,255,.7);border-radius:10px 10px 10px 3px;background:rgba(43,91,57,.88);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:900;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.14);pointer-events:none} .allergen-clear{display:none;align-items:center;gap:9px;margin:12px 0 2px;padding:10px 11px;border:1px solid #d9e6db;border-radius:10px;background:#f4faf5;color:#31583d;font-size:10.3px;font-weight:650;line-height:1.4} .allergen-clear.unknown{border-color:#eadfce;background:#fbf8f2;color:#695d50} .allergen-clear-icon{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border:1px solid currentColor;border-radius:50%;font-size:12px;font-weight:850} .drawer-language{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:13px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;color:#171411;cursor:pointer;font-size:12px} .drawer-language b{font-weight:750;color:#6d6057} .language-picker .panel{min-height:auto;height:auto;max-height:86svh;margin-top:auto;border-radius:20px 20px 0 0;padding-top:66px;padding-bottom:max(26px,env(safe-area-inset-bottom))} .language-options{display:grid;gap:7px} .language-option{width:100%;display:grid;grid-template-columns:38px 1fr 22px;align-items:center;gap:9px;padding:12px 13px;border:1px solid #e7dfd7;border-radius:11px;background:#fff;color:#241e1a;text-align:left;cursor:pointer} .language-option>span{display:grid;place-items:center;width:32px;height:25px;border-radius:7px;background:#f3eee8;color:#746155;font-size:9px;font-weight:800;letter-spacing:.08em} .language-option>b{font-size:12px}.language-option>i{text-align:center;color:#7b2d28;font-style:normal;font-weight:900} .language-option.active{border-color:#b8967e;background:#fcf8f4;box-shadow:inset 0 0 0 1px rgba(184,150,126,.18)} .no-results{color:#777;font-size:12px} html[dir="rtl"] .category-head p{text-align:left} html[dir="rtl"] .product-info,html[dir="rtl"] .mosaic-copy{text-align:right} html[dir="rtl"] .product-badges.compact{left:9px;right:9px;align-items:flex-end} html[dir="rtl"] .allergen-card-marker{left:9px;right:auto} html[dir="rtl"] .detail-top,html[dir="rtl"] .detail-scroll{text-align:right} html[dir="rtl"] .language-option{text-align:right;grid-template-columns:22px 1fr 38px} html[dir="rtl"] .language-option>span{grid-column:3}html[dir="rtl"] .language-option>b{grid-column:2;grid-row:1}html[dir="rtl"] .language-option>i{grid-column:1;grid-row:1} @media(max-width:390px){ .product-badge{font-size:7.8px;padding:4px 6px;gap:4px} .product-badges.compact{left:7px;right:7px;top:7px} .allergen-card-marker{top:7px;right:7px;width:25px;height:25px} html[dir="rtl"] .allergen-card-marker{left:7px;right:auto} } /* 0.7.32 — dil düğmesi, ürün detayı keşfedilebilirliği ve çevrilebilir bilgi başlıkları */ .lang{height:30px;padding:0 10px;gap:6px;justify-content:center;line-height:1} .lang-globe,.lang-code{display:inline-flex;align-items:center} .lang-globe svg{width:13px;height:13px} .lang-globe svg,.lang-chevron{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .lang-chevron{width:9px;height:9px;transform:translateY(.5px)} .lang-code{font-size:10px;font-weight:720;letter-spacing:.05em} .detail-hint{display:grid;grid-template-columns:24px minmax(0,1fr) 26px;align-items:center;gap:9px;margin:-5px 2px 15px;padding:9px 9px 9px 10px;border:1px solid #e7ddd3;border-radius:12px;background:#fbf7f2;color:#65594f;font-size:9.6px;line-height:1.45;box-shadow:0 4px 16px rgba(53,38,27,.04)} .detail-hint[hidden]{display:none} .detail-hint-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#7b2d28;color:#fff;font-family:Georgia,serif;font-size:13px;font-weight:700} #detailHintClose{appearance:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#8b7c70;font:17px/1 Arial,sans-serif;cursor:pointer} #detailHintClose:focus-visible{outline:2px solid #7b2d28;outline-offset:2px} .product-detail-cue{display:flex;align-items:center;gap:4px;margin-top:7px;color:rgba(255,255,255,.94);font-size:8px;line-height:1;letter-spacing:.01em;text-shadow:0 1px 4px rgba(0,0,0,.35)} .product-detail-cue>span{display:grid;place-items:center;width:13px;height:13px;border:1px solid rgba(255,255,255,.82);border-radius:50%;font-family:Georgia,serif;font-size:8px;font-weight:700} .product-detail-cue>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:680} .product-detail-cue>i{font-style:normal;font-size:12px;line-height:1;transform:translateY(-.5px)} html[dir="rtl"] .detail-hint{text-align:right;grid-template-columns:26px minmax(0,1fr) 24px} html[dir="rtl"] .detail-hint-icon{grid-column:3;grid-row:1} html[dir="rtl"] #detailHintText{grid-column:2;grid-row:1} html[dir="rtl"] #detailHintClose{grid-column:1;grid-row:1} html[dir="rtl"] .product-detail-cue>i{transform:translateY(-.5px) scaleX(-1)} /* ========================================================= CHESKA QR MENU 0.7.33 — DETAIL & PAIRING EXPERIENCE Public visual/interaction layer only. Data/admin/Firestore unchanged. ========================================================= */ /* 0.7.32 first-use hint is retired: the card CTA now explains itself. */ .detail-hint{display:none!important} /* Product-card detail CTA: calm, readable and language-safe. */ .product-detail-cue{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:8px;padding:6px 8px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(18,14,11,.28);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#fff;font-family:var(--cheska-ui);font-size:9.2px;line-height:1;font-weight:660;letter-spacing:.005em;text-shadow:0 1px 4px rgba(0,0,0,.22);box-shadow:0 2px 8px rgba(0,0,0,.07)} .product-detail-cue>b{min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;font-weight:660} .product-detail-cue>i{flex:0 0 auto;font-style:normal;font-size:12px;line-height:1;transform:none;opacity:.9} html[dir="rtl"] .product-detail-cue{flex-direction:row-reverse} html[dir="rtl"] .product-detail-cue>i{transform:scaleX(-1)} /* "Contains none..." is informational, not a green approval badge. */ .allergen-card-marker{display:none!important} .allergen-clear.none-listed{display:flex;align-items:center;padding:8px 10px;border:1px solid #e8dfd6;border-radius:10px;background:#faf7f2;color:#6d6259;font-size:9.4px;line-height:1.35} .allergen-clear.none-listed .allergen-clear-icon{display:none!important} /* Pairing header shows the number of available suggestions at first glance. */ .rec-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px} .rec-heading[style*="display: none"]{display:none!important} .rec-title{margin-bottom:0!important} .rec-count{flex:0 0 auto;color:#9a8d82;font-size:8.8px;line-height:1;font-weight:680;letter-spacing:.02em;white-space:nowrap} /* Pairings are horizontal editorial cards. The next card deliberately peeks in. */ .recs{display:grid;grid-auto-flow:column;grid-auto-columns:84%;align-items:stretch;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1px;overscroll-behavior-inline:contain;scrollbar-width:none;padding:1px 8% 3px 0} .recs::-webkit-scrollbar{display:none} .recs.single{grid-auto-columns:100%;padding-right:0;overflow:hidden;scroll-snap-type:none} .rec{display:grid;grid-template-columns:92px minmax(0,1fr);min-height:138px;scroll-snap-align:start;scroll-snap-stop:always;border-radius:14px;overflow:hidden;background:#f8f4ee;box-shadow:inset 0 0 0 1px #e8dfd6,0 5px 17px rgba(44,32,24,.04);cursor:pointer} .rec-media{height:100%;min-height:138px;background:#ddd;overflow:hidden} .rec-media img,.rec-media .placeholder{width:100%;height:100%;object-fit:cover;display:block} .rec-body{display:flex;min-width:0;flex-direction:column;padding:12px 12px 11px} .rec-body strong{font-size:12.1px;font-weight:720;line-height:1.28;color:#211b17} .rec-body p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;min-height:0!important;margin:7px 0 0;font-size:9.25px;line-height:1.48;color:#746a63;white-space:normal;word-break:normal} .rec-price{margin-top:auto;padding-top:8px;font-size:10.3px;font-weight:760;color:#312720} .rec-progress{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:11px;min-height:12px;color:#91867c} .rec-progress[hidden]{display:none} .rec-dots{display:flex;align-items:center;gap:5px} .rec-dot{display:block;width:4px;height:4px;border-radius:50%;background:#d2c8bf;transition:width .2s ease,background .2s ease,border-radius .2s ease} .rec-dot.active{width:13px;border-radius:999px;background:#7b2d28} .rec-page{font-size:8.3px;line-height:1;font-weight:680;letter-spacing:.045em;min-width:30px} /* Recommended products open in a dedicated second layer. The parent modal stays untouched below. */ #recommendationDialog{width:min(90vw,398px);max-height:88svh;border-radius:19px;background:var(--cheska-ivory);box-shadow:0 34px 100px rgba(20,14,10,.35)} #recommendationDialog::backdrop{background:rgba(24,19,16,.25);backdrop-filter:blur(3px)} #recommendationDialog .detail{max-height:88svh} #recommendationDialog .detail-media{height:min(38svh,290px);min-height:210px} .recommendation-back{position:absolute;z-index:3;left:12px;top:12px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 66px);height:35px;padding:0 11px 0 9px;border:1px solid rgba(255,255,255,.62);border-radius:999px;background:rgba(18,14,11,.24);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.11);cursor:pointer;font-family:var(--cheska-ui);font-size:9.8px;line-height:1;font-weight:650} .recommendation-back-arrow{font-size:15px;line-height:1;transform:translateY(-.5px)} #recommendationBackLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[dir="rtl"] .recommendation-back{left:auto;right:12px;max-width:calc(100% - 66px);flex-direction:row-reverse} html[dir="rtl"] #recommendationDialog .detail-close{right:auto;left:12px} html[dir="rtl"] .recommendation-back-arrow{transform:translateY(-.5px) scaleX(-1)} @media(max-width:390px){ .product-detail-cue{font-size:8.8px;padding:5px 7px;gap:5px} .recs{grid-auto-columns:86%;padding-right:7%} .recs.single{grid-auto-columns:100%;padding-right:0} .rec{grid-template-columns:84px minmax(0,1fr);min-height:140px} .rec-media{min-height:140px} .rec-body{padding:11px 10px 10px} .rec-body p{font-size:9px;line-height:1.5} } /* ========================================================= CHESKA QR MENU 0.7.36 — QUIETER PRODUCT CARD CTA The price stays the visual anchor; View Details becomes a subtle text cue. ========================================================= */ .product-detail-cue{ display:flex!important; width:max-content; max-width:100%; align-items:center; gap:5px; margin-top:6px; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important; color:rgba(255,255,255,.78); font-family:var(--cheska-ui); font-size:8.15px; line-height:1.1; font-weight:560; letter-spacing:.012em; text-shadow:0 1px 5px rgba(0,0,0,.34); } .product-detail-cue>b{ min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap; font-weight:560; } .product-detail-cue>i{ flex:0 0 auto; font-style:normal; font-size:10px; line-height:1; opacity:.72; transform:translateY(-.2px); } .product-price{ position:relative; z-index:1; } html[dir="rtl"] .product-detail-cue{flex-direction:row-reverse} html[dir="rtl"] .product-detail-cue>i{transform:translateY(-.2px) scaleX(-1)} @media(max-width:390px){ .product-detail-cue{font-size:7.85px;gap:4px;margin-top:5px} .product-detail-cue>i{font-size:9.5px} } /* ========================================================= CHESKA QR MENU 0.7.37 — STRICT FRESH MEDIA GATE Old cached photo/video pixels are never painted before the current publish is verified. ========================================================= */ .media-stage-placeholder{z-index:0!important;pointer-events:none} .hero-media>.media-stage-placeholder,.mosaic-card>.media-stage-placeholder,.product-card>.media-stage-placeholder,.detail-media>.media-stage-placeholder{position:absolute!important;inset:0!important;width:100%!important;height:100%!important} .media-pending{opacity:0!important} .media-ready{opacity:1!important;transition:opacity .12s ease} html.media-revalidating .hero-media>img,html.media-revalidating .hero-media>video,html.media-revalidating .mosaic-card>img,html.media-revalidating .mosaic-card>video,html.media-revalidating .product-card>img,html.media-revalidating .product-card>video,html.media-revalidating .detail-media>img,html.media-revalidating .detail-media>video{opacity:0!important} @media(prefers-reduced-motion:reduce){.media-ready{transition:none}} /* 0.7.38 performance pass -------------------------------------------------- - Moving video is never run through CSS filters: full-screen filtered video is expensive on mobile GPUs. Existing gradient overlays keep the tone. - Video starts from a current poster, then crossfades only after playback. - Off-screen cards can skip layout/paint work until they approach viewport. */ .hero-media>video,.mosaic-card>video,.product-card>video,.detail-media>video{filter:none!important;transform:none!important} .lazy-video-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;opacity:0;transition:opacity .18s ease;background:#d9d1c8} .lazy-video-media.media-ready{opacity:1} .video-poster{transition:opacity .2s ease!important} .video-poster.video-poster-retiring,.video-trigger.video-poster-retiring{opacity:0!important} @supports (content-visibility:auto){ .mosaic-card,.product-card{content-visibility:auto;contain-intrinsic-size:auto 220px} } @media(prefers-reduced-motion:reduce){.lazy-video-media{transition:none}} /* 0.7.45 — Product video compositing guard ------------------------------- Mobile WebKit/Chromium can promote an actively playing