.trs-ldg,
.trs-ldg-layer,
.trs-ldg-overlay { --ldg-radius: 0.42em;
--ldg-border: #e2e2e2;
--ldg-border-active: #1a1a1a;
--ldg-text: #1a1a1a;
--ldg-muted: #6b6b6b;
--ldg-bg: #ffffff;
--ldg-accent: var(--trs-terracotta, #b97d5a);
--ldg-accent-hover: var(--trs-red, #9e4b2f);
--ldg-range: rgba(185, 125, 90, .14);
--ldg-shadow: 0 24px 54px rgba(0, 0, 0, .12);
} .trs-ldg {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
font-family: var(--trs-font-nav, system-ui, sans-serif);
color: var(--ldg-text);
text-align: left;
}
.trs-ldg *,
.trs-ldg *::before,
.trs-ldg *::after,
.trs-ldg-overlay *,
.trs-ldg-overlay *::before,
.trs-ldg-overlay *::after,
.trs-ldg-layer *,
.trs-ldg-layer *::before,
.trs-ldg-layer *::after { box-sizing: border-box; }
.trs-ldg button,
.trs-ldg-layer button { font: inherit; color: inherit; } .trs-ldg-layer {
position: absolute;
top: 0; left: 0;
width: 0; height: 0;
z-index: 99990;
font-family: var(--trs-font-nav, system-ui, sans-serif);
color: var(--ldg-text);
text-align: left;
} .trs-ldg__form {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: stretch;
}
@media (min-width: 768px) {
.trs-ldg__form { grid-template-columns: 1.25fr 1fr auto; gap: 16px; }
}
.trs-ldg__dates-wrap,
.trs-ldg__guests-wrap { position: relative; }
.trs-ldg__box {
position: relative;
display: flex;
width: 100%;
min-height: 72px;
background: var(--ldg-bg);
border: 1px solid var(--ldg-border);
border-radius: var(--ldg-radius);
transition: border-color .15s ease, box-shadow .15s ease;
}
.trs-ldg__box.is-active,
.trs-ldg__box:focus-within { border-color: var(--ldg-border-active); box-shadow: 0 0 0 1px var(--ldg-border-active); } .trs-ldg__half {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
padding: 10px 20px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
.trs-ldg__half + .trs-ldg__half { border-left: 1px solid var(--ldg-border); }
.trs-ldg__half:focus-visible { outline: 2px solid var(--ldg-border-active); outline-offset: -4px; border-radius: var(--ldg-radius); }
.trs-ldg__lbl {
font-size: 18px;
color: var(--ldg-muted);
line-height: 1.2;
transition: font-size .15s ease;
}
.trs-ldg__val {
font-size: 18px;
color: var(--ldg-text);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trs-ldg__val:empty { display: none; } .trs-ldg__half.has-value .trs-ldg__lbl,
.trs-ldg__half.is-picking .trs-ldg__lbl { font-size: 13px; }
.trs-ldg__half.is-picking .trs-ldg__lbl { color: var(--ldg-text); font-weight: 600; }
.trs-ldg__clear {
align-self: center;
flex: 0 0 auto;
width: 30px; height: 30px;
margin-right: 14px;
padding: 0;
border: 0;
border-radius: 50%;
background: #8a8a8a;
color: #fff !important;
font-size: 20px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.trs-ldg__clear:hover { background: var(--ldg-text); }
.trs-ldg__clear[hidden] { display: none; } .trs-ldg__guests {
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 10px 52px 10px 20px;
text-align: left;
cursor: pointer;
}
.trs-ldg__lbl--fixed { font-size: 13px; }
.trs-ldg__val--fixed { font-size: 18px; }
.trs-ldg__chev {
position: absolute;
right: 20px;
top: calc(50% - 9px);
display: block;
overflow: visible;
transform-origin: 50% 50%;
transition: transform .2s ease;
}
.trs-ldg__guests.is-active .trs-ldg__chev { transform: rotate(180deg); } .trs-ldg__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 72px;
padding: 0 40px;
border: 0;
border-radius: 0;
background: var(--ldg-accent);
color: #fff !important;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease;
}
.trs-ldg__submit:hover,
.trs-ldg__submit:focus-visible { background: var(--ldg-accent-hover); }
.trs-ldg.is-loading .trs-ldg__submit { opacity: .6; pointer-events: none; }
@media (min-width: 1024px) { .trs-ldg__submit { padding: 0 56px; } } .trs-ldg__pop {
position: absolute;
top: 0;
left: 0;
background: var(--ldg-bg);
border-radius: 4px;
box-shadow: var(--ldg-shadow);
}
.trs-ldg__pop[hidden] { display: none; } .trs-hero__content:has(.trs-ldg.is-open) { z-index: 20; }
.trs-ldg.is-open { z-index: 20; } .trs-ldg__cal {
width: min(380px, calc(100vw - 32px));
padding: 20px 20px 24px;
}
@media (min-width: 768px) {
.trs-ldg__cal { width: 760px; max-width: calc(100vw - 48px); padding: 20px 28px 28px; }
}
.trs-ldg__months {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 768px) { .trs-ldg__months { grid-template-columns: 1fr 1fr; } }
.trs-ldg__mtitle {
height: 44px;
margin-bottom: 14px;
font-size: 18px;
line-height: 44px;
text-align: center;
text-transform: lowercase;
}
.trs-ldg__nav {
position: absolute;
top: 20px;
display: grid;
place-items: center;
width: 56px; height: 44px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
cursor: pointer;
}
.trs-ldg__nav--prev { left: 20px; }
.trs-ldg__nav--next { right: 20px; }
@media (min-width: 768px) {
.trs-ldg__nav--prev { left: 28px; }
.trs-ldg__nav--next { right: 28px; }
}
.trs-ldg__nav:hover:not(:disabled),
.trs-ldg__nav:focus-visible { border-color: var(--ldg-border-active); }
.trs-ldg__nav:disabled { opacity: .3; cursor: default; }
.trs-ldg__grid7 {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.trs-ldg__wd span {
padding-bottom: 14px;
font-size: 15px;
color: var(--ldg-muted);
text-align: center;
}
.trs-ldg__days { row-gap: 4px; }
.trs-ldg__day {
position: relative;
height: 52px;
padding: 0;
border: 0;
background: transparent;
font-size: 17px;
cursor: pointer;
}
.trs-ldg__day span {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
transition: background .12s ease, color .12s ease;
}
.trs-ldg__day:hover:not(:disabled) span { box-shadow: inset 0 0 0 1px var(--ldg-border-active); }
.trs-ldg__day:focus-visible { outline: none; }
.trs-ldg__day:focus-visible span { box-shadow: inset 0 0 0 2px var(--ldg-border-active); }
.trs-ldg__day.is-today span { font-weight: 700; }
.trs-ldg__day.is-past { color: #b5b5b5; cursor: default; }
.trs-ldg__day.is-past span { text-decoration: line-through; }
.trs-ldg__day.is-other { visibility: hidden; pointer-events: none; } .trs-ldg__day.is-in::before,
.trs-ldg__day.is-start.has-range::before,
.trs-ldg__day.is-end::before {
content: "";
position: absolute;
top: 4px; bottom: 4px;
left: 0; right: 0;
background: var(--ldg-range);
}
.trs-ldg__day.is-end::before { right: 50%; }
.trs-ldg__day.is-start.has-range::before { left: 50%; }
.trs-ldg__day.is-start span,
.trs-ldg__day.is-end span {
background: var(--ldg-accent);
color: #fff;
font-weight: 600;
} .trs-ldg__gpop {
width: 440px;
max-width: calc(100vw - 32px);
padding: 20px 28px 24px;
}
.trs-ldg__grow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
}
.trs-ldg__gtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trs-ldg__gname { font-size: 17px; white-space: nowrap; }
.trs-ldg__gsub { white-space: nowrap; }
@media (max-width: 479px) {
.trs-ldg__gpop { padding: 16px 18px 20px; }
.trs-ldg__gname, .trs-ldg__gsub { white-space: normal; }
.trs-ldg__gctl { gap: 8px; }
}
.trs-ldg__gsub { font-size: 15px; color: var(--ldg-muted); }
.trs-ldg__gctl {
display: flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
}
.trs-ldg__gctl button {
display: grid;
place-items: center;
width: 46px; height: 42px;
padding: 0;
border: 1px solid var(--ldg-border);
border-radius: 6px;
background: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.trs-ldg__gctl button:hover:not(:disabled),
.trs-ldg__gctl button:focus-visible { border-color: var(--ldg-border-active); box-shadow: 0 0 0 1px var(--ldg-border-active); outline: none; }
.trs-ldg__gctl button:disabled { color: #d0d0d0; cursor: default; }
.trs-ldg__gctl output { width: 2em; font-size: 18px; text-align: center; }
.trs-ldg__done {
display: block;
width: 100%;
margin-top: 18px;
padding: 14px;
border: 1px solid var(--ldg-border);
border-radius: 6px;
background: #fff;
font-size: 17px;
cursor: pointer;
}
.trs-ldg__done:hover,
.trs-ldg__done:focus-visible { border-color: var(--ldg-border-active); outline: none; } .trs-ldg__results {
margin-top: 12px;
padding: var(--trs-space-md, 20px);
background: var(--trs-offwhite, #f5f2eb);
color: var(--trs-black, #1a1a1a);
border-radius: 4px;
box-shadow: var(--ldg-shadow);
}
.trs-ldg__results[hidden] { display: none; } .trs-ldg-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(20, 16, 12, .45);
font-family: var(--trs-font-nav, system-ui, sans-serif);
color: var(--ldg-text);
text-align: left;
animation: trs-ldg-fade .2s ease;
}
.trs-ldg-overlay[hidden] { display: none; }
.trs-ldg__results--modal {
width: min(1100px, 100%);
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: clamp(20px, 3vw, 36px);
}
html.trs-ldg-lock { overflow: hidden; }
@keyframes trs-ldg-fade { from { opacity: 0; } to { opacity: 1; } }
.trs-ldg__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
font-size: var(--trs-fs-p-sm, 14px);
text-transform: uppercase;
letter-spacing: .06em;
}
.trs-ldg__close {
width: 32px; height: 32px;
border: 0; background: transparent;
font-size: 24px; line-height: 1;
cursor: pointer;
}
.trs-ldg__msg { margin: 0 0 12px; font-family: var(--trs-font-body, inherit); font-size: var(--trs-fs-p, 16px); }
.trs-ldg__msg--loading { opacity: .7; margin: 0; }
.trs-ldg__rgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px)  { .trs-ldg__rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trs-ldg__rgrid { grid-template-columns: repeat(4, 1fr); } }
.trs-ldg__card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.08); }
.trs-ldg__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--trs-beige, #e8dfd0); }
.trs-ldg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trs-ldg__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px; }
.trs-ldg__name { margin: 0; font-family: var(--trs-font-display, inherit); font-size: var(--trs-fs-h4, 20px); line-height: 1.2; }
.trs-ldg__name a { color: inherit; text-decoration: none; }
.trs-ldg__cap,
.trs-ldg__status { margin: 0; font-size: var(--trs-fs-p-xs, 12px); text-transform: uppercase; letter-spacing: .06em; }
.trs-ldg__cap { opacity: .6; }
.trs-ldg__card.is-available .trs-ldg__status { color: var(--ldg-accent); font-weight: 600; }
.trs-ldg__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-top: auto;
padding-top: 8px;
}
.trs-ldg__book {
display: block;
padding: 12px 14px;
text-align: center;
font-size: var(--trs-fs-btn, 13px);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .06em;
text-decoration: none;
background: var(--ldg-accent);
color: #fff;
transition: background .15s ease, color .15s ease;
}
.trs-ldg__book:hover { background: var(--ldg-accent-hover); color: #fff; }
.trs-ldg__book--ghost { background: transparent; color: var(--trs-black, #1a1a1a); border: 1px solid currentColor; }
.trs-ldg__book--ghost:hover { background: var(--trs-black, #1a1a1a); color: #fff; } .trs-ldg__see {
align-self: center;
padding: 2px 0;
font-size: var(--trs-fs-p-xs, 12px);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--trs-black, #1a1a1a);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.trs-ldg__see:hover { color: var(--ldg-accent); }
.trs-ldg__card.is-unavailable,
.trs-ldg__card.is-capacity { opacity: .55; }
.trs-ldg__card.is-unavailable .trs-ldg__img img,
.trs-ldg__card.is-capacity .trs-ldg__img img { filter: grayscale(1); }  :where(.trs-ldg, .trs-ldg-layer, .trs-ldg-overlay) button,
:where(.trs-ldg, .trs-ldg-layer, .trs-ldg-overlay) button:hover,
:where(.trs-ldg, .trs-ldg-layer, .trs-ldg-overlay) button:focus,
:where(.trs-ldg, .trs-ldg-layer, .trs-ldg-overlay) button:active {
box-shadow: none;
transform: none;
} .trs-ldg .trs-ldg__half,
.trs-ldg .trs-ldg__half:hover,
.trs-ldg .trs-ldg__half:focus,
.trs-ldg .trs-ldg__half:active,
.trs-ldg-overlay .trs-ldg__close,
.trs-ldg-overlay .trs-ldg__close:hover,
.trs-ldg-overlay .trs-ldg__close:focus,
.trs-ldg-overlay .trs-ldg__close:active,
.trs-ldg-layer .trs-ldg__nav,
.trs-ldg-layer .trs-ldg__nav:hover,
.trs-ldg-layer .trs-ldg__nav:focus,
.trs-ldg-layer .trs-ldg__day,
.trs-ldg-layer .trs-ldg__day:hover,
.trs-ldg-layer .trs-ldg__day:focus {
background: transparent;
color: var(--ldg-text);
box-shadow: none;
}
.trs-ldg-layer .trs-ldg__day.is-past,
.trs-ldg-layer .trs-ldg__day.is-past:hover { color: #b5b5b5; } .trs-ldg .trs-ldg__guests,
.trs-ldg .trs-ldg__guests:hover,
.trs-ldg .trs-ldg__guests:focus,
.trs-ldg .trs-ldg__guests:active,
.trs-ldg .trs-ldg__guests.is-active {
background: var(--ldg-bg);
color: var(--ldg-text);
} .trs-ldg .trs-ldg__guests:hover:not(.is-active):not(:focus-visible) { box-shadow: none; }
.trs-ldg .trs-ldg__guests.is-active,
.trs-ldg .trs-ldg__guests:focus-visible { border-color: var(--ldg-border-active); box-shadow: 0 0 0 1px var(--ldg-border-active); }
.trs-ldg .trs-ldg__guests:focus:not(:focus-visible):not(.is-active) { border-color: var(--ldg-border); box-shadow: none; } .trs-ldg-layer .trs-ldg__gctl button,
.trs-ldg-layer .trs-ldg__gctl button:hover,
.trs-ldg-layer .trs-ldg__gctl button:focus,
.trs-ldg-layer .trs-ldg__done,
.trs-ldg-layer .trs-ldg__done:hover,
.trs-ldg-layer .trs-ldg__done:focus { background: #fff; color: var(--ldg-text); }
.trs-ldg-layer .trs-ldg__gctl button:disabled { color: #d0d0d0; } .trs-ldg .trs-ldg__clear:focus { background: #8a8a8a; color: #fff; }
.trs-ldg .trs-ldg__clear:hover { background: var(--ldg-text); color: #fff; }
.trs-ldg .trs-ldg__submit:focus { background: var(--ldg-accent); color: #fff; }
.trs-ldg .trs-ldg__submit:hover,
.trs-ldg .trs-ldg__submit:focus-visible { background: var(--ldg-accent-hover); color: #fff; } .trs-ldg-overlay {
top: 0; right: 0; bottom: 0; left: 0;
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
} .trs-ldg__img { aspect-ratio: auto; height: 170px; flex: 0 0 170px; }
.trs-ldg__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 599px) { .trs-ldg__img { height: 190px; flex-basis: 190px; } } .trs-ldg__msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.trs-ldg__msg a:hover { color: var(--ldg-accent); }