/* ═══════════════════════════════════════════════════════════════════ NRI Outpost — Diet Preference (site-wide) Pill in nav + popover + cities banner. State values on : 'all' (default) | 'veg' | 'jain' | 'sattvik' ═══════════════════════════════════════════════════════════════════ */ .dp-pill-wrap { position: relative; display: inline-block; font-family: inherit; } /* ── Pill in nav ─────────────────────────────────────────────── */ .dp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; line-height: 1; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .dp-pill:hover, .dp-pill.is-open { background: var(--paper); border-color: var(--ink-3); color: var(--ink); } .dp-pill[data-pref="all"] { color: var(--ink-3); } .dp-pill[data-pref="all"] .dp-leaf { display: none; } .dp-leaf { display: inline-flex; align-items: center; justify-content: center; color: var(--saffron); margin-left: -1px; } .dp-leaf svg { width: 13px; height: 13px; display: block; } .dp-label { letter-spacing: 0.005em; } .dp-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); opacity: 0.55; margin-left: 2px; } /* ── Popover ─────────────────────────────────────────────────── */ .dp-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 348px; background: var(--card, var(--paper)); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(20, 20, 20, 0.18), 0 4px 12px -4px rgba(20, 20, 20, 0.08); padding: 6px; z-index: 60; opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity 0.14s ease-out, transform 0.14s ease-out; } .dp-pop.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .dp-pop-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--rule); } .dp-pop-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; line-height: 1; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; font-weight: 400; } .dp-pop-title em { font-style: italic; color: var(--saffron); } .dp-pop-sub { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 0; } .dp-options { padding: 6px 0; display: flex; flex-direction: column; gap: 1px; } .dp-opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; cursor: pointer; background: transparent; border: none; text-align: left; width: 100%; font: inherit; color: inherit; transition: background 0.12s; } .dp-opt:hover { background: var(--paper-2); } .dp-opt:focus-visible { outline: 2px solid var(--saffron); outline-offset: -2px; } .dp-opt-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-3); margin-top: 2px; position: relative; flex: none; transition: border-color 0.12s; } .dp-opt[aria-selected="true"] .dp-opt-radio { border-color: var(--saffron); } .dp-opt[aria-selected="true"] .dp-opt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--saffron); } .dp-opt-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; } .dp-opt-desc { font-size: 12px; color: var(--ink-2); margin: 3px 0 0; line-height: 1.45; } .dp-pop-foot { border-top: 1px solid var(--rule); padding: 10px 14px 12px; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; display: flex; align-items: flex-start; gap: 8px; } .dp-pop-foot-icon { flex: none; margin-top: 1px; opacity: 0.55; } .dp-pop-foot-icon svg { display: block; width: 12px; height: 12px; } /* ── Cities banner (filter is active) ────────────────────────── */ .dp-banner { margin: 24px 0 0; padding: 14px 18px; background: color-mix(in oklab, var(--saffron) 7%, var(--paper-2)); border: 1px solid color-mix(in oklab, var(--saffron) 28%, var(--rule)); border-radius: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } .dp-banner-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--saffron); color: var(--paper); display: flex; align-items: center; justify-content: center; flex: none; } .dp-banner-icon svg { display: block; width: 16px; height: 16px; } .dp-banner-body { flex: 1; min-width: 220px; } .dp-banner-body strong { color: var(--ink); font-weight: 600; } .dp-banner-body em { font-family: 'Instrument Serif', Georgia, serif; color: var(--saffron); font-style: italic; font-weight: 400; font-size: 16px; } .dp-banner-body-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: block; } .dp-banner-actions { display: flex; gap: 6px; margin-left: auto; } .dp-banner-btn { font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 999px; background: transparent; border: 1px solid var(--ink-3); color: var(--ink); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .dp-banner-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .dp-banner-btn.is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .dp-banner-btn.is-primary:hover { background: var(--ink-2); border-color: var(--ink-2); } /* ── Body-level visibility rules ─────────────────────────────── */ /* When any non-default diet pref is active, hide the non-veg restaurant sections on city pages. Pure CSS — no JS needed for the toggle. */ body[data-diet-pref="veg"] .cs.nonveg, body[data-diet-pref="jain"] .cs.nonveg, body[data-diet-pref="sattvik"] .cs.nonveg { display: none; } /* ── Mobile adjustments ──────────────────────────────────────── */ @media (max-width: 640px) { .dp-pill { padding: 7px 10px; font-size: 12px; } /* Hide the "Diet: " prefix in default state on small screens to save space */ .dp-pill[data-pref="all"] .dp-label::before { content: "🥗 "; } .dp-pill[data-pref="all"] .dp-label-prefix { display: none; } .dp-pop { position: fixed; top: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px); right: 12px; left: 12px; width: auto; max-width: none; transform-origin: bottom center; } .dp-banner { padding: 12px 14px; font-size: 13px; align-items: flex-start; } .dp-banner-actions { margin-left: 0; width: 100%; } .dp-banner-btn { flex: 1; text-align: center; } }