/* Taste of India — site stylesheet Warm, professional, Indian-inspired. Calmer typography, quieter spacing. menu.json stays the single source of truth; this file only styles markup. Typography uses self-hosted fonts only — no external font services are loaded. */ /* Bebas Neue — self-hosted (SIL OFL), downloaded from fonts.gstatic.com. No runtime connection to Google servers. */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/bebas-neue-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/bebas-neue.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Palette */ --color-saffron: #c65a1f; --color-saffron-dark: #9f3f14; --color-masala: #7a1f17; --color-chili: #b1181f; --color-curry: #f2aa2f; --color-cardamom: #5d7c42; --color-cream: #fff8ee; --color-rice: #fffdf8; --color-text: #241613; --color-muted: #6f5a51; --color-border: rgba(122, 31, 23, 0.14); /* Back-compat aliases (older markup) */ --toi-saffron: var(--color-saffron); --toi-saffron-dark: var(--color-saffron-dark); --toi-masala: var(--color-masala); --toi-chili: var(--color-chili); --toi-turmeric: var(--color-curry); --toi-cardamom: var(--color-cardamom); --toi-cream: var(--color-cream); --toi-rice: var(--color-rice); --toi-ink: var(--color-text); --toi-muted: var(--color-muted); --toi-border: var(--color-border); /* Radius & shadow */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --shadow-soft: 0 16px 44px rgba(61, 29, 17, 0.12); --shadow-card: 0 10px 30px rgba(61, 29, 17, 0.08); /* Layout */ --header-height: 72px; --container: min(1160px, calc(100% - 40px)); /* Type — Bebas Neue self-hosted for display, system stack for body */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: 'Bebas Neue', "Arial Narrow", Impact, system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--color-cream); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ===== Scroll-reveal ======================================== */ /* Progressive enhancement: only active when JS adds .js-reveal */ /* to . Without JS elements are always visible. */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--reveal-delay, 0ms); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } body { margin: 0; color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; background: radial-gradient(circle at 12% 6%, rgba(242, 170, 47, 0.12), transparent 26rem), radial-gradient(circle at 88% 12%, rgba(177, 24, 31, 0.08), transparent 24rem), linear-gradient(180deg, #fff8ee 0%, #fffdf8 50%, #fff3e2 100%); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { color: #fff; background: var(--color-masala); } :focus-visible { outline: 3px solid var(--color-saffron); outline-offset: 2px; border-radius: 4px; } .container { width: var(--container); margin-inline: auto; } /* ===== Typography =========================================== */ h1, h2, h3, h4 { margin: 0; color: var(--color-text); line-height: 1.15; } .eyebrow, .section-kicker { display: inline-block; margin: 0 0 0.5rem; color: var(--color-saffron-dark); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* ===== Buttons ============================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0.7rem 1.3rem; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--color-masala), var(--color-saffron)); box-shadow: 0 10px 24px rgba(122, 31, 23, 0.2); font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(122, 31, 23, 0.26); filter: saturate(1.03); } .btn--ghost { color: var(--color-masala); background: rgba(255, 255, 255, 0.85); border: 1px solid var(--color-border); box-shadow: none; } .btn--ghost:hover { background: #fff; } /* ===== Header / Navbar ====================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 248, 238, 0.92); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(16px); } .site-header__inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .site-header__brand { display: inline-flex; align-items: center; gap: 10px; } .site-header__logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(198, 90, 31, 0.26); flex-shrink: 0; } .site-header__name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; letter-spacing: 0.04em; color: var(--color-masala); text-transform: uppercase; } .site-header__nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); font-weight: 700; font-size: 1.12rem; color: var(--color-muted); } .site-header__nav a:not(.btn) { position: relative; padding-block: 6px; transition: color 160ms ease; } .site-header__nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: right; background: var(--color-saffron); transition: transform 180ms ease; } .site-header__nav a:not(.btn):hover { color: var(--color-masala); } .site-header__nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; } .site-header__nav a:not(.btn).is-active { color: var(--color-masala); } .site-header__nav a:not(.btn).is-active::after { transform: scaleX(1); transform-origin: left; } .site-header__nav .btn { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.9rem; } /* Mobile toggle (hamburger) */ .site-header__toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: rgba(255, 255, 255, 0.8); cursor: pointer; position: relative; } .site-header__toggle span, .site-header__toggle span::before, .site-header__toggle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--color-masala); transform: translate(-50%, -50%); transition: transform 180ms ease, opacity 180ms ease; } .site-header__toggle span::before { transform: translate(-50%, -7px); } .site-header__toggle span::after { transform: translate(-50%, 5px); } .site-header__toggle[aria-expanded="true"] span { background: transparent; } .site-header__toggle[aria-expanded="true"] span::before { transform: translate(-50%, 0) rotate(45deg); } .site-header__toggle[aria-expanded="true"] span::after { transform: translate(-50%, 0) rotate(-45deg); } @media (max-width: 880px) { .site-header__toggle { display: block; } .site-header__nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px max(20px, calc((100% - var(--container)) / 2 + 20px)); background: var(--color-cream); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-soft); display: none; } .site-header__nav.is-open { display: flex; } .site-header__nav a:not(.btn) { padding: 10px 4px; border-bottom: 1px solid var(--color-border); } .site-header__nav a:not(.btn)::after { display: none; } .site-header__nav .btn { margin-top: 8px; } } /* ===== Sections ============================================= */ .section { padding: clamp(48px, 7vw, 88px) 0; } .section--tight { padding-block: clamp(32px, 4vw, 52px); } .section--cream { background: rgba(255, 248, 238, 0.6); border-block: 1px solid var(--color-border); } .section-head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; } .section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: 0.02em; color: var(--color-masala); text-transform: uppercase; } .section-lead { margin: 0.6rem auto 0; color: var(--color-muted); font-size: 1.05rem; } /* ===== Ordering-disabled notice in menu ===================== */ .menu-ordering-disabled-notice { display: flex; align-items: flex-start; gap: 0.75rem; margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: #fff8ef; border: 2px solid var(--color-saffron); color: var(--color-masala); font-size: 0.95rem; box-shadow: 0 2px 8px rgba(198, 120, 31, 0.1); } .menu-ordering-disabled-notice__icon { flex-shrink: 0; color: var(--color-saffron); margin-top: 0.1rem; display: flex; align-items: center; } .menu-ordering-disabled-notice__body { display: flex; flex-direction: column; gap: 0.2rem; } .menu-ordering-disabled-notice__detail { font-size: 0.9rem; color: var(--color-muted); } /* ===== Hero ================================================= */ .hero { position: relative; overflow: hidden; min-height: clamp(300px, 42vw, 520px); display: flex; align-items: center; border-radius: var(--radius-lg); } /* ---- three images: interieur full-width top, statue+dish side by side below ---- */ .hero__bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; z-index: 0; } .hero__bg-panel { overflow: hidden; position: relative; } /* interieur spans both columns on the top row */ .hero__bg-panel:first-child { grid-column: 1 / -1; } .hero__bg-panel+.hero__bg-panel { border-top: none; } .hero__bg-panel:last-child { border-left: none; } .hero__bg-panel img { width: 100%; height: 100%; object-fit: cover; display: block; } /* On mobile: collapse to single LCP image — hide secondary panels so the browser never requests those images on small screens. */ @media (max-width: 640px) { .hero__bg { grid-template-columns: 1fr; grid-template-rows: 1fr; } .hero__bg-panel--secondary { display: none; } .hero__bg-panel:first-child { grid-column: 1 / -1; grid-row: 1 / -1; } } /* darkening overlay over all images: stronger on the left where the text sits, fading toward the right for a cleaner, more premium look */ .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 6, 3, 0.82) 0%, rgba(16, 6, 3, 0.62) 42%, rgba(16, 6, 3, 0.42) 100%), linear-gradient(180deg, rgba(16, 6, 3, 0.12) 0%, rgba(16, 6, 3, 0.42) 100%); z-index: 1; } /* ---- content sits above the background, left-aligned ---- */ .hero__inner { position: relative; z-index: 2; padding: clamp(52px, 8vw, 100px) 0 clamp(52px, 8vw, 100px) clamp(32px, 6vw, 80px); width: 100%; } .hero__content { max-width: 640px; text-align: left; } .hero .eyebrow { color: var(--color-saffron); } .hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: 0.01em; color: #fff; text-transform: uppercase; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4); } .hero__lead { max-width: 46ch; margin: 1.1rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: clamp(1.05rem, 1.6vw, 1.2rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; } /* hero__media no longer used in the hero, kept for safety */ .hero__media { display: none; } /* ===== Highlights =========================================== */ .highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .highlight { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255, 253, 248, 0.85); box-shadow: var(--shadow-card); } .highlight__icon { font-size: 1.6rem; line-height: 1; } .highlight__title { margin: 10px 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--color-text); } .highlight p { margin: 0; color: var(--color-muted); font-size: 0.95rem; } /* ===== Specialties ========================================== */ .specialties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .specialty { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-rice); box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease; } .specialty:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .specialty__media { aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(198, 90, 31, 0.16), rgba(122, 31, 23, 0.16)); position: relative; overflow: hidden; } .specialty__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .specialty__media-fallback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .specialty__media-fallback { font-size: 2.4rem; } .specialty__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px; } .specialty__name { font-size: 1.12rem; font-weight: 700; } .specialty__desc { margin: 0; color: var(--color-muted); font-size: 0.9rem; line-height: 1.5; } .specialty__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 6px; } .specialty__badges { display: flex; flex-wrap: wrap; gap: 8px; } .specialty__price { color: var(--color-masala); font-weight: 800; font-variant-numeric: tabular-nums; } /* ===== Gallery ============================================== */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; } .gallery__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--color-border); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; } .gallery__item:hover img { transform: scale(1.05); } .gallery__item--feature { grid-column: span 2; grid-row: span 2; } /* ===== Location gallery ===================================== */ .location-gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 14px; } .location-gallery__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--color-border); } .location-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; } .location-gallery__item:hover img { transform: scale(1.05); } .location-gallery__item--feature { grid-row: span 2; } @media (max-width: 880px) { .location-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .location-gallery__item--feature { grid-column: span 2; grid-row: span 1; } } @media (max-width: 520px) { .location-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; } .location-gallery__item--feature { grid-column: span 1; } } @media (max-width: 880px) { .highlights, .specialties { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } } @media (max-width: 520px) { .highlights, .specialties { grid-template-columns: 1fr; } .gallery { grid-auto-rows: 160px; } .gallery__item--feature { grid-column: span 2; grid-row: span 1; } } /* ===== Menu teaser (home page) ============================== */ .menu-teaser__inner { background: var(--color-cream, #fbf6ee); border: 1px solid rgba(198, 90, 31, 0.14); border-radius: 18px; padding: clamp(28px, 4vw, 48px); display: grid; gap: clamp(18px, 2.5vw, 26px); } .section-head--left { text-align: left; margin: 0; max-width: 60ch; } .menu-teaser__highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .menu-teaser__highlights li { padding: 7px 14px; border-radius: 999px; background: rgba(198, 90, 31, 0.08); color: var(--color-masala); font-weight: 600; font-size: 0.92rem; } .menu-teaser__actions { display: flex; } /* ===== Home page scrollspy layout =========================== */ /* Reuses menu-sidebar + menu-mobilenav styles unchanged. */ .page-scrollspy { /* No extra top padding — the hero carries its own padding. */ } .page-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .page-content { min-width: 0; } .page-section { padding-block: clamp(40px, 5vw, 60px); scroll-margin-top: calc(var(--header-height) + 1rem); } .page-section+.page-section { border-top: 1px solid var(--color-border); } /* Background image variant — used on the "Unsere Küche auf einen Blick" section */ .page-section--story-bg { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: var(--radius-lg); overflow: hidden; } .page-section--story-bg::before { content: ""; position: absolute; inset: 0; background: rgba(16, 6, 3, 0.52); z-index: 0; } .page-section--story-bg>* { position: relative; z-index: 1; } .page-section--story-bg { padding-inline: clamp(24px, 4vw, 56px); } .page-section--story-bg .section-head { text-align: center; margin-left: auto; margin-right: auto; max-width: 640px; } .page-section--story-bg .section-kicker { color: var(--color-saffron); } .page-section--story-bg .section-title { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .page-section--story-bg .section-lead { color: rgba(255, 255, 255, 0.8); } /* ===== Menu layout (sidebar + content) ====================== */ .menu-section .section-head { margin-bottom: clamp(20px, 3vw, 32px); } .menu-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .menu-sidebar { position: sticky; top: calc(var(--header-height) + 1rem); max-height: calc(100vh - var(--header-height) - 2rem); overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 18px; } .menu-sidebar__group-title { margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-cardamom); } .menu-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .menu-sidebar a { display: block; padding: 7px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; color: var(--color-muted); font-size: 1.32rem; font-weight: 500; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .menu-sidebar a:hover { color: var(--color-masala); background: rgba(198, 90, 31, 0.06); } .menu-sidebar a.is-active { color: var(--color-masala); font-weight: 700; background: rgba(198, 90, 31, 0.1); border-left-color: var(--color-saffron); } /* Mobile horizontal category nav (hidden on desktop) */ .menu-mobilenav { display: none; } .menu-content { min-width: 0; } .menu-category { scroll-margin-top: calc(var(--header-height) + 1rem); padding-block: clamp(18px, 3vw, 28px); } .menu-category+.menu-category { border-top: 1px solid var(--color-border); } .menu-category__header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .menu-category__image { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-card); flex-shrink: 0; } .menu-category__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; letter-spacing: 0.02em; color: var(--color-saffron-dark); text-transform: uppercase; } .menu-category__note { margin: 4px 0 0; color: var(--color-muted); font-size: 0.92rem; } /* ===== Menu rows (food) ===================================== */ .menu-list { display: flex; flex-direction: column; } .menu-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 0; border-top: 1px dashed var(--color-border); } .menu-row:first-child { border-top: 0; } .menu-row--has-thumb { grid-template-columns: 72px 1fr; align-items: start; } .menu-row__thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; box-shadow: var(--shadow-card); } .menu-row__body { min-width: 0; } .menu-row__head { display: flex; align-items: baseline; gap: 8px; } .menu-row__name { display: flex; align-items: baseline; gap: 8px; font-size: 1.02rem; font-weight: 700; color: var(--color-text); } .menu-row__number { color: var(--color-saffron-dark); font-variant-numeric: tabular-nums; font-weight: 700; } .menu-row__dots { flex: 1; align-self: end; margin-bottom: 4px; border-bottom: 1px dotted rgba(122, 31, 23, 0.28); } .menu-row__price { color: var(--color-masala); font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .menu-row__desc { margin: 4px 0 0; color: var(--color-muted); font-size: 0.92rem; line-height: 1.5; } .menu-row__desc--fr { color: rgba(111, 90, 81, 0.7); font-size: 0.82rem; font-style: italic; } .menu-row__variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } .menu-row__variant { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: rgba(255, 248, 238, 0.7); font-size: 0.85rem; } .menu-row__variant-price { font-weight: 700; color: var(--color-masala); font-variant-numeric: tabular-nums; } .menu-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* ===== Drinks table ========================================= */ .drink-table { width: 100%; border-collapse: collapse; } .drink-row { border-top: 1px dashed var(--color-border); } .drink-table tr:first-child { border-top: 0; } .drink-row__name { padding: 10px 12px 10px 0; text-align: left; font-weight: 600; color: var(--color-text); vertical-align: top; } .drink-row__number { display: inline-block; margin-right: 6px; color: var(--color-saffron-dark); font-variant-numeric: tabular-nums; } .drink-row__options { display: block; margin-top: 2px; color: var(--color-muted); font-size: 0.85rem; font-weight: 400; } .drink-row__prices { padding: 10px 0; text-align: right; white-space: nowrap; vertical-align: top; } .drink-row__variant { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 14px; } .drink-row__size { color: var(--color-muted); font-size: 0.85rem; } .drink-row__price { color: var(--color-masala); font-weight: 700; font-variant-numeric: tabular-nums; } /* ===== Badges =============================================== */ .badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0.14rem 0.5rem; border-radius: 999px; color: var(--color-saffron-dark); background: rgba(198, 90, 31, 0.1); font-size: 0.74rem; font-weight: 700; line-height: 1; } .badge--vegan { color: #2f5d25; background: rgba(93, 124, 66, 0.14); } .badge--vegetarian { color: #6b5e0f; background: rgba(242, 170, 47, 0.2); } .badge--spicy { color: #fff; background: linear-gradient(135deg, var(--color-chili), var(--color-saffron)); } .badge--allergen { color: var(--color-muted); background: rgba(122, 31, 23, 0.06); font-weight: 600; } /* ===== Menu legend ========================================== */ .menu-legend { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255, 253, 248, 0.8); } .menu-legend h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; } .menu-legend p { margin: 0; color: var(--color-muted); font-size: 0.84rem; line-height: 1.7; } /* ===== Menu responsive ====================================== */ @media (max-width: 880px) { .menu-layout { grid-template-columns: 1fr; gap: 0; } .page-layout { grid-template-columns: 1fr; gap: 0; } .menu-sidebar { display: none; } .menu-mobilenav { display: block; position: sticky; top: var(--header-height); z-index: 20; margin: 0 0 20px; padding: 8px 0; background: rgba(255, 248, 238, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .menu-mobilenav ul { display: flex; gap: 8px; margin: 0; padding: 0 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .menu-mobilenav a { display: inline-block; white-space: nowrap; padding: 7px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: var(--color-muted); font-size: 0.88rem; font-weight: 600; } .menu-mobilenav a.is-active { color: #fff; background: var(--color-masala); border-color: transparent; } .menu-category, .page-section { scroll-margin-top: calc(var(--header-height) + 60px); } } @media (max-width: 520px) { .menu-row__head { flex-wrap: wrap; } .menu-row__dots { display: none; } .menu-row__price { margin-left: auto; } .drink-row__variant { display: flex; margin-left: 0; justify-content: flex-end; } } /* ===== Opening hours ======================================== */ .hours-card { max-width: 640px; margin-inline: 0; margin-top: clamp(20px, 3vw, 32px); padding: 10px 26px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255, 248, 238, 0.6), rgba(255, 253, 248, 0.9)); box-shadow: var(--shadow-card); } .hours-list { margin: 0; padding: 0; list-style: none; } .hours-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px dashed var(--color-border); } .hours-list li:first-child { border-top: 0; } .hours-list__day { font-weight: 600; } .hours-list__closed .hours-list__day { color: var(--color-muted); } .hours-list__time { color: var(--color-masala); font-weight: 600; font-variant-numeric: tabular-nums; } /* ----- refined opening-hours rows (home page) ----- */ .hours-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); } .hours-row:first-child { border-top: 0; } .hours-row__day { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--color-text); } .hours-row__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-cardamom); box-shadow: 0 0 0 4px rgba(93, 124, 66, 0.16); flex: none; } .hours-row--closed .hours-row__day { color: var(--color-muted); } .hours-row--closed .hours-row__dot { background: var(--color-muted); box-shadow: 0 0 0 4px rgba(111, 90, 81, 0.12); } .hours-row__time { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .hours-row__slot { padding: 5px 12px; border-radius: 999px; background: rgba(198, 90, 31, 0.08); color: var(--color-masala); font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; } /* ===== Contact ============================================== */ .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .contact-card { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-rice); box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .contact-card h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; } .contact-card address { font-style: normal; color: var(--color-muted); line-height: 1.6; } .contact-card a:not(.btn) { color: var(--color-masala); font-weight: 600; } .contact-card>p:last-child { margin-top: auto; padding-top: 12px; margin-bottom: 0; } .contact-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .contact-card__wa-icon { margin-bottom: 10px; line-height: 1; } .btn--whatsapp { color: #fff; background: #25D366; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.28); } .btn--whatsapp:hover { background: #1ebe5d; box-shadow: 0 16px 30px rgba(37, 211, 102, 0.36); filter: none; } .map-placeholder { height: 180px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-muted); background: rgba(255, 255, 255, 0.55); } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } /* ===== Lunch buffet section =============================== */ .buffet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; margin: 8px 0 26px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-rice); box-shadow: var(--shadow-card); overflow: hidden; } .buffet__media { position: relative; min-height: 280px; } .buffet__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .buffet__ayce { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 8px 16px; border-radius: 999px; background: linear-gradient(120deg, var(--color-masala), var(--color-saffron)); color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(159, 63, 20, 0.32); } .buffet__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3.5vw, 40px); } .buffet__badge { margin: 0; color: var(--color-masala); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; } .buffet__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--color-text); } .buffet__schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--color-masala); font-weight: 600; font-variant-numeric: tabular-nums; } .buffet__sep { color: var(--color-saffron); } .buffet__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .buffet__list li { position: relative; padding-left: 28px; color: var(--color-text); font-size: 0.97rem; line-height: 1.45; } .buffet__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 16px; height: 9px; border-left: 2px solid var(--color-saffron); border-bottom: 2px solid var(--color-saffron); transform: rotate(-45deg); } .buffet__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--color-border); } .buffet__price { display: flex; flex-direction: column; line-height: 1.05; } .buffet__amount { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); color: var(--color-masala); } .buffet__per { font-size: 0.74rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.1em; } @media (max-width: 720px) { .buffet { grid-template-columns: 1fr; } .buffet__media { min-height: 220px; } } /* ===== Payment options ===================================== */ .payment { margin-top: 22px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-rice); box-shadow: var(--shadow-card); text-align: center; } .payment__title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-text); } .payment__lead { margin: 6px 0 16px; color: var(--color-muted); font-size: 0.95rem; } .payment__img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* ===== Footer ============================================== */ .site-footer { margin-top: 20px; padding: 40px 0; color: rgba(255, 255, 255, 0.85); background: radial-gradient(circle at 8% 0%, rgba(242, 170, 47, 0.16), transparent 20rem), linear-gradient(135deg, var(--color-masala), #32100d); } .site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 28px; align-items: start; } .site-footer a { color: rgba(255, 255, 255, 0.85); } .site-footer a:hover { color: #fff; } .site-footer strong { color: #fff; } .site-footer__title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; } .site-footer__address, .site-footer__phone { font-style: normal; margin: 8px 0 0; font-size: 0.92rem; line-height: 1.6; } .site-footer__hours-title { margin: 0 0 8px; } .site-footer .hours-list li { border-color: rgba(255, 255, 255, 0.16); padding: 7px 0; font-size: 0.88rem; } .site-footer .hours-list__time { color: var(--color-curry); } .site-footer__nav { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; } .site-footer__copy { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.84rem; color: rgba(255, 255, 255, 0.7); } .site-footer__credit { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); } .site-footer__credit-logo { height: 22px; width: auto; opacity: 0.55; transition: opacity 180ms ease; filter: brightness(0) invert(1); display: block; } .site-footer__credit a:hover .site-footer__credit-logo { opacity: 0.9; } @media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; gap: 20px; } } /* ===== Legal pages ========================================= */ .legal-page { max-width: 760px; padding-block: clamp(36px, 6vw, 64px); } .legal-page h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: 0.02em; color: var(--color-masala); text-transform: uppercase; margin-bottom: 1rem; } .legal-page h2 { margin: 2rem 0 0.5rem; font-size: 1.2rem; font-weight: 700; color: var(--color-saffron-dark); } .legal-page p { color: var(--color-muted); line-height: 1.7; } .legal-page a { color: var(--color-masala); font-weight: 600; } .legal-page__notice { padding: 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgba(242, 170, 47, 0.1); } .legal-page code { padding: 0.1rem 0.35rem; border-radius: 5px; background: rgba(122, 31, 23, 0.08); font-size: 0.85em; } /* ===== Coming-soon pages =================================== */ .coming-soon-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 8vw, 96px); max-width: 540px; margin-inline: auto; } .coming-soon-page__icon { font-size: 3.2rem; line-height: 1; margin-bottom: 1.2rem; } .coming-soon-page__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: 0.02em; color: var(--color-masala); text-transform: uppercase; margin: 0 0 1rem; } .coming-soon-page__lead { margin: 0 0 0.8rem; font-size: 1.1rem; font-weight: 600; color: var(--color-text); line-height: 1.6; } .coming-soon-page__body { margin: 0 0 1.8rem; color: var(--color-muted); font-size: 1rem; line-height: 1.7; } .coming-soon-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* ===== Storytelling sections ================================ */ .story-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; } .story-col__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.05; letter-spacing: 0.02em; color: var(--color-masala); text-transform: uppercase; margin: 0 0 0.9rem; } .story-text p { margin: 0 0 1rem; color: var(--color-muted); font-size: 1.02rem; line-height: 1.75; } .story-text p:last-child { margin-bottom: 0; } .story-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 12px; } /* ===== Story cards ========================================= */ .story-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .story-card { padding: 22px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-rice); box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease; } .story-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .story-card__icon { font-size: 1.7rem; line-height: 1; margin-bottom: 12px; } .story-card__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .story-card p { margin: 0; color: var(--color-muted); font-size: 0.93rem; line-height: 1.6; } /* ===== Story local (Breisach trifft Indien) ================ */ .story-local { padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); background: rgba(255, 248, 238, 0.7); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } .story-local__head { margin-bottom: 1.2rem; } .story-local .story-text p { max-width: 72ch; } .story-local .location-gallery { margin-top: clamp(20px, 3vw, 32px); } /* ===== Story band (short accent intro for Speisekarte) ===== */ .story-band { padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px); margin-bottom: clamp(24px, 3.5vw, 36px); border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(198, 90, 31, 0.07) 0%, rgba(242, 170, 47, 0.09) 100%); border: 1px solid rgba(198, 90, 31, 0.15); } .story-band__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: 0.02em; color: var(--color-masala); text-transform: uppercase; margin: 0 0 0.7rem; } .story-band p { margin: 0; color: var(--color-muted); font-size: 1.02rem; line-height: 1.7; max-width: 62ch; } /* ===== Story responsive ==================================== */ @media (max-width: 880px) { .story-section__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); } .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .story-cards { grid-template-columns: 1fr; } } /* ===== Lightbox (image preview overlay) ====================== */ .is-lightbox-trigger { cursor: zoom-in; } .is-lightbox-trigger:focus-visible { outline: 2px solid var(--color-saffron); outline-offset: 3px; } .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 4, 2, 0.92); display: none; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 56px); opacity: 0; transition: opacity 180ms ease; } .lightbox.is-open { display: flex; opacity: 1; } body.lightbox-open { overflow: hidden; } .lightbox__figure { margin: 0; max-width: min(96vw, 1400px); display: flex; flex-direction: column; align-items: center; gap: 12px; } .lightbox__img { display: block; max-width: 100%; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: #1a0d08; } .lightbox__caption { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; text-align: center; max-width: 70ch; line-height: 1.4; margin: 0; } .lightbox__caption[hidden] { display: none; } .lightbox__close, .lightbox__nav { position: absolute; appearance: none; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); line-height: 1; padding: 0; transition: background 160ms ease, transform 160ms ease; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); } .lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--color-saffron); outline-offset: 3px; } .lightbox__close { top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); width: 44px; height: 44px; font-size: 1.8rem; } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.4rem; font-weight: 300; } .lightbox__nav[hidden] { display: none; } .lightbox__nav--prev { left: clamp(8px, 2vw, 24px); } .lightbox__nav--next { right: clamp(8px, 2vw, 24px); } @media (max-width: 520px) { .lightbox__close { width: 40px; height: 40px; font-size: 1.5rem; } .lightbox__nav { width: 44px; height: 44px; font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }