/* * Yumee Menu — editorial front-end styles. * Everything is scoped under .yumee-menu so it never clashes with the theme. * The color/font/width variables are injected inline from Settings; the values * below are fallbacks. */ /* Floating "back to top" button. Lives on (not under .yumee-menu) so it is positioned relative to the viewport; themed via vars set inline from JS. */ .ym-to-top { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--ym-tt-card, #141414); color: var(--ym-tt-gold, #C9A24B); border: 1px solid var(--ym-tt-border, #2a2722); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, color .2s ease; z-index: 9999; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .ym-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .ym-to-top:hover { color: #fff; } .ym-to-top svg { width: 20px; height: 20px; display: block; } @media ( prefers-reduced-motion: reduce ) { .ym-to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } } .yumee-menu { --ym-gold: #B7A071; --ym-gold-2: #C9A24B; --ym-cream: #EFE7D8; --ym-bg: #0d0d0d; --ym-card: #141414; --ym-text: #b9b4a8; --ym-border: #2a2722; --ym-font-head: Georgia, 'Times New Roman', serif; --ym-maxw: 1180px; /* --ym-sticky-top is injected per-instance via the wrapper's style attr (from Settings → Sticky offset). No default here on purpose: the var() fallbacks at the point of use already resolve to 0px, and a default declaration would compete with the inline value and could win when a CSS optimizer reorders the cascade. */ --ym-pending: #d98a6a; background: var(--ym-bg); color: var(--ym-text); padding: clamp(28px, 5vw, 72px) clamp(16px, 4vw, 40px); font-family: inherit; box-sizing: border-box; } .yumee-menu *, .yumee-menu *::before, .yumee-menu *::after { box-sizing: border-box; } .yumee-menu .ym-hero, .yumee-menu .ym-controls, .yumee-menu .ym-layout { max-width: var(--ym-maxw); margin-left: auto; margin-right: auto; } /* ---------- Menu tabs (switcher) ---------- */ .yumee-menu .ym-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--ym-maxw); margin: 0 auto 36px; padding-bottom: 18px; border-bottom: 1px solid var(--ym-border); } .yumee-menu .ym-tab { cursor: pointer; background: transparent; border: 1px solid var(--ym-border); border-radius: 2px; color: var(--ym-text); font-family: inherit; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 22px; transition: all 0.18s ease; } .yumee-menu .ym-tab:hover { border-color: var(--ym-gold); color: var(--ym-cream); } .yumee-menu .ym-tab.is-active { background: var(--ym-gold); border-color: var(--ym-gold); color: #141414; font-weight: 600; } .yumee-menu .ym-panel[hidden] { display: none; } /* ---------- Hero ---------- */ .yumee-menu .ym-hero { text-align: center; margin-bottom: 40px; } .yumee-menu .ym-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ym-gold); letter-spacing: 0.42em; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; margin: 0 0 18px; padding-left: 0.42em; } .yumee-menu .ym-eyebrow-line { width: 28px; height: 1px; background: var(--ym-gold); opacity: 0.7; } .yumee-menu .ym-title { font-family: var(--ym-font-head); color: var(--ym-cream); font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: 0.02em; margin: 0 0 18px; font-weight: 600; text-transform: uppercase; } .yumee-menu .ym-subtitle { color: var(--ym-text); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 640px; margin: 0 auto 18px; line-height: 1.5; } .yumee-menu .ym-kicker { color: rgba(185, 180, 168, 0.6); letter-spacing: 0.32em; font-size: 0.7rem; text-transform: uppercase; margin: 0 0 8px; } .yumee-menu .ym-pdf-btn { display: inline-block; margin-top: 14px; padding: 11px 26px; border: 1px solid var(--ym-gold); border-radius: 2px; color: var(--ym-gold); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .yumee-menu .ym-pdf-btn:hover { background: var(--ym-gold); color: #141414; } /* ---------- Controls (search + filters) ---------- */ .yumee-menu .ym-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--ym-border); } .yumee-menu .ym-search { flex: 1 1 320px; } .yumee-menu .ym-search-input { width: 100%; background: transparent; border: 1px solid var(--ym-border); border-radius: 2px; color: var(--ym-cream); padding: 14px 18px; font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.2s ease; } .yumee-menu .ym-search-input::placeholder { color: rgba(185, 180, 168, 0.45); } .yumee-menu .ym-search-input:focus { border-color: var(--ym-gold); } .yumee-menu .ym-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ---------- Chips / filter buttons ---------- */ .yumee-menu .ym-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px; border-radius: 2px; white-space: nowrap; } .yumee-menu .ym-filter { cursor: pointer; background: transparent; border: 1px solid var(--ym-border); color: var(--ym-text); font-family: inherit; transition: all 0.18s ease; } .yumee-menu .ym-filter:hover { border-color: var(--ym-gold); color: var(--ym-cream); } .yumee-menu .ym-filter.is-active { background: var(--ym-gold); border-color: var(--ym-gold); color: #141414; font-weight: 600; } /* ---------- Avoid-allergen dropdown ---------- */ .yumee-menu .ym-allergen-dd { position: relative; } .yumee-menu .ym-allergen-toggle { cursor: pointer; background: transparent; border: 1px solid var(--ym-border); color: var(--ym-text); font-family: inherit; } .yumee-menu .ym-allergen-toggle:hover, .yumee-menu .ym-allergen-dd.is-open .ym-allergen-toggle { border-color: var(--ym-gold); color: var(--ym-cream); } .yumee-menu .ym-allergen-toggle.has-active { border-color: var(--ym-pending); color: var(--ym-pending); } .yumee-menu .ym-caret { font-size: 0.6rem; } .yumee-menu .ym-allergen-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 220px; background: var(--ym-card); border: 1px solid var(--ym-border); border-radius: 4px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .yumee-menu .ym-allergen-panel[hidden] { display: none; } .yumee-menu .ym-allergen-opt { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; text-transform: none; letter-spacing: 0; color: var(--ym-text); cursor: pointer; } /* ---------- Layout: jump nav + sections ---------- */ /* Never let the menu push the page sideways; inner strips scroll instead. */ .yumee-menu { overflow-x: clip; max-width: 100%; } .yumee-menu .ym-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } .yumee-menu .ym-layout.ym-no-jump { grid-template-columns: 1fr; } /* Grid/flex children default to min-width:auto, which can force a track wider than the viewport. Allow them to shrink so inner overflow scrolling works. */ .yumee-menu .ym-jump, .yumee-menu .ym-sections, .yumee-menu .ym-grid { min-width: 0; } .yumee-menu .ym-jump { position: sticky; /* Clear any fixed site header/top bar (measured into --ym-sticky-top by JS, or set in Settings → Sticky offset) plus a small 24px breathing gap. */ top: calc(var(--ym-sticky-top, 0px) + 24px); } /* Jump-to-section landings clear the fixed header on desktop too. */ .yumee-menu .ym-section { scroll-margin-top: calc(var(--ym-sticky-top, 0px) + 24px); } .yumee-menu .ym-jump-title { color: rgba(185, 180, 168, 0.55); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 16px; } .yumee-menu .ym-jump-list { list-style: none; margin: 0; padding: 0; } .yumee-menu .ym-jump-link { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0 11px 14px; color: var(--ym-text); text-decoration: none; border-left: 2px solid transparent; font-size: 0.98rem; transition: color 0.18s ease, border-color 0.18s ease; } .yumee-menu .ym-jump-link:hover { color: var(--ym-cream); } .yumee-menu .ym-jump-link.is-active { color: var(--ym-gold); border-left-color: var(--ym-gold); } .yumee-menu .ym-jump-name { line-height: 1.25; } .yumee-menu .ym-jump-count { color: rgba(185, 180, 168, 0.4); font-size: 0.72rem; letter-spacing: 0.05em; } /* ---------- Sections ---------- */ .yumee-menu .ym-section { margin-bottom: 56px; scroll-margin-top: 24px; } .yumee-menu .ym-section-head { margin-bottom: 26px; } .yumee-menu .ym-section-eyebrow { color: var(--ym-gold); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; margin: 0 0 8px; } .yumee-menu .ym-section-title { font-family: var(--ym-font-head); color: var(--ym-cream); font-size: clamp(1.7rem, 3.5vw, 2.6rem); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; font-weight: 600; } .yumee-menu .ym-section-desc { color: var(--ym-gold); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 8px 0 0; } /* ---------- Grid ---------- */ .yumee-menu[data-columns="2"] .ym-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .yumee-menu[data-columns="1"] .ym-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } /* ---------- Card ---------- */ .yumee-menu .ym-card { display: flex; flex-direction: column; background: var(--ym-card); border: 1px solid var(--ym-border); border-radius: 3px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .yumee-menu .ym-card:hover { border-color: var(--ym-gold); transform: translateY(-2px); } .yumee-menu .ym-card.is-featured { border-color: rgba(183, 160, 113, 0.5); } .yumee-menu .ym-card-media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .yumee-menu .ym-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .yumee-menu .ym-card-body { padding: 26px 28px; flex: 1; } .yumee-menu .ym-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; } .yumee-menu .ym-card-title { font-family: var(--ym-font-head); color: var(--ym-cream); font-size: 1.45rem; line-height: 1.15; margin: 0; font-weight: 600; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .yumee-menu .ym-badge-signature { font-family: inherit; background: var(--ym-gold); color: #141414; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; padding: 5px 9px; border-radius: 2px; white-space: nowrap; } .yumee-menu .ym-card-price { text-align: right; white-space: nowrap; } .yumee-menu .ym-price-single { font-family: var(--ym-font-head); color: var(--ym-gold-2); font-size: 1.35rem; font-weight: 600; } .yumee-menu .ym-price-variants { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .yumee-menu .ym-variant { display: inline-flex; gap: 10px; align-items: baseline; } .yumee-menu .ym-variant-label { color: rgba(185, 180, 168, 0.6); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; } .yumee-menu .ym-variant-price { font-family: var(--ym-font-head); color: var(--ym-gold-2); font-weight: 600; font-size: 1.05rem; } .yumee-menu .ym-card-desc { color: var(--ym-text); font-size: 0.94rem; line-height: 1.6; margin: 0 0 16px; } .yumee-menu .ym-card-desc p { margin: 0 0 8px; } .yumee-menu .ym-card-desc p:last-child { margin-bottom: 0; } .yumee-menu .ym-card-note { color: rgba(185, 180, 168, 0.7); font-size: 0.82rem; font-style: italic; margin: 0 0 14px; } /* ---------- Tags ---------- */ .yumee-menu .ym-card-chips, .yumee-menu .ym-card-tags { display: flex; flex-wrap: wrap; gap: 8px; } .yumee-menu .ym-card-tags { margin-top: 10px; } .yumee-menu .ym-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 9px; border-radius: 2px; border: 1px solid var(--ym-border); } .yumee-menu .ym-tag-diet { color: #9fc27a; border-color: rgba(159, 194, 122, 0.45); font-weight: 700; } .yumee-menu .ym-tag-allergen { color: rgba(185, 180, 168, 0.8); border-color: var(--ym-border); } .yumee-menu .ym-tag-tag { color: var(--ym-gold-2); border-color: rgba(201, 162, 75, 0.35); } .yumee-menu .ym-tag-pending { color: var(--ym-pending); border-color: rgba(217, 138, 106, 0.5); } /* ---------- States ---------- */ .yumee-menu .ym-card[hidden], .yumee-menu .ym-section[hidden] { display: none !important; } .yumee-menu .ym-no-results, .yumee-menu .ym-empty { color: var(--ym-text); text-align: center; padding: 40px; opacity: 0.7; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .yumee-menu { padding: clamp(20px, 5vw, 32px) clamp(14px, 4vw, 24px); } .yumee-menu .ym-layout { grid-template-columns: 1fr; gap: 22px; } /* In a column flex, flex-basis is the HEIGHT — drop the grow/basis so the search box hugs its content instead of leaving a tall gap. */ .yumee-menu .ym-controls { flex-direction: column; align-items: stretch; gap: 14px; } .yumee-menu .ym-search { flex: 0 0 auto; width: 100%; } .yumee-menu .ym-jump { /* Allow the strip to shrink to the column so the PAGE never scrolls. */ min-width: 0; /* Sticky, full-bleed bar that stays put while the menu scrolls. --ym-sticky-top clears a fixed site header (set in Settings). */ position: sticky; top: var(--ym-sticky-top, 0px); z-index: 10; background: var(--ym-bg); margin: 0 calc(-1 * clamp(14px, 4vw, 24px)); padding: 10px clamp(14px, 4vw, 24px); border-bottom: 1px solid var(--ym-border); } /* Jump-to-section landings clear the sticky bar + header. */ .yumee-menu .ym-section { scroll-margin-top: calc(var(--ym-sticky-top, 0px) + 78px); } /* Compact sticky bar: the chips are self-explanatory. */ .yumee-menu .ym-jump-title { display: none; } /* Jump nav becomes a horizontal scroll strip on mobile. */ .yumee-menu .ym-jump-list { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: thin; } .yumee-menu .ym-jump-list li { flex: 0 0 auto; scroll-snap-align: start; } .yumee-menu .ym-jump-link { border-left: none; border: 1px solid var(--ym-border); border-radius: 999px; padding: 9px 14px; white-space: nowrap; } .yumee-menu .ym-jump-link.is-active { border-color: var(--ym-gold); background: rgba(183, 160, 113, 0.12); } .yumee-menu[data-columns="2"] .ym-grid { grid-template-columns: 1fr; } .yumee-menu .ym-filters { justify-content: flex-start; } /* Keep the dropdown anchored to its button but never wider than the screen. */ .yumee-menu .ym-allergen-panel { right: auto; left: 0; min-width: 200px; max-width: calc(100vw - 36px); grid-template-columns: 1fr 1fr; } /* Long words/URLs in descriptions must wrap, never overflow. */ .yumee-menu .ym-card-title, .yumee-menu .ym-card-desc { overflow-wrap: anywhere; } }