.menu-legend-button {
min-height: 42px;
padding: 9px 14px;
border:
1px solid
rgba(201, 162, 58, 0.52);
border-radius: 8px;
color: var(--gold-light);
background:
linear-gradient(
180deg,
rgba(35, 28, 14, 0.92),
rgba(12, 10, 7, 0.92)
);
cursor: pointer;
font-weight: 600;
letter-spacing: 0.015em;
transition:
border-color 0.18s ease,
background 0.18s ease,
color 0.18s ease;
}
.menu-legend-button:hover {
border-color:
rgba(230, 201, 111, 0.82);
color: var(--gold-bright);
background:
linear-gradient(
180deg,
rgba(48, 38, 18, 0.96),
rgba(15, 12, 8, 0.96)
);
}
.menu-legend-button:focus-visible {
outline:
2px solid
var(--gold-light);
outline-offset: 2px;
}
.menu-category {
margin-bottom: 8px;
border:
1px solid
rgba(201, 162, 58, 0.32);
border-radius: 10px;
overflow: hidden;
background:
rgba(5, 5, 5, 0.77);
}
.menu-category.category-open {
border-color:
rgba(201, 162, 58, 0.65);
}
.category-toggle {
touch-action: pan-y;
width: 100%;
min-height: 58px;
padding:
9px 16px;
display: grid;
grid-template-columns:
minmax(0, 1fr) auto auto;
align-items: center;
gap: 15px;
border: 0;
background:
linear-gradient(
90deg,
rgba(16, 14, 9, 0.96),
rgba(6, 6, 6, 0.94)
);
color: var(--text-title);
cursor: pointer;
text-align: left;
}
.category-toggle:hover {
background:
linear-gradient(
90deg,
rgba(32, 27, 14, 0.96),
rgba(8, 8, 8, 0.96)
);
}
.category-toggle:focus-visible {
outline:
2px solid
var(--gold-light);
outline-offset:
-2px;
}
.category-toggle-title {
color: var(--gold-light);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 1.35rem;
font-weight: 600;
}
.category-count {
color: var(--text-muted);
font-size: 0.77rem;
white-space: nowrap;
}
.category-arrow {
width: 30px;
height: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
color: var(--gold);
font-size: 1.4rem;
transition:
transform 0.22s ease;
}
.category-open .category-arrow {
transform:
rotate(180deg);
}
.category-content {
padding: 9px;
border-top:
1px solid
rgba(201, 162, 58, 0.22);
}
.category-content[hidden] {
display: none;
}
.product-grid {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap: 7px;
align-items: start;
}
.product {
min-width: 0;
border:
1px solid
rgba(201, 162, 58, 0.25);
border-radius: 7px;
overflow: hidden;
background:
rgba(7, 7, 7, 0.90);
}
.product.product-open {
border-color:
rgba(201, 162, 58, 0.68);
background:
rgba(11, 10, 7, 0.96);
}
.product-summary {
width: 100%;
min-width: 0;
min-height: 46px;
padding:
6px 7px;
display: grid;
grid-template-columns:
auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.product-summary:hover {
background:
rgba(201, 162, 58, 0.045);
}
.product-summary:focus-visible {
outline:
2px solid
var(--gold-light);
outline-offset:
-2px;
}
.menu-number {
min-width: 29px;
height: 29px;
padding:
0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(201, 162, 58, 0.60);
border-radius: 5px;
color: var(--gold-light);
background:
rgba(201, 162, 58, 0.05);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.9rem;
font-weight: 600;
}
.menu-number-empty {
visibility: hidden;
}
.product-name {
min-width: 0;
color: #d7cdb7;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.98rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-price {
color: var(--gold-light);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.92rem;
font-weight: 700;
white-space: nowrap;
}
.product-arrow {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold);
transition:
transform 0.20s ease;
}
.product-open .product-arrow {
transform:
rotate(180deg);
}
.product-details {
border-top:
1px solid
rgba(201, 162, 58, 0.20);
}
.product-details[hidden] {
display: none;
}
.product-details-inner {
padding:
11px 12px 12px;
display: grid;
gap: 10px;
}
.description {
color: #b9af9b;
font-size: 0.84rem;
line-height: 1.45;
margin: 0;
}
.product-details-body {
display: grid;
grid-template-columns:
minmax(0, 1.15fr)
minmax(118px, 0.95fr);
gap: 10px;
align-items: stretch;
min-width: 0;
}
.product-image-slot {
min-width: 0;
min-height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.product-image-slot-empty {
pointer-events: none;
}
.product-image-button {
width: 100%;
max-width: 165px;
padding: 0;
border: 1px solid
rgba(201, 162, 58, 0.26);
border-radius: 5px;
overflow: hidden;
background: #0d0a06;
cursor: zoom-in;
line-height: 0;
touch-action: manipulation;
}
.product-image-button:focus-visible {
outline: 2px solid
var(--gold-light);
outline-offset: 2px;
}
.product-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: contain;
object-position: center;
}
.product-details-info {
min-width: 0;
display: flex;
flex-direction: column;
}
.variant-list {
min-width: 0;
}
.variant {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
min-height: 28px;
padding:
4px 0;
border-bottom:
1px dotted
rgba(255, 255, 255, 0.10);
}
.variant:last-child {
border-bottom: 0;
}
.variant-name {
min-width: 0;
color: #bcb29e;
font-size: 0.78rem;
line-height: 1.3;
}
.price {
margin-left: auto;
color: var(--gold-light);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.93rem;
font-weight: 700;
white-space: nowrap;
}
.allergens {
margin-top: 8px;
padding-top: 7px;
border-top:
1px solid
rgba(201, 162, 58, 0.18);
color: #ac9560;
font-size: 0.68rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.legend-code-trigger {
width: 100%;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
background: transparent;
text-align: left;
cursor: pointer;
appearance: none;
transition:
color 0.18s ease,
border-color 0.18s ease;
}
.legend-code-trigger:hover {
color: var(--gold-light);
border-top-color:
rgba(201, 162, 58, 0.42);
}
.legend-code-trigger:focus-visible {
outline:
2px solid
rgba(230, 201, 111, 0.72);
outline-offset: 3px;
border-radius: 3px;
}
body.legend-modal-open {
overflow: hidden;
}
.legend-overlay {
position: fixed;
inset: 0;
z-index: 1600;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vw, 28px);
background:
rgba(0, 0, 0, 0.76);
backdrop-filter: blur(3px);
}
.legend-overlay[hidden] {
display: none;
}
.legend-modal {
width:
min(720px, 100%);
max-height:
min(82vh, 760px);
overflow: auto;
border:
1px solid
rgba(201, 162, 58, 0.60);
border-radius: 12px;
background:
linear-gradient(
180deg,
rgba(24, 20, 13, 0.99),
rgba(8, 8, 8, 0.99)
);
box-shadow:
0 22px 60px
rgba(0, 0, 0, 0.62);
}
.legend-modal-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 16px 18px 13px;
border-bottom:
1px solid
rgba(201, 162, 58, 0.25);
background:
rgba(14, 12, 8, 0.98);
}
.legend-modal-heading-wrap {
min-width: 0;
}
.legend-modal-kicker {
margin-bottom: 4px;
color: #a89462;
font-size: 0.72rem;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.legend-modal-title {
margin: 0;
color: var(--gold-light);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(1.2rem, 3.2vw, 1.65rem);
line-height: 1.2;
}
.legend-modal-close {
flex: 0 0 auto;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border:
1px solid
rgba(201, 162, 58, 0.38);
border-radius: 8px;
color: var(--text-title);
background:
rgba(255, 255, 255, 0.035);
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
}
.legend-modal-close:hover {
color: var(--gold-bright);
border-color:
rgba(230, 201, 111, 0.72);
}
.legend-modal-close:focus-visible {
outline:
2px solid
var(--gold-light);
outline-offset: 2px;
}
.legend-modal-tabs {
display: flex;
gap: 8px;
padding: 14px 18px 0;
}
.legend-modal-tabs[hidden] {
display: none;
}
.legend-modal-tab {
flex: 1 1 0;
min-height: 42px;
padding: 8px 12px;
border:
1px solid
rgba(201, 162, 58, 0.30);
border-radius: 7px;
color: #b9af9b;
background:
rgba(255, 255, 255, 0.025);
cursor: pointer;
}
.legend-modal-tab.is-active {
color: #18130a;
border-color:
rgba(230, 201, 111, 0.90);
background:
linear-gradient(
180deg,
var(--gold-light),
var(--gold)
);
font-weight: 700;
}
.legend-modal-tab:focus-visible {
outline:
2px solid
var(--gold-light);
outline-offset: 2px;
}
.legend-modal-content {
padding: 16px 18px 19px;
color: var(--text);
}
.legend-entry-list {
display: grid;
gap: 7px;
}
.legend-entry {
display: grid;
grid-template-columns:
minmax(42px, auto)
minmax(0, 1fr);
gap: 11px;
align-items: start;
padding: 9px 10px;
border:
1px solid
rgba(201, 162, 58, 0.15);
border-radius: 7px;
background:
rgba(255, 255, 255, 0.025);
}
.legend-entry-code {
min-width: 34px;
color: var(--gold-light);
font-size: 0.92rem;
line-height: 1.4;
}
.legend-entry-description {
min-width: 0;
color: #c9c0ad;
font-size: 0.88rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.legend-empty {
margin: 0;
color: var(--text-soft);
font-size: 0.9rem;
line-height: 1.5;
}
.dish-hover-preview {
position: fixed;
z-index: 1200;
width: min(420px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
padding: 5px;
border: 1px solid
rgba(201, 162, 58, 0.60);
border-radius: 8px;
background: rgba(10, 7, 3, 0.98);
box-shadow:
0 12px 34px
rgba(0, 0, 0, 0.52);
pointer-events: none;
}
.dish-hover-preview[hidden] {
display: none;
}
.dish-hover-preview img {
display: block;
width: 100%;
max-height: calc(100vh - 36px);
object-fit: contain;
border-radius: 4px;
}
.dish-image-lightbox {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background:
rgba(0, 0, 0, 0.82);
backdrop-filter: blur(3px);
}
.dish-image-lightbox-frame {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(92vw, 820px);
max-height: 88vh;
padding: 7px;
border: 1px solid
rgba(201, 162, 58, 0.62);
border-radius: 10px;
background: #0d0a06;
box-shadow:
0 16px 50px
rgba(0, 0, 0, 0.62);
}
.dish-image-lightbox-image {
display: block;
max-width: 100%;
max-height: calc(88vh - 14px);
object-fit: contain;
border-radius: 5px;
cursor: zoom-out;
}
.dish-image-lightbox-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid
rgba(201, 162, 58, 0.72);
border-radius: 50%;
background: rgba(12, 8, 3, 0.88);
color: var(--gold-light);
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
}
.dish-image-lightbox-close:focus-visible {
outline: 2px solid
var(--gold-light);
outline-offset: 3px;
}
@media (hover: none), (pointer: coarse) {
.dish-hover-preview {
display: none ;
}
}