/* ============ THEME SYSTEM (HSL-основни променливи) ============ */
/* Базови неутрални цветове за текст/сянка */
:root {
--txt: #2b2b2b;
--txt-dim: #6b5e4e;
--shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
--radius: 10px;
--radius-sm: 6px;
--nav-h: 110px;
/* Основен цвят (HSL компоненти). ТУК е темата по подразбиране: OCHER */
--p-h: 40; /* hue */
--p-s: 90%; /* saturation */
--p-l: 45%; /* lightness */
}
/* Изведени променливи от основния цвят (автоматично се обновяват) */
:root {
/* Акцент */
--primary: hsl(var(--p-h) var(--p-s) var(--p-l));
--primary-hover: hsl(var(--p-h) var(--p-s) calc(var(--p-l) - 3%));
--primary-soft: hsl(var(--p-h) 100% 92%);
/* Фонове / бордери – производни от основния цвят */
--bg-page: hsl(var(--p-h) 100% 97%);
--bg-nav: hsl(var(--p-h) 100% 96%);
--bg-nav-blur: hsl(var(--p-h) 100% 96% / 0.9);
--border: hsl(var(--p-h) 40% 82%);
}
/* ====== TYPOGRAPHY (REM/EM SCALE) ====== */
/*за проверка дали някой елемент излиза извън дадени зони*/
/** {*/
/* outline: 1px solid rgba(255, 0, 0, 0.2);*/
/*}*/
html {
font-size: 18px; /* 1rem = 16px */
}
body {
color: var(--txt);
}
@media (min-width: 1200px) {
html {
font-size: 20px;
}
}
@media (min-width: 1600px) {
html {
font-size: 20px;
}
}
:root {
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.875rem; /* 14px */
--fs-base: 1rem; /* 16px */
--fs-lg: 1.125rem; /* 18px */
--fs-xl: 1.25rem; /* 20px */
--fs-2xl: 1.5rem; /* 24px */
--fs-3xl: 1.875rem; /* 30px */
--fs-4xl: 2.25rem; /* 36px */
--fs-5xl: 3rem; /* 48px */
}
html, body {
height: 100%;
}
body {
font-size: var(--fs-base);
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh; /* по-точно на мобилни */
min-height: 100dvh; /* модерни браузъри */
}
main.page {
flex: 1 0 auto;
}
.modern-header {
flex: 0 0 auto;
}
.site-footer {
flex: 0 0 auto; /* имаш и flex-shrink:0 — ок е */
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.75em 0;
font-weight: 800;
line-height: 1.2;
/*color: var(--txt);*/
}
h1 {
font-size: var(--fs-5xl);
}
h2 {
font-size: var(--fs-4xl);
}
h3 {
font-size: var(--fs-3xl);
}
h4 {
font-size: var(--fs-2xl);
}
h5 {
font-size: var(--fs-xl);
}
h6 {
font-size: var(--fs-lg);
}
p {
font-size: 1rem;
margin: 0 0 1em 0;
}
.lead {
font-size: var(--fs-lg);
line-height: 1.7;
/*color: var(--txt-dim);*/
}
.nav-link {
font-size: var(--fs-xl);
}
.btn {
font-size: var(--fs-xl);
}
/* 15px */
.section-title {
font-size: var(--fs-xl);
}
/* ТЕМАТИЧНИ ПРЕСЕТИ чрез data-theme върху или :root */
:root[data-theme="ocher"] {
--p-h: 40;
--p-s: 90%;
--p-l: 45%;
}
:root[data-theme="sage"] {
--p-h: 95;
--p-s: 28%;
--p-l: 34%;
}
:root[data-theme="plum"] {
--p-h: 320;
--p-s: 35%;
--p-l: 45%;
}
:root[data-theme="ocean"] {
--p-h: 200;
--p-s: 70%;
--p-l: 45%;
}
/* ====== БАЗОВИ СТИЛОВЕ ====== */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
/*color: var(--txt);*/
margin: 0;
background-color: var(--bg-page); /* Цвят за всеки случай, ако картинката не зареди */
background-image: /* 1. Най-горен слой: Полупрозрачен бял цвят */ linear-gradient(var(--primary), rgba(255, 255, 255, 0.4)),
/* 2. Под него: Твоята картинка */ url('/static/images/background/background_test2.png');
background-repeat: repeat;
background-position: center center;
background-size: 20% auto;
background-attachment: fixed; /* Кара фона да стои на място при скрол */
font-family: "Cormorant Garamond", serif;
line-height: 1.1;
/* Важно: за да работи background-attachment: fixed правилно,
трябва да имаш съдържание, което може да се скролира. */
}
/* Унифицираме формовите елементи със стилистиката на сайта */
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
background: inherit;
}
/* Линкове и бутони НИКОГА без подчертаване */
a, .btn, .nav-link, .dropdown-item {
text-decoration: none;
}
a:hover, .btn:hover, .nav-link:hover, .dropdown-item:hover {
text-decoration: none;
}
/* Контейнер */
.container {
width: 100%;
max-width: 1500px;
padding: 0 20px;
margin: 0 auto;
}
.card-base {
background: #fff;
border: 1px solid var(--primary); /* външна рамка */
border-radius: 8px;
box-shadow: var(--ch-shadow-sm);
color: var(--ch-txt);
overflow: hidden;
padding: 24px;
position: relative; /* нужно за ::after */
}
/* вътрешна рамка, „вдлъбната“ на 16px */
.card-base::after {
content: "";
position: absolute;
inset: 16px; /* отстъп от всички страни */
border: 1px solid var(--primary); /* вътрешна линия */
border-radius: 8px;
pointer-events: none; /* да не пречи на клик/селект */
}
.card-base h1,
.card-base h2,
.card-base h3 {
text-align: center;
margin-top: 0;
margin-bottom: 16px;
}
/* ====== Навбар ====== */
.nav {
position: relative;
background: var(--bg-nav-blur);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow);
z-index: 1000;
}
.nav.sticky {
position: sticky;
top: 0;
}
.nav-inner {
position: relative; /* за edge-left бутона */
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1800px;
min-height: var(--nav-h);
gap: 16px;
padding-left: 56px; /* място за ☰ */
}
/* ☰ най-вляво */
.menu-button.edge-left {
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
/* визуално като primary */
background: var(--primary);
color: #fff;
border: 1px solid var(--primary);
border-radius: var(--radius-sm);
padding: 8px 12px;
cursor: pointer;
line-height: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
transition: background-color .2s ease, border-color .2s ease;
}
.menu-button.edge-left:hover {
background: hsl(var(--p-h) var(--p-s) 40%);
border-color: hsl(var(--p-h) var(--p-s) 35%);
}
body.side-open .menu-button.edge-left {
visibility: hidden;
pointer-events: none;
}
/* Бранд / лого */
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
}
.brand-logo {
display: block;
height: 72px;
width: auto;
object-fit: contain;
}
/* Меню */
.menu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex: 1;
}
.menu-left, .menu-right {
display: flex;
align-items: center;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
/* Оцветено лого чрез маска (PNG трябва да има прозрачен фон) */
.site-logo {
display: inline-block;
width: 250px; /* нагласи по вкуса си */
height: 120px; /* задължително за да се вижда */
background: var(--primary);
/* Маската – дълги свойства (крос-браузърно) */
-webkit-mask-image: url('/static/images/chitalnik_logo_text_1.png');
mask-image: url('/static/images/chitalnik_logo_text_1.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
mask-mode: alpha; /* използвай алфа канал */
}
/* Fallback: показваме ![]()
, ако няма поддръжка на маски */
.site-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Когато има маска – скриваме ![]()
, за да няма черни участъци от оригинала */
@supports (-webkit-mask-image: url("")) or (mask-image: url("")) {
.site-logo img {
display: none;
}
}
/* Линкове в навигацията */
.nav-link {
position: relative;
padding: 8px 14px;
color: var(--txt-dim);
border-radius: var(--radius-sm);
transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover {
/*color: var(--txt);*/
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
}
.nav-link::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 6px;
height: 2px;
background: transparent;
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease, background-color .2s ease;
}
.nav-link:hover::after {
background: var(--primary);
transform: scaleX(1);
}
/* ====== БУТОНИ ====== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
border-radius: var(--radius-sm);
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
line-height: 1;
transition: background-color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active {
transform: translateY(1px);
}
.btn-primary {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: 0 4px 12px hsl(var(--p-h) var(--p-s) 25% / 0.25);
}
.btn-primary:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
box-shadow: 0 4px 10px hsl(var(--p-h) var(--p-s) 50% / 0.18);
}
.btn-secondary {
background: var(--primary-soft);
color: var(--txt);
border: 1px solid hsl(var(--p-h) 70% 72%);
}
.btn-secondary:hover {
background: hsl(var(--p-h) 100% 88%);
border-color: hsl(var(--p-h) 70% 60%);
}
.btn-outline {
background: transparent;
color: var(--txt);
border: 1px solid var(--border);
height: 44px;
padding: 0 18px;
border-radius: var(--radius-sm);
font-weight: 500;
position: relative; /* за всеки случай */
z-index: 0; /* не се катери нагоре */
outline: none;
}
.btn-outline:hover {
background: var(--primary-soft);
border-color: hsl(var(--p-h) 70% 60%);
}
.btn-outline:focus,
.btn-outline:focus-visible {
outline: none; /* без browser outline */
box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); /* или var(--primary-soft) */
}
/* По желание – CTA, но без „pill“ */
.btn-cta {
background: linear-gradient(135deg, hsl(var(--p-h) 100% 82%), hsl(var(--p-h) 80% 54%));
color: #ffffff;
border: 1px solid hsl(var(--p-h) 60% 65%);
height: 44px;
padding: 0 18px;
border-radius: var(--radius-sm);
font-weight: 600;
box-shadow: 0 6px 16px hsl(var(--p-h) 80% 54% / 0.2);
}
.btn-cta:hover {
filter: brightness(0.98);
box-shadow: 0 8px 18px hsl(var(--p-h) 80% 54% / 0.26);
}
/* Аватар */
.avatar {
border-radius: 50%;
border: 1px solid var(--border);
object-fit: cover;
}
.avatar-initial {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-weight: 600;
box-shadow: 0 2px 10px hsl(var(--p-h) var(--p-s) 25% / 0.25);
}
.username {
margin-left: 6px;
font-weight: 500;
color: var(--txt);
}
.chev {
margin-left: 4px;
}
/* Dropdown (общи стилове) */
.dropdown {
position: relative;
z-index: 1100;
}
.user-toggle {
background: transparent;
border: 0;
cursor: pointer;
padding: 6px 8px;
border-radius: var(--radius-sm);
}
.user-toggle:hover {
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 6px);
min-width: 200px;
background: var(--bg-nav);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
list-style: none;
margin: 0;
display: none;
box-shadow: var(--shadow);
z-index: 1500;
/* fallback – вляво под бутона */
left: 0;
}
.dropdown-menu.open {
display: block;
}
.dropdown-item {
display: block;
width: 100%;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--txt);
text-align: left;
}
.dropdown-item:hover {
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
}
.dropdown-item.danger {
color: #c54949;
}
.dropdown-divider {
height: 1px;
background: var(--border);
margin: 6px 4px;
}
/* User менюто (настройки/изход) — подравнено вдясно спрямо бутона */
.dropdown:not(.theme-dropdown) .dropdown-menu {
right: 0;
left: auto;
transform: none;
}
/* Theme менюто — центрирано под бутона „Тема“ */
.theme-dropdown .dropdown-menu {
left: 50%;
right: auto;
transform: translateX(-50%);
transform-origin: top center;
max-width: min(90vw, 360px);
}
/* Съдържание */
.page {
padding: 10px 0 64px;
flex: 1 0 auto;
}
/* ===== Hero секция ===== */
.hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
align-items: center;
margin-top: 40px;
}
.hero-text h1 {
font-size: 2.3rem;
font-weight: 900;
margin-bottom: 24px;
line-height: 1.2;
color: white;
}
.hero-text .lead {
font-size: 1.25rem;
color: white;
margin-bottom: 24px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Дясна картинка / карта */
.hero-image {
text-align: center;
}
.image-card {
background: var(--bg-nav);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
display: inline-block;
border: 1px solid var(--border);
}
.image-card > img {
max-width: 100%;
border-radius: var(--radius-sm);
display: block;
}
/* Заглавие на секция */
.section-title {
margin: 0 0 12px 0;
font-size: 1.25rem;
color: white;
font-weight: 700;
}
/* ===== Quick actions — всичко вдясно, без хор. скрол ===== */
.header-quick-actions {
width: 100%;
display: flex;
flex-wrap: wrap; /* пренася при нужда */
justify-content: center; /* всичко вдясно */
align-items: center;
gap: 8px 8px; /* row/col gap */
margin-top: 6px; /* запази лекият отстъп над лентата */
}
/* децата да не се разтягат */
.header-quick-actions > * {
flex: 0 0 auto;
}
/* ===== Бутончета ===== */
.qa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 14px;
border-radius: 999px;
background: hsl(var(--p-h) var(--p-s) var(--p-l));
color: #fff;
text-decoration: none;
font-weight: 600;
line-height: 1;
transition: filter .18s ease, transform .06s ease;
border: 1px solid hsla(0 0% 100% / .18);
}
.qa-btn:hover {
filter: brightness(0.92);
}
.qa-btn:active {
transform: translateY(1px);
}
/* ===== Търсачка ===== */
.qa-search {
display: inline-flex;
align-items: center;
gap: 0;
height: 38px;
border-radius: 999px;
background: hsl(var(--p-h) var(--p-s) var(--p-l));
border: 1px solid hsla(0 0% 100% / .18);
overflow: hidden;
transition: filter .18s ease;
/* размери – да не бута реда */
flex: 0 1 400px; /* може да се смали до ~220px */
min-width: 220px;
max-width: 50vw;
}
.qa-search:hover {
filter: brightness(0.95);
}
.qa-search-input {
width: 100%; /* запълва наличното вътре */
max-width: 100%;
padding: 0 10px 0 12px;
height: 100%;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font: inherit;
}
.qa-search-input::placeholder {
color: rgba(255, 255, 255, .85);
}
/* без „подскачащо“ разширяване, стои стабилно */
.qa-search:focus-within .qa-search-input {
width: 100%;
}
.qa-search-btn {
height: 100%;
min-width: 46px;
padding: 0 10px;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
transition: filter .18s ease;
}
.qa-search-btn:hover {
filter: brightness(0.92);
}
/* ===== Responsive ===== */
@media (max-width: 720px) {
.header-quick-actions {
justify-content: flex-end; /* пак вдясно */
gap: 6px 8px;
}
.qa-search {
flex: 0 1 100%;
max-width: 520px; /* не става на пълна ширина */
}
}
/* ===== Ляв плъзгащ панел (side menu) ===== */
.side-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 2100;
}
.side-menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: min(300px, 85vw);
background: #fff;
color: var(--txt);
border-right: 1px solid var(--border);
box-shadow: var(--shadow);
transform: translateX(-100%);
transition: transform .22s ease;
z-index: 9999;
display: flex;
flex-direction: column;
outline: none;
}
.side-menu.open {
transform: translateX(0);
}
.side-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: 0 0 10px 10px;
border-bottom: 2px solid var(--border);
background: linear-gradient(
to right,
hsl(var(--p-h) var(--p-s) 99%),
hsl(var(--p-h) var(--p-s) 87%)
);
}
.side-menu-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: var(--txt);
letter-spacing: .3px;
}
.close-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background .2s ease, transform .15s ease;
}
.close-button:hover {
background: rgba(0, 0, 0, 0.05);
transform: rotate(90deg);
}
.close-icon {
position: relative;
display: block;
width: 16px;
height: 16px;
}
.close-icon::before,
.close-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
background: var(--txt);
border-radius: 2px;
transform-origin: center;
}
.close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.side-nav {
padding: 10px 12px 20px;
overflow-y: auto;
flex: 1;
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
}
/* Секции */
.side-section {
position: relative; /* за да позиционираме илюстрацията вътре */
margin-top: 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}
/* Допълнителен стил за секцията с илюстрация */
.side-section--decor {
min-height: 260px; /* да има въздух за картинката */
padding-bottom: 72px; /* да не застъпва линковете */
overflow: hidden; /* за „плаващ“ ефект, без да излиза */
}
.side-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
}
.side-list li a {
display: block;
padding: 10px 10px;
border-radius: var(--radius-sm);
color: var(--txt-dim);
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .08s ease;
}
.side-list li a:hover {
background: hsl(var(--p-h) var(--p-s) 95%);
color: var(--txt);
}
/* Accordion */
.side-accordion {
width: 100%;
text-align: left;
padding: 2px 3px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
transition: background .2s ease;
}
.side-accordion:hover {
background: hsl(var(--p-h) var(--p-s) 95%);
}
.accordion-caret {
opacity: .7;
margin-left: 10px;
}
.side-submenu {
list-style: none;
margin: 8px 0 0;
padding: 0;
/*border-left:2px solid var(--border);*/
}
.side-submenu li a {
display: block;
padding: 8px 12px 8px 14px;
color: var(--txt-dim);
border-radius: var(--radius-sm);
}
.side-submenu li a:hover {
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
color: var(--txt);
}
/* --- Минимален фикс: подменюто да пада под хедъра --- */
/* 1) Лист-акордеонът да НЕ е хоризонтален flex-контейнер */
.side-list .side-accordion {
display: block; /* вместо display:flex от стария стил */
}
/* 2) Само редът с „Моят профил“ + стрелката е flex по хоризонтала */
.side-list .side-accordion-head {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 3) (по избор) бутона-стрелка без доп. стилове да не „раздува“ реда */
.side-list .side-accordion-toggle {
background: none;
border: 0;
padding: 0;
line-height: 1;
cursor: pointer;
}
/* Плаваща илюстрация долу вдясно */
.side-illustration {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 0; /* под линковете */
pointer-events: none; /* да не пречи на кликовете */
opacity: .28; /* деликатна */
filter: saturate(.9);
}
.side-illustration img {
width: 120px; /* контрол на размера */
height: auto;
display: block;
transform: translate(10px, 10px) rotate(-2deg); /* леко „жив“ наклон */
user-select: none;
}
.side-section--banners {
margin-top: 1rem;
}
.side-section--banners .side-title {
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 0.5rem;
color: var(--txt);
}
.side-section--banners .banner-list {
display: grid;
gap: 10px;
}
.side-section--banners .banner-list img {
display: block;
width: 100%;
max-width: 160px;
margin: 0 auto;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.side-section--banners .banner-list img:hover {
transform: scale(0.95);
box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}
/* Не-скролване при отворено меню */
body.no-scroll {
overflow: hidden;
}
/* Малки екрани */
@media (max-width: 480px) {
.side-illustration img {
width: 96px;
}
.side-section--decor {
padding-bottom: 64px;
}
}
/* ===== Top covers rotator ===== */
.covers-rotator {
position: relative;
width: 100%;
max-width: 640px;
aspect-ratio: 3/4;
min-height: 360px;
overflow: hidden;
border-radius: var(--radius-sm);
cursor: pointer;
}
.covers-rotator img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .6s ease;
z-index: 0;
}
.covers-rotator img.active {
opacity: 1 !important;
z-index: 1;
}
/* ===== Responsive ===== */
@media (max-width: 960px) {
.menu {
position: fixed;
inset: var(--nav-h) 0 0 0;
background: #fff;
border-top: 1px solid var(--border);
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
flex-direction: column;
padding: 16px;
}
.menu.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.menu-left, .menu-right {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.nav-link, .btn {
width: 100%;
}
}
.theme-switcher {
display: flex;
align-items: center;
gap: 8px;
}
.theme-swatch {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid var(--border);
cursor: pointer;
padding: 0;
background: #ddd;
}
.theme-swatch[data-theme="ocher"] {
background: hsl(40 90% 45%);
}
.theme-swatch[data-theme="sage"] {
background: hsl(95 28% 34%);
}
.theme-swatch[data-theme="plum"] {
background: hsl(320 35% 45%);
}
.theme-swatch[data-theme="ocean"] {
background: hsl(200 70% 45%);
}
.theme-picker input[type="color"] {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--border);
background: transparent;
border-radius: 6px;
cursor: pointer;
}
.theme-picker input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.theme-picker input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 6px;
}
/* Theme dropdown визуални детайли */
.theme-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 8px;
}
/* бутон вътре в менюто да изглежда като ред */
.theme-dropdown .dropdown-item.theme-option {
width: 100%;
background: transparent;
border: 0;
padding: 8px 10px;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
color: var(--txt);
}
.theme-dropdown .dropdown-item.theme-option:hover {
background: hsl(var(--p-h) var(--p-s) 90% / 0.25);
}
/* цветна „капка“ */
.theme-dropdown .swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--sw);
display: inline-block;
}
/* ред за color picker */
.theme-dropdown .color-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
}
.theme-dropdown input[type="color"] {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--border);
background: transparent;
border-radius: 6px;
cursor: pointer;
}
.theme-dropdown input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.theme-dropdown input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 6px;
}
/* BRAND BAR (само логото, извън навигацията) */
.brandbar {
background: var(--bg-page); /* може и transparent */
border-bottom: 1px solid var(--border);
}
.brandbar-inner {
display: flex;
align-items: center;
justify-content: flex-start; /* смени на center ако искаш центрирано лого */
min-height: 88px; /* височината на лентовия ред с логото */
gap: 16px;
}
/* Размер на логото – независим от навбара */
.brand-logo {
height: 88px; /* контролирай свободно */
width: auto;
object-fit: contain;
}
/* NAV си остава както е; ако искаш по-нисък, можеш:
:root { --nav-h: 60px; }
*/
/* Лого над навигацията */
.brand-floating {
position: absolute; /* изваждаме го от потока */
top: 4px; /* отстояние отгоре */
right: 45%; /* центрирано */
transform: translateX(-50%);
z-index: 2000; /* над навигацията */
display: block;
text-align: center;
}
.brand-floating .brand-logo {
height: 120px; /* контролирай размер независимо */
width: auto;
object-fit: contain;
}
@media (max-width: 480px) {
.menu-button {
font-size: 18px;
padding: 6px 8px;
}
.side-menu-header {
padding: 12px;
}
.side-nav {
padding: 8px 10px 16px;
}
}
/* ===== Background hero image (behind all content) ===== */
:root {
--hero-img-w: 2000px; /* целева ширина */
--hero-img-aspect: 7 / 3; /* ~1000 x 600 */
--hero-img-offset-top: calc(var(--nav-h) + 160px); /* под навбара */
--hero-img-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
--hero-img-border: 1px solid rgba(0, 0, 0, 0.12);
--hero-overlay: rgba(0, 0, 0, 0.6); /* много леко затъмняване, за да не „посивява“ текста */
--hero-blur: 2.5px; /* леко замъгляване на самото изображение */
}
/* ==== HERO: стабилно подреждане на слоевете ==== */
/* Снимката и затъмнението да са НАД фоновете на body, но ПОД съдържанието */
body.home-hero::before,
body.home-hero::after {
content: "";
position: fixed;
top: var(--hero-img-offset-top);
left: 50%;
transform: translateX(-50%);
width: min(var(--hero-img-w), 95vw);
height: clamp(520px, 34vw, 760px);
aspect-ratio: auto;
border-radius: var(--radius);
border: var(--hero-img-border);
box-shadow: var(--hero-img-shadow);
pointer-events: none;
z-index: 0;
}
/* изображение */
body.home-hero::before {
background: url("/static/images/background/background_image.jpg") center / cover no-repeat;
}
/* затъмнение над изображението, но пак под съдържанието */
body.home-hero::after {
background: var(--hero-overlay);
}
/* Съдържанието да е над hero-слоевете */
.modern-header,
main.page,
.site-footer {
position: relative;
z-index: 1;
}
/* ==== HERO: мобилни размери (телефони/таблети) ==== */
@media (max-width: 768px) {
:root {
--hero-img-offset-top: calc(var(--nav-h) + 6px);
}
body.home-hero::before,
body.home-hero::after {
width: 100vw;
max-width: 100vw;
left: 50%;
transform: translateX(-50%);
height: clamp(300px, 52vh, 460px);
aspect-ratio: auto;
background-position: center center;
}
.home-hero .hero-image {
position: relative;
z-index: 1;
min-height: clamp(300px, 52vh, 460px);
}
}
@media (max-width: 420px) {
body.home-hero::before,
body.home-hero::after {
height: clamp(260px, 48vh, 380px);
background-position: center center;
}
.home-hero .hero-image {
min-height: clamp(260px, 48vh, 380px);
}
}
/* Active жанр в лявото меню */
.side-submenu a.is-active {
background: var(--primary-soft);
color: var(--txt);
border-radius: var(--radius-sm);
}
/* Inbox */
.inbox-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.inbox-item {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.inbox-link {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 12px;
color: inherit;
}
.inbox-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
}
.inbox-avatar .initial {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-soft);
}
.inbox-row {
display: flex;
justify-content: space-between;
}
.badge-unread {
position: absolute;
right: 8px;
top: 8px;
min-width: 20px; /* фиксиран минимален размер */
height: 20px;
padding: 0; /* махаме допълнителните отстояния */
background: var(--primary);
color: #fff;
border-radius: 50%; /* истински кръг */
font-size: 0.75rem;
font-weight: 600;
display: flex; /* за центриране */
align-items: center;
justify-content: center;
line-height: 1; /* избягва допълнителна височина */
}
/* Thread */
.thread-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.thread-header .avatar img, .thread-header .initial {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-soft);
}
.messages {
display: grid;
gap: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
max-height: 60vh;
overflow: auto;
}
.msg {
display: flex;
}
.msg.in {
justify-content: flex-start;
}
.msg.out {
justify-content: flex-end;
}
.bubble {
max-width: 70%;
background: #f7f7f7;
border-radius: 12px;
padding: 8px 10px;
border: 1px solid var(--border);
}
.msg.out .bubble {
background: var(--primary-soft);
}
.bubble .meta {
font-size: .8rem;
color: var(--txt-dim);
margin-top: 4px;
text-align: right;
}
.composer {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
margin-top: 10px;
}
.composer textarea.input {
height: auto;
min-height: 60px;
}
/* --- Compact expanding search (nav) --- */
.searchbar {
display: block;
}
.searchbar-field {
position: relative;
height: 50px;
/* компактна ширина по начало; разширява се при фокус */
width: 200px;
transition: width .82s ease;
}
.searchbar-field:focus-within {
width: 420px;
}
/* ако има текст, също поддържай по-широко поле */
.searchbar-field .search-input:not(:placeholder-shown) {
/* „пингва“ :focus-within чрез ширината на родителя – няма директна връзка,
затова просто даваме по-голяма база на самото поле */
}
.search-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
font: inherit;
color: var(--txt);
padding: 0 40px 0 12px; /* място за иконата вдясно */
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.search-input::placeholder {
color: var(--txt-dim);
opacity: .8;
}
.search-input:focus {
outline: none;
border-color: hsl(var(--p-h) 60% 55%);
box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}
/* Бутонът с лупичка вътре в полето (вдясно) */
.search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
height: 28px;
width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: var(--primary);
color: #fff;
cursor: pointer;
transition: filter .15s ease, box-shadow .15s ease;
}
.search-btn:hover {
filter: brightness(.98);
box-shadow: 0 2px 8px hsl(var(--p-h) var(--p-s) 35% / .25);
}
/* Мобилен – да заема ширина на контейнера/менюто */
@media (max-width: 640px) {
.searchbar-field {
width: 100%;
}
.searchbar-field:focus-within {
width: 100%;
}
}
/* =================================== */
/* ===== СТИЛОВЕ ЗА DASHBOARD/ФИЙД ===== */
/* =================================== */
/* --- Главен контейнер --- */
.dashboard-container {
max-width: 960px; /* Оптимална ширина за четене на фийд */
margin: 24px auto; /* Центриране на страницата */
display: grid;
gap: 20px; /* Разстояние между елементите */
color: var(--txt);
}
/* --- Карта (общ стил за всички кутии) --- */
.new-post-form,
.activity-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* --- Форма за нов пост --- */
.new-post-form form {
padding: 16px;
display: grid;
gap: 10px;
}
.new-post-form textarea {
width: 100%;
border: none;
background: var(--bg-page);
border-radius: var(--radius-sm);
padding: 12px;
font-size: 1.1rem;
min-height: 80px;
resize: vertical;
outline: none;
transition: box-shadow .2s ease;
}
.new-post-form textarea:focus {
box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}
.new-post-form button {
justify-self: end; /* Подравняване на бутона вдясно */
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.new-post-form button:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
/* --- Карта на събитие/пост във фийда --- */
.activity-item {
padding: 16px;
}
/* Хедър на поста (аватар, име, време) */
.activity-header {
display: flex;
align-items: center;
gap: 12px;
margin: 12px;
}
.activity-header .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.activity-user-info {
display: flex;
flex-direction: column;
}
.activity-user-info .username {
font-weight: 700;
color: var(--txt);
}
.activity-user-info .timestamp {
font-size: var(--fs-sm);
color: var(--txt-dim);
}
/* Съдържание на поста */
.activity-content {
font-size: 1.05rem;
line-height: 1.6;
padding-bottom: 12px;
/* Позволява пренасяне на дълги думи/линкове */
word-wrap: break-word;
word-break: break-word;
}
.activity-content a {
color: var(--primary);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
}
/* Разделителна линия */
.activity-divider {
border: 0;
height: 1px;
background-color: var(--border);
margin: 12px 0;
}
/* Бутони за действия (Реакция, Коментар) */
.activity-actions {
display: flex;
gap: 8px;
}
.activity-actions .action-btn {
flex: 1; /* Бутоните да заемат равна ширина */
padding: 8px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.95rem;
color: var(--txt-dim);
cursor: pointer;
transition: background-color .2s ease;
}
.activity-actions .action-btn:hover {
background-color: var(--primary-soft);
}
/* Секция за коментари */
.comments-section {
padding-top: 12px;
}
.comment {
display: flex;
gap: 10px;
margin-top: 10px;
}
.comment .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.comment-body {
background: var(--bg-page);
padding: 8px 12px;
border-radius: var(--radius);
flex: 1;
}
.comment-body .username {
font-weight: 600;
font-size: 0.9rem;
}
.comment-body p {
margin: 4px 0 0;
font-size: 0.95rem;
}
/* Форма за нов коментар */
.comment-form {
display: flex;
gap: 10px;
margin-top: 12px;
}
.comment-form .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
.comment-form input {
flex: 1;
border: 1px solid var(--border);
background: var(--bg-page);
border-radius: 999px; /* Като в Messenger */
padding: 6px 14px;
outline: none;
}
.comment-form input:focus {
border-color: var(--primary);
}
/* ========================================================== */
/* ===== ФИНАЛНА ПОПРАВКА ЗА ВИДИМОСТТА НА DASHBOARD-А ===== */
/* ========================================================== */
.dashboard-container .feed .activity-item {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: 10px;
}
/* бутончетата за реакции да са компактни */
.reaction-buttons {
display: flex;
gap: 4px; /* много малко разстояние */
}
.reaction-buttons .action-btn {
padding: 2px 6px;
font-size: 16px;
border: none;
background: transparent;
cursor: pointer;
line-height: 1;
}
/* инпутът за коментар с вграден бутон */
.comment-form {
display: flex;
align-items: center;
margin-top: 8px;
}
.comment-form .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 6px;
}
.comment-input-wrapper {
flex: 1;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 20px;
padding: 2px 6px;
}
.comment-input-wrapper input {
flex: 1;
border: none;
outline: none;
padding: 6px;
font-size: 14px;
border-radius: 20px;
}
.comment-submit-btn {
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
padding: 4px 8px;
}
/*.post-actions,*/
/*.comment-actions {*/
/* margin-left: auto;*/
/* display: flex;*/
/* gap: 6px;*/
/*}*/
.edit-btn,
.delete-btn {
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 2px 4px;
}
.edit-btn:hover {
color: #2a7cff;
}
.delete-btn:hover {
color: #d9534f;
}
.reaction-buttons {
display: flex;
gap: 4px;
}
.reaction-buttons .action-btn {
padding: 2px 6px;
font-size: 16px;
border: none;
background: transparent;
line-height: 1;
cursor: pointer;
}
.post-actions, .comment-actions {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.edit-btn, .delete-btn {
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 2px 4px;
}
.edit-btn:hover {
color: #2a7cff;
}
.delete-btn:hover {
color: #d9534f;
}
/* ===============================
Comment form — responsive fix
=============================== */
.comment-form {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
width: 100%;
max-width: 100%;
min-width: 0; /* позволява на децата да се свият */
}
.comment-form > .avatar,
.comment-form > .presence-anchor {
flex: 0 0 32px; /* фиксиран размер за аватара */
width: 32px;
height: 32px;
border-radius: 50%;
/*overflow:hidden;*/
}
.comment-form > .presence-anchor .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.comment-input-wrapper {
flex: 1 1 auto; /* позволи свиване */
min-width: 0; /* КРИТИЧНО: иначе overflow под 440px */
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
border-radius: 20px;
padding: 2px 6px;
background: var(--bg-page);
box-sizing: border-box;
max-width: 100%;
overflow: hidden; /* не допуска изтичане на съдържание */
}
.comment-input-wrapper input {
flex: 1 1 auto;
min-width: 0; /* КРИТИЧНО: позволява placeholder-ът да се свие */
border: none;
outline: none;
padding: 6px 8px;
border-radius: 20px;
background: transparent;
width: 100%;
}
.comment-emoji,
.comment-submit-btn {
flex: 0 0 auto;
white-space: nowrap;
}
.comment-submit-btn {
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
padding: 4px 8px;
}
/* Контекстът около формата също да няма твърда минимална ширина */
.comments-section,
.activity-item,
.card-base {
min-width: 0;
}
/* Допълнителна „сигурна мрежа“ за много тесни екрани:
- по-малки отстояния
- по желание скриваме емоджи бутона (спести хоризонтално място) */
@media (max-width: 420px) {
.comment-form {
gap: 6px;
}
.comment-input-wrapper {
gap: 6px;
padding: 2px 4px;
}
.comment-emoji {
display: none;
}
/* ако искаш да остане видим — махни този ред */
}
.new-post-actions .upload-icon {
color: var(--txt);
opacity: 0.9;
}
.new-post-actions .upload-icon:hover {
opacity: 1;
}
/* Единична снимка (старото поле) */
.post-image {
display: block;
max-width: 100%;
height: auto;
max-height: 70vh; /* да не заемa целия екран */
object-fit: contain;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
margin-top: 8px;
}
/* Галерия от много снимки */
.post-images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-top: 8px;
}
.post-images-grid img {
width: 100%;
height: 140px; /* уеднаквена височина за „картинки“ */
object-fit: cover; /* crop към миниатюра */
border-radius: var(--radius-sm);
border: 1px solid var(--border);
transition: transform .15s ease;
}
.post-images-grid a:hover img {
transform: scale(1.09);
}
/* Сигурност срещу прекалено високи изображения в съдържанието */
.activity-content img {
max-width: 100%;
height: auto;
max-height: 50vh;
object-fit: contain;
}
.searchbar {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px;
align-items: center;
}
.searchbar .search-scope {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--primary);
background: color-mix(in hsl, var(--primary) 90%, black);
color: white;
border-radius: 10px;
padding: 8px 10px;
font-size: .95rem;
}
.searchbar .qa-search-input {
width: 100%;
}
.searchbar .qa-search-btn {
min-width: 40px;
}
/* Контейнер с карти за потребители */
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin-top: 10px;
}
/* Една карта */
.user-card {
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
padding: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.user-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Линкът вътре */
.user-card-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
/* Аватар */
.user-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
/* Инфо */
.user-info {
flex: 1;
overflow: hidden;
}
.user-name {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--primary, #333);
}
.user-username {
margin: 0;
font-size: 0.85rem;
color: #666;
}
.site-footer {
background: var(--bg-nav-blur);
border-top: 1px solid var(--border);
color: var(--txt-dim);
font-size: var(--fs-sm);
padding: 20px 10px 0px;
display: flex;
flex-direction: column;
gap: 24px;
flex-shrink: 0; /* не се свива */
}
.site-footer a {
color: var(--txt-dim);
transition: color .2s;
}
.site-footer a:hover {
color: var(--primary);
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px;
}
.footer-branding {
flex: 1 1 220px;
}
.footer-logo img {
height: 48px;
width: auto;
object-fit: contain;
margin-bottom: 12px;
}
.footer-motto {
font-size: var(--fs-base);
}
.footer-links {
display: flex;
flex: 2 1 500px;
gap: 32px;
flex-wrap: wrap;
}
.footer-section h4 {
font-size: var(--fs-base);
font-weight: 700;
margin-bottom: 12px;
}
.footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-section ul li {
margin-bottom: 6px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social svg {
width: 24px;
height: 24px;
fill: currentColor;
transition: color .2s ease;
}
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
font-size: var(--fs-xs);
}
.footer-branding a {
display: flex;
align-items: center;
gap: 4px; /* разстояние между логото и текста */
}
.footer-logo {
display: flex;
align-items: center; /* центрира логото и текста вертикално */
gap: 8px; /* разстояние между логото и текста */
}
.footer-logo-text {
display: flex;
flex-direction: column;
position: relative;
}
.footer-logo-text h4.gradient-text {
position: relative;
top: 30px; /* смъква само HITALNIK леко */
}
.footer-logo-text .footer-slogan {
margin: 0;
font-size: 0.85rem;
color: var(--txt-dim);
}
.yt-embed-wrap {
position: relative;
width: 100%;
max-width: 820px; /* по желание */
aspect-ratio: 16 / 9; /* модерно, без padding hacks */
background: #000;
border-radius: var(--radius-sm);
overflow: hidden;
margin: 8px 0;
box-shadow: var(--shadow);
}
.yt-embed-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.notif-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
}
.notif-icon {
width: 22px;
height: 22px;
object-fit: contain;
filter: brightness(0) invert(1); /* ако иконата е черна, това я прави бяла на тъмен хедър */
transition: transform 0.2s ease, filter 0.2s ease;
}
.notif-btn:hover .notif-icon {
transform: scale(1.1);
filter: brightness(1.2);
}
/* Камбанка + бадж */
.notif-wrap {
position: relative;
display: inline-block;
}
.notif-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.notif-btn {
font-size: 22px;
line-height: 1;
}
/* по-голяма камбанка ако искаш */
.notif-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(40%, -40%);
background: #e00;
color: white;
font-size: 10px;
font-weight: bold;
line-height: 1;
padding: 2px 5px;
border-radius: 999px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
/* Dropdown */
.notif-dropdown {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: min(320px, 90vw);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 8px;
z-index: 2000;
}
.notif-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
font-weight: 600;
}
.notif-all {
font-weight: 500;
color: var(--txt-dim);
}
.notif-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.notif-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px;
border-radius: 8px;
}
.notif-item:hover {
background: hsl(var(--p-h) var(--p-s) 95%);
}
.notif-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
margin-top: 6px;
flex: 0 0 auto;
}
.notif-text {
flex: 1;
}
.notif-text a {
color: inherit;
}
.notif-time {
font-size: .8rem;
color: var(--txt-dim);
margin-top: 2px;
}
.notif-text {
max-width: 100%;
}
.notif-text a, .notif-text span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Reaction popover */
.reaction-widget {
position: relative;
display: inline-block;
}
.react-trigger {
position: relative;
}
.react-menu {
position: absolute;
inset: auto auto calc(100% + 6px) 0; /* по подразбиране над бутона */
display: none;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
padding: 6px;
gap: 6px;
align-items: center;
justify-content: center;
white-space: nowrap;
z-index: 20;
}
.reaction-widget.open .react-menu {
display: flex;
}
.react-choice {
font-size: 20px;
line-height: 1;
border: none;
background: transparent;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
}
.react-choice:hover {
background: rgba(0, 0, 0, .06);
}
/* ако няма място отгоре, ще превключим под бутона (JS добавя .below) */
.react-menu.below {
inset: calc(100% + 6px) auto auto 0;
}
.action-btn,
.reaction-widget .react-trigger {
border: none;
background: transparent;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
line-height: 1;
}
.action-btn:hover,
.reaction-widget .react-trigger:hover {
background: rgba(0, 0, 0, .06);
}
.side-menu {
transform: translateX(-100%);
transition: transform .25s ease;
}
.menu-open .side-menu {
transform: translateX(0);
}
.side-overlay[hidden] {
display: none;
}
.side-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.menu-open .side-overlay {
opacity: 1;
pointer-events: auto;
}
/* Акордеон в side меню */
.side-accordion-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.side-accordion-head .side-link {
flex: 1 1 auto;
text-decoration: none;
}
.side-accordion-toggle {
flex: 0 0 auto;
background: #fff;
border: 1px solid var(--border, #e5e7eb);
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-grid;
place-items: center;
cursor: pointer;
}
.side-accordion-toggle:hover {
background: #f3f4f6;
}
.side-accordion-toggle .chev {
transition: transform .18s ease;
margin-left: 0;
}
.side-accordion-toggle[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.side-submenu {
margin: 6px 0 0 0;
padding-left: 16px;
display: grid;
gap: 6px;
list-style: none;
}
.side-submenu[hidden] {
display: none;
}
.side-submenu a {
display: block;
text-decoration: none;
}
/* Presence dot: да застъпва аватара, без да блокира кликовете */
.presence-anchor {
position: relative;
display: inline-block;
line-height: 0;
}
.presence-anchor .presence-dot {
position: absolute;
right: 1px; /* вътре в аватара → застъпва */
bottom: 1px; /* ↑ можеш да нагласиш на 1–4px по вкус */
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fff; /* тънък бял контур */
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: 2;
pointer-events: auto; /* да хваща hover за title */
}
.presence-anchor .presence-dot {
cursor: default; /* стандартен курсор */
}
.presence-anchor .presence-dot.online {
background: #22c55e;
}
.presence-anchor .presence-dot.offline {
background: #cbd5e1;
}
/* малки аватари (по желание) */
.presence-anchor.is-sm .presence-dot {
width: 8px;
height: 8px;
border-width: 1.5px;
}
/* индикаторът да не блокира кликове по аватара */
/*.presence-anchor .presence-dot { pointer-events: none; }*/
.activity-item.pinned {
border: 6px double var(--primary);
border-radius: 12px;
position: relative;
background: var(--primary-soft);
}
.pinned-badge {
position: absolute;
top: 5px;
right: 5px;
font-weight: 700;
font-size: .75rem;
padding: 2px 4px;
border-radius: 999px;
background: color-mix(in oklab, var(--primary), white 50%);
border: 2px solid var(--primary);
}
.admin-post-options {
display: flex;
gap: 16px;
align-items: center;
margin: 8px 0;
border-radius: 12px;
}
.comment .presence-dot {
display: none !important;
}
/* формата и контейнерът могат да се свиват */
.comment-form {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
min-width: 0; /* позволи свиване вътре в картата */
}
/* вътрешният wrapper да може да се свива, но без да прелива */
.comment-input-wrapper {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
border-radius: 20px;
padding: 2px 6px;
background: var(--bg-page);
min-width: 0; /* КЛЮЧОВО: иначе input-ът не се свива */
}
/* самото input поле да запълва, но да може да се смалява */
.comment-input-wrapper input {
flex: 1 1 140px; /* расте и се свива; начална база 140px */
min-width: 0; /* КЛЮЧОВО: без това може да изтиква другите елементи */
border: none;
outline: none;
padding: 6px 8px;
border-radius: 20px;
background: transparent;
}
/* емоджи бутонът да НЕ расте */
.comment-input-wrapper .emoji-toggle {
flex: 0 0 36px; /* фиксирана ширина/височина */
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ако глобалните .btn имат width:100% на малки екрани — нека тук не важи */
.comment-form .btn {
width: auto;
}
/* бутонът за изпращане също да е фиксиран и видим */
.comment-submit-btn {
flex: 0 0 auto;
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
padding: 4px 8px;
}
/* мини туик за съвсем тесни екрани */
@media (max-width: 380px) {
.comment-input-wrapper {
gap: 6px;
}
.comment-input-wrapper .emoji-toggle {
flex-basis: 28px;
width: 28px;
height: 28px;
}
.comment-form .presence-anchor {
flex-basis: 28px;
width: 28px;
height: 28px;
}
}
/* ========== New post actions (под пост формата) ========== */
/* правим контейнера grid: [емоджи] | [снимки] | [публикувай вдясно] */
.new-post-actions {
display: grid !important; /* убива inline display:flex */
grid-template-columns: auto auto 1fr; /* третата колона взима остатъка */
align-items: center;
column-gap: 8px;
row-gap: 0; /* без вертикален разрив */
}
/* вътрешният (държи емоджи+снимки) се „сплесква“,
така че двете му деца да станат директни grid айтеми */
.new-post-actions > div {
display: contents !important; /* игнорира inline display:flex */
min-width: 0;
justify-content: flex-start !important;
}
/* унифицирани бутони вътре */
.new-post-actions .btn,
.new-post-actions .upload-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
height: 36px;
line-height: 1;
white-space: nowrap; /* не чупи текста вътре */
min-width: 0;
}
/* емоджи бутон – квадратен/компактен */
.new-post-actions .emoji-toggle {
width: 36px;
height: 36px;
padding: 0;
text-align: center;
}
/* „Снимки“ е label с иконка + текст */
.new-post-actions .upload-icon {
gap: 6px;
}
/* Само за бутона „Качи снимки“ (icon-only, max-width 44px) */
.new-post-actions label.upload-icon[for="id_images"] {
max-width: 44px;
justify-content: center; /* центрира иконата */
box-sizing: border-box;
}
/* ако някъде има текст вътре – скрий го за този бутон */
.new-post-actions label.upload-icon[for="id_images"] span {
display: none;
}
/* „Публикувай“ да стои вдясно (в 3-тата колона) и да не запълва */
.new-post-actions .btn.btn-primary {
grid-column: 3; /* гарантирано в третата колона */
justify-self: end; /* вдясно в своята колона */
width: auto !important;
flex: 0 0 auto;
}
/* ===== Респонсив щипки ===== */
@media (max-width: 560px) {
.new-post-actions {
column-gap: 6px;
}
.new-post-actions .btn,
.new-post-actions .upload-icon {
height: 34px;
padding: 0 10px;
font-size: .95rem;
}
}
@media (max-width: 420px) {
.new-post-actions {
column-gap: 4px;
}
.new-post-actions .btn,
.new-post-actions .upload-icon {
height: 32px;
padding: 0 8px;
font-size: .9rem;
}
}
/* ========== Admin пост-опции (pin / забрана на коментари) ========== */
.admin-post-options {
display: flex;
gap: 16px;
align-items: center;
margin: 8px 0;
flex-wrap: wrap; /* да пренася на нов ред */
}
.admin-post-options label {
display: inline-flex;
gap: 8px;
align-items: center;
white-space: nowrap; /* изглежда по-стегнато на широки екрани */
}
@media (max-width: 560px) {
.admin-post-options {
gap: 12px;
}
.admin-post-options label span {
font-size: .95rem;
white-space: normal;
}
}
@media (max-width: 420px) {
.admin-post-options label span {
font-size: .85rem;
}
}
/* popover да е над всичко */
.react-menu {
z-index: 1000;
}
/* по-големи „мишени“ на touch */
@media (pointer: coarse) {
.react-menu {
padding: 8px;
}
.react-choice {
width: 44px;
height: 44px;
font-size: 24px;
}
}
/* Контейнерът на филтъра */
.top-filter {
margin: 10px;
display: flex;
justify-content: flex-end; /* вляво */
align-items: center; /* центрира съдържанието вертикално */
}
/* Label + select подредени хубаво */
.top-filter label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--txt-dim, #666);
}
/* Самото падащо меню */
.top-filter select {
min-width: 180px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
line-height: 1.2;
cursor: pointer;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* Hover / focus състояния */
.top-filter select:hover {
border-color: rgba(0, 0, 0, 0.2);
background: #fff;
}
.top-filter select:focus {
border-color: var(--accent, #f97316);
box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18); /* ако имаш друг accent – смени */
}
/* Малко свиване на мобилни */
@media (max-width: 600px) {
.top-filter {
margin-top: 8px;
}
.top-filter select {
min-width: 140px;
font-size: 0.85rem;
padding: 5px 9px;
}
}
.modern-header {
position: sticky;
top: 0;
z-index: 1200;
transition: transform .22s ease, opacity .22s ease;
will-change: transform;
}
.modern-header.header-hidden {
transform: translateY(-100%);
}
.search-scope-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-scope {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2.2rem; /* място за стрелката */
}
.search-scope-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-scope {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2.2rem;
}
.search-scope-wrap::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translateY(-65%) rotate(45deg);
transform-origin: center;
transition: transform 0.18s ease;
pointer-events: none;
}
.search-scope-wrap:focus-within::after {
transform: translateY(-35%) rotate(225deg);
}
.catalog-missing-book-cta {
margin-top: 12px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.missing-book-text {
margin: 0;
line-height: 1.5;
}
.missing-book-text a {
font-weight: 700;
text-decoration: none;
}
.missing-book-text a:hover,
.missing-book-text a:focus-visible {
text-decoration: underline;
}
.auth-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.auth-actions .btn {
width: auto;
}
/* =========================
Home hero mobile tuning
========================= */
@media (max-width: 768px) {
.home-hero .hero {
gap: 18px;
margin-top: 18px;
}
.home-hero .hero-text {
padding-inline: 6px;
}
.home-hero .hero-text h1 {
font-size: clamp(1.7rem, 7vw, 2.2rem);
line-height: 1.08;
margin-bottom: 12px;
}
.home-hero .hero-text .lead {
font-size: clamp(0.98rem, 3.8vw, 1.1rem);
line-height: 1.45;
margin-bottom: 14px;
}
.home-hero .section-title {
font-size: 1.02rem;
line-height: 1.25;
margin-bottom: 8px;
}
.home-hero .hero-actions {
gap: 8px;
}
.home-hero .hero-actions .btn {
font-size: 1rem;
min-height: 40px;
padding: 0 14px;
}
/* леко повече височина, без да изглежда стречнато */
body.home-hero::before,
body.home-hero::after {
height: clamp(250px, 52vh, 430px);
}
.home-hero .hero-image {
min-height: clamp(250px, 52vh, 430px);
}
}
@media (max-width: 420px) {
.home-hero .hero {
gap: 14px;
margin-top: 12px;
}
.home-hero .hero-text h1 {
font-size: clamp(1.45rem, 8vw, 1.9rem);
line-height: 1.06;
margin-bottom: 10px;
}
.home-hero .hero-text .lead {
font-size: 0.92rem;
line-height: 1.38;
margin-bottom: 12px;
}
.home-hero .section-title {
font-size: 0.95rem;
}
.home-hero .hero-actions .btn {
font-size: 0.95rem;
min-height: 38px;
padding: 0 12px;
}
body.home-hero::before,
body.home-hero::after {
height: clamp(220px, 46vh, 340px);
}
.home-hero .hero-image {
min-height: clamp(220px, 46vh, 340px);
}
}
.image-card .section-title {
display: inline-block;
margin: 0 0 14px 0;
padding: 4px 14px;
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-weight: 700;
color: #2b2b2b;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.header-card {
position: relative;
overflow: visible;
padding-bottom: 34px;
}
.site-stats-bar--header {
position: absolute !important;
right: 16px !important;
left: auto !important;
bottom: 8px !important;
z-index: 20;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
width: auto !important;
max-width: calc(100% - 32px);
margin: 0 !important;
padding: 5px 10px;
font-size: 0.78rem;
line-height: 1.1;
white-space: nowrap !important;
text-align: right !important;
color: #1f1f1f;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .10);
backdrop-filter: blur(6px);
}
.site-stats-bar--header .site-stats-sep {
opacity: .45;
}
@media (max-width: 900px) {
.header-card {
padding-bottom: 30px;
}
.site-stats-bar--header {
right: 12px !important;
bottom: 6px !important;
font-size: 0.72rem;
padding: 4px 8px;
gap: 6px;
}
}
@media (max-width: 640px) {
.header-card {
padding-bottom: 40px;
}
.site-stats-bar--header {
position: absolute !important;
right: 8px !important;
left: auto !important;
bottom: 6px !important;
display: inline-flex !important;
justify-content: flex-end !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: auto !important;
max-width: calc(100% - 16px);
margin: 0 !important;
padding: 4px 8px;
font-size: 0.66rem;
line-height: 1.1;
white-space: nowrap !important;
text-align: right !important;
}
.site-stats-bar--header .site-stats-sep {
display: inline !important;
}
}
@media (max-width: 420px) {
.header-card {
padding-bottom: 46px;
}
.site-stats-bar--header {
right: 6px !important;
bottom: 6px !important;
font-size: 0.60rem;
padding: 3px 6px;
gap: 4px;
max-width: calc(100% - 12px);
}
}
/* =========================
Django messages
========================= */
.site-messages {
margin: 18px auto 14px;
display: grid;
gap: 10px;
}
.site-messages .alert {
position: relative;
padding: 14px 16px 14px 18px;
border-radius: 14px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow);
color: var(--txt);
line-height: 1.45;
font-size: 0.98rem;
overflow: hidden;
}
.site-messages .alert::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: var(--primary);
}
.site-messages .alert-info {
background: hsl(var(--p-h) 100% 98%);
border-color: hsl(var(--p-h) 45% 82%);
}
.site-messages .alert-info::before {
background: var(--primary);
}
.site-messages .alert-success {
background: #f2fbf5;
border-color: #b9e5c4;
color: #1f5130;
}
.site-messages .alert-success::before {
background: #2f9e44;
}
.site-messages .alert-warning {
background: #fff8e8;
border-color: #f0d79a;
color: #7a5612;
}
.site-messages .alert-warning::before {
background: #d18b00;
}
.site-messages .alert-error,
.site-messages .alert-danger {
background: #fff3f3;
border-color: #e9b3b3;
color: #8a2d2d;
}
.site-messages .alert-error::before,
.site-messages .alert-danger::before {
background: #c92a2a;
}
@media (max-width: 640px) {
.site-messages {
margin: 14px auto 10px;
gap: 8px;
}
.site-messages .alert {
padding: 12px 13px 12px 15px;
font-size: 0.93rem;
border-radius: 12px;
}
}
.badge-new {
position: absolute;
top: 6px;
left: 6px;
padding: 2px 6px;
border-radius: 999px;
background: var(--primary);
color: #fff;
font-size: .72rem;
font-weight: 800;
border: 1px solid rgba(255, 255, 255, .6);
}
.cover-wrap {
position: relative;
display: inline-block;
}
/* ===== CSP cleanup: reward overlay ===== */
.reward-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .6);
}
.reward-overlay[hidden] {
display: none !important;
}
.reward-overlay__card {
width: 360px;
max-width: min(90%, 360px);
position: relative;
padding: 20px 16px 16px;
text-align: center;
font-family: inherit;
background: #fff;
border: 2px solid var(--primary);
border-radius: 16px;
box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}
.reward-overlay__icon {
margin-bottom: 8px;
font-size: 2.5rem;
line-height: 1;
}
.reward-overlay__heading {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
color: #111;
}
.reward-overlay__text {
margin: 0 0 12px;
font-size: .9rem;
line-height: 1.4;
color: #444;
}
.reward-overlay__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.reward-overlay__btn {
flex: 1 1 auto;
min-width: 120px;
padding: 10px 12px;
border-radius: 8px;
font-size: .9rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
}
.reward-overlay__btn--primary {
color: #fff;
background: var(--primary);
box-shadow: 0 6px 16px hsl(var(--p-h) var(--p-s) 25% / .25);
}
.reward-overlay__btn--light {
color: #111;
background: #f3f4f6;
border: 1px solid #d1d5db;
cursor: pointer;
}
/* ===== CSP cleanup: swatches ===== */
.swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--sw);
display: inline-block;
}
.swatch-ocher {
--sw: hsl(40 90% 45%);
}
.swatch-sage {
--sw: hsl(95 28% 34%);
}
.swatch-plum {
--sw: hsl(320 35% 45%);
}
.swatch-ocean {
--sw: hsl(200 70% 45%);
}
/* ===== CSP cleanup: side profile ===== */
.side-profile .profile-head {
display: flex;
align-items: center;
gap: 12px;
margin: 6px 8px 6px;
}
.side-profile .profile-head-avatar {
display: inline-block;
flex: 0 0 auto;
width: 48px;
height: 48px;
overflow: hidden;
border-radius: 50%;
border: 2px solid var(--primary);
}
.side-profile .profile-head-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.side-profile .profile-head-meta {
flex: 1 1 auto;
min-width: 0;
}
.side-profile .profile-head-name {
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.side-profile .profile-head-points {
font-size: .9rem;
opacity: .9;
}
.side-profile .theme-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0 8px 12px;
}
.side-profile .theme-row__label {
min-width: 52px;
font-weight: 600;
}
/* comment delete form */
.comment-delete-form {
display: inline;
}
.side-logout-form {
margin: 0;
}
/* ===== CSP cleanup: edit comment ===== */
.edit-comment-page {
max-width: 720px;
margin: 24px auto;
}
.edit-comment-card {
padding: 16px;
}
.edit-comment-title {
margin: 0 0 12px;
}
.edit-comment-form {
display: grid;
gap: 12px;
}
.edit-comment-label {
font-weight: 600;
}
.edit-comment-label--spaced {
margin-bottom: 8px;
}
.edit-comment-textarea {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px;
background: var(--bg-page);
resize: vertical;
}
.edit-comment-current-image-row {
display: flex;
align-items: center;
gap: 12px;
}
.edit-comment-image-link {
display: inline-block;
}
.edit-comment-image-preview {
max-height: 120px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.edit-comment-checkbox-label {
display: flex;
align-items: center;
gap: 6px;
}
.edit-comment-spacer {
height: 8px;
}
.edit-comment-upload-btn {
height: 36px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.edit-comment-help-text {
margin-top: 6px;
font-size: 0.9rem;
color: var(--txt-dim);
}
.edit-comment-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 6px;
}
.btn-danger {
background: #b42318;
color: #fff;
border-color: #b42318;
}
.btn-danger:hover {
background: #912018;
border-color: #912018;
color: #fff;
}
/*base_messaging.js*/
.emoji-popover-global {
position: fixed;
left: var(--emoji-popover-left, 8px);
top: var(--emoji-popover-top, 8px);
z-index: 9999;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
overflow: hidden;
max-height: 60vh;
}
.emoji-popover-global[hidden] {
display: none;
}
.emoji-popover-global__picker {
width: 320px;
height: 380px;
}
.clipboard-fallback-input {
position: fixed;
left: -9999px;
top: 0;
}
.share-icon {
display: block;
width: 18px;
height: 18px;
}
.icon-btn {
color: var(--txt);
}
.icon-btn:hover {
color: var(--primary);
}
.pl-btn.disabled,
.pl-btn:disabled {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
/* =========================
Home hero layout fix v2
========================= */
.home-hero .hero {
width: 100%;
max-width: 1900px;
margin: clamp(18px, 4vw, 40px) auto 0;
padding-inline: clamp(48px, 8vw, 190px);
display: grid;
grid-template-columns: minmax(420px, 680px) minmax(320px, 520px);
gap: clamp(24px, 4vw, 64px);
align-items: center;
justify-content: center;
}
.home-hero .hero-text {
min-width: 0;
max-width: 680px;
}
.home-hero .hero-image {
min-width: 0;
display: flex;
justify-content: center;
}
.home-hero .image-card {
width: min(100%, 320px);
display: block;
}
.home-hero .covers-rotator {
width: 100%;
max-width: none;
}
/* Когато вече няма място за комфортни 2 колони */
@media (max-width: 1050px) {
.home-hero .hero {
width: min(760px, calc(100% - 24px));
max-width: 760px;
padding-inline: 0;
grid-template-columns: 1fr;
text-align: center;
gap: 18px;
}
.home-hero .hero-text {
max-width: 680px;
margin-inline: auto;
}
.home-hero .hero-actions {
justify-content: center;
}
.home-hero .image-card {
width: min(100%, 440px);
margin-inline: auto;
}
}
@media (max-width: 420px) {
.home-hero .hero {
width: min(100% - 16px, 420px);
}
.home-hero .image-card {
width: min(100%, 260px);
}
}