/* ========================================================================== Indian Kitchens — Liquid Glass category bar (menu.html only) Restyles the existing Bootstrap pill tabs (.ftco-search .nav-pills) into a frosted, segmented "liquid glass" control. Scoped entirely to .ftco-search, so it cannot leak into the rest of the site — everything else keeps the original Feliciano look. Loaded LAST in so it wins over css/style.css. No markup changes: the six tabs and all 68 menu cards are untouched. ========================================================================== */ .ftco-search { /* Palette anchored on the existing brand gold (#c8a97e) */ --ikt-brass: #c8a97e; --ikt-turmeric: #e8b84b; --ikt-saffron: #f0a05a; --ikt-ink: #221a12; --ikt-ink-soft: #6a5c4d; /* Fine noise, inlined as SVG — gives the glass its frosted grain, no extra HTTP request. */ --ikt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----- The glass trough ------------------------------------------------- */ .ftco-search .nav-link-wrap { position: relative; isolation: isolate; /* keeps the grain's blend inside the bar */ padding: 7px; border-radius: 999px; /* Sand-tinted rather than pure white, so the glass still reads against the theme's white page background. */ background: linear-gradient(180deg, rgba(252, 249, 244, .82), rgba(236, 227, 214, .58)); border: 1px solid rgba(255, 255, 255, .85); backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), /* top hairline */ inset 0 -1px 0 rgba(140, 112, 78, .10), /* bottom bevel */ 0 2px 6px -2px rgba(80, 58, 32, .10), 0 20px 44px -22px rgba(80, 58, 32, .40); } /* Frosted grain */ .ftco-search .nav-link-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: var(--ikt-grain); background-size: 200px 200px; opacity: .05; mix-blend-mode: overlay; } /* Specular sheen across the top edge — the "liquid" highlight */ .ftco-search .nav-link-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%); } /* ----- The segments ------------------------------------------------------ */ .ftco-search .nav-pills { display: flex !important; flex-wrap: wrap; gap: 5px; width: 100%; } .ftco-search .nav-pills .nav-link { flex: 1 1 0; width: auto !important; padding: 12px 10px !important; border-radius: 999px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--ikt-ink-soft) !important; font-size: 15px !important; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1); } /* The theme pointed a little gold triangle at the active tab. The pill carries that state now, so retire the triangle. */ .ftco-search .nav-pills .nav-link::after { display: none !important; } .ftco-search .nav-pills .nav-link:hover { background: rgba(200, 169, 126, .16) !important; color: var(--ikt-ink) !important; } .ftco-search .nav-pills .nav-link.active { color: #1e1408 !important; background: linear-gradient(135deg, var(--ikt-turmeric), var(--ikt-brass) 55%, var(--ikt-saffron)) !important; border-color: rgba(255, 255, 255, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 20px -8px rgba(200, 169, 126, .95); } .ftco-search .nav-pills .nav-link.active:hover { color: #1e1408 !important; transform: translateY(-1px); } /* ----- Small screens: 2 per row, softened rectangle instead of a capsule -- */ @media (max-width: 767.98px) { .ftco-search .nav-link-wrap { padding: 8px; border-radius: 20px; } .ftco-search .nav-pills .nav-link { flex: 1 1 44%; font-size: 14px !important; /* The theme gave mobile tabs a solid fill; keep them translucent so the segments still read as glass. */ background: rgba(255, 255, 255, .45) !important; margin-bottom: 0 !important; } .ftco-search .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--ikt-turmeric), var(--ikt-brass)) !important; } } @media (prefers-reduced-motion: reduce) { .ftco-search .nav-pills .nav-link { transition: none; } } .ftco-search .nav-pills .nav-link:focus-visible { outline: 3px solid rgba(200, 169, 126, .8); outline-offset: 2px; }