/* ========================================================================== NAMASTE ANGKOR: culture styles (1.7.0) - GENERATED, then hand-maintained. One product, three cultural identities. overrides the theme's design tokens (--nak-*), so every component re-skins. Palette, type and ornament follow the approved three-styles comp. Fusion is the default and the brand's true identity: Angkor Wat was built as a Hindu temple to Vishnu, so the lotus, the Naga and the Reamker already belong to both traditions. Notes - Ornaments are CSS masks over data-URI SVGs, so they take the current text colour / gradient and swap with the style. No extra markup, no requests. - Rozha One and Marcellus ship one weight: font-synthesis is switched off on display text so the browser never fakes a bold or italic. - Selectors for the KAT menu are prefixed with `html` so they out-rank KAT's own stylesheet, which loads after the theme's. ========================================================================== */ :root { --nak-khmer: "Noto Serif Khmer", serif; --nak-disp-weight: 600; --nak-title-spacing: 0; --nak-spicy: #b0203c; --nak-veg: #55703f; --nak-border: rgba(122,31,43,.15); --nak-gold-line: linear-gradient(90deg, #e8871e, #f2b035); --nak-texture: none; --nak-motif-indian: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.4%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M20%2020%20Q28.45%2016.91%2031.00%2020.00%20Q28.45%2023.09%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q28.16%2023.80%2027.78%2027.78%20Q23.80%2028.16%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q23.09%2028.45%2020.00%2031.00%20Q16.91%2028.45%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q16.20%2028.16%2012.22%2027.78%20Q11.84%2023.80%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q11.55%2023.09%209.00%2020.00%20Q11.55%2016.91%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q11.84%2016.20%2012.22%2012.22%20Q16.20%2011.84%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q16.91%2011.55%2020.00%209.00%20Q23.09%2011.55%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q23.80%2011.84%2027.78%2012.22%20Q28.16%2016.20%2020%2020Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2217%22%20stroke-dasharray%3D%221.5%203%22%2F%3E%3C%2Fsvg%3E"); --nak-rule-indian: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2030%22%3E%3Crect%20x%3D%220%22%20y%3D%2213.5%22%20width%3D%2267.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%22113.0%22%20y%3D%2213.5%22%20width%3D%2267.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Csvg%20x%3D%2275.0%22%20y%3D%220%22%20width%3D%2230.0%22%20height%3D%2230%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.61%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Cg%3E%3Cpath%20d%3D%22M20%2020%20Q28.45%2016.91%2031.00%2020.00%20Q28.45%2023.09%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q28.16%2023.80%2027.78%2027.78%20Q23.80%2028.16%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q23.09%2028.45%2020.00%2031.00%20Q16.91%2028.45%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q16.20%2028.16%2012.22%2027.78%20Q11.84%2023.80%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q11.55%2023.09%209.00%2020.00%20Q11.55%2016.91%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q11.84%2016.20%2012.22%2012.22%20Q16.20%2011.84%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q16.91%2011.55%2020.00%209.00%20Q23.09%2011.55%2020%2020Z%22%2F%3E%3Cpath%20d%3D%22M20%2020%20Q23.80%2011.84%2027.78%2012.22%20Q28.16%2016.20%2020%2020Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2217%22%20stroke-dasharray%3D%221.5%203%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E"); --nak-crest-indian: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2026%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%2026h300V14c-10%200-15-8-25-8s-15%208-25%208-15-8-25-8-15%208-25%208-15-8-25-8-15%208-25%208-15-8-25-8-15%208-25%208-15-8-25-8-15%208-25%208-15-8-25-8-15%208-25%208Z%22%2F%3E%3C%2Fsvg%3E"); --nak-motif-khmer: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M24%203c1%202%201%203.5%200%205.5-1-2-1-3.5%200-5.5Z%22%2F%3E%3Cpath%20d%3D%22M10%2010c.7%201.2.7%202%200%203.2M38%2010c-.7%201.2-.7%202%200%203.2%22%2F%3E%3Cpath%20d%3D%22M24%208v6M10%2013v5M38%2013v5%22%2F%3E%3Cpath%20d%3D%22M4%2037V22l6-4%208-5%206%204%206-4%208%205%206%204v15Z%22%2F%3E%3Cpath%20d%3D%22M20%2037v-6h8v6%22%2F%3E%3C%2Fsvg%3E"); --nak-rule-khmer: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2030%22%3E%3Crect%20x%3D%220%22%20y%3D%2213.5%22%20width%3D%2264.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%22116.0%22%20y%3D%2213.5%22%20width%3D%2264.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Csvg%20x%3D%2272.0%22%20y%3D%220%22%20width%3D%2236.0%22%20height%3D%2230%22%20viewBox%3D%220%200%2048%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.72%22%3E%3Cpath%20d%3D%22M24%203c1%202%201%203.5%200%205.5-1-2-1-3.5%200-5.5Z%22%2F%3E%3Cpath%20d%3D%22M10%2010c.7%201.2.7%202%200%203.2M38%2010c-.7%201.2-.7%202%200%203.2%22%2F%3E%3Cpath%20d%3D%22M24%208v6M10%2013v5M38%2013v5%22%2F%3E%3Cpath%20d%3D%22M4%2037V22l6-4%208-5%206%204%206-4%208%205%206%204v15Z%22%2F%3E%3Cpath%20d%3D%22M20%2037v-6h8v6%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E"); --nak-crest-khmer: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2026%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%2026h300V16H0Zm150-16%208%206h-16Zm-40%202%206%204h-12Zm80%200%206%204h-12Z%22%2F%3E%3C%2Fsvg%3E"); --nak-motif-fusion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M20%208c2%204%202%208%200%2012-2-4-2-8%200-12Z%22%2F%3E%3Cpath%20d%3D%22M20%2020c-4-2-8-2-12%200%203%203%207%204%2012%204M20%2020c4-2%208-2%2012%200-3%203-7%204-12%204%22%2F%3E%3Cpath%20d%3D%22M13%2012c1%204%203%206%207%208M27%2012c-1%204-3%206-7%208%22%2F%3E%3Cpath%20d%3D%22M6%2022c4%206%2010%209%2014%209s10-3%2014-9%22%2F%3E%3C%2Fsvg%3E"); --nak-rule-fusion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2030%22%3E%3Crect%20x%3D%220%22%20y%3D%2213.5%22%20width%3D%2267.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%22113.0%22%20y%3D%2213.5%22%20width%3D%2267.0%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Csvg%20x%3D%2275.0%22%20y%3D%220%22%20width%3D%2230.0%22%20height%3D%2230%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.72%22%3E%3Cpath%20d%3D%22M20%208c2%204%202%208%200%2012-2-4-2-8%200-12Z%22%2F%3E%3Cpath%20d%3D%22M20%2020c-4-2-8-2-12%200%203%203%207%204%2012%204M20%2020c4-2%208-2%2012%200-3%203-7%204-12%204%22%2F%3E%3Cpath%20d%3D%22M13%2012c1%204%203%206%207%208M27%2012c-1%204-3%206-7%208%22%2F%3E%3Cpath%20d%3D%22M6%2022c4%206%2010%209%2014%209s10-3%2014-9%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E"); --nak-crest-fusion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2026%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M0%2026h300V15c-25%200-25-9-50-9s-25%209-50%209-25-9-50-9-25%209-50%209-25-9-50-9-25%209-50%209Z%22%2F%3E%3C%2Fsvg%3E"); --nak-motif: var(--nak-motif-fusion); --nak-rule: var(--nak-rule-fusion); --nak-crest: var(--nak-crest-fusion); } html[data-style="fusion"] { --nak-cream: #fbf4e6; --nak-cream-deep: #f4ead4; --nak-white: #fffdf8; --nak-ink: #241005; --nak-ink-soft: #5b4326; --nak-lotus: #7a1f2b; --nak-lotus-deep: #5e141d; --nak-saffron: #e8871e; --nak-turmeric: #f2b035; --nak-spicy: #b0203c; --nak-veg: #55703f; --nak-stone: #c9bba0; --nak-stone-soft: #e4dcc9; --nak-border: rgba(122,31,43,.15); --nak-display: "Fraunces","Noto Serif Khmer",Georgia,serif; --nak-body: "Karla","Segoe UI",system-ui,sans-serif; --nak-disp-weight: 600; --nak-title-spacing: 0; --nak-gold-line: linear-gradient(90deg,#e8871e,#f2b035); --nak-texture: radial-gradient(1100px 380px at 50% -8%,rgba(232,135,30,.09),transparent 60%); --nak-motif: var(--nak-motif-fusion); --nak-rule: var(--nak-rule-fusion); --nak-crest: var(--nak-crest-fusion); } html[data-style="indian"] { --nak-cream: #fbf1de; --nak-cream-deep: #f6e6c8; --nak-white: #fffaf0; --nak-ink: #3a0f14; --nak-ink-soft: #7d3a2c; --nak-lotus: #a01b2e; --nak-lotus-deep: #7a1220; --nak-saffron: #f2990f; --nak-turmeric: #e0a326; --nak-spicy: #c0392b; --nak-veg: #1f6b52; --nak-stone: #e8cf9c; --nak-stone-soft: #f4e5c1; --nak-border: rgba(160,27,46,.20); --nak-display: "Rozha One","Noto Serif Khmer",Georgia,serif; --nak-body: "Mukta","Segoe UI",system-ui,sans-serif; --nak-disp-weight: 400; --nak-title-spacing: .005em; --nak-gold-line: linear-gradient(90deg,#c9a227,#f2990f,#c9a227); --nak-texture: repeating-linear-gradient(45deg,rgba(201,162,39,.05) 0 1px,transparent 1px 16px),repeating-linear-gradient(-45deg,rgba(201,162,39,.05) 0 1px,transparent 1px 16px),radial-gradient(900px 360px at 50% -6%,rgba(242,153,15,.10),transparent 60%); --nak-motif: var(--nak-motif-indian); --nak-rule: var(--nak-rule-indian); --nak-crest: var(--nak-crest-indian); } html[data-style="khmer"] { --nak-cream: #f2e6cb; --nak-cream-deep: #e9dabb; --nak-white: #fbf3de; --nak-ink: #2b1c10; --nak-ink-soft: #6f4a2e; --nak-lotus: #8a3d24; --nak-lotus-deep: #6a2c18; --nak-saffron: #c1902f; --nak-turmeric: #d9b45a; --nak-spicy: #a83a2a; --nak-veg: #4f6a34; --nak-stone: #cdbb95; --nak-stone-soft: #e4d5b0; --nak-border: rgba(138,61,36,.20); --nak-display: "Marcellus","Noto Serif Khmer",Georgia,serif; --nak-body: "Karla","Segoe UI",system-ui,sans-serif; --nak-disp-weight: 400; --nak-title-spacing: .02em; --nak-gold-line: linear-gradient(90deg,#9a6a2a,#d9b45a,#9a6a2a); --nak-texture: repeating-linear-gradient(0deg,rgba(43,28,16,.035) 0 1px,transparent 1px 7px),radial-gradient(900px 340px at 50% -6%,rgba(193,144,47,.12),transparent 60%); --nak-motif: var(--nak-motif-khmer); --nak-rule: var(--nak-rule-khmer); --nak-crest: var(--nak-crest-khmer); } /* ---------- Base: texture, type ---------- */ body { background: var(--nak-texture), var(--nak-cream); transition: background-color .4s ease, color .4s ease; } /* Single-weight display faces: never fake a bold or italic. */ html[data-style="indian"] :is(h1, h2, h3, h4, .nak-brand__lockup, .nak-brand__lockup span, .nak-story__word, .nak-dish__price, .nak-single__price, .nak-footer__wordmark, .nak-brand-os__hook, .nak-brand-os__title, .nak-brand-os__detail-name, .nak-brand-os__feature-title, .nak-feat__tab-label, .nak-feat-card__title, .nak-guardian__row-value, .nak-prose blockquote), html[data-style="khmer"] :is(h1, h2, h3, h4, .nak-brand__lockup, .nak-brand__lockup span, .nak-story__word, .nak-dish__price, .nak-single__price, .nak-footer__wordmark, .nak-brand-os__hook, .nak-brand-os__title, .nak-brand-os__detail-name, .nak-brand-os__feature-title, .nak-feat__tab-label, .nak-feat-card__title, .nak-guardian__row-value, .nak-prose blockquote) { font-synthesis: none; } h1, h2, h3, h4, .nak-brand__lockup { letter-spacing: var(--nak-title-spacing); } .nak-brand__kitchen { font-family: var(--nak-body); } [lang="km"] { font-family: var(--nak-khmer); line-height: 1.7; } /* ---------- Brand mark + section rule + eyebrow ---------- */ .nak-brand__mark { width: 34px; height: 34px; flex: 0 0 auto; align-self: center; background: var(--nak-lotus); -webkit-mask: var(--nak-motif) center / contain no-repeat; mask: var(--nak-motif) center / contain no-repeat; } .nak-brand__lockup { gap: .5em; } .nak-brand__name { gap: .5em; } .nak-section__eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .95rem; background: var(--nak-stone-soft); color: var(--nak-lotus); /* was saffron on cream: ~2.4:1, failed WCAG AA */ border-radius: 999px; font-size: .74rem; letter-spacing: .14em; } .nak-section__eyebrow::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--nak-motif) center / contain no-repeat; mask: var(--nak-motif) center / contain no-repeat; } .nak-menu-hero .nak-section__eyebrow { background: rgba(255,255,255,.08); color: var(--nak-turmeric); } .nak-section__head .nak-section__title::after { content: ""; display: block; width: 180px; height: 30px; margin: 1rem auto 0; background: var(--nak-gold-line); -webkit-mask: var(--nak-rule) center / contain no-repeat; mask: var(--nak-rule) center / contain no-repeat; } .nak-section__lede { max-width: 560px; margin: 1rem auto 0; color: var(--nak-ink-soft); } .nak-section__lede a { font-weight: 700; border-bottom: 1.5px solid transparent; } .nak-section__lede a:hover { border-bottom-color: currentColor; } /* ---------- Krama strip (Khmer only) ---------- */ .nak-krama { display: none; height: 14px; background: repeating-linear-gradient(90deg, var(--nak-lotus) 0 12px, color-mix(in srgb, var(--nak-cream) 70%, #fff) 12px 24px), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 12px, transparent 12px 24px); background-blend-mode: multiply; } html[data-style="khmer"] .nak-krama { display: block; } /* ---------- Style switch (footer of the logo hook box) ---------- Indian · Khmer · Fusion as three equal cells that span the box's full width, so the switch is always exactly as wide as the logo text above it, at every screen size and in every style's font. The active cell is the highlight: lotus fill, white text, turmeric glyph. Hidden until the boot script confirms JS, so a no-JS visitor never sees dead buttons. */ .nak-culture { display: none; } .nak-js .nak-culture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--nak-line); background: color-mix(in srgb, var(--nak-stone-soft) 55%, var(--nak-white)); } .nak-culture__btn { border: 0; border-radius: 0; cursor: pointer; background: transparent; color: var(--nak-ink-soft); font-family: var(--nak-body); font-weight: 700; font-size: 0.62rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; min-height: 26px; padding: 0 0.7em; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; transition: background 0.2s ease, color 0.2s ease; } .nak-culture__btn + .nak-culture__btn { border-left: var(--nak-line); } .nak-culture__btn:hover { color: var(--nak-ink); background: color-mix(in srgb, var(--nak-stone-soft) 60%, transparent); } .nak-culture__btn:focus-visible { outline: 2px solid var(--nak-lotus); outline-offset: -3px; } .nak-culture__btn[aria-pressed="true"] { background: var(--nak-lotus); color: var(--nak-white); } .nak-culture__btn[aria-pressed="true"] + .nak-culture__btn, .nak-culture__btn[aria-pressed="true"] { border-left-color: transparent; } .nak-culture__btn[aria-pressed="true"] .nak-culture__glyph { color: var(--nak-turmeric); } .nak-culture__glyph { width: 11px; height: 11px; background: currentColor; flex: 0 0 auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .nak-culture__glyph--indian { -webkit-mask-image: var(--nak-motif-indian); mask-image: var(--nak-motif-indian); } .nak-culture__glyph--khmer { -webkit-mask-image: var(--nak-motif-khmer); mask-image: var(--nak-motif-khmer); } .nak-culture__glyph--fusion { -webkit-mask-image: var(--nak-motif-fusion); mask-image: var(--nak-motif-fusion); } /* Box shape follows each style's type: soft for Fusion, arched for Indian, squared for Khmer. */ html[data-style="fusion"] { --nak-box-radius: 14px; } html[data-style="indian"] { --nak-box-radius: 20px; } html[data-style="khmer"] { --nak-box-radius: 4px; } html[data-style="indian"] .nak-culture__btn { letter-spacing: 0.1em; } /* Narrow phones: drop the glyphs so all three labels fit the box. */ @media (max-width: 400px) { .nak-culture__glyph { display: none; } .nak-culture__btn { padding: 0 0.4em; letter-spacing: 0.1em; font-size: 0.58rem; } } /* ---------- Hero: each style lights the scene differently ---------- */ .nak-hero__pillars::after { content: ""; position: absolute; inset: 0; pointer-events: none; } html[data-style="indian"] .nak-hero__glow { background: radial-gradient(circle, rgba(242,153,15,.40) 0%, rgba(242,153,15,.13) 35%, transparent 70%); } html[data-style="indian"] .nak-hero__pillars::after { background: repeating-linear-gradient(45deg, rgba(224,163,38,.07) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(224,163,38,.07) 0 1px, transparent 1px 18px); } html[data-style="khmer"] .nak-hero__glow { background: radial-gradient(circle, rgba(217,180,90,.34) 0%, rgba(193,144,47,.12) 35%, transparent 70%); } html[data-style="khmer"] .nak-hero__pillars::after { background: repeating-linear-gradient(0deg, rgba(217,180,90,.06) 0 1px, transparent 1px 9px); } /* ---------- Dish cards: ornamental crest along the top of the photo ---------- */ .nak-dish__media { position: relative; } .nak-dish__media::before, .kat-smart-menu--showcase .kat-smart-menu__media::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 1; pointer-events: none; background: var(--nak-saffron); opacity: .9; -webkit-mask: var(--nak-crest) 0 0 / 100% 100% no-repeat; mask: var(--nak-crest) 0 0 / 100% 100% no-repeat; } /* ---------- KAT Smart Menu: follow the theme's tokens ---------- `html` prefix: KAT's stylesheet loads after the theme's and would otherwise win on equal specificity. */ html .kat-smart-menu { --kat-sm-surface: var(--nak-white); --kat-sm-ink: var(--nak-ink); --kat-sm-muted: var(--nak-ink-soft); --kat-sm-line: var(--nak-border); --kat-sm-chip: var(--nak-cream-deep); --kat-sm-gold: var(--nak-saffron); --kat-sm-veg: var(--nak-veg); --kat-sm-spicy: var(--nak-spicy); --kat-sm-radius: 16px; font-family: var(--nak-body); } html .kat-smart-menu__card { background: var(--nak-white); border-color: var(--nak-border); border-radius: 16px; box-shadow: 0 8px 22px -14px rgba(36,16,5,.45); } html .kat-smart-menu__card:hover { transform: translateY(-5px); border-color: var(--nak-saffron); box-shadow: 0 22px 44px -22px rgba(36,16,5,.55); } html .kat-smart-menu__name { color: var(--nak-ink); font-family: var(--nak-display); font-weight: var(--nak-disp-weight); letter-spacing: var(--nak-title-spacing); font-synthesis: none; } html .kat-smart-menu__excerpt, html .kat-smart-menu__meta { color: var(--nak-ink-soft); } html .kat-smart-menu__khmer { color: var(--nak-lotus); font-family: var(--nak-khmer); } html .kat-smart-menu__price, html .kat-smart-menu__qty, html .kat-smart-menu__orderbar-total { font-family: var(--nak-display); font-weight: var(--nak-disp-weight); font-synthesis: none; } html .kat-smart-menu__section-title { font-family: var(--nak-display); font-weight: var(--nak-disp-weight); border-bottom-color: var(--nak-lotus); color: var(--nak-lotus); } html .kat-smart-menu__jump a { background: var(--nak-stone-soft); color: var(--nak-lotus); } html .kat-smart-menu__jump a:hover { background: var(--nak-lotus); color: var(--nak-white); } html .kat-smart-menu__search { background: var(--nak-white); border-color: var(--nak-stone); font-family: inherit; color: var(--nak-ink); } html .kat-smart-menu__badge { background: var(--nak-stone-soft); color: var(--nak-ink-soft); } html .kat-smart-menu__badge--tag { background: color-mix(in srgb, var(--nak-veg) 14%, var(--nak-white)); color: var(--nak-veg); } html .kat-smart-menu__tag { color: var(--nak-ink-soft); } html .kat-smart-menu__chip { font-family: var(--nak-body); } html .kat-smart-menu__add, html .kat-smart-menu__send { font-family: var(--nak-body); } html .kat-smart-menu__flag--popular { color: var(--nak-ink); } /* Keep the back-to-top button clear of the order bar while an order is open. */ body:has(.kat-smart-menu__orderbar:not([hidden])) .nak-back-to-top { bottom: 5.6rem; } @media (prefers-reduced-motion: reduce) { body { transition: none; } }