/* =========================================================================
ХОТЕЛ СЛАВЯНИ — основен стилов файл
Mobile-first: базовите правила са за малък екран, надграждат се с min-width.
Съдържание:
1. Токени и база
2. Общи елементи (секции, заглавия, бутони)
3. Хедър и навигация
4. Hero слайдшоу + инфо панел
5. Комплексът
6. Стаи и апартаменти
7. Настаняване (таблица с цени)
8. Удобства + lightbox
9. Въпроси & детайли (accordion)
10. Контакти & рецепция
11. Футър
12. Плаващ бутон (FAB)
13. Бисквитки
14. Вътрешни страници (стая, правни текстове, форма)
========================================================================= */
/* =========================================================================
1. ТОКЕНИ И БАЗА
========================================================================= */
:root {
/* ТЪМНА ТЕМА (по подразбиране) — виж [data-theme="light"] по-долу за
светлия комплект. Тогълът (assets/js/main.js) слага data-theme на
; при липса на JS страницата пада тук, към тъмната тема, каквато
сайтът винаги е бил. */
--c-header: #24272C;
--c-dark: #24282B; /* Настаняване, Въпроси, Контакти, Футър */
--c-cool: #24282B; /* Стаи и апартаменти, Удобства — графит, като целия сайт */
--c-complex: #24282B; /* Комплексът */
/* Акценти — извлечени от референтните снимки */
--gold: #C3A370;
--gold-bright: #E8BE79;
--gold-soft: rgba(195, 163, 112, .40);
--gold-faint: rgba(195, 163, 112, .14);
--red: #A81C18;
--red-light: #CE4A46;
--red-dark: #7E110E;
/* Топъл бронз/кехлибар — само за „Брънч“ (brunch.php), различим от
основното злато, за да усеща окото фина разлика спрямо А-ла-карт. */
--amber: #C1802E;
--amber-bright: #E0A356;
--amber-soft: rgba(193, 128, 46, .40);
--amber-faint: rgba(193, 128, 46, .12);
/* Текст */
--text: #ECE8E1;
--text-muted: rgba(236, 232, 225, .62);
--text-dim: rgba(236, 232, 225, .42);
/* Повърхности */
--panel: rgba(255, 255, 255, .035);
--panel-hover: rgba(255, 255, 255, .065);
--hairline: rgba(255, 255, 255, .10);
/* „Хартиени“ табла (лунч-афиш, hero инфо-кутия) — умишлено светли и в
двете теми (печатан лист), затова не се предефинират по-долу. */
--paper: #F2F0EC;
--paper-ink: #2A2721;
--paper-ink-muted:#58524A;
--paper-ink-soft: #6A6459;
--paper-ink-gold: #6B5A38;
/* Тъмен текст върху ярък акцент (златен/зелен бутон) — еднакъв и в двете
теми, самият акцент вече носи нужния контраст. */
--ink-on-accent: #1B1E21;
/* Текст върху ПЛЪТЕН златен фон. В тъмната тема златото е ярко → тъмен
текст (както --ink-on-accent). Светлата тема го предефинира на кремаво,
защото там златото е тъмно. */
--ink-on-gold: #1B1E21;
/* Светъл текст върху фиксирано тъмна повърхност (плаващ етикет на FAB,
.fab__label) — фонът там е нарочно тъмен и в двете теми (плаващ таг
над произволна снимка/съдържание), затова и текстът му остава
светлозлатен и в двете, а не следва --gold-bright. */
--gold-on-dark: #E8BE79;
--text-on-dark: rgba(236, 232, 225, .72);
/* Модал (бисквитки) и превключвателят в него */
--modal-bg: #22262A;
--switch-track-off: rgba(255, 255, 255, .14);
--switch-thumb: #8E9398;
/* Полета на формите (текст/select) — на тъмен фон леко "хлътнали"
(черна полу-прозрачност); на светъл фон обратното би дало грозна
сиво-кафява кутия, затова има собствен светъл комплект по-долу. */
--field-bg: rgba(0, 0, 0, .22);
--field-bg-focus: rgba(0, 0, 0, .34);
/* Hover фон на карта/плочка (.menu-card, .menu-more__card, .faq-item в
menu-panel, .contact-box) — на тъмен фон леко ПРОСВЕТЛЯВА тъмната
повърхност; на светъл фон трябва леко да ПРИТЪМНЯВА светлата, не да
скача към почти черно (нечетимо със златния текст отгоре). */
--card-hover: #2E3337;
/* Основа за фини "потъмнявания/просветлявания" върху повърхност, която
вече е тонирана по темата (напр. клетките на календара за наличност
върху .cal-card { background: var(--panel) }) — на тъмен фон
просветляваме с бяло, на светъл — притъмняваме със същата основа като
--panel/--hairline, само алфата на всяко petno си остава. */
--tint-rgb: 255, 255, 255;
/* Статус съобщения (форма за запитване) */
--status-ok-text: #9BE7B8;
--status-ok-border: rgba(63, 191, 106, .5);
--status-ok-bg: rgba(63, 191, 106, .12);
--status-err-text: #F4A6A6;
--status-err-border: rgba(224, 72, 74, .5);
--status-err-bg: rgba(224, 72, 74, .12);
/* Форма и ритъм */
--radius: 6px;
--radius-lg: 10px;
--header-h: 62px;
--shell: 1240px;
--ease: cubic-bezier(.22, .61, .36, 1);
--font-display: "Playfair Display", "Times New Roman", Georgia, serif;
--font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* СВЕТЛА ТЕМА — тогълът (assets/js/main.js) слага data-theme="light" на
. Топъл крем/бежов фон вместо чисто бяло; златото/кехлибарът са
по-тъмни и по-наситени, отколкото на тъмен фон, за да не избеляват върху
светлия — виж README-то на задачата. Всичко, което тук НЕ е предефинирано
(--paper*, --ink-on-accent, --amber*, --switch-thumb…), остава same като в
:root — тези повърхности умишлено не зависят от темата (виж коментарите
там за причината — „хартия“, текст върху ярък бутон, снимки).
Изключение: --ink-on-gold СЕ предефинира тук (златото на светло е тъмно). */
[data-theme="light"] {
/* Фон на самия body — отделен от --c-header/--c-dark/--c-cool/--c-complex
по-долу (тези остават F3ECDC, за ЦЕЛИ секции/„повърхности“, недокоснати
нарочно). body { background } пада тук чрез var(--body-bg, var(--c-dark))
в блок 1; тъмната тема няма --body-bg изобщо, затова там fallback-ът
към --c-dark си остава напълно непроменен. */
--body-bg: #FBF6EC;
--c-header: #F3ECDC;
--c-dark: #F3ECDC;
--c-cool: #F3ECDC;
--c-complex: #F3ECDC;
/* Златото на светъл фон върши работа и като ТЕКСТ (навигация, надписи,
иконки, breadcrumbs, footer линкове), не само като контур, затова е
фиксирано тук — вече НЕ зависи от админ настройката за тъмната тема
(виж includes/head.php: инжектирането на --gold там вече важи само за
тъмната тема). --gold-bright е по-тъмният hover/активен нюанс.
Стойността НЕ е първоначално заявеният #A6812E — той минаваше само
3.07:1 контраст срещу светлите фонове (F3ECDC/FBF6EC), под WCAG AA
прага 4.5:1 за нормален текст (хванато от axe-core одит). Затъмнено до
#826524 — 5.08:1 / 4.65:1, същото семейство нюанс. */
--gold: #826524;
--gold-bright: #7C5A2B;
--gold-soft: rgba(130, 101, 36, .42);
--gold-faint: rgba(130, 101, 36, .13);
--amber: #8A4C17;
--amber-bright: #5A3009;
--amber-soft: rgba(138, 76, 23, .42);
--amber-faint: rgba(138, 76, 23, .12);
/* Регално бордо — втори акцент за CTA бутони/оферти (напр. бутона
„РЕЦЕПЦИЯ“, .btn-gold градиента). Override само тук — тъмната тема пази
своя --red от :root непроменен (виж includes/head.php: инжектирането на
--red вече важи само за тъмната тема). --red-light/--red-dark са ръчно
подбрани по-светъл/по-тъмен нюанс на СЪЩИЯ тон, за градиента на бутона
(същия принцип като тъмната тема — виж --red-light/--red-dark в :root). */
--red: #7A1F2B;
--red-light: #A8434F;
--red-dark: #5C1720;
/* Текст: основен и второстепенен — фиксирани, плътни стойности вместо
rgba над --text, за да съвпадат точно с исканите цветове. */
--text: #241B12;
--text-muted: #6B5F4E;
/* .75 алфа сваляше ефективния контраст под WCAG AA (3.2:1 върху
breadcrumbs/footer текст — хванато от axe-core). .97 минава 4.5:1 и
срещу по-трудния плътен фон (F3ECDC/FBF6EC), И срещу полу-прозрачния
--panel върху тях (~#EAE3D4, календара) — пак леко по-приглушено от
--text-muted. */
--text-dim: rgba(107, 95, 78, .97);
/* Текст/икони ВЪРХУ плътен златен фон (FAB, избран ден в календара,
активен таб на обедното меню) — тук златото е тъмно, затова кремаво. */
--ink-on-gold: #FFFCF7;
--panel: rgba(30, 22, 10, .04);
--panel-hover: rgba(30, 22, 10, .07);
--hairline: #E4D9C3;
--paper: #FFFDF9;
--modal-bg: #FFFFFF;
--switch-track-off: rgba(30, 22, 10, .16);
--status-ok-text: #17673A;
--status-ok-border: rgba(23, 103, 58, .45);
--status-ok-bg: rgba(23, 103, 58, .10);
--status-err-text: #9A2C2C;
--status-err-border: rgba(154, 44, 44, .45);
--status-err-bg: rgba(154, 44, 44, .09);
--field-bg: rgba(255, 255, 255, .65);
--field-bg-focus: rgba(255, 255, 255, .9);
--card-hover: #E6DBC2;
--tint-rgb: 30, 22, 10;
}
/* Плавна смяна на темата (не рязко превключване) — покрива елементите,
които не дефинират собствен transition; тези с такъв (бутони, карти)
вече включват background/border/color в него и продължават да работят
както досега. */
*, *::before, *::after {
transition-property: background-color, border-color, color, box-shadow;
transition-duration: .3s;
transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; }
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Котвите да не попадат под фиксирания хедър */
scroll-padding-top: calc(var(--header-h) + 8px);
-webkit-text-size-adjust: 100%;
/* Целият изглед е смален на 90%, за да се вижда повече от страницата
(напр. точките за смяна на корицата) без ръчно да се намалява zoom-а. */
zoom: 90%;
/* При отворен модал/лайтбокс (body{overflow:hidden}) скролбарът изчезва
и viewport-ът временно се разширява — фиксирани елементи с "right"
(плаващият бутон „+“ долу вдясно) се отместват. Запазва мястото на
скролбара винаги, за да няма скок. */
scrollbar-gutter: stable;
}
body {
margin: 0;
/* --body-bg съществува само в [data-theme="light"] (виж по-горе) — тъмната
тема няма такъв токен, затова автоматично пада към var(--c-dark),
точно както преди тази промяна. */
background: var(--body-bg, var(--c-dark));
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a {
color: inherit;
text-decoration: none;
transition: color .25s var(--ease);
}
button { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.ic { flex: none; }
/* Достъпно скриване (за етикети към екранни четци) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =========================================================================
2. ОБЩИ ЕЛЕМЕНТИ
========================================================================= */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: 16px;
}
@media (min-width: 768px) { .shell { padding-inline: 24px; } }
.section { padding-block: 54px; }
.section--dark { background: var(--c-dark); }
.section--cool { background: var(--c-cool); }
.section--complex { background: var(--c-complex); }
/* Заглавие на секция: златен текст с тънки линии отстрани (реф. снимка 11) */
.section-title {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 34px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem);
letter-spacing: .06em;
color: var(--gold-bright);
text-align: center;
justify-content: center;
}
/* Работно време на рецепция — под заглавието „Стаи и апартаменти“
(index.php #rooms и nastanyavane.php), settings.reception_hours. */
.rooms-reception-hours {
margin: -20px 0 24px;
text-align: center;
font-size: .88rem;
color: var(--text-muted);
}
/* Работно време под уводния текст в „НАШИТЕ МЕНЮТА“ (restoran.php). */
.restoran-hours {
margin: 8px 0 0;
text-align: center;
font-size: .85rem;
color: var(--gold);
}
.section-title::before,
.section-title::after {
content: "";
flex: 1 1 0;
max-width: 190px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.section-title::after {
background: linear-gradient(90deg, var(--gold-soft), transparent);
}
/* Златен контурен бутон */
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 20px;
border: 1px solid var(--gold-soft);
border-radius: var(--radius);
background: transparent;
color: var(--gold-bright);
font-size: .78rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
transition: background .3s var(--ease), border-color .3s var(--ease),
transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-gold:hover,
.btn-gold:focus-visible {
background: var(--gold-faint);
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
/* Деликатна glow рамка — ползва се от кутийките в „Комплексът“ и „Контакти“ */
.glow-card {
position: relative;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--panel);
transition: background .3s var(--ease), border-color .3s var(--ease),
box-shadow .3s var(--ease);
}
.glow-card:hover,
.glow-card:focus-within {
background: var(--panel-hover);
border-color: var(--gold-soft);
box-shadow: 0 0 0 1px var(--gold-faint), 0 10px 30px rgba(0, 0, 0, .32);
}
/* Плавно появяване при скрол (IntersectionObserver в main.js).
Скриването важи само когато JS работи — без него всичко се вижда веднага. */
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation-duration: .001ms !important; }
}
/* =========================================================================
3. ХЕДЪР И НАВИГАЦИЯ
========================================================================= */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 900;
height: var(--header-h);
background: var(--c-header);
border-bottom: 1px solid rgba(0, 0, 0, .4);
transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck {
box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.header-inner {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
min-width: 0;
}
/* --- лого --- */
.brand {
display: flex;
align-items: center;
gap: 10px;
margin-right: auto;
color: var(--gold);
}
.brand__mark { width: 32px; height: 32px; }
/* Логото (PNG с тъмен текст + златни детайли, изпечени в пикселите) на
тъмната тема: тъмният текст изчезва на тъмния хедър. .brand__mark--tint
е силует на СЪЩОТО изображение през CSS mask (по алфа канала — цветовете
на оригинала не влияят), запълнен с var(--gold) — същия цвят като
линковете в менюто. Светлата тема пази оригиналния PNG непроменен
(тъмният текст там е четим и е част от дизайна). */
.brand__mark--tint {
display: none;
background-color: var(--gold);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
/* 100% 100%, не contain — без адрес: клик го превключва (.is-open, main.js).
„Ресторант“ е : клик отваря страницата, подменюто
излиза само на hover/фокус. Затова стилът важи и за button, и за a. */
.nav-dropdown__toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 2px;
background: transparent;
border: 0;
color: var(--gold);
font: inherit;
font-size: .92rem;
letter-spacing: .02em;
cursor: pointer;
}
.nav-dropdown__label { color: inherit; }
/* Невидим „мост“ над отстоянието до менюто, за да не се губи hover-ът. */
.nav-dropdown::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 10px;
}
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle:focus-visible,
.nav-dropdown:hover .nav-dropdown__toggle,
.nav-dropdown:focus-within .nav-dropdown__toggle,
.nav-dropdown.is-open .nav-dropdown__toggle { color: var(--gold-bright); }
.nav-dropdown__caret {
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .2s var(--ease);
}
.nav-dropdown.is-open .nav-dropdown__caret,
.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret { transform: rotate(-135deg); }
.nav-dropdown__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
padding: 6px;
background: var(--c-header);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
display: grid;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
z-index: 950;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown__menu a,
.nav-dropdown__menu button {
display: block;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: calc(var(--radius) - 4px);
background: transparent;
color: var(--gold);
font: inherit;
font-size: .88rem;
text-align: left;
cursor: pointer;
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__menu button:hover,
.nav-dropdown__menu button:focus-visible { background: var(--gold-faint); color: var(--gold-bright); }
/* --- CTA „Рецепция“ --- */
/* Мобилно: компактен вид — само икона + номер. Десктоп: пълен пил бутон. */
.cta-reception {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 5px 13px 5px 6px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
background: linear-gradient(180deg, var(--red-light), var(--red) 52%, var(--red-dark));
color: #fff;
overflow: hidden;
position: relative;
animation: cta-pulse 2.8s ease-in-out infinite;
}
.cta-reception__icon {
display: grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
}
.cta-reception__label {
display: none;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.25;
}
.cta-reception__num {
display: none;
font-size: .74rem;
font-weight: 600;
opacity: .92;
line-height: 1.25;
white-space: nowrap;
}
/* Под 600px бутонът се свива до кръгла икона — остава видим, без да изтласква менюто */
@media (max-width: 599px) {
.cta-reception {
width: 46px;
padding: 0;
justify-content: center;
gap: 0;
}
}
@media (min-width: 600px) {
.cta-reception__num { display: block; }
}
/* Пулс + златна просветка, преминаваща през бутона */
@keyframes cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(206, 74, 70, .55); transform: scale(1); }
50% { box-shadow: 0 0 0 9px rgba(206, 74, 70, 0); transform: scale(1.025); }
}
.cta-reception::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(100deg,
transparent,
rgba(232, 190, 121, .55),
transparent);
transform: skewX(-18deg);
animation: cta-shine 5.5s ease-in-out infinite;
}
@keyframes cta-shine {
0%, 62% { left: -60%; }
86%, 100% { left: 130%; }
}
/* --- смяна на езика --- */
.lang-switch { position: relative; }
/* Само глобус + стрелка — без езиков код, вижте icon('globe') в head.php. */
.lang-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: transparent;
color: var(--gold);
cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] { border-color: var(--gold-soft); background: var(--gold-faint); }
.lang-toggle__caret {
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .2s var(--ease);
}
.lang-toggle[aria-expanded="true"] .lang-toggle__caret { transform: rotate(-135deg); }
/* Под 600px — квадратно копче с глобуса, колкото cta-reception, без стрелка */
@media (max-width: 599px) {
.lang-toggle { width: 44px; padding: 0; }
.lang-toggle__caret { display: none; }
}
.lang-list {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 170px;
padding: 6px;
background: var(--c-header);
border: 1px solid var(--hairline);
border-radius: var(--radius);
box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
display: grid;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
z-index: 950;
}
.lang-switch.is-open .lang-list {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: calc(var(--radius) - 4px);
color: var(--gold);
font-size: .88rem;
}
.lang-item:hover,
.lang-item:focus-visible { background: var(--gold-faint); color: var(--gold-bright); }
.lang-item.is-active { color: var(--gold-bright); font-weight: 700; }
.lang-item__code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 2px 4px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .03em;
}
.lang-item__name { white-space: nowrap; }
/* --- хамбургер --- */
.nav-toggle {
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: transparent;
color: var(--gold);
cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav-toggle:hover { border-color: var(--gold-soft); background: var(--gold-faint); }
/* --- мобилно падащо меню --- */
.mobile-nav {
position: fixed;
top: var(--header-h);
left: 0; right: 0;
z-index: 890;
background: var(--c-header);
border-bottom: 1px solid var(--hairline);
box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
display: grid;
overflow: hidden;
max-height: 0;
transition: max-height .38s var(--ease);
}
.mobile-nav.is-open { max-height: 60vh; overflow-y: auto; }
.mobile-nav a,
.mobile-nav__btn {
display: block;
width: 100%;
padding: 15px 20px;
border: 0;
background: transparent;
color: var(--gold);
border-bottom: 1px solid var(--hairline);
font: inherit;
font-size: 1rem;
text-align: left;
cursor: pointer;
}
.mobile-nav > *:last-child { border-bottom: 0; }
.mobile-nav a:hover,
.mobile-nav__btn:hover { background: var(--gold-faint); color: var(--gold-bright); }
/* --- „Настаняване“/„Ресторант“ в мобилното меню: акордеон, огледало на
.nav-dropdown на десктоп (виж groups в header(), main.js) --- */
.mobile-nav__group { border-bottom: 1px solid var(--hairline); }
.mobile-nav__group:last-child { border-bottom: 0; }
.mobile-nav__row { display: flex; align-items: stretch; }
/* по-висока специфичност от „.mobile-nav a“ по-горе — рамката вече е на
.mobile-nav__group, за да опасва целия ред заедно със стрелката */
.mobile-nav__row .mobile-nav__link {
flex: 1;
min-width: 0;
padding: 15px 20px;
border: 0;
}
.mobile-nav__caret-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
flex: none;
border: 0;
border-left: 1px solid var(--hairline);
background: transparent;
color: var(--gold);
cursor: pointer;
}
.mobile-nav__caret-btn:hover,
.mobile-nav__group.is-open .mobile-nav__caret-btn { background: var(--gold-faint); color: var(--gold-bright); }
.mobile-nav__caret {
width: 7px; height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .2s var(--ease);
}
.mobile-nav__group.is-open .mobile-nav__caret { transform: rotate(-135deg); }
.mobile-nav__submenu {
max-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, .18);
transition: max-height .3s var(--ease);
}
/* На светла тема силното затъмняване сваля златния текст на подточките под
3.6:1 — тук е лек кремав нюанс, който само подсказва вложеност. */
[data-theme="light"] .mobile-nav__submenu { background: rgba(30, 22, 10, .05); }
.mobile-nav__group.is-open .mobile-nav__submenu { max-height: 260px; }
/* по-висока специфичност от „.mobile-nav a“/„.mobile-nav__btn“ по-горе —
подменюто е с по-малък шрифт и отстъп навътре */
.mobile-nav .mobile-nav__submenu a,
.mobile-nav .mobile-nav__submenu .mobile-nav__btn {
padding: 12px 20px 12px 34px;
border-bottom: 1px solid var(--hairline);
font-size: .9rem;
}
.mobile-nav .mobile-nav__submenu > *:last-child { border-bottom: 0; }
/* --- тогъл светла/тъмна тема (хедър) — квадратна икона в стила на
.lang-toggle (виж includes/head.php): рамка, прозрачен фон, злато.
Показва се само иконата на активната тема — без плъзгач/хапче. Мобилният
близнак (.theme-toggle--mobile) пази старото плъзгащо „хапче“ в
.mobile-nav__theme-row. Поведението (клик, localStorage) е в main.js. --- */
.theme-toggle {
display: none;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: transparent;
color: var(--gold);
cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
@media (min-width: 900px) {
.theme-toggle:not(.theme-toggle--mobile) { display: inline-flex; }
}
.theme-toggle:hover,
.theme-toggle:focus-visible { border-color: var(--gold-soft); background: var(--gold-faint); }
.theme-toggle__icon {
display: none;
color: currentColor;
}
/* В хедъра се вижда само иконата на текущата тема (слънце на светло,
луна на тъмно) — иначе (мобилното „хапче“) правилото по-долу ги
показва и двете постоянно. */
html[data-theme="light"] .theme-toggle__icon--sun,
html:not([data-theme="light"]) .theme-toggle__icon--moon { display: inline-flex; }
/* --- мобилният вариант: плъзгащо „хапче“ в собствен ред на мобилното меню --- */
.theme-toggle--mobile {
position: relative;
display: flex;
justify-content: space-between;
width: 60px;
height: 32px;
padding: 0 7px;
border-radius: 999px;
background: var(--panel);
color: var(--text-dim);
}
.theme-toggle--mobile .theme-toggle__icon {
position: relative;
z-index: 1;
display: inline-flex;
transition: color .3s var(--ease);
}
.theme-toggle__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
transition: transform .3s var(--ease), background .3s var(--ease);
}
/* По подразбиране (тъмна тема) плъзгачът стои до луната; на светла тема
се мести до слънцето. */
html:not([data-theme="light"]) .theme-toggle--mobile .theme-toggle__thumb { transform: translateX(28px); }
html:not([data-theme="light"]) .theme-toggle--mobile .theme-toggle__icon--moon { color: var(--ink-on-gold); }
html[data-theme="light"] .theme-toggle--mobile .theme-toggle__icon--sun { color: var(--ink-on-gold); }
/* --- „хапчето“ в мобилното меню — собствен ред над навигационните точки --- */
.mobile-nav__theme-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid var(--hairline);
}
.mobile-nav__theme-label {
color: var(--gold);
font-size: .92rem;
}
@media (min-width: 900px) {
:root { --header-h: 76px; }
.nav { display: flex; }
.nav-toggle { display: none; }
.mobile-nav { display: none; }
.brand__mark { width: 42px; height: 42px; }
.brand__l1, .brand__l2 { font-size: 1.22rem; }
.cta-reception { gap: 10px; padding: 6px 22px 6px 9px; }
.cta-reception__icon { width: 32px; height: 32px; }
.cta-reception__label { display: block; font-size: .78rem; }
.cta-reception__num { font-size: .8rem; font-weight: 400; }
}
/* =========================================================================
4. HERO
========================================================================= */
/* Фонът е същият като на секция „Комплексът“, за да няма видима тъмна ивица
под снимката — кутията с отметките трябва да ляга направо върху нея. */
.hero {
position: relative;
margin-top: var(--header-h);
background: var(--c-complex);
}
.hero__viewport {
position: relative;
height: clamp(300px, 46vw, 560px);
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
}
.hero__viewport.is-dragging { cursor: grabbing; }
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .9s var(--ease);
pointer-events: none;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
}
/* Лек градиент долу, за да „седи“ инфо панелът върху снимката */
.hero__viewport::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(180deg, transparent, rgba(10, 12, 14, .55));
pointer-events: none;
}
/* Заместител, ако още няма качени снимки */
.hero__empty {
display: grid;
place-items: center;
height: 100%;
color: var(--text-dim);
background:
radial-gradient(120% 90% at 50% 0%, #2E3338, #16191C 70%);
font-size: .9rem;
letter-spacing: .04em;
}
/* --- инфо панел --- */
/* Отрицателният марж е точно половината от височината на кутията, за да
пада центърът ѝ върху границата между корицата и секция „Комплексът“:
горната половина остава върху снимката, долната — върху тъмния фон.
Мобилно кутията е на три реда (146px), от 768px нагоре — на един (64px). */
.hero__panel {
position: relative;
z-index: 2;
width: 100%;
margin: -68px auto 0;
max-width: 1040px;
background: var(--paper);
border-radius: 2px;
box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
display: grid;
gap: 0;
}
/* Всеки надпис стои на един ред — размерът се свива плавно с екрана,
за да се побере, вместо да се пренася на два реда. */
.hero__badge {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 18px;
color: var(--paper-ink-gold);
font-size: clamp(.6rem, .5rem + .3vw, .74rem);
font-weight: 700;
letter-spacing: .07em;
line-height: 1.35;
white-space: nowrap;
border-bottom: 1px solid rgba(107, 90, 56, .16);
}
.hero__badge:last-child { border-bottom: 0; }
.hero__badge .ic { color: var(--gold); }
/* Под 1000px кутията стои на три реда и светлият блок затиска снимката.
Там текстът минава в бяло върху прозрачен фон, направо върху корицата. */
@media (max-width: 999px) {
.hero__panel {
background: transparent;
box-shadow: none;
}
/* Трите реда започват от една линия — центрирането ги разместваше,
защото текстовете са различно дълги. Разделителните черти отпадат:
без светлия панел те увисват като случайни линии върху снимката. */
.hero__badge {
justify-content: flex-start;
padding-block: 10px;
color: #fff;
border-bottom: 0;
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.hero__badge .ic { color: var(--gold-bright); }
}
/* Само на мобилен — на таблет/десктоп панелът остава (виж горе) */
@media (max-width: 767px) {
.hero__panel { display: none; }
}
/* --- точки --- */
.hero__dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 18px 0 4px;
background: var(--c-dark);
}
.hero__dot {
width: 44px; height: 44px;
display: grid;
place-items: center;
border: 0;
background: none;
cursor: pointer;
padding: 0;
}
.hero__dot::before {
content: "";
width: 9px; height: 9px;
border-radius: 50%;
border: 1px solid var(--gold-soft);
background: transparent;
transition: background .3s var(--ease), transform .3s var(--ease),
border-color .3s var(--ease);
}
.hero__dot.is-active::before {
background: var(--gold);
border-color: var(--gold);
transform: scale(1.15);
}
/* Трите надписа минават в един ред чак когато има място всеки да е
на един ред. По-тясно от това остават един под друг. */
@media (min-width: 1000px) {
.hero__panel {
grid-auto-flow: column;
grid-auto-columns: 1fr;
margin-top: -23px;
}
.hero__badge {
border-bottom: 0;
border-right: 1px solid rgba(107, 90, 56, .16);
}
.hero__badge:last-child { border-right: 0; }
}
/* =========================================================================
5. КОМПЛЕКСЪТ
========================================================================= */
/* Кутията с отметките вече слиза в тази секция, затова горният отстъп е
по-малък — иначе между нея и заглавието зее празнина. */
#complex { padding-top: 34px; }
.complex-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.complex-box {
display: grid;
justify-items: center;
gap: 10px;
padding: 26px 18px;
text-align: center;
}
.complex-box__icon { color: var(--gold); }
.complex-box__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 500;
letter-spacing: .02em;
color: var(--gold-bright);
}
.complex-box__text {
margin: 0;
max-width: 30ch;
font-size: .88rem;
color: var(--text-muted);
}
.complex-box__hours {
margin: 2px 0 0;
font-size: .8rem;
color: var(--gold);
}
@media (min-width: 620px) {
.complex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.complex-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* =========================================================================
5б. МЕНЮ НА РЕСТОРАНТА
========================================================================= */
.menu-panel {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
padding: 18px;
background: var(--paper);
border-radius: var(--radius-lg);
box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
/* Кутиите са , не карти за четене — целите се кликат, за да
отворят модала с артикулите на съответната категория. */
.menu-card {
display: grid;
justify-items: center;
gap: 8px;
padding: 26px 18px;
text-align: center;
background: var(--c-dark);
border: 1px solid var(--hairline);
border-radius: var(--radius);
color: inherit;
font: inherit;
cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease),
box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* същото „осветяване“ като .amenity:hover / .faq-item:hover — по-светъл
фон, златен кант и лека сянка отдолу */
.menu-card:hover,
.menu-card:focus-visible {
background: var(--card-hover);
border-color: var(--gold-soft);
box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
transform: translateY(-4px);
}
/* „Обедно меню“ мига дискретно, за да подкани към клик — вижте key="lunch"
в data/content.json (класът се слага условно в index.php/restoran.php) */
.menu-card--lunch {
animation: menu-card-invite 2.6s ease-in-out infinite;
}
.menu-card--lunch:hover,
.menu-card--lunch:focus-visible {
animation-play-state: paused;
}
@keyframes menu-card-invite {
0%, 100% { border-color: var(--hairline); box-shadow: 0 0 0 0 rgba(195, 163, 112, .4); }
50% { border-color: var(--gold); box-shadow: 0 0 0 8px rgba(195, 163, 112, 0); }
}
/* димът на иконата „похлупак“ (menu-card__icon .steam, вижте includes/icons.php)
се вдига непрекъснато над капака */
.menu-card__icon .steam {
transform-origin: center;
opacity: 0;
animation: steam-rise 2.2s ease-in-out infinite;
}
@keyframes steam-rise {
0% { transform: translateY(3px); opacity: 0; }
35% { opacity: .9; }
100% { transform: translateY(-6px); opacity: 0; }
}
/* наздравицата на иконата „чаши“ (menu-card__icon .toast-glass, вижте
includes/icons.php) — чашите се доближават, докосват се с искрица, връщат се */
.menu-card__icon .toast-glass--left {
animation: toast-clink-left 3.6s ease-in-out infinite;
}
.menu-card__icon .toast-glass--right {
animation: toast-clink-right 3.6s ease-in-out infinite;
}
@keyframes toast-clink-left {
0%, 60%, 100% { transform: translateX(0); }
75% { transform: translateX(1.6px); }
}
@keyframes toast-clink-right {
0%, 60%, 100% { transform: translateX(0); }
75% { transform: translateX(-1.6px); }
}
.menu-card__icon .toast-spark {
opacity: 0;
transform-origin: center;
animation: toast-spark 3.6s ease-in-out infinite;
}
@keyframes toast-spark {
0%, 68%, 100% { opacity: 0; transform: scale(.5); }
75% { opacity: 1; transform: scale(1.15); }
85% { opacity: 0; transform: scale(.8); }
}
/* ситни капчици, които при досега на чашите се разлитат радиално навън —
като мъничка заря/фойерверк — и после избледняват, без да падат надолу.
Петте тръгват от една и съща допирна точка, всяка в своя посока и леко
изместена във времето, за да не „гръмнат“ синхронно. */
.menu-card__icon .toast-drop {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
}
.menu-card__icon .toast-drop--a { animation: toast-drop-a 3.6s ease-out infinite; }
.menu-card__icon .toast-drop--b { animation: toast-drop-b 3.6s ease-out infinite; }
.menu-card__icon .toast-drop--c { animation: toast-drop-c 3.6s ease-out infinite; }
.menu-card__icon .toast-drop--d { animation: toast-drop-d 3.6s ease-out infinite; }
.menu-card__icon .toast-drop--e { animation: toast-drop-e 3.6s ease-out infinite; }
/* ляво, леко нагоре */
@keyframes toast-drop-a {
0%, 66%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
76% { opacity: 1; transform: translate(-2.3px, -.7px) scale(1); }
94% { opacity: 0; transform: translate(-3.4px, -1px) scale(.7); }
}
/* горе-ляво */
@keyframes toast-drop-b {
0%, 64%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
74% { opacity: 1; transform: translate(-1.6px, -1.9px) scale(1); }
92% { opacity: 0; transform: translate(-2.3px, -2.8px) scale(.7); }
}
/* право нагоре — най-дългата „искра“ */
@keyframes toast-drop-c {
0%, 65%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
75% { opacity: 1; transform: translate(0, -2.6px) scale(1); }
93% { opacity: 0; transform: translate(0, -3.8px) scale(.7); }
}
/* горе-дясно */
@keyframes toast-drop-d {
0%, 67%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
77% { opacity: 1; transform: translate(1.6px, -1.9px) scale(1); }
95% { opacity: 0; transform: translate(2.3px, -2.8px) scale(.7); }
}
/* дясно, леко нагоре */
@keyframes toast-drop-e {
0%, 69%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
79% { opacity: 1; transform: translate(2.3px, -.7px) scale(1); }
97% { opacity: 0; transform: translate(3.4px, -1px) scale(.7); }
}
.menu-card__icon { color: var(--gold); }
.menu-card__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 500;
color: var(--gold-bright);
}
.menu-card__subtitle {
margin: 0;
font-size: .85rem;
color: var(--text-muted);
}
@media (min-width: 620px) {
.menu-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
.menu-panel { grid-template-columns: repeat(4, 1fr); }
}
/* Криптомат/Банкомат/Паркинг (index.php „Удобства“ + udobstwa.php) — винаги
точно 3 карти, затова фиксирани 3 колони вместо 4, за да не остава празна
клетка в панела. */
@media (min-width: 860px) {
.menu-panel--utility { grid-template-columns: repeat(3, 1fr); }
}
/* Тези кутии НЯМАТ линк — при клик/тап описанието се разгъва на място
(utilityBoxes() в main.js). Работи и на мобилни (кутията е ).
Обхватът е .menu-card--util, за да не се пипат картите на менюто. */
.menu-card__caret {
color: var(--gold);
transform: rotate(90deg); /* сочи надолу — „има още“ */
transition: transform .35s var(--ease), color .3s var(--ease);
}
.menu-card--util:hover .menu-card__caret,
.menu-card--util:focus-visible .menu-card__caret { color: var(--gold-bright); }
.menu-card--util.is-open .menu-card__caret { transform: rotate(-90deg); }
.menu-card__reveal {
display: grid;
gap: 5px;
justify-items: center;
max-width: 30ch;
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: -8px; /* поглъща gap-а на .menu-card, докато е свито */
transition: max-height .35s var(--ease), opacity .3s var(--ease),
margin-top .35s var(--ease);
}
.menu-card--util.is-open .menu-card__reveal {
max-height: 240px;
opacity: 1;
margin-top: 2px;
}
.menu-card--util .menu-card__subtitle { margin: 0; }
.menu-card__note {
margin: 0;
font-size: .76rem;
font-style: italic;
line-height: 1.45;
color: var(--text-dim);
}
/* „Още от Ресторант Славяни“ (alacart.php/lunchtime.php/brunch.php/
specialnisabitia.php) — линкове към другите 3 менюта, края на всяка
страница. Същия визуален език като .menu-card горе (икона + злато), но
~65% по-малки и само икона + име, без подзаглавие. Общ частичен
темплейт — includes/menu-more.php (render_menu_more()). */
.menu-more {
margin-top: clamp(36px, 6vw, 56px);
padding-top: clamp(28px, 4vw, 40px);
border-top: 1px solid var(--hairline);
}
/* По-малко от основните заглавия на страницата (h1) — тази секция е
второстепенна навигация, не бива да се конкурира с тях по размер.
~2pt (≈.17rem) по-малко навсякъде спрямо .section-title, същия
акцентен стил иначе (цвят, шрифт, линийките отстрани). */
.menu-more .section-title {
font-size: clamp(1.18rem, .88rem + 1.5vw, 1.93rem);
}
.menu-more__grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.menu-more__grid { grid-template-columns: repeat(3, 1fr); }
}
.menu-more__card {
display: grid;
justify-items: center;
gap: 6px;
padding: 16px 14px;
text-align: center;
background: var(--c-dark);
border: 1px solid var(--hairline);
border-radius: var(--radius);
color: inherit;
transition: border-color .3s var(--ease), background .3s var(--ease),
box-shadow .3s var(--ease), transform .3s var(--ease);
}
.menu-more__card:hover,
.menu-more__card:focus-visible {
background: var(--card-hover);
border-color: var(--gold-soft);
box-shadow: 0 12px 26px rgba(0, 0, 0, .38);
transform: translateY(-3px);
}
.menu-more__icon { color: var(--gold); }
.menu-more__name {
margin: 0;
font-family: var(--font-display);
font-size: .88rem;
font-weight: 500;
color: var(--gold-bright);
}
/* --- карусел със снимки (напр. „Лоби бар“/„Лятна градина“, вижте
restoran_photo_rail() в restoran.php) — същата безкрайна авто-лента като
.rooms-rail (initAutoRail() в main.js), но картите са само снимка,
отварят общия лайтбокс. Стрелките са data-водени (data-rail-nav/
data-rail-target), позиционирани върху .rooms-rail-wrap. */
/* Ширината следва точно .menu-card в същия .menu-panel по-горе — 1 на ред
на телефон, 2 от 620px, 4 от 860px (виж медия заявките при .menu-panel). */
.photo-rail__item {
position: relative;
flex: 0 0 100%;
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--c-dark);
cursor: pointer;
box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
@media (min-width: 620px) {
.photo-rail__item { flex-basis: calc((100% - 16px) / 2); }
}
@media (min-width: 860px) {
.photo-rail__item { flex-basis: calc((100% - 48px) / 4); }
}
.photo-rail__item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.photo-rail__item:hover img,
.photo-rail__item:focus-visible img { transform: scale(1.05); }
.rail-nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 42px; height: 42px;
transform: translateY(-50%);
border: 1px solid rgba(195, 163, 112, .4);
border-radius: 50%;
background: rgba(20, 22, 24, .75);
color: var(--gold-on-dark);
cursor: pointer;
transition: background .25s var(--ease), border-color .25s var(--ease);
}
.rail-nav:hover { background: rgba(20, 22, 24, .95); border-color: #C3A370; }
.rail-nav--prev { left: 8px; }
.rail-nav--next { right: 8px; }
/* Празно място за карусел, докато още няма качени снимки (напр. галерията на
ресторанта — restoran_photo_rail_or_placeholder() в includes/gastronomy.php). */
.rail-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 160px;
padding: 28px;
border: 1px dashed var(--gold-soft);
border-radius: var(--radius);
background: var(--c-dark);
color: var(--text-muted);
text-align: center;
font-size: .9rem;
}
/* --- динамични „текст + снимка“ блокове под трите страници на „Гастрономия“
(gastronomy_blocks() в includes/gastronomy.php) — снимката се редува
ляво/дясно, стилът следва .menu-section (златно заглавие, приглушен текст). */
.cblocks {
display: grid;
gap: 22px;
margin-top: 26px;
}
.cblock {
display: grid;
gap: 18px;
align-items: center;
padding: 20px;
background: var(--c-dark);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
}
@media (min-width: 720px) {
.cblock { grid-template-columns: minmax(0, 320px) 1fr; }
.cblock--flip { grid-template-columns: 1fr minmax(0, 320px); }
.cblock--flip .cblock__media { order: 2; }
}
.cblock__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
padding: 0;
border: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--c-cool);
cursor: pointer;
}
.cblock__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.cblock__media:hover img,
.cblock__media:focus-visible img { transform: scale(1.05); }
.cblock__zoom {
position: absolute;
right: 10px;
bottom: 10px;
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(20, 22, 24, .75);
color: var(--gold-on-dark);
}
.cblock__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--gold-bright);
}
.cblock__text {
font-size: .95rem;
line-height: 1.7;
color: var(--text-muted);
}
.cblock__text p { margin: 0 0 .7em; }
.cblock__text p:last-child { margin-bottom: 0; }
/* По-широк и по-нисък прозорец за календара — цели се да се вмести без скрол */
.modal__box.modal__box--availability {
width: min(980px, 96vw);
max-height: 97vh;
padding: 18px 26px 18px;
}
#availabilityModal .modal__title { margin-bottom: 4px; }
#availabilityModal .modal__note { margin-bottom: 10px; }
/* По-плътна форма вътре в прозореца — на room.php остава по-просторна */
#availabilityModal .enquiry { padding: 16px; }
#availabilityModal .enquiry__note { margin-bottom: 10px; }
#availabilityModal .form-grid { gap: 10px; }
#availabilityModal .field input,
#availabilityModal .field select,
#availabilityModal .field textarea { min-height: 38px; padding: 8px 10px; }
#availabilityModal .field textarea { min-height: 64px; }
#availabilityModal .room-detail { gap: 22px; }
@media (min-width: 900px) {
#availabilityModal .room-detail { grid-template-columns: 1fr 1fr; gap: 30px; }
}
.menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 16px;
}
@media (min-width: 560px) {
.menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
.menu-grid { grid-template-columns: repeat(3, 1fr); }
}
.menu-item {
display: flex;
flex-direction: column;
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
background: var(--c-dark);
}
.menu-item__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: rgba(0, 0, 0, .2);
display: grid;
place-items: center;
color: var(--text-muted);
}
.menu-item__media img { width: 100%; height: 100%; object-fit: cover; }
/* Само в „Празнични предложения“ снимката е бутон — уголемява се в
лайтбокса на 1000×700 px (вижте .lightbox--menu по-горе и main.js). */
button.menu-item__media {
padding: 0;
border: 0;
cursor: zoom-in;
}
button.menu-item__media:hover img { transform: scale(1.04); }
.menu-item__media img { transition: transform .5s var(--ease); }
.menu-item__zoom {
position: absolute;
right: 8px; bottom: 8px;
display: grid;
place-items: center;
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(20, 22, 24, .68);
color: #F4F2EE;
}
/* „Празнични предложения“: снимката се вижда цяла и голяма веднага, без
да се налага клик — една колона вместо grid, без изрязване (contain
вместо cover). Таванът на снимката пази 280px за заглавието на модала,
текста, цената и падинга около тях, за да не се стига до скрол в кутията
— тези 280px са премерени с реално описание под снимката. */
.menu-grid--festive { grid-template-columns: 1fr; }
.menu-grid--festive .menu-item__media {
aspect-ratio: auto;
max-height: calc(96vh - 280px);
}
.menu-grid--festive .menu-item__media img {
width: auto;
height: auto;
max-width: 100%;
max-height: calc(96vh - 280px);
object-fit: contain;
}
/* Основно/Обедно меню: секции (напр. „Салати“, „Супа“), всяка със своя
компактна снимка/описание, а под нея — собствен grid с артикулите ѝ.
Правилото е поставено след адаптивните разбивки по-горе, за да ги
надделее чрез реда в кода (същия трик като .menu-grid--festive). */
.menu-grid--sections {
grid-template-columns: 1fr;
gap: 30px;
}
.menu-section { border-bottom: 1px solid var(--hairline); padding-bottom: 26px; }
.menu-section:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-section__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.menu-section__media {
flex: none;
width: 64px;
height: 64px;
border-radius: var(--radius);
overflow: hidden;
}
.menu-section__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-section__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.15rem;
color: var(--gold-bright);
}
.menu-section__text {
margin: 4px 0 0;
font-size: .86rem;
color: var(--text-muted);
line-height: 1.45;
}
.menu-grid--nested { margin-top: 0; }
.menu-item__body {
padding: 14px 16px 16px;
display: grid;
gap: 6px;
}
.menu-item__title {
margin: 0;
font-family: var(--font-display);
font-size: 1rem;
color: var(--gold-bright);
}
/* Грамаж/обем — малък, приглушен текст под името (СЪБИТИЯ имат собствен,
по-спокоен картов стил — тук не носи акцента на цената, за разлика от
alacart.php/lunchtime.php/brunch.php/lobibar.php). */
.menu-item__weight {
margin: 0;
font-size: .78rem;
color: var(--text-dim);
}
.menu-item__text {
margin: 0;
font-size: .86rem;
color: var(--text-muted);
line-height: 1.45;
}
.menu-item__price {
margin-top: 4px;
font-weight: 700;
color: var(--gold);
}
/* Алергени — най-дребният и най-приглушен текст на картата (общ формат
„/съдържа – …/“ — render_allergens() в includes/content.php). */
.menu-item__allergens {
margin-top: 4px;
font-size: .74rem;
line-height: 1.5;
color: var(--text-dim);
}
.menu-empty {
grid-column: 1 / -1;
padding: 30px 10px;
text-align: center;
color: var(--text-muted);
}
/* =========================================================================
5б. А-ЛА-КАРТ — чисто текстово fine-dining меню (акордеон, alacart.php)
Надгражда „обедното меню": без снимки, серифна типография, dot-leader,
фини златни разделители, независими секции (няколко могат да са отворени).
========================================================================= */
.ala-subtitle {
margin: -18px 0 clamp(30px, 5vw, 48px);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--text-muted);
font-size: clamp(.9rem, 1.4vw, 1.05rem);
letter-spacing: .12em;
text-transform: uppercase;
}
.ala-subtitle::before,
.ala-subtitle::after {
content: "";
height: 1px;
width: clamp(24px, 8vw, 84px);
background: var(--gold-soft);
}
/* Когато има описание под подзаглавието, то поема долния отстъп вместо
подзаглавието — иначе разстоянието се удвоява. */
.ala-subtitle:has(+ .ala-description) { margin-bottom: 14px; }
.ala-description {
max-width: 640px;
margin: 0 auto clamp(30px, 5vw, 48px);
text-align: center;
color: var(--text-muted);
font-size: .95rem;
line-height: 1.65;
}
.ala-description p { margin: 0 0 .6em; }
.ala-description p:last-child { margin-bottom: 0; }
.ala-menu {
max-width: 780px;
margin-inline: auto;
}
.ala-deco { max-width: 900px; margin-inline: auto; }
.ala-deco--above { margin-bottom: clamp(30px, 5vw, 48px); }
.ala-deco--below { margin-top: clamp(34px, 6vw, 56px); }
.ala-deco .cblocks { margin-top: 0; }
.ala-cat {
border-top: 1px solid var(--gold-faint);
}
.ala-cat:last-child { border-bottom: 1px solid var(--gold-faint); }
.ala-cat__head { margin: 0; }
.ala-cat__toggle {
width: 100%;
display: flex;
align-items: center;
gap: 18px;
padding: clamp(18px, 3vw, 26px) 4px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.15rem, 2.6vw, 1.55rem);
letter-spacing: .04em;
color: var(--gold);
transition: color .25s var(--ease);
}
.ala-cat__toggle:hover,
.ala-cat__toggle:focus-visible { color: var(--gold-bright); }
.ala-cat__name { flex: 1; min-width: 0; }
.ala-cat__icon {
position: relative;
flex: none;
width: 16px;
height: 16px;
color: var(--gold);
}
.ala-cat__toggle:hover .ala-cat__icon { color: var(--gold-bright); }
.ala-cat__icon::before,
.ala-cat__icon::after {
content: "";
position: absolute;
background: currentColor;
transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.ala-cat__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.ala-cat__icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.ala-cat.is-open .ala-cat__icon::after {
transform: translateX(-50%) rotate(90deg) scaleY(0);
opacity: 0;
}
.ala-cat__panel {
max-height: 0;
overflow: hidden;
transition: max-height .45s var(--ease);
}
.ala-cat__inner { padding: 2px 4px clamp(20px, 3.5vw, 30px); }
.ala-cat__empty {
margin: 6px 0 0;
color: var(--text-dim);
font-style: italic;
font-size: .9rem;
}
.ala-item {
padding: clamp(13px, 2vw, 17px) 8px;
margin-inline: -8px;
border-top: 1px solid var(--gold-faint);
border-radius: var(--radius);
transition: background .25s var(--ease);
}
.ala-item:first-child { border-top: 0; }
.ala-item:hover { background: var(--gold-faint); }
.ala-item__row {
display: flex;
align-items: baseline;
gap: 12px;
}
.ala-item__name {
font-family: var(--font-display);
font-size: clamp(1rem, 1.7vw, 1.12rem);
color: var(--text);
letter-spacing: .01em;
}
/* Грамаж/обем — самостоятелен сегмент по средата на реда, между точковата
линия и цената: същия размер и цвят като цената, за да е ясно видим
(изисквания за етикетиране на количество; общ формат с lunchtime.php/
brunch.php). */
.ala-item__weight {
flex: none;
font-family: var(--font-body);
font-size: clamp(.95rem, 1.5vw, 1.05rem);
color: var(--gold-bright);
white-space: nowrap;
}
/* Тънка разделителна линия между грамажа и цената — двете са различни
данни (количество срещу сума), не просто два съседни числа. */
.ala-item__weight + .ala-item__price {
padding-left: 10px;
border-left: 1px solid var(--gold-soft);
}
.ala-item__lead {
flex: 1;
min-width: 22px;
align-self: center;
margin-bottom: 4px;
border-bottom: 1px dotted var(--gold-soft);
}
.ala-item__price {
flex: none;
color: var(--gold-bright);
font-size: clamp(.95rem, 1.5vw, 1.05rem);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ala-item__desc {
margin: 6px 0 0;
max-width: 60ch;
font-style: italic;
font-size: clamp(.85rem, 1.3vw, .92rem);
line-height: 1.65;
color: var(--text-muted);
}
/* Алергени — най-дребният и най-приглушен текст на артикула, под описанието
(общ формат „/съдържа – …/“ — render_allergens() в includes/content.php). */
.ala-item__allergens {
margin: 4px 0 0;
font-size: .74rem;
line-height: 1.5;
color: var(--text-dim);
}
/* Много тесни екрани: точковата линия се свива силно — падаме на чисто
двуколонно подравняване (име горе, цена под него), без dot-leader. */
@media (max-width: 380px) {
.ala-item__row { flex-wrap: wrap; }
.ala-item__lead { display: none; }
.ala-item__name { flex: 1 1 100%; }
.ala-item__weight,
.ala-item__price { margin-top: 2px; }
}
/* -------------------------------------------------------------------------
Меню на лоби бара (lobibar.php) — същият акордеон като А-ла-карт, само с
икона и кратък атмосферен надпис (tagline) на всяка категория. Всичко
останало се наследява от .ala-* по-горе.
------------------------------------------------------------------------- */
.lb-menu .ala-cat__toggle {
align-items: flex-start;
gap: 14px;
padding-block: clamp(16px, 2.6vw, 22px);
}
.lb-cat__glyph {
flex: none;
color: var(--gold);
margin-top: 2px;
transition: color .25s var(--ease);
}
.lb-menu .ala-cat__toggle:hover .lb-cat__glyph,
.lb-menu .ala-cat__toggle:focus-visible .lb-cat__glyph { color: var(--gold-bright); }
.lb-menu .ala-cat__name { align-self: center; }
.lb-cat__tag {
display: block;
margin-top: 3px;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(.72rem, 1.6vw, .82rem);
font-style: italic;
letter-spacing: normal;
text-transform: none;
color: var(--text-muted);
}
/* центрираме глифа спрямо реда, когато има и tagline (два реда текст) */
.lb-menu .ala-cat__name:has(.lb-cat__tag) { align-self: flex-start; }
@media (max-width: 380px) {
.lb-menu .ala-cat__toggle { gap: 10px; }
.lb-cat__glyph svg { width: 20px; height: 20px; }
}
/* Ъглови орнаменти на менютата (А-ла-карт/Обедно меню/Брънч) — избираем СТИЛ
(includes/ornaments.php, admin: настройка settings.menu_ornaments.<меню>),
не фиксиран файл на страница. Един .svg файл на стил, огледален през CSS
за десния ъгъл (.menu-orn--tr) — виж includes/ornaments.php.
.menu-orn-frame слага position:relative около заглавието; .lm-poster вече
си е relative, затова обедното меню не се нуждае от отделна обвивка. */
.menu-orn-frame { position: relative; }
.menu-orn {
position: absolute;
top: -12px;
display: block;
line-height: 0;
pointer-events: none;
opacity: .82;
width: clamp(52px, 7.5vw, 90px);
height: clamp(52px, 7.5vw, 90px);
}
.menu-orn svg { display: block; width: 100%; height: 100%; }
.menu-orn--tl { left: -8px; }
.menu-orn--tr { right: -8px; transform: scaleX(-1); }
@media (max-width: 599px) { .menu-orn { display: none; } }
/* Цвят по подразбиране — злато (А-ла-карт, Обедно меню); брънчът го сменя
на топъл кехлибар през модификатора --amber. */
.menu-orn-frame .menu-orn,
.lm-poster .menu-orn { color: var(--gold); }
.menu-orn-frame--amber .menu-orn { color: var(--amber); }
/* =========================================================================
5в. БРЪНЧ — ТАБЛО (brunch.php)
Нарочно различно от А-ла-карт (акордеон, без снимки, златен акцент) и
Обедното меню (табове по дни): решетка от карти, ВИНАГИ разгърната
(нищо не се сгъва), топъл бронз/кехлибар акцент (--amber-*), по-въздушен
шрифт и повече дистанция между категориите — небрежно weekend усещане.
========================================================================= */
/* Бадж с работното време до заглавието „БРЪНЧ“. */
.br-badge {
display: flex;
justify-content: center;
margin: 0 0 clamp(30px, 5vw, 48px);
}
.br-badge__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border: 1px solid var(--amber-soft);
border-radius: 999px;
background: var(--amber-faint);
color: var(--amber-bright);
font-size: .82rem;
letter-spacing: .05em;
}
.br-badge__pill .ic { color: var(--amber); flex: none; }
/* Декоративните текст+снимка блокове (над/под таблото) — same модел като
.ala-deco, отделен клас само за да не се смесва семантиката на двете
страници в бъдещи промени. */
.br-deco { max-width: 900px; margin-inline: auto; }
.br-deco--above { margin-bottom: clamp(30px, 5vw, 48px); }
.br-deco--below { margin-top: clamp(34px, 6vw, 56px); }
.br-deco .cblocks { margin-top: 0; }
/* --- Брънч Комбо: hero-блок, ясно отделен от обикновените категории --- */
.br-combo {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 900px;
margin: 0 auto clamp(40px, 6vw, 64px);
padding: clamp(22px, 4vw, 36px);
background: linear-gradient(155deg, var(--amber-faint), transparent 65%);
border: 1px solid var(--amber-soft);
border-radius: var(--radius-lg);
box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}
@media (min-width: 760px) {
.br-combo { flex-direction: row; align-items: center; gap: 32px; }
}
.br-combo__media {
flex: none;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
}
@media (min-width: 760px) {
.br-combo__media { width: 300px; }
}
.br-combo__media img { width: 100%; height: 100%; object-fit: cover; }
.br-combo__body { flex: 1; min-width: 0; }
.br-combo__icon { display: inline-flex; color: var(--amber); margin-bottom: 8px; }
.br-combo__title {
margin: 0 0 10px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
color: var(--amber-bright);
letter-spacing: .02em;
}
.br-combo__desc {
margin: 0 0 14px;
max-width: 60ch;
color: var(--text-muted);
line-height: 1.75;
}
.br-combo__price {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
color: var(--amber-bright);
}
/* --- Решетка от категории — 1 колона мобилно, 2 от 620px (същият праг
като .complex-grid/.menu-panel/.contacts-grid — установената конвенция
на сайта за 2-колонни решетки). Цялото меню се вижда наведнъж. --- */
.br-grid {
display: grid;
gap: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px);
grid-template-columns: 1fr;
}
@media (min-width: 620px) {
.br-grid { grid-template-columns: repeat(2, 1fr); }
}
.br-cat {
padding-top: 18px;
border-top: 2px solid var(--amber-soft);
}
.br-cat__title {
margin: 0 0 18px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.15rem, 2vw, 1.4rem);
color: var(--amber-bright);
letter-spacing: .02em;
}
.br-items {
display: grid;
gap: clamp(18px, 2.4vw, 24px);
}
.br-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.br-item__thumb {
flex: none;
width: 58px;
height: 58px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--hairline);
}
.br-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.br-item__body { flex: 1; min-width: 0; }
.br-item__row {
display: flex;
align-items: baseline;
gap: 12px;
}
.br-item__name {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.1rem, 1.8vw, 1.28rem);
line-height: 1.4;
color: var(--text);
letter-spacing: .01em;
}
/* Точковата водеща линия (dot leader) между името и грамажа/цената —
същият модел като .ala-item__lead (alacart.php) — задължителна разлика
от обикновен интервал, за да остане подравнено при различна дължина на
имената (класическо ресторантско меню). */
.br-item__lead {
flex: 1;
min-width: 22px;
align-self: center;
margin-bottom: 4px;
border-bottom: 1px dotted var(--amber-soft);
}
.br-item__price {
flex: none;
color: var(--amber-bright);
font-size: clamp(.95rem, 1.5vw, 1.05rem);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Грамаж/обем — самостоятелен сегмент по средата на реда, между точковата
линия и цената: същия размер и цвят като цената, за да е ясно видим
(изисквания за етикетиране на количество). */
.br-item__weight {
flex: none;
font-size: clamp(.95rem, 1.5vw, 1.05rem);
color: var(--amber-bright);
white-space: nowrap;
}
/* Тънка разделителна линия между грамажа и цената — виж .ala-item__weight. */
.br-item__weight + .br-item__price {
padding-left: 10px;
border-left: 1px solid var(--amber-soft);
}
/* Тесни карти: точковата линия се свива силно — падаме на чисто
двуколонно подравняване (име горе, цена под него), без dot-leader. */
@media (max-width: 380px) {
.br-item__row { flex-wrap: wrap; }
.br-item__lead { display: none; }
.br-item__name { flex: 1 1 100%; }
.br-item__weight,
.br-item__price { margin-top: 2px; }
}
.br-item__desc {
margin: 6px 0 0;
max-width: 60ch;
font-size: clamp(.88rem, 1.3vw, .95rem);
line-height: 1.7;
color: var(--text-muted);
}
/* Алергени — най-дребният и най-приглушен текст на артикула, под описанието
(общ формат „/съдържа – …/“ — render_allergens() в includes/content.php). */
.br-item__allergens {
margin: 6px 0 0;
font-size: .74rem;
line-height: 1.5;
color: var(--text-dim);
}
/* =========================================================================
6. СТАИ И АПАРТАМЕНТИ
========================================================================= */
.rooms-rail-wrap { position: relative; }
/* Карусел: върви сам, спира при задържане, плъзга се с пръст на мобилно.
Няма стрелки и няма лента за скролиране — движението е самата навигация.
Прилепването (scroll-snap) е махнато, защото се бори с плавното движение. */
.rooms-rail {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 6px;
/* лентата да „изтича“ до ръба на екрана на мобилно */
margin-inline: -16px;
padding-inline: 16px;
/* скролирането с пръст остава, само лентата е скрита */
scrollbar-width: none;
-ms-overflow-style: none;
/* дърпане с мишка на десктоп */
cursor: grab;
user-select: none;
}
.rooms-rail.is-dragging { cursor: grabbing; }
/* Каруселите в .menu-panel (Лоби бар/Лятна градина) не бива да „изтичат“
извън светлата рамка — за разлика от лентата със стаите, тук няма нужда
от bleed до ръба на екрана. */
.rooms-rail--framed { margin-inline: 0; padding-inline: 0; }
/* .menu-panel е grid с до 4 колони (за менюто) — обвивката на карусела е
единствено дете тук и трябва да заема целия ред, не само първата клетка. */
.menu-panel > .rooms-rail-wrap { grid-column: 1 / -1; }
/* Специални събития (specialnisabitia.php) — светла рамка около картите,
както при lunchtime.php/faq/contacts. margin-top на .menu-grid иначе
прави горния ръб по-широк от другите три. */
.menu-panel > .menu-grid { grid-column: 1 / -1; margin-top: 0; }
/* Въпроси & детайли (index.php, udobstwa.php) — светла рамка около
accordion-а, същия стил като menu-panel/menu-card (11.png от клиента). */
.menu-panel > .faq-grid { grid-column: 1 / -1; }
/* Обедно меню (lunchtime.php) — същата светла рамка около афиша. Без
max-width/margin:auto тук — иначе рамката излиза по-широка отляво/
отдясно, отколкото отгоре/отдолу (menu-panel вече е по-тесен от .shell).
min-width:0 е задължителен: .lm-poster е grid item и по подразбиране
min-width:auto го прави поне толкова широк, колкото min-content на най-
широкото си дете — а .lm-tabs__track на тесен екран е с overflow-x:auto
(хоризонтален скрол на дните), но самият .lm-poster е ОБИКНОВЕН блок
между таб-лентата и grid контейнера, затова overflow-x:auto не спира
верижното "издуване" нагоре без този override. Без него на телефон
.lm-poster/menu-panel се разширяваха с ~270px извън екрана — цялото
съдържание (вкл. цената, ако/когато менюто е публикувано) изискваше
хоризонтално плъзгане, за да се види. */
.menu-panel > .lm-poster {
grid-column: 1 / -1;
max-width: none;
margin: 0;
min-width: 0;
}
/* Текстът на „За нас“ (aboutus.php) в тъмна кутия вътре в светлата рамка —
.legal-body по подразбиране е "гол" текст без own фон/padding. */
.menu-panel > .legal-body--card {
grid-column: 1 / -1;
max-width: none;
background: var(--c-dark);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: clamp(20px, 4vw, 36px);
}
.legal-body--card p {
text-align: justify;
text-indent: 2em;
font-size: 1.32rem;
line-height: 1.85;
}
.legal-body--card p:last-child {
text-align: center;
text-indent: 0;
}
/* Контакти (kontakti.php) в menu-panel — .contact-box (както .faq-item) е
почти прозрачен слой, мислен за тъмен фон; в светлата рамка му трябва
собствен плътен тъмен фон, за да остане четлив. */
.menu-panel .contact-box { background: var(--c-dark); }
/* При hover .contact-box иначе омесва акцента с var(--panel-hover) — почти
прозрачно бяло, мислено за тъмен фон зад кутията. Върху светлата рамка
тук показва кремавия панел през кутията (свети в бяло). Плътна тъмна
основа вместо това — както .menu-card:hover. */
.menu-panel .contact-box:hover,
.menu-panel .contact-box:focus-within,
.menu-panel .contact-box:active {
background: color-mix(in srgb, var(--accent, var(--gold)) 10%, var(--card-hover));
}
.menu-panel > .contacts-grid { grid-column: 1 / -1; }
/* Хинт при hover/focus (напр. кутиите Криптомат/Банкомат/Паркинг) — CSS-only,
текстът идва от data-hint. Светла рамка, в стила на menu-panel (01.png). */
[data-hint] { position: relative; }
[data-hint]::after {
content: attr(data-hint);
position: absolute;
left: 50%;
top: 100%;
width: 220px;
margin-top: 12px;
padding: 10px 14px;
background: var(--c-dark);
border: 3px solid var(--paper);
color: var(--text);
font-size: .8rem;
line-height: 1.45;
text-align: justify;
border-radius: var(--radius);
box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -4px);
transition: opacity .2s var(--ease), transform .2s var(--ease);
z-index: 30;
}
[data-hint]::before {
content: "";
position: absolute;
left: 50%;
top: 100%;
margin-top: 5px;
border: 6px solid transparent;
border-bottom-color: var(--paper);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -4px);
transition: opacity .2s var(--ease), transform .2s var(--ease);
z-index: 30;
}
[data-hint]:hover::after, [data-hint]:focus-visible::after,
[data-hint]:hover::before, [data-hint]:focus-visible::before {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.rooms-rail::-webkit-scrollbar { display: none; }
/* Снимките да не се влачат като файл, докато се дърпа лентата */
.rooms-rail img { -webkit-user-drag: none; }
.room-card {
position: relative;
flex: 0 0 clamp(258px, 74vw, 300px);
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--paper-ink);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.room-card:hover,
.room-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
}
/* flex/grid елементите имат min-height:auto и иначе прескачат aspect-ratio —
затова снимката се позиционира абсолютно вътре в рамката. */
.room-card__media {
position: relative;
flex: none;
min-height: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(140deg, #3A3A38, #24282B);
}
.room-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.room-card__media--empty {
display: grid;
place-items: center;
color: rgba(255, 255, 255, .32);
}
.room-card__count {
position: absolute;
left: 10px; bottom: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 3px;
background: rgba(20, 22, 24, .72);
color: #F4F2EE;
font-size: .74rem;
backdrop-filter: blur(3px);
}
/* хинт „Още“ по средата на снимката при посочване с мишка — подсказва, че
клик отваря уголемен изглед (вижте room-card__media в index.php) */
.room-card__hint {
position: absolute;
top: 10px; left: 10px;
z-index: 5;
padding: 9px 20px;
border-radius: 999px;
border: 1px solid rgba(232, 190, 121, .5);
background: rgba(20, 22, 24, .78);
color: var(--gold-on-dark);
font-size: .76rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(-4px) scale(.92);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
@media (hover: hover) {
.room-card__media:hover .room-card__hint { opacity: 1; transform: translateY(0) scale(1); }
}
.room-card__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 16px 18px;
flex: 1;
}
.room-card__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.14rem;
font-weight: 600;
}
.room-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: .8rem;
color: var(--paper-ink-soft);
}
.room-card__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.room-card__text {
margin: 0;
font-size: .86rem;
line-height: 1.55;
color: var(--paper-ink-muted);
}
.room-card__icons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
padding-top: 4px;
}
.room-card__icons span {
display: grid;
place-items: center;
width: 30px; height: 30px;
border: 1px solid rgba(107, 90, 56, .28);
border-radius: 4px;
color: var(--paper-ink-gold);
}
.room-card__foot {
display: flex;
align-items: flex-end;
justify-content: flex-end;
gap: 12px;
padding-top: 8px;
border-top: 1px solid rgba(107, 90, 56, .18);
}
.room-card__btn {
position: relative;
z-index: 2;
min-height: 40px;
padding: 8px 14px;
border: 1px solid rgba(107, 90, 56, .45);
border-radius: 4px;
background: transparent;
color: var(--paper-ink-gold);
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
white-space: nowrap;
transition: background .25s var(--ease), color .25s var(--ease);
}
.room-card__btn:hover { background: var(--paper-ink-gold); color: #F4F2EE; }
@media (min-width: 992px) {
.rooms-rail { margin-inline: 0; padding-inline: 0; }
}
/* =========================================================================
7. НАСТАНЯВАНЕ (таблица с цени)
========================================================================= */
.pricing-note {
margin: 0 auto 26px;
max-width: 62ch;
text-align: center;
font-size: .92rem;
color: var(--text-muted);
}
.pricing-note b { color: var(--gold-bright); font-weight: 600; }
/* Три колони не заслужават цялата ширина на страницата — таблицата се
свива и центрира, за да не зее празно поле отстрани. */
.pricing-table {
width: 100%;
max-width: 880px;
margin-inline: auto;
border-collapse: collapse;
border: 1px solid var(--hairline);
border-radius: var(--radius);
overflow: hidden;
}
.pricing-table thead {
background: rgba(195, 163, 112, .10);
}
.pricing-table th {
padding: 13px 18px;
text-align: left;
font-size: .76rem;
font-weight: 700;
letter-spacing: .09em;
color: var(--gold-bright);
white-space: nowrap;
}
.pricing-table td {
padding: 13px 18px;
font-size: 1rem;
border-top: 1px solid var(--hairline);
}
.pricing-table tbody tr { transition: background .25s var(--ease); }
.pricing-table tbody tr:hover { background: var(--panel-hover); }
.pricing-table td:nth-child(2) { color: var(--text-muted); }
.pricing-table td:nth-child(3) { font-weight: 700; color: var(--gold-bright); }
/* Подравняването и ширините важат само докато има истинска таблица —
под 700px редовете стават карти и правилата биха им пречили. */
@media (min-width: 700px) {
.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2) { text-align: center; width: 22%; }
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3) { text-align: right; width: 26%; }
}
/* Под 700px таблицата се разгъва в карти — без хоризонтален скрол */
@media (max-width: 699px) {
.pricing-table,
.pricing-table tbody,
.pricing-table tr,
.pricing-table td { display: block; width: 100%; }
.pricing-table thead { display: none; }
.pricing-table tr {
margin-bottom: 10px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--panel);
}
.pricing-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-top: 0;
padding: 11px 16px;
text-align: right !important;
}
.pricing-table td + td { border-top: 1px solid var(--hairline); }
.pricing-table td::before {
content: attr(data-label);
font-size: .74rem;
letter-spacing: .09em;
color: var(--text-dim);
text-align: left;
}
.pricing-table td:first-child {
background: rgba(195, 163, 112, .08);
color: var(--gold-bright);
font-weight: 600;
}
.pricing-table td:first-child::before { content: none; }
}
/* =========================================================================
8. УДОБСТВА + LIGHTBOX
========================================================================= */
.amenities-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
.amenity {
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--paper-ink);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.amenity:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(0, 0, 0, .45);
}
.amenity__media {
position: relative;
display: block;
width: 100%;
flex: none;
min-height: 0;
aspect-ratio: 16 / 10;
background: linear-gradient(140deg, #3A3A38, #24282B);
overflow: hidden;
}
/* Снимките се управляват от каросела .rgal (същият компонент като при
картите на стаите — виж .rgal__slide img по-долу). */
.amenity__media--empty {
display: grid;
place-items: center;
color: rgba(255, 255, 255, .32);
}
/* Баджът/лупата/броячът стоят НАД каросела (.rgal е z-index:3) */
.amenity__badge,
.amenity__zoom,
.amenity__count { z-index: 4; }
.amenity__badge {
position: absolute;
top: 10px; right: 10px;
padding: 5px 11px;
border-radius: 3px;
/* Стои върху снимка → нужен е тъмен скрим и в двете теми; затова текстът
е фиксирано светлозлатен (--gold-on-dark), не --gold-bright, който в
светла тема е тъмен и би изчезнал върху скрима. */
background: rgba(28, 26, 21, .82);
color: var(--gold-on-dark);
font-size: .68rem;
font-weight: 700;
letter-spacing: .09em;
}
.amenity__zoom {
position: absolute;
right: 10px; bottom: 10px;
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(20, 22, 24, .68);
color: #F4F2EE;
}
/* показва се само при повече от 1 снимка — знак, че зад клика има
каросел, а не само една статична снимка (вижте index.php) */
.amenity__count {
position: absolute;
left: 10px; bottom: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 3px;
background: rgba(20, 22, 24, .72);
color: #F4F2EE;
font-size: .74rem;
backdrop-filter: blur(3px);
}
/* Без бутон долу отстъпът е еднакъв от всички страни */
.amenity__body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
flex: 1;
}
.amenity__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.16rem;
font-weight: 600;
}
.amenity__bullets {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.amenity__bullets li {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: .84rem;
color: var(--paper-ink-muted);
}
.amenity__bullets .ic { color: var(--paper-ink-gold); margin-top: 2px; }
.amenity__text {
margin: 0;
font-size: .86rem;
line-height: 1.6;
color: var(--paper-ink-muted);
}
.amenity__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
align-self: flex-start;
margin-top: auto;
min-height: 44px;
padding: 10px 16px;
border: 1px solid rgba(107, 90, 56, .45);
border-radius: 4px;
color: var(--paper-ink-gold);
font-size: .72rem;
font-weight: 700;
letter-spacing: .07em;
transition: background .25s var(--ease), color .25s var(--ease);
}
a.amenity__cta:hover { background: var(--paper-ink-gold); color: #F4F2EE; }
span.amenity__cta { cursor: default; }
@media (min-width: 700px) {
.amenities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.amenities-grid { grid-template-columns: repeat(3, 1fr); }
}
/* --- lightbox --- */
.lightbox {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
place-items: center;
background: rgba(10, 12, 14, .93);
padding: 16px;
opacity: 0;
transition: opacity .3s var(--ease);
}
.lightbox.is-open { display: grid; opacity: 1; }
/* обвивка на снимката + фактите под нея (само за стаите) — самата тя е
единственото дете на .lightbox, за да си остане центрирана в екрана */
.lightbox__stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: min(1100px, 94vw);
max-height: 90vh;
}
.lightbox__img {
max-width: 100%;
max-height: 82vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
touch-action: pan-y;
user-select: none;
}
/* Снимката на артикул от „Празнични предложения“ да заема почти целия
екран — 90% от прозореца, вместо общия капак на лайтбокса (вижте
main.js — toggle на този клас там, където се засича data-menu-zoom). */
.lightbox.lightbox--menu .lightbox__stage { max-width: 90vw; }
.lightbox.lightbox--menu .lightbox__img { max-height: 90vh; }
/* снимка на стая (data-room-facts) — оставя място под нея за фактите,
вместо да опъва максималната височина докрай */
.lightbox.lightbox--room .lightbox__img { max-height: 62vh; }
.lightbox__btn {
position: absolute;
display: grid;
place-items: center;
width: 48px; height: 48px;
border: 1px solid rgba(195, 163, 112, .4);
border-radius: 50%;
background: rgba(30, 33, 36, .8);
color: var(--gold-on-dark);
cursor: pointer;
transition: background .25s var(--ease), border-color .25s var(--ease);
}
/* display:grid по-горе печели над браузърния [hidden]{display:none}, освен
ако не го кажем изрично — иначе Prev/Next се виждат и при само 1 снимка. */
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover { background: rgba(30, 33, 36, 1); border-color: #C3A370; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
font-size: .82rem;
letter-spacing: .08em;
color: var(--text-on-dark);
}
/* гости/легла/удобства под уголемената снимка на стая — вижте
data-room-facts в index.php/room.php и main.js. При другите галерии
(удобства, меню) остава скрита. */
.lightbox__facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 24px;
max-width: min(680px, 90vw);
padding: 14px 26px;
border-radius: var(--radius);
background: rgba(30, 33, 36, .85);
}
.lightbox__facts[hidden] { display: none; }
.lightbox__fact {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text-on-dark);
font-size: .86rem;
white-space: nowrap;
}
.lightbox__fact .ic { color: var(--gold-on-dark); flex: none; }
/* бутон „Запитване“ под фактите — само за снимки на стая с известен адрес
(data-room-url, вижте main.js); [hidden] трябва изрично, защото
.btn-gold задава display и печели над стандартния UA стил за [hidden] */
.lightbox__enquiry[hidden] { display: none; }
/* .btn-gold е мислен за светъл/тъмен фон според темата — тук седи направо
върху фиксирано тъмната завеса на лайтбокса, затова цветовете му остават
постоянни и в двете теми (иначе текстът изчезва в светла тема). */
.lightbox__enquiry {
border-color: rgba(195, 163, 112, .4);
color: var(--gold-on-dark);
}
.lightbox__enquiry:hover,
.lightbox__enquiry:focus-visible {
background: rgba(195, 163, 112, .16);
border-color: #C3A370;
}
@media (min-width: 900px) {
.lightbox__prev { left: 26px; }
.lightbox__next { right: 26px; }
}
/* =========================================================================
9. ВЪПРОСИ & ДЕТАЙЛИ (accordion)
========================================================================= */
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
align-items: start;
}
.faq-item {
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
/* Вътре в menu-panel (светла рамка) .faq-item трябва да е плътно тъмна
кутия като .menu-card — var(--panel) е почти прозрачен бял слой, мислен
за тъмен фон, и на светлия панел го обезцветява до нечетимост. */
.menu-panel .faq-item { background: var(--c-dark); }
.menu-panel .faq-item.is-open,
.menu-panel .faq-item:hover { background: var(--card-hover); }
.faq-item.is-open,
.faq-item:hover { border-color: var(--gold-soft); background: var(--panel-hover); }
.faq-q {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 52px;
padding: 14px 16px;
border: 0;
background: none;
text-align: left;
font-size: .94rem;
line-height: 1.45;
color: var(--text);
cursor: pointer;
}
.faq-q__mark {
margin-left: auto;
color: var(--gold);
transition: transform .35s var(--ease);
}
.faq-item.is-open .faq-q__mark { transform: rotate(90deg); }
.faq-item.is-open .faq-q { color: var(--gold-bright); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .4s var(--ease);
}
.faq-a__inner {
padding: 0 16px 16px;
font-size: .89rem;
line-height: 1.7;
color: var(--text-muted);
}
.faq-a__inner p { margin: 0 0 10px; }
.faq-a__inner p:last-child { margin-bottom: 0; }
@media (min-width: 992px) {
.faq-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
}
/* =========================================================================
10. КОНТАКТИ & РЕЦЕПЦИЯ
========================================================================= */
.contacts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
/* Еднакви редове във всички кутии: иконка → надпис → стойност.
Така иконките са на една линия и надписите под тях също.
--accent идва от админ панела и е цветът на иконката в тази кутия. */
.contact-box {
display: grid;
grid-template-rows: auto auto 1fr;
justify-items: center;
align-content: start;
gap: 10px;
padding: 26px 18px;
text-align: center;
border: 1px solid var(--hairline);
border-radius: 14px;
transition: border-color .3s ease, box-shadow .3s ease,
background .3s ease, transform .3s ease;
}
/* Просветване в цвета на иконката — при мишка, при тап и при фокус от клавиатура */
.contact-box:hover,
.contact-box:focus-within,
.contact-box:active {
border-color: var(--accent, var(--gold));
/* Акцентът се смесва в съществуващия фон, а не го подменя */
background: color-mix(in srgb, var(--accent, var(--gold)) 8%, var(--panel-hover));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--gold)) 40%, transparent),
0 0 26px color-mix(in srgb, var(--accent, var(--gold)) 26%, transparent),
0 10px 30px rgba(0, 0, 0, .32);
transform: translateY(-2px);
}
/* Неоновите иконки сами са кръгът — затова нямат подложка отдолу.
Сиянието взима цвета на кутията, зададен от админ панела. */
/* Иконката има само деликатно сияние — контурът ѝ носи цвета, не заревото */
.contact-box__icon {
display: grid;
place-items: center;
height: 60px;
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent));
transition: filter .3s ease;
}
.contact-box:hover .contact-box__icon,
.contact-box:focus-within .contact-box__icon {
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent, var(--gold)) 42%, transparent));
}
.contact-box__label {
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
color: var(--gold-bright);
}
.contact-box__value {
font-size: .95rem;
line-height: 1.5;
color: var(--text);
overflow-wrap: anywhere;
}
/* Кутията е една обща цел за клик — стойността светва заедно с нея */
a.contact-box:hover .contact-box__value,
a.contact-box:focus-visible .contact-box__value { color: var(--gold-bright); }
.contact-box__sub {
font-size: .8rem;
color: var(--text-muted);
}
a.contact-box__sub { color: var(--gold); }
a.contact-box__sub:hover { color: var(--gold-bright); text-decoration: underline; }
/* Височината съвпада с тази на другите иконки, за да са на една линия */
.contact-social {
display: flex;
align-items: center;
gap: 14px;
height: 60px;
}
/* Брандовите знаци стоят в оригиналните си цветове, без наслоени ефекти */
.contact-social a {
display: grid;
place-items: center;
border-radius: 50%;
transition: transform .3s ease;
}
.contact-social a:hover { transform: translateY(-2px); }
@media (min-width: 620px) {
.contacts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.contacts-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
/* =========================================================================
11. ФУТЪР
========================================================================= */
.footer-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: .75;
}
.site-footer {
background: var(--c-dark);
padding-block: 26px 32px;
}
.footer-inner {
display: grid;
gap: 14px;
justify-items: center;
text-align: center;
}
.footer-brand-col {
display: grid;
gap: 6px;
justify-items: center;
}
.footer-brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--gold);
}
.footer-brand .brand__mark { width: 36px; height: 36px; }
.footer-text {
display: grid;
gap: 2px;
font-size: .84rem;
color: var(--text-muted);
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 6px;
font-size: .82rem;
}
.footer-links a,
.footer-links button {
padding: 8px 6px;
border: 0;
background: none;
color: var(--gold);
cursor: pointer;
font-size: inherit;
}
.footer-links a:hover,
.footer-links button:hover { color: var(--gold-bright); text-decoration: underline; }
.footer-links .sep { color: var(--text-dim); }
.footer__by {
color: var(--text-dim);
font-size: .74rem;
}
.footer__by a {
color: var(--text-dim);
font-weight: 600;
text-decoration: none;
transition: color .25s;
}
.footer__by a:hover { color: var(--gold-bright); }
@media (min-width: 860px) {
.footer-brand-col { justify-items: start; }
.footer-inner {
grid-template-columns: auto 1fr auto;
align-items: center;
text-align: left;
justify-items: start;
gap: 24px;
}
.footer-links { justify-content: flex-end; }
}
/* =========================================================================
12. ПЛАВАЩ БУТОН (FAB)
========================================================================= */
.bottom-right-stack {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
display: flex;
align-items: flex-end;
gap: 12px;
}
.fab { position: relative; }
.fab__items {
position: absolute;
bottom: 62px;
right: 0;
display: grid;
gap: 10px;
justify-items: end;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.is-open .fab__items {
opacity: 1;
transform: none;
pointer-events: auto;
}
.fab__item {
display: flex;
align-items: center;
gap: 10px;
}
.fab__label {
padding: 5px 11px;
border-radius: 4px;
background: rgba(20, 22, 24, .88);
border: 1px solid rgba(195, 163, 112, .4);
color: var(--gold-on-dark);
font-size: .76rem;
white-space: nowrap;
opacity: 0;
transform: translateX(6px);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.fab__item:hover .fab__label,
.fab__item:focus-within .fab__label { opacity: 1; transform: none; }
.fab__circle {
display: grid;
place-items: center;
width: 48px; height: 48px;
border: 0;
border-radius: 50%;
background: var(--gold);
color: var(--ink-on-gold);
font: inherit;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
transition: transform .25s var(--ease), background .25s var(--ease);
}
.fab__circle:hover { transform: translateY(-2px); background: var(--gold-bright); }
.fab__toggle {
display: grid;
place-items: center;
width: 54px; height: 54px;
border: 0;
border-radius: 50%;
background: var(--gold);
color: var(--ink-on-gold);
cursor: pointer;
box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
transition: transform .3s var(--ease), background .25s var(--ease);
}
.fab__toggle:hover { background: var(--gold-bright); }
.fab.is-open .fab__toggle { transform: rotate(45deg); }
@media (max-width: 599px) {
.bottom-right-stack { right: 16px; bottom: 16px; }
}
/* =========================================================================
13. БИСКВИТКИ
========================================================================= */
.cookie-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1100;
background: rgba(30, 33, 36, .97);
border-top: 1px solid rgba(195, 163, 112, .4);
box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
transform: translateY(110%);
transition: transform .45s var(--ease), opacity .45s var(--ease);
opacity: 0;
}
.cookie-bar.is-visible { transform: none; opacity: 1; }
.cookie-bar__inner {
display: grid;
gap: 14px;
padding-block: 16px;
}
.cookie-bar__text {
margin: 0;
font-size: .86rem;
line-height: 1.6;
/* фиксирано тъмна лента и в двете теми — текстът остава постоянно
светъл, не следва --text-muted/--gold (щяха да потъмнеят и да
изчезнат в светла тема). */
color: var(--text-on-dark);
}
.cookie-bar__text a { color: var(--gold-on-dark); text-decoration: underline; }
.cookie-bar__text a:hover { color: #F0CE96; }
.cookie-bar__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.btn-accept {
min-height: 44px;
padding: 10px 22px;
border: 1px solid #3FBF6A;
border-radius: var(--radius);
background: rgba(63, 191, 106, .16);
color: #7FE0A2;
font-size: .82rem;
font-weight: 700;
letter-spacing: .05em;
cursor: pointer;
transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-accept:hover { background: #3FBF6A; color: var(--ink-on-accent); }
.btn-outline {
min-height: 44px;
padding: 10px 20px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
font-size: .82rem;
cursor: pointer;
transition: border-color .25s var(--ease), color .25s var(--ease);
}
.btn-outline:hover { border-color: var(--gold-soft); color: var(--gold-bright); }
/* .cookie-bar е фиксирано тъмна лента в двете теми (за разлика от
.cookie-modal__box, който вече коректно следва var(--modal-bg)) —
затова .btn-outline тук пази постоянни светли цветове. */
.cookie-bar .btn-outline { border-color: rgba(255, 255, 255, .2); color: var(--text-on-dark); }
.cookie-bar .btn-outline:hover { border-color: rgba(195, 163, 112, .5); color: var(--gold-on-dark); }
@media (min-width: 860px) {
.cookie-bar__inner {
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
}
.cookie-bar__actions { flex-wrap: nowrap; }
}
/* --- панел с категории --- */
.cookie-modal {
position: fixed;
inset: 0;
z-index: 1150;
display: none;
place-items: center;
padding: 16px;
background: rgba(10, 12, 14, .78);
}
.cookie-modal.is-open { display: grid; }
.cookie-modal__box {
width: min(560px, 100%);
max-height: 86vh;
overflow-y: auto;
padding: 22px;
border: 1px solid var(--gold-soft);
border-radius: var(--radius-lg);
background: var(--modal-bg);
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.cookie-modal__title {
margin: 0 0 8px;
font-family: var(--font-display);
font-size: 1.24rem;
font-weight: 600;
color: var(--gold-bright);
}
.cookie-modal__intro {
margin: 0 0 18px;
font-size: .86rem;
color: var(--text-muted);
}
.cookie-cat {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--hairline);
}
.cookie-cat__body { flex: 1; }
.cookie-cat__title {
margin: 0 0 4px;
font-size: .94rem;
font-weight: 600;
color: var(--text);
}
.cookie-cat__text {
margin: 0;
font-size: .82rem;
line-height: 1.55;
color: var(--text-muted);
}
/* превключвател */
.switch {
position: relative;
flex: none;
width: 46px; height: 26px;
margin-top: 3px;
}
.switch input {
position: absolute;
inset: 0;
width: 100%; height: 100%;
opacity: 0;
margin: 0;
cursor: pointer;
}
.switch__track {
display: block;
width: 100%; height: 100%;
border-radius: 999px;
background: var(--switch-track-off);
transition: background .25s var(--ease);
pointer-events: none;
}
.switch__track::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: #8E9398;
transition: transform .25s var(--ease), background .25s var(--ease);
}
.switch input:checked + .switch__track { background: rgba(195, 163, 112, .45); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--gold-bright); }
.switch input:disabled + .switch__track { opacity: .6; }
.switch input:disabled { cursor: not-allowed; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--gold); outline-offset: 2px; }
.cookie-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
/* =========================================================================
14. ВЪТРЕШНИ СТРАНИЦИ
========================================================================= */
.page-head {
margin-top: var(--header-h);
padding-block: 34px 0;
background: var(--c-dark);
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--text-dim);
}
.breadcrumbs a { color: var(--gold); }
.breadcrumbs a:hover { color: var(--gold-bright); }
.page-title {
margin: 12px 0 0;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
color: var(--gold-bright);
}
.page-sub {
margin: 6px 0 0;
font-size: .86rem;
color: var(--text-dim);
}
/* --- правен текст --- */
.legal-body {
max-width: 78ch;
margin-inline: auto;
}
.legal-body h2 {
margin: 30px 0 8px;
font-family: var(--font-display);
font-size: 1.14rem;
font-weight: 600;
color: var(--gold-bright);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p {
margin: 0 0 12px;
font-size: .93rem;
line-height: 1.75;
color: var(--text-muted);
}
/* --- детайл страница на стая --- */
.room-detail {
display: grid;
gap: 26px;
}
.room-gallery { display: grid; gap: 10px; }
.room-gallery__main {
position: relative;
width: 100%;
padding: 0;
border: 0;
aspect-ratio: 16 / 10;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(140deg, #3A3A38, #24282B);
cursor: zoom-in;
}
.room-gallery__main img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.room-gallery__thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 10px;
}
.room-gallery__thumb {
position: relative;
aspect-ratio: 4 / 3;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: none;
cursor: pointer;
transition: border-color .25s var(--ease), opacity .25s var(--ease);
opacity: .72;
}
.room-gallery__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.room-gallery__thumb:hover,
.room-gallery__thumb.is-active { border-color: var(--gold); opacity: 1; }
.room-facts {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
padding: 14px 0;
border-block: 1px solid var(--hairline);
font-size: .9rem;
color: var(--text-muted);
}
.room-facts span { display: inline-flex; align-items: center; gap: 8px; }
.room-facts .ic { color: var(--gold); }
.room-price {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.room-price b {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 600;
color: var(--gold-bright);
}
.room-price span { font-size: .88rem; color: var(--text-muted); }
.room-amenities {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.room-amenities span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: .82rem;
color: var(--text-muted);
}
.room-amenities .ic { color: var(--gold); }
@media (min-width: 960px) {
.room-detail { grid-template-columns: 1.15fr .85fr; gap: 38px; align-items: start; }
/* Календар + „Запитване за настаняване“ (nastanyavane.php): двете кутии
да свършват на един и същ ред — колоната се разтяга до височината на
по-високата (enquiry), а картата на календара расте да я запълни. */
.room-detail--booking { align-items: stretch; }
.room-detail--booking .booking-col { display: flex; flex-direction: column; }
.room-detail--booking .cal-wrap { flex: 1 1 auto; margin-bottom: 0; }
.room-detail--booking .cal-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Дясната колона расте до височината на лявата, за да остане подравнена
отдолу и когато „cal-summary“ (избраните дати) добави височина вляво.
Разликата се разпределя в полето „Бележки“ (расте), а не като празно
място под бутона — той остава подравнен с долния край на лявата кутия. */
.room-detail--booking .enquiry-col { display: flex; flex-direction: column; }
.room-detail--booking .enquiry-col .enquiry {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.room-detail--booking .enquiry-col .enquiry__form {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.room-detail--booking .enquiry-col .enquiry__notes {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.room-detail--booking .enquiry-col .enquiry__notes .field:first-child {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.room-detail--booking .enquiry-col .enquiry__notes textarea {
flex: 1 1 auto;
min-height: 0;
resize: none;
}
}
/* --- форма за запитване --- */
.enquiry {
padding: 22px;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--panel);
}
.enquiry__title {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--gold-bright);
}
.enquiry__note {
margin: 0 0 18px;
font-size: .82rem;
color: var(--text-dim);
}
.enquiry__note-emph {
color: var(--text);
text-decoration: underline;
}
.form-grid {
display: grid;
gap: 14px;
}
.field { display: grid; gap: 6px; }
.field label {
font-size: .78rem;
letter-spacing: .06em;
color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--field-bg);
color: var(--text);
font: inherit;
font-size: .92rem;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--gold);
background: var(--field-bg-focus);
}
.form-msg {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: var(--radius);
font-size: .88rem;
}
.form-msg--ok { border: 1px solid var(--status-ok-border); background: var(--status-ok-bg); color: var(--status-ok-text); }
.form-msg--err { border: 1px solid var(--status-err-border); background: var(--status-err-bg); color: var(--status-err-text); }
/* Кратко потвърждение „Датите са попълнени…“ след бутона „Продължи“ под
календара (вижте sendInquiry() в main.js). */
.enquiry__filled-note {
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid var(--gold-soft);
border-radius: var(--radius);
background: var(--gold-faint);
color: var(--gold-bright);
font-size: .84rem;
transition: opacity .3s var(--ease);
}
.enquiry__filled-note[hidden] { display: none; }
/* Еднократен лек „пулс“ на кутията с формата, когато календарът я е попълнил. */
@keyframes enquiry-pulse {
0% { box-shadow: 0 0 0 0 rgba(195, 163, 112, .45); }
50% { box-shadow: 0 0 0 8px rgba(195, 163, 112, .12); transform: scale(1.006); }
100% { box-shadow: 0 0 0 0 rgba(195, 163, 112, 0); transform: scale(1); }
}
.enquiry--just-filled { animation: enquiry-pulse 1.2s var(--ease); }
.honey { position: absolute; left: -9999px; opacity: 0; }
@media (min-width: 560px) {
.form-grid { grid-template-columns: 1fr 1fr; }
.field--full { grid-column: 1 / -1; }
}
/* --- календар за наличност (запитване по дати) --- */
.cal-hint {
margin: 0 0 14px;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
text-align: center;
background: var(--gold-faint);
border: 1px solid var(--gold-soft);
border-radius: var(--radius-lg);
padding: 9px 20px;
color: var(--gold-bright);
font-size: .88rem;
font-weight: 600;
}
.cal-hint__arrow { font-size: 1.1rem; }
.cal-hint.warn { background: var(--status-err-bg); border-color: var(--status-err-border); color: var(--status-err-text); }
/* display:flex по-горе печели над браузърния [hidden]{display:none}, освен ако не го върнем изрично */
.cal-hint[hidden] { display: none; }
.cal-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cal-card {
padding: 16px;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--panel);
}
.cal-room-picker { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.cal-room-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
}
.cal-room-label .ic { color: var(--gold); }
.cal-room-select-wrap { position: relative; }
.cal-room-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
padding: 10px 38px 10px 12px;
border: 1px solid var(--hairline);
border-radius: var(--radius);
background: var(--field-bg);
color: var(--text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.cal-room-select:focus { outline: none; border-color: var(--gold); }
.cal-room-caret {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
color: var(--gold);
pointer-events: none;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
color: var(--gold-bright);
text-align: center;
flex: 1;
}
.cal-nav {
width: 34px; height: 34px; flex: none;
border-radius: 50%;
border: 1px solid var(--hairline);
background: transparent;
color: var(--gold);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .25s var(--ease), background .25s var(--ease);
}
.cal-nav:hover { border-color: var(--gold-soft); background: var(--gold-faint); }
.cal-nav.disabled, .cal-nav:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-weekdays span {
text-align: center;
font-size: .64rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-dim);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-loading { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 26px 0; font-size: .85rem; }
.cal-day {
height: 38px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
font: inherit;
font-size: .86rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s, color .2s;
}
.cal-day.empty { pointer-events: none; }
.cal-day.free { background: rgba(var(--tint-rgb), .03); }
.cal-day.free:hover { background: var(--gold-faint); border-color: var(--gold-soft); }
.cal-day.busy {
background: repeating-linear-gradient(135deg, rgba(var(--tint-rgb), .05), rgba(var(--tint-rgb), .05) 5px, rgba(var(--tint-rgb), .01) 5px, rgba(var(--tint-rgb), .01) 10px);
color: var(--text-dim);
cursor: not-allowed;
text-decoration: line-through;
}
.cal-day.past { color: var(--text-dim); opacity: .35; cursor: not-allowed; }
.cal-day.today { border-color: var(--gold-soft); }
.cal-day.in-range { background: var(--gold-faint); border-radius: 2px; color: var(--gold-bright); }
.cal-day.sel-start, .cal-day.sel-end {
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: var(--ink-on-gold);
border-color: var(--gold);
box-shadow: 0 6px 16px -6px rgba(195, 163, 112, .55);
}
.cal-day.sel-start { border-radius: 8px 2px 2px 8px; }
.cal-day.sel-end { border-radius: 2px 8px 8px 2px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.cal-lg { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.cal-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cal-sw.free { background: rgba(var(--tint-rgb), .06); border: 1px solid var(--hairline); }
.cal-sw.busy { background: repeating-linear-gradient(135deg, rgba(var(--tint-rgb), .08), rgba(var(--tint-rgb), .08) 3px, rgba(var(--tint-rgb), .02) 3px, rgba(var(--tint-rgb), .02) 6px); }
.cal-sw.sel { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.cal-status { margin-top: 8px; font-size: .76rem; color: var(--text-muted); display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.cal-summary {
padding: 20px;
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
background: var(--panel);
}
.cal-sel-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: .9rem; }
.cal-sel-row span { color: var(--text-muted); }
.cal-sel-row strong { color: var(--gold-bright); font-family: var(--font-display); }
.cal-sel-row.total { border-bottom: none; justify-content: center; padding-bottom: 4px; }
.cal-sel-row.total span { color: var(--gold-bright); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.cal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cal-actions[hidden] { display: none; }
.cal-btn { width: 100%; }
.cal-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8rem; text-decoration: underline; padding: 4px; }
.cal-clear:hover { color: var(--text); }
/* --- banner за превод --- */
.translate-bar {
position: fixed;
top: var(--header-h);
left: 0; right: 0;
z-index: 880;
display: none;
align-items: center;
gap: 12px;
padding: 9px 16px;
background: rgba(36, 40, 43, .96);
border-bottom: 1px solid var(--gold-soft);
font-size: .82rem;
/* фиксирано тъмна лента и в двете теми (като .cookie-bar) — текстът и
линковете остават постоянно светли, не следват --text-muted/--gold,
които в светла тема потъмняват и се сливат с тъмния фон. */
color: var(--text-on-dark);
}
.translate-bar.is-visible { display: flex; }
.translate-bar__spacer { flex: 1; }
.translate-bar a,
.translate-bar button {
border: 0;
background: none;
color: var(--gold-on-dark);
cursor: pointer;
font: inherit;
padding: 6px 8px;
text-decoration: underline;
}
.translate-bar a:hover,
.translate-bar button:hover { color: #F0CE96; }
/* =========================================================================
15. ПРОЗОРЕЦ „ПИШЕТЕ НИ“
========================================================================= */
.modal {
position: fixed;
inset: 0;
z-index: 1180;
display: none;
place-items: center;
padding: 16px;
background: rgba(10, 12, 14, .82);
opacity: 0;
transition: opacity .28s var(--ease);
}
.modal.is-open { display: grid; opacity: 1; }
.modal__box {
position: relative;
width: min(560px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 26px 24px 24px;
border: 1px solid var(--gold-soft);
border-radius: var(--radius-lg);
background: var(--modal-bg);
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.modal__close {
position: absolute;
top: 12px; right: 12px;
display: grid;
place-items: center;
width: 40px; height: 40px;
border: 1px solid var(--hairline);
border-radius: 50%;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: border-color .25s var(--ease), color .25s var(--ease);
}
.modal__close:hover { border-color: var(--gold); color: var(--gold-bright); }
.modal__title {
margin: 0 0 6px;
padding-right: 44px;
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--gold-bright);
}
.modal__note {
margin: 0 0 20px;
font-size: .88rem;
color: var(--text-muted);
}
/* Съобщението след изпращане */
#contactMsg { margin: 16px 0 0; }
/* Докато се изпраща, бутонът не приема повторно натискане */
.btn-gold[disabled] { opacity: .6; cursor: default; transform: none; }
/* --- задължителни полета и грешки --- */
.req {
margin-left: 3px;
color: var(--red-light);
font-weight: 700;
}
.field__err {
font-size: .78rem;
line-height: 1.4;
color: var(--status-err-text);
}
.field--error input,
.field--error select,
.field--error textarea {
border-color: rgba(224, 72, 74, .75);
background: rgba(224, 72, 74, .07);
}
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus {
border-color: var(--red-light);
}
.field--error > label { color: var(--status-err-text); }
/* ------------------------------------------- галерия вътре в картата на стая */
/* Основата е истински скрол с прилепване: на телефон плъзгането с пръст
работи от само себе си, без нито ред JavaScript. */
.rgal {
position: absolute;
inset: 0;
/* над разпънатата връзка на картата, иначе тя изяжда дърпането */
z-index: 3;
}
.rgal__track {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
/* вертикалният скрол на страницата остава свободен */
touch-action: pan-y pinch-zoom;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: pointer;
}
.rgal__track::-webkit-scrollbar { display: none; }
.rgal__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rgal__slide {
position: relative;
flex: 0 0 100%;
height: 100%;
scroll-snap-align: start;
}
.rgal__slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
}
/* --- стрелки --- */
.rgal__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 34px; height: 34px;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: rgba(20, 22, 24, .62);
color: #F4F2EE;
cursor: pointer;
/* На тъч устройства (няма hover) стрелките са винаги видими, но дискретни. */
opacity: .82;
transition: opacity .25s var(--ease), background .25s var(--ease);
}
.rgal__nav--prev { left: 8px; }
.rgal__nav--next { right: 8px; }
.rgal__nav:hover { background: rgba(20, 22, 24, .9); }
/* С мишка — скрити, докато не посочиш картата/кутията (или фокус от клавиатура). */
@media (hover: hover) {
.rgal__nav { opacity: 0; }
.room-card:hover .rgal__nav,
.amenity:hover .rgal__nav,
.rgal__track:focus-visible ~ .rgal__nav { opacity: 1; }
}
/* --- точки --- */
.rgal__dots {
position: absolute;
left: 0; right: 0; bottom: 8px;
z-index: 2;
display: flex;
justify-content: center;
gap: 4px;
pointer-events: none;
}
.rgal__dot {
width: 22px; height: 22px;
display: grid;
place-items: center;
padding: 0;
border: 0;
background: none;
cursor: pointer;
pointer-events: auto;
}
.rgal__dot::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
transition: background .25s var(--ease), transform .25s var(--ease);
}
.rgal__dot.is-active::before {
background: #fff;
transform: scale(1.35);
}
/* Броячът да не се застъпва с точките */
.room-card__count { z-index: 4; }
/* =========================================================================
ОБЕДНО МЕНЮ — lunchtime.php
Портнати от самостоятелния афиш (lunch-menu.php/includes/lunch-poster.php),
без резета/zoom оттам — тук вече сме вътре в обичайния layout на сайта и
ползваме същите :root токени (--gold, --font-display…).
========================================================================= */
/* Центрира менюто във видимата височина (под хедъра), за да се вижда
веднага при зареждане, без да се налага скрол. Изваждаме и височината на
.page-head (заглавната лента с трохите отгоре, ~50px: 34px padding-top +
един ред трохи) — иначе кутията изтича извън екрана и се налага скрол,
само за да се види долният ѝ край. */
.lm-viewport {
display: flex;
align-items: center;
min-height: calc(100vh - var(--header-h) - 50px);
padding-block: 24px;
}
.lm-viewport .shell { width: 100%; }
/* Специални събития (specialnisabitia.php) — центрира заглавието и кутията
във видимата височина, за да се видят веднага при зареждане. Същата
корекция за .page-head отгоре, както при .lm-viewport. */
.sn-viewport {
display: flex;
align-items: center;
min-height: calc(100vh - var(--header-h) - 50px);
padding-block: 20px;
}
.sn-viewport .shell { width: 100%; }
.sn-viewport .menu-grid--festive .menu-item__media {
max-height: calc(100vh - var(--header-h) - 260px);
}
.sn-viewport .menu-grid--festive .menu-item__media img {
max-height: calc(100vh - var(--header-h) - 260px);
}
.lm-poster {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
background: var(--c-dark);
border-radius: 14px;
padding: clamp(18px, 3vw, 36px) clamp(20px, 4vw, 48px);
}
/* Ъглови орнаменти (includes/ornaments.php, .menu-orn — виж 5б А-ла-карт) —
.lm-poster вече си има padding, затова седят В отстъп-зоната (top/left/
right положителни), не изнесени навън като при А-ла-карт/Брънч. */
.lm-poster .menu-orn { top: 10px; }
.lm-poster .menu-orn--tl { left: 10px; }
.lm-poster .menu-orn--tr { right: 10px; }
/* Видима таб-лента с делничните дни (lunchtime.php) — заменя предишното
скрито меню „хамбургер“ горе вдясно. Сяда под реда „ЗА [ДЕН]“:
центрирана на desktop, хоризонтално скролируема на тесни екрани.
Отминал ден тази седмица се вижда приглушен и некликаем. */
.lm-tabs {
position: relative;
/* горното разстояние идва от .lm-head { margin-bottom } над лентата */
margin: 0 0 clamp(16px, 3vw, 24px);
}
.lm-tabs__track {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.lm-tab {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 16px;
border: 1px solid var(--gold-soft);
border-radius: 999px;
font-size: clamp(.82rem, 1.4vw, .95rem);
letter-spacing: .02em;
white-space: nowrap;
text-decoration: none;
color: var(--text);
background: transparent;
transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
a.lm-tab:hover,
a.lm-tab:focus-visible {
border-color: var(--gold);
color: var(--gold-bright);
background: var(--gold-faint);
}
.lm-tab.is-active,
.lm-tab.is-active:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--ink-on-gold);
font-weight: 700;
}
/* Отминал ден — виден за контекст („в понеделник е имало друго меню“),
но приглушен и без възможност за клик. */
.lm-tab.is-past {
opacity: .45;
color: var(--text-dim);
border-color: var(--gold-faint);
border-style: dashed;
cursor: default;
pointer-events: none;
}
/* Тесни екрани: без пренасяне — един ред с хоризонтален скрол и градиент
в краищата, който подсказва, че лентата продължава извън екрана. */
@media (max-width: 560px) {
.lm-tabs {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.lm-tabs__track {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 18px;
scroll-snap-type: x proximity;
}
.lm-tabs__track::-webkit-scrollbar { display: none; }
.lm-tab {
min-height: 44px;
padding: 10px 18px;
scroll-snap-align: center;
}
}
.lm-head { text-align: center; margin-bottom: clamp(14px, 2.4vw, 22px); }
.lm-title {
font-family: var(--font-display);
color: var(--gold);
font-size: clamp(1.7rem, 4vw, 2.5rem);
margin: 0 0 8px;
letter-spacing: .02em;
}
.lm-subtitle {
margin: 0;
color: var(--text);
font-size: clamp(1rem, 1.6vw, 1.15rem);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
letter-spacing: .04em;
}
.lm-subtitle::before, .lm-subtitle::after {
content: '';
height: 1px;
width: clamp(26px, 7vw, 80px);
background: var(--gold-soft);
}
.lm-panel {
border: 1px solid var(--gold-soft);
border-radius: 14px;
padding: clamp(14px, 2.6vw, 26px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(18px, 3vw, 44px);
}
@media (max-width: 640px) {
.lm-panel { grid-template-columns: 1fr; }
}
.lm-col { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 20px); }
.lm-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lm-section__head .ic { color: var(--gold); }
.lm-section__title {
font-family: var(--font-display);
color: var(--gold);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
margin: 0;
}
.lm-row {
display: flex;
align-items: baseline;
gap: 8px;
font-size: clamp(.86rem, 1.3vw, .98rem);
padding: 2px 0;
}
.lm-row__name { color: var(--text); }
.lm-row__dots { flex: 1; border-bottom: 1px dotted var(--text-dim); margin-bottom: 4px; }
.lm-row__price { color: var(--text-muted); white-space: nowrap; }
/* Грамаж/обем — самостоятелен сегмент между точковата линия и цената:
по-едър и в цвета на цената/акцента, за да е ясно видим (изисквания за
етикетиране на количество; общ формат с alacart.php/brunch.php). */
.lm-row__weight {
flex: none;
font-size: 1.05em;
color: var(--gold-bright);
white-space: nowrap;
}
/* Тънка разделителна линия между грамажа и цената — виж .ala-item__weight. */
.lm-row__weight + .lm-row__price {
padding-left: 10px;
border-left: 1px solid var(--gold-soft);
}
/* Алергени — отделен, най-дребен и приглушен ред под артикула (общ формат
„/съдържа – …/“ — render_allergens() в includes/content.php). Повечето
артикули нямат зададени алергени, затова редът не заема място по подразбиране. */
.lm-row__allergens {
margin: 0 0 4px;
padding-left: 12px;
font-size: .74rem;
line-height: 1.4;
color: var(--text-dim);
}
.lm-combo { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--gold-faint); }
.lm-combo__title {
font-family: var(--font-display);
color: var(--gold);
margin: 0 0 4px;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.lm-combo__line { margin: 0; font-size: clamp(.85rem, 1.2vw, .95rem); color: var(--text); }
.lm-combo__price { color: var(--gold-bright); font-weight: 700; }
.lm-special {
text-align: center;
margin: clamp(14px, 2.4vw, 22px) 0 0;
padding-top: clamp(12px, 2vw, 16px);
border-top: 1px solid var(--gold-soft);
font-size: clamp(.88rem, 1.3vw, 1rem);
}
.lm-special b { color: var(--gold-bright); }
.lm-footer { text-align: center; margin-top: clamp(14px, 2.4vw, 20px); }
.lm-footer__cta {
font-family: var(--font-display);
color: var(--gold-bright);
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
margin: 0 0 6px;
}
.lm-footer__addr { margin: 0; color: var(--text-muted); font-size: .82rem; }
.lm-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); font-size: 1.05rem; }