:root { --restaurant-menu-headers-size: 4.5rem; --restaurant-menu-icon-size: 1.5rem; } .restaurant_menu, .restaurant_menu * { box-sizing: border-box !important; } .restaurant_menu { width: stretch; margin: auto; border: var(--border-std); border-radius: calc(var(--mp) * 2); padding: calc(var(--mp) * 2); overflow-x: hidden; overflow-y: auto; } .restaurant_menu h2 { border-bottom: 1pt dashed var(--title-color); padding: calc(var(--mp) * 4); text-transform: capitalize; flex-direction: column; } .restaurant_menu h2 span { display: block !important; font-size: 1rem !important; color: var(--main-bg-color) !important; } .restaurant_menu h2, .restaurant_menu h3 { margin: auto; margin-top: calc(var(--mp) * 2); margin-bottom: calc(var(--mp) * 2); } .restaurant_menu h2 { display: flex; flex-direction: row; align-content: center; align-items: center; } .restaurant_menu h3 { text-align: center; width: fit-content; padding: calc(var(--mp) * .5); min-width: 12rem; border-radius: calc(var(--mp) * 5); background-color: var(--evid-color-2); color: var(--main-bg-color); } .restaurant_voice { margin-bottom: calc(var(--mp) * 2); padding: calc(var(--mp) * 2); border-bottom: var(--border-std); opacity: .75; } .restaurant_voice:nth-child(odd) { } .restaurant_voice_title_group, .restaurant_menu .restaurant_voice_name, .restaurant_menu .restaurant_voice_ingredients { width: stretch; max-width: 100%; text-align: left; } .restaurant_menu .restaurant_voice_ingredients { opacity: .5; hyphens: auto; font-size: 1rem; line-height: 110%; } .restaurant_menu .restaurant_voice_name { display: flex !important; align-items: flex-start !important; } .restaurant_menu .restaurant_voice_name * { height: stretch !important; flex-grow: 1 1 auto; flex: 1 1 auto; align-items: flex-start !important; } .restaurant_menu .item_block { width: 100%; } .restaurant_menu .restaurant_voice_name .item { white-space: wrap !important; width: stretch !important; hyphens: auto; display: flex; } .restaurant_menu .restaurant_voice_price { width: fit-content; display: flex; flex-direction: column; white-space: nowrap; padding-left: calc(var(--mp) * 2); color: var(--evid-color-2); transform-origin: center center; } .restaurant_menu .restaurant_voice:hover .item_number_id, .restaurant_menu .restaurant_voice:hover { opacity: 1; filter: brightness(125%); } .restaurant_menu .restaurant_voice:hover .restaurant_voice_price { } .restaurant_menu .restaurant_voice_price, .restaurant_menu .item { font-size: 1.25rem; } .restaurant_menu .item_number_id { border-radius: 0px; white-space: nowrap !important; margin-right: calc(var(--mp) * 2) !important; background-color: none !important; opacity: .5; } .restaurant_menu .restaurant_voice_dots { border-bottom: 2pt dotted var(--bg-dependent-bg-color-flat); flex: 1 1 auto; flex-grow: 1 1 auto; width: stretch; max-width: 100%; } .restaurant_menu_menu_bar { display: flex; align-items: safe center; align-content: safe center; justify-items: safe center; justify-content: safe center; background-color: var(--bg-dependent-bg-color-trans); backdrop-filter: var(--backdrop-filter); margin: auto; border-radius: calc(var(--mp) * 1); padding: calc(var(--mp) * 1); transition: var(--transition-mid); z-index: 1200; background-color: var(--main-bg-color); } .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button { padding: calc(var(--mp) * .5); text-transform: capitalize; opacity: .5; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; } .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button:focus { opacity: 1; } .restaurant_menu_header_icon, .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button .restaurant_menu_button_icon { transform-origin: center center; } .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button:focus .restaurant_menu_button_icon { transform: scale(1.5); } .restaurant_menu_header_icon svg, .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button svg { fill: var(--title-color); } .restaurant_menu_header_icon { margin-right: calc(var(--mp) * 2); } .restaurant_menu_header_icon svg { width: calc(var(--restaurant-menu-icon-size) * 2); height: calc(var(--restaurant-menu-icon-size) * 2); } .restaurant_menu_menu_bar .restaurant_menu_header_anchor_button svg { width: var(--restaurant-menu-icon-size); height: var(--restaurant-menu-icon-size); } .restaurant_section_header_anchor { display: flex; max-height: 0px; overflow: hidden; visibility: hidden; opacity: 0; } .restaurant_voice_name_fixed_menu, .restaurant_voice_name_fixed_menu * { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; } .restaurant_voice_name_fixed_menu .items_group { font-size: 1.5rem; padding: calc(var(--mp) * 2); font-family: var(--titles-font); margin-bottom: calc(var(--mp) * 4); color: var(--evid-color-2); text-align: center; line-height: 125%; } .restaurant_voice_dishes, .restaurant_voice_dishes div { margin: auto; text-align: center; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; font-size: 1.25rem; } .restaurant_menu_fixed_price { font-size: 1.5rem; text-align: center; padding: calc(var(--mp) * 4); color: var(--evid-color-2); } .restaurant_menu_fixed_price_at_person { font-size: 1rem; } @media screen and (min-width:1024px) { .restaurant_menu { max-height: calc(100dvh - var(--header-size) - var(--footer-size) - var(--mp) * 16); overflow: visible; height: 100%; min-height: fit-content; } .restaurant_menu_menu_bar { display: none; position: sticky !important; top: calc(var(--header-size) * 1.5); height: var(--restaurant-menu-headers-size); flex-wrap: wrap !important; background-color: var(--main-bg-color)80; } .restaurant_menu_button { display: none; } } @media screen and (orientation:portrait) and (max-width:1023px) { .restaurant_menu_block { color: var(--ui-fg-color-std); } .restaurant_menu_container { max-height: 0px; padding: 0px; overflow: hidden; contain: content; opacity: 0; visibility: hidden; } .restaurant_menu_menu_bar { display: flex !important; position: fixed !important; right: calc(var(--mp) * 2) !important; top: calc(var(--mp) * 2) !important; bottom: calc(var(--mp) * 2) !important; width: var(--restaurant-menu-headers-size) !important; flex-direction: column !important; z-index: 1000; border: var(--border-std); overflow-y: scroll; overflow-x: hidden; box-shadow: var(--box-shadow); } .restaurant_menu h2 { font-family: var(--ui-font); font-size: 1.25rem; position: sticky; top: 0px; background-color: var(--title-color); color: #0f0f0f; padding: calc(var(--mp) * 2); padding-top: calc(var(--mp) * 2); border-radius: calc(var(--mp) * 1); box-shadow: var(--box-shadow); display: flex; flex-wrap: wrap !important; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; opacity: 1 !important; z-index: 1000; line-height: 100%; } .restaurant_menu h3 { margin-top: calc(var(--mp) * 4) !important; margin-bottom: calc(var(--mp) * 4) !important; } .restaurant_menu { position: fixed !important; top: 0px; bottom: 0px; left: 0px; right: calc(var(--restaurant-menu-headers-size) + var(--mp) * 2); } .restaurant_menu_container_show { max-height: 100dvh !important; opacity: 1 !important; visibility: visible !important; position: fixed !important; top: var(--header-size); bottom: var(--footer-size); left: 0px; right: 0px; z-index: 1000; background-color: var(--main-bg-color); backdrop-filter: var(--backdrop-filter); overflow-y: hidden; } .restaurant_voice { font-size: 1.1rem; } .restaurant_menu_button { border: var(--border-std); background-color: var(--box-bg-color-dark); text-align: center; padding: calc(var(--mp) * 1); padding-left: calc(var(--mp) * 2); padding-right: calc(var(--mp) * 2); box-shadow: var(--box-shadow); opacity: 1; user-select: none; cursor: pointer; } .restaurant_menu_button:hover { filter: brightness(125%); opacity: 1; } .restaurant_menu_button:active { opacity: .5; } .restaurant_menu_button_label { line-height: 100%; text-align: center; margin: auto; } .restaurant_menu_header_icon { display: none; } }