/* ============================================================
chrome-dark.css — тъмни ленти (хедър, футър, док) върху
светло съдържание.
Зарежда се на ВСЯКА вътрешна страница, ПОСЛЕДЕН — след
base.css и след специфичния CSS на страницата:
Началната страница (index.html) СЪЩО го зарежда (от обединяването на
base.css/base-dark.css насам, с media="print"+onload — виж index.html).
Тонът rgba(20,12,10,.72) е взет от .topbar в base-dark.css,
за да съвпада с началната страница.
============================================================ */
/* ── Локални токени за тъмната лента ─────────────────── */
:root {
--chr-bg: rgba(20, 12, 10, .72);
--chr-text: #F7F1EB; /* контраст върху фона: 14:1 */
--chr-soft: rgba(247, 241, 235, .74); /* контраст: 8.6:1 */
--chr-mute: rgba(247, 241, 235, .58); /* контраст: 5.9:1 */
--chr-line: rgba(247, 241, 235, .16);
--chr-hover: rgba(247, 241, 235, .10);
--chr-gold: #D9BC8A; /* златото изсветлено за тъмен фон */
}
/* ── 1. Топбар ───────────────────────────────────────── */
.topbar {
background: var(--chr-bg);
border-bottom: 1px solid var(--chr-line);
}
.brand-name { color: var(--chr-text); }
.brand-role { color: var(--chr-mute); }
.brand img {
box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
/* ── 2. Навигация в топбара ──────────────────────────── */
.topnav a { color: var(--chr-soft); }
.topnav a:hover {
color: var(--chr-text);
background: var(--chr-hover);
}
.topnav a[aria-current="page"] {
color: var(--chr-text);
background: var(--chr-hover);
}
.topnav .ic { color: var(--chr-gold); }
.top-phone { color: var(--chr-soft); }
.top-phone:hover {
background: var(--chr-hover);
color: var(--chr-text);
}
.hamburger-btn { color: var(--chr-text); }
.hamburger-btn:hover { background: var(--chr-hover); }
/* Бутонът „Запиши час“ остава винен — той е акцентът и
изпъква още повече на тъмно. Не се пипа. */
/* ── 3. Футър ────────────────────────────────────────── */
.site-footer {
background: var(--chr-bg);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid var(--chr-line);
}
.footer-brand { color: var(--chr-mute); }
.footer-sep { color: rgba(247, 241, 235, .25); }
.ht-badge { color: var(--chr-mute); }
.ht-badge:hover { color: var(--chr-text); }
.ht-badge__accent { color: #F2703A; } /* контраст 5.4:1 */
.footer-credit,
.footer-credit__label { color: var(--chr-mute); }
/* ── 4. Мобилен док ──────────────────────────────────── */
/* Ако докът остане светъл, на телефон се получава тъмен
хедър горе и светла лента долу — разбалансирано. */
.dock {
background: rgba(20, 12, 10, .82);
border-top: 1px solid var(--chr-line);
}
.dock a { color: var(--chr-mute); }
.dock a[aria-current="page"] { color: var(--chr-text); }
.dock .book span { color: var(--chr-soft); }
/* ── 5. Бутон „нагоре“ ───────────────────────────────── */
.scroll-top {
background: rgba(20, 12, 10, .78);
border: 1px solid var(--chr-line);
color: var(--chr-gold);
}
.scroll-top:hover {
background: rgba(20, 12, 10, .92);
color: var(--chr-text);
}
/* ── 6. Цвят на лентата в браузъра (Android) ─────────── */
/* Ако вариантът остане, смени и
в на съответната страница на #1a1210. */
/* ── 7. Мобилно меню ─────────────────────────────────── */
/* Без това панелът остава кремав и на телефон се получава
тъмен хедър, който отваря светло меню. */
.mnav-panel{
background:#1C1310;
border-left:1px solid var(--chr-line);
}
.mnav-brand span{color:var(--chr-text);}
.mnav-close{color:var(--chr-text);}
.mnav-close:hover{background:var(--chr-hover);}
.mnav-links a{color:var(--chr-soft);}
.mnav-links a .ic{color:var(--chr-gold);}
.mnav-links a:hover{background:var(--chr-hover);color:var(--chr-text);}
.mnav-links a[aria-current="page"]{
background:var(--chr-hover);
color:var(--chr-text);
}
.mnav-sep{background:var(--chr-line);}
.mnav-phone{color:var(--chr-soft);}
.mnav-phone:hover{color:var(--chr-text);}
/* ── 8. Падащо меню в топбара ────────────────────────── */
.nav-drop-btn{color:var(--chr-mute);}
.nav-drop-btn:hover{background:var(--chr-hover);color:var(--chr-text);}
.nav-drop-menu{
background:#1C1310;
border:1px solid var(--chr-line);
box-shadow:0 20px 44px -22px rgba(0,0,0,.75);
}
.nav-drop-menu a{color:var(--chr-soft);}
.nav-drop-menu a:hover{background:var(--chr-hover);color:var(--chr-text);}
.nav-drop-menu a[aria-current="page"]{
background:var(--chr-hover);color:var(--chr-text);
}
.nav-drop-menu .ic{color:var(--chr-gold);}
.nav-drop:has(a[aria-current="page"]) > a{color:var(--chr-text);}